@sfperusacdev/sf-ui 0.3.0 → 0.3.1

package/dist/types/src/components/cards/Badge.d.ts

@@ -10,5 +10,11 @@ export type BadgeProps = {
     /** Icono antes del label (`.sf-badge__icon`). Compatible con `dot`: si vienen ambos, primero el punto y
      * luego el icono. Solo aplica a `shape="pill"` (el círculo es de un solo carácter). */
     icon?: ReactNode;
+    /** "solid": relleno del color con texto claro y esquinas de 6px (estados en tablas densas). Por defecto
+     * "soft", el acabado publicado. */
+    appearance?: BadgeAppearance;
+    /** Color propio para estados sin variante (ej. un estado de un flujo propio). Gana sobre `variant`. */
+    color?: string;
 };
-export declare const Badge: ({ label, variant, dot, size, shape, className, icon, }: BadgeProps) => import('react').JSX.Element;
+export type BadgeAppearance = "soft" | "solid";
+export declare const Badge: ({ label, variant, dot, size, shape, className, icon, appearance, color, }: BadgeProps) => import('react').JSX.Element;

package/dist/types/src/components/cards/MetricBar.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/cards/MetricBar.d.ts

@@ -1,17 +1,19 @@
-import { MetricBarFootnote, MetricBarItem } from './types';
+import { MetricBarFootnote, MetricBarItem, MetricBarLayout } from './types';
 type MetricBarRowProps = {
     item: MetricBarItem;
     small?: boolean;
+    layout?: MetricBarLayout;
 };
-export declare const MetricBarRow: ({ item, small }: MetricBarRowProps) => import('react').JSX.Element;
+export declare const MetricBarRow: ({ item, small, layout }: MetricBarRowProps) => import('react').JSX.Element;
 type MetricBarListProps = {
     metrics: MetricBarItem[];
     small?: boolean;
+    layout?: MetricBarLayout;
     className?: string;
     /** Nota destacada debajo de las barras (ej. "56% con menos de 3 meses"), en una caja tintada.
      * Por defecto no se muestra nada (acabado actual). No es una conclusión calculada — el texto es
      * responsabilidad de quien arma los datos. */
     footnote?: MetricBarFootnote;
 };
-export declare const MetricBarList: ({ metrics, small, className, footnote }: MetricBarListProps) => import('react').JSX.Element;
+export declare const MetricBarList: ({ metrics, small, layout, className, footnote }: MetricBarListProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/cards/MetricBar.disposiciones.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/cards/ProfileCard.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { BadgeVariant } from './types';
+export type ProfileCardFact = {
+    key: string;
+    icon?: ReactNode;
+    label: ReactNode;
+};
+export type ProfileCardProps = {
+    name: string;
+    role?: string;
+    /** Código visible de la persona (ej. su número de empleado). */
+    code?: string;
+    photoSrc?: string;
+    photoAlt?: string;
+    /** Estado superpuesto sobre la foto, abajo a la izquierda. */
+    status?: {
+        label: string;
+        variant?: BadgeVariant;
+    };
+    /** Con `onEdit` aparece el botón de lápiz sobre la foto. */
+    onEdit?: () => void;
+    editLabel?: string;
+    facts?: ProfileCardFact[];
+    quote?: ReactNode;
+    className?: string;
+};
+export declare const ProfileCard: ({ name, role, code, photoSrc, photoAlt, status, onEdit, editLabel, facts, quote, className, }: ProfileCardProps) => import('react').JSX.Element;

package/dist/types/src/components/cards/ProfileCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/cards/QuoteCard.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type QuoteCardProps = {
+    quote: ReactNode;
+    author?: ReactNode;
+    /** Adorno decorativo abajo a la derecha (ej. una hoja). */
+    icon?: ReactNode;
+    /** Foto de fondo, oscurecida para que el texto se lea. */
+    backgroundSrc?: string;
+    className?: string;
+};
+export declare const QuoteCard: ({ quote, author, icon, backgroundSrc, className }: QuoteCardProps) => import('react').JSX.Element;

package/dist/types/src/components/cards/QuoteCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/cards/index.d.ts

@@ -1,5 +1,5 @@
 export { Badge } from './Badge';
-export type { BadgeProps } from './Badge';
+export type { BadgeAppearance, BadgeProps } from './Badge';
 export { badgeClassName, badgeDotClassName } from './badgeClassName';
 export { KPICard, KPIGrid } from './KPICard';
 export type { KPICardAccentTone, KPICardProgress, KPICardLayout, KPICardVariant, KPICardIconStyle, KPICardSize, KPICardDensity, KPICardTrendDirection, KPICardValueFormat, KPICardFormatOptions, KPICardSparkline, KPICardProps, } from './KPICard';
@@ -10,8 +10,12 @@ export type { QuickActionTileProps, QuickActionGridProps } from './QuickActionTi
 export { MetricBarRow, MetricBarList } from './MetricBar';
 export { EntityCard, EntityCardGrid } from './EntityCard';
 export type { EntityCardProps } from './EntityCard';
+export { ProfileCard } from './ProfileCard';
+export type { ProfileCardFact, ProfileCardProps } from './ProfileCard';
+export { QuoteCard } from './QuoteCard';
+export type { QuoteCardProps } from './QuoteCard';
 export { RecommendationCard } from './RecommendationCard';
 export type { RecommendationCardProps } from './RecommendationCard';
 export { ModuleCard, ModuleCardGrid } from './ModuleCard';
 export type { ModuleCardProps } from './ModuleCard';
-export type { BadgeVariant, BadgeSize, BadgeShape, MetricBarTone, MetricBarThresholds, MetricBarItem, MetricBarFootnote, SplitBarTone, SplitBarSegment, EntityCardStatus, EntityCardVariant, RecommendationPriority, RecommendationImpact, ModuleCardVariant, ModuleCardDensity, } from './types';
+export type { BadgeVariant, BadgeSize, BadgeShape, MetricBarTone, MetricBarThresholds, MetricBarItem, MetricBarLayout, MetricBarFootnote, SplitBarTone, SplitBarSegment, EntityCardStatus, EntityCardVariant, RecommendationPriority, RecommendationImpact, ModuleCardVariant, ModuleCardDensity, } from './types';

package/dist/types/src/components/cards/types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 export type BadgeVariant = "neutral" | "primary" | "success" | "warning" | "danger" | "info";
 export type BadgeSize = "sm" | "md";
 export type BadgeShape = "pill" | "circle";
@@ -37,7 +38,25 @@ export type MetricBarItem = {
     /** Texto a mostrar a la derecha en vez del autogenerado (ej. un conteo real: "442"). NUNCA es lo que
      * dimensiona la barra — eso siempre es `value` (crudo si hay `max`, 0-100 si no lo hay). */
     valueLabel?: string;
+    /** Color CSS de categoría (ej. `categoryColor(i)`) para el relleno de la barra y el ícono. Gana sobre `tone` y
+     * `thresholds` solo en esas partes gráficas: etiqueta, descripción y valor siguen con los colores de texto del tema. */
+    color?: string;
+    /** Ícono decorativo antes de la etiqueta. */
+    icon?: ReactNode;
+    /** Texto debajo de la etiqueta (ej. "Quién es"). Parte línea; no se trunca. */
+    description?: ReactNode;
+    /** Texto corto antes de la etiqueta, en el color de la barra (ej. «01.»). Solo en las disposiciones `tile` e
+     * `inline`. */
+    prefix?: string;
+    /** Contenido tras el valor (ej. un ícono de estado). Solo en las disposiciones `tile` e `inline`. */
+    trailing?: ReactNode;
+    /** Solo en `tile` e `inline`: la fila es un botón. */
+    onClick?: () => void;
+    selected?: boolean;
 };
+/** `default`: etiqueta y valor arriba, barra debajo (publicado). `tile`: baldosa con ícono en círculo, etiqueta,
+ * descripción y barra con el valor a su derecha. `inline`: etiqueta, barra gruesa y valor en una sola fila. */
+export type MetricBarLayout = "default" | "tile" | "inline";
 export type MetricBarFootnote = {
     text: string;
     tone?: MetricBarTone;

package/dist/types/src/components/charts/Chart.colores.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/charts/Chart.d.ts

@@ -1,3 +1,3 @@
 import { ChartProps } from './types';
 export type { ChartProps } from './types';
-export declare const Chart: ({ type, data, xKey, series, height, ariaLabel, emptyMessage, className, showGrid, showTooltip, showLegend, orientation, stacking, unit, yDomain, xAxisFormat, yAxisFormat, tooltipFormat, valueLabelFormat, showValueLabels, referenceLines, onDataPointClick, }: ChartProps) => import('react').JSX.Element;
+export declare const Chart: ({ type, data, xKey, series, height, ariaLabel, emptyMessage, className, showGrid, showTooltip, showLegend, orientation, stacking, unit, yDomain, xAxisFormat, yAxisFormat, tooltipFormat, valueLabelFormat, showValueLabels, referenceLines, onDataPointClick, stackRadius, }: ChartProps) => import('react').JSX.Element;

package/dist/types/src/components/charts/ChartLegend.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/charts/ChartLegend.d.ts

@@ -1,14 +1,35 @@
+import { ReactNode } from 'react';
 export type ChartLegendItem = {
+    /** Identidad del ítem, única en `items`. Por defecto, `label`. */
+    key?: string;
     label: string;
     /** Color CSS (token o hex), el mismo de la serie del gráfico. */
     color: string;
+    /** Cifra que acompaña al nombre (ej. "420.530" o "88%"). Sin ella, el ítem es solo muestra y nombre. */
+    value?: ReactNode;
+    /** Ícono decorativo en lugar de la muestra de color (ej. una verificación en los indicadores de calidad). */
+    icon?: ReactNode;
 };
+export type ChartLegendOrientation = "inline" | "vertical";
 export type ChartLegendProps = {
     items: ChartLegendItem[];
+    /** "inline" (por defecto): una línea que parte entre ítems. "vertical": una fila por ítem con la cifra alineada a la
+     * derecha, para leyendas con valores (ej. 10 dimensiones junto a una dona). */
+    orientation?: ChartLegendOrientation;
+    /** Solo en vertical: 2 reparte los ítems en dos columnas (de arriba abajo, luego la derecha) que pasan a una cuando
+     * el ancho no alcanza. Por defecto 1. */
+    columns?: 1 | 2;
+    /** Con `columns={2}`: ancho mínimo de cada columna antes de pasar a una sola (longitud CSS). Por defecto 13rem. */
+    columnMinWidth?: string;
+    /** Forma de la muestra de color. Por defecto "square". */
+    swatchShape?: "square" | "circle";
+    /** Con `onSelect` cada ítem es un botón (aria-pressed según `selectedKey`); recibe `key ?? label`. */
+    onSelect?: (key: string) => void;
+    selectedKey?: string;
     className?: string;
 };
 /**
  * Leyenda compacta en una línea, para la cabecera de una tarjeta (`DashboardCard.headerAction`) cuando el gráfico va
  * con `showLegend={false}`: deja el alto del gráfico para los datos.
  */
-export declare const ChartLegend: ({ items, className }: ChartLegendProps) => import('react').JSX.Element;
+export declare const ChartLegend: ({ items, orientation, columns, columnMinWidth, swatchShape, onSelect, selectedKey, className, }: ChartLegendProps) => import('react').JSX.Element;

package/dist/types/src/components/charts/index.d.ts

@@ -1,7 +1,7 @@
 export { Chart } from './Chart';
 export type { ChartProps } from './Chart';
 export { ChartLegend } from './ChartLegend';
-export type { ChartLegendItem, ChartLegendProps } from './ChartLegend';
+export type { ChartLegendItem, ChartLegendOrientation, ChartLegendProps } from './ChartLegend';
 export { Sparkline } from './Sparkline';
 export { DiagnosticRadar } from './DiagnosticRadar';
 export { DeviationBand } from './DeviationBand';

package/dist/types/src/components/charts/types.d.ts

@@ -16,6 +16,9 @@ export type ChartSeries = {
     /** Id de grupo de apilado explícito, para mezclar series apiladas y sueltas en un mismo chart.
      * Si se omite y `stacking` es "stacked"/"stacked-100", todas las series comparten un solo stack. */
     stackId?: string;
+    /** Solo en `line`: un color por punto, en el orden de `data`. Los puntos toman su color y la línea pasa por ellos
+     * en degradado. */
+    pointColors?: string[];
 };
 export type ChartDataPoint = Record<string, string | number | null | undefined>;
 /** Formatea un valor numérico de un chart (eje, tooltip o label de barra). `key` es la key de la
@@ -67,6 +70,8 @@ export type BaseChartProps = {
      * (comportamiento de Recharts: no es un hit-test exacto de la barra/punto individual, es el punto
      * activo del eje de categorías en esa posición). `series` es la primera serie definida, como referencia. */
     onDataPointClick?: (point: ChartDataPoint, series: ChartSeries) => void;
+    /** Barras apiladas: "all" (por defecto) redondea cada tramo; "top" solo el extremo de la pila. */
+    stackRadius?: "all" | "top";
 };
 export type ChartProps = BaseChartProps & {
     type: ChartType;

package/dist/types/src/components/dashboard/DonutGauge.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/DonutGauge.d.ts

@@ -14,9 +14,13 @@ export type DonutGaugeProps = {
     showValue?: boolean;
     /** Grosor del anillo. Se acota a un quinto del diámetro para que el centro siempre tenga hueco. */
     strokeWidth?: number;
+    /** Trazo en degradado del primer color al segundo (gana sobre `color` y los umbrales). */
+    gradient?: [string, string];
+    /** Color de la etiqueta bajo la dona (ej. una calificación en verde). */
+    labelColor?: string;
     className?: string;
 };
-export declare const DonutGauge: ({ value, label, sublabel, size, color, thresholds, inverse, showValue, strokeWidth, className, }: DonutGaugeProps) => import('react').JSX.Element;
+export declare const DonutGauge: ({ value, label, sublabel, size, color, thresholds, inverse, showValue, strokeWidth, gradient, labelColor, className, }: DonutGaugeProps) => import('react').JSX.Element;
 export type DonutGaugeRowItem = Omit<DonutGaugeProps, "className">;
 type DonutGaugeRowProps = {
     gauges: DonutGaugeRowItem[];

package/dist/types/src/components/dashboard/DonutGauge.degradado.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/MetricTile.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export type MetricTileLayout = "leading" | "centered";
+export type MetricTileProps = {
+    label: ReactNode;
+    value: ReactNode;
+    sublabel?: ReactNode;
+    /** Rótulo pequeño encima de todo (ej. «Estado actual»). */
+    eyebrow?: ReactNode;
+    icon?: ReactNode;
+    /** Color de categoría o de tono: tiñe el fondo, el borde y el ícono. Por defecto `--sf-accent`. */
+    color?: string;
+    /** Color de la cifra. Por defecto, en `leading` el mismo `color`; en `centered`, `--sf-success`. */
+    valueColor?: string;
+    /** `leading`: ícono a la izquierda, cifra arriba y etiqueta debajo. `centered`: ícono arriba, etiqueta y cifra
+     * centradas. */
+    layout?: MetricTileLayout;
+    /** Solo en `centered`: "value-first" pone la cifra antes de la etiqueta (ej. tipos de archivo). */
+    order?: "label-first" | "value-first";
+    /** Con `onClick` la baldosa es un botón (aria-pressed según `selected`). */
+    onClick?: () => void;
+    selected?: boolean;
+    className?: string;
+};
+export declare const MetricTile: ({ label, value, sublabel, eyebrow, icon, color, valueColor, layout, order, onClick, selected, className, }: MetricTileProps) => import('react').JSX.Element;

package/dist/types/src/components/dashboard/MetricTile.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/Seleccion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/StageFlow.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/StageFlow.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { BadgeVariant } from '../cards/types';
+export type StageFlowEffect = {
+    label: string;
+    variant?: BadgeVariant;
+};
+export type StageFlowItem = {
+    /** Identidad de la etapa, única en `items`. Es la que recibe `onSelect`. */
+    key: string;
+    title: string;
+    /** Rótulo superior (ej. una fecha). */
+    eyebrow?: string;
+    icon?: ReactNode;
+    /** Cifra grande de la etapa (ej. un conteo de un embudo). */
+    value?: string | number;
+    note?: string;
+    /** Efecto de la etapa (ej. "+ Competencia"), pintado con `Badge`. */
+    effect?: StageFlowEffect;
+    /** Color de categoría de la etapa (borde y ícono). Por defecto, la paleta de categorías en orden. */
+    color?: string;
+};
+export type StageFlowProps = {
+    items: StageFlowItem[];
+    /** Etapa seleccionada, controlada por el host. Una clave que no existe no marca nada. */
+    selectedKey?: string;
+    /** Pide seleccionar una etapa (no significa abrirla). Sin él no hay controles. */
+    onSelect?: (key: string) => void;
+    ariaLabel?: string;
+    emptyMessage?: string;
+    /** `card` (por defecto): tarjetas con borde superior del color. `ring`: sin tarjeta; ícono en anillo grande con halo,
+     * rótulo en el color, título centrado y el efecto como pastilla rellena del color (su `variant` no se usa). */
+    variant?: StageFlowVariant;
+    /** Ancho mínimo por etapa, en rem, para ir en fila. Por defecto 10 en `card` y 6.5 en `ring`. */
+    minStageWidth?: number;
+    className?: string;
+};
+export type StageFlowVariant = "card" | "ring";
+/**
+ * Etapas en tarjetas unidas por flechas, en el orden recibido. La flecha es decorativa y solo dice «la siguiente en
+ * este orden»: no es tiempo, causa ni avance (eso es `Stepper`). En fila si el contenedor da al menos 10rem por etapa;
+ * si no, en columna.
+ */
+export declare const StageFlow: ({ items, selectedKey, onSelect, ariaLabel, emptyMessage, variant, minStageWidth, className, }: StageFlowProps) => import('react').JSX.Element;

package/dist/types/src/components/dashboard/StageFlow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/StateChain.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+export type StateChainItem = {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    /** Color propio del estado. Por defecto, la paleta de categorías en orden. */
+    color?: string;
+    /** Texto bajo el estado (ej. «Desde 12 Mar 2021»). */
+    caption?: ReactNode;
+};
+/** `dot`: círculo relleno con el nombre debajo. `ring`: anillo grande con ícono y nombre dentro. */
+export type StateChainVariant = "dot" | "ring";
+export type StateChainProps = {
+    items: StateChainItem[];
+    /** Estado actual: se marca con `aria-current` y, en `ring`, con una insignia de verificación. */
+    currentKey?: string;
+    variant?: StateChainVariant;
+    /** Con `onSelect` cada estado es un botón (aria-pressed según `selectedKey`). */
+    onSelect?: (key: string) => void;
+    selectedKey?: string;
+    ariaLabel?: string;
+    className?: string;
+};
+/**
+ * Cadena de estados (máquina de estados): cada estado con su color y una flecha hacia el siguiente. No es
+ * un proceso con pasos completados (para eso, `Stepper`).
+ */
+export declare const StateChain: ({ items, currentKey, variant, onSelect, selectedKey, ariaLabel, className, }: StateChainProps) => import('react').JSX.Element;

package/dist/types/src/components/dashboard/StateChain.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/StateChain.vertical.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/Stepper.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/Stepper.d.ts

@@ -8,7 +8,9 @@ type StepperProps = {
     /** Subrayado de acento en el paso activo (wizard CEO / transporte). */
     variant?: StepperVariant;
     onStepClick?: (key: string) => void;
+    /** Nombre accesible de la lista de pasos. Por defecto "Progreso". */
+    ariaLabel?: string;
     className?: string;
 };
-export declare const Stepper: ({ steps, activeKey, orientation, size, variant, onStepClick, className, }: StepperProps) => import('react').JSX.Element;
+export declare const Stepper: ({ steps, activeKey, orientation, size, variant, onStepClick, ariaLabel, className, }: StepperProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/dashboard/Stepper.icono.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/index.d.ts

@@ -4,6 +4,10 @@ export { TramoCard } from './TramoCard';
 export type { TramoCardTipo } from './TramoCard';
 export { StatCard } from './StatCard';
 export type { StatCardSize } from './StatCard';
+export { StateChain } from './StateChain';
+export type { StateChainItem, StateChainProps, StateChainVariant } from './StateChain';
+export { MetricTile } from './MetricTile';
+export type { MetricTileLayout, MetricTileProps } from './MetricTile';
 export { Calendar } from './Calendar';
 export { MONTH_NAMES, WEEKDAY_LABELS, toLocalYMD, parseYMD, buildMonthGrid } from './calendarUtils';
 export { DonutGauge, DonutGaugeRow } from './DonutGauge';
@@ -37,3 +41,5 @@ export type { DrilldownKPICardProps, DrilldownAlertItem, DrilldownAlertListProps
 export { DetailSection } from './DetailSection';
 export type { DetailSectionProps, DetailSectionRow, DetailSectionTone, DetailSectionDensity } from './DetailSection';
 export type { StepStatus, StepItem, CalendarBadgeVariant, CalendarDayBadge, DonutGaugeSize, DashboardCardVariant, DashboardCardState, EventStatus, EventItem, AlertRowItem, AlertRowSeverity, AlertRowListHeaderLabels, AlertActionItem, AlertDensity, StatBarItem, } from './types';
+export { StageFlow } from './StageFlow';
+export type { StageFlowEffect, StageFlowItem, StageFlowProps, StageFlowVariant } from './StageFlow';

package/dist/types/src/components/dashboard/types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 /** "warning" y "opportunity" son aditivos (ej. cadena de decisiones tipo Domino Flow: un paso puede
  * señalar un riesgo detectado o una oportunidad, no solo "hecho/pendiente/error"). */
 export type StepStatus = "completed" | "active" | "pending" | "error" | "warning" | "opportunity";
@@ -9,6 +10,9 @@ export type StepItem = {
     /** Valor o consecuencia de este paso (ej. "EXCEL", "+20 usuarios") — se pinta junto al label cuando
      * viene. Sin `value`, el render es idéntico al de antes. */
     value?: string;
+    /** Ícono decorativo en lugar del número. El estado se mantiene visible (marca en la esquina para completado, error,
+     * advertencia y oportunidad; anillo para el activo) y se agrega al nombre accesible del paso. */
+    icon?: ReactNode;
 };
 export type CalendarBadgeVariant = "primary" | "warning" | "danger" | "success" | "neutral";
 export type CalendarDayBadge = {

package/dist/types/src/components/display/AuditTimeline.cadena.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/display/AuditTimeline.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/display/AuditTimeline.d.ts

@@ -8,13 +8,19 @@ export type AuditTimelineItem = {
     detail?: ReactNode;
     eventType?: AuditEventType;
     icon?: ReactNode;
+    /** Solo en `variant="chain"`: color del paso. Por defecto, la paleta de categorías en orden. */
+    color?: string;
 };
+/** `default`: historial de movimientos (publicado). `chain`: cadena de pasos con ícono grande en círculo de color,
+ * `actor` como título del paso, `action` y `detail` debajo, la hora a la derecha y una flecha de color entre pasos. */
+export type AuditTimelineVariant = "default" | "chain";
 export type AuditTimelineProps = {
     items: AuditTimelineItem[];
     sectionTitle?: string;
     eventCountLabel?: string;
     ariaLabel?: string;
     emptyMessage?: string;
+    variant?: AuditTimelineVariant;
     className?: string;
 };
-export declare const AuditTimeline: ({ items, sectionTitle, eventCountLabel, ariaLabel, emptyMessage, className, }: AuditTimelineProps) => import('react').JSX.Element;
+export declare const AuditTimeline: ({ items, sectionTitle, eventCountLabel, ariaLabel, emptyMessage, variant, className, }: AuditTimelineProps) => import('react').JSX.Element;

package/dist/types/src/components/display/CheckList.d.ts

@@ -0,0 +1,19 @@
+export type CheckListItem = {
+    key: string;
+    label: string;
+    checked: boolean;
+};
+export type CheckListProps = {
+    items: CheckListItem[];
+    /** `inline` (por defecto): en una fila que pasa de línea si no cabe. `stacked`: una debajo de otra. */
+    layout?: "inline" | "stacked";
+    checkedLabel?: string;
+    uncheckedLabel?: string;
+    /** Con `onSelect` cada condición es un botón (aria-pressed según `selectedKey`). */
+    onSelect?: (key: string) => void;
+    selectedKey?: string;
+    ariaLabel?: string;
+    className?: string;
+};
+/** Lista de solo lectura de condiciones cumplidas o pendientes (no es un control de formulario). */
+export declare const CheckList: ({ items, layout, checkedLabel, uncheckedLabel, onSelect, selectedKey, ariaLabel, className, }: CheckListProps) => import('react').JSX.Element;

package/dist/types/src/components/display/CheckList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/display/MediaGallery.d.ts

@@ -0,0 +1,41 @@
+export type MediaGalleryKind = "image" | "pdf" | "video" | "other";
+export type MediaGalleryItem = {
+    /** Identidad del archivo, única en `items`. El visor la sigue al cambiar `items`. */
+    key: string;
+    kind: MediaGalleryKind;
+    /** Texto alternativo de la imagen (o nombre del archivo si no es imagen). */
+    alt: string;
+    /** Archivo completo. Solo una imagen con `src` se abre en el visor interno. */
+    src?: string;
+    /** Miniatura propia (ej. la primera página de un PDF). Por defecto, el `src` de una imagen. */
+    thumbnailSrc?: string;
+    caption?: string;
+    sublabel?: string;
+};
+export type MediaGalleryProps = {
+    items: MediaGalleryItem[];
+    /** Abre las imágenes con `src` en el visor interno. Por defecto `true`. */
+    viewer?: boolean;
+    /** Abre todo lo que el visor no abre (PDF, vídeo, otros, imágenes sin `src` o todo si `viewer` es `false`). Lo
+     * reemplaza: la galería no hace nada más. Sin él, esos elementos no son accionables. */
+    onItemOpen?: (item: MediaGalleryItem) => void;
+    ariaLabel?: string;
+    viewerTitle?: string;
+    emptyMessage?: string;
+    /** Ancho mínimo de cada miniatura antes de pasar a menos columnas (longitud CSS). Por defecto 8rem. */
+    minThumbnailWidth?: string;
+    className?: string;
+};
+type Devolucion = {
+    clave: string;
+    generacion: number;
+};
+/** Una devolución de foco solo se evalúa con el visor cerrado y si es de la última apertura: una reapertura la descarta. */
+export declare const devolucionVigente: (devolucion: Devolucion | null, generacionVigente: number, visorAbierto: boolean) => devolucion is Devolucion;
+/**
+ * Cuadrícula de miniaturas con visor de imágenes. La galería no descarga ni llama servicios: lo que no abre el visor lo
+ * abre el host con `onItemOpen`. El visor usa `Modal` y su pila (Escape, capas, scroll); el foco lo gestiona la galería.
+ * Contrato completo: doc 184, Anexo B.3.
+ */
+export declare const MediaGallery: ({ items, viewer, onItemOpen, ariaLabel, viewerTitle, emptyMessage, minThumbnailWidth, className, }: MediaGalleryProps) => import('react').JSX.Element;
+export {};

package/dist/types/src/components/display/MediaGallery.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/display/MediaPanel.d.ts

@@ -1,6 +1,7 @@
 import { ImgHTMLAttributes, ReactNode } from 'react';
 export type MediaPanelOverlay = "none" | "gradient-bottom" | "gradient-top" | "dark";
 export type MediaPanelFit = "cover" | "contain";
+export type MediaPanelContentStyle = "default" | "script";
 export type MediaPanelProps = {
     src: string;
     alt: string;
@@ -12,6 +13,8 @@ export type MediaPanelProps = {
     overlay?: MediaPanelOverlay;
     /** Contenido superpuesto (ej. un título editorial) — se ancla abajo a la izquierda por defecto. */
     children?: ReactNode;
+    /** "script" pinta el contenido superpuesto con la letra manuscrita del tema (`--sf-font-script`), en blanco. */
+    contentStyle?: MediaPanelContentStyle;
     rounded?: boolean;
     loading?: "lazy" | "eager";
     /** Se muestra si `src` falla al cargar (ej. un icono o texto). Sin `fallback`, un error de carga
@@ -26,4 +29,4 @@ export type MediaPanelProps = {
  * cercano era `Avatar`, pensado para fotos de perfil pequeñas, y `Carousel`, que es un slideshow
  * genérico sin tratamiento de imagen).
  */
-export declare const MediaPanel: ({ src, alt, aspectRatio, fit, overlay, children, rounded, loading, fallback, className, imgProps, }: MediaPanelProps) => import('react').JSX.Element;
+export declare const MediaPanel: ({ src, alt, aspectRatio, fit, overlay, children, contentStyle, rounded, loading, fallback, className, imgProps, }: MediaPanelProps) => import('react').JSX.Element;

package/dist/types/src/components/display/RecordList.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/display/RecordList.compacta.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/display/RecordList.d.ts

@@ -1,26 +1,39 @@
 import { ReactNode } from 'react';
+import { BadgeAppearance } from '../cards/Badge';
 import { BadgeVariant } from '../cards/types';
 export type RecordListIconTone = "info" | "warning" | "success" | "neutral";
 export type RecordListItemProps = {
     id?: string;
     icon?: ReactNode;
     iconTone?: RecordListIconTone;
+    /** Color propio del ícono (sin caja de fondo, con halo). Gana sobre `iconTone`. */
+    iconColor?: string;
+    /** Columna fija antes del título (ej. la fecha). */
+    meta?: ReactNode;
     title: ReactNode;
     subtitle?: ReactNode;
     badge?: {
         label: string;
         variant?: BadgeVariant;
         dot?: boolean;
+        appearance?: BadgeAppearance;
+        color?: string;
     };
     actions?: ReactNode;
+    /** Con `onClick`, ícono, columna `meta`, título y subtítulo forman un botón (el `badge` y `actions` quedan fuera). */
+    onClick?: () => void;
+    selected?: boolean;
     className?: string;
 };
 export type RecordListProps = {
     title?: ReactNode;
     action?: ReactNode;
     items: RecordListItemProps[];
+    /** "compact": filas de una línea, sin caja propia, separadas por una línea. */
+    density?: RecordListDensity;
     className?: string;
     ariaLabel?: string;
 };
-export declare const RecordListItem: ({ icon, iconTone, title, subtitle, badge, actions, className, }: RecordListItemProps) => import('react').JSX.Element;
-export declare const RecordList: ({ title, action, items, className, ariaLabel }: RecordListProps) => import('react').JSX.Element;
+export type RecordListDensity = "default" | "compact";
+export declare const RecordListItem: ({ icon, iconTone, iconColor, meta, title, subtitle, badge, actions, onClick, selected, className, }: RecordListItemProps) => import('react').JSX.Element;
+export declare const RecordList: ({ title, action, items, density, className, ariaLabel }: RecordListProps) => import('react').JSX.Element;

package/dist/types/src/components/display/Timeline.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/display/Timeline.columnas.test.d.ts

@@ -0,0 +1 @@
+export {};