@studiolxd/brand 38.12.4

package/dist/_types/atoms/Container/Container.d.ts

@@ -0,0 +1,48 @@
+import './Container.css';
+/** Medida del contenido interior. `full` = sin límite (la banda entera). */
+export type ContainerWidth = 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+/** Aire vertical de la banda. `none` = sin padding vertical. */
+export type ContainerSpace = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface ContainerProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Ancho máximo del contenido interior, tomado de la escala de breakpoints.
+     * Por defecto `'xl'` (1280px), el ancho de las páginas públicas; `'full'`
+     * para que el contenido llegue tan lejos como la banda.
+     *
+     * No es una medida de lectura: para texto largo, el ancho lo fija el
+     * componente de prosa según su tipografía, no la maqueta.
+     */
+    width?: ContainerWidth;
+    /** Aire vertical de la banda. Por defecto `'none'`: lo pone quien la usa. */
+    space?: ContainerSpace;
+    /**
+     * Sin aire lateral — para contenido que debe tocar el borde de la pantalla.
+     * Una banda **anidada** dentro de otra con aire ya sale sin aire lateral por
+     * sí sola (no hay que ponerlo): el de fuera ya lo puso. Dentro de una banda
+     * `flush`, en cambio, la de dentro conserva el suyo.
+     */
+    flush?: boolean;
+    /**
+     * Banda sobre superficie oscura: pinta el lienzo oscuro y voltea los tokens
+     * de todo lo que contiene (texto, botones, cabecera). Fondo y color van
+     * siempre emparejados; no hace falta poner el fondo aparte.
+     */
+    surface?: 'dark';
+    /** Elemento a renderizar. Por defecto `'div'`; usa `'section'`, `'header'`… según el papel. */
+    as?: 'div' | 'section' | 'header' | 'footer' | 'main' | 'article' | 'aside' | 'nav';
+    /** Clases para el elemento interior, el que lleva el ancho máximo. */
+    innerClassName?: string;
+}
+/**
+ * Banda a sangre con el contenido acotado y centrado.
+ *
+ * El elemento exterior ocupa el 100% del ancho: es donde se pinta el fondo, que
+ * así llega de lado a lado de la pantalla. El interior limita la medida del
+ * contenido. Es la pieza de las partes públicas — la web, el hub sin sesión —
+ * donde una sección de color debe sangrar mientras el texto se queda en su
+ * columna.
+ *
+ * Anidar bandas no duplica el aire lateral: una banda dentro de otra que ya
+ * tiene aire sale a cero por CSS, sin prop.
+ */
+export declare const Container: import("react").ForwardRefExoticComponent<ContainerProps & import("react").RefAttributes<HTMLElement>>;

