@sfperusacdev/sf-ui 0.3.0 → 0.3.2

package/dist/theme/temas.css

@@ -0,0 +1,345 @@
+/**
+ * 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);
+}
+
+/* Íconos de baldosa (procesados, en espera, validadas…): el centrado se oscurece como el texto; en el «leading», el
+   círculo de color lleva el ícono en blanco, así que es el círculo el que se oscurece. */
+:root[data-skin]:not([data-theme='dark']) .sf-metric-tile--centered .sf-metric-tile__icon {
+  color: color-mix(in srgb, var(--sf-metric-tile-color) 50%, #0b1f29);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-metric-tile--leading .sf-metric-tile__icon {
+  background: color-mix(in srgb, var(--sf-metric-tile-color) 55%, #0b1f29);
+  color: #ffffff;
+}
+
+: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);
+}
+
+/* Página activa del paginador en claro: en classic, soft y neon el número va en blanco sobre el acento, y el de ERP
+   (#ec7211) o Neón (#0d9488) no llega a 4,5:1. premium y matrix tienen sus propios colores y no se tocan. */
+:root[data-skin='erp']:not([data-theme='dark']) .sf-pagination--classic .sf-pagination__page--active,
+:root[data-skin='erp']:not([data-theme='dark']) .sf-pagination--classic .sf-pagination__page--active:hover,
+:root[data-skin='erp']:not([data-theme='dark']) .sf-pagination--soft .sf-pagination__page--active,
+:root[data-skin='erp']:not([data-theme='dark']) .sf-pagination--soft .sf-pagination__page--active:hover,
+:root[data-skin='erp']:not([data-theme='dark']) .sf-pagination--neon .sf-pagination__page--active,
+:root[data-skin='erp']:not([data-theme='dark']) .sf-pagination--neon .sf-pagination__page--active:hover {
+  background: #b35400;
+  border-color: #b35400;
+}
+
+:root[data-skin='neon']:not([data-theme='dark']) .sf-pagination--classic .sf-pagination__page--active,
+:root[data-skin='neon']:not([data-theme='dark']) .sf-pagination--classic .sf-pagination__page--active:hover,
+:root[data-skin='neon']:not([data-theme='dark']) .sf-pagination--soft .sf-pagination__page--active,
+:root[data-skin='neon']:not([data-theme='dark']) .sf-pagination--soft .sf-pagination__page--active:hover,
+:root[data-skin='neon']:not([data-theme='dark']) .sf-pagination--neon .sf-pagination__page--active,
+:root[data-skin='neon']:not([data-theme='dark']) .sf-pagination--neon .sf-pagination__page--active:hover {
+  background: #0f766e;
+  border-color: #0f766e;
+}
+
+/* —— Detalles y capas (medido en el prototipo ADN con capas-temas, 6 temas) ——
+   Botones de estado: el texto no sale de --sf-btn-primary-text, que en los oscuros es casi negro. */
+:root[data-skin] .sf-btn--success {
+  background: #15803d;
+  color: #ffffff;
+}
+
+:root[data-skin] .sf-btn--success:hover:not(:disabled) {
+  background: #166534;
+}
+
+:root[data-skin] .sf-btn--danger-solid {
+  background: #b91c1c;
+  color: #ffffff;
+}
+
+:root[data-skin] .sf-btn--danger-solid:hover:not(:disabled) {
+  background: #991b1b;
+}
+
+/* Claro: rojo, acentos de aviso, asterisco y cierre de los avisos a 4,5:1 sobre blanco o su tinte. */
+:root[data-skin]:not([data-theme='dark']) {
+  --sf-alert-info-accent: #1d4ed8;
+  --sf-alert-success-accent: #15803d;
+  --sf-alert-warning-accent: #b45309;
+  --sf-alert-danger-accent: #b91c1c;
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-btn--danger {
+  background: #ffffff;
+  color: #b91c1c;
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-field-required {
+  color: #b91c1c;
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-table thead th:not([class*='sf-table__th--']) {
+  color: #475569;
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-toast__close {
+  color: #475569;
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-toast--warning .sf-toast__icon {
+  color: #b45309;
+}
+
+/* El encabezado sin variante no tiene fondo propio: el subtítulo va sobre el blanco del modal, no sobre el marino. */
+:root[data-skin]:not([data-theme='dark']) .sf-modal-header:not(.sf-modal-header--dark):not(.sf-modal-header--brand) .sf-modal-header__subtitle {
+  color: var(--sf-text-muted);
+}
+
+/* Oscuro: los mismos elementos con los tonos claros de su color, sobre el fondo pizarra o negro. */
+:root[data-skin][data-theme='dark'] {
+  --sf-alert-info-accent: #60a5fa;
+  --sf-alert-success-accent: #4ade80;
+  --sf-alert-warning-accent: #fbbf24;
+  --sf-alert-danger-accent: #f87171;
+}
+
+:root[data-skin][data-theme='dark'] .sf-btn--danger {
+  background: transparent;
+  color: #f87171;
+}
+
+:root[data-skin][data-theme='dark'] .sf-field-required {
+  color: #f87171;
+}
+
+:root[data-skin][data-theme='dark'] .sf-table thead th:not([class*='sf-table__th--']) {
+  color: var(--sf-text-muted);
+}
+
+:root[data-skin][data-theme='dark'] .sf-badge--info:not(.sf-badge--solid) {
+  color: #93c5fd;
+}
+
+:root[data-skin][data-theme='dark'] .sf-toast__close {
+  color: var(--sf-text-muted);
+}
+
+/* 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/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.sinDesborde.test.d.ts

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

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