@studiolxd/brand 38.12.4

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

@@ -0,0 +1,70 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import './FieldRow.css';
+/** Ancho de una celda de la fila. `grow` absorbe el sobrante; el resto son anchos propios. */
+export type FieldRowWidth = 'grow' | 'sm' | 'md' | 'lg' | 'auto';
+export interface FieldRowsProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Dónde se ven las etiquetas de los campos: solo en la primera fila (por
+     * defecto, que es como se lee una lista en columnas) o en todas. En las
+     * filas sin etiqueta visible el `<label>` sigue ahí, oculto: el campo
+     * conserva su nombre accesible.
+     * @default 'first-row'
+     */
+    labels?: 'first-row' | 'every-row';
+    /** Qué pintar cuando no queda ninguna fila. Sin él, la lista no ocupa nada. */
+    empty?: ReactNode;
+    /** Las filas: una `FieldRow` por cada elemento de la lista editable. */
+    children?: ReactNode;
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+}
+/**
+ * La lista de filas editables: invitar personas, dominios, redirecciones,
+ * variables de entorno. Solo aporta el aire entre filas y **la posición**: es
+ * lo que le permite decidir qué fila enseña las etiquetas, en vez de que cada
+ * consumidor se acuerde de pasar `labelHidden={i > 0}` fila a fila.
+ *
+ * `{...rest}` (`role`, `aria-label`, `id`, `data-*`…) va al `<div>`: la lista
+ * puede ser un grupo con nombre sin envolverla en otro elemento.
+ */
+export declare function FieldRows({ labels, empty, children, className, ...rest }: FieldRowsProps): import("react/jsx-runtime").JSX.Element;
+export interface FieldRowProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /**
+     * Ancho de cada celda, por posición: `grow` absorbe el sobrante, `sm`/`md`/`lg`
+     * son anchos propios y `auto` deja mandar al contenido. Sin la prop, la
+     * primera celda crece y las demás van a `md`.
+     */
+    widths?: FieldRowWidth[];
+    /**
+     * La acción sobre la fila entera (quitarla, normalmente un `Button iconOnly`).
+     * Va en su propia celda al final, **fuera de la columna de cualquier campo**:
+     * no cuelga de la etiqueta de otra cosa ni ocupa su sitio. Su nombre accesible
+     * lo pone el consumidor, y nombra la fila («Quitar a nuria@…»), no la columna.
+     */
+    action?: ReactNode;
+    /**
+     * Si esta fila enseña las etiquetas de sus campos. Dentro de `FieldRows` lo
+     * decide la lista (solo la primera); suelta, la fila las enseña.
+     */
+    labelled?: boolean;
+    /** Talla de los campos, para alinear la acción con los controles. Se hereda del `Form`. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Las celdas, en orden: un campo por celda. */
+    children: ReactNode;
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+}
+/**
+ * Una fila de campos con una acción al final: **reparto mixto** —una celda que
+ * crece, otras con su ancho propio y la acción ocupando lo justo—, que es lo
+ * que `Columns` no hace (reparte proporciones sobre celdas iguales).
+ *
+ * Por debajo de `md` los campos se apilan a ancho completo y la acción cae al
+ * final, alineada al margen: sigue leyéndose como lo último que afecta a todo
+ * lo de arriba, y queda donde la mano ya la busca en escritorio.
+ *
+ * Habilitar o deshabilitar la acción —la lista con una sola fila, que no se
+ * puede quitar— es del consumidor: la fila no cuenta filas ni sabe qué hace su
+ * acción. El `disabled` va en el botón que se le pasa.
+ */
+export declare function FieldRow({ widths, action, labelled: labelledProp, size: sizeProp, children, className, ...rest }: FieldRowProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+import './FileUploadField.css';
+import type { FileUploadProps } from '../../atoms/FileUpload/FileUpload';
+export interface FileUploadFieldProps extends Omit<FileUploadProps, 'describedBy' | 'ariaLabel' | 'aria-describedby' | 'id'> {
+    /** `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, como en el resto de campos.
+     * 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;
+    /** Mensaje de error: se anuncia (`role="alert"`) y pone el control en error. */
+    errorMessage?: string;
+    /** Texto de ayuda, enlazado por `aria-describedby`. */
+    helperText?: string;
+    /**
+     * Talla del sistema: mueve la etiqueta y la zona de arrastre a la vez (aire,
+     * cuerpo del texto, icono y miniatura de cada archivo).
+     * Sin ella, la del `Form` que lo envuelva; sin `Form`, `md`.
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * El `FileUpload` como campo de formulario. El `ref` va al `<input type="file">`
+ * real (react-hook-form lo registra y lo enfoca al fallar la validación); el
+ * `className`, al contenedor.
+ */
+export declare const FileUploadField: import("react").ForwardRefExoticComponent<FileUploadFieldProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,44 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import './FilterBar.css';
+export interface FilterBarProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /**
+     * El buscador: el campo de búsqueda del sistema —un `InputField kind="search"`,
+     * que es el que trae la lupa, o el `SearchForm` cuando la consulta viaja a
+     * otra página—. Ocupa **su propia línea entera**, siempre: es lo primero que
+     * se toca y lo que más se escribe.
+     */
+    search?: ReactNode;
+    /**
+     * Los filtros: un campo del sistema por filtro (`SelectField`,
+     * `DatePickerField`…), **con su etiqueta visible**. Un filtro sin rótulo
+     * obliga a abrirlo para saber qué filtra. En escritorio se reparten en
+     * columnas; en móvil se apilan a ancho completo.
+     */
+    children?: ReactNode;
+    /**
+     * Acciones sobre los filtros —«Limpiar filtros», normalmente—, al final de
+     * la fila de filtros y alineadas con los controles, no con sus rótulos.
+     */
+    actions?: ReactNode;
+    /**
+     * Nombre accesible del punto de referencia `search` que es la barra.
+     * Default: «Filtros» (castellano). Una app multiidioma debe pasarlo traducido.
+     */
+    ariaLabel?: string;
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+}
+/**
+ * La barra de filtros de un listado: el buscador en su línea y, debajo, los
+ * filtros en columnas. Es **maqueta y nada más** —no sabe qué se filtra, no
+ * guarda estado y no pide datos—: cada filtro es un campo controlado por el
+ * consumidor, igual que en un formulario.
+ *
+ * Existe porque montarla a mano en un `Inline` se rompe en móvil: los campos
+ * no encogen por debajo de su contenido y la fila se sale. Aquí la rejilla es
+ * `auto-fit` sobre un ancho mínimo por token, así que el número de columnas lo
+ * decide el sitio disponible y en pantalla estrecha queda una sola.
+ *
+ * `{...rest}` (`id`, `data-*`, `aria-*`…) va al `<div>`.
+ */
+export declare function FilterBar({ search, children, actions, ariaLabel, className, ...rest }: FilterBarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type FormSize } from '../../constants/form-size';
+import './Form.css';
+export interface FormProps extends Omit<ComponentProps<'form'>, 'children'> {
+    /** Los campos. Opcional: un formulario puede ser solo acciones (reenviar un correo, aceptar o rechazar). */
+    children?: ReactNode;
+    /** Errores del formulario entero (los que no cuelgan de un campo): el fallo del servidor, por ejemplo. */
+    errors?: string[];
+    /** La acción principal (y, si hay, la secundaria): botones. */
+    actions?: ReactNode;
+    /** Enlaces secundarios bajo las acciones: «¿Has olvidado la contraseña?», o con texto delante (punto fuera del enlace): `<Paragraph>¿No tienes cuenta? <Link>Regístrate</Link>.</Paragraph>`. */
+    links?: ReactNode;
+    /** El captcha (Turnstile, reCAPTCHA…): entre los campos y las acciones, con su propio aire. */
+    captcha?: ReactNode;
+    /** Otras formas de hacer lo mismo: acceso con Google, enlace mágico… Van separadas del bloque principal. */
+    alternatives?: ReactNode;
+    /** Rótulo sobre las alternativas: «o continúa con». */
+    alternativesLabel?: string;
+    /** Talla de todos los campos y botones (32/40/48): `lg` en superficies públicas, `md` dentro de las aplicaciones. */
+    size?: FormSize;
+    /** Acciones en bloque: los botones a todo el ancho, apilados, también en escritorio (acceso, registro…). */
+    blockActions?: boolean;
+    /** Mensaje de éxito que sustituye al formulario («Gracias — tu mensaje se ha enviado.»): texto anunciado (`role="status"`), sin caja. Con `success`, no se pintan campos ni acciones; `links` sí. */
+    success?: ReactNode;
+}
+/**
+ * El formulario del sistema: solo estructura y aire. Campos apilados, los
+ * errores del formulario, las acciones, los enlaces secundarios y las
+ * alternativas, cada bloque con su separación por tokens; y la talla, que
+ * reparte a todo lo de dentro. Lo que hay dentro de cada campo (etiqueta,
+ * control, ayuda, error) es de los `*Field`; el estado y la validación, del
+ * producto (`FormField` para react-hook-form).
+ */
+export declare const Form: import("react").ForwardRefExoticComponent<Omit<FormProps, "ref"> & import("react").RefAttributes<HTMLFormElement>>;

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

@@ -0,0 +1,70 @@
+import { type ComponentProps } from 'react';
+import { FormProvider as RhfFormProvider, type ControllerProps, type FieldPath, type FieldValues } from 'react-hook-form';
+import { Label } from '../../atoms/Label/Label';
+import './FormField.css';
+type Translate = (message: string) => string;
+/**
+ * Proveedor del formulario: el `FormProvider` de react-hook-form, expuesto
+ * desde el DS para que los consumidores no tengan que importar dos sitios
+ * para montar un campo, más `translate`: si los mensajes de error del
+ * esquema son claves de traducción (una política compartida con el
+ * servidor, por ejemplo), `FormMessage` y `FormRootMessage` las pasan por
+ * aquí antes de pintarlas.
+ */
+export declare function FormProvider<TFieldValues extends FieldValues = FieldValues, TContext = unknown, TTransformedValues = TFieldValues>({ translate, children, ...form }: ComponentProps<typeof RhfFormProvider<TFieldValues, TContext, TTransformedValues>> & {
+    translate?: Translate;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Un campo controlado: envuelve el `Controller` de react-hook-form y publica
+ * su `name` para que el resto de piezas del campo (label, control, mensaje)
+ * sepan a qué error mirar.
+ */
+export declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformedValues = TFieldValues>({ ...props }: ControllerProps<TFieldValues, TName, TTransformedValues>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Estado e ids del campo en el que se está: quién es, si tiene error y con
+ * qué ids se enlazan su control, su ayuda y su mensaje.
+ */
+export declare function useFormField(): {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError | undefined;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+    described: {
+        description: boolean;
+        message: boolean;
+    };
+    register: (part: "description" | "message", present: boolean) => void;
+};
+/** Contenedor de un campo: reserva los ids que enlazan sus partes. */
+export declare function FormItem({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+/** Etiqueta del campo, ya apuntada a su control y marcada si hay error. */
+export declare function FormLabel({ ...props }: ComponentProps<typeof Label>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Envoltorio del control real (input, select, textarea…). No renderiza nodo
+ * propio: fusiona en su hijo el `id`, el `aria-describedby` y el
+ * `aria-invalid` que corresponden al campo.
+ */
+export declare function FormControl({ children, ...props }: {
+    children: React.ReactElement<Record<string, unknown>>;
+} & Record<string, unknown>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Texto de ayuda del campo, enlazado al control por `aria-describedby`. */
+export declare function FormDescription({ className, ...props }: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Mensaje de error del campo. Renderiza el error de react-hook-form si lo
+ * hay, o sus children si no; sin ninguno de los dos no renderiza nada.
+ */
+export declare function FormMessage({ className, children, ...props }: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Error del formulario entero (p. ej. "usuario o contraseña incorrectos"),
+ * el que se pone con `form.setError("root", …)` y no cuelga de ningún campo.
+ * Se coloca una vez al final del formulario: a diferencia de `FormMessage`
+ * no tiene campo del que leer, así que va directo al `formState`.
+ */
+export declare function FormRootMessage({ className, ...props }: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+import 'react-image-crop/dist/ReactCrop.css';
+import './ImageCropDialog.css';
+export interface ImageCropDialogProps {
+    /** Object URL del fichero elegido; el diálogo está abierto mientras no sea null. */
+    sourceUrl: string | null;
+    title: string;
+    description?: ReactNode;
+    /** Selección circular (avatares). El blob resultante sigue siendo cuadrado. */
+    circularCrop?: boolean;
+    aspect?: number;
+    /** Lado mayor del blob producido, en píxeles. */
+    outputSize?: number;
+    outputMimeType: 'image/jpeg' | 'image/png' | 'image/webp';
+    /** Deshabilita ambas acciones y bloquea el cierre mientras el consumidor sube. */
+    busy?: boolean;
+    cancelLabel: ReactNode;
+    confirmLabel: ReactNode;
+    /** Etiqueta del botón de cierre del diálogo. */
+    closeLabel?: string;
+    /**
+     * Lo que se dice mientras la imagen se descarga y descodifica. Se anuncia y
+     * se ve. Default castellano: «Cargando imagen…».
+     */
+    loadingLabel?: string;
+    /**
+     * Lo que se dice cuando la imagen no se puede cargar. Default castellano:
+     * «No hemos podido cargar la imagen. Prueba con otro archivo.».
+     */
+    errorMessage?: string;
+    onConfirm: (blob: Blob) => void | Promise<void>;
+    onClose: () => void;
+    className?: string;
+}
+/**
+ * Diálogo de recorte de imagen para subidas de avatar y logo: elige una
+ * región sobre la imagen y devuelve el recorte ya reescalado como `Blob`.
+ *
+ * `react-image-crop` aporta el gesto de selección; el DS pone el diálogo, las
+ * acciones y el volcado a lienzo (`cropImageToBlob`).
+ */
+export declare function ImageCropDialog({ sourceUrl, title, description, circularCrop, aspect, outputSize, outputMimeType, busy, cancelLabel, confirmLabel, closeLabel, loadingLabel, errorMessage, onConfirm, onClose, className, }: ImageCropDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/molecules/ImageCropDialog/crop.d.ts

@@ -0,0 +1,33 @@
+import { type Crop } from 'react-image-crop';
+export type CropRegion = {
+    /** Desplazamiento en píxeles sobre la imagen mostrada. */
+    x: number;
+    /** Desplazamiento en píxeles sobre la imagen mostrada. */
+    y: number;
+    width: number;
+    height: number;
+};
+export type CropToBlobOptions = {
+    /** Lado del lienzo de salida en píxeles (cuadrado). Por defecto 512. */
+    outputSize?: number;
+    /** Tipo MIME de salida. Por defecto image/jpeg. */
+    mimeType?: 'image/jpeg' | 'image/png' | 'image/webp';
+    /** Calidad 0–1 para formatos con pérdida. Por defecto 0.9. */
+    quality?: number;
+};
+/**
+ * Vuelca una región de un `<img>` en un lienzo nuevo, reescalada a una salida
+ * cuadrada, y devuelve el resultado como Blob listo para subir.
+ *
+ * La región va en píxeles *mostrados* (los que ve el usuario en
+ * react-image-crop); aquí se escala a la resolución natural de la fuente para
+ * recortar siempre sobre los píxeles originales.
+ */
+export declare function cropImageToBlob(src: HTMLImageElement, region: CropRegion, opts?: CropToBlobOptions): Promise<Blob>;
+/**
+ * La selección inicial es la mayor que cabe con la proporción pedida, centrada:
+ * en una imagen cuadrada (para `aspect` 1) lo ocupa todo; en una vertical va
+ * al 100 % de ancho, centrada en vertical; en una apaisada, al 100 % de alto,
+ * centrada en horizontal. Quien recorta parte del máximo y reduce, no al revés.
+ */
+export declare function initialCrop(aspect: number, width: number, height: number): Crop;

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

@@ -0,0 +1,60 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import './InputField.css';
+export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'value' | 'defaultValue'> {
+    id: string;
+    label: string;
+    /**
+     * Oculta la etiqueta a la vista (sigue leyéndola el lector de pantalla).
+     * Por defecto `false`: la etiqueta se ve, como en `SelectField`.
+     * Con la etiqueta oculta y sin `placeholder`, el control usa el texto de la
+     * etiqueta como placeholder para no quedarse sin pista visible.
+     * 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;
+    name?: string;
+    /**
+     * Tipo del `<input>`. **`search` no está**: el tipo nativo pinta el aspa de
+     * borrado del navegador, distinta en cada uno y fuera del sistema. Para un
+     * campo de búsqueda, `kind="search"`.
+     */
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+    /**
+     * Naturaleza del campo. `search` lo convierte en campo de búsqueda: `type="text"`
+     * (nunca `type="search"`), sin autocompletado, con la tecla de intro rotulada
+     * «buscar» y una **lupa fija** al inicio que dice que lo escrito filtra.
+     * @default 'text'
+     */
+    kind?: 'text' | 'search';
+    /**
+     * Solo con `kind="search"`: pinta un botón-aspa al final del campo cuando hay
+     * texto. Vacía el campo y devuelve el foco al control.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Nombre accesible del botón de borrado. Default castellano.
+     * @default 'Borrar'
+     */
+    clearLabel?: string;
+    /** Se llama tras vaciar el campo desde el aspa, ya con el foco devuelto. */
+    onClear?: () => void;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    size?: 'sm' | 'md' | 'lg';
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+}
+/**
+ * El `ref` y el resto de props nativas de `<input>` van al `<input>` interno
+ * (react-hook-form `register()`, `autoComplete`, `aria-*`, `data-*`…); el
+ * `className` va al contenedor.
+ */
+export declare const InputField: import("react").ForwardRefExoticComponent<InputFieldProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,45 @@
+import type { Country } from 'react-phone-number-input';
+import './InputPhoneField.css';
+export interface InputPhoneFieldProps {
+    /** `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, como en el resto de campos.
+     * 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;
+    value?: string;
+    defaultCountry?: Country;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    name?: string;
+    autoComplete?: string;
+    /** 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';
+    /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
+    className?: string;
+    /** aria-label del selector de país. Default: "País" (castellano). */
+    countryLabel?: string;
+    /** Lo que enseña el selector sin país elegido. Default: "🌐". */
+    internationalLabel?: string;
+    /** Recibe el número en formato E.164, no el evento. */
+    onChange?: (value: string | undefined) => void;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+}
+/**
+ * El `InputPhone` como campo de formulario. El `ref` va al `<input>` del
+ * número (react-hook-form lo registra y lo enfoca al fallar la validación);
+ * el `className`, al contenedor.
+ */
+export declare const InputPhoneField: import("react").ForwardRefExoticComponent<InputPhoneFieldProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+import './LanguageSwitcher.css';
+export interface Language {
+    /** Código BCP 47 (`es`, `en`, `pt-BR`). Es el valor; en el control se muestra el nombre. */
+    code: string;
+    /** Nombre del idioma **en ese idioma**: "Español", "English", "Deutsch". Es como cada quien reconoce el suyo. */
+    label: string;
+}
+export type LanguageSwitcherRenderLinkProps = {
+    href: string;
+    lang: string;
+    children: ReactNode;
+    className: string;
+    'aria-current'?: 'true';
+};
+export interface LanguageSwitcherProps {
+    languages: Language[];
+    /** Código del idioma actual. */
+    value: string;
+    /** Cambio de idioma. Qué hacer con él (enrutar, persistir) es del producto. */
+    onChange?: (code: string) => void;
+    /** Nombre accesible del control (la etiqueta del campo). */
+    label?: string;
+    /** `id` del control en compacto (enlaza la etiqueta). */
+    id?: string;
+    /** Oculta la etiqueta (visible por defecto: en el panel va con su nombre, como el de tema). */
+    labelHidden?: boolean;
+    /**
+     * `compact`: un campo desplegable con el nombre del idioma actual, en su idioma, que abre un menú — el de los ajustes y la barra.
+     * `list`: los idiomas desplegados en línea — el del pie.
+     */
+    variant?: 'compact' | 'list';
+    /**
+     * Solo en `list`: enlace por idioma (para que cada versión tenga su URL).
+     * Sin él, la lista es de botones y usa `onChange`.
+     */
+    hrefFor?: (code: string) => string;
+    renderLink?: (props: LanguageSwitcherRenderLinkProps) => ReactNode;
+    /**
+     * Disposición de la etiqueta. `inline` (por defecto) la pone delante del
+     * control, que es como va en la barra y en el panel; `stacked` la pone
+     * encima con el control a todo el ancho, que es la forma del resto de
+     * campos de un formulario — la de «Mi cuenta», donde este selector es un
+     * ajuste más y no un control de chrome.
+     */
+    layout?: 'inline' | 'stacked';
+    /** Talla del control compacto (32/40/48): `lg` en superficies públicas, `md` en las aplicaciones. */
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+/**
+ * Selector de idioma: el mismo campo desplegable que el de tema (`DropdownField`),
+ * con su etiqueta visible. Nunca un icono: el código de dos letras lo lee cualquiera
+ * aunque no entienda la interfaz, y las opciones van en su propio idioma. Es un
+ * componente del sistema porque aparece en el menú y en el pie de todos los
+ * sitios; el enrutado y la persistencia se quedan en el producto.
+ */
+export declare function LanguageSwitcher({ languages, value, onChange, label, id, labelHidden, variant, layout, size, hrefFor, renderLink, className, }: LanguageSwitcherProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import { type MenuItem, type MenuRenderLinkProps } from '../_shared/dropdownItems';
+import './Menu.css';
+export type { MenuItem, MenuButtonItem, MenuLinkItem, MenuSeparatorItem, MenuLabelItem, MenuRadioItem, MenuRenderLinkProps, } from '../_shared/dropdownItems';
+export interface MenuProps {
+    /**
+     * Elemento que abre el menú. Recibe las props del trigger por `render`,
+     * así que vale cualquier cosa que las reenvíe (un `Button`, un icono, un
+     * avatar…). `ContextMenu` (tres puntos) y `UserMenu` (avatar) son este
+     * menú con un disparador fijado.
+     */
+    trigger: ReactNode;
+    items: MenuItem[];
+    /** Valor activo del grupo de radio. Obligatorio si hay ítems `radio`. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    renderLink?: (props: MenuRenderLinkProps) => ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Abre también al pasar el ratón por el disparador (flyout). Pulsar sigue funcionando. */
+    openOnHover?: boolean;
+    /** Retardo del hover, en ms. */
+    hoverDelay?: number;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    minWidth?: string;
+    maxWidth?: string;
+    /** Talla de los ítems, la del disparador (32/40/48): el panel desplegado casa con el control plegado, como en el Select. */
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+/**
+ * El menú desplegable del sistema: define el vocabulario de ítems y la cara
+ * (tokens `menu.*`) de todos los menús; `ContextMenu`, `UserMenu`,
+ * `OrgSwitcher` o `DropdownField` son este menú con un disparador concreto.
+ */
+export declare function Menu({ trigger, items, value, onValueChange, renderLink, open, defaultOpen, onOpenChange, openOnHover, hoverDelay, side, align, sideOffset, minWidth, maxWidth, size, className, }: MenuProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,45 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import './MessageComposer.css';
+export interface MessageComposerProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    value: string;
+    onChange: (value: string) => void;
+    onSend: () => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Texto del botón de enviar. Es también su nombre accesible: no hay `aria-label` que lo contradiga. */
+    sendLabel?: string;
+    /**
+     * Línea de ayuda bajo el marco, enlazada al campo con `aria-describedby`
+     * (el atajo de teclado, un aviso de privacidad…). **Sin valor por defecto en
+     * ningún idioma**: es la única prop de texto del sistema que no lo tiene,
+     * porque su contenido depende del producto y no de la traducción de una
+     * cadena. Sin ella no se pinta la línea.
+     */
+    helperText?: ReactNode;
+    /** Contenido extra a la derecha del botón de enviar (p. ej. un botón de detener envío, o un selector de modelo). */
+    actions?: ReactNode;
+    /** `id` del textarea interno, para asociarlo con un `<label htmlFor>` externo. */
+    inputId?: string;
+    /** `aria-label` del textarea interno. */
+    inputLabel?: string;
+    /** `aria-labelledby` del textarea interno, alternativa a `inputLabel`. */
+    inputLabelledBy?: string;
+    /** Líneas que mide el campo en reposo. */
+    rows?: number;
+    /** Se añade DESPUÉS de las clases propias del componente (el consumidor añade, no sustituye). */
+    className?: string;
+}
+/**
+ * La caja de escribir de un chat: el campo, el botón de enviar y la línea que
+ * cuenta el atajo de teclado, todo dentro de un solo marco.
+ *
+ * La línea de ayuda (`helperText`) no trae texto por defecto: lo pone el
+ * producto, en su idioma.
+ *
+ * El campo es un `Textarea` en variante `bare` —sin caja propia—, así que el
+ * marco, el fondo y el anillo de foco los dibuja el composer: el átomo no se
+ * pisa desde fuera.
+ *
+ * Reenvía el resto de props del `<div>` (`data-*`, `id`…) y el `ref`.
+ */
+export declare const MessageComposer: import("react").ForwardRefExoticComponent<Omit<MessageComposerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,71 @@
+import { Dialog } from '@base-ui/react/dialog';
+import './Modal.css';
+export interface ModalProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'className'> {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    /**
+     * Nombre accesible del aspa de cierre. Default: «Cerrar» (castellano).
+     * Una app multiidioma debe pasarlo traducido.
+     */
+    closeLabel?: string;
+    /**
+     * Nombre accesible del diálogo cuando no hay `title`. Default: «Diálogo»
+     * (castellano). Una app multiidioma debe pasarlo traducido.
+     */
+    fallbackTitle?: string;
+    /**
+     * Nodo DOM donde montar el portal del modal (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 Modal
+     * 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 Dialog.Portal>['container'];
+    /**
+     * Descripción accesible del modal, renderizada bajo el título como
+     * `Dialog.Description` — Base UI se encarga de enlazarla al diálogo. Úsala
+     * cuando el texto descriptivo lo aporte el propio Modal.
+     */
+    description?: React.ReactNode;
+    /**
+     * Id del elemento que describe el modal, reenviado a `Dialog.Popup`. Para
+     * adaptadores que renderizan su propio nodo de descripción dentro de
+     * `children`. Tiene prioridad sobre `description` si se pasan ambas.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Elemento que recibe el foco al abrir, reenviado a Base UI. Por defecto el
+     * foco entra en el panel por su primer elemento focable (el aspa de cerrar).
+     * Pásalo cuando el diálogo tenga un destino mejor —la salida segura de una
+     * confirmación, el buscador de una paleta— en vez de mover el foco a mano
+     * desde fuera: el gestor de foco de Base UI corre después y ganaría él.
+     */
+    initialFocus?: React.ComponentPropsWithoutRef<typeof Dialog.Popup>['initialFocus'];
+    /**
+     * Fila de acciones al pie del diálogo. Es el sitio de los botones: el pie
+     * los reparte a la derecha en una fila y, por debajo del punto de ruptura,
+     * los apila a todo el ancho con la acción principal arriba — el mismo
+     * criterio (y el mismo orden) que las acciones de `Form`. Pásalos en el
+     * orden de la fila: la principal, la última.
+     */
+    footer?: React.ReactNode;
+    /** Se añade DESPUÉS de las clases propias del pie. */
+    footerClassName?: string;
+}
+/**
+ * Diálogo centrado sobre un velo. El motor (portal, velo, trampa de foco,
+ * cierre con Escape) es Base UI Dialog; el DS pone la superficie.
+ *
+ * `{...rest}` (`id`, `data-*`, `aria-*` y los **handlers de evento**) se
+ * reenvía al popup. Los handlers son lo que permite montar la barrera de
+ * eventos cuando el modal se abre desde dentro de una tarjeta clicable —
+ * `onClick`/`onPointerDown` con `stopPropagation` en el propio popup— sin
+ * envolverlo en `div`s de producto.
+ *
+ * `className` **no** se reenvía a propósito: la cara del diálogo la pone el
+ * sistema, y se personaliza por tokens.
+ */
+export declare function Modal({ open, onClose, title, children, closeLabel, fallbackTitle, container, description, 'aria-describedby': ariaDescribedBy, initialFocus, footer, footerClassName, ...rest }: ModalProps): import("react/jsx-runtime").JSX.Element;