@sfperusacdev/sf-ui 0.2.9 → 0.3.1

package/dist/theme/temas.css

@@ -0,0 +1,229 @@
+/**
+ * Temas intercambiables en tiempo de ejecución según el <html>: data-skin="sark|erp|neon" y data-theme="dark".
+ * Carga junto a sark.css, dark.css y neon.css. Sin data-skin nada de este archivo aplica.
+ * El bloque ERP claro repite las variables de erp.css: la prueba temas.test.ts falla si se separan.
+ */
+
+/* —— ERP Systel claro (naranja + navy) —— */
+:root[data-skin='erp']:not([data-theme='dark']) {
+  --sf-primary: rgb(12, 33, 49);
+  --sf-primary-muted: #46555c;
+  --sf-accent: #ec7211;
+  --sf-accent-hover: #d96510;
+  --sf-accent-10: rgb(236 114 17 / 0.1);
+
+  --sf-navy: rgb(12, 33, 49);
+  --sf-navy-muted: #64748b;
+  --sf-green: #ec7211;
+  --sf-green-mid: #d96510;
+
+  --sf-surface: #f1f3f4;
+  --sf-surface-alt: #f8fafc;
+  --sf-page-bg: #f0f4fa;
+
+  --sf-border: #d1d5db;
+  --sf-border-strong: #c7d5ce;
+  --sf-text: #374151;
+  --sf-text-muted: #6b7280;
+  --sf-label: #374151;
+
+  --sf-input-bg: #f8fafc;
+  --sf-input-bg-readonly: #f1f5f9;
+  --sf-input-border: #d1d5db;
+  --sf-input-border-focus: #ec7211;
+  --sf-input-text: #374151;
+  --sf-input-placeholder: #9ca3af;
+  --sf-input-font-size: 13px;
+
+  --sf-ring: rgb(236 114 17 / 0.18);
+  --sf-ring-focus: rgb(236 114 17 / 0.18);
+  --sf-ring-width: 3px;
+  --sf-ring-error: rgb(244 63 94 / 0.15);
+  --sf-input-border-error: #fb7185;
+
+  --sf-danger: #f05a25;
+  --sf-danger-bg: rgb(240 90 37 / 0.1);
+  --sf-row-hover: #f0f7ff;
+  --sf-row-selected: rgb(236 114 17 / 0.06);
+
+  --sf-btn-primary-bg: var(--sf-accent);
+  --sf-btn-primary-hover: var(--sf-accent-hover);
+  --sf-btn-primary-shadow: 0 4px 14px rgb(236 114 17 / 0.3);
+  --sf-btn-primary-shadow-hover: 0 6px 20px rgb(236 114 17 / 0.4);
+  --sf-btn-outline-border: rgb(236 114 17 / 0.4);
+  --sf-btn-outline-text: #ec7211;
+  --sf-btn-outline-hover-bg: rgb(236 114 17 / 0.08);
+
+  --sf-shadow-2: 0 1px 3px rgb(12 33 49 / 0.08), 0 1px 2px rgb(12 33 49 / 0.05);
+  --sf-shadow-4: 0 4px 16px rgb(12 33 49 / 0.08), 0 2px 6px rgb(12 33 49 / 0.04);
+  --sf-shadow-8: 0 10px 32px rgb(12 33 49 / 0.1), 0 4px 10px rgb(12 33 49 / 0.06);
+
+  --sf-modal-overlay: rgb(12 33 49 / 0.45);
+  --sf-card-border: var(--sf-border);
+  --sf-badge-primary-bg: var(--sf-accent);
+  --sf-badge-primary-dot: var(--sf-accent-hover);
+
+  --sf-table-header-bg: var(--sf-primary);
+  --sf-table-header-text: var(--sf-white);
+  --sf-table-header-border: color-mix(in srgb, var(--sf-primary) 82%, var(--sf-white));
+  --sf-modal-header-bg: var(--sf-primary);
+  --sf-modal-header-text: var(--sf-white);
+  --sf-modal-header-subtitle: var(--sf-app-shell-topbar-muted);
+  --sf-modal-header-icon-bg: var(--sf-app-shell-accent);
+  --sf-modal-footer-bg: var(--sf-surface-alt);
+  --sf-record-item-bg: var(--sf-white);
+  --sf-master-detail-panel-bg: var(--sf-white);
+  --sf-filter-bar-bg: var(--sf-white);
+  --sf-expandable-row-bg: var(--sf-white);
+  --sf-itinerary-map-bg: color-mix(in srgb, var(--sf-accent-10) 55%, var(--sf-white));
+  --sf-avatar-accent-bg: var(--sf-accent);
+  --sf-app-shell-nav-badge-bg: var(--sf-accent);
+  --sf-app-shell-nav-badge-text: var(--sf-white);
+  --sf-maestro-toolbar-bg: var(--sf-white);
+  --sf-live-status-bg: var(--sf-white);
+  --sf-passenger-onboard-bg: color-mix(in srgb, var(--sf-success) 10%, var(--sf-white));
+}
+
+/* —— Modo oscuro de cada tema: dark.css con el acento propio —— */
+:root[data-theme='dark'][data-skin='erp'] {
+  --sf-accent: #f59a4a;
+  --sf-accent-hover: #ec7211;
+  --sf-accent-10: rgb(245 154 74 / 0.14);
+  --sf-input-border-focus: #f59a4a;
+  --sf-ring: rgb(245 154 74 / 0.28);
+  --sf-ring-focus: rgb(245 154 74 / 0.28);
+  --sf-btn-primary-bg: #f59a4a;
+  --sf-btn-primary-hover: #ec7211;
+  --sf-btn-primary-text: #1b1206;
+  --sf-btn-primary-shadow: 0 4px 14px rgb(245 154 74 / 0.25);
+  --sf-btn-outline-border: rgb(245 154 74 / 0.45);
+  --sf-btn-outline-text: #f59a4a;
+  --sf-btn-outline-hover-bg: rgb(245 154 74 / 0.12);
+  --sf-app-shell-accent: #f59a4a;
+  --sf-avatar-accent-bg: #f59a4a;
+  --sf-app-shell-nav-badge-bg: #f59a4a;
+  --sf-spinner-fill: #f59a4a;
+}
+
+:root[data-theme='dark'][data-skin='sark'] {
+  --sf-accent: #3dba6e;
+  --sf-accent-hover: #2e9e5b;
+  --sf-accent-10: rgb(61 186 110 / 0.14);
+  --sf-input-border-focus: #3dba6e;
+  --sf-ring: rgb(61 186 110 / 0.28);
+  --sf-ring-focus: rgb(61 186 110 / 0.28);
+  --sf-btn-primary-bg: #3dba6e;
+  --sf-btn-primary-hover: #2e9e5b;
+  --sf-btn-primary-text: #06150c;
+  --sf-btn-primary-shadow: 0 4px 14px rgb(61 186 110 / 0.25);
+  --sf-btn-outline-border: rgb(61 186 110 / 0.45);
+  --sf-btn-outline-text: #3dba6e;
+  --sf-btn-outline-hover-bg: rgb(61 186 110 / 0.12);
+  --sf-app-shell-accent: #3dba6e;
+  --sf-spinner-fill: #3dba6e;
+}
+
+/* —— Modo claro con cualquier tema: el texto pintado con un color de categoría se oscurece para leerse sobre
+   blanco (los colores de categoría están pensados para rellenos y para fondo oscuro). —— */
+:root[data-skin]:not([data-theme='dark']) .sf-metric-tile__value {
+  color: color-mix(in srgb, var(--sf-metric-tile-value-color) 62%, #0b1f29);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-metric-tile--centered .sf-metric-tile__icon,
+:root[data-skin]:not([data-theme='dark']) .sf-metric-row__prefix {
+  filter: none;
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-metric-row__prefix {
+  color: color-mix(in srgb, var(--sf-metric-color, var(--sf-accent)) 62%, #0b1f29);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-stage-flow--ring .sf-stage-flow__eyebrow {
+  color: color-mix(in srgb, var(--sf-stage-color) 45%, #0b1f29);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-state-chain--dot .sf-state-chain__item--current .sf-state-chain__label {
+  color: color-mix(in srgb, var(--sf-state-color) 45%, #0b1f29);
+}
+
+/* Texto de acento y de categoría sobre blanco: verbo del grafo, etiqueta de la dona, numeración de baldosas, fechas. */
+:root[data-skin]:not([data-theme='dark']) .sf-relation-graph--orbit .sf-relation-graph__relation {
+  color: color-mix(in srgb, var(--sf-relation-color) 40%, #0b1f29);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-donut-gauge__label[style*="--sf-donut-label-color"] {
+  color: color-mix(in srgb, var(--sf-donut-label-color) 48%, #0b1f29);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-metric-row__tile-icon {
+  border-color: color-mix(in srgb, var(--sf-metric-color, var(--sf-accent)) 60%, #0b1f29);
+  color: color-mix(in srgb, var(--sf-metric-color, var(--sf-accent)) 48%, #0b1f29);
+}
+
+/* Partes gráficas que deben distinguirse (3:1) sobre blanco: muestras de leyenda, rellenos de barra, puntos y
+   círculos de estado. Sus colores llegan en línea desde quien usa el componente, por eso se oscurecen con filtro. */
+:root[data-skin]:not([data-theme='dark']) .sf-chart-legend__swatch {
+  filter: brightness(0.65) saturate(1.2);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-metric-row__fill,
+:root[data-skin]:not([data-theme='dark']) .sf-timeline__dot--custom {
+  filter: brightness(0.6) saturate(1.2);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-state-chain--ring .sf-state-chain__circle {
+  border-color: color-mix(in srgb, var(--sf-state-color) 62%, #0b1f29);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-state-chain--dot .sf-state-chain__circle {
+  background: color-mix(in srgb, var(--sf-state-color) 58%, #0b1f29);
+}
+
+/* ERP claro: el naranja publicado da 3:1 con texto blanco; en botones y texto de acento va un tono más profundo. */
+:root[data-skin='erp']:not([data-theme='dark']) {
+  --sf-btn-primary-bg: #b35400;
+  --sf-btn-primary-hover: #9a4800;
+  --sf-btn-outline-text: #a94f00;
+  --sf-accent-text: #a94f00;
+  --sf-text-muted: #5f6876;
+}
+
+:root[data-skin='erp']:not([data-theme='dark']) .sf-timeline__time {
+  color: var(--sf-accent-text);
+}
+
+/* Modo oscuro con cualquier tema: el texto pintado con un color de categoría se aclara para leerse sobre el fondo
+   pizarra o negro; el amarillo de advertencia suave y los rellenos de barra también suben de luz. */
+:root[data-skin][data-theme='dark'] .sf-relation-graph--orbit .sf-relation-graph__relation {
+  color: color-mix(in srgb, var(--sf-relation-color) 65%, #ffffff);
+}
+
+:root[data-skin][data-theme='dark'] .sf-stage-flow--ring .sf-stage-flow__eyebrow {
+  color: color-mix(in srgb, var(--sf-stage-color) 70%, #ffffff);
+}
+
+:root[data-skin][data-theme='dark'] .sf-metric-row__prefix {
+  color: color-mix(in srgb, var(--sf-metric-color, var(--sf-accent)) 70%, #ffffff);
+}
+
+:root[data-skin][data-theme='dark'] .sf-badge--warning:not(.sf-badge--solid) {
+  color: #fbbf24;
+}
+
+:root[data-skin][data-theme='dark'] .sf-metric-row__fill {
+  filter: brightness(1.15);
+}
+
+/* Modo claro con cualquier tema: advertencia suave, contador de la campana y avatar sin foto a 4,5:1. */
+:root[data-skin]:not([data-theme='dark']) {
+  --sf-avatar-text: var(--sf-text);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-badge--warning:not(.sf-badge--solid) {
+  color: #92400e;
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-notification-bell__badge {
+  background: #15803d;
+  color: #ffffff;
+}

package/dist/types/src/components/advanced-inputs/CodeEditor.d.ts

@@ -16,5 +16,5 @@ type CodeEditorProps<TFormValues extends FieldValues> = {
     onChange?: (value: string) => void;
     onRefresh?: () => Promise<void> | void;
 };
-export declare const CodeEditor: <TFormValues extends FieldValues>({ form, name, label, info, required, language, highlighted, readOnly, disabled, rows, small, className, onChange, onRefresh, }: CodeEditorProps<TFormValues>) => import("react").JSX.Element;
+export declare const CodeEditor: <TFormValues extends FieldValues>({ form, name, label, info, required, language, highlighted, readOnly, disabled, rows, small, className, onChange, onRefresh, }: CodeEditorProps<TFormValues>) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/advanced-inputs/MapGeocoderBar.d.ts

@@ -5,4 +5,4 @@ export type MapGeocoderBarProps = {
     className?: string;
     disabled?: boolean;
 };
-export declare const MapGeocoderBar: ({ onSelect, placeholder, className, disabled, }: MapGeocoderBarProps) => import("react").JSX.Element;
+export declare const MapGeocoderBar: ({ onSelect, placeholder, className, disabled, }: MapGeocoderBarProps) => import('react').JSX.Element;

package/dist/types/src/components/advanced-inputs/MapPicker.d.ts

@@ -18,5 +18,5 @@ type MapPickerProps<TFormValues extends FieldValues> = {
  * @deprecated Use `LocationPicker` or `SmartMapInput kind="coordinates"` from `components/maps/forms`.
  * This component remains for compatibility during migration.
  */
-export declare const MapPicker: <TFormValues extends FieldValues>({ form, name, label, info, required, zoom, readOnly, disabled, showGeocoder, className, onChange, onRefresh, }: MapPickerProps<TFormValues>) => import("react").JSX.Element;
+export declare const MapPicker: <TFormValues extends FieldValues>({ form, name, label, info, required, zoom, readOnly, disabled, showGeocoder, className, onChange, onRefresh, }: MapPickerProps<TFormValues>) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/advanced-inputs/MapPickerMap.d.ts

@@ -6,5 +6,5 @@ type MapPickerMapProps = {
     showGeocoder?: boolean;
     onPick: (lat: string, lng: string) => void;
 };
-export declare const MapPickerMap: ({ lat, lng, zoom, readOnly, showGeocoder, onPick, }: MapPickerMapProps) => import("react").JSX.Element;
+export declare const MapPickerMap: ({ lat, lng, zoom, readOnly, showGeocoder, onPick, }: MapPickerMapProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/advanced-inputs/PhotoInput.d.ts

@@ -14,5 +14,5 @@ type PhotoInputProps<TFormValues extends FieldValues> = {
     onChange?: (file: File | null) => void;
     onRefresh?: () => Promise<void> | void;
 };
-export declare const PhotoInput: <TFormValues extends FieldValues>({ form, name, label, info, required, capture, maxSizeMb, readOnly, disabled, small, className, onChange, onRefresh, }: PhotoInputProps<TFormValues>) => import("react").JSX.Element;
+export declare const PhotoInput: <TFormValues extends FieldValues>({ form, name, label, info, required, capture, maxSizeMb, readOnly, disabled, small, className, onChange, onRefresh, }: PhotoInputProps<TFormValues>) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/advanced-inputs/RichTextEditor.d.ts

@@ -12,5 +12,5 @@ type RichTextEditorProps<TFormValues extends FieldValues> = {
     onChange?: (html: string) => void;
     onRefresh?: () => Promise<void> | void;
 };
-export declare const RichTextEditor: <TFormValues extends FieldValues>({ form, name, label, info, required, readOnly, disabled, height, className, onChange, onRefresh, }: RichTextEditorProps<TFormValues>) => import("react").JSX.Element;
+export declare const RichTextEditor: <TFormValues extends FieldValues>({ form, name, label, info, required, readOnly, disabled, height, className, onChange, onRefresh, }: RichTextEditorProps<TFormValues>) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/advanced-inputs/SignaturePad.d.ts

@@ -13,5 +13,5 @@ type SignaturePadProps<TFormValues extends FieldValues> = {
     onChange?: (dataUrl: string) => void;
     onRefresh?: () => Promise<void> | void;
 };
-export declare const SignaturePad: <TFormValues extends FieldValues>({ form, name, label, info, required, width, height, readOnly, disabled, className, onChange, onRefresh, }: SignaturePadProps<TFormValues>) => import("react").JSX.Element;
+export declare const SignaturePad: <TFormValues extends FieldValues>({ form, name, label, info, required, width, height, readOnly, disabled, className, onChange, onRefresh, }: SignaturePadProps<TFormValues>) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/buttons/ActionButton.d.ts

@@ -7,5 +7,5 @@ type ActionButtonProps = {
     icon?: ReactNode;
     variant?: ActionButtonVariant;
 } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">;
-export declare const ActionButton: ({ children, loading, disabled, icon, variant, className, type, ...rest }: ActionButtonProps) => import("react").JSX.Element;
+export declare const ActionButton: ({ children, loading, disabled, icon, variant, className, type, ...rest }: ActionButtonProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/buttons/Button.d.ts

@@ -8,5 +8,5 @@ type ButtonProps = {
     iconPosition?: "start" | "end";
     children: ReactNode;
 } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">;
-export declare const Button: ({ variant, size, loading, disabled, icon, iconPosition, children, className, type, ...rest }: ButtonProps) => import("react").JSX.Element;
+export declare const Button: ({ variant, size, loading, disabled, icon, iconPosition, children, className, type, ...rest }: ButtonProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/buttons/ButtonGroup.d.ts

@@ -3,5 +3,5 @@ type ButtonGroupProps = {
     children: ReactNode;
     className?: string;
 };
-export declare const ButtonGroup: ({ children, className }: ButtonGroupProps) => import("react").JSX.Element;
+export declare const ButtonGroup: ({ children, className }: ButtonGroupProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/buttons/FormActions.d.ts

@@ -8,5 +8,5 @@ type FormActionsProps = {
     hideSave?: boolean;
     className?: string;
 };
-export declare const FormActions: import('react').MemoExoticComponent<({ cancelLabel, saveLabel, onCancel, onSave, cancelLoading, saveLoading, hideSave, className, }: FormActionsProps) => import("react").JSX.Element>;
+export declare const FormActions: import('react').MemoExoticComponent<({ cancelLabel, saveLabel, onCancel, onSave, cancelLoading, saveLoading, hideSave, className, }: FormActionsProps) => import('react').JSX.Element>;
 export {};

package/dist/types/src/components/buttons/RowActions.d.ts

@@ -6,5 +6,5 @@ type RowActionsProps = {
     deleteLabel?: string;
     className?: string;
 };
-export declare const RowActions: ({ onEdit, onDelete, disabled, editLabel, deleteLabel, className, }: RowActionsProps) => import("react").JSX.Element;
+export declare const RowActions: ({ onEdit, onDelete, disabled, editLabel, deleteLabel, className, }: RowActionsProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/buttons/ToolbarButton.d.ts

@@ -6,5 +6,5 @@ type ToolbarButtonProps = {
     label?: string;
     loading?: boolean;
 } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">;
-export declare const ToolbarButton: ({ selected, small, icon, label, loading, disabled, className, type, ...rest }: ToolbarButtonProps) => import("react").JSX.Element;
+export declare const ToolbarButton: ({ selected, small, icon, label, loading, disabled, className, type, ...rest }: ToolbarButtonProps) => import('react').JSX.Element;
 export {};

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/EntityCard.d.ts

@@ -18,11 +18,11 @@ export type EntityCardProps = {
     onClick?: () => void;
     className?: string;
 };
-export declare const EntityCard: (props: EntityCardProps) => import("react").JSX.Element;
+export declare const EntityCard: (props: EntityCardProps) => import('react').JSX.Element;
 type EntityCardGridProps = {
     children: ReactNode;
     cols?: 2 | 3 | 4 | 5;
     className?: string;
 };
-export declare const EntityCardGrid: ({ children, cols, className }: EntityCardGridProps) => import("react").JSX.Element;
+export declare const EntityCardGrid: ({ children, cols, className }: EntityCardGridProps) => import('react').JSX.Element;
 export {};

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

@@ -85,11 +85,11 @@ export type KPICardProps = {
      * afordance de "clickeable" ya lo da `selected`/el borde, no un chevron de navegación. */
     showChevron?: boolean;
 };
-export declare const KPICard: ({ label, value, sublabel, icon, iconClassName, trend, trendLabel, trendDirection, accentTone, progress, valueFormat, formatOptions, sparkline, layout, variant, size, density, accentBar, iconStyle, labelWrap, className, onClick, selected, showChevron, }: KPICardProps) => import("react").JSX.Element;
+export declare const KPICard: ({ label, value, sublabel, icon, iconClassName, trend, trendLabel, trendDirection, accentTone, progress, valueFormat, formatOptions, sparkline, layout, variant, size, density, accentBar, iconStyle, labelWrap, className, onClick, selected, showChevron, }: KPICardProps) => import('react').JSX.Element;
 type KPIGridProps = {
     children: ReactNode;
     cols?: 2 | 3 | 4 | 5;
     className?: string;
 };
-export declare const KPIGrid: ({ children, cols, className }: KPIGridProps) => import("react").JSX.Element;
+export declare const KPIGrid: ({ children, cols, className }: KPIGridProps) => import('react').JSX.Element;
 export {};

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/ModuleCard.d.ts

@@ -23,12 +23,12 @@ export type ModuleCardProps = {
     className?: string;
     "aria-label"?: string;
 };
-export declare const ModuleCard: ({ title, subtitle, icon, logoUrl, iconAccent, badge, isNew, favorite, onFavoriteToggle, onClick, variant, density, enterAnimation, enterAnimationOnce, enterDelay, className, "aria-label": ariaLabel, }: ModuleCardProps) => import("react").JSX.Element;
+export declare const ModuleCard: ({ title, subtitle, icon, logoUrl, iconAccent, badge, isNew, favorite, onFavoriteToggle, onClick, variant, density, enterAnimation, enterAnimationOnce, enterDelay, className, "aria-label": ariaLabel, }: ModuleCardProps) => import('react').JSX.Element;
 type ModuleCardGridProps = {
     children: ReactNode;
     variant?: ModuleCardVariant;
     density?: ModuleCardDensity;
     className?: string;
 };
-export declare const ModuleCardGrid: ({ children, variant, density, className, }: ModuleCardGridProps) => import("react").JSX.Element;
+export declare const ModuleCardGrid: ({ children, variant, density, className, }: ModuleCardGridProps) => import('react').JSX.Element;
 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/QuickActionTile.d.ts

@@ -6,10 +6,10 @@ export type QuickActionTileProps = {
     disabled?: boolean;
     className?: string;
 };
-export declare const QuickActionTile: ({ label, icon, onClick, disabled, className }: QuickActionTileProps) => import("react").JSX.Element;
+export declare const QuickActionTile: ({ label, icon, onClick, disabled, className }: QuickActionTileProps) => import('react').JSX.Element;
 export type QuickActionGridProps = {
     children: ReactNode;
     cols?: 2 | 3 | 4;
     className?: string;
 };
-export declare const QuickActionGrid: ({ children, cols, className }: QuickActionGridProps) => import("react").JSX.Element;
+export declare const QuickActionGrid: ({ children, cols, className }: QuickActionGridProps) => import('react').JSX.Element;

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/RecommendationCard.d.ts

@@ -10,4 +10,4 @@ export type RecommendationCardProps = {
     onAction?: () => void;
     className?: string;
 };
-export declare const RecommendationCard: ({ title, description, tags, priority, impact, confidence, actionLabel, onAction, className, }: RecommendationCardProps) => import("react").JSX.Element;
+export declare const RecommendationCard: ({ title, description, tags, priority, impact, confidence, actionLabel, onAction, className, }: RecommendationCardProps) => import('react').JSX.Element;

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

@@ -13,5 +13,5 @@ type SplitBarProps = {
  * Una sola barra dividida en 2+ segmentos proporcionales (ej. sexo M/F, o una distribución con más
  * categorías), con labels debajo. Distinto de `MetricBarList`, que apila una barra por fila.
  */
-export declare const SplitBar: ({ segments, size, className }: SplitBarProps) => import("react").JSX.Element;
+export declare const SplitBar: ({ segments, size, className }: SplitBarProps) => import('react').JSX.Element;
 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/DeviationBand.d.ts

@@ -4,4 +4,4 @@ import { DeviationBandProps } from './types';
  * "producción -27% respecto al promedio del lote". Distinto de `MetricBar` (que dimensiona 0-100
  * contra un `max`, no contra un promedio) y de `Chart` (que es una serie, no un punto).
  */
-export declare const DeviationBand: ({ value, average, min, max, unit, label, valueFormat, direction, className, }: DeviationBandProps) => import("react").JSX.Element;
+export declare const DeviationBand: ({ value, average, min, max, unit, label, valueFormat, direction, className, }: DeviationBandProps) => import('react').JSX.Element;

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

@@ -9,4 +9,4 @@ export type { DiagnosticRadarProps, RadarMetric } from './types';
  * Reutiliza los mismos tokens/formatters que `Chart` (`chartAxisTick`, `chartTooltipStyle`,
  * `buildDefaultFormatter`) para que se vea como parte del mismo sistema, no como un componente aparte.
  */
-export declare const DiagnosticRadar: ({ data, max, color, height, ariaLabel, emptyMessage, className, showTooltip, showLegend, showValues, valueFormat, }: DiagnosticRadarProps) => import("react").JSX.Element;
+export declare const DiagnosticRadar: ({ data, max, color, height, ariaLabel, emptyMessage, className, showTooltip, showLegend, showValues, valueFormat, }: DiagnosticRadarProps) => import('react').JSX.Element;

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

@@ -1,2 +1,2 @@
 import { SparklineProps } from './types';
-export declare const Sparkline: ({ data, dataKey, type, height, width, color, ariaLabel, emptyMessage, className, }: SparklineProps) => import("react").JSX.Element;
+export declare const Sparkline: ({ data, dataKey, type, height, width, color, ariaLabel, emptyMessage, className, }: SparklineProps) => import('react').JSX.Element;