import { ZerinaProvider, Button, Card, CardBody, Heading } from "zerina-ui";
import "zerina-ui/styles.css";

export function App() {
  return (
    <ZerinaProvider>
      <Card p="1rem">
        <CardBody>
          <Heading>Zerina UI</Heading>
          <Button>Empieza a construir</Button>
        </CardBody>
      </Card>
    </ZerinaProvider>
  );
}

import "zerina-ui/styles.css";

import React from "react";
import { createRoot } from "react-dom/client";
import { ZerinaProvider } from "zerina-ui";
import "zerina-ui/styles.css";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ZerinaProvider>
      <App />
    </ZerinaProvider>
  </React.StrictMode>
);

import { ZerinaProvider } from "zerina-ui";
import "zerina-ui/styles.css";
import "./my-theme.css";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ZerinaProvider
      theme={{
        defaultTheme: "sinapsis",
        ignoreStoredTheme: true,
        themes: {
          mode: "extend",
          custom: [
            "obsidian-aurora",
            "sinapsis",
            "sol-de-mar",
            "neon-shrine",
            "paper-ink",
          ],
        },
      }}
      layout={{
        defaultMode: "auto",
        mobileBreakpoint: 720,
        deviceKind: "unknown",
      }}
      motion={{
        defaultLevel: "subtle",
        respectReducedMotion: true,
      }}
      toast={{
        placement: "top-right",
        maxToasts: 5,
        defaultDuration: 4500,
      }}
    >
      {children}
    </ZerinaProvider>
  );
}

import "zerina-ui/styles.css";

import { Button, useUITheme } from "zerina-ui";

export function ThemeButton() {
  const { theme, cycleTheme } = useUITheme();

  return (
    <Button onClick={cycleTheme} variant="outline">
      Tema actual: {theme}
    </Button>
  );
}

<ZerinaProvider
  theme={{
    defaultTheme: "sinapsis",
    themes: {
      mode: "extend",
      custom: ["sinapsis"],
    },
  }}
>
  <App />
</ZerinaProvider>

<ZerinaProvider
  motion={{
    defaultLevel: "subtle",
    respectReducedMotion: true,
  }}
>
  <App />
</ZerinaProvider>

import { useUIMotion } from "zerina-ui";

export function MotionDebug() {
  const motion = useUIMotion();

  return <pre>{motion.effectiveLevel}</pre>;
}

<ZerinaProvider
  layout={{
    defaultMode: "auto",
    mobileBreakpoint: 720,
  }}
>
  <App />
</ZerinaProvider>

import {
  Button,
  Field,
  Input,
  PasswordInput,
  Select,
  Textarea,
} from "zerina-ui";

export function LoginForm() {
  return (
    <form>
      <Field label="Email" isRequired>
        <Input type="email" placeholder="you@example.com" />
      </Field>

      <Field label="Contraseña">
        <PasswordInput placeholder="••••••••" />
      </Field>

      <Field label="Rol">
        <Select
          value="admin"
          onChange={() => {}}
          options={[
            { label: "Admin", value: "admin" },
            { label: "Editor", value: "editor" },
          ]}
        />
      </Field>

      <Field label="Notas">
        <Textarea placeholder="Notas opcionales" />
      </Field>

      <Button type="submit">Enviar</Button>
    </form>
  );
}

import { DataTable, type DataTableColumn } from "zerina-ui";

type User = {
  id: string;
  name: string;
  email: string;
  role: string;
};

const columns: DataTableColumn<User>[] = [
  { header: "Nombre", accessor: "name", sortable: true, searchable: true },
  { header: "Email", accessor: "email", searchable: true },
  { header: "Rol", accessor: "role" },
];

const users: User[] = [
  { id: "1", name: "Ada Lovelace", email: "ada@example.com", role: "Admin" },
  { id: "2", name: "Grace Hopper", email: "grace@example.com", role: "Editor" },
];

export function UsersTable() {
  return (
    <DataTable
      data={users}
      columns={columns}
      getRowId={(user) => user.id}
      enableSearch
      enableExportCSV
      exportFilename="users"
      initialRowsPerPage={10}
      mobileMode="auto"
    />
  );
}