package/dist/_types/atoms/CopyableValue/CopyableValue.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+import './CopyableValue.css';
+export interface CopyableValueProps {
+    /** El valor a mostrar y, por defecto, a copiar. Texto o nodos. */
+    children: ReactNode;
+    /**
+     * Qué se copia. Por defecto, el texto de `children`. Solo hace falta cuando
+     * lo que se ve y lo que se copia no coinciden (un valor abreviado, una URL
+     * con el protocolo escondido).
+     */
+    copyText?: string;
+    /**
+     * Nombre accesible del botón de copiar. Default castellano.
+     * @default 'Copiar'
+     */
+    copyLabel?: string;
+    /**
+     * Acuse tras copiar, anunciado en una región viva. Default castellano.
+     * @default 'Copiado'
+     */
+    copiedLabel?: string;
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+}
+export declare const CopyableValue: import("react").ForwardRefExoticComponent<CopyableValueProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/_types/atoms/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,78 @@
+import './DescriptionList.css';
+export interface DescriptionTermProps extends React.ComponentPropsWithoutRef<'dt'> {
+    /**
+     * Elemento a renderizar. Default `'dt'`, que es lo correcto dentro de una
+     * `DescriptionList`. Solo se cambia cuando el término no cuelga de una lista
+     * de descripción real y hay que darle el rol a mano (`as="div"
+     * role="term"`).
+     */
+    as?: React.ElementType;
+    children?: React.ReactNode;
+}
+export interface DescriptionDetailsProps extends React.ComponentPropsWithoutRef<'dd'> {
+    /**
+     * Elemento a renderizar. Default `'dd'`. Mismo criterio que en
+     * `DescriptionTerm`: solo se cambia fuera de un `<dl>` real (`as="div"
+     * role="definition"`).
+     */
+    as?: React.ElementType;
+    children?: React.ReactNode;
+    /**
+     * Añade un botón de copiar en línea, pegado al final del valor (nunca al
+     * margen ni en su propia línea). Es para los datos que se copian —una URL
+     * de callback, un identificador, el valor de un registro TXT—: siguen
+     * siendo texto corriente, no código.
+     */
+    copyable?: boolean;
+    /**
+     * Qué se copia. Por defecto, el texto de `children`. Solo hace falta cuando
+     * lo que se ve y lo que se copia no coinciden (un valor abreviado, una URL
+     * con el protocolo escondido).
+     */
+    copyText?: string;
+    /**
+     * Nombre accesible del botón de copiar. Default castellano.
+     * @default 'Copiar'
+     */
+    copyLabel?: string;
+    /**
+     * Acuse tras copiar, anunciado en una región viva. Default castellano.
+     * @default 'Copiado'
+     */
+    copiedLabel?: string;
+}
+export interface DescriptionListProps extends React.ComponentPropsWithoutRef<'dl'> {
+    /** Pares `<dt>` término y `<dd>` valor, en ese orden. */
+    children: React.ReactNode;
+}
+/**
+ * Lista de descripción: pares término/valor en una rejilla con separadores.
+ * Sirve para fichas de datos —cliente, servicio, año— donde cada fila es una
+ * propiedad y su contenido.
+ *
+ * Reenvía el resto de props del `<dl>` (`data-*`, `aria-*`, `id`…) y concatena
+ * `className` tras las clases propias.
+ */
+export declare const DescriptionList: import("react").ForwardRefExoticComponent<DescriptionListProps & import("react").RefAttributes<HTMLDListElement>>;
+/**
+ * Término de una `DescriptionList`. Es el `<dt>` de siempre con la clase
+ * `description-list__term`: la lista ya viste sus hijos por selector de
+ * elemento, así que la clase no pinta nada nuevo — está para que una app que no
+ * puede escribir HTML suelto tenga una pieza que poner dentro, y para que el
+ * dibujo siga en pie cuando `as` cambia el elemento.
+ *
+ * Reenvía el resto de props del elemento y concatena `className` tras la clase
+ * propia.
+ */
+export declare const DescriptionTerm: import("react").ForwardRefExoticComponent<DescriptionTermProps & import("react").RefAttributes<HTMLElement>>;
+/**
+ * Valor de una `DescriptionList`. Es el `<dd>` de siempre con la clase
+ * `description-list__details`; mismas razones y mismo contrato que
+ * `DescriptionTerm`. Varios seguidos son varios valores de un mismo término.
+ *
+ * Con `copyable`, el valor gana un botón de copiar al final de la fila. El
+ * valor sigue siendo **texto corriente**: un dato que se copia no es código, y
+ * meterlo en un `CodeBlock` solo para tener el botón lo disfrazaba de código.
+ * Sin `copyable`, el marcado y el dibujo son exactamente los de siempre.
+ */
+export declare const DescriptionDetails: import("react").ForwardRefExoticComponent<DescriptionDetailsProps & import("react").RefAttributes<HTMLElement>>;

package/dist/_types/atoms/DotsButton/DotsButton.d.ts

