@unozero-ai/ui

Los componentes de interfaz de Unozero para React y Next: el mismo <Button> en chatbook, en Billia y en lo que venga. Un botón no se vuelve a escribir dos veces con dos radios distintos. Por dentro son Web Components (Lit), así que traen sus estilos encapsulados en shadow DOM.

Va sobre @unozero-ai/design-tokens: el paquete no trae ni un color ni una medida propia, así que hereda claro/oscuro, densidad y marca blanca sin hacer nada.

Instalación

pnpm add @unozero-ai/ui @unozero-ai/design-tokens

CSS. Los tokens en la hoja global; los componentes traen sus estilos dentro (shadow DOM), así que no hace falta Tailwind ni escanear nada:

@import "@unozero-ai/design-tokens/tokens.css";
@import "@unozero-ai/design-tokens/base.css"; /* opcional: reglas de página */

Fuentes. En Next, brandFontVariables de @unozero-ai/design-tokens/fonts en el <html>. Fuera de Next, carga IBM Plex Sans, Manrope y JetBrains Mono y define --font-ibm-plex-sans, --font-manrope y --font-jetbrains-mono.

Uso

Todo sale de @unozero-ai/ui/react: los componentes, las funciones (toast, confirm, setLabels) y los tipos. Los componentes se pueden importar desde un componente de servidor de Next.

import { Button, Input, Modal, Switch } from "@unozero-ai/ui/react";

<form>
  <Input name="huesped" label="Huésped" required />
  <Switch name="whatsapp" checked label="Avisar por WhatsApp" />
  <Button type="submit" variant="brand">Crear reserva</Button>
</form>

<Modal open={open} heading="Tarifas" onRequestClose={() => setOpen(false)}>…</Modal>

Los campos son controles de formulario nativos: entran en el FormData, validan con required/pattern/minlength, responden a form.reset() y emiten onInput y onChange como un <input>. Los eventos propios del kit llegan como props (onRequestClose, onSelect, onSend).

Usa siempre estos componentes, no las etiquetas <uz-*>: al hidratar el HTML del servidor, React no les pasa las props que no son texto ni engancha sus eventos propios.

Componentes

| Familia | Componentes | |---|---| | Acciones | Button, IconButton, CopyButton, Fab, SocialButton, ThemeToggle, DocsLink | | Formularios | Input, Textarea, Select, NumberInput, SearchInput, PasswordInput (+ medidor), Checkbox, Switch, Combobox, DatePicker, Calendar, OtpInput, CountdownTimer, ColorPicker, StarRating, ImageUpload, FileDropzone, MoneyInput, Field | | Datos | DataTable, List, ListItem, Card, KpiCard, Badge, Avatar, AvatarGroup, Pagination, InfiniteScroll | | Estado y avisos | Alert, Banner, Toaster + toast(), Progress, Spinner, TypingDots, Skeleton, EmptyState, StatusPanel, ErrorFallback, BetaBadge, BetaNotice, SyncStatusBadge | | Capas y navegación | Modal, ConfirmDialog + confirm(), Sheet, Popover, DropdownMenu, MenuItem, Tooltip, Tabs, Stepper, Accordion, AccordionItem, PageHeader | | Conversación | ChatMessage, TypingIndicator, ChatInput, DateSeparator, Markdown, MapEmbed, ChannelBadge, BrandGlyph |

Todos se ven en vivo en la demo del paquete (pnpm --filter @unozero-ai/ui dev → http://localhost:3400), una página por familia.

Tema, densidad y marca

Se fijan una vez en <html> y responde toda la interfaz; ningún componente tiene una prop para esto:

• Tema: la clase dark.
• Densidad: data-density="cozy" pasa de panel (36 px) a cómoda (48 px).
• Marca: applyBrandPreset / setBrandColor de @unozero-ai/design-tokens/presets.

Textos (i18n)

Los textos de chrome («Cerrar», «Copiar», «Notificaciones») salen en español y se cambian una sola vez al arrancar. Los componentes ya montados se repintan:

import { setLabels, setLocale } from "@unozero-ai/ui/react";

setLabels({ close: "Close", copy: "Copy", copied: "Copied" });
setLocale("en");

Movimiento

Cada componente trae su microanimación (pulsar, foco, error, entrada y salida) con las curvas de los tokens, y todas respetan prefers-reduced-motion. Para usar las mismas fuera del kit: shake(el), countTo(el, n), ease y duration, también de @unozero-ai/ui/react.

Lo que NO entra aquí

Componentes con conocimiento de producto: nada que sepa qué es un hotel, un PMS o una nómina. Si necesita un endpoint, un permiso o un módulo, vive en su producto. Tampoco lo que arrastra una dependencia pesada para un solo uso. La frontera es la del DESIGN.md: aquí van invariantes de Unozero, no expresión de un producto.

Licencia

Propietario. Ver LICENSE — publicarlo no concede licencia de uso.