import React from "react";
import {
  EditableDataTable,
  type EditableDataTableColumn,
} from "zerina-ui";

type Product = {
  id: string;
  name: string;
  price: number;
  active: boolean;
};

const columns: EditableDataTableColumn<Product>[] = [
  { header: "Nombre", accessor: "name", type: "string", required: true },
  { header: "Precio", accessor: "price", type: "number" },
  { header: "Activo", accessor: "active", type: "boolean" },
];

export function ProductsEditor() {
  const [rows, setRows] = React.useState<Product[]>([
    { id: "p-1", name: "Notebook", price: 20, active: true },
  ]);

  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);

  return (
    <EditableDataTable
      data={rows}
      columns={columns}
      onDataChange={setRows}
      selectedIds={selectedIds}
      onSelectionChange={setSelectedIds}
      getRowId={(row) => row.id}
      enableSearch
      enableExportCSV
    />
  );
}

import React from "react";
import {
  Button,
  Dialog,
  DialogBody,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "zerina-ui";

export function ExampleDialog() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Abrir diálogo</Button>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogHeader>
          <DialogTitle>Confirmar acción</DialogTitle>
        </DialogHeader>

        <DialogBody>Esta acción necesita tu confirmación.</DialogBody>

        <DialogFooter>
          <Button variant="ghost" onClick={() => setOpen(false)}>
            Cancelar
          </Button>
          <Button onClick={() => setOpen(false)}>Continuar</Button>
        </DialogFooter>
      </Dialog>
    </>
  );
}

import { Alert, EmptyState, LoadingState, Progress } from "zerina-ui";

export function FeedbackExample() {
  return (
    <>
      <Alert
        variant="success"
        title="Guardado"
        description="Tus cambios se almacenaron correctamente."
      />

      <LoadingState loading variant="card" />

      <Progress value={72} showValue label="Subida" />

      <EmptyState
        title="Sin registros"
        description="Crea tu primer elemento para comenzar."
      />
    </>
  );
}

import { Button, useToast } from "zerina-ui";

export function SaveButton() {
  const { toast } = useToast();

  return (
    <Button
      onClick={() =>
        toast({
          title: "Guardado",
          description: "El registro fue actualizado.",
          variant: "success",
        })
      }
    >
      Guardar
    </Button>
  );
}

import { Avatar, Badge, Card, CardBody, Tag } from "zerina-ui";

export function ProfileCard() {
  return (
    <Card interactive>
      <CardBody>
        <Avatar name="Ada Lovelace" />
        <Badge colorScheme="primary">Admin</Badge>
        <Tag removable>TypeScript</Tag>
      </CardBody>
    </Card>
  );
}

import { UncontrolledAppShell, Typography } from "zerina-ui";

const routes = [
  {
    path: "/",
    name: "Inicio",
    emoji: "🏠",
    element: <Typography>Contenido de inicio</Typography>,
  },
  {
    path: "/settings",
    name: "Configuración",
    emoji: "⚙️",
    element: <Typography>Contenido de configuración</Typography>,
  },
];

export function ShellExample() {
  return (
    <UncontrolledAppShell
      routes={routes}
      brand={{ title: "Zerina App", subtitle: "Dashboard" }}
      user={{ name: "Ada Lovelace", role: "Admin" }}
    />
  );
}

import React from "react";
import { Button, ConfirmDialog, useConfirmModal } from "zerina-ui";

type User = { id: string; name: string };

export function DeleteUserButton({ user }: { user: User }) {
  const confirm = useConfirmModal<User>();

  return (
    <>
      <Button colorScheme="danger" onClick={() => confirm.open(user)}>
        Eliminar
      </Button>

      <ConfirmDialog
        state={confirm.state}
        onOpenChange={(open) => {
          if (!open) confirm.close();
        }}
        title="Eliminar usuario"
        description={(target) => `¿Seguro que quieres eliminar a ${target.name}?`}
        confirmLabel="Eliminar"
        variant="destructive"
        onConfirm={(target) => {
          console.log("delete", target.id);
          confirm.close();
        }}
      />
    </>
  );
}