@studiolxd/brand 38.12.4

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

@@ -0,0 +1,78 @@
+import type { ComponentType, ReactNode } from 'react';
+import './CalendarRoster.css';
+export type RosterCellType = 'schedule' | 'holiday' | 'vacation' | 'absence' | 'recovery' | 'birthday' | 'non-working';
+export interface RosterCell {
+    type: RosterCellType;
+    /** Texto visible: nombre del festivo, turno "16:00–20:00", "Vacaciones"… */
+    label: string;
+}
+export interface RosterRow {
+    id: string;
+    /** Nombre completo del empleado / recurso */
+    name: string;
+    /**
+     * Celdas indexadas por número de día (1 = día 1 del mes).
+     * Solo hay que incluir los días con datos; el resto quedan vacíos.
+     */
+    cells: Partial<Record<number, RosterCell | null>>;
+}
+export interface LegendItem {
+    type: Exclude<RosterCellType, 'schedule'>;
+    label: string;
+}
+export interface CalendarRosterProps {
+    /** Filas del cuadrante (empleados / recursos) */
+    rows: RosterRow[];
+    /** Mes visible (controlado) */
+    month: Date;
+    /** Callback al cambiar de mes — para navegación SPA */
+    onMonthChange?: (month: Date) => void;
+    /**
+     * Genera el href para cada mes de navegación.
+     * Si se pasa, los botones prev/next se renderizan como <a>.
+     * Compatible con SSR y Next.js. Toma precedencia sobre onMonthChange.
+     */
+    hrefBuilder?: (month: Date) => string;
+    /** Componente Link del router. Default: "a" */
+    linkComponent?: ComponentType<any>;
+    /**
+     * Render prop para personalizar el contenido interno de cada celda.
+     * El componente sigue siendo responsable del <td> y sus clases (--weekend, --today, --holiday, --non-working).
+     * Cuando se pasa, sustituye al renderizado por defecto de chips/schedule.
+     */
+    renderCell?: (day: number, date: Date, cell: RosterCell | null) => ReactNode;
+    /** Etiqueta de la columna de nombre. Default: 'Empleado' */
+    nameLabel?: string;
+    /**
+     * Lo que precede a la etiqueta de un cumpleaños. Default: `'🎂 '`
+     * (castellano/universal). Es contenido **visible** y se lee en voz alta:
+     * pásalo vacío para quitarlo, u otro texto para sustituirlo.
+     */
+    birthdayPrefix?: string;
+    /** Muestra la leyenda al final. Default: true */
+    showLegend?: boolean;
+    /**
+     * Entradas de la leyenda, en orden. Default: las seis del sistema con sus etiquetas
+     * en castellano. Es texto **visible**: una app multiidioma debe pasarlas traducidas.
+     */
+    legendItems?: LegendItem[];
+    /**
+     * aria-label de la leyenda. Default: "Leyenda" (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    legendLabel?: string;
+    /**
+     * aria-label del botón de mes anterior. Default: "Mes anterior" (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    previousMonthLabel?: string;
+    /**
+     * aria-label del botón de mes siguiente. Default: "Mes siguiente" (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    nextMonthLabel?: string;
+    /** Locale para nombres de mes y día. Default: 'es-ES' */
+    locale?: string;
+    className?: string;
+}
+export declare function CalendarRoster({ rows, month, onMonthChange, hrefBuilder, linkComponent, renderCell, nameLabel, birthdayPrefix, showLegend, locale, legendItems, legendLabel, previousMonthLabel, nextMonthLabel, className, }: CalendarRosterProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,141 @@
+import './Card.css';
+import { type HeadingLevel, type HeadingSize } from '../../atoms/Heading/Heading';
+import { type ParagraphProps } from '../../atoms/Paragraph/Paragraph';
+export type CardColor = 'primary' | 'outline' | 'accent-1' | 'accent-2' | 'support-1' | 'support-2';
+/**
+ * Maqueta de la tarjeta. `default` es la de siempre: una columna de texto.
+ * `square` y `split` son las dos tarjetas de marketing —la cuadrada con la
+ * imagen arriba y la partida con el panel de color al lado de la foto—, que
+ * antes eran dos componentes aparte y ahora son una variante de la misma
+ * pieza: el contrato (enlace, título, descripción, CTA accesible, color) ya
+ * era idéntico; lo único que cambiaba era dónde va la imagen.
+ */
+export type CardVariant = 'default' | 'square' | 'split';
+export interface CardMedia {
+    src: string;
+    /** Texto alternativo. Vacío si la imagen no aporta nada al título. */
+    alt: string;
+}
+export interface CardProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * URL de destino. **Con `href`** el Card es una *link-card*: todo el bloque es un
+     * `<a>` (título + descripción + `children` + flecha). **Sin `href`** es una
+     * *superficie contenedora*: un `<div>` con `children` arbitrarios
+     * (interactivos permitidos).
+     */
+    href?: string;
+    /**
+     * Elemento sobre el que renderizar la tarjeta (p. ej. `<Link href="…" />` de
+     * Next.js): recibe las clases y el contenido del Card. Es el modo enlace
+     * cuando la navegación la lleva el router de la aplicación, y sustituye al
+     * patrón `asChild`. Manda sobre `href`.
+     *
+     * También admite un `<button type="submit" name="…" value="…" />`: la
+     * tarjeta-acción, para un formulario nativo donde pulsar la tarjeta envía
+     * un valor en vez de navegar (el `authenticationExecution` del tema de
+     * Keycloak es el caso que lo motiva). El CSS del modo enlace no depende de
+     * que el elemento sea un `<a>`.
+     */
+    render?: React.ReactElement<Record<string, unknown>>;
+    /**
+     * Abre en nueva pestaña con `rel="noopener noreferrer"` (solo con `href`).
+     * Misma prop y mismo contrato que en `Button` y `Link`.
+     */
+    external?: boolean;
+    /** Título (modo link — se espera junto a `href` o `render`). */
+    title?: string;
+    /**
+     * Descripción (modo link). Con una cadena, la tarjeta la envuelve en su
+     * propio `<p>`. Con un nodo, lo pinta tal cual: el marcado lo trae el
+     * consumidor (varios párrafos, `<Tag>`, texto con formato…).
+     */
+    description?: React.ReactNode;
+    /** Texto accesible del CTA, visually-hidden (modo link — se espera junto a `href` o `render`). */
+    ctaLabel?: string;
+    /** Color de fondo. Default: `'outline'`. */
+    color?: CardColor;
+    /** Maqueta de la tarjeta. Default: `'default'`. */
+    variant?: CardVariant;
+    /**
+     * Modo contenedor: la tarjeta entera es la opción de un grupo. Dentro va
+     * un `RadioField` (o `CheckboxField`) del DS, que la tarjeta extiende a todo
+     * su bloque y deja invisible: pulsar en cualquier punto marca la opción y
+     * el foco del teclado se dibuja sobre la tarjeta. Nada más dentro puede ser
+     * interactivo.
+     */
+    selectable?: boolean;
+    /** Con `selectable`: la opción marcada se pinta en accent-1. */
+    selected?: boolean;
+    /**
+     * Imagen de la tarjeta: arriba en `square`, al lado del panel de color en
+     * `split`, y sobre el texto en `default`. Sin ella la tarjeta es solo texto,
+     * como hasta ahora.
+     */
+    media?: CardMedia;
+}
+/**
+ * Card con dos modos:
+ * - **link-card** (`href` o `render`): navegación — el bloque entero es un
+ *   enlace. Con `href` lo pinta un `<a>`; con `render`, el elemento que se le
+ *   pase (el `Link` del router de turno). Admite `children` para el contenido
+ *   que no cabe en `title`/`description`, siempre que no sea interactivo.
+ * - **contenedor** (sin ninguno de los dos): superficie de app con contenido
+ *   interactivo dentro (formularios, botones), que no puede vivir dentro de un
+ *   `<a>`. Se compone con las subpartes de más abajo.
+ *
+ * En modo contenedor, `className` se concatena tras las clases propias y `{...rest}`
+ * (`data-*`, `aria-*`, `id`…) se reenvía al `<div>`.
+ */
+export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLElement>>;
+export type CardPartProps = React.ComponentPropsWithoutRef<'div'>;
+/** Fila superior: el bloque de título a un lado y la acción al otro. */
+export declare const CardHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface CardTitleProps extends Omit<React.ComponentPropsWithoutRef<'h3'>, 'children'> {
+    /**
+     * Nivel semántico del encabezado en el esquema del documento. Default: `3`
+     * — una tarjeta suele colgar de un `h2` de sección. Súbelo o bájalo según
+     * dónde viva la tarjeta; no cambia cómo se ve.
+     */
+    level?: HeadingLevel;
+    /**
+     * Tamaño de la escala de títulos. Default: `4` (20px), el tamaño de un título
+     * de tarjeta de aplicación. La link-card de marketing usa el suyo, mucho mayor.
+     */
+    size?: HeadingSize;
+    children: React.ReactNode;
+}
+/**
+ * Título de la tarjeta. Es un encabezado de verdad (`Heading`): cuenta para el
+ * esquema del documento y para la navegación por encabezados de un lector de
+ * pantalla. El nivel y el tamaño se eligen por separado — el nivel dice dónde
+ * cuelga la tarjeta, el tamaño cómo se ve.
+ */
+export declare const CardTitle: import("react").ForwardRefExoticComponent<CardTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export interface CardDescriptionProps extends Omit<ParagraphProps, 'children'> {
+    children: React.ReactNode;
+    /**
+     * Líneas que reserva aunque el texto ocupe menos (altura mínima en `lh`).
+     * Para tarjetas hermanas cuyo siguiente bloque —un precio, una cifra— debe
+     * quedar a la misma altura tengan la descripción que tengan.
+     */
+    lines?: 1 | 2 | 3;
+}
+/**
+ * Texto secundario bajo el título. Es un párrafo del sistema (`Paragraph`):
+ * hereda el cuerpo de la superficie en la que viva la tarjeta.
+ */
+export declare const CardDescription: import("react").ForwardRefExoticComponent<CardDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+/** Acción alineada al extremo de la cabecera (menú, botón…). */
+export declare const CardAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** Cuerpo de la tarjeta. */
+export declare const CardContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface CardFooterProps extends CardPartProps {
+    /**
+     * `row` (por defecto): las acciones en fila. `column`: apiladas y a todo
+     * el ancho — para un pie con una línea de texto sobre el botón (una nota
+     * de prueba, una condición) que debe quedar pegada a él.
+     */
+    direction?: 'row' | 'column';
+}
+/** Pie de la tarjeta: sus acciones, en fila o apiladas. */
+export declare const CardFooter: import("react").ForwardRefExoticComponent<CardFooterProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,75 @@
+import './Carousel.css';
+export interface CarouselProps {
+    /** Las diapositivas: uno o varios `CarouselSlide`. */
+    children: React.ReactNode;
+    /** Nombre accesible de la región. Default: «Carrusel» (castellano). Una app multiidioma debe pasarlo traducido. */
+    label?: string;
+    /**
+     * Texto de `aria-roledescription` de la región. Por defecto «carrusel», en
+     * castellano: es el lector de pantalla quien lo lee, así que se traduce.
+     */
+    roleDescription?: string;
+    /** Nombre accesible de la pista, la que recibe el foco para desplazarse con el teclado. Default: «Diapositivas» (castellano). Una app multiidioma debe pasarlo traducido. */
+    trackLabel?: string;
+    /**
+     * Ancho de cada diapositiva — cualquier medida CSS (`'50%'`, `'18rem'`,
+     * `'calc(100% / 3)'`). Sobreescribe `--carousel-slide-size`, que por defecto
+     * es la pista entera (una diapositiva a la vista).
+     */
+    slideSize?: string;
+    /** Botones anterior/siguiente. Por defecto sí. */
+    controls?: boolean;
+    /** Barra de indicadores, una por diapositiva. Por defecto no. */
+    indicators?: boolean;
+    /**
+     * Avance automático, en milisegundos entre saltos. Sin la prop no hay
+     * autoplay. Se detiene mientras el puntero o el foco están dentro, y no
+     * arranca si el sistema pide movimiento reducido. Con la prop aparece
+     * además el botón de pausa/reproducción, que exige WCAG 2.2.2 para todo
+     * movimiento automático: pararlo así es definitivo, no se reanuda solo.
+     */
+    autoplay?: number;
+    /** Texto accesible del botón «anterior». Default: «Anterior» (castellano). Una app multiidioma debe pasarlo traducido. */
+    prevLabel?: string;
+    /** Texto accesible del botón «siguiente». Default: «Siguiente» (castellano). Una app multiidioma debe pasarlo traducido. */
+    nextLabel?: string;
+    /** Texto accesible del indicador n. Default: «Ir a la diapositiva N» (castellano). Una app multiidioma debe pasarlo traducido. */
+    indicatorLabel?: (index: number) => string;
+    /** Texto accesible del botón que detiene el avance automático. Por defecto «Pausar». */
+    pauseLabel?: string;
+    /** Texto accesible del botón que reanuda el avance automático. Por defecto «Reproducir». */
+    playLabel?: string;
+    /**
+     * Texto que se anuncia al cambiar de diapositiva. Por defecto «Diapositiva N
+     * de M». Lo lee el lector de pantalla: se traduce.
+     */
+    slideStatusLabel?: (index: number, count: number) => string;
+    className?: string;
+    id?: string;
+}
+/**
+ * Carrusel de scroll nativo: la pista es un contenedor con `overflow` y
+ * `scroll-snap`, así que arrastrar, deslizar en móvil y las teclas de flecha
+ * funcionan sin JavaScript. El componente solo añade lo que el navegador no
+ * da: los botones anterior/siguiente, los indicadores de posición y el
+ * avance automático opcional.
+ *
+ * No pinta fondo ni tiene tallas: el ancho de cada diapositiva lo decide quien
+ * lo usa (`slideSize`), y lo que va dentro son componentes del sistema
+ * —tarjetas, logotipos, citas—, no maquetación propia.
+ */
+export declare function Carousel({ children, label, roleDescription, trackLabel, slideSize, controls, indicators, autoplay, prevLabel, nextLabel, indicatorLabel, pauseLabel, playLabel, slideStatusLabel, className, id, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+export interface CarouselSlideProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Texto de `aria-roledescription` de la diapositiva. Por defecto
+     * «diapositiva», en castellano.
+     */
+    roleDescription?: string;
+    children: React.ReactNode;
+}
+/**
+ * Una diapositiva de la pista. Es un `group` con `aria-roledescription`, para
+ * que el lector de pantalla anuncie de qué se trata; el contenido lo pone
+ * quien la usa.
+ */
+export declare function CarouselSlide({ roleDescription, className, children, ...rest }: CarouselSlideProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react';
+import './CheckboxField.css';
+export interface CheckboxFieldProps {
+    /** Texto de la opción, a la derecha de la marca. Acepta JSX (un enlace, por ejemplo). */
+    label: ReactNode;
+    /**
+     * Oculta el texto de la opción **visualmente**, sin quitarlo del árbol de
+     * accesibilidad: la marca conserva su nombre. Para una casilla dentro de una
+     * tabla o de una barra de acciones, donde el rótulo lo da la columna. Misma
+     * prop que en `InputField`, `TextareaField`, `SelectField` y `FileUploadField`.
+     * Default: `false`.
+     * 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;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    /** Talla del sistema. Sin ella, la del `Form` que lo envuelva; sin `Form`, `md`. */
+    size?: 'sm' | 'md' | 'lg';
+    /** `id` del control. Si no se pasa, se genera con `useId`. */
+    id?: string;
+    name?: string;
+    value?: 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;
+    /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
+    className?: string;
+    onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+}
+/**
+ * El `Checkbox` como campo: marca, texto de la opción, ayuda y error. El `ref`
+ * va al disparador (el `<button role="checkbox">`) para que react-hook-form
+ * pueda enfocarlo al fallar la validación; el `className`, al contenedor.
+ */
+export declare const CheckboxField: import("react").ForwardRefExoticComponent<CheckboxFieldProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,72 @@
+import './CodeBlock.css';
+export interface CodeBlockProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** Código a mostrar. Texto plano o nodos ya resaltados por un highlighter externo. */
+    children: React.ReactNode;
+    /** Etiqueta de lenguaje opcional (ej. "tsx", "bash"), mostrada como Tag en la cabecera. */
+    language?: string;
+    /** Muestra un botón de copiar al portapapeles en la cabecera. Default: `false`. */
+    copyable?: boolean;
+    /**
+     * Fuerza la variante de una línea (código a la izquierda con su propio
+     * scroll horizontal, lenguaje y botón de copiar a la derecha, centrados en
+     * vertical, sin cabecera aparte) o la multilínea (cabecera arriba, código
+     * debajo). Sin la prop se detecta solo: `children` como cadena sin saltos
+     * de línea es una línea; con saltos de línea, o con nodos ya resaltados por
+     * un highlighter externo (no se pueden inspeccionar como cadena), es
+     * multilínea.
+     */
+    singleLine?: boolean;
+    /**
+     * aria-label del botón de copiar. Default: "Copiar código" (castellano).
+     * Una app multiidioma debe pasarla traducida.
+     */
+    copyLabel?: string;
+    /**
+     * Texto que se anuncia al lector de pantalla tras copiar. Default: "Copiado"
+     * (castellano).
+     */
+    copiedLabel?: string;
+    /**
+     * Nombre accesible del área de código, que es focalizable por tener scroll
+     * horizontal propio. Recibe el `language` cuando lo hay. Default en castellano.
+     */
+    codeLabel?: (language?: string) => string;
+    /** Se añade DESPUÉS de las clases propias del componente. */
+    className?: string;
+}
+/**
+ * Bloque de código sobre superficie gris clara, con etiqueta de lenguaje y
+ * botón de copiar opcionales. Extiende los atributos nativos de `<div>` y
+ * reenvía `{...rest}` al raíz.
+ */
+export declare function CodeBlock({ children, language, copyable, singleLine, copyLabel, copiedLabel, codeLabel, className, ...rest }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Los tipos de token que el sistema sabe pintar. Es un vocabulario cerrado a
+ * propósito: un resaltador emite decenas de ámbitos y aquí se mapean a estos
+ * quince, que son los que tienen tinta propia. Ver la doc de `CodeBlock`
+ * § «Resaltado de sintaxis» para la tabla de equivalencias con shiki.
+ */
+export type CodeTokenType = 'keyword' | 'string' | 'number' | 'comment' | 'function' | 'variable' | 'property' | 'punctuation' | 'operator' | 'tag' | 'attribute' | 'constant' | 'regexp' | 'inserted' | 'deleted';
+export interface CodeTokenProps extends React.ComponentPropsWithoutRef<'span'> {
+    /** Qué es este trozo de código. Decide la tinta, que sale de un token. */
+    type: CodeTokenType;
+    /** Se añade DESPUÉS de las clases propias del componente. */
+    className?: string;
+}
+/**
+ * Un trozo de código con su tinta, para meter dentro de `CodeBlock`.
+ *
+ * `CodeBlock` **no resalta sintaxis**: el resaltador (shiki, prism, el que sea)
+ * es del producto. Lo que pone el sistema es el vocabulario: el consumidor
+ * recorre los tokens que le devuelve su resaltador, traduce el ámbito a un
+ * `CodeTokenType` y envuelve el texto con este componente. Así el color sale de
+ * un token del sistema —con su par en superficie oscura— y no de un
+ * `style={{ color }}` inline, que se salta la cascada y el tema.
+ *
+ * ```tsx
+ * <CodeBlock language="ts">
+ *   {tokens.map((t, i) => <CodeToken key={i} type={tipo(t.scope)}>{t.content}</CodeToken>)}
+ * </CodeBlock>
+ * ```
+ */
+export declare function CodeToken({ type, className, children, ...rest }: CodeTokenProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,60 @@
+import { type ReactNode } from 'react';
+import './CommandPalette.css';
+export interface CommandPaletteItem {
+    /** Clave estable del ítem. */
+    id: string;
+    /** Etiqueta visible; es también el texto sobre el que filtra el buscador. */
+    label: string;
+    icon?: ReactNode;
+    onSelect: () => void;
+    /** Términos extra por los que el ítem debe encontrarse. */
+    keywords?: string[];
+    disabled?: boolean;
+}
+export interface CommandPaletteGroup {
+    id: string;
+    heading: string;
+    items: CommandPaletteItem[];
+}
+export interface CommandPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Grupos de comandos, en orden. Los grupos que se quedan sin ítems al
+     * filtrar no se renderizan — el call-site no necesita condicionarlos.
+     */
+    groups: CommandPaletteGroup[];
+    /** Título accesible y visible del diálogo. */
+    title: string;
+    placeholder: string;
+    /** Texto del estado "sin resultados". */
+    emptyLabel: string;
+    /**
+     * Etiqueta accesible de la lista de resultados (`role="listbox"`). Sin ella
+     * el listbox se queda sin nombre: pásala siempre en apps multiidioma.
+     */
+    listLabel?: string;
+    /** Etiqueta del botón de cierre del diálogo. */
+    closeLabel?: string;
+    /**
+     * Tecla del atajo global (con ⌘ o Ctrl) que abre y cierra la paleta.
+     * `false` desactiva el atajo — la apertura queda en manos del call-site.
+     */
+    shortcut?: string | false;
+    /**
+     * Idioma con el que se comparan las cadenas al filtrar (`Intl.Collator`).
+     * Por defecto, el del entorno.
+     */
+    locale?: Intl.LocalesArgument;
+    className?: string;
+}
+/**
+ * Paleta de comandos ⌘K: diálogo con buscador, resultados agrupados y estado
+ * vacío. Se monta una sola vez en el shell de la aplicación y se alimenta de
+ * forma declarativa con `groups`.
+ *
+ * El comportamiento (filtrado, navegación con ↑↓, Enter) es el `Autocomplete`
+ * de Base UI en modo `inline` — sin popup propio, porque la superficie ya la
+ * pone el `Modal`, que también se queda con Escape y el foco atrapado.
+ */
+export declare function CommandPalette({ open, onOpenChange, groups, title, placeholder, emptyLabel, listLabel, closeLabel, shortcut, locale, className, }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,84 @@
+import { type ReactNode } from 'react';
+import { type ModalProps } from '../Modal/Modal';
+import './ConfirmDialog.css';
+export interface ConfirmDialogProps {
+    open: boolean;
+    /** Título del diálogo: la pregunta, no «Confirmar». */
+    title: string;
+    /** El cuerpo de la pregunta: qué va a pasar y qué no se puede deshacer. */
+    description?: ReactNode;
+    /** Contenido extra bajo la descripción (un aviso, la lista de lo que se borra). */
+    children?: ReactNode;
+    /**
+     * Se llama al confirmar. Si devuelve una promesa, el diálogo se queda
+     * abierto y ocupado hasta que resuelve; si rechaza, sigue abierto para que
+     * el consumidor cuente qué ha fallado.
+     */
+    onConfirm: () => void | Promise<void>;
+    /** Se llama al cancelar, al cerrar con el aspa y al pulsar `Esc`. */
+    onCancel: () => void;
+    /**
+     * Se llama cuando la promesa de `onConfirm` rechaza. El diálogo se queda
+     * abierto y no cuenta nada por su cuenta: el error lo explica el consumidor,
+     * que es quien sabe qué ha pasado (un `Toast`, un `Alert` en `children`).
+     */
+    onConfirmError?: (error: unknown) => void;
+    /**
+     * Rótulo de una **tercera acción**, que se coloca entre la de cancelar y la
+     * de confirmar: la variante de la respuesta afirmativa que no es la que se
+     * ofrece por defecto («Permitir siempre» junto a «Permitir», «Guardar como
+     * copia» junto a «Guardar»). No tiene default —es texto del producto, como
+     * `title`— y solo se pinta si viene con `onSecondaryAction`.
+     */
+    secondaryActionLabel?: string;
+    /**
+     * Se llama al pulsar la acción intermedia. Cerrar el diálogo es del
+     * consumidor, igual que en `onConfirm` sin promesa: el diálogo no supone que
+     * la tercera acción termine la conversación.
+     */
+    onSecondaryAction?: () => void;
+    /**
+     * La acción destructiva no se puede deshacer: el botón de confirmar cambia
+     * al lenguaje destructivo del sistema.
+     */
+    destructive?: boolean;
+    /**
+     * Rótulo del botón que confirma. Default castellano.
+     * @default 'Confirmar'
+     */
+    confirmLabel?: string;
+    /**
+     * Rótulo del botón que cancela. Default castellano.
+     * @default 'Cancelar'
+     */
+    cancelLabel?: string;
+    /**
+     * Rótulo del botón de confirmar mientras la acción está en curso. Default castellano.
+     * @default 'Confirmando…'
+     */
+    pendingLabel?: string;
+    /**
+     * Etiqueta del aspa de cierre. Default castellano.
+     * @default 'Cerrar'
+     */
+    closeLabel?: string;
+    /** Nodo donde montar el portal, como en `Modal`. */
+    container?: ModalProps['container'];
+    /** Se añade DESPUÉS de las clases propias del pie del diálogo. */
+    className?: string;
+}
+/**
+ * La pregunta antes de una acción que no se puede deshacer: borrar una
+ * organización, revocar una clave, expulsar a alguien de un equipo.
+ *
+ * Es el `Modal` del sistema con dos botones —tres si el producto pasa una
+ * acción intermedia— y una decisión de diseño: **el foco arranca en
+ * «Cancelar»**. Un diálogo destructivo que abre con el foco en
+ * el botón que destruye convierte un `Enter` de más en una pérdida de datos.
+ *
+ * `onConfirm` puede devolver una promesa. Mientras está en curso el diálogo se
+ * queda abierto y ocupado —no se cierra en falso ni deja pulsar dos veces— y
+ * se cierra solo al resolver. Si rechaza, sigue abierto: el error lo cuenta el
+ * consumidor, que es quien sabe qué ha pasado.
+ */
+export declare function ConfirmDialog({ open, title, description, children, onConfirm, onCancel, onConfirmError, secondaryActionLabel, onSecondaryAction, destructive, confirmLabel, cancelLabel, pendingLabel, closeLabel, container, className, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;