@studiolxd/brand 38.12.4

package/dist/_types/email/emailTokens.d.ts

@@ -0,0 +1,70 @@
+export declare const emailTokens: {
+    readonly '--email-max-width': "600px";
+    readonly '--email-font-family': "\"Google Sans Flex\", system-ui, sans-serif";
+    readonly '--email-font-size': "20px";
+    readonly '--email-font-weight': "300";
+    readonly '--email-font-weight-range': "1 1000";
+    readonly '--email-line-height': "1.5";
+    readonly '--email-border-width': "1px";
+    readonly '--email-canvas-padding-block': "24px";
+    readonly '--email-canvas-padding-inline': "12px";
+    readonly '--email-padding-block': "24px";
+    readonly '--email-padding-inline': "24px";
+    readonly '--email-brand-padding-block': "16px";
+    readonly '--email-brand-padding-inline': "16px";
+    readonly '--email-opt-out-margin-block-start': "16px";
+    readonly '--email-heading-font-size': "32px";
+    readonly '--email-heading-font-weight': "500";
+    readonly '--email-heading-line-height': "1.1";
+    readonly '--email-heading-margin-block-end': "12px";
+    readonly '--email-text-margin-block-end': "16px";
+    readonly '--email-note-font-size': "16px";
+    readonly '--email-note-line-height': "1.65";
+    readonly '--email-text-emphasis-font-weight': "500";
+    readonly '--email-heading-2-font-size': "24px";
+    readonly '--email-heading-2-font-weight': "500";
+    readonly '--email-heading-2-line-height': "1.3";
+    readonly '--email-heading-2-margin-block-start': "24px";
+    readonly '--email-heading-2-margin-block-end': "12px";
+    readonly '--email-heading-2-color': "#111e30";
+    readonly '--email-list-margin-block-end': "16px";
+    readonly '--email-list-padding-inline-start': "24px";
+    readonly '--email-list-item-margin-block-end': "8px";
+    readonly '--email-quote-border-width': "2px";
+    readonly '--email-quote-border-color': "#4a4a4a";
+    readonly '--email-quote-padding-inline-start': "12px";
+    readonly '--email-quote-margin-block-end': "16px";
+    readonly '--email-divider-width': "1px";
+    readonly '--email-divider-color': "#d0d0d0";
+    readonly '--email-divider-margin-block': "24px";
+    readonly '--email-tag-font-size': "16px";
+    readonly '--email-tag-font-weight': "500";
+    readonly '--email-tag-border-radius': "9999px";
+    readonly '--email-tag-padding-block': "4px";
+    readonly '--email-tag-padding-inline': "12px";
+    readonly '--email-tag-margin-block-end': "16px";
+    readonly '--email-tone-success-bg': "#006616";
+    readonly '--email-tone-success-color': "#ffffff";
+    readonly '--email-tone-warning-bg': "#ffcd00";
+    readonly '--email-tone-warning-color': "#111e30";
+    readonly '--email-tone-error-bg': "#b30000";
+    readonly '--email-tone-error-color': "#ffffff";
+    readonly '--email-button-bg': "#baabff";
+    readonly '--email-button-color': "#111e30";
+    readonly '--email-button-hover-bg': "#ffcd00";
+    readonly '--email-button-hover-color': "#111e30";
+    readonly '--email-button-font-size': "20px";
+    readonly '--email-button-font-weight': "300";
+    readonly '--email-button-padding-block': "16px";
+    readonly '--email-button-width': "100%";
+    readonly '--email-button-fallback-margin-block-start': "12px";
+    readonly '--email-button-margin-block-end': "24px";
+    readonly '--email-logo-height': "85.33333333333333px";
+    readonly '--email-logo-padding': "8px";
+    readonly '--email-canvas-bg': "#ffffff";
+    readonly '--email-bg': "#ffffff";
+    readonly '--email-color': "#111e30";
+    readonly '--email-muted-color': "#4a4a4a";
+    readonly '--email-border-color': "#111e30";
+};
+export type EmailTokenName = keyof typeof emailTokens;

package/dist/_types/molecules/Alert/Alert.d.ts

@@ -0,0 +1,39 @@
+import './Alert.css';
+export type AlertVariant = 'default' | 'success' | 'error' | 'warning';
+export interface AlertProps extends React.ComponentPropsWithoutRef<'div'> {
+    variant?: AlertVariant;
+    /** Título del alert. **Opcional**: en modo composición usa `children` (p. ej. `<Alert.Title>`). */
+    title?: string;
+    description?: React.ReactNode;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    /**
+     * Dónde dejar el foco al descartar. El botón de cierre desaparece con el
+     * alert, así que el foco se movería al `<body>` y se perdería el sitio en la
+     * página. Pásale la referencia del elemento que provocó el aviso (el botón
+     * que lanzó la acción, el campo que falló). Sin ella, el componente enfoca
+     * el `<body>` con `tabindex="-1"` temporal: el lector vuelve al principio
+     * del documento, que es el último recurso, no lo deseable.
+     */
+    finalFocus?: React.RefObject<HTMLElement | null>;
+    /**
+     * Etiqueta accesible del botón de cierre. Default: «Cerrar» (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    closeLabel?: string;
+}
+export type AlertTitleProps = React.ComponentPropsWithoutRef<'p'>;
+export type AlertDescriptionProps = React.ComponentPropsWithoutRef<'div'>;
+/** Subparte de composición: título del alert. */
+export declare const AlertTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+/** Subparte de composición: descripción del alert. */
+export declare const AlertDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Namespace de composición. Las subpartes también están disponibles como **named
+ * exports** (`AlertTitle`, `AlertDescription`): en **Server Components (RSC)** usa los
+ * named exports — el namespace (`Alert.Title`) requiere contexto cliente.
+ */
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/_types/molecules/AppLauncher/AppLauncher.d.ts

@@ -0,0 +1,42 @@
+import './AppLauncher.css';
+export interface LauncherApp {
+    id: string;
+    name: string;
+    url: string;
+    isNew?: boolean;
+}
+export interface AppLauncherLabels {
+    /** Texto accesible del trigger («Abrir launcher de apps»). Solo se usa como `aria-label` cuando no hay `trigger`: con texto visible, el nombre accesible es ese texto. */
+    open: string;
+    /** Texto del badge de app nueva. */
+    new: string;
+    /**
+     * Texto visible del disparador (p. ej. «Aplicaciones»), a la derecha del
+     * icono de rejilla. Sin él, el disparador se queda como hoy: solo icono,
+     * con `open` de nombre accesible.
+     */
+    trigger?: string;
+    /**
+     * Título del diálogo cuando `presentation="modal"`. Default: «Aplicaciones»
+     * (castellano). Sin uso en `presentation="popover"`, que no lleva título.
+     */
+    title?: string;
+}
+export interface AppLauncherProps {
+    apps: LauncherApp[];
+    labels: AppLauncherLabels;
+    /** Id de la app actual — se marca en la rejilla. */
+    currentAppId?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Contenedor del panel. `'modal'` (por defecto): diálogo centrado, como
+     * `CommandPalette` — foco atrapado, más sitio para crecer y el mismo lugar
+     * de la suite para descripciones o más aplicaciones. `'popover'`: el panel
+     * flotante anclado al disparador que tenía el componente antes de v35 —
+     * quien lo prefiera lo pide explícitamente.
+     */
+    presentation?: 'modal' | 'popover';
+}
+export declare function AppLauncher({ presentation, ...rest }: AppLauncherProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/molecules/AssistantMessage/AssistantMessage.d.ts

@@ -0,0 +1,34 @@
+import { type MessageTimestamp } from '../_shared/messageTimestamp';
+import './AssistantMessage.css';
+export interface AssistantMessageProps extends React.ComponentPropsWithoutRef<'div'> {
+    children?: React.ReactNode;
+    /** Nombre del modelo que generó la respuesta (ej. "Claude Opus 5"). */
+    model?: string;
+    /**
+     * Momento del mensaje: un `Date` o una cadena ISO 8601. Se pinta en un
+     * `<time datetime>`, así que tiene que ser el instante, no una hora ya
+     * formateada — de eso se encarga el componente con `Intl`.
+     */
+    timestamp?: MessageTimestamp;
+    /** Locale con el que se formatea la marca de tiempo. Default `'es-ES'`. */
+    locale?: string;
+    /**
+     * Opciones de `Intl.DateTimeFormat` para la marca de tiempo.
+     * Default: hora y minutos a dos dígitos.
+     */
+    timestampFormat?: Intl.DateTimeFormatOptions;
+    /** Cuando true, muestra el indicador de escritura en lugar del contenido. */
+    isStreaming?: boolean;
+    /** Texto anunciado por lectores de pantalla para el estado de escritura. */
+    streamingLabel?: string;
+    /** Se añade DESPUÉS de las clases propias del componente (el consumidor añade, no sustituye). */
+    className?: string;
+}
+/**
+ * Un mensaje del asistente dentro del hilo: el nombre del modelo que firma la
+ * respuesta, el globo alineado al lado de inicio y su marca de tiempo debajo.
+ * Mientras la respuesta se está generando, el globo lleva el `TypingIndicator`.
+ *
+ * Reenvía el resto de props del `<div>` (`data-*`, `aria-*`, `id`…) y el `ref`.
+ */
+export declare const AssistantMessage: import("react").ForwardRefExoticComponent<AssistantMessageProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/_types/molecules/AsyncMultiSelectField/AsyncMultiSelectField.d.ts

@@ -0,0 +1,54 @@
+import './AsyncMultiSelectField.css';
+import { AsyncMultiSelect } from '../../atoms/AsyncMultiSelect/AsyncMultiSelect';
+import type { AsyncMultiSelectOption } from '../../atoms/AsyncMultiSelect/AsyncMultiSelect';
+export type { AsyncMultiSelectOption };
+export interface AsyncMultiSelectFieldProps {
+    /** `id` del control. Si no se pasa, se genera con `useId`. */
+    id?: string;
+    label: string;
+    /**
+     * Oculta la etiqueta a la vista (sigue leyéndola el lector de pantalla).
+     * Por defecto `false`: la etiqueta se ve.
+     * Sin valor, lo decide quien lo envuelva: dentro de un `FieldRow` que no
+     * es la primera de la lista, la etiqueta se oculta sola.
+     */
+    labelHidden?: boolean;
+    onSearch: (query: string) => Promise<AsyncMultiSelectOption[]>;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** Opciones elegidas: hacen falta para poder mostrar sus etiquetas. */
+    selectedOptions?: AsyncMultiSelectOption[];
+    placeholder?: string;
+    /** Nombre del campo en el formulario: se monta un input oculto por valor elegido. */
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Marca el control como obligatorio (`aria-required` en el combobox). */
+    required?: boolean;
+    /** Marca el control en error sin mensaje. Un `errorMessage` ya lo implica. */
+    error?: boolean;
+    /** Mensaje de error: se anuncia (`role="alert"`) y pone el control en error. */
+    errorMessage?: string;
+    /** Texto de ayuda, enlazado por `aria-describedby`. */
+    helperText?: string;
+    size?: 'sm' | 'md' | 'lg';
+    /** Milisegundos de rebote antes de llamar a `onSearch`. Default: 300. */
+    debounceMs?: number;
+    /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
+    className?: string;
+    /** Texto cuando la búsqueda no devuelve nada. Default: "Sin resultados". */
+    emptyMessage?: string;
+    /** aria-label del botón que quita un valor. Default: `Quitar ${etiqueta}` (castellano). */
+    removeLabel?: (label: string) => string;
+    /** Etiqueta accesible del spinner mientras se busca. Default: "Buscando…". */
+    loadingLabel?: string;
+    /** Nodo DOM donde montar el portal del desplegable (ver `AsyncMultiSelect`). */
+    container?: React.ComponentProps<typeof AsyncMultiSelect>['container'];
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+/**
+ * El `AsyncMultiSelect` como campo de formulario. El `ref` va al `<input>` de
+ * búsqueda, que es lo que se enfoca; el `className`, al contenedor.
+ */
+export declare const AsyncMultiSelectField: import("react").ForwardRefExoticComponent<AsyncMultiSelectFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/_types/molecules/AsyncSelectField/AsyncSelectField.d.ts

@@ -0,0 +1,53 @@
+import './AsyncSelectField.css';
+import { AsyncSelect } from '../../atoms/AsyncSelect/AsyncSelect';
+import type { AsyncSelectOption } from '../../atoms/AsyncSelect/AsyncSelect';
+export type { AsyncSelectOption };
+export interface AsyncSelectFieldProps {
+    /** `id` del control. Si no se pasa, se genera con `useId`. */
+    id?: string;
+    label: string;
+    /**
+     * Oculta la etiqueta a la vista (sigue leyéndola el lector de pantalla).
+     * Por defecto `false`: la etiqueta se ve.
+     * Sin valor, lo decide quien lo envuelva: dentro de un `FieldRow` que no
+     * es la primera de la lista, la etiqueta se oculta sola.
+     */
+    labelHidden?: boolean;
+    onSearch: (query: string) => Promise<AsyncSelectOption[]>;
+    value?: string | null;
+    onValueChange?: (value: string | null, option: AsyncSelectOption | null) => void;
+    /** Opción elegida: hace falta para poder mostrar su etiqueta cuando hay `value`. */
+    selectedOption?: AsyncSelectOption | null;
+    placeholder?: string;
+    /** Nombre del campo en el formulario: se monta un input oculto con el valor. */
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Marca el control como obligatorio (`aria-required` en el combobox). */
+    required?: boolean;
+    /** Marca el control en error sin mensaje. Un `errorMessage` ya lo implica. */
+    error?: boolean;
+    /** Mensaje de error: se anuncia (`role="alert"`) y pone el control en error. */
+    errorMessage?: string;
+    /** Texto de ayuda, enlazado por `aria-describedby`. */
+    helperText?: string;
+    size?: 'sm' | 'md' | 'lg';
+    /** Milisegundos de rebote antes de llamar a `onSearch`. Default: 300. */
+    debounceMs?: number;
+    /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
+    className?: string;
+    /** Texto cuando la búsqueda no devuelve nada. Default: "Sin resultados". */
+    emptyMessage?: string;
+    /** Etiqueta accesible del spinner mientras se busca. Default: "Buscando…". */
+    loadingLabel?: string;
+    /** aria-label del botón de limpiar selección. Default: "Limpiar selección". */
+    clearLabel?: string;
+    /** Nodo DOM donde montar el portal del desplegable (ver `AsyncSelect`). */
+    container?: React.ComponentProps<typeof AsyncSelect>['container'];
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+/**
+ * El `AsyncSelect` como campo de formulario. El `ref` va al `<input>` de
+ * búsqueda, que es lo que se enfoca; el `className`, al contenedor.
+ */
+export declare const AsyncSelectField: import("react").ForwardRefExoticComponent<AsyncSelectFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/_types/molecules/AvatarUpload/AvatarUpload.d.ts

@@ -0,0 +1,125 @@
+import { type ReactNode } from 'react';
+import { type FormSize } from '../../constants/form-size';
+import './AvatarUpload.css';
+export interface AvatarUploadProps {
+    /** URL de la imagen actual. Sin ella, el avatar enseña las iniciales de `name`. */
+    src?: string | null;
+    /** Nombre de la persona o de la organización: da las iniciales y el nombre accesible. */
+    name?: string;
+    /** Nombre accesible del avatar. Por defecto, `name`. */
+    alt?: string;
+    /** `circle` para personas, `square` para organizaciones. También decide la selección del recorte. */
+    shape?: 'circle' | 'square';
+    /**
+     * Talla del sistema: mueve a la vez el botón y el avatar (que va cuatro
+     * peldaños por encima: `sm` → 96px, `md` → 128px, `lg` → 192px).
+     * Sin ella, la del `Form`/`FormSizeContext` que lo envuelva; sin contexto, `md`.
+     */
+    size?: FormSize;
+    /** Tipos MIME admitidos, como el `accept` del input. */
+    accept?: string;
+    /** Peso máximo en bytes. Sin él, no hay límite de peso. */
+    maxSize?: number;
+    /** Formato del recorte que se entrega. */
+    outputMimeType?: 'image/jpeg' | 'image/png' | 'image/webp';
+    /** Lado del recorte que se entrega, en píxeles. */
+    outputSize?: number;
+    disabled?: boolean;
+    /** El consumidor está subiendo: bloquea el botón, la diana y el diálogo. */
+    busy?: boolean;
+    /** Error del consumidor (el que devuelve el servidor). Se suma al de la validación de cliente. */
+    errorMessage?: string;
+    /** El recorte confirmado, con el archivo original del que salió. */
+    onChange: (blob: Blob, file: File) => void | Promise<void>;
+    /** El archivo elegido (por botón o soltándolo) que ha pasado la validación, antes de recortar. */
+    onSelect?: (file: File) => void;
+    /** Un archivo rechazado por la validación de cliente, con el mensaje que se enseña. */
+    onError?: (message: string) => void;
+    /**
+     * Texto **visible** del botón. Default: "Subir" (castellano).
+     * Corto a propósito: el nombre completo va en `buttonAccessibleLabel`.
+     */
+    buttonLabel?: string;
+    /**
+     * Nombre **accesible** del botón, para decir de qué es la subida ("Subir
+     * logo", "Subir avatar"). Por defecto, `buttonLabel`.
+     *
+     * WCAG 2.5.3 (Label in Name) exige que **contenga** el texto visible: quien
+     * navega por voz dice lo que ve. "Subir" dentro de "Subir logo" cumple;
+     * "Cargar imagen de la organización" no, y deja el control inalcanzable.
+     * En desarrollo se avisa por consola si no lo contiene.
+     */
+    buttonAccessibleLabel?: string;
+    /**
+     * Qué se puede subir. No se ve: describe el botón (`aria-describedby`),
+     * porque el `accept` del input no lo anuncia ningún lector de pantalla.
+     * Default: los formatos y el peso máximo ("JPEG, PNG, WEBP · máx. 5 MB").
+     */
+    hintLabel?: string;
+    /**
+     * Los formatos, escritos para leer. Default: los subtipos de `accept` en
+     * mayúsculas. Con comodines (`image/*`) pásalo escrito.
+     */
+    formatsLabel?: string;
+    /** Pista de peso máximo. Default: `máx. ${size}` (el peso ya viene formateado). */
+    maxSizeHint?: (maxSize: string) => string;
+    /**
+     * Error de formato. Default: `Formato no admitido. Se aceptan ${formatos}.`
+     * Dice lo que SÍ se acepta: por el botón el error es imposible (lo filtra el
+     * diálogo del sistema), pero soltando un archivo no hay filtro que valga.
+     */
+    invalidTypeError?: (formats: string) => string;
+    /** Error de peso. Default: `El archivo pesa demasiado. El máximo es ${max}.` */
+    tooLargeError?: (maxSize: string) => string;
+    /**
+     * Lo que se anuncia cuando empieza un arrastre sobre la ventana.
+     * Default: "Suelta la imagen sobre el avatar para subirla".
+     */
+    dropActiveMessage?: string;
+    /**
+     * Pista **visible** bajo el botón: dice que además se puede arrastrar, que
+     * es lo único de esta pieza que no se adivina mirándola. Default castellano:
+     * "…o arrastra la imagen hasta el avatar". Con cadena vacía no se pinta.
+     */
+    dropHintLabel?: string;
+    /**
+     * Título del diálogo de recorte. Default: "Recortar imagen" (castellano).
+     * Es una acción, no una invitación: nombra lo que va a pasar, sin segunda
+     * persona, como el resto de títulos de diálogo del sistema.
+     */
+    cropTitle?: string;
+    /**
+     * Descripción del diálogo de recorte. **Sin default**: el diálogo enseña la
+     * imagen y su marco de selección, que se explican solos. Pásala solo si en
+     * tu caso hay algo que decir que no esté ya a la vista.
+     */
+    cropDescription?: ReactNode;
+    /** Default: "Cancelar". */
+    cropCancelLabel?: ReactNode;
+    /** Default: "Guardar". */
+    cropConfirmLabel?: ReactNode;
+    /** Etiqueta del aspa de cerrar. Default: "Cerrar". */
+    cropCloseLabel?: string;
+    /** Lo que se dice mientras la imagen se carga en el diálogo. Default: "Cargando imagen…". */
+    cropLoadingLabel?: string;
+    /** Lo que se dice cuando la imagen no se puede cargar. Default: "No hemos podido cargar la imagen. Prueba con otro archivo.". */
+    cropErrorMessage?: string;
+    /** Se añade DESPUÉS de las clases propias del componente. */
+    className?: string;
+}
+/**
+ * El avatar de una entidad —una persona o una organización— con su subida: se
+ * elige la imagen con el botón o soltándola sobre el avatar, se recorta y se
+ * entrega el recorte. La subida de verdad (a dónde va el archivo) es del
+ * producto: el componente pone presentación, interacción, validación de
+ * cliente y recorte.
+ *
+ * La diana es el avatar, no el bloque: lo que acepta el archivo es lo que se
+ * va a sustituir. Como diana es pequeña, en cuanto empieza un arrastre sobre
+ * la ventana el avatar se anuncia con un anillo (y con un mensaje para quien
+ * no ve la pantalla); el anillo se pinta con `outline`, por fuera, así que la
+ * zona sensible sigue siendo exactamente el avatar. El botón se queda siempre:
+ * arrastrar no existe para el teclado, así que es la vía principal, no un
+ * respaldo.
+ */
+export declare function AvatarUpload({ src, name, alt, shape, size: sizeProp, accept, maxSize, outputMimeType, outputSize, disabled, busy, errorMessage, onChange, onSelect, onError, buttonLabel, buttonAccessibleLabel, hintLabel, formatsLabel, maxSizeHint, invalidTypeError, tooLargeError, dropActiveMessage, dropHintLabel, cropTitle, cropDescription, cropCancelLabel, cropConfirmLabel, cropCloseLabel, cropLoadingLabel, cropErrorMessage, className, }: AvatarUploadProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/molecules/Banner/Banner.d.ts

@@ -0,0 +1,40 @@
+import './Banner.css';
+export type BannerVariant = 'info' | 'warning';
+export interface BannerProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** Intención de la barra. Default `'info'` (relleno prusia); `'warning'` es el relleno de aviso. */
+    variant?: BannerVariant;
+    /** El mensaje. Texto corriente: una frase, no un bloque. */
+    children?: React.ReactNode;
+    /** Ranura para las acciones — normalmente un `Button` del sistema. */
+    actions?: React.ReactNode;
+    /**
+     * Qué hacer al descartar. Si se pasa, la barra pinta el aspa. La barra **no
+     * se oculta sola**: es de sistema y quien decide si sigue en pantalla es la
+     * aplicación, que sabe si la condición que la provocó sigue vigente.
+     */
+    onDismiss?: () => void;
+    /**
+     * Nombre accesible del aspa. Default: «Descartar aviso» (castellano). Una app
+     * multiidioma debe pasarlo traducido.
+     */
+    dismissLabel?: string;
+}
+/**
+ * Barra de sistema: un aviso persistente, a ancho completo, que acompaña a toda
+ * la sesión y vive **fuera** del contenido —el caso de referencia es «estás
+ * viendo la aplicación como alguien» con el botón de dejar de suplantar—.
+ *
+ * No es un `Alert`: el alert va **en el flujo**, dentro del contenido, y habla
+ * de lo que hay a su alrededor (un formulario que falló, un dato que hace
+ * falta). El banner habla del estado de la sesión entera y por eso no se
+ * intercala en la lectura: se pega arriba (o abajo) del chrome.
+ *
+ * No fija su posición: `sticky` lo decide la aplicación con el layout del
+ * sistema. Tampoco se oculta sola — `onDismiss` avisa y la app decide.
+ *
+ * Anuncia como `role="status"` con `aria-live="polite"`, que es lo que
+ * corresponde a un aviso que no interrumpe. Ambos se pueden sobrescribir.
+ *
+ * Extiende los atributos nativos de `<div>` y reenvía `{...rest}` al raíz.
+ */
+export declare const Banner: import("react").ForwardRefExoticComponent<BannerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/_types/molecules/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,23 @@
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+import './Breadcrumb.css';
+export type BreadcrumbItem = {
+    label: string;
+    href?: string;
+};
+export type BreadcrumbRenderLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+    children: ReactNode;
+    className: string;
+};
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    renderLink?: (props: BreadcrumbRenderLinkProps) => ReactNode;
+    separator?: ReactNode;
+    /**
+     * `aria-label` del `<nav>`. Default: «Migas de pan» (castellano).
+     * Una app multiidioma debe pasarlo traducido.
+     */
+    ariaLabel?: string;
+    className?: string;
+}
+export declare function Breadcrumb({ items, renderLink, separator, ariaLabel, className, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/molecules/Calendar/Calendar.d.ts

@@ -0,0 +1,58 @@
+import './Calendar.css';
+export interface CalendarProps {
+    /** Fecha seleccionada (modo controlado) */
+    value?: Date | null;
+    /** Callback al seleccionar una fecha */
+    onChange?: (date: Date) => void;
+    /** Mes inicial en modo no controlado */
+    defaultMonth?: Date;
+    /** Mes visible (modo controlado) */
+    month?: Date;
+    /** Callback al cambiar de mes */
+    onMonthChange?: (month: Date) => void;
+    /** Muestra los botones de navegación prev/next. Default: true */
+    navigable?: boolean;
+    /** Deshabilita fechas concretas o por función */
+    disabledDates?: Date[] | ((date: Date) => boolean);
+    /** Límite inferior seleccionable */
+    minDate?: Date;
+    /** Límite superior seleccionable */
+    maxDate?: Date;
+    /** Locale para nombres de mes y día. Default: 'es-ES' */
+    locale?: string;
+    /**
+     * aria-label del botón de mes anterior. Default: "Mes anterior" (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    previousMonthLabel?: string;
+    /**
+     * aria-label del botón de mes siguiente. Default: "Mes siguiente" (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    nextMonthLabel?: string;
+    /**
+     * aria-label del botón de retroceso **en la vista de años**. Default: "Años
+     * anteriores" (castellano). Una app multiidioma debe pasarla traducida.
+     */
+    previousYearsLabel?: string;
+    /**
+     * aria-label del botón de avance en la vista de años. Default: "Años
+     * siguientes" (castellano).
+     */
+    nextYearsLabel?: string;
+    /**
+     * aria-label de la rejilla de años. Default: "Elegir año" (castellano).
+     */
+    yearGridLabel?: string;
+    /**
+     * aria-label de la rejilla de días. Sin ella, la rejilla toma como nombre el
+     * título del mes visible. Cuando el calendario vive dentro de un panel con
+     * nombre propio (el `Popover` de `DatePicker`), conviene pasarlo aquí.
+     * Es texto visible para lectores: una app multiidioma debe pasarlo traducido.
+     */
+    gridLabel?: string;
+    /** Tamaño del componente. Default: 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function Calendar({ value, onChange, defaultMonth, month: monthProp, onMonthChange, navigable, disabledDates, minDate, maxDate, locale, previousMonthLabel, nextMonthLabel, previousYearsLabel, nextYearsLabel, yearGridLabel, gridLabel, size, className, }: CalendarProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/molecules/CalendarPlanner/CalendarPlanner.d.ts

@@ -0,0 +1,71 @@
+import { type ReactNode } from 'react';
+import type { TagVariant } from '../../atoms/Tag/Tag';
+import './CalendarPlanner.css';
+export interface PlannerEvent {
+    id: string;
+    date: Date;
+    label: string;
+    variant?: TagVariant;
+}
+export interface CalendarPlannerProps {
+    /** Eventos a mostrar en el planificador */
+    events?: PlannerEvent[];
+    /**
+     * Render prop para personalizar el contenido de cada celda.
+     * Si se pasa, sustituye al renderizado por defecto de tags.
+     */
+    renderDay?: (date: Date, events: PlannerEvent[]) => ReactNode;
+    /** Número máximo de eventos visibles por celda antes de truncar. Default: 3 */
+    maxItemsPerDay?: number;
+    /** Callback al pulsar "+N más" en una celda */
+    onMoreClick?: (date: Date, events: PlannerEvent[]) => void;
+    /**
+     * Abre el diálogo interno con los eventos ocultos al pulsar "+N más".
+     * Default: `true`, salvo que se pase `onMoreClick`, en cuyo caso el
+     * consumidor lleva ya el desbordamiento y el diálogo propio se apaga.
+     * Pásalo a `true` de forma explícita para tener las dos cosas.
+     */
+    showMoreDialog?: boolean;
+    /**
+     * Callback al hacer click en cualquier celda de día (incluso días vacíos y externos).
+     * Recibe la fecha de la celda y el array de eventos de ese día (vacío si no hay ninguno).
+     * Compatible con renderDay: el click se dispara en el contenedor de la celda.
+     */
+    onDayClick?: (date: Date, events: PlannerEvent[]) => void;
+    /** Mes visible (modo controlado) */
+    month?: Date;
+    /** Mes inicial en modo no controlado */
+    defaultMonth?: Date;
+    /** Callback al cambiar de mes */
+    onMonthChange?: (month: Date) => void;
+    /** Muestra los botones de navegación prev/next. Default: true */
+    navigable?: boolean;
+    /** Locale para nombres de mes y día. Default: 'es-ES' */
+    locale?: string;
+    /**
+     * aria-label del botón de mes anterior. Default: "Mes anterior" (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    previousMonthLabel?: string;
+    /**
+     * aria-label del botón de mes siguiente. Default: "Mes siguiente" (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    nextMonthLabel?: string;
+    /**
+     * aria-label de la rejilla de días. Sin ella, la rejilla toma como nombre el
+     * título del mes visible. Es texto para lectores: una app multiidioma debe
+     * pasarlo traducido.
+     */
+    gridLabel?: string;
+    /**
+     * Rótulo visible del botón que abre los eventos ocultos de una celda.
+     * Default: `+N más` (castellano). Interpola el número, así que es una
+     * función: una app multiidioma debe pasarla traducida.
+     */
+    moreLabel?: (count: number) => string;
+    /** Tamaño del componente. Default: 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function CalendarPlanner({ events, renderDay, maxItemsPerDay, onMoreClick, showMoreDialog, onDayClick, month: monthProp, defaultMonth, onMonthChange, navigable, locale, previousMonthLabel, nextMonthLabel, gridLabel, moreLabel, size, className, }: CalendarPlannerProps): import("react/jsx-runtime").JSX.Element;