@studiolxd/brand 38.12.4

package/dist/_types/molecules/_shared/calendarGrid.d.ts

@@ -0,0 +1,114 @@
+import { type KeyboardEvent, type ReactNode } from 'react';
+export interface CalendarDay {
+    date: Date;
+    /** El día pertenece al mes anterior o al siguiente: se muestra atenuado */
+    outside: boolean;
+}
+export declare function isSameDay(a: Date, b: Date): boolean;
+export declare function isSameMonth(a: Date, b: Date): boolean;
+/** Primer día del mes desplazado `delta` meses respecto a `month`. */
+export declare function shiftMonth(month: Date, delta: number): Date;
+/**
+ * Los días que ocupa la cuadrícula del mes, con lunes como primer día de la
+ * semana. Solo se completan las semanas que el mes realmente ocupa.
+ */
+export declare function getCalendarDays(month: Date): CalendarDay[];
+/** Agrupa días en semanas de 7. */
+export declare function chunkWeeks(days: CalendarDay[]): CalendarDay[][];
+/**
+ * Nombres de los siete días de la semana empezando en lunes, en dos longitudes:
+ * la abreviada que se ve y la larga que lee el lector de pantalla vía `abbr`.
+ * La semana de referencia arranca el lunes 6 de enero de 2025.
+ */
+export declare function getWeekdayNames(locale: string, weekday?: 'narrow' | 'short'): {
+    short: string;
+    long: string;
+}[];
+export interface CalendarWeekdayRowOptions {
+    /** Bloque BEM del calendario que la monta: `calendar`, `calendar-planner`… */
+    block: string;
+    /** Modificador extra de la fila, sin el bloque (`header` → `__row--header`) */
+    rowModifier?: string;
+    weekdays: {
+        short: string;
+        long: string;
+    }[];
+}
+/**
+ * Fila `role="row"` de cabeceras de día. El nombre abreviado se envuelve en
+ * `<abbr>` con el nombre completo: la letra suelta no es un nombre accesible.
+ */
+export declare function renderCalendarWeekdayRow({ block, rowModifier, weekdays }: CalendarWeekdayRowOptions): import("react/jsx-runtime").JSX.Element;
+export interface CalendarMonthNavOptions {
+    /** Bloque BEM del calendario que la monta */
+    block: string;
+    /** Título de lo que se ve, ya formateado: el mes, o el tramo de años */
+    title: string;
+    /** id del título, para `aria-labelledby` de la rejilla */
+    titleId: string;
+    /** Muestra los botones prev/next. Default: true */
+    navigable?: boolean;
+    /**
+     * Nombre accesible del botón de retroceso. Depende de la vista: «Mes
+     * anterior» sobre la rejilla de días, «Años anteriores» sobre la de años.
+     */
+    previousLabel: string;
+    /** Nombre accesible del botón de avance, también según la vista. */
+    nextLabel: string;
+    prevDisabled?: boolean;
+    nextDisabled?: boolean;
+    onPrev: () => void;
+    onNext: () => void;
+    chevronSize: 'xs' | 'sm' | 'md';
+    /**
+     * Convierte el título en un botón: es la puerta a otra vista (la rejilla de
+     * años). Sin él, el título es texto y no se pulsa.
+     */
+    onTitleClick?: () => void;
+    /** `aria-expanded` del título cuando es botón: si la otra vista está abierta. */
+    titleExpanded?: boolean;
+    /** ref del botón del título, para poder devolverle el foco al cambiar de vista. */
+    titleRef?: React.Ref<HTMLButtonElement>;
+    /** Contenido extra a la derecha del título (acciones propias del calendario) */
+    children?: ReactNode;
+}
+/**
+ * Cabecera con los dos botones de navegación y el nombre de lo que se ve. El
+ * título es una región `aria-live="polite"`: al cambiar el lector lo anuncia
+ * sin mover el foco.
+ */
+export declare function renderCalendarMonthNav({ block, title, titleId, navigable, previousLabel, nextLabel, prevDisabled, nextDisabled, onPrev, onNext, chevronSize, onTitleClick, titleExpanded, titleRef, children, }: CalendarMonthNavOptions): import("react/jsx-runtime").JSX.Element;
+export interface UseCalendarGridNavigationOptions {
+    /** Mes visible */
+    month: Date;
+    /** Se llama cuando el teclado saca el foco fuera del mes visible */
+    onMonthChange: (month: Date) => void;
+    /** Fecha seleccionada, si la hay: es la primera candidata a llevar el tabindex */
+    selected?: Date | null;
+    /**
+     * Activación de la celda enfocada con Enter/Espacio. Solo para rejillas cuya
+     * celda no es un `<button>` (que ya lo resuelve el navegador).
+     */
+    onActivate?: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+}
+export interface CalendarGridNavigation {
+    /** Día que lleva el tabindex; siempre dentro del mes visible */
+    activeDate: Date;
+    /** `true` si esa celda debe ser la única tabulable */
+    isTabbable: (date: Date) => boolean;
+    /** ref de celda, para poder devolverle el foco tras moverse */
+    cellRef: (date: Date) => (el: HTMLElement | null) => void;
+    /** Handler de teclado del contenedor `role="grid"` */
+    onKeyDown: (event: KeyboardEvent) => void;
+    /** Sincroniza el tabindex cuando el foco entra por ratón o por tabulador */
+    onCellFocus: (date: Date) => void;
+}
+/**
+ * Roving tabindex y navegación con flechas de una rejilla de mes, según el
+ * patrón de rejilla de WAI-ARIA: una sola parada de tabulador, flechas para
+ * moverse de día, Inicio/Fin dentro de la semana, RePág/AvPág de mes y con
+ * Mayús de año.
+ */
+export declare function useCalendarGridNavigation({ month, onMonthChange, selected, onActivate, minDate, maxDate, }: UseCalendarGridNavigationOptions): CalendarGridNavigation;

