@studiolxd/brand 38.12.4

package/dist/_shared/untrustedtext.js

@@ -0,0 +1,43 @@
+import '../untrustedtext.css';
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/stories/templates/ConnectorAuth/UntrustedText.tsx
+var n = /[\u061C\u200B\u200E\u200F\u202A-\u202E\u2060-\u2064\u2066-\u2069\uFEFF]/g, r = 80;
+function i(e) {
+	return e.replace(n, (e) => `[U+${e.codePointAt(0).toString(16).toUpperCase().padStart(4, "0")}]`);
+}
+function a({ value: n, expandable: a = !1, expandLabel: o = "Ver el valor completo", collapseLabel: s = "Ver menos", quotes: c = ["«", "»"], className: l }) {
+	let u = (...e) => [...e, l].filter(Boolean).join(" ");
+	if (typeof n != "string") return /* @__PURE__ */ e("span", {
+		className: u("connector-untrusted"),
+		children: n
+	});
+	let d = i(n), f = Array.from(d).length > r, [p, m] = c, h = /* @__PURE__ */ t("span", {
+		className: f ? "connector-untrusted__value connector-untrusted__value--clamped" : "connector-untrusted__value",
+		children: [
+			p,
+			/* @__PURE__ */ e("bdi", { children: d }),
+			m
+		]
+	});
+	return !f || !a ? /* @__PURE__ */ e("span", {
+		className: u("connector-untrusted"),
+		children: h
+	}) : /* @__PURE__ */ e("details", {
+		className: u("connector-untrusted", "connector-untrusted--expandable"),
+		children: /* @__PURE__ */ t("summary", {
+			className: "connector-untrusted__summary",
+			children: [h, /* @__PURE__ */ t("span", {
+				className: "link connector-untrusted__toggle",
+				children: [/* @__PURE__ */ e("span", {
+					className: "connector-untrusted__more",
+					children: o
+				}), /* @__PURE__ */ e("span", {
+					className: "connector-untrusted__less",
+					children: s
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { a as t };

package/dist/_shared/validate.js

@@ -0,0 +1,9 @@
+//#region src/stories/atoms/FileUpload/validate.ts
+function e(e) {
+	return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
+}
+function t(t, n, r, i, a) {
+	return r !== void 0 && t.size > r ? i(e(r)) : n && !n.split(",").map((e) => e.trim()).some((e) => e.startsWith(".") ? t.name.toLowerCase().endsWith(e.toLowerCase()) : e.endsWith("/*") ? t.type.startsWith(e.slice(0, -2)) : t.type === e) ? a : null;
+}
+//#endregion
+export { t as n, e as t };

package/dist/_types/assets/brand-assets.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Metadatos del juego de activos de marca publicado: logotipo, isotipo e
+ * iconos de aplicación. Rutas relativas a la raíz del paquete (bajo
+ * `@studiolxd/brand/assets/...`, ver `package.json#exports`), para que una
+ * app consumidora los copie o los sirva sin adivinar nombres de fichero.
+ *
+ * Un solo juego de iconos para toda la suite —sin variantes por producto—,
+ * ver Foundations → Marca. Dos tokens, mismo criterio que la regla 8 de
+ * CLAUDE.md para el aviso del DS (relleno claro + tinta prusia, nunca tinta
+ * suelta): `BRAND_ICON_BG_COLOR` es el relleno, `color.lavender` (`#BAABFF`,
+ * el primitivo de paleta más próximo a "violeta" que tiene
+ * `tokens/color/palette.json`); `BRAND_ICON_INK_COLOR` es la tinta del
+ * isotipo sobre ese relleno, `color.primary` (`#111E30`, el prusia). Ninguno
+ * de los dos es un hex inventado (regla 9 de CLAUDE.md): los dos son
+ * primitivos/roles que ya existían.
+ */
+/** El violeta de marca usado como fondo de los iconos de aplicación (`color.lavender`, `--color-lavender`). */
+export declare const BRAND_ICON_BG_COLOR = "#BAABFF";
+/** La tinta del isotipo sobre ese fondo (`color.primary`, `--color-primary` — el prusia). */
+export declare const BRAND_ICON_INK_COLOR = "#111E30";
+export interface BrandIconAsset {
+    /** Ruta bajo `@studiolxd/brand/assets/...`. */
+    path: string;
+    /** Lado en píxeles (icons cuadrados) — `undefined` para el SVG y el manifest, que no tienen talla fija. */
+    size?: number;
+    type: 'image/svg+xml' | 'image/png' | 'image/vnd.microsoft.icon' | 'application/manifest+json' | 'font/woff2';
+    /** Uso pensado, para documentación y para que un script de instalación sepa qué `<link>` generar. */
+    purpose: 'source' | 'favicon' | 'apple-touch-icon' | 'pwa-icon' | 'pwa-icon-maskable' | 'manifest';
+}
+/** Los ficheros fuente sueltos: el logotipo completo y el isotipo (con y sin área de seguridad). */
+export declare const BRAND_SOURCE_ASSETS: readonly BrandIconAsset[];
+/** El juego de iconos generado por `scripts/build-icons.mjs`, publicado en `dist/assets/icons/`. */
+export declare const BRAND_ICON_ASSETS: readonly BrandIconAsset[];
+/**
+ * El nombre del PNG del logotipo del correo, versionado: Gmail proxea y
+ * cachea las imágenes de los correos y no hay forma de forzar un refresco,
+ * así que cambiar el logotipo (contenido O medidas) es publicar un nombre
+ * nuevo, no sobrescribir este. `emailTheme.ts` (`emailLogo.filename`) y
+ * `scripts/build-email-assets.mjs` leen de aquí en vez de repetirlo.
+ *
+ * `v2` fue el salto del isotipo (`logomark.svg`) al logotipo completo
+ * (`logo.svg`, "Studio LXD") en la cabecera del correo. `v3` (2026-09-14,
+ * F1) corrige un incidente: en v38.5.0 la imagen pasó de 256×96 a 626×202
+ * conservando el nombre `logo-v2.png`; Gmail ya tenía esa URL cacheada con
+ * las medidas viejas y la estiró, deformada y pixelada. El `v1` cuadrado ya
+ * no se genera.
+ */
+export declare const EMAIL_LOGO_FILENAME = "logo-v3.png";
+/**
+ * La caja de dibujo del logotipo completo (`assets/logo.svg`), de donde sale
+ * su proporción. Está aquí —y no solo en el SVG— porque el `<img>` del correo
+ * necesita `width`/`height` explícitos en tiempo de ejecución, donde no se
+ * puede leer el fichero; `scripts/build-email-assets.mjs` comprueba que el
+ * SVG siga declarando exactamente este `viewBox` y falla si se separan.
+ */
+export declare const EMAIL_LOGO_VIEW_BOX: {
+    readonly width: 925.5;
+    readonly height: 265.5;
+};
+/**
+ * El ancho del logotipo para un alto dado, redondeado a píxel entero: el
+ * único sitio donde se aplica la proporción, para que la imagen generada y
+ * los atributos del `<img>` no puedan discrepar.
+ */
+export declare function emailLogoWidthFor(height: number): number;
+/**
+ * El nombre del woff2 de la cara latina de la sans que usa el correo, mismo
+ * criterio de versión que `EMAIL_LOGO_FILENAME`.
+ */
+export declare const EMAIL_FONT_FILENAME = "google-sans-flex-normal-latin-v1.woff2";
+/**
+ * El juego de assets del correo generado por `scripts/build-email-assets.mjs`,
+ * publicado en `dist/assets/email/` (subpath `@studiolxd/brand/assets/email/...`)
+ * — mismo mecanismo que `BRAND_ICON_ASSETS` para los iconos de aplicación.
+ *
+ * `public/email/` es un segundo destino del mismo origen, no una fuente
+ * distinta: sirve para que Storybook enseñe el correo en local
+ * (`assetsBaseUrl="/email"` en las stories) sin depender del paquete
+ * publicado. En producción, el host de assets del correo
+ * (`https://slxd.app/brand/email`) sirve estos mismos ficheros desde
+ * `dist/assets/email/`.
+ */
+export declare const BRAND_EMAIL_ASSETS: readonly BrandIconAsset[];

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

@@ -0,0 +1,56 @@
+import { type ReactNode } from 'react';
+import './Accordion.css';
+interface AccordionSingleProps {
+    type: 'single';
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Permite cerrar todos los items (por defecto true). */
+    collapsible?: boolean;
+}
+interface AccordionMultipleProps {
+    type: 'multiple';
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    collapsible?: never;
+}
+export type AccordionProps = (AccordionSingleProps | AccordionMultipleProps) & {
+    id?: string;
+    disabled?: boolean;
+    /**
+     * Numera los ítems: cada disparador enseña su posición delante del texto
+     * (`01`, `02`…). El número lo pone el acordeón por el orden de sus hijos
+     * directos, no el consumidor. Es la maqueta de un acordeón legal, donde cada
+     * apartado tiene número de cláusula.
+     */
+    numbered?: boolean;
+    /**
+     * Cómo se escribe el número. Por defecto, dos cifras con cero delante
+     * (`01`). Recibe la posición empezando en 1.
+     */
+    formatIndex?: (index: number) => string;
+    className?: string;
+    children: ReactNode;
+};
+export declare function Accordion({ className, children, id, disabled, numbered, formatIndex, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export interface AccordionItemProps {
+    value: string;
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+export declare function AccordionItem({ className, children, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export interface AccordionTriggerProps {
+    className?: string;
+    /** Tamaño del chevron indicador. */
+    chevronSize?: 'sm' | 'md' | 'lg';
+    children: ReactNode;
+}
+export declare function AccordionTrigger({ className, chevronSize, children }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+export interface AccordionContentProps {
+    className?: string;
+    children: ReactNode;
+}
+export declare function AccordionContent({ className, children }: AccordionContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/_types/atoms/Accordion/AccordionContext.d.ts

@@ -0,0 +1,13 @@
+/** Lo que la raíz numerada presta a cada disparador. */
+export interface AccordionNumberingValue {
+    /** Posición del ítem entre los hijos directos de la raíz, empezando en 1. */
+    index: number;
+    /** Cómo se escribe el número. */
+    formatIndex: (index: number) => string;
+}
+export declare const AccordionNumberingContext: import("react").Context<AccordionNumberingValue | null>;
+/**
+ * Lo usa `AccordionTrigger` para saber si su acordeón numera. Vive en su propio
+ * módulo para que el fichero del componente solo exporte componentes.
+ */
+export declare function useAccordionNumbering(): AccordionNumberingValue | null;

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

@@ -0,0 +1,6 @@
+import './Arrow.css';
+export interface ArrowProps {
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function Arrow({ size, className }: ArrowProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,83 @@
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import './AsyncMultiSelect.css';
+export interface AsyncMultiSelectOption {
+    value: string;
+    label: string;
+}
+export interface AsyncMultiSelectProps {
+    onSearch: (query: string) => Promise<AsyncMultiSelectOption[]>;
+    value?: string[];
+    /**
+     * Valores iniciales en modo no controlado. Sus etiquetas no se conocen hasta
+     * que se buscan: para enseñarlas desde el primer pintado hay que pasar
+     * también `selectedOptions`. Sin ellas la pill muestra el valor crudo.
+     */
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /**
+     * Etiquetas de los valores elegidos. En modo controlado es la vía normal de
+     * dárselas al componente. En modo no controlado no hace falta para lo que se
+     * elige con el ratón o el teclado —esas opciones vienen de `onSearch` y el
+     * componente las recuerda—, solo para los valores de `defaultValue`.
+     */
+    selectedOptions?: AsyncMultiSelectOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Milisegundos de rebote entre la última tecla y la llamada a `onSearch`.
+     * Default: 300. A 0 se busca en cada tecla.
+     */
+    debounceMs?: number;
+    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 `async-multi-select--error` y `aria-invalid`. */
+    error?: boolean;
+    /**
+     * Marca el control como obligatorio: pone `aria-required` en el combobox.
+     * No se traslada a un `required` nativo porque lo que viaja en el formulario
+     * es un input oculto —un control no enfocable con `required` bloquea el envío
+     * sin poder enseñar el mensaje—: la validación la lleva el consumidor (o
+     * react-hook-form), como en el resto de campos compuestos del sistema.
+     */
+    required?: boolean;
+    /** Se llama al salir del control (react-hook-form lo usa para validar). */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /** 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 (`htmlFor`), que este atributo pisaría: no lo pongas ahí.
+     */
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    /** aria-label del botón que quita un valor. Default: `Quitar ${etiqueta}` (castellano). */
+    removeLabel?: (label: string) => string;
+    /**
+     * Texto mostrado cuando la búsqueda no devuelve opciones. Default: "Sin resultados"
+     * (castellano). Es texto **visible**: una app multiidioma debe pasarlo traducido.
+     */
+    emptyMessage?: string;
+    /**
+     * Etiqueta accesible del spinner mientras se busca. Default: "Buscando…" (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    loadingLabel?: 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
+     * AsyncMultiSelect 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'];
+}
+/**
+ * Búsqueda con resultados asíncronos y varios valores. El `ref` va al
+ * `<input>` de búsqueda, que es lo que se enfoca.
+ */
+export declare const AsyncMultiSelect: import("react").ForwardRefExoticComponent<AsyncMultiSelectProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,74 @@
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import './AsyncSelect.css';
+export interface AsyncSelectOption {
+    value: string;
+    label: string;
+}
+export interface AsyncSelectProps {
+    onSearch: (query: string) => Promise<AsyncSelectOption[]>;
+    value?: string | null;
+    onValueChange?: (value: string | null, option: AsyncSelectOption | null) => void;
+    /** Label of the currently selected option — required when `value` is set so the component can display it */
+    selectedOption?: AsyncSelectOption | null;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Milisegundos de rebote entre la última tecla y la llamada a `onSearch`.
+     * Default: 300. A 0 se busca en cada tecla.
+     */
+    debounceMs?: number;
+    id?: string;
+    /** Nombre del campo en el formulario: se monta un input oculto con el valor. */
+    name?: string;
+    /** Marca el estado de error: aplica la clase `async-select--error` y `aria-invalid`. */
+    error?: boolean;
+    /**
+     * Marca el control como obligatorio: pone `aria-required` en el combobox.
+     * No se traslada a un `required` nativo porque lo que viaja en el formulario
+     * es un input oculto —un control no enfocable con `required` bloquea el envío
+     * sin poder enseñar el mensaje—: la validación la lleva el consumidor (o
+     * react-hook-form), como en el resto de campos compuestos del sistema.
+     */
+    required?: boolean;
+    /** Se llama al salir del control (react-hook-form lo usa para validar). */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /** 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 (`htmlFor`), que este atributo pisaría: no lo pongas ahí.
+     */
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    /**
+     * Texto mostrado cuando la búsqueda no devuelve opciones. Default: "Sin resultados"
+     * (castellano). Es texto **visible**: una app multiidioma debe pasarlo traducido.
+     */
+    emptyMessage?: string;
+    /**
+     * Etiqueta accesible del spinner mientras se busca. Default: "Buscando…" (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    loadingLabel?: string;
+    /**
+     * aria-label del botón de limpiar selección. Default: "Limpiar selección" (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    clearLabel?: 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
+     * AsyncSelect 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'];
+}
+/**
+ * Búsqueda con resultados asíncronos y un solo valor. El `ref` va al `<input>`
+ * de búsqueda, que es lo que se enfoca.
+ */
+export declare const AsyncSelect: import("react").ForwardRefExoticComponent<AsyncSelectProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,21 @@
+import './Avatar.css';
+export interface AvatarProps {
+    /** URL de la imagen. Si se omite, se muestran las iniciales calculadas desde `name`. */
+    src?: string;
+    /** Nombre accesible. Por defecto, `name`. `alt=""` lo hace decorativo (cuando el nombre ya está al lado). */
+    alt?: string;
+    /** Nombre completo. Se usa para generar las iniciales cuando no hay `src`. */
+    name?: string;
+    /**
+     * Talla del avatar: las tres del sistema (32/40/48) más las de marca —`xl`
+     * (64), `2xl` (96), `3xl` (128) y `4xl` (192)—, para cuando el avatar es el
+     * asunto de la pantalla y, de `2xl` en adelante, la zona donde se suelta la
+     * imagen.
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+    /** Forma del avatar. `circle` para personas, `square` para logos de organización. */
+    shape?: 'circle' | 'square';
+    /** Clase adicional. */
+    className?: string;
+}
+export declare function Avatar({ src, alt, name, size, shape, className, }: AvatarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,64 @@
+import './Button.css';
+/**
+ * Nombre accesible obligatorio en un botón de solo icono: sin texto visible,
+ * el nombre tiene que venir de `aria-label` o de `aria-labelledby`. Va en el
+ * tipo, no solo en el JSDoc, para que el compilador lo exija.
+ */
+export type ButtonIconOnlyProps = {
+    iconOnly: true;
+    'aria-label': string;
+} | {
+    iconOnly: true;
+    'aria-labelledby': string;
+} | {
+    iconOnly?: false | undefined;
+};
+/** Todo lo que no es la disyuntiva de `iconOnly`. Para componentes que envuelven `Button` y lo fijan. */
+export interface ButtonBaseProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'onClick'> {
+    /** Visual variant of the button */
+    variant?: 'primary' | 'outline' | 'ghost' | 'text';
+    /**
+     * Solo con `variant="text"`: `ink` lo pinta con la tinta de la superficie,
+     * como `Link tone="ink"`, para acciones que no deben leerse como enlace de
+     * acento (abrir o cerrar un bloque, deshacer).
+     */
+    tone?: 'accent' | 'ink';
+    /** Applies destructive (red) color intent — composable with outline and text */
+    destructive?: boolean;
+    /** Size of the button */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Estira el botón hasta el ancho de su contenedor. `'mobile'` lo hace solo
+     * por debajo de `md`: es lo que quiere un botón suelto dentro de una página
+     * —una acción que en escritorio se lee bien con su ancho natural y en una
+     * pantalla estrecha queda mejor ocupando la línea entera.
+     */
+    block?: boolean | 'mobile';
+    /**
+     * Renders a square, icon-only button (aspect-ratio 1). Composable with `variant`
+     * and `size`. Con `iconOnly` el tipo exige `aria-label` o `aria-labelledby`:
+     * sin texto visible no hay otra forma de nombrar el control.
+     */
+    iconOnly?: boolean;
+    /**
+     * HTML button type (ignored when href is set). Se mantiene el default `"button"`;
+     * dentro de un `<form>` el default nativo sería `submit`, así que pásalo explícito
+     * cuando quieras enviar el formulario.
+     */
+    type?: 'button' | 'submit' | 'reset';
+    onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    /** Renders as <a> when provided */
+    href?: string;
+    /** Adds target="_blank" rel="noopener noreferrer" (solo con href) */
+    external?: boolean;
+    /**
+     * Elemento sobre el que renderizar el botón (p. ej. `<Link href="…" />` de
+     * Next.js): recibe las clases y los handlers del Button. Sustituye al
+     * patrón `asChild`.
+     */
+    render?: React.ReactElement<Record<string, unknown>>;
+    /** Se añade DESPUÉS de las clases propias del componente (el consumidor añade, no sustituye) */
+    className?: string;
+}
+export type ButtonProps = ButtonBaseProps & ButtonIconOnlyProps;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,22 @@
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import './Checkbox.css';
+type BaseCheckboxRootProps = Omit<React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root>, 'checked' | 'onCheckedChange' | 'className'>;
+export interface CheckboxProps extends BaseCheckboxRootProps {
+    size?: 'sm' | 'md' | 'lg';
+    /** Estado controlado. `'indeterminate'` se traduce al estado mixto de Base UI. */
+    checked?: boolean | 'indeterminate';
+    /** Callback al cambiar el estado. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Marca el estado de error: aplica la clase `checkbox--error` y `aria-invalid`. */
+    error?: boolean;
+    className?: string;
+}
+/**
+ * Checkbox (Base UI). `ref` y `{...rest}` se reenvían al **Root de Base UI** — el
+ * elemento interactivo con `role="checkbox"` — para soportar react-hook-form
+ * (`Controller`) y la inyección de props del consumidor (`aria-*`, `data-*`, `id`,
+ * `name`, `checked`, `onCheckedChange`…). `className` se concatena tras las clases
+ * propias. Para componer con otro elemento, usa la prop `render` de Base UI.
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLElement>>;
+export {};

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

@@ -0,0 +1,25 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import './CloseButton.css';
+export interface CloseButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'children'> {
+    /**
+     * Nombre accesible del aspa. Default: «Cerrar» (castellano). Dice **qué**
+     * cierra o quita, no qué forma tiene: «Cerrar», «Descartar aviso»,
+     * «Quitar a Ana». Una app multiidioma debe pasarlo traducido.
+     */
+    label?: string;
+    /** Talla del botón: un cuadrado de 32, 40 o 48px. El glifo mide 24 en las tres. */
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * El aspa del sistema: el botón que cierra lo que lo contiene —un diálogo, un
+ * cajón, un aviso—. Dibuja el icono `close` del catálogo, el mismo en el que
+ * termina la animación de `MenuButton`.
+ *
+ * **No tiene estado de hover**: ni fondo ni cambio de color al pasar el
+ * puntero. El aspa ya está en la tinta de la superficie desde el reposo, así
+ * que no hay nada que revelar al acercarse; el único estado que marca es el
+ * foco, con el anillo del sistema. Por eso es una pieza propia y no un
+ * `Button` de solo icono: `ghost` pinta un relleno en hover, que es justo lo
+ * que aquí sobra.
+ */
+export declare const CloseButton: import("react").ForwardRefExoticComponent<CloseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,21 @@
+import './Code.css';
+export interface CodeProps extends React.ComponentPropsWithoutRef<'code'> {
+    children: React.ReactNode;
+}
+/**
+ * Un fragmento de código **dentro de una línea de texto**: el nombre de una
+ * prop, una ruta, un comando corto. El hermano de bloque es `CodeBlock`, que
+ * es una caja con cabecera y botón de copiar; esto es una marca en el párrafo.
+ *
+ * Sus tokens cuelgan de los de `CodeBlock`, así que un fragmento en línea y un
+ * bloque se ven como la misma familia. El aire vertical es cero a propósito:
+ * un fondo alto rompería el interlineado del párrafo que lo contiene.
+ *
+ * Lleva clase BEM (`.code`) y no estila el elemento `<code>` a secas —a
+ * diferencia de `Link`— porque `code` también vive dentro del `<pre>` de
+ * `CodeBlock` y de `Prose`, donde no debe repetir fondo ni caja.
+ *
+ * `{...rest}` (`id`, `aria-*`, `data-*`…) se reenvía al `<code>` y `className`
+ * se concatena tras las clases propias.
+ */
+export declare const Code: import("react").ForwardRefExoticComponent<CodeProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
+import './Collapsible.css';
+export interface CollapsibleProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseCollapsible.Root>, 'onOpenChange' | 'className'> {
+    /** Se llama al abrir o cerrar. Solo el estado: sin los detalles del evento. */
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+}
+/**
+ * Un bloque que se pliega y se despliega (Base UI Collapsible): los detalles de
+ * un panel de ajustes, una sección larga de un editor.
+ *
+ * Es **una sola sección**: para varias que se coordinan entre sí —y para el
+ * patrón WAI-ARIA de acordeón, con su recorrido de teclado— está `Accordion`.
+ */
+export declare function Collapsible({ onOpenChange, children, className, ...rest }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+export interface CollapsibleTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseCollapsible.Trigger>, 'className'> {
+    /** Oculta el chevron, para cuando el disparador es otra cosa (una fila, un icono). */
+    chevron?: boolean;
+    /** Talla del chevron. */
+    chevronSize?: 'xs' | 'sm' | 'md';
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * El botón que abre y cierra. Con `render` puede ser otro elemento (una fila
+ * entera de una tabla, un `Button` del sistema) sin perder el contrato ARIA.
+ */
+export declare function CollapsibleTrigger({ chevron, chevronSize, children, className, ...rest }: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
+export interface CollapsibleContentProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseCollapsible.Panel>, 'className'> {
+    children: ReactNode;
+    className?: string;
+}
+/** El contenido que se pliega. Base UI mide su altura para la animación. */
+export declare function CollapsibleContent({ children, className, ...rest }: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,39 @@
+import { type ReactNode } from 'react';
+import './Columns.css';
+export type ColumnsCount = 2 | 3 | 4;
+export type ColumnsRatio = '1:1' | '1:2' | '2:1';
+export interface ColumnsProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** Número de columnas en escritorio (2–4). En móvil, una; con 3 o 4, dos en el tramo intermedio. */
+    columns?: ColumnsCount;
+    /** Reparto del ancho, solo con dos columnas: `1:1` (mitad y mitad), `1:2`, `2:1`. Con 3 o 4 se ignora. */
+    ratio?: ColumnsRatio;
+    /** Alineación vertical de las celdas: arriba, centradas o estiradas. Con `stretch`, el hijo directo de cada celda ocupa toda su altura. */
+    align?: 'start' | 'center' | 'stretch';
+    /** Aire entre celdas: base o amplio. */
+    gap?: 'md' | 'lg';
+    /**
+     * Solo con 3 o 4 columnas. Con el valor por defecto (`true`), en el tramo
+     * intermedio (`md`) la rejilla pasa a dos columnas antes de llegar a las
+     * definitivas en `lg`. Con `false` se salta ese paso: de una columna en
+     * móvil a las definitivas directamente en `lg` (p. ej. tres packs de
+     * crédito que nunca deben verse como "dos y uno suelto").
+     */
+    intermediate?: boolean;
+    /** En móvil, orden de apilado: el del JSX o el inverso (la última celda arriba). */
+    stackOrder?: 'normal' | 'reverse';
+    /** Las celdas, en orden. Cada hija es una columna; la semántica (`header`, `aside`…) la pone la hija. */
+    children: ReactNode;
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+}
+/**
+ * Maquetación en columnas: N celdas iguales en escritorio, apiladas en móvil,
+ * con el aire por tokens. No sabe qué hay dentro ni jerarquiza: si una
+ * columna es complementaria, lo dice su contenido (`aside`, `header`), no el
+ * molde. Sin fondo, borde ni padding — eso es del `Container` de fuera o de
+ * las tarjetas de dentro.
+ *
+ * `{...rest}` (`role`, `aria-*`, `id`, `data-*`…) se reenvía al `<div>` de la
+ * rejilla, no a las celdas.
+ */
+export declare function Columns({ columns, ratio, align, gap, intermediate, stackOrder, children, className, ...rest }: ColumnsProps): import("react/jsx-runtime").JSX.Element;