@studiolxd/brand 49.11.0 → 49.12.0

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

@@ -0,0 +1,93 @@
+import { type ReactNode } from 'react';
+import { type RecurrenceFrequency, type RecurrenceValue } from './recurrenceRule';
+import './RecurrenceField.css';
+export type { RecurrenceValue, RecurrenceFrequency, RecurrenceWeekday, RecurrenceEnd, } from './recurrenceRule';
+/**
+ * Los textos del editor de recurrencia. Todo es **cromo**: las etiquetas de
+ * los cuatro campos y los nombres de las opciones.
+ *
+ * Los **días de la semana no están aquí**: salen del `locale` con `Intl`, como
+ * manda el sistema para meses, días y formatos de fecha.
+ */
+export interface RecurrenceFieldMessages {
+    /** Título del grupo de campos. */
+    legend: string;
+    /** Etiqueta del campo de frecuencia. */
+    frequency: string;
+    /** La opción de no repetir. */
+    never: string;
+    /** Cada día. */
+    daily: string;
+    /** Cada semana. */
+    weekly: string;
+    /** Cada mes. */
+    monthly: string;
+    /** Cada año. */
+    yearly: string;
+    /** Etiqueta del intervalo, que depende de la frecuencia: «Cada cuántas semanas». */
+    interval: (frequency: RecurrenceFrequency) => string;
+    /** Etiqueta del grupo de días de la semana. */
+    weekdays: string;
+    /** Etiqueta del campo de final. */
+    end: string;
+    /** El final que no llega. */
+    endNever: string;
+    /** El final por fecha. */
+    endUntil: string;
+    /** El final por número de veces. */
+    endCount: string;
+    /** Etiqueta del campo de fecha final. */
+    until: string;
+    /** Etiqueta del campo de número de repeticiones. */
+    count: string;
+}
+export interface RecurrenceFieldProps {
+    /**
+     * La repetición, **controlada**. `null` es «no se repite», que no es lo
+     * mismo que una repetición con los campos a cero.
+     */
+    value: RecurrenceValue | null;
+    /** Se llama con la repetición entera, o con `null` al dejar de repetirse. */
+    onValueChange: (value: RecurrenceValue | null) => void;
+    /** `id` base de los campos. Sin él, se genera con `useId`. */
+    id?: string;
+    /**
+     * Título del grupo. Con él, el editor se envuelve en un `Fieldset`; **sin
+     * él, no** —el editor va suelto dentro del formulario que lo monta—. Para el
+     * texto del catálogo, pásale `recurrenceField.legend`.
+     */
+    legend?: ReactNode;
+    /** Deshabilita el editor entero. */
+    disabled?: boolean;
+    /** Talla de los campos. Sin ella, la del contexto de formulario. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Locale de los nombres de los días y del campo de fecha. Default `'es-ES'`. */
+    locale?: string;
+    /** Por dónde empieza la semana en los días. Default `'monday'`. */
+    weekStartsOn?: 'monday' | 'sunday';
+    /** Tope inferior de la fecha de final. */
+    minDate?: Date;
+    /** Tope superior de la fecha de final. */
+    maxDate?: Date;
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+    /** Etiqueta del campo de frecuencia. Sin ella, sale de `recurrenceField.frequency`. */
+    frequencyLabel?: string;
+    /** Etiqueta del grupo de días. Sin ella, sale de `recurrenceField.weekdays`. */
+    weekdaysLabel?: string;
+    /** Etiqueta del campo de final. Sin ella, sale de `recurrenceField.end`. */
+    endLabel?: string;
+}
+/**
+ * El editor de recurrencia de un evento: cada cuánto se repite, qué días y
+ * hasta cuándo. Produce y lee una regla `RRULE` con
+ * `buildRecurrenceRule` / `parseRecurrenceRule`.
+ *
+ * **Enseña solo lo que hace falta.** Sin frecuencia no hay nada más que
+ * decidir, y los días de la semana solo aparecen en la frecuencia semanal: un
+ * formulario que enseña siempre los siete campos obliga a leerlos siempre.
+ *
+ * Es **controlado**, como el resto de campos del sistema: recibe `value` y
+ * llama a `onValueChange` con el valor entero. `null` es «no se repite».
+ */
+export declare function RecurrenceField({ value, onValueChange, id: idProp, legend, disabled, size, locale, weekStartsOn, minDate, maxDate, className, frequencyLabel, weekdaysLabel, endLabel, }: RecurrenceFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/molecules/RecurrenceField/recurrenceRule.d.ts

@@ -0,0 +1,62 @@
+/**
+ * El subconjunto de `RRULE` (RFC 5545) que el editor expone, en las dos
+ * direcciones: de la forma que edita una persona a la cadena que guarda el
+ * servidor, y al revés.
+ *
+ * **Es un trozo de gramática, no una librería de calendario.** No expande
+ * ocurrencias, no sabe de husos y no valida contra un calendario: eso lo hace
+ * quien guarda la regla, del lado del servidor, con la librería que use. Aquí
+ * solo se escribe y se lee la cadena, que es lo que un campo de formulario
+ * necesita — y por eso el sistema de diseño no se trae ninguna dependencia
+ * para esto.
+ *
+ * Lo que se cubre: `FREQ`, `INTERVAL`, `BYDAY` (en la frecuencia semanal) y el
+ * final, que puede ser ninguno, `UNTIL` o `COUNT`. Lo que no se cubre
+ * —`BYMONTHDAY`, `BYSETPOS`, `WKST`, excepciones— se conserva al leer y se
+ * vuelve a escribir tal cual, para que editar la repetición de un evento no
+ * destruya lo que el editor no sabe enseñar.
+ */
+/** Cada cuánto se repite. */
+export type RecurrenceFrequency = 'daily' | 'weekly' | 'monthly' | 'yearly';
+/** Un día de la semana, con el código de dos letras de la especificación. */
+export type RecurrenceWeekday = 'MO' | 'TU' | 'WE' | 'TH' | 'FR' | 'SA' | 'SU';
+/** Los siete días, de lunes a domingo. */
+export declare const RECURRENCE_WEEKDAYS: RecurrenceWeekday[];
+/** Cuándo deja de repetirse. */
+export type RecurrenceEnd = {
+    type: 'never';
+} | {
+    type: 'until';
+    date: Date | null;
+} | {
+    type: 'count';
+    count: number;
+};
+/** La repetición, tal y como la edita una persona. */
+export interface RecurrenceValue {
+    frequency: RecurrenceFrequency;
+    /** Cada cuántos periodos. 1 o más. */
+    interval: number;
+    /** Días elegidos, solo en la frecuencia semanal. */
+    weekdays: RecurrenceWeekday[];
+    end: RecurrenceEnd;
+    /**
+     * Las partes de la regla que el editor no enseña (`BYMONTHDAY`, `WKST`…),
+     * en el orden en que venían. Se conservan al leer y se vuelven a escribir:
+     * editar la repetición no destruye lo que no se ve.
+     */
+    rest?: string[];
+}
+/** La repetición de partida al activarla: cada semana, sin fin. */
+export declare const DEFAULT_RECURRENCE: RecurrenceValue;
+/**
+ * La cadena `RRULE` de una repetición. `null` —«no se repite»— da la cadena
+ * vacía, que es lo que se guarda cuando no hay regla.
+ */
+export declare function buildRecurrenceRule(value: RecurrenceValue | null): string;
+/**
+ * La repetición que describe una cadena `RRULE`. Una cadena vacía, ausente o
+ * sin `FREQ` reconocible es **«no se repite»** (`null`): una regla sin
+ * frecuencia no es una regla.
+ */
+export declare function parseRecurrenceRule(rule: string | null | undefined): RecurrenceValue | null;

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

@@ -0,0 +1,77 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type StepMarkerTone } from '../../atoms/StepMarker/StepMarker';
+import type { IconName } from '../../atoms/Icon/Icon';
+import './Timeline.css';
+/**
+ * Los dos textos del historial, y los dos son **cromo**: cómo se llama la
+ * lista y cómo se dice, para quien no ve la marca rellena, que un hito es el
+ * estado vigente. Ni las fechas ni los nombres pasan por aquí — son contenido,
+ * y los escribe quien pasa los hitos.
+ */
+export interface TimelineMessages {
+    /** Nombre accesible del historial cuando la pantalla no le da uno propio. */
+    label: string;
+    /** Lo que se lee tras el título del hito vigente: «estado actual». */
+    current: string;
+}
+/** El tono de la marca: los mismos ocho que `StepMarker`, sin traducción. */
+export type TimelineTone = StepMarkerTone;
+/** Un hito del historial: un cambio de estado, con su fecha y quien lo firmó. */
+export interface TimelineItem {
+    id: string;
+    /** El estado al que se pasó: «En revisión», «Contratado». */
+    title: ReactNode;
+    /**
+     * Cuándo pasó, **ya escrito** por quien lo pasa («14 de marzo, 09:12»). El
+     * historial no formatea fechas: eso es `Intl` y sabe de idiomas y de husos,
+     * cosas que un sistema de diseño no tiene por qué saber.
+     */
+    date?: ReactNode;
+    /** Quién lo hizo. */
+    author?: ReactNode;
+    /** La nota que se dejó al cambiar de estado. */
+    note?: ReactNode;
+    /** Tono de la marca. Default `neutral`. */
+    tone?: TimelineTone;
+    /** Icono dentro de la marca, en vez del punto. */
+    icon?: IconName;
+    /**
+     * El estado vigente. Pinta la marca rellena de su tono y añade el texto de
+     * `timeline.current` para quien no la ve. Como mucho uno: si vienen varios,
+     * el historial pinta todos (no es él quien decide qué expediente es
+     * coherente), pero quien lo usa marca el último.
+     */
+    current?: boolean;
+    /** Acciones del hito (un enlace al documento, un botón de deshacer). */
+    actions?: ReactNode;
+}
+export interface TimelineProps extends Omit<ComponentPropsWithoutRef<'ol'>, 'children'> {
+    /** Los hitos, en el orden en que se pintan. */
+    items: TimelineItem[];
+    /**
+     * Nombre accesible del historial. **Sin default**: sin él, sale de
+     * `timeline.label` del `BrandMessagesProvider`.
+     */
+    label?: string;
+    /**
+     * Lo que se lee tras el título del hito vigente. **Sin default**: sin él,
+     * sale de `timeline.current`. Solo se lee cuando hay un hito `current`.
+     */
+    currentLabel?: string;
+    /** Talla de la marca. Default `sm`: el historial es cromo, no un asistente. */
+    markerSize?: 'sm' | 'md';
+}
+/**
+ * El historial vertical de un expediente: un hito por cambio de estado, con su
+ * fecha, quien lo firmó y la nota que dejó. Es lo que lleva la ficha de un
+ * ticket y la de una candidatura.
+ *
+ * **No ordena ni interpreta.** Pinta los hitos en el orden en que llegan —el
+ * más reciente arriba o abajo, lo decide quien lo usa— y no deduce cuál es el
+ * estado vigente: se marca con `current`.
+ *
+ * La lista es una `<ol>`, así que el orden y el número de hitos se anuncian
+ * solos; el carril y el color de la marca no son la única señal, porque el
+ * estado va escrito en el título de cada hito.
+ */
+export declare const Timeline: import("react").ForwardRefExoticComponent<TimelineProps & import("react").RefAttributes<HTMLOListElement>>;

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