package/dist/_types/molecules/_shared/dialogSurface.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import './dialogSurface.css';
+/**
+ * Velo del diálogo. `className` es la clase BEM del contenedor, que es donde
+ * este mapea sus tokens `*-backdrop-*` sobre las variables de la superficie.
+ */
+export declare function DialogOverlay({ className }: {
+    className: string;
+}): import("react/jsx-runtime").JSX.Element;
+export interface DialogHeaderProps {
+    /**
+     * `inline`: título y aspa en la misma fila (el diálogo centrado).
+     * `stacked`: título y descripción apilados, con sitio para el aspa que el
+     * contenedor posiciona sobre la esquina (el cajón).
+     */
+    layout: 'inline' | 'stacked';
+    /** Solo queda el aspa: se va a su esquina. Únicamente en `inline`. */
+    noTitle?: boolean;
+    className: string;
+    children: ReactNode;
+}
+/** Cabecera del diálogo, en una de sus dos colocaciones. */
+export declare function DialogHeader({ layout, noTitle, className, children }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Pie de acciones. Fila a la derecha; por debajo del punto de ruptura, botones
+ * apilados a todo el ancho con la acción principal arriba.
+ */
+export declare function DialogFooter({ className, children, ...rest }: {
+    className: string;
+} & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist/_types/molecules/_shared/dropdownItems.d.ts

@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react';
+export type MenuButtonItem = {
+    type: 'button';
+    label: string;
+    icon?: ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    destructive?: boolean;
+    /**
+     * `false` mantiene el menú abierto tras elegir el ítem — para acciones que
+     * se encadenan (marcar varias cosas) o que dejan al usuario donde estaba.
+     * Por defecto el menú se cierra.
+     */
+    closeOnSelect?: boolean;
+};
+export type MenuLinkItem = {
+    type: 'link';
+    label: string;
+    icon?: ReactNode;
+    href: string;
+    disabled?: boolean;
+    destructive?: boolean;
+};
+export type MenuSeparatorItem = {
+    type: 'separator';
+};
+/** Rótulo de sección dentro del menú. No es interactivo. */
+export type MenuLabelItem = {
+    type: 'label';
+    label: string;
+};
+/**
+ * Ítem de elección exclusiva. El valor activo lo lleva el menú
+ * (`value`/`onValueChange`), como en cualquier grupo de radio.
+ */
+export type MenuRadioItem = {
+    type: 'radio';
+    /** Texto del ítem; admite un nodo para, por ejemplo, marcar el idioma con `lang`. */
+    label: ReactNode;
+    value: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** `false` deja el menú abierto tras elegir (para marcar varias cosas seguidas). Por defecto se cierra. */
+    closeOnSelect?: boolean;
+};
+export type MenuItem = MenuButtonItem | MenuLinkItem | MenuSeparatorItem | MenuLabelItem | MenuRadioItem;
+/**
+ * Props del enlace de un ítem. Además de `href`, `children` y `className`,
+ * el motor de menú inyecta atributos (role, tabIndex, handlers de teclado…):
+ * el `renderLink` del producto debe **propagarlos todos** a su enlace.
+ */
+export type MenuRenderLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+    children: ReactNode;
+    className: string;
+};
+/** Reenvía TODO lo que inyecta Base UI: un renderLink que solo copie href/className rompe el menú. */
+export declare function defaultRenderLink({ children, ...props }: MenuRenderLinkProps): import("react/jsx-runtime").JSX.Element;
+interface RenderDropdownItemsOptions {
+    items: MenuItem[];
+    itemClass: (destructive?: boolean) => string;
+    separatorClass: string;
+    renderLink: (props: MenuRenderLinkProps) => ReactNode;
+    /** Clase del rótulo de sección (ítems `label`). Sin ella, no se renderizan. */
+    labelClass?: string;
+    /** Valor activo del grupo de radio. */
+    radioValue?: string;
+    onRadioValueChange?: (value: string) => void;
+}
+export declare function renderDropdownItems({ items, itemClass, separatorClass, renderLink, labelClass, radioValue, onRadioValueChange, }: RenderDropdownItemsOptions): ReactNode;
+export {};

package/dist/_types/molecules/_shared/messageTimestamp.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Momento de un mensaje: un `Date` o una cadena **ISO 8601**
+ * (`'2026-08-27T14:32:00Z'`). Nunca una hora ya formateada (`'14:32'`): el
+ * componente necesita el instante para poder escribirlo en el atributo
+ * `datetime` del `<time>`, que es lo que leen las máquinas.
+ */
+export type MessageTimestamp = Date | string;
+export interface FormattedTimestamp {
+    /** Valor del atributo `datetime`, en ISO 8601. */
+    dateTime: string;
+    /** Texto visible, formateado con `Intl` en el `locale` que toque. */
+    label: string;
+}
+/**
+ * Convierte el momento de un mensaje en el par que necesita un `<time>`.
+ * Devuelve `null` si no hay marca de tiempo o si no se puede interpretar
+ * (una hora ya formateada, por ejemplo): mejor no pintar nada que pintar
+ * «Invalid Date».
+ */
+export declare function formatMessageTimestamp(timestamp: MessageTimestamp | undefined, locale?: string, format?: Intl.DateTimeFormatOptions): FormattedTimestamp | null;

package/dist/_types/og/index.d.ts

@@ -0,0 +1,5 @@
+export { ogCard, OG_SIZE, OG_CONTENT_TYPE } from './ogCard';
+export type { OgCardProps } from './ogCard';
+export { ogFonts } from './ogFonts';
+export type { OgFont, OgFontWeight } from './ogFonts';
+export { OG_FONT_FAMILY } from './ogTypeface';

package/dist/_types/og/ogCard.d.ts

@@ -0,0 +1,27 @@
+import { type ReactElement } from 'react';
+/** El tamaño que pide Open Graph, listo para pasárselo a `ImageResponse`. */
+export declare const OG_SIZE: {
+    readonly width: 1200;
+    readonly height: 630;
+};
+/** El tipo de contenido que devuelve `ImageResponse`, para la cabecera de la ruta. */
+export declare const OG_CONTENT_TYPE = "image/png";
+export interface OgCardProps {
+    /** El título de la página. Es lo único grande de la tarjeta. */
+    title: string;
+    /** Una línea de apoyo bajo el título. Opcional. */
+    subtitle?: string;
+    /** Una etiqueta corta arriba a la derecha: sección, categoría, fecha. Opcional. */
+    eyebrow?: string;
+}
+/**
+ * El árbol de la tarjeta social de marca, listo para satori.
+ *
+ * ```ts
+ * new ImageResponse(ogCard({ title }), {
+ *   ...OG_SIZE,
+ *   fonts: await ogFonts(),
+ * });
+ * ```
+ */
+export declare function ogCard({ title, subtitle, eyebrow }: OgCardProps): ReactElement;

package/dist/_types/og/ogFonts.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Los nueve pesos que admite satori, que no acepta un `number` cualquiera. Se
+ * declara aquí —y no se importa de `satori`— porque satori no es dependencia
+ * de este paquete: la tarjeta se arma con `ogCard()` y la renderiza la
+ * aplicación, que es quien lo trae.
+ */
+export type OgFontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+/** Una cara, en la forma exacta que espera la opción `fonts` de satori. */
+export interface OgFont {
+    name: string;
+    data: ArrayBuffer;
+    weight: OgFontWeight;
+    style: 'normal';
+}
+/**
+ * Las caras de marca para la opción `fonts` de `ImageResponse`/`satori`.
+ *
+ * ```ts
+ * new ImageResponse(ogCard({ … }), { ...OG_SIZE, fonts: await ogFonts() });
+ * ```
+ */
+export declare function ogFonts(): Promise<OgFont[]>;

package/dist/_types/og/ogTypeface.d.ts

@@ -0,0 +1,12 @@
+/**
+ * El nombre de la familia de marca, tal y como lo registran `ogFonts()` y lo
+ * pide `ogCard()`.
+ *
+ * Sale del primer nombre de `--font-family-sans` en vez de escribirse a mano
+ * para que no puedan separarse: satori empareja el `fontFamily` de un nodo con
+ * el `name` de una fuente cargada por cadena exacta, y si los dos lados se
+ * escriben aparte, el día que la sans cambie la tarjeta sale con la fuente de
+ * respaldo sin avisar de nada. El resto del stack (`system-ui`, `sans-serif`)
+ * no viaja: fuera del navegador no existe, y satori no tiene a qué recurrir.
+ */
+export declare const OG_FONT_FAMILY: string;

package/dist/_types/organisms/AnnotationThread/AnnotationThread.d.ts

@@ -0,0 +1,61 @@
+import { type ReactNode } from 'react';
+import './AnnotationThread.css';
+export interface AnnotationEntry {
+    /** Identificador único dentro del hilo. */
+    id: string;
+    /** Quién la escribió, tal cual se muestra. */
+    author: string;
+    /** Cuándo. `Date` o cadena ISO: el componente pone el `datetime` legible por máquina. */
+    date: string | Date;
+    /** El texto de la anotación. */
+    body: ReactNode;
+    /** Marca opcional delante del autor (un avatar, una inicial). */
+    avatar?: ReactNode;
+    /** Se marca como editada junto a la fecha. */
+    edited?: boolean;
+    /** Acciones de **esta** anotación: editar, borrar, citar. */
+    actions?: ReactNode;
+}
+export interface AnnotationThreadProps extends React.ComponentPropsWithoutRef<'article'> {
+    /** La anotación que abre el hilo. */
+    annotation: AnnotationEntry;
+    /** Las respuestas, en orden. */
+    replies?: AnnotationEntry[];
+    /** Estado del hilo. Un hilo resuelto se retira visualmente sin desaparecer. */
+    status?: 'open' | 'resolved';
+    /** Acciones del hilo entero: resolver, reabrir, seguir. Van al pie. */
+    actions?: ReactNode;
+    /** Con qué se responde: un `MessageComposer`, un `TextareaField`, un `Button`. */
+    reply?: ReactNode;
+    /** Idioma con el que se escribe la fecha. */
+    locale?: string;
+    /** Formato de la fecha. Por defecto, día y hora cortos. */
+    dateFormat?: Intl.DateTimeFormatOptions;
+    /** Rótulo del estado abierto. Por defecto, en castellano: «Abierta». */
+    openLabel?: string;
+    /** Rótulo del estado resuelto. Por defecto, en castellano: «Resuelta». */
+    resolvedLabel?: string;
+    /** Marca de anotación editada. Por defecto, en castellano: «editada». */
+    editedLabel?: string;
+    /**
+     * Rótulo que cuenta las respuestas. Por defecto, en castellano:
+     * «1 respuesta» / «N respuestas».
+     */
+    repliesLabel?: (count: number) => string;
+    /** Nombre accesible del hilo. Por defecto, en castellano: «Hilo de anotaciones». */
+    label?: string;
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+}
+/**
+ * Un hilo de anotaciones sobre algo: el comentario de revisión de una lección,
+ * la nota sobre un segmento de traducción. Cada anotación lleva **autor, fecha
+ * y sus propias acciones**, el hilo tiene **estado** (abierta o resuelta) y se
+ * responde al pie.
+ *
+ * No es `ConversationThread`: aquello es una conversación de usuario y
+ * asistente, con burbujas, orden de emisor y desplazamiento automático. Aquí
+ * todas las anotaciones son iguales, lo que importa es quién dijo qué y cuándo,
+ * y si el asunto sigue abierto.
+ */
+export declare function AnnotationThread({ annotation, replies, status, actions, reply, locale, dateFormat, openLabel, resolvedLabel, editedLabel, repliesLabel, label, className, ...rest }: AnnotationThreadProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/organisms/Chart/Chart.d.ts

@@ -0,0 +1,114 @@
+import { type ReactNode } from 'react';
+import './Chart.css';
+export type ChartType = 'line' | 'area' | 'bar' | 'scatter' | 'pie' | 'donut' | 'funnel' | 'treemap' | 'radial-bar' | 'radar';
+export interface ChartSeries {
+    /** Clave del valor dentro de cada fila de `data`. */
+    key: string;
+    /** Nombre que se lee en la leyenda, el bocadillo y la tabla. */
+    label: string;
+    /**
+     * Color de la serie. Lo normal es una **referencia a token**
+     * (`'var(--chart-series-3)'` o una custom property del producto): la interfaz
+     * del sistema no tiene colores cableados.
+     *
+     * Admite además un **color literal** cuando el color es *dato*, no diseño: lo
+     * que el autor de un contenido eligió desde la paleta de su tema. Ver
+     * `colors` y la sección «Color por dato» de la documentación.
+     *
+     * Sin este dato, la serie toma la ranura que le corresponde por orden
+     * (`--chart-series-1`…`8`).
+     */
+    color?: string;
+}
+export type ChartDatum = Record<string, string | number | null | undefined>;
+/** Etiquetas directas de valor. Nunca hay una cifra en cada punto salvo que se pida. */
+export type ChartValueLabels = 'none' | 'last' | 'extremes' | 'all';
+export interface ChartProps extends Omit<React.ComponentPropsWithoutRef<'figure'>, 'title'> {
+    /** Forma del gráfico. Por defecto `line`. */
+    type?: ChartType;
+    /** Filas de datos. Cada fila trae la posición X y un valor por serie. */
+    data: ChartDatum[];
+    /**
+     * Series a pintar, en orden. El orden es el que asigna las ranuras de color:
+     * la identidad sigue a la entidad, así que filtrar series no repinta a las
+     * que quedan. A partir de la novena, la serie se pinta con el gris de «Otros».
+     */
+    series: ChartSeries[];
+    /** Clave de la posición X (o de la categoría, en los gráficos de porción). */
+    xKey: string;
+    /**
+     * **Color por dato**: paleta por posición, en colores literales. La entrada
+     * `colors[i]` pinta la serie `i` —o, en los gráficos de porción, la categoría
+     * `i`—, por encima de la ranura de token que le tocaría por orden y por
+     * debajo del `color` propio de la serie.
+     *
+     * Es la vía para el caso en que el color **es dato**: el que eligió el autor
+     * de un contenido desde la paleta de su tema. Para la interfaz del sistema,
+     * las ranuras de token siguen siendo lo correcto.
+     */
+    colors?: string[];
+    /** Barras verticales (columnas) u horizontales. Horizontal para categorías con nombre largo. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Apila las series en vez de agruparlas. Solo `bar` y `area`. */
+    stacked?: boolean;
+    /**
+     * Patrón de énfasis: la serie indicada (o, en `pie`/`donut`, la categoría)
+     * mantiene su color y el resto pasa al gris de atenuación.
+     */
+    emphasis?: string;
+    /** Alto del área de dibujo en px. La banda del eje X va aparte. Default 256. */
+    height?: number;
+    /**
+     * Descripción del gráfico para lectores de pantalla. Obligatoria: el lienzo
+     * es una imagen y la tabla equivalente va oculta debajo.
+     */
+    ariaLabel: string;
+    /** Título visible del gráfico, en el `<figcaption>`. */
+    title?: ReactNode;
+    /** Texto al pie del gráfico, bajo la leyenda. */
+    caption?: ReactNode;
+    /** Formateo de valores. Default: `Intl.NumberFormat(locale)`. */
+    formatValue?: (value: number, series?: ChartSeries) => string;
+    /** Formateo de la posición X. Default: el valor tal cual. */
+    formatX?: (value: string | number) => string;
+    /** Número orientativo de marcas del eje de valores. Default 5. */
+    yTicks?: number;
+    /** Leyenda. Default: hay leyenda desde dos series (con una, el título ya la nombra). */
+    legend?: boolean;
+    /** Rejilla del eje de valores. Default `true`. */
+    grid?: boolean;
+    /** Bocadillo al pasar el puntero y al enfocar con el teclado. Default `true`. */
+    tooltip?: boolean;
+    /** Etiquetas directas de valor. Default: `last` en línea y área, `none` en el resto. */
+    valueLabels?: ChartValueLabels;
+    /** Locale con el que se formatean los números. Default `'es-ES'`. */
+    locale?: string;
+    /** Título de la tabla equivalente oculta. Default: «Datos del gráfico» (castellano). */
+    tableCaption?: string;
+    /**
+     * Frase que describe el gráfico para quien lo enfoca. Default: «Los datos
+     * completos están en la tabla que sigue; flechas para recorrer el gráfico.»
+     * (castellano).
+     */
+    tableHint?: string;
+    /** Encabezado de la primera columna de la tabla. Default: «Categoría» (castellano). */
+    categoryLabel?: string;
+    /** Encabezado de la columna de valores en `pie`/`donut`. Default: «Valor» (castellano). */
+    valueLabel?: string;
+    /** Encabezado de la columna de porcentaje en `pie`/`donut`. Default: «Porcentaje» (castellano). */
+    shareLabel?: string;
+    /** Texto cuando no hay datos. Default: «Sin datos que mostrar» (castellano). */
+    emptyMessage?: string;
+    /** Se añade DESPUÉS de las clases propias del componente. */
+    className?: string;
+}
+/**
+ * Gráfico de datos: línea, área, barras (verticales u horizontales, agrupadas o
+ * apiladas), tarta y donut. Dibuja SVG a pelo —sin librería de gráficos— para
+ * que todo el color y toda la tipografía salgan de tokens, el marcado sea BEM y
+ * el primer render valga en servidor.
+ *
+ * Cada gráfico trae su **tabla equivalente oculta**: el bocadillo enriquece, no
+ * franquea, y ningún valor depende de pasar el puntero.
+ */
+export declare const Chart: import("react").ForwardRefExoticComponent<ChartProps & import("react").RefAttributes<HTMLElement>>;

package/dist/_types/organisms/ConversationThread/ConversationThread.d.ts

@@ -0,0 +1,44 @@
+import { type ReactNode } from 'react';
+import type { MessageTimestamp } from '../../molecules/_shared/messageTimestamp';
+import './ConversationThread.css';
+export interface ConversationMessage {
+    id: string;
+    role: 'user' | 'assistant';
+    content?: string;
+    /**
+     * Momento del mensaje: un `Date` o una cadena ISO 8601. Nunca una hora ya
+     * formateada — el hilo la escribe en `<time datetime>` y la formatea con
+     * `Intl`.
+     */
+    timestamp?: MessageTimestamp;
+    /** Solo para mensajes del asistente. */
+    model?: string;
+    /** Solo para mensajes del asistente en curso. */
+    isStreaming?: boolean;
+}
+export interface ConversationThreadProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** Mensajes a pintar con `UserMessage`/`AssistantMessage`. Con `children`, no hace falta. */
+    messages?: ConversationMessage[];
+    /** Burbujas ya montadas por el producto (mensajes con herramientas, adjuntos…): el hilo pone el contenedor, el `role="log"` y el autoscroll. */
+    children?: ReactNode;
+    /** Texto accesible para el indicador de escritura. */
+    streamingLabel?: string;
+    /**
+     * aria-label del `role="log"` que envuelve el hilo. Default: "Conversación"
+     * (castellano). Una app multiidioma debe pasarla traducida.
+     */
+    ariaLabel?: string;
+    /** Locale con el que se formatean las marcas de tiempo. Default `'es-ES'`. */
+    locale?: string;
+    /** Opciones de `Intl.DateTimeFormat` para las marcas de tiempo. */
+    timestampFormat?: Intl.DateTimeFormatOptions;
+    /** Se añade DESPUÉS de las clases propias del componente (el consumidor añade, no sustituye). */
+    className?: string;
+}
+/**
+ * El hilo de una conversación: el contenedor con scroll que apila los mensajes,
+ * los anuncia como región live y baja solo al último cuando llega uno nuevo.
+ *
+ * Reenvía el resto de props del `<div>` (`data-*`, `id`…) y el `ref`.
+ */
+export declare const ConversationThread: import("react").ForwardRefExoticComponent<ConversationThreadProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/_types/organisms/DataTable/DataTable.d.ts

@@ -0,0 +1,100 @@
+import { type ReactNode } from 'react';
+import { type ColumnDef, type RowData } from '@tanstack/react-table';
+import { type PaginationProps } from '../../molecules/Pagination/Pagination';
+import { type TableHeaderProps } from '../../molecules/Table/Table';
+import './DataTable.css';
+/** Alineación del contenido de una columna. `start` es el default. */
+export type DataTableAlign = 'start' | 'center' | 'end';
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /**
+         * Alineación del contenido de la columna, en cabecera y celda. Default
+         * `start`. Números a `end`; acciones y estados a `center`.
+         */
+        align?: DataTableAlign;
+        /**
+         * La cabecera de la columna se pinta **solo para lectores de pantalla**:
+         * el `header` sigue nombrando la columna, pero no se ve. Es lo que lleva
+         * la columna de acciones, cuyo rótulo no aporta nada a quien ve los
+         * botones. La celda de cabecera sigue ahí, con su alineación.
+         */
+        headerHidden?: boolean;
+        /**
+         * Pega la columna al borde final cuando la tabla desborda su contenedor:
+         * la columna de acciones se queda alcanzable con scroll horizontal en vez
+         * de caer fuera del recorte. La columna de acciones se escribe siempre
+         * `{ align: 'center', headerHidden: true, sticky: 'end' }`.
+         */
+        sticky?: 'end';
+    }
+}
+/**
+ * Paginación en servidor: `data` es una página ya recortada y el pie refleja
+ * los totales que devuelve el servidor. Sin ella la tabla pagina en cliente
+ * las filas que recibe.
+ */
+export interface DataTableServerPagination {
+    page: number;
+    pageSize: number;
+    total: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange?: (size: string) => void;
+}
+/** Etiquetas accesibles que la tabla reenvía a sus cabeceras ordenables. */
+export type DataTableHeaderLabels = Pick<TableHeaderProps, 'actionsLabel' | 'sortedAscLabel' | 'sortedDescLabel' | 'sortableLabel'>;
+/** Etiquetas accesibles que la tabla reenvía a su paginación. */
+export type DataTablePaginationLabels = Pick<PaginationProps, 'ariaLabel' | 'pageLabel' | 'previousLabel' | 'nextLabel' | 'pagesGroupLabel' | 'pageSizeLabel' | 'totalLabel' | 'pageSizeOptions'>;
+export interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    /**
+     * Nombre accesible de la tabla (`aria-label` del `<table>`). Sin él —o sin
+     * `ariaLabelledBy`— la tabla llega al lector de pantalla sin nombre. No hay
+     * valor por defecto: solo el consumidor sabe qué lista es.
+     */
+    ariaLabel?: string;
+    /** Alternativa a `ariaLabel`: id del elemento que ya titula la tabla. */
+    ariaLabelledBy?: string;
+    /**
+     * Id de columna al que engancha el buscador por defecto — filtra en cliente
+     * sobre las filas que recibió la tabla. Con `pagination` (paginado en
+     * servidor) eso solo buscaría en la página actual: pasa `search`.
+     */
+    searchColumnId?: string;
+    /** Buscador controlado desde fuera, para filtrar en servidor. */
+    search?: {
+        value: string;
+        onChange: (value: string) => void;
+    };
+    /** Placeholder y nombre accesible del buscador. */
+    searchPlaceholder?: string;
+    /** Nombre accesible del botón que vacía el buscador. Default castellano. */
+    searchClearLabel?: string;
+    /** Se renderiza a la derecha del buscador. */
+    toolbar?: ReactNode;
+    /**
+     * Se renderiza en el pie, **a continuación del selector de registros por
+     * página** (ranura `afterPageSize` de `Pagination`) — acciones sobre el
+     * conjunto (exportar…), no sobre la selección. Los botones de página se
+     * quedan solos, al otro extremo. Sin ella el pie no cambia.
+     */
+    footerActions?: ReactNode;
+    /** Filas por página cuando la tabla pagina en cliente. */
+    pageSize?: number;
+    /** Texto del estado vacío. */
+    emptyMessage?: string;
+    isLoading?: boolean;
+    pagination?: DataTableServerPagination;
+    headerLabels?: DataTableHeaderLabels;
+    paginationLabels?: DataTablePaginationLabels;
+    className?: string;
+}
+/**
+ * Tabla de datos compuesta: buscador, ordenación, estados de carga y vacío, y
+ * paginación (en cliente o en servidor) sobre el `Table` y el `Pagination` del
+ * DS. El comportamiento lo aporta TanStack Table.
+ *
+ * Los textos accesibles llegan por props (el DS no habla de i18n): sin ellos
+ * caen a los castellanos por defecto de `Table` y `Pagination`.
+ */
+export declare function DataTable<TData, TValue>({ columns, data, ariaLabel, ariaLabelledBy, searchColumnId, search, searchPlaceholder, searchClearLabel, toolbar, footerActions, pageSize, emptyMessage, isLoading, pagination, headerLabels, paginationLabels, className, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;