@@ -0,0 +1,14 @@
+import { type ButtonBaseProps } from '../Button/Button';
+import './DotsButton.css';
+export interface DotsButtonProps extends Omit<ButtonBaseProps, 'variant' | 'iconOnly' | 'children' | 'href'> {
+    /** Talla del sistema (32/40/48). */
+    size?: 'sm' | 'md' | 'lg';
+    /** Puntos en fila (por defecto) o en columna. */
+    orientation?: 'horizontal' | 'vertical';
+}
+/**
+ * El botón de «más opciones»: un `Button` ghost de solo icono con el icono
+ * `dots`. No tiene cara propia — es el botón del sistema — y su sitio es
+ * disparar un `ContextMenu` o un `Popover`.
+ */
+export declare const DotsButton: import("react").ForwardRefExoticComponent<DotsButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/_types/atoms/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,25 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+export interface ErrorBoundaryProps {
+    children?: ReactNode;
+    /** Lo que se pinta si un hijo lanza al renderizar. Por defecto nada (`null`). */
+    fallback?: ReactNode;
+    /** Se llama con el error y la pila de componentes cuando un hijo lanza. */
+    onError?: (error: Error, info: ErrorInfo) => void;
+}
+interface ErrorBoundaryState {
+    failed: boolean;
+}
+/**
+ * Límite de error sin cara ni tokens: si un hijo lanza al renderizar, pinta
+ * `fallback` (nada, por defecto) en lugar de tumbar el árbol entero. Es la
+ * pieza que hace seguras la cabecera y el pie dentro de una página de error:
+ * si el chrome falla, la página sigue viva. Componente de clase porque React
+ * solo expone `componentDidCatch` ahí.
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): ReactNode;
+}
+export {};

package/dist/_types/atoms/ErrorText/ErrorText.d.ts

@@ -0,0 +1,34 @@
+import './ErrorText.css';
+export interface ErrorTextProps extends React.ComponentPropsWithoutRef<'p'> {
+    /**
+     * Qué elemento se pinta. `p` es lo normal —el error es una frase—; `div`
+     * cuando el sitio del DOM no admite un párrafo (dentro de otro `<p>`, en una
+     * celda que ya lo tiene) y `span` cuando el error va **en línea**, dentro de
+     * una frase o de una fila con el control. No cambia la pinta ni el rol.
+     */
+    as?: 'p' | 'div' | 'span';
+    /**
+     * Id del mensaje, para apuntarlo desde el control con `aria-describedby`.
+     * Sin él, el error se anuncia igual (es un `role="alert"`) pero no queda
+     * atado a nada: quien lo lea tabulando al control no lo oirá.
+     */
+    id?: string;
+    children: React.ReactNode;
+}
+/**
+ * El **error de formulario suelto**: la misma cara que el `errorMessage` de un
+ * `*Field`, pero sin campo del que colgar.
+ *
+ * Está para lo que no es un campo y falla igual — el importe que no se pudo
+ * calcular junto a un selector, el resultado de una comprobación que acompaña a
+ * un control compuesto—: sin él la única salida era un `Paragraph` con
+ * `Text tone="destructive"`, que da otro cuerpo y otra tinta que el error de al
+ * lado. Dentro de un `*Field` no se usa: ahí el error es `errorMessage`, y en un
+ * formulario de react-hook-form, `FormMessage`.
+ *
+ * Se anuncia solo (`role="alert"`), así que aparecer ya es hablar: se monta
+ * cuando hay error y se desmonta cuando deja de haberlo, nunca se deja vacío.
+ * Para un error de página o de operación —«no se pudo guardar»— está `Alert`,
+ * que es un bloque con su icono.
+ */
+export declare const ErrorText: import("react").ForwardRefExoticComponent<ErrorTextProps & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/_types/atoms/Fieldset/Fieldset.d.ts

@@ -0,0 +1,22 @@
+import './Fieldset.css';
+type HeadingWeight = 'thin' | 'extralight' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
+type HeadingSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+export interface FieldsetProps {
+    /** Texto del legend (título del grupo de campos). */
+    legend: React.ReactNode;
+    /** Nivel de heading visual para el legend (1–6). */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Peso tipográfico del legend. */
+    weight?: HeadingWeight;
+    /** Tamaño tipográfico del legend. */
+    size?: HeadingSize;
+    /** Clases adicionales para el fieldset. */
+    className?: string;
+    /** Identificador HTML del fieldset. */
+    id?: string;
+    /** Deshabilita todos los controles descendientes en un solo punto. */
+    disabled?: boolean;
+    children: React.ReactNode;
+}
+export declare function Fieldset({ legend, level, weight, size, className, id, disabled, children, }: FieldsetProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/_types/atoms/Figure/Figure.d.ts

@@ -0,0 +1,44 @@
+import './Figure.css';
+/**
+ * Proporción de la caja de imagen. `auto` deja mandar a la propia foto —lo que
+ * quiere una captura de pantalla—; el resto la recorta a una proporción fija,
+ * que es lo que mantiene alineada una rejilla de imágenes.
+ */
+export type FigureRatio = 'auto' | '1:1' | '4:3' | '3:2' | '16:9' | '21:9';
+export interface FigureProps extends React.ComponentPropsWithoutRef<'figure'> {
+    /** URL de la imagen. Se ignora si se pasa `render`. */
+    src?: string;
+    /** Texto alternativo. Vacío si la imagen no aporta nada al pie. */
+    alt?: string;
+    /** Pie visible. Sin él no se pinta `<figcaption>`. */
+    caption?: React.ReactNode;
+    /** Proporción de la caja de imagen. Default: `'auto'`. */
+    ratio?: FigureRatio;
+    /**
+     * Encaje de la imagen en la caja cuando hay proporción fija: `cover` la
+     * recorta hasta llenarla, `contain` la mete entera y deja ver el fondo.
+     * Default: `'cover'`.
+     */
+    fit?: 'cover' | 'contain';
+    /**
+     * Elemento sobre el que renderizar la imagen (p. ej. `<Image />` de
+     * Next.js): recibe la clase de la imagen en lugar del `<img>` propio.
+     * Sustituye al patrón `asChild` y manda sobre `src`.
+     */
+    render?: React.ReactElement<Record<string, unknown>>;
+}
+/**
+ * Imagen con pie: el `<figure>`/`<figcaption>` del sistema, con la proporción
+ * y el cuerpo del pie por tokens. Es lo que evita que cada producto maquete a
+ * mano una foto con su leyenda.
+ *
+ * La imagen la pinta un `<img>` propio a partir de `src`/`alt`, o el elemento
+ * que se pase por `render` cuando la aplicación tiene su propio componente de
+ * imagen (el `next/image` de una web Next.js), que ahí sí optimiza. `render`
+ * recibe un elemento de React, así que solo funciona desde un componente
+ * **cliente**.
+ *
+ * `{...rest}` (`id`, `aria-*`, `data-*`…) se reenvía al `<figure>` y
+ * `className` se concatena tras las clases propias.
+ */
+export declare const Figure: import("react").ForwardRefExoticComponent<FigureProps & import("react").RefAttributes<HTMLElement>>;

package/dist/_types/atoms/FileUpload/FileUpload.d.ts

@@ -0,0 +1,66 @@
+import { type FormSize } from '../../constants/form-size';
+import './FileUpload.css';
+export interface FileUploadProps {
+    multiple?: boolean;
+    accept?: string;
+    maxSize?: number;
+    maxFiles?: number;
+    value?: File[];
+    defaultValue?: File[];
+    onChange?: (files: File[]) => void;
+    progress?: number;
+    disabled?: boolean;
+    error?: boolean;
+    id?: string;
+    name?: string;
+    /**
+     * Talla del sistema. La zona de arrastre no es un control de una línea, así
+     * que no toma la altura 32/40/48: lo que sigue a la talla es su aire, el
+     * cuerpo de su texto, el icono y la miniatura de cada archivo (32/40/48, esa
+     * sí, porque la fila de un archivo es una fila de control).
+     * Sin ella, la del `Form` que lo envuelva; sin `Form`, `md`.
+     */
+    size?: FormSize;
+    /** @deprecated Usa el atributo nativo `aria-describedby`. */
+    describedBy?: string;
+    /** @deprecated Usa el atributo nativo `aria-label`. */
+    ariaLabel?: string;
+    /** Ids de ayuda/error que describen el control (lo pone el campo). */
+    'aria-describedby'?: string;
+    /** Nombre accesible cuando el control va suelto. */
+    'aria-label'?: string;
+    required?: boolean;
+    /** Se llama al salir del `<input type="file">` (react-hook-form lo usa para validar). */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /** Se añade DESPUÉS de las clases propias del componente. */
+    className?: string;
+    /**
+     * Texto visible de la zona de arrastre. Default: "Arrastra archivos aquí" (castellano).
+     * Una app multiidioma debe pasarlo traducido — igual que el resto de props de texto.
+     */
+    dropzoneLabel?: string;
+    /** Texto visible mientras se arrastra encima. Default: "Suelta los archivos aquí" */
+    dropzoneActiveLabel?: string;
+    /** Texto visible secundario de la zona. Default: "o haz clic para seleccionar" */
+    dropzoneHintLabel?: string;
+    /** Pista de tamaño máximo. Default: `máx. ${size}` (el tamaño ya viene formateado) */
+    maxSizeHint?: (maxSize: string) => string;
+    /** Pista de número máximo de archivos. Default: `hasta ${n} archivos` */
+    maxFilesHint?: (maxFiles: number) => string;
+    /** aria-label de la lista de archivos. Default: "Archivos seleccionados" */
+    filesLabel?: string;
+    /** aria-label de la barra de progreso. Default: "Progreso de subida" */
+    progressLabel?: string;
+    /** aria-label del botón de eliminar archivo. Default: `Eliminar ${nombre}` */
+    removeFileLabel?: (fileName: string) => string;
+    /** Error de archivo demasiado grande. Default: `Archivo demasiado grande (máx. ${size})` */
+    tooLargeError?: (maxSize: string) => string;
+    /** Error de tipo no admitido. Default: "Tipo de archivo no permitido" */
+    invalidTypeError?: string;
+}
+/**
+ * Zona de subida de archivos. El `ref` va al `<input type="file">` real, para
+ * que react-hook-form pueda registrarlo y enfocarlo; `className` se concatena
+ * a las clases del contenedor.
+ */
+export declare const FileUpload: import("react").ForwardRefExoticComponent<FileUploadProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/_types/atoms/FileUpload/validate.d.ts

@@ -0,0 +1,14 @@
+/**
+ * La validación de cliente de una subida: peso y tipo. Vive aparte del
+ * `FileUpload` porque no es suya — es la del sistema. `AvatarUpload` dibuja
+ * otra cosa (la diana es el avatar, no una zona de arrastre), pero acepta y
+ * rechaza exactamente por la misma regla, y una segunda copia de esta función
+ * sería una segunda definición de qué archivo vale.
+ */
+/** El peso de un archivo, en la unidad que toque. */
+export declare function formatBytes(bytes: number): string;
+/**
+ * `null` si el archivo pasa; si no, el mensaje que lo explica. Los mensajes
+ * los pone quien llama: son texto de producto, no de esta función.
+ */
+export declare function validateFile(file: File, accept: string | undefined, maxSize: number | undefined, tooLargeError: (maxSize: string) => string, invalidTypeError: string): string | null;

package/dist/_types/atoms/Heading/Heading.d.ts

@@ -0,0 +1,20 @@
+import './Heading.css';
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+export interface HeadingProps extends Omit<React.ComponentPropsWithoutRef<'h2'>, 'children'> {
+    /** Nivel semántico del encabezado (`h1`–`h6`). Fija también el tamaño, salvo que `size` lo desacople. */
+    level?: HeadingLevel;
+    /**
+     * Tamaño de la escala tipográfica (1–10), independiente del nivel. Para cuando
+     * el esquema del documento pide un `h2` pero la maqueta pide el tamaño de un
+     * `h5` (el título de una tarjeta, por ejemplo).
+     */
+    size?: HeadingSize;
+    children: React.ReactNode;
+}
+/**
+ * Encabezado semántico. El nivel dice qué es en el esquema del documento; el
+ * tamaño, por defecto, sale del nivel. El peso es siempre el de énfasis del
+ * sistema: un título no elige su peso.
+ */
+export declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;