@@ -0,0 +1,104 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import './OrgChart.css';
+/**
+ * Los textos del organigrama. Todo es **cromo**: cómo se llama el lienzo, cómo
+ * se nombran los dos grupos de personas de una tarjeta, cómo se dice que no
+ * hay nadie en uno de ellos y los cuatro nombres de los controles. Los nombres
+ * de departamentos y personas son contenido y los escribe quien los pasa.
+ */
+export interface OrgChartMessages {
+    /** Nombre accesible del lienzo. */
+    label: string;
+    /** Rótulo del grupo de responsables de una tarjeta. */
+    managers: string;
+    /** Rótulo del grupo de personas de una tarjeta. */
+    members: string;
+    /** Cómo se dice que un departamento no tiene responsable. */
+    noManagers: string;
+    /** Cómo se dice que un departamento no tiene equipo. */
+    noMembers: string;
+    /** Nombre accesible del botón que pliega un departamento. */
+    collapse: (name: string) => string;
+    /** Nombre accesible del botón que lo despliega. */
+    expand: (name: string) => string;
+    /** Nombre accesible del botón de acercar. */
+    zoomIn: string;
+    /** Nombre accesible del botón de alejar. */
+    zoomOut: string;
+    /** Nombre accesible del botón que devuelve el zoom a su sitio. */
+    zoomReset: string;
+}
+/** Una persona dentro de un departamento. */
+export interface OrgChartPerson {
+    id: string;
+    /** El nombre, en texto plano. */
+    name: string;
+    /** Cómo se pinta el nombre. Sin ella, el propio `name`. Admite un enlace a la ficha. */
+    label?: ReactNode;
+    /** El puesto, bajo el nombre. */
+    role?: ReactNode;
+}
+/** Un departamento: su gente y los departamentos que cuelgan de él. */
+export interface OrgChartNode {
+    id: string;
+    /** El nombre, **en texto plano**: con él se nombra el botón de plegado. */
+    name: string;
+    /** Cómo se pinta el nombre. Sin ella, el propio `name`. */
+    label?: ReactNode;
+    /** Quien responde del departamento. */
+    managers?: OrgChartPerson[];
+    /** El resto del equipo. */
+    members?: OrgChartPerson[];
+    /** Los departamentos que cuelgan de este. */
+    children?: OrgChartNode[];
+}
+export interface OrgChartProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Las raíces del árbol. Normalmente una, pero admite varias. */
+    nodes: OrgChartNode[];
+    /** Los departamentos plegados (controlado). */
+    collapsed?: string[];
+    /** Los departamentos plegados al montar (no controlado). */
+    defaultCollapsed?: string[];
+    /** Se llama con la lista entera de plegados. */
+    onCollapsedChange?: (collapsed: string[]) => void;
+    /** El zoom (controlado). 1 es el tamaño natural. */
+    zoom?: number;
+    /** El zoom al montar (no controlado). Default 1. */
+    defaultZoom?: number;
+    /** Se llama con el zoom nuevo. */
+    onZoomChange?: (zoom: number) => void;
+    /** Zoom mínimo. Default 0.5. */
+    minZoom?: number;
+    /** Zoom máximo. Default 1.5. */
+    maxZoom?: number;
+    /** Cuánto cambia el zoom en cada paso. Default 0.1. */
+    zoomStep?: number;
+    /** Pinta los tres botones de zoom. Default `true`. */
+    showZoom?: boolean;
+    /** Lo que va al final de la barra de controles, junto a los botones de zoom. */
+    toolbar?: ReactNode;
+    /** Enseña los grupos de personas dentro de cada tarjeta. Default `true`. */
+    showPeople?: boolean;
+    /** Nombre accesible del lienzo. Sin él, sale de `orgChart.label`. */
+    label?: string;
+    /** Rótulo del grupo de responsables. Sin él, sale de `orgChart.managers`. */
+    managersLabel?: string;
+    /** Rótulo del grupo de equipo. Sin él, sale de `orgChart.members`. */
+    membersLabel?: string;
+}
+/**
+ * El organigrama de departamentos: quién responde de cada uno, quién está
+ * dentro y de quién cuelga. Plegable, con zoom y con desplazamiento.
+ *
+ * **Es un árbol de listas anidadas, no un lienzo de dibujo.** Las líneas las
+ * pintan pseudoelementos, así que el orden del documento y el del árbol son el
+ * mismo: un lector de pantalla recorre la jerarquía de verdad, no una
+ * alternativa en texto escrita aparte. El zoom usa `zoom` y no `transform`
+ * porque `zoom` cambia la maqueta: el lienzo sigue sabiendo cuánto mide lo que
+ * tiene dentro, y el desplazamiento sigue llegando al final.
+ *
+ * **No coloca nada**: no hay motor de disposición, ni aristas, ni posiciones.
+ * Un árbol se dibuja centrando cada nodo sobre sus hijos, que es lo que hace
+ * el CSS solo.
+ */
+export declare const OrgChart: import("react").ForwardRefExoticComponent<OrgChartProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,120 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import './PlanningGrid.css';
+/**
+ * Los textos de la rejilla. Todo es **cromo**: cómo se llama la tabla, cómo se
+ * nombra el campo de cada cruce y cómo se llaman las tres filas del pie. Los
+ * nombres de filas y columnas son contenido y los escribe quien los pasa; las
+ * horas son formato y salen de `locale`.
+ */
+export interface PlanningGridMessages {
+    /** Nombre accesible de la rejilla cuando la pantalla no le da uno propio. */
+    label: string;
+    /** Nombre accesible del campo de un cruce, a partir de los dos ejes. */
+    cellLabel: (row: string, column: string) => string;
+    /** Etiqueta de la columna de totales de fila. */
+    rowTotal: string;
+    /** Etiqueta de la fila de totales de columna. */
+    columnTotal: string;
+    /** Etiqueta de la fila de horas disponibles. */
+    capacity: string;
+    /** Etiqueta de la fila de resto (disponible − asignado). */
+    remaining: string;
+    /** Lo que se lee tras un resto negativo: hay más horas asignadas que disponibles. */
+    over: string;
+}
+/** Una fila: un proyecto, una persona. Lo que se planifica. */
+export interface PlanningGridRow {
+    id: string;
+    /** El nombre, **en texto plano**: con él se nombra el campo de cada cruce. */
+    name: string;
+    /** Cómo se pinta el nombre. Sin ella, el propio `name`. Admite un enlace. */
+    label?: ReactNode;
+    /** La fila entera no se edita. */
+    readOnly?: boolean;
+}
+/** Una columna: una semana, un día, una persona. Contra qué se planifica. */
+export interface PlanningGridColumn {
+    key: string;
+    /** El nombre, **en texto plano**: con él se nombra el campo de cada cruce. */
+    name: string;
+    /** Cómo se pinta el nombre. Sin ella, el propio `name`. */
+    label?: ReactNode;
+    /** Segunda línea del encabezado: el rango de fechas de la semana, la fecha del día. */
+    sublabel?: ReactNode;
+    /** Horas disponibles de la columna. Sin ella, la columna no tiene tope. */
+    capacity?: number;
+    /** La columna entera no se edita: una semana pasada, un día no laborable. */
+    readOnly?: boolean;
+    /** La columna en curso: se recuadra. */
+    current?: boolean;
+}
+/** Un cruce con horas. Lo que no venga en la lista vale cero. */
+export interface PlanningGridCell {
+    rowId: string;
+    columnKey: string;
+    /** Las horas. `null` es lo mismo que cero a efectos de suma, y se pinta vacío. */
+    value: number | null;
+    /** Este cruce en concreto no se edita. */
+    readOnly?: boolean;
+    /** El cambio está en vuelo: la celda se atenúa. */
+    pending?: boolean;
+    /** Lo que falló al guardar este cruce. Pone el campo en error y se anuncia. */
+    error?: string;
+}
+export interface PlanningGridProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    rows: PlanningGridRow[];
+    columns: PlanningGridColumn[];
+    /** Los cruces con horas. Los que falten valen cero. */
+    cells: PlanningGridCell[];
+    /**
+     * Se llama al **confirmar** un cruce —al salir del campo o con Intro—, no en
+     * cada tecla: la rejilla guarda contra un servidor, y una petición por
+     * pulsación no es una rejilla, es una tormenta.
+     */
+    onCellChange?: (rowId: string, columnKey: string, value: number) => void;
+    /** La rejilla entera se mira, no se edita. Sin `onCellChange` ya lo está. */
+    readOnly?: boolean;
+    /** Encabezado de la columna de filas («Proyecto», «Persona»). */
+    rowHeader?: ReactNode;
+    /** Columna de totales por fila, al final. Default `true`. */
+    showRowTotals?: boolean;
+    /** Fila de totales por columna, al pie. Default `true`. */
+    showColumnTotals?: boolean;
+    /**
+     * Fila de horas disponibles al pie. Default `false`, y solo sale si alguna
+     * columna declara `capacity`: repetir el tope en cada columna solo hace
+     * falta cuando cambia de una a otra.
+     */
+    showCapacity?: boolean;
+    /**
+     * Fila de resto (disponible − asignado) al pie. Default `true`, y solo sale
+     * si alguna columna declara `capacity`.
+     */
+    showRemaining?: boolean;
+    /** Tope de horas de un cruce. Default 999. */
+    max?: number;
+    /** Locale del formato de horas. Default `'es-ES'`. */
+    locale?: string;
+    /** Cómo se escriben unas horas. Default: la cifra con `Intl` y una `h`. */
+    formatHours?: (hours: number) => string;
+    /** Talla de los campos. Default `sm`: son celdas de una rejilla. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Nombre accesible de la rejilla. Sin él, sale de `planningGrid.label`. */
+    label?: string;
+    /** Nombre accesible del campo de un cruce. Sin él, sale de `planningGrid.cellLabel`. */
+    cellLabel?: (row: string, column: string) => string;
+}
+/**
+ * La rejilla editable de horas: fila × columna —persona por semana, proyecto
+ * por día—, con los totales de cada eje y la disponibilidad de cada columna.
+ *
+ * **No guarda ni valida contra nada.** Llama a `onCellChange` al confirmar un
+ * cruce y espera que le vuelvan a pasar las celdas; el estado en vuelo y el
+ * error de guardado viajan **en la propia celda** (`pending`, `error`), que es
+ * lo que permite que dos cruces estén en vuelo a la vez sin que la rejilla
+ * tenga que llevar la cuenta.
+ *
+ * Los totales sí los suma ella: son la suma de lo que tiene delante, y no hay
+ * dos formas de hacerla.
+ */
+export declare const PlanningGrid: import("react").ForwardRefExoticComponent<PlanningGridProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/_types/organisms/PlanningGrid/planningHours.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Leer unas horas escritas a mano, aparte del componente para poder probarlo
+ * sin montar nada.
+ */
+/**
+ * Las horas que dice un texto. Admite **coma y punto** decimal —en castellano
+ * se escribe «7,5»—, entiende el campo vacío como cero y devuelve `null`
+ * cuando lo escrito no son unas horas: un negativo tampoco lo es.
+ */
+export declare function parsePlanningHours(text: string): number | null;