@sfperusacdev/sf-ui 0.3.0 → 0.3.2

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.srOnly.test.d.ts

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

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 {};

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

@@ -7,11 +7,32 @@ export type TimelineItem = {
     time?: ReactNode;
     status?: TimelineStatus;
     icon?: ReactNode;
+    /** Color propio del marcador (y del tramo de línea que sale de él). Gana sobre `status`. */
+    color?: string;
+    /** Columna intermedia a la derecha del cuerpo (ej. el impacto del evento). */
+    meta?: ReactNode;
+    /** Columna final (ej. un `Badge` de estado). */
+    aside?: ReactNode;
+    /** Con `onClick` el título es un botón que abre el detalle del elemento. */
+    onClick?: () => void;
 };
+export type TimelineOrientation = "vertical" | "horizontal";
 export type TimelineProps = {
     items: TimelineItem[];
     ariaLabel?: string;
     emptyMessage?: string;
+    /** "vertical" (por defecto) o "horizontal": la misma lista con los marcadores sobre una línea. Solo se muestra
+     * horizontal si el contenedor da al menos 8rem por elemento; si no, o si no se puede medir, queda vertical. */
+    orientation?: TimelineOrientation;
+    /** Ancho mínimo por elemento, en rem, para mostrar la horizontal. Por defecto 8. */
+    minItemWidth?: number;
+    /** Solo horizontal: "center" centra marcador y textos bajo el marcador; con ícono, el ícono va sobre la línea y un
+     * punto del mismo color marca la línea. */
+    align?: "start" | "center";
+    /** "top" pone la hora antes del título. */
+    timePosition?: "inline" | "top";
+    /** "cards": cada elemento en su propia tarjeta (solo vertical). */
+    variant?: "default" | "cards";
     className?: string;
 };
-export declare const Timeline: ({ items, ariaLabel, emptyMessage, className }: TimelineProps) => import('react').JSX.Element;
+export declare const Timeline: ({ items, ariaLabel, emptyMessage, orientation, minItemWidth, align, timePosition, variant, className, }: TimelineProps) => import('react').JSX.Element;

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

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

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

@@ -1,9 +1,9 @@
 export { Avatar, AvatarGroup } from './Avatar';
 export type { AvatarProps, AvatarGroupProps, AvatarSize, AvatarVariant, AvatarShape } from './Avatar';
 export { AuditTimeline } from './AuditTimeline';
-export type { AuditEventType, AuditTimelineItem, AuditTimelineProps } from './AuditTimeline';
+export type { AuditEventType, AuditTimelineItem, AuditTimelineProps, AuditTimelineVariant } from './AuditTimeline';
 export { RecordList, RecordListItem } from './RecordList';
-export type { RecordListIconTone, RecordListItemProps, RecordListProps } from './RecordList';
+export type { RecordListDensity, RecordListIconTone, RecordListItemProps, RecordListProps } from './RecordList';
 export { LiveChip } from './LiveChip';
 export type { LiveChipProps } from './LiveChip';
 export { LiveStatusBar } from './LiveStatusBar';
@@ -11,8 +11,12 @@ export type { LiveStatusBarProps, LiveStatusMetric } from './LiveStatusBar';
 export { PassengerBoardCard } from './PassengerBoardCard';
 export type { PassengerBoardCardProps } from './PassengerBoardCard';
 export { Timeline } from './Timeline';
-export type { TimelineItem, TimelineProps, TimelineStatus } from './Timeline';
+export type { TimelineItem, TimelineOrientation, TimelineProps, TimelineStatus } from './Timeline';
 export { Carousel } from './Carousel';
 export type { CarouselProps } from './Carousel';
+export { CheckList } from './CheckList';
+export type { CheckListItem, CheckListProps } from './CheckList';
 export { MediaPanel } from './MediaPanel';
-export type { MediaPanelFit, MediaPanelOverlay, MediaPanelProps } from './MediaPanel';
+export type { MediaPanelContentStyle, MediaPanelFit, MediaPanelOverlay, MediaPanelProps } from './MediaPanel';
+export { MediaGallery } from './MediaGallery';
+export type { MediaGalleryItem, MediaGalleryKind, MediaGalleryProps } from './MediaGallery';

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

@@ -0,0 +1 @@
+export { esEnfocableValido, siguienteEnContencion, tabulables } from '../../utils/foco';

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

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

package/dist/types/src/components/layout/AppShell.caracterizacion.test.d.ts

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

package/dist/types/src/components/layout/AppShell.d.ts

@@ -15,6 +15,8 @@ export type AppShellNavItem = {
      * detrás de bandera o permiso, donde la definición del menú es estática.
      */
     hidden?: boolean;
+    /** 1 = subopción del ítem anterior: va con sangría y en letra menor. */
+    level?: 0 | 1;
 };
 export type AppShellCategory = {
     id: string;
@@ -75,6 +77,7 @@ export type AppShellExitToModulesAction = {
     ariaLabel?: string;
     icon?: ReactNode;
 };
+export type AppShellLayout = "rail" | "sidebar";
 export type AppShellProps = {
     categories: AppShellCategory[];
     activeItemId: string;
@@ -82,6 +85,9 @@ export type AppShellProps = {
     brand?: ReactNode;
     topBar?: ReactNode;
     children: ReactNode;
+    /** "rail" (por defecto): riel de categorías y submenú de la categoría activa. "sidebar": una sola columna con
+     * `brand` arriba y los ítems de todas las categorías; con más de una categoría, cada grupo lleva su título. */
+    layout?: AppShellLayout;
     submenuCollapsed?: boolean;
     onSubmenuCollapsedChange?: (collapsed: boolean) => void;
     submenuFooter?: ReactNode;
@@ -101,12 +107,12 @@ export type AppShellProps = {
     className?: string;
     contentClassName?: string;
 };
-export declare const AppShell: ({ categories, activeItemId, onChange, brand, topBar, children, submenuCollapsed, onSubmenuCollapsedChange, submenuFooter, showSubmenuHeader, showDefaultTopBar, topBarContext, branchSelector, themeToggle, notifications, moduleLauncher, userMenu, helpAction, exitToModulesAction, className, contentClassName, }: AppShellProps) => import('react').JSX.Element;
+export declare const AppShell: ({ categories, activeItemId, onChange, brand, topBar, children, layout, submenuCollapsed, onSubmenuCollapsedChange, submenuFooter, showSubmenuHeader, showDefaultTopBar, topBarContext, branchSelector, themeToggle, notifications, moduleLauncher, userMenu, helpAction, exitToModulesAction, className, contentClassName, }: AppShellProps) => import('react').JSX.Element;
 /**
  * @deprecated Use `AppShell` instead. `AppBarContainer` remains as temporary
  * compatibility alias and is scheduled for removal in the next major release.
  */
-export declare const AppBarContainer: ({ categories, activeItemId, onChange, brand, topBar, children, submenuCollapsed, onSubmenuCollapsedChange, submenuFooter, showSubmenuHeader, showDefaultTopBar, topBarContext, branchSelector, themeToggle, notifications, moduleLauncher, userMenu, helpAction, exitToModulesAction, className, contentClassName, }: AppShellProps) => import('react').JSX.Element;
+export declare const AppBarContainer: ({ categories, activeItemId, onChange, brand, topBar, children, layout, submenuCollapsed, onSubmenuCollapsedChange, submenuFooter, showSubmenuHeader, showDefaultTopBar, topBarContext, branchSelector, themeToggle, notifications, moduleLauncher, userMenu, helpAction, exitToModulesAction, className, contentClassName, }: AppShellProps) => import('react').JSX.Element;
 /**
  * @deprecated Use `AppShellProps` instead.
  */

package/dist/types/src/components/layout/Tabs.caracterizacion.test.d.ts

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

package/dist/types/src/components/layout/Tabs.d.ts

@@ -11,7 +11,10 @@ type TabsProps = {
     value: string;
     onChange: (id: string) => void;
     className?: string;
-    variant?: "underline" | "segmented" | "accentUnderline";
+    /** "pills": cada pestaña en su propia píldora con borde; la activa, rellena. */
+    variant?: "underline" | "segmented" | "accentUnderline" | "pills";
+    /** "sm": pestañas bajas para la cabecera de una tarjeta. */
+    size?: "md" | "sm";
 };
-export declare const Tabs: ({ tabs, value, onChange, className, variant }: TabsProps) => import('react').JSX.Element;
+export declare const Tabs: ({ tabs, value, onChange, className, variant, size }: TabsProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/layout/Tabs.test.d.ts

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

package/dist/types/src/components/layout/ThemePicker.d.ts

@@ -0,0 +1,23 @@
+export type ThemePickerOption = {
+    id: string;
+    label: string;
+    /** Dos colores de muestra (fondo y acento) para reconocer el tema. */
+    swatch: [string, string];
+};
+export type ThemePickerMode = "light" | "dark";
+export type ThemePickerProps = {
+    themes: ThemePickerOption[];
+    value: string;
+    onChange: (id: string) => void;
+    mode: ThemePickerMode;
+    onModeChange: (mode: ThemePickerMode) => void;
+    /** false: solo las muestras de color; el nombre queda como texto accesible y en el `title`. */
+    showLabels?: boolean;
+    ariaLabel?: string;
+    className?: string;
+};
+/**
+ * Selector de tema de color (radio) y de modo claro u oscuro (interruptor). Solo informa la elección: quien lo usa
+ * aplica `data-skin` y `data-theme` en el <html> (ver theme/temas.css).
+ */
+export declare const ThemePicker: ({ themes, value, onChange, mode, onModeChange, showLabels, ariaLabel, className, }: ThemePickerProps) => import('react').JSX.Element;

package/dist/types/src/components/layout/ThemePicker.test.d.ts

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

package/dist/types/src/components/layout/WorkspaceHeader.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { NotificationItem } from '../overlays';
+import { BreadcrumbItem } from './Breadcrumb';
+export type WorkspaceHeaderSearch = {
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    ariaLabel?: string;
+};
+export type WorkspaceHeaderUser = {
+    name: string;
+    role?: string;
+    avatarSrc?: string;
+    initials?: string;
+};
+export type WorkspaceHeaderProps = {
+    title: string;
+    subtitle?: string;
+    breadcrumb?: BreadcrumbItem[];
+    search?: WorkspaceHeaderSearch;
+    notifications?: {
+        items: NotificationItem[];
+        onItemClick?: (item: NotificationItem) => void;
+    };
+    user?: WorkspaceHeaderUser;
+    /** Botones bajo la zona de herramientas, alineados a la derecha. */
+    actions?: ReactNode;
+    className?: string;
+};
+export declare const WorkspaceHeader: ({ title, subtitle, breadcrumb, search, notifications, user, actions, className, }: WorkspaceHeaderProps) => import('react').JSX.Element;

package/dist/types/src/components/layout/WorkspaceHeader.test.d.ts

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

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

@@ -14,6 +14,10 @@ export type { VisibilityProps } from './Visibility';
 export { Separator } from './Separator';
 export type { SeparatorOrientation, SeparatorProps } from './Separator';
 export { Breadcrumb } from './Breadcrumb';
+export { WorkspaceHeader } from './WorkspaceHeader';
+export { ThemePicker } from './ThemePicker';
+export type { ThemePickerMode, ThemePickerOption, ThemePickerProps } from './ThemePicker';
+export type { WorkspaceHeaderProps, WorkspaceHeaderSearch, WorkspaceHeaderUser } from './WorkspaceHeader';
 export type { BreadcrumbItem, BreadcrumbProps } from './Breadcrumb';
 export { Accordion } from './Accordion';
 export type { AccordionItemDef, AccordionProps, AccordionType } from './Accordion';
@@ -39,4 +43,4 @@ export { WeekdayToggleStrip } from './WeekdayToggleStrip';
 export type { WeekdayToggleStripProps, WeekdayOption } from './WeekdayToggleStrip';
 export type { UnitSelectorOption, UnitSelectorProps } from './UnitSelector';
 export { AppShell, AppBarContainer } from './AppShell';
-export type { AppShellCategory, AppShellNavItem, AppShellProps, AppShellBranchSelector, AppShellExitToModulesAction, AppShellHelpAction, AppShellModuleLauncher, AppShellModuleLauncherItem, AppShellThemeToggle, AppShellTopBarContext, AppShellUserMenu, AppBarContainerProps, } from './AppShell';
+export type { AppShellCategory, AppShellNavItem, AppShellProps, AppShellBranchSelector, AppShellExitToModulesAction, AppShellHelpAction, AppShellLayout, AppShellModuleLauncher, AppShellModuleLauncherItem, AppShellThemeToggle, AppShellTopBarContext, AppShellUserMenu, AppBarContainerProps, } from './AppShell';

package/dist/types/src/components/overlays/Drawer.d.ts

@@ -15,9 +15,12 @@ export type DrawerProps = {
     height?: CSSProperties["height"];
     headerVariant?: OverlayHeaderVariant;
     closeOnOverlay?: boolean;
+    /** Al cerrar, devuelve el foco al control que lo tenía al abrir si quedó perdido. `false` si quien lo usa decide
+     * adónde vuelve el foco. */
+    restoreFocus?: boolean;
     className?: string;
 };
-export declare const Drawer: ({ open, onClose, side, title, subtitle, icon, children, footer, subheader, width, height, headerVariant, closeOnOverlay, className, }: DrawerProps) => import('react').ReactPortal | null;
+export declare const Drawer: ({ open, onClose, side, title, subtitle, icon, children, footer, subheader, width, height, headerVariant, closeOnOverlay, restoreFocus, className, }: DrawerProps) => import('react').ReactPortal | null;
 /** Alias de `Drawer` — patrón shadcn Sheet (panel lateral o inferior). */
-export declare const Sheet: ({ open, onClose, side, title, subtitle, icon, children, footer, subheader, width, height, headerVariant, closeOnOverlay, className, }: DrawerProps) => import('react').ReactPortal | null;
+export declare const Sheet: ({ open, onClose, side, title, subtitle, icon, children, footer, subheader, width, height, headerVariant, closeOnOverlay, restoreFocus, className, }: DrawerProps) => import('react').ReactPortal | null;
 export type SheetProps = DrawerProps;

package/dist/types/src/components/overlays/Foco.test.d.ts

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

package/dist/types/src/components/overlays/Modal.d.ts

@@ -22,9 +22,12 @@ export type ModalProps = {
     /** Oculta cabecera estándar (título, subtítulo, icono y cerrar) cuando el consumidor renderiza cabecera propia en el body. */
     hideHeader?: boolean;
     closeOnOverlay?: boolean;
+    /** Al cerrar, devuelve el foco al control que lo tenía al abrir si quedó perdido. `false` si quien lo usa decide
+     * adónde vuelve el foco. */
+    restoreFocus?: boolean;
     className?: string;
 };
-export declare const Modal: ({ open, onClose, title, subtitle, icon, children, footer, subheader, size, maxWidth, width, headerVariant, hideHeader, closeOnOverlay, className, }: ModalProps) => import('react').ReactPortal | null;
+export declare const Modal: ({ open, onClose, title, subtitle, icon, children, footer, subheader, size, maxWidth, width, headerVariant, hideHeader, closeOnOverlay, restoreFocus, className, }: ModalProps) => import('react').ReactPortal | null;
 type UseModalOptions = {
     onOpen?: () => void;
     onClose?: () => void;

package/dist/types/src/components/overlays/colorTexto.test.d.ts

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

package/dist/types/src/components/overlays/useFocoDeCapa.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+/**
+ * Foco de un diálogo de la pila (Modal, Drawer). Al abrir, enfoca el primer control del panel salvo que un hijo ya haya
+ * movido el foco dentro (el visor de MediaGallery enfoca su «Cerrar»). Mientras es la capa superior, Tab no sale del
+ * panel; si otro manejador ya atendió el Tab (preventDefault), no interviene. Al cerrar, si el foco quedó perdido,
+ * vuelve al control que tenía el foco al abrir.
+ */
+export declare const useFocoDeCapa: (abierto: boolean, idCapa: string, panel: RefObject<HTMLElement | null>, devolver?: boolean) => void;

package/dist/types/src/components/overlays/useOverlayStack.consulta.test.d.ts

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

package/dist/types/src/components/overlays/useOverlayStack.d.ts

@@ -1,3 +1,13 @@
 import { RefObject } from 'react';
 export declare const OverlayParentContext: import('react').Context<string | null>;
 export declare const useOverlayStack: (abierto: boolean, onClose: () => void, raiz: RefObject<HTMLDivElement | null>) => string;
+/** Capa superior registrada en la pila del documento, o `null`. Lectura pura: uso interno de sf-ui. */
+export declare const overlaySuperior: (documento: Document) => {
+    id: string;
+    raiz: HTMLElement;
+} | null;
+/**
+ * Avisa después de cada alta y baja en la pila del documento. Devuelve la baja (idempotente). Cada suscripción es
+ * propia aunque se repita la función. Uso interno de sf-ui.
+ */
+export declare const suscribirPilaOverlays: (documento: Document, oyente: () => void) => () => void;