@studiolxd/brand 38.12.4

package/dist/_types/atoms/MessageBubble/MessageBubble.d.ts

@@ -0,0 +1,20 @@
+import './MessageBubble.css';
+export interface MessageBubbleProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'role'> {
+    /**
+     * Quién envía el mensaje. No es el `role` de ARIA: decide de qué lado se
+     * alinea el globo y en qué esquina nace la cola.
+     */
+    role: 'user' | 'assistant';
+    children: React.ReactNode;
+    /** Se añade DESPUÉS de las clases propias del componente (el consumidor añade, no sustituye). */
+    className?: string;
+}
+/**
+ * El globo de un mensaje de chat. **No lleva relleno**: es contorno de 1px y
+ * esquinas rectas, como el resto del sistema. Quien distingue al emisor es la
+ * alineación —el usuario a la derecha, el asistente a la izquierda— y la cola
+ * triangular que nace en la esquina inferior de su lado.
+ *
+ * Reenvía el resto de props del `<div>` (`data-*`, `aria-*`, `id`…) y el `ref`.
+ */
+export declare const MessageBubble: import("react").ForwardRefExoticComponent<MessageBubbleProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/_types/atoms/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,57 @@
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import './MultiSelect.css';
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    'aria-label'?: string;
+}
+export interface MultiSelectProps {
+    options: MultiSelectOption[];
+    value?: string[];
+    defaultValue?: string[];
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    onValueChange?: (value: string[]) => void;
+    id?: string;
+    /** Nombre del campo en el formulario: se monta un input oculto por valor elegido. */
+    name?: string;
+    /** Marca el estado de error: aplica la clase `multi-select--error` y `aria-invalid`. */
+    error?: boolean;
+    /** Se llama al salir del disparador (react-hook-form lo usa para validar). */
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+    /** Se añade DESPUÉS de las clases propias del componente. */
+    className?: string;
+    /**
+     * Nombre accesible cuando el control va suelto. En un campo lo nombra la
+     * etiqueta por `aria-labelledby`: no lo pongas ahí.
+     */
+    'aria-label'?: string;
+    /** Id de la etiqueta que nombra el control (lo pone el campo). */
+    'aria-labelledby'?: string;
+    /** Ids de ayuda/error que describen el control (lo pone el campo). */
+    'aria-describedby'?: string;
+    /** aria-label del botón que quita un valor. Default: `Quitar ${etiqueta}` (castellano). */
+    removeLabel?: (label: string) => string;
+    /**
+     * Nodo DOM donde montar el portal del dropdown (reenviado a Base UI
+     * `Portal.container`). Por defecto se monta en `document.body`, que
+     * hereda el tema activado a nivel raíz (`html.dark`/`[data-theme="dark"]`)
+     * sin configuración adicional. Solo hace falta pasarlo cuando el
+     * MultiSelect vive dentro de un `.surface-dark` **anidado** (no en la
+     * raíz), ya que ese contexto no llega a `document.body` por la cascada.
+     */
+    container?: React.ComponentPropsWithoutRef<typeof BasePopover.Portal>['container'];
+}
+/**
+ * Selección múltiple. El `ref` va al elemento con `role="combobox"`, que es lo
+ * enfocable, para que react-hook-form pueda enfocarlo al fallar la validación.
+ *
+ * Teclado del patrón combobox (el mismo que `AsyncSelect`): flechas abren y
+ * recorren, Inicio/Fin saltan a los extremos, Intro/Espacio marcan y desmarcan,
+ * Escape cierra y escribir una letra salta a la opción que empieza por ella. El
+ * foco del DOM no se mueve nunca de la caja: la opción activa se señala con
+ * `aria-activedescendant`.
+ */
+export declare const MultiSelect: import("react").ForwardRefExoticComponent<MultiSelectProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/_types/atoms/NumberBadge/NumberBadge.d.ts

@@ -0,0 +1,19 @@
+import './NumberBadge.css';
+export type NumberBadgeVariant = 'primary' | 'accent-1' | 'accent-2' | 'support-1' | 'support-2' | 'danger' | 'success' | 'neutral';
+export interface NumberBadgeProps {
+    count: number;
+    variant?: NumberBadgeVariant;
+    /** Límite a partir del cual se muestra «99+». Por defecto 99. */
+    max?: number;
+    /** Texto accesible completo (ej. «12 notificaciones sin leer»). */
+    'aria-label'?: string;
+    /**
+     * Marca el contador como decorativo. Es lo que hay que pasar cuando el
+     * número ya está en el nombre accesible de quien lo lleva encima (la campana
+     * de `NotificationButton`, el disparador del `FloatingDock`): sin esto el
+     * lector de pantalla lo diría dos veces.
+     */
+    'aria-hidden'?: boolean | 'true' | 'false';
+    className?: string;
+}
+export declare function NumberBadge({ count, variant, max, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, className, }: NumberBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/atoms/NumberInput/NumberInput.d.ts

@@ -0,0 +1,42 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import './NumberInput.css';
+export interface NumberInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange'> {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    decimal?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    error?: boolean;
+    id?: string;
+    name?: string;
+    /** @deprecated Usa el atributo nativo `aria-describedby`. */
+    describedBy?: string;
+    /** @deprecated Usa el atributo nativo `aria-label`. */
+    ariaLabel?: string;
+    /** Se añade DESPUÉS de las clases propias del componente (el consumidor añade, no sustituye). */
+    className?: string;
+    /**
+     * aria-label del botón de decremento. Default: "Decrementar" (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    decrementLabel?: string;
+    /**
+     * aria-label del botón de incremento. Default: "Incrementar" (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    incrementLabel?: string;
+    onChange?: (value: number) => void;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+}
+/**
+ * Campo numérico con incremento y decremento. El `ref` y el resto de props
+ * nativas de `<input>` van al input real (react-hook-form, `aria-*`, `data-*`,
+ * `autoComplete`, `required`…); `className` se concatena a las clases del
+ * contenedor.
+ */
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/_types/atoms/OtpInput/OtpInput.d.ts

@@ -0,0 +1,51 @@
+import './OtpInput.css';
+export interface OtpInputProps {
+    /** Número de celdas a renderizar. Requerido. */
+    length: number;
+    /** Valor controlado — string de dígitos, ej. "123456" */
+    value?: string;
+    /** Valor por defecto no controlado */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /** @deprecated Usa el atributo nativo `aria-describedby`. */
+    describedBy?: string;
+    /** Ids de ayuda/error que describen el grupo de celdas (lo pone el campo). */
+    'aria-describedby'?: string;
+    /** Nombre accesible explícito del grupo: prevalece sobre `groupLabel`. */
+    'aria-label'?: string;
+    /** Nombre accesible del grupo por referencia (la etiqueta visible del campo). */
+    'aria-labelledby'?: string;
+    /**
+     * Nombre accesible del grupo cuando no se pasa `aria-label` ni
+     * `aria-labelledby` — el caso del control suelto. Default: "Código de
+     * verificación" (castellano). Una app multiidioma debe pasarla traducida.
+     */
+    groupLabel?: string;
+    id?: string;
+    /**
+     * Nombre de cada celda es `${name}-${i}`. Además, si se pasa, se añade un
+     * `<input type="hidden">` con este `name` y el código completo, para que un
+     * `<form>` nativo (sin react-hook-form ni otro gestor JS) reciba el valor
+     * entero en un único campo de `FormData`.
+     */
+    name?: string;
+    /** Se llama al salir de la última celda (react-hook-form lo usa para validar). */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /** Se añade DESPUÉS de las clases propias del componente. */
+    className?: string;
+    /**
+     * Etiqueta accesible de cada celda. Default: `Dígito N de M` (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    digitLabel?: (index: number, length: number) => string;
+}
+/**
+ * Código de un solo uso repartido en celdas. El `ref` va a la **primera
+ * celda**: es la que react-hook-form enfoca al fallar la validación.
+ */
+export declare const OtpInput: import("react").ForwardRefExoticComponent<OtpInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/_types/atoms/Paragraph/Paragraph.d.ts

@@ -0,0 +1,7 @@
+import './Paragraph.css';
+export interface ParagraphProps extends Omit<React.ComponentPropsWithoutRef<'p'>, 'children'> {
+    /** Tamaño: `small` para notas y metadatos, `large` para entradillas. */
+    size?: 'small' | 'default' | 'large';
+    children: React.ReactNode;
+}
+export declare const Paragraph: import("react").ForwardRefExoticComponent<ParagraphProps & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/_types/atoms/Popover/Popover.d.ts

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react';
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import './Popover.css';
+/**
+ * Detalle del evento con el que Base UI cuenta por qué se abre o se cierra el
+ * panel. Trae el evento nativo (`event`), el motivo (`reason`) y `cancel()`,
+ * que deja el panel como estaba. Se deriva del propio motor para no copiar su
+ * forma a mano.
+ */
+export type PopoverChangeDetails = Parameters<NonNullable<React.ComponentProps<typeof BasePopover.Root>['onOpenChange']>>[1];
+export interface PopoverProps {
+    /** Elemento que abre el panel. Recibe las props del disparador vía `render`. */
+    trigger: ReactNode;
+    /** Contenido del panel. */
+    children: ReactNode;
+    /**
+     * Nombre accesible del panel. Necesario cuando el contenido no empieza por un
+     * título visible que lo nombre.
+     */
+    label?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    /**
+     * Se llama al abrirse y al cerrarse. El segundo argumento es el detalle de
+     * Base UI: por qué pasa y cómo cancelarlo.
+     */
+    onOpenChange?: (open: boolean, details: PopoverChangeDetails) => void;
+    /**
+     * El panel va a cerrarse por un clic **fuera** de él. `details.cancel()` lo
+     * deja abierto: es el escape para el clic que cae en un portal del producto
+     * (un selector nativo, un datepicker de terceros) que el motor no reconoce
+     * como parte del panel.
+     */
+    onPointerDownOutside?: (details: PopoverChangeDetails) => void;
+    /**
+     * El panel va a cerrarse porque el foco se fue fuera. `details.cancel()` lo
+     * deja abierto.
+     */
+    onFocusOutside?: (details: PopoverChangeDetails) => void;
+    /** El panel va a cerrarse con Escape. `details.cancel()` lo deja abierto. */
+    onEscapeKeyDown?: (details: PopoverChangeDetails) => void;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Separación en px con el disparador, o una función que la calcule (misma
+     * forma que el `sideOffset` de Base UI). Sin ella se lee el token
+     * `--popover-offset`.
+     */
+    sideOffset?: React.ComponentProps<typeof BasePopover.Positioner>['sideOffset'];
+    /**
+     * Qué recibe el foco al abrirse. Por defecto lo recibe el propio panel, que
+     * es lo correcto para un panel de lectura. Un panel cuyo contenido es una
+     * lista de controles (el de notificaciones) pasa aquí el primero de ellos:
+     * un `ref`, o una función que lo devuelva. Es la prop de Base UI, tal cual.
+     */
+    initialFocus?: React.ComponentProps<typeof BasePopover.Popup>['initialFocus'];
+    /** Clase adicional para el panel. */
+    className?: string;
+}
+/**
+ * Panel flotante de contenido libre: una nota, un filtro, un formulario corto,
+ * un calendario. Para una lista de acciones con semántica de menú, `Menu` /
+ * `ContextMenu`.
+ *
+ * Los tres motivos de cierre automático —clic fuera, foco fuera y Escape—
+ * tienen su propio handler, y cada uno puede cancelarse: es lo que permite
+ * mantener el panel abierto cuando el clic cae en algo que el motor no
+ * reconoce como suyo.
+ */
+export declare function Popover({ trigger, children, label, open, defaultOpen, onOpenChange, onPointerDownOutside, onFocusOutside, onEscapeKeyDown, side, align, sideOffset, initialFocus, className, }: PopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/atoms/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,19 @@
+import './ProgressBar.css';
+export type ProgressBarVariant = 'primary' | 'accent-1' | 'accent-2' | 'support-1' | 'support-2';
+export type ProgressBarSize = 'sm' | 'md' | 'lg';
+export interface ProgressBarProps {
+    /** Porcentaje completado (0–100). Se acota al rango y se redondea al entero más cercano. */
+    value: number;
+    /** Variante de color del relleno. */
+    variant?: ProgressBarVariant;
+    /** Talla de la barra. En `sm` no se muestra la cifra. */
+    size?: ProgressBarSize;
+    /**
+     * Nombre accesible de la barra: qué está avanzando. Default: «Progreso»
+     * (castellano). Una app multiidioma debe pasarlo traducido.
+     */
+    label?: string;
+    /** Clases adicionales para el contenedor. */
+    className?: string;
+}
+export declare function ProgressBar({ value, variant, size, label, className, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/atoms/Radio/Radio.d.ts

@@ -0,0 +1,19 @@
+import './Radio.css';
+export interface RadioProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'type'> {
+    /** Tamaño del radio. Redeclara el `size` nativo (que es numérico). */
+    size?: 'sm' | 'md' | 'lg';
+    /** Marca el estado de error: aplica la clase `radio--error` y `aria-invalid`. */
+    error?: boolean;
+    /** Se añade DESPUÉS de las clases propias del componente (el consumidor añade, no sustituye). */
+    className?: string;
+}
+/**
+ * Radio (input nativo `type="radio"`). Extiende los atributos nativos de `<input>`
+ * y reenvía `{...rest}` al elemento (incluye `ref` para react-hook-form; `data-*`,
+ * `aria-*`, `required`, `checked`, `value`, handlers, etc.).
+ *
+ * Dentro de un `RadioGroup` toma de él el `name`, si está marcado, la talla, el
+ * error y el estado deshabilitado, y le avisa al elegirse. Lo que se pase a
+ * mano manda sobre lo que dice el grupo.
+ */
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/_types/atoms/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react';
+import './RadioGroup.css';
+export interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'> {
+    /** Opción marcada (controlado). Con él, el estado lo lleva el consumidor. */
+    value?: string;
+    /** Opción marcada al montar (no controlado). */
+    defaultValue?: string;
+    /** Se llama con el `value` de la opción elegida. */
+    onValueChange?: (value: string) => void;
+    /**
+     * `name` que comparten todas las opciones — lo que las hace un grupo para el
+     * navegador y para el envío del formulario. Sin él se genera uno.
+     */
+    name?: string;
+    /** Deshabilita todas las opciones del grupo. */
+    disabled?: boolean;
+    /** Talla del sistema para todas las opciones. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Pone en error todas las opciones del grupo. */
+    error?: boolean;
+    /** Apiladas (por defecto) o en fila. */
+    orientation?: 'vertical' | 'horizontal';
+    children: ReactNode;
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+}
+/**
+ * La raíz de un grupo de opciones excluyentes: reparte el `name`, sabe cuál
+ * está marcada y avisa cuando cambia. Hasta ahora `Radio` era un input suelto
+ * y cada producto se montaba el estado y el `name` por su cuenta.
+ *
+ * Funciona **controlado** (`value` + `onValueChange`) o **no controlado**
+ * (`defaultValue`), como el resto de controles del sistema. Las opciones son
+ * `RadioField` —marca y texto— o `Radio` a pelo; las dos lo leen del grupo, así
+ * que dentro no hay que repetir `name`, `checked` ni `size`.
+ *
+ * El **nombre accesible** no es una prop: lo pone un `Fieldset` alrededor (su
+ * `legend` es el rótulo del grupo) o un `aria-label`/`aria-labelledby`, que
+ * viajan al `role="radiogroup"` con el resto de `{...rest}`.
+ */
+export declare function RadioGroup({ value: valueProp, defaultValue, onValueChange, name: nameProp, disabled, size, error, orientation, children, className, ...rest }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/atoms/RadioGroup/RadioGroupContext.d.ts

@@ -0,0 +1,15 @@
+/** Lo que el grupo presta a cada opción que cuelga de él. */
+export interface RadioGroupContextValue {
+    name: string;
+    value: string | undefined;
+    select: (value: string) => void;
+    disabled: boolean | undefined;
+    size: 'sm' | 'md' | 'lg' | undefined;
+    error: boolean | undefined;
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | null>;
+/**
+ * Lo usan `Radio` y `RadioField` para saber si cuelgan de un grupo. Vive en su
+ * propio módulo para que el fichero del componente solo exporte componentes.
+ */
+export declare function useRadioGroup(): RadioGroupContextValue | null;

package/dist/_types/atoms/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from 'react';
+import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
+import './ScrollArea.css';
+export interface ScrollAreaProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseScrollArea.Root>, 'className'> {
+    /**
+     * Qué barras se muestran. `vertical` por defecto; `both` para contenido que
+     * también se sale de ancho (una tabla, un diagrama).
+     */
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    /**
+     * Nombre accesible del área. Un recuadro que se desplaza con el teclado tiene
+     * que decir de qué es; sin él el lector solo anuncia «región desplazable».
+     */
+    label?: string;
+    children: ReactNode;
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+}
+/**
+ * Un recuadro con desplazamiento propio y barra del sistema (Base UI Scroll
+ * Area): la lista de un panel lateral, el resultado largo de una consulta, el
+ * lienzo de un editor.
+ *
+ * **El alto lo pone quien lo usa** (`className` o el contenedor): el componente
+ * no decide cuánto mide el hueco, solo cómo se desplaza dentro.
+ *
+ * Base UI hace la zona alcanzable con el teclado cuando de verdad hay
+ * desplazamiento, y la barra aparece al usarla.
+ */
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/_types/atoms/Select/Select.d.ts

@@ -0,0 +1,139 @@
+import type { ReactNode } from 'react';
+import { Select as BaseSelect } from '@base-ui/react/select';
+import type { SeparatorProps as BaseSeparatorProps } from '@base-ui/react/separator';
+import './Select.css';
+export interface SelectOption {
+    value: string;
+    label: string;
+    /** Etiqueta accesible de la opción. Si no se pasa, usa label. */
+    'aria-label'?: string;
+}
+/**
+ * Grupo de opciones con cabecera. La cabecera es una etiqueta, no una opción:
+ * no es elegible ni la enfoca el teclado, y nombra al grupo por
+ * `role="group"` + `aria-labelledby` (lo resuelve Base UI).
+ */
+export interface SelectOptionGroup {
+    /** Cabecera del grupo. */
+    label: ReactNode;
+    /** Opciones del grupo. */
+    options: SelectOption[];
+}
+/** Una entrada de `options`: opción suelta o grupo con cabecera. */
+export type SelectOptionOrGroup = SelectOption | SelectOptionGroup;
+/** Distingue un grupo de una opción suelta: el grupo trae su propia lista. */
+export declare function isSelectOptionGroup(entry: SelectOptionOrGroup): entry is SelectOptionGroup;
+/** Nodo DOM donde montar el portal del dropdown (reenviado a `Select.Portal`). */
+export type SelectPortalContainer = React.ComponentPropsWithoutRef<typeof BaseSelect.Portal>['container'];
+export interface SelectProps {
+    /**
+     * Opciones de la lista. Cada entrada es una opción (`{ value, label }`) o un
+     * grupo con cabecera (`{ label, options }`); las dos formas se pueden
+     * mezclar. Una lista plana sigue funcionando igual que siempre.
+     */
+    options: SelectOptionOrGroup[];
+    value?: string;
+    defaultValue?: string;
+    /** Placeholder del trigger. Default: "Seleccionar…" (en la API compuesta lo pone cada consumidor vía `Select.Value`). */
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    onValueChange?: (value: string) => void;
+    id?: string;
+    /** Nombre del campo en el formulario: Base UI monta un input oculto con el valor. */
+    name?: string;
+    required?: boolean;
+    /** Se llama al salir del disparador (react-hook-form lo usa para validar). */
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+    /** Nombre accesible cuando el Select va suelto. En un campo lo nombra la etiqueta (`htmlFor`), que este atributo pisaría: no lo pongas ahí. */
+    'aria-label'?: string;
+    /** Ids de ayuda/error que describen el control (lo pone el campo). */
+    'aria-describedby'?: string;
+    /** Estado de error accesible (lo pone el campo). */
+    'aria-invalid'?: boolean;
+    /**
+     * Nodo DOM donde montar el portal del dropdown (reenviado a `Select.Portal`
+     * de Base UI). Por defecto el portal se monta en `document.body`, que hereda
+     * el tema activado a nivel raíz (`html.dark`/`[data-theme="dark"]`) sin
+     * configuración adicional. Solo hace falta pasar `container` cuando el Select
+     * vive dentro de un `.surface-dark` **anidado** (no en la raíz): ese contexto
+     * no llega a `document.body` por la cascada, así que hay que montar el portal
+     * dentro del propio contenedor con la clase.
+     */
+    container?: SelectPortalContainer;
+}
+type BaseSelectRootProps = React.ComponentProps<typeof BaseSelect.Root<string>>;
+export interface SelectRootProps extends Omit<BaseSelectRootProps, 'onValueChange' | 'multiple'> {
+    onValueChange?: (value: string) => void;
+}
+/** Raíz del Select (Base UI Root + índice de etiquetas de las opciones). */
+export declare function SelectRoot({ children, onValueChange, ...rest }: SelectRootProps): import("react/jsx-runtime").JSX.Element;
+export interface SelectValueProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.Value>, 'children'> {
+    /** Texto mostrado cuando no hay valor seleccionado. */
+    placeholder?: ReactNode;
+    children?: ReactNode | ((value: string | null) => ReactNode);
+}
+/** Valor/placeholder del trigger. */
+export declare const SelectValue: import("react").ForwardRefExoticComponent<SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+export type SelectGroupProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Group>;
+/**
+ * Agrupa opciones (`.select__group`). Base UI le pone `role="group"` y lo
+ * enlaza con su `Select.Label` por `aria-labelledby`.
+ */
+export declare const SelectGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof BaseSelect.Trigger> {
+    size?: 'sm' | 'md' | 'lg';
+}
+/** Trigger del Select: botón `.select` con el chevron del DS. Los children son el `Select.Value`. */
+export declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof BaseSelect.Popup> {
+    size?: 'sm' | 'md' | 'lg';
+    /** Ver `SelectProps.container`. */
+    container?: SelectPortalContainer;
+    /** Lado del trigger donde se despliega. */
+    side?: React.ComponentPropsWithoutRef<typeof BaseSelect.Positioner>['side'];
+    /** Alineación respecto al trigger. */
+    align?: React.ComponentPropsWithoutRef<typeof BaseSelect.Positioner>['align'];
+    sideOffset?: number;
+}
+/** Dropdown del Select: Portal → Positioner → Popup (`.select__content`). */
+export declare const SelectContent: import("react").ForwardRefExoticComponent<SelectContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectItemProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Item>;
+/** Opción del Select (`.select__item`). Los children (texto o JSX) van en `ItemText`. */
+export declare const SelectItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectItemProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectLabelProps = React.ComponentPropsWithoutRef<typeof BaseSelect.GroupLabel>;
+/** Etiqueta de grupo (`.select__label`, tipografía del label del DS). */
+export declare const SelectLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectSeparatorProps = Omit<BaseSeparatorProps, 'className'> & {
+    className?: string;
+};
+/** Separador entre grupos (`.select__separator`). */
+export declare const SelectSeparator: React.ForwardRefExoticComponent<SelectSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Select. Dos formas de uso:
+ * - **Cerrada (data-driven)**: `<Select options={[…]} value onValueChange … />`.
+ * - **Compuesta**: `<Select.Root><Select.Trigger><Select.Value/></Select.Trigger>
+ *   <Select.Content><Select.Item/>…</Select.Content></Select.Root>` — para labels
+ *   JSX, grupos, o inyección de props del consumidor (FormControl) en el trigger.
+ *
+ * Ambas comparten el mismo motor Base UI y las mismas clases: la cerrada está
+ * implementada sobre las partes.
+ *
+ * Las partes están disponibles también como **named exports** (`SelectTrigger`,
+ * `SelectContent`, `SelectItem`…): en **Server Components (RSC)** usa los named
+ * exports — el namespace (`Select.Trigger`) requiere contexto cliente.
+ */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLButtonElement>> & {
+    Root: typeof SelectRoot;
+    Trigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Value: import("react").ForwardRefExoticComponent<SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Content: import("react").ForwardRefExoticComponent<SelectContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectItemProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<Omit<BaseSeparatorProps, "className"> & {
+        className?: string;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/_types/atoms/Separator/Separator.d.ts

@@ -0,0 +1,25 @@
+import './Separator.css';
+export interface SeparatorProps extends React.ComponentPropsWithoutRef<'hr'> {
+    /** Eje de la línea. Default: `'horizontal'`. */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Línea puramente visual: no aporta significado al esquema del documento y
+     * se retira del árbol de accesibilidad (`role="none"`). Ponlo en `false`
+     * cuando la línea separe de verdad dos grupos de contenido y quieras que un
+     * lector de pantalla lo anuncie. Default: `true`.
+     */
+    decorative?: boolean;
+    /** Aire a ambos lados de la línea. Default: `'md'`. */
+    spacing?: 'sm' | 'md' | 'lg';
+}
+/**
+ * La línea de separación del sistema: un `<hr>` con el grosor, el color y el
+ * aire de los tokens `separator.*`. Es la misma línea que ya pintaban por su
+ * cuenta `Menu`, `UserMenu`, `OrgSwitcher`, `Sidebar` y `Select`; esos
+ * componentes siguen renderizando la suya (se la pide su motor de Base UI),
+ * pero sus tokens cuelgan ahora de estos.
+ *
+ * Reenvía el resto de props del elemento (`data-*`, `aria-*`, `id`…) y
+ * concatena `className` tras las clases propias.
+ */
+export declare const Separator: import("react").ForwardRefExoticComponent<SeparatorProps & import("react").RefAttributes<HTMLHRElement>>;

package/dist/_types/atoms/Skeleton/Skeleton.d.ts

@@ -0,0 +1,22 @@
+import './Skeleton.css';
+export interface SkeletonProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height' | 'style'> {
+    /** Ancho del bloque (cualquier medida CSS). Por defecto ocupa todo el disponible. */
+    width?: string;
+    /** Alto del bloque (cualquier medida CSS). Por defecto, una línea de texto. */
+    height?: string;
+    /** Bloque circular (avatares). */
+    circle?: boolean;
+}
+/**
+ * Marcador de contenido que aún está cargando. Es decorativo: se oculta a los
+ * lectores de pantalla, así que el contenedor que lo usa debe anunciar la
+ * carga por su cuenta (`aria-busy`, una región viva…).
+ *
+ * El bloque es un `<svg>` vacío y no un `<span>` porque `width` y `height` son
+ * medidas libres —no hay escala cerrada que las tabule— y en un `<svg>` viajan
+ * como **atributos de presentación**, que la CSP no descarta. En un atributo
+ * `style` una app con `style-src 'self'` los perdería sin avisar y todo bloque
+ * saldría a ancho completo y una línea de alto. No hay prop `style` por lo
+ * mismo: el atributo no llegaría a pintarse.
+ */
+export declare function Skeleton({ width, height, circle, className, ...rest }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/atoms/SkipLink/SkipLink.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import '../VisuallyHidden/VisuallyHidden.css';
+import './SkipLink.css';
+export interface SkipLinkProps extends Omit<ComponentPropsWithoutRef<'a'>, 'href'> {
+    /** Destino del salto: el `id` del contenido principal, con `#` (`#main-content`). */
+    href: string;
+    children: React.ReactNode;
+}
+/**
+ * Enlace de salto al contenido: oculto hasta que recibe el foco por teclado,
+ * y entonces visible por encima de todo. Es el primer elemento enfocable de
+ * la página. Oculto, usa la misma receta que `VisuallyHidden`: sigue en el
+ * DOM y en el orden de tabulación, solo no se ve.
+ */
+export declare function SkipLink({ href, className, children, ...rest }: SkipLinkProps): import("react/jsx-runtime").JSX.Element;