@studiolxd/brand 38.12.4

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

@@ -0,0 +1,42 @@
+import './MultiSelectField.css';
+import type { MultiSelectOption } from '../../atoms/MultiSelect/MultiSelect';
+export type { MultiSelectOption };
+export interface MultiSelectFieldProps {
+    /** `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;
+    options: MultiSelectOption[];
+    value?: string[];
+    defaultValue?: string[];
+    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 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 botón que quita un valor. Default: `Quitar ${etiqueta}` (castellano). */
+    removeLabel?: (label: string) => string;
+    onValueChange?: (value: string[]) => void;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+}
+/**
+ * El `MultiSelect` como campo de formulario. El control es de Base UI: el
+ * `ref` va al **disparador** para que react-hook-form pueda enfocarlo al
+ * fallar la validación; el `className`, al contenedor.
+ */
+export declare const MultiSelectField: import("react").ForwardRefExoticComponent<MultiSelectFieldProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,25 @@
+import { type ButtonBaseProps } from '../../atoms/Button/Button';
+import './NotificationButton.css';
+export interface NotificationButtonProps extends Omit<ButtonBaseProps, 'variant' | 'iconOnly' | 'children' | 'href' | 'size'> {
+    /** Notificaciones sin leer. Con 0 (o sin él) no hay contador. */
+    count?: number;
+    /** Tope del contador («99+»). */
+    max?: number;
+    /**
+     * Nombre accesible cuando no hay contador. Default: «Notificaciones»
+     * (castellano). Una app multiidioma debe pasarla traducida.
+     */
+    label?: string;
+    /**
+     * Nombre accesible cuando hay contador: recibe el número, para que la frase
+     * se pueda rehacer en cualquier idioma. Default: «Notificaciones: N sin
+     * leer» (castellano).
+     */
+    countLabel?: (count: number) => string;
+}
+/**
+ * La campana de la barra de la aplicación: un botón de icono con el contador
+ * de no leídas volando sobre su esquina, en rojo. Qué abre (un panel, un
+ * menú, una página) es del producto: es un botón y sirve de disparador.
+ */
+export declare const NotificationButton: import("react").ForwardRefExoticComponent<NotificationButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,85 @@
+import type { ReactNode } from 'react';
+import './NotificationList.css';
+/** Una notificación tal y como la enseña la lista: ya resuelta, sin datos crudos. */
+export interface NotificationListItem {
+    id: string;
+    /** Título de la notificación. Con `href`, es el enlace de la fila. */
+    title: string;
+    /** Cuerpo. En la página se lee entero: no se recorta, a diferencia del panel. */
+    body?: string;
+    /** Fecha relativa **ya formateada** por el consumidor («hace 5 min»): la lista no formatea fechas. */
+    time: string;
+    /**
+     * La misma fecha en formato máquina (`2026-09-10T09:12:00Z`). Con ella la
+     * hora se pinta en un `<time datetime>`; sin ella, en texto corriente.
+     */
+    timeDateTime?: string;
+    /**
+     * Sin leer: el punto del indicador. Se dice igual que en el
+     * `NotificationPanel`, con el mismo booleano y en el mismo sentido.
+     */
+    unread: boolean;
+    /** Destino de la notificación. Sin él, el título no es un enlace. */
+    href?: string;
+    /**
+     * Texto solo para lectores de pantalla de **esta** fila sin leer, cuando el
+     * de la lista (`unreadLabel`) no vale. Casi nunca hace falta.
+     */
+    unreadLabel?: string;
+}
+/** Lo que la lista pasa al `Link` del router de la aplicación. */
+export interface NotificationListLinkProps {
+    href: string;
+    children: ReactNode;
+    className?: string;
+    onClick?: () => void;
+}
+export type RenderNotificationListLink = (props: NotificationListLinkProps) => ReactNode;
+export interface NotificationListProps {
+    /**
+     * Las notificaciones de la página, ya ordenadas y paginadas por el
+     * consumidor: la lista no ordena, no pagina y no filtra.
+     */
+    items: NotificationListItem[];
+    /**
+     * El `Link` del router de la aplicación (patrón de `Link.mdx`: el router es
+     * de la app). Debe propagar **todas** las props que recibe. Por defecto, un
+     * `<a>` corriente.
+     */
+    renderLink?: RenderNotificationListLink;
+    /**
+     * Las acciones **propias del producto** de cada fila («Eliminar»…), al
+     * final de la fila. Van como `Button variant="text" size="sm"`.
+     */
+    renderActions?: (item: NotificationListItem) => ReactNode;
+    /** Se llama al pulsar el título de una fila con `href`, antes de navegar. */
+    onItemClick?: (item: NotificationListItem) => void;
+    /**
+     * Con ella, cada fila sin leer estrena un «Marcar como leída» delante de las
+     * acciones del producto; sin ella no se pinta.
+     */
+    onMarkRead?: (id: string) => void;
+    /** Nombre accesible de la lista. **No se pinta**: el título lo pone la página. Default «Notificaciones». */
+    label?: string;
+    /** Texto solo para lectores de pantalla que marca una fila sin leer. Default «Sin leer». */
+    unreadLabel?: string;
+    /** Rótulo del botón de marcar una fila. Default «Marcar como leída». */
+    markReadLabel?: string;
+    /** Se añade DESPUÉS de las clases propias de la lista (el consumidor añade, no sustituye). */
+    className?: string;
+}
+/**
+ * La bandeja: **todas** las notificaciones, a página completa. La misma fila
+ * del `NotificationPanel` —punto de no leída, título y cuerpo— pero leída a la
+ * talla de la página, con el texto entero y con las acciones de cada
+ * notificación a la vista.
+ *
+ * Va a sangre en la columna de la página: sin tarjeta, sin borde alrededor y
+ * sin línea entre filas. Lo único que separa una notificación de la siguiente
+ * es el aire de la propia fila.
+ *
+ * No ordena, no pagina y no filtra: eso es de la página (`Pagination`,
+ * `FilterBar`). Con la lista vacía no pinta nada — el hueco es de un
+ * `EmptyState`.
+ */
+export declare function NotificationList({ items, renderLink, renderActions, onItemClick, onMarkRead, label, unreadLabel, markReadLabel, className, }: NotificationListProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,94 @@
+import { type ReactNode } from 'react';
+import { type PopoverChangeDetails } from '../../atoms/Popover/Popover';
+import './NotificationPanel.css';
+/** Una notificación tal y como la enseña el panel: ya resuelta, sin datos crudos. */
+export interface NotificationPanelItem {
+    id: string;
+    /** Título de la notificación. Una línea. */
+    title: string;
+    /** Cuerpo. Se recorta con elipsis a las líneas del token `item-body-line-clamp`. */
+    body?: string;
+    /** Fecha relativa **ya formateada** por el consumidor («hace 5 min»): el panel no formatea fechas. */
+    time: string;
+    /** Sin leer: punto, peso en el título y tinta plena. */
+    unread: boolean;
+}
+/** Lo que el panel pasa al `Link` del router de la aplicación. */
+export interface NotificationPanelLinkProps {
+    href: string;
+    children: ReactNode;
+    className?: string;
+    onClick?: () => void;
+    id?: string;
+    'aria-labelledby'?: string;
+}
+export type RenderNotificationPanelLink = (props: NotificationPanelLinkProps) => ReactNode;
+export interface NotificationPanelProps {
+    /**
+     * Las notificaciones que se ven en el panel, ya recortadas por el consumidor
+     * (el adelanto son cinco como mucho): el panel no pagina ni ordena.
+     */
+    items?: NotificationPanelItem[];
+    /**
+     * Sin leer **en total**, para el contador de la campana. No se deduce de
+     * `items`: el panel enseña un adelanto y el total suele ser mayor.
+     */
+    count?: number;
+    /** Tope del contador de la campana («99+»). */
+    max?: number;
+    /**
+     * Se llama al pulsar una fila sin leer. El panel la pinta como leída en el
+     * sitio sin esperar respuesta.
+     */
+    onRead: (id: string) => void;
+    /**
+     * Con ella se pinta «Marcar todas como leídas» bajo la lista, **y solo
+     * mientras quede alguna sin leer**; sin ella, no se pinta nunca.
+     */
+    onMarkAllRead?: () => void;
+    /** Destino de la bandeja completa. */
+    allHref: string;
+    /** Destino de las preferencias de notificación. */
+    preferencesHref: string;
+    /**
+     * El `Link` del router de la aplicación (patrón de `Link.mdx`: el router es
+     * de la app). Debe propagar **todas** las props que recibe. Por defecto, un
+     * `<a>` corriente.
+     */
+    renderLink?: RenderNotificationPanelLink;
+    /** Nombre accesible de la campana sin contador. Default castellano. */
+    label?: string;
+    /** Nombre accesible de la campana con contador. Recibe el número. Default castellano. */
+    countLabel?: (count: number) => string;
+    /**
+     * Nombre del panel (`role="dialog"`) y de la lista. **No se pinta**: el
+     * panel no lleva cabecera visible. Default «Notificaciones».
+     */
+    panelLabel?: string;
+    /** Texto solo para lectores de pantalla que marca una fila sin leer. Default «Sin leer». */
+    unreadLabel?: string;
+    /** Mensaje cuando no hay notificaciones. Default «Estás al día». */
+    emptyLabel?: string;
+    /** Rótulo del enlace a la bandeja. Default «Ver todas las notificaciones». */
+    allLabel?: string;
+    /** Rótulo del enlace a las preferencias. Default «Preferencias de notificaciones». */
+    preferencesLabel?: string;
+    /** Rótulo del botón de marcar todas. Default «Marcar todas como leídas». */
+    markAllReadLabel?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, details: PopoverChangeDetails) => void;
+    /** Se añade DESPUÉS de las clases propias del panel (el consumidor añade, no sustituye). */
+    className?: string;
+}
+/**
+ * La campana de la barra con su panel: al pulsarla se abre un `Popover`
+ * anclado al botón con el adelanto de las últimas notificaciones, y debajo
+ * los enlaces a la bandeja y a las preferencias.
+ *
+ * Es un **adelanto**, no la bandeja: aquí se lee y se marca leído, y lo único
+ * que navega son los dos enlaces del pie. Pulsar una fila la marca leída y la
+ * deja donde está —el panel no se reordena bajo el dedo—; al cerrarlo, la
+ * lista vuelve a ser la que diga el consumidor.
+ */
+export declare function NotificationPanel({ items, count, max, onRead, onMarkAllRead, allHref, preferencesHref, renderLink, label, countLabel, panelLabel, unreadLabel, emptyLabel, allLabel, preferencesLabel, markAllReadLabel, open, defaultOpen, onOpenChange, className, }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import './NumberInputField.css';
+export interface NumberInputFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange'> {
+    /** `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?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Admite decimales (coma o punto). */
+    decimal?: 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';
+    /** Recibe el valor ya normalizado, no el evento. */
+    onChange?: (value: number) => void;
+    /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
+    className?: string;
+}
+/**
+ * El `NumberInput` como campo de formulario. El `ref` y el resto de props
+ * nativas de `<input>` van al input real (react-hook-form, `name`, `onBlur`,
+ * `aria-*`, `data-*`…); el `className`, al contenedor.
+ */
+export declare const NumberInputField: import("react").ForwardRefExoticComponent<NumberInputFieldProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { MenuItem, MenuRenderLinkProps } from '../Menu/Menu';
+import './OrgSwitcher.css';
+export interface OrgOption {
+    id: string;
+    name: string;
+    logoUrl?: string;
+}
+export interface OrgSwitcherProps {
+    /** Nombre accesible del botón. Por defecto, «Organización: ‹nombre›». */
+    label?: string;
+    /** Ocupa todo el ancho disponible (en la Sidebar). Por defecto mide lo que su contenido. */
+    block?: boolean;
+    /** Solo el logo. Sin él, lo decide la `Sidebar` (rail). */
+    compact?: boolean;
+    current: OrgOption;
+    organizations: OrgOption[];
+    onOrgChange: (id: string) => void;
+    defaultOpen?: boolean;
+    items?: MenuItem[];
+    renderLink?: (props: MenuRenderLinkProps) => ReactNode;
+}
+export declare function OrgSwitcher({ label, block, compact, current, organizations, onOrgChange, defaultOpen, items, renderLink }: OrgSwitcherProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,41 @@
+import './OtpField.css';
+export interface OtpFieldProps {
+    /** `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;
+    /** Número de celdas. */
+    length: number;
+    value?: string;
+    defaultValue?: string;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: 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';
+    /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
+    className?: string;
+    /** Etiqueta accesible de cada celda. Default: `Dígito N de M` (castellano). */
+    digitLabel?: (index: number, length: number) => string;
+    /** Recibe el código completo, no el evento. */
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+/**
+ * El `OtpInput` como campo de formulario. El `ref` va a la primera celda, que
+ * es la que react-hook-form enfoca al fallar la validación; el `className`, al
+ * contenedor.
+ */
+export declare const OtpField: import("react").ForwardRefExoticComponent<OtpFieldProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+import { type HeadingProps } from '../../atoms/Heading/Heading';
+import './PageIntro.css';
+export interface PageIntroProps {
+    /** El título de la página: un `Heading` de nivel 1 (o el que diga `level`). */
+    title: ReactNode;
+    /**
+     * La frase bajo el título, opcional: va como entradilla (`Paragraph
+     * size="large"`, un peldaño por encima del cuerpo).
+     *
+     * **Es una frase y termina con puntuación final** —un punto, o el signo que
+     * le toque—: no es un rótulo ni un subtítulo. Sin el punto, el párrafo se
+     * lee como un `Heading` menor y la jerarquía de la cabecera se deshace. Lo
+     * que no llegue a frase o cabe en el título, o va en `children`.
+     */
+    description?: ReactNode;
+    /** Más texto bajo la frase (otro `Paragraph`, una lista…): mismo aire. */
+    children?: ReactNode;
+    /**
+     * La acción principal de la página —«Invitar miembro», «Crear webhook»—, a la
+     * derecha del título y en su misma fila. Una, o dos como mucho: la principal
+     * y una alternativa (`Button variant="outline"`), en ese orden en el JSX. Las
+     * acciones sobre los filtros van en `FilterBar actions`, y las que operan
+     * sobre la tabla, en el `toolbar` del `DataTable`.
+     */
+    actions?: ReactNode;
+    /** Nivel del título: 1 por defecto (una cabecera de página). */
+    level?: HeadingProps['level'];
+    /** Talla tipográfica del título; si no, la que el Heading da a su nivel. */
+    size?: HeadingProps['size'];
+    /**
+     * El elemento que envuelve la cabecera: `header` por defecto. `div` para
+     * cuando la cabecera abre una sección que ya vive dentro de otro `header`, o
+     * cuando el molde de fuera necesita un elemento neutro.
+     */
+    as?: 'header' | 'div';
+    className?: string;
+}
+/**
+ * Cabecera de una página: el título y, si hace falta, una frase debajo, con
+ * el aire justo entre los dos. Es un `header`: lo que abre acceso, registro,
+ * recuperación… y cualquier página que empiece por su nombre. Va como celda
+ * de `Columns` o directamente en el `Container`.
+ *
+ * Con `actions` sirve además de cabecera de una sección dentro de la página
+ * (`level={2}`): el título a la izquierda y la acción principal a la derecha.
+ */
+export declare function PageIntro({ title, description, actions, level, size, as: Tag, className, children, }: PageIntroProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,92 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { SelectOption } from '../../atoms/Select/Select';
+import './Pagination.css';
+export interface PaginationProps {
+    /**
+     * Con páginas numeradas (`pages`, por defecto) o solo anterior/siguiente
+     * (`cursor`): para listados por cursor, donde no se sabe cuántas páginas hay.
+     */
+    mode?: 'pages' | 'cursor';
+    /** Total de registros. Con `pageCount` o en modo `cursor` no hace falta. */
+    total?: number;
+    /** Número de páginas, cuando quien pagina ya lo sabe (en vez de `total` + `pageSize`). */
+    pageCount?: number;
+    /** Página activa (1-indexed). En modo `cursor`, opcional. */
+    page?: number;
+    /** Registros por página. "all" muestra todos los registros sin paginación. */
+    pageSize?: number | 'all';
+    /** Enlaces por página, ya calculados (útil desde un Server Component, donde no se puede pasar una función). */
+    hrefs?: Record<number, string>;
+    /** Modo `cursor`: enlaces de anterior/siguiente. Sin ellos, el botón va deshabilitado. */
+    previousHref?: string;
+    nextHref?: string;
+    /** Modo `cursor`: manejadores de anterior/siguiente cuando no hay enlaces. */
+    onPrevious?: () => void;
+    onNext?: () => void;
+    /**
+     * Callback al cambiar de página. Opcional cuando se usa hrefBuilder
+     * (la navegación ocurre mediante el href nativo del <a>).
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Si se pasa, los botones de página y los de Anterior/Siguiente
+     * se renderizan como <a href={hrefBuilder(n)}> en lugar de <button>.
+     * Útil para SSR, SEO y comportamientos nativos del navegador.
+     */
+    hrefBuilder?: (page: number) => string;
+    /** Si se pasa, aparece el selector de registros por página */
+    onPageSizeChange?: (size: string) => void;
+    /** Opciones del selector. Default: 10, 20, 50, 100, Todos */
+    pageSizeOptions?: SelectOption[];
+    /**
+     * Ranura a continuación del selector de registros por página, dentro del
+     * mismo grupo que el total: acciones sobre el conjunto (exportar, imprimir).
+     * Los botones de página se quedan solos al otro extremo. Con la ranura llena
+     * el nav se pinta aunque no haya páginas que recorrer.
+     */
+    afterPageSize?: ReactNode;
+    /** Mostrar "X resultados" antes de los controles. Default: false */
+    showTotal?: boolean;
+    /**
+     * Componente Link del router. Default: "a" (recarga completa).
+     * Acepta next/link, react-router Link, etc. — cualquier componente
+     * que acepte las props estándar de <a> (href, className, …).
+     */
+    linkComponent?: ComponentType<any>;
+    /** Tamaño del componente. Default: "md" */
+    size?: 'sm' | 'md' | 'lg';
+    /** aria-label del <nav>. Default: «Paginación» (castellano). Una app multiidioma debe pasarlo traducido. */
+    ariaLabel?: string;
+    /**
+     * aria-label de cada botón/enlace de página. Default: `Página ${page}` (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    pageLabel?: (page: number) => string;
+    /**
+     * aria-label del botón "anterior". Default: "Página anterior" (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    previousLabel?: string;
+    /**
+     * aria-label del botón "siguiente". Default: "Página siguiente" (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    nextLabel?: string;
+    /**
+     * aria-label del `role="group"` que envuelve los controles de página.
+     * Default: "Páginas" (castellano). Una app multiidioma debe pasarla traducida.
+     */
+    pagesGroupLabel?: string;
+    /**
+     * aria-label del selector de registros por página.
+     * Default: "Registros por página" (castellano). Una app multiidioma debe pasarla traducida.
+     */
+    pageSizeLabel?: string;
+    /**
+     * Texto del sumario que muestra `showTotal`. Default: `${total} resultados` (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    totalLabel?: (total: number) => string;
+    className?: string;
+}
+export declare function Pagination({ mode, total, pageCount, page, pageSize, hrefs, previousHref, nextHref, onPrevious, onNext, onPageChange, hrefBuilder: hrefBuilderProp, linkComponent, onPageSizeChange, pageSizeOptions, afterPageSize, showTotal, size, ariaLabel, pageLabel, previousLabel, nextLabel, pagesGroupLabel, pageSizeLabel, totalLabel, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,40 @@
+import './PasswordField.css';
+export interface PasswordFieldProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'type'> {
+    /**
+     * Etiqueta del campo. **Opcional**: si se omite, el componente renderiza solo
+     * el campo + toggle (sin `<label>`, sin error ni ayuda), para componerlo
+     * dentro de una capa de formulario propia.
+     */
+    label?: string;
+    /** Oculta visualmente el label (solo aplica cuando hay `label`). Default: true. */
+    labelHidden?: boolean;
+    /** Marca el estado de error (borde) y `aria-invalid` en el input. */
+    error?: boolean;
+    /** Mensaje de error propio del componente (solo se renderiza si hay `label`-mode completo). */
+    errorMessage?: string;
+    /** Texto de ayuda propio del componente. */
+    helperText?: string;
+    /** Una acción bajo el campo: «¿Olvidaste tu contraseña?» (un `Link` del router). No es ayuda: enlace normal, a la izquierda, con su aire. */
+    action?: React.ReactNode;
+    /** Tamaño del campo. */
+    size?: 'sm' | 'md' | 'lg';
+    /** aria-label del toggle cuando la contraseña está oculta. Default: "Mostrar contraseña". */
+    showPasswordLabel?: string;
+    /** aria-label del toggle cuando la contraseña es visible. Default: "Ocultar contraseña". */
+    hidePasswordLabel?: string;
+    /**
+     * Se añade DESPUÉS de las clases propias, sobre el wrapper raíz `.password-field`.
+     * (El `ref` y el resto de props nativas — `name`, `onChange`, `data-*`, `aria-*`… —
+     * se reenvían al `<input>` interno, no al wrapper.)
+     */
+    className?: string;
+}
+/**
+ * Campo de contraseña con toggle mostrar/ocultar integrado.
+ *
+ * El `ref` y `{...rest}` (props nativas de `<input>`) se reenvían al `<input>`
+ * interno — no al wrapper — para soportar react-hook-form (`{...register()}`) y la
+ * inyección de props del consumidor (`id`, `aria-describedby`, `aria-invalid`,
+ * `data-*`…). El `className` se aplica al wrapper raíz.
+ */
+export declare const PasswordField: import("react").ForwardRefExoticComponent<PasswordFieldProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,50 @@
+import type { ComponentType, MouseEvent, ReactNode } from 'react';
+import './PrevNextNav.css';
+export interface PrevNextNavProps {
+    /** href del enlace anterior. Mutuamente exclusivo con prevOnClick */
+    prevHref?: string;
+    /** href del enlace siguiente. Mutuamente exclusivo con nextOnClick */
+    nextHref?: string;
+    /**
+     * Handler del control anterior. Con `prevHref` puesto se dispara **además**
+     * del enlace: es la puerta para la navegación SPA (`preventDefault()` en el
+     * handler y ruta por el router).
+     */
+    prevOnClick?: (event: MouseEvent<HTMLElement>) => void;
+    /** Handler del control siguiente. Mismo contrato que `prevOnClick`. */
+    nextOnClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Rótulo del control anterior. Sin `prevTitle` es el `aria-label` del
+     * chevron; con `prevTitle` es el rótulo **visible** que lo encabeza.
+     * Default: "Anterior"
+     */
+    prevLabel?: string;
+    /** Rótulo del control siguiente. Mismo contrato que `prevLabel`. Default: "Siguiente" */
+    nextLabel?: string;
+    /**
+     * Título visible del destino anterior (el de la página, el capítulo…). Con
+     * él el control deja de ser un chevron pelado: se lee «Anterior ·
+     * Instalación», y ese texto visible es ya su nombre accesible.
+     */
+    prevTitle?: string;
+    /** Título visible del destino siguiente. Mismo contrato que `prevTitle`. */
+    nextTitle?: string;
+    /**
+     * Contenido central: texto de periodo, semana, mes, etc. Opcional — el
+     * paginador de documentación no tiene centro, solo los dos destinos.
+     */
+    label?: ReactNode;
+    /**
+     * id del label central, para que otro elemento pueda tomarlo como nombre
+     * accesible (`aria-labelledby`).
+     */
+    labelId?: string;
+    /**
+     * Componente `Link` del router para los controles con `href`. Default: `"a"`.
+     * Recibe `href` y el resto de props tal cual.
+     */
+    linkComponent?: ComponentType<any>;
+    /** Variante de densidad. Default: "md" */
+    size?: 'sm' | 'md';
+}
+export declare function PrevNextNav({ prevHref, nextHref, prevOnClick, nextOnClick, prevLabel, nextLabel, prevTitle, nextTitle, label, labelId, linkComponent, size, }: PrevNextNavProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+import { type HeadingLevel, type HeadingSize } from '../../atoms/Heading/Heading';
+import { type TagVariant } from '../../atoms/Tag/Tag';
+import type { CardMedia } from '../Card/Card';
+import './ProjectCard.css';
+export type { TagVariant };
+export interface ProjectCardTag {
+    /** Clave de React. Sin ella se usa la etiqueta. */
+    id?: string;
+    label: string;
+    variant?: TagVariant;
+}
+export interface ProjectCardProps {
+    /** Título del proyecto. Es el enlace de la tarjeta. */
+    title: ReactNode;
+    /** Descripción breve. */
+    description?: ReactNode;
+    /** Imagen del proyecto. */
+    media?: CardMedia;
+    /** Etiquetas de categoría. */
+    tags?: ProjectCardTag[];
+    /** URL de destino. Pinta un `<a>` nativo. */
+    href?: string;
+    /**
+     * Elemento sobre el que renderizar el enlace del título (el `Link` del
+     * router de la aplicación). Manda sobre `href`, igual que en `Card`.
+     */
+    render?: React.ReactElement<Record<string, unknown>>;
+    /** Nivel semántico del título. Por defecto `3`. */
+    headingLevel?: HeadingLevel;
+    /** Talla del título. Por defecto `5` (24px). */
+    headingSize?: HeadingSize;
+    /** Nombre accesible de la lista de etiquetas. Por defecto «Categorías». */
+    tagsLabel?: string;
+    className?: string;
+    id?: string;
+}
+/**
+ * Tarjeta de un proyecto para una portada de marketing: imagen, etiquetas de
+ * categoría, título y una descripción breve.
+ *
+ * No es una `Card` con `href`: allí el bloque entero es un enlace, aquí hay
+ * etiquetas y texto alrededor del enlace. El enlace es **el título**, y su
+ * área pulsable se estira sobre toda la tarjeta con un pseudoelemento: se
+ * puede pulsar en cualquier sitio, pero el teclado solo se para una vez y el
+ * lector de pantalla anuncia el nombre del proyecto, no la tarjeta entera.
+ */
+export declare function ProjectCard({ title, description, media, tags, href, render, headingLevel, headingSize, tagsLabel, className, id, }: ProjectCardProps): import("react/jsx-runtime").JSX.Element;