@sfperusacdev/sf-ui 0.1.34 → 0.1.35

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

@@ -1,9 +1,14 @@
-export type StepStatus = "completed" | "active" | "pending" | "error";
+/** "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";
 export type StepItem = {
     key: string;
     label: string;
     sublabel?: string;
     status?: StepStatus;
+    /** 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;
 };
 export type CalendarBadgeVariant = "primary" | "warning" | "danger" | "success" | "neutral";
 export type CalendarDayBadge = {
@@ -13,7 +18,20 @@ export type CalendarDayBadge = {
 };
 export type DonutGaugeSize = "xs" | "sm" | "md" | "lg";
 export type DashboardCardVariant = "default" | "accent" | "critical" | "warning" | "success";
+/** Estado del contenido de `DashboardCard`. "idle" (por defecto) = renderiza `children` tal cual (acabado
+ * actual). Precedencia cuando se combinan por error del consumidor: "error" > "loading" > "empty" > "idle". */
+export type DashboardCardState = "idle" | "loading" | "error" | "empty";
 export type EventStatus = "success" | "warning" | "danger" | "info" | "default";
+/** Densidad de filas en `AlertSummaryList`/`AlertRowList`. "comfortable" (por defecto) = acabado
+ * actual. "compact" reduce el padding vertical de cada fila. */
+export type AlertDensity = "comfortable" | "compact";
+/** Acción explícita de una fila (ej. "Ver detalle", "Marcar leído"), renderizada como botón propio.
+ * Mutuamente excluyente con que la fila entera sea clickeable (`onClick` de la fila): con `actions`
+ * presente, la fila deja de ser un `role="button"` — evita anidar un botón dentro de otro botón. */
+export type AlertActionItem = {
+    label: string;
+    onClick: () => void;
+};
 export type EventItem = {
     id?: string;
     time: string;
@@ -38,6 +56,9 @@ export type AlertRowItem = {
     /** Icono de severidad antes de la placa. Solo se muestra con `AlertRowList columns`. */
     severity?: AlertRowSeverity;
     onClick?: () => void;
+    /** Ver `AlertActionItem`. Si viene con 1+ elementos, gana sobre `onClick` (la fila deja de ser
+     * clickeable como un todo y cada acción es su propio botón). */
+    actions?: AlertActionItem[];
 };
 /** Textos de la cabecera de `AlertRowList columns` (por defecto "Hora", "Vehículo", "Descripción"). */
 export type AlertRowListHeaderLabels = {

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

@@ -0,0 +1,29 @@
+import { ImgHTMLAttributes, ReactNode } from 'react';
+export type MediaPanelOverlay = "none" | "gradient-bottom" | "gradient-top" | "dark";
+export type MediaPanelFit = "cover" | "contain";
+export type MediaPanelProps = {
+    src: string;
+    alt: string;
+    /** Relación de aspecto CSS (`width/height`), ej. "16/9", "4/3", "1/1". Por defecto "16/9". */
+    aspectRatio?: string;
+    fit?: MediaPanelFit;
+    /** Capa de degradado/oscurecimiento sobre la imagen, para que texto superpuesto (vía `children`) se
+     * siga leyendo. "none" (por defecto) = sin capa. */
+    overlay?: MediaPanelOverlay;
+    /** Contenido superpuesto (ej. un título editorial) — se ancla abajo a la izquierda por defecto. */
+    children?: ReactNode;
+    rounded?: boolean;
+    loading?: "lazy" | "eager";
+    /** Se muestra si `src` falla al cargar (ej. un icono o texto). Sin `fallback`, un error de carga
+     * deja el panel vacío con el `overlay`/`children` igual encima, sin romper el layout. */
+    fallback?: ReactNode;
+    className?: string;
+    imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "loading">;
+};
+/**
+ * Imagen/visual dominante a proporción fija, con degradado opcional y contenido superpuesto —
+ * para una intro o portada de estilo editorial (no existía nada equivalente en la librería: lo más
+ * 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;

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

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

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

@@ -14,3 +14,5 @@ export { Timeline } from './Timeline';
 export type { TimelineItem, TimelineProps, TimelineStatus } from './Timeline';
 export { Carousel } from './Carousel';
 export type { CarouselProps } from './Carousel';
+export { MediaPanel } from './MediaPanel';
+export type { MediaPanelFit, MediaPanelOverlay, MediaPanelProps } from './MediaPanel';

package/dist/types/src/components/feedback/Alert.actions.test.d.ts

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

package/dist/types/src/components/feedback/Alert.d.ts

@@ -1,5 +1,9 @@
 import { ReactNode } from 'react';
 export type AlertVariant = "info" | "success" | "warning" | "danger";
+export type AlertAction = {
+    label: string;
+    onClick: () => void;
+};
 type AlertProps = {
     variant?: AlertVariant;
     title?: string;
@@ -7,7 +11,10 @@ type AlertProps = {
     dismissible?: boolean;
     onDismiss?: () => void;
     icon?: ReactNode;
+    /** Acciones explícitas (ej. "Confirmar de todos modos", "Revisar") — para alertas contextuales que
+     * ofrecen una salida además de informar. Sin `actions`, el render es idéntico al de antes. */
+    actions?: AlertAction[];
     className?: string;
 };
-export declare const Alert: ({ variant, title, message, dismissible, onDismiss, icon, className, }: AlertProps) => import("react").JSX.Element | null;
+export declare const Alert: ({ variant, title, message, dismissible, onDismiss, icon, actions, className, }: AlertProps) => import("react").JSX.Element | null;
 export {};

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

@@ -1,5 +1,5 @@
 export { Alert } from './Alert';
-export type { AlertVariant } from './Alert';
+export type { AlertVariant, AlertAction } from './Alert';
 export { EmptyState } from './EmptyState';
 export { ErrorView } from './ErrorView';
 export { LoadingView } from './LoadingView';

package/dist/types/src/components/inputs/Input.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { FieldValues, Path, UseFormReturn } from 'react-hook-form';
 import { IconType } from 'react-icons';
+export type InputVariant = "default" | "editorial";
 type InputProps<TFormValues extends FieldValues> = {
     form: UseFormReturn<TFormValues>;
     name: Path<TFormValues>;
@@ -20,6 +21,11 @@ type InputProps<TFormValues extends FieldValues> = {
     small?: boolean;
     onIconClick?: () => Promise<void> | void;
     onRefresh?: () => Promise<void> | void;
+    /** "default" (por defecto) = acabado actual, con `fieldClassName` (compartido por los ~24 inputs
+     * de la librería, sin tocar). "editorial" = texto grande, sin caja, solo línea inferior — pensado
+     * para experiencias de una pregunta por pantalla. Usa clases propias de este componente; NO
+     * modifica `fieldClassName.ts` ni afecta a ningún otro input. */
+    variant?: InputVariant;
 };
-export declare const Input: <TFormValues extends FieldValues>({ form, name, label, info, required, type, className, placeholder, readOnly, min, max, step, onChange, icon, small, onIconClick, onRefresh, }: InputProps<TFormValues>) => React.JSX.Element;
+export declare const Input: <TFormValues extends FieldValues>({ form, name, label, info, required, type, className, placeholder, readOnly, min, max, step, onChange, icon, small, onIconClick, onRefresh, variant, }: InputProps<TFormValues>) => React.JSX.Element;
 export {};

package/dist/types/src/components/inputs/Input.test.d.ts

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

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

@@ -3,6 +3,7 @@ export { fieldClassName } from './fieldClassName';
 export { inputFocusTransition } from './inputFocusTransition';
 export { textareaClassName } from './textareaClassName';
 export { Input } from './Input';
+export type { InputVariant } from './Input';
 export { TextArea } from './TextArea';
 export { NumberInput } from './NumberInput';
 export { DateInput } from './DateInput';

package/dist/types/src/components/interactive-inputs/AllocationBar.d.ts

@@ -0,0 +1,25 @@
+import { MetricBarTone } from '../cards/types';
+export type AllocationSegment = {
+    key: string;
+    label: string;
+    value: number;
+    tone?: MetricBarTone;
+};
+export type AllocationBarProps = {
+    /** Cada segmento con su valor absoluto (no %) — el ancho se calcula sobre la suma de todos. */
+    segments: AllocationSegment[];
+    /** Sin `onChange`, la barra es de solo lectura (sin manijas de arrastre) — para mostrar una
+     * distribución fija. Con `onChange`, arrastrar/teclado entre dos segmentos vecinos redistribuye
+     * SOLO ese par (la suma total no cambia), y se llama con el array completo actualizado. */
+    onChange?: (segments: AllocationSegment[]) => void;
+    unit?: string;
+    valueFormat?: (value: number) => string;
+    className?: string;
+};
+/**
+ * Barra proporcional editable para repartir un total entre categorías (presupuesto, horas, recursos):
+ * arrastrar el límite entre dos segmentos vecinos redistribuye solo ese par, la suma total se
+ * mantiene siempre — no hace falta re-normalizar nada. Cada manija es `role="slider"` con flechas de
+ * teclado como alternativa al drag (Shift+flecha = paso grande).
+ */
+export declare const AllocationBar: ({ segments, onChange, unit, valueFormat, className }: AllocationBarProps) => import("react").JSX.Element;

package/dist/types/src/components/interactive-inputs/AllocationBar.test.d.ts

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

package/dist/types/src/components/interactive-inputs/CardRadioGroup.d.ts

@@ -1,7 +1,12 @@
+import { ReactNode } from 'react';
 export type CardRadioOption = {
     value: string;
     label: string;
     detail?: string;
+    /** Icono opcional sobre el label (ej. un glifo de sf-ui o de `react-icons`). Sin `icon`, el render
+     * es idéntico al de antes. No reemplaza el marcador de selección (el `role="radiogroup"` lo necesita
+     * para que el estado seleccionado sea perceptible sin depender solo del color del borde). */
+    icon?: ReactNode;
     disabled?: boolean;
 };
 export type CardRadioGroupProps = {

package/dist/types/src/components/interactive-inputs/CardRadioGroup.test.d.ts

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

package/dist/types/src/components/interactive-inputs/SemanticSlider.d.ts

@@ -0,0 +1,21 @@
+export type SemanticSliderZone = {
+    value: string;
+    label: string;
+};
+export type SemanticSliderProps = {
+    value: string;
+    onChange: (value: string) => void;
+    /** Zonas ordenadas de menor a mayor (ej. "Deficiente" → "Excelente"). Mínimo 2. */
+    zones: SemanticSliderZone[];
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+};
+/**
+ * Slider de escala semántica: en vez de un número, el usuario elige una zona nombrada
+ * (calidad, severidad, riesgo, avance...). Es un `<input type="range">` nativo con `step=1` sobre el
+ * índice de `zones` — teclado (flechas), mouse y touch funcionan gratis por ser nativo, igual que
+ * `SliderInput`. Distinto de `SliderInput`: ese es numérico con valor libre; este es una escala
+ * ordinal fija con significado en cada posición.
+ */
+export declare const SemanticSlider: ({ value, onChange, zones, label, disabled, className }: SemanticSliderProps) => import("react").JSX.Element;

package/dist/types/src/components/interactive-inputs/SemanticSlider.test.d.ts

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

package/dist/types/src/components/interactive-inputs/TemporalScrub.d.ts

@@ -0,0 +1,29 @@
+export type TemporalScrubMark = {
+    /** Mismo dominio que `min`/`max`/`value` (ej. timestamp en ms). */
+    value: number;
+    label: string;
+};
+export type TemporalScrubProps = {
+    /** Momento actual, en el mismo dominio que `min`/`max` (ej. `Date.now()` o un timestamp cualquiera). */
+    value: number;
+    onChange: (value: number) => void;
+    min: number;
+    max: number;
+    step?: number;
+    /** Puntos de referencia con etiqueta sobre la pista (ej. "Ayer", "Hoy", "Ahora"). */
+    marks?: TemporalScrubMark[];
+    /** Formatea el valor mostrado sobre el control. Por defecto, hora local (`toLocaleTimeString`). */
+    formatValue?: (value: number) => string;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+};
+/**
+ * Selector de un instante sobre una línea de tiempo continua (arrastre + teclado), con marcas de
+ * referencia con etiqueta. Distinto de `DatePicker` (que es un calendario para elegir una fecha, no
+ * un punto continuo en un rango) — pensado para "¿cuándo pasó esto?" dentro de un rango acotado
+ * (ej. las últimas 48 horas), no para elegir cualquier fecha del calendario.
+ * Es un `<input type="range">` nativo, igual que `SliderInput`/`SemanticSlider` — teclado y accesibilidad
+ * vienen gratis por ser nativo.
+ */
+export declare const TemporalScrub: ({ value, onChange, min, max, step, marks, formatValue, label, disabled, className, }: TemporalScrubProps) => import("react").JSX.Element;

package/dist/types/src/components/interactive-inputs/TemporalScrub.test.d.ts

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

package/dist/types/src/components/interactive-inputs/index.d.ts

@@ -20,5 +20,11 @@ export { SortableList } from './SortableList';
 export type { SortableListItem, SortableListProps } from './SortableList';
 export { CardRadioGroup } from './CardRadioGroup';
 export type { CardRadioGroupProps, CardRadioOption } from './CardRadioGroup';
+export { SemanticSlider } from './SemanticSlider';
+export type { SemanticSliderProps, SemanticSliderZone } from './SemanticSlider';
+export { AllocationBar } from './AllocationBar';
+export type { AllocationBarProps, AllocationSegment } from './AllocationBar';
+export { TemporalScrub } from './TemporalScrub';
+export type { TemporalScrubMark, TemporalScrubProps } from './TemporalScrub';
 export { clampNumber, formatSliderLabel, emptyTags, normalizeTags, emptyKeyValuePairs, normalizeKeyValuePairs, emptyNumberRange, normalizeNumberRange, normalizeHexColor, progressPercent, } from './interactiveUtils';
 export type { NumberRange, KeyValuePair } from './types';

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

@@ -1,13 +1,17 @@
 import { ReactNode } from 'react';
-type PageHeaderProps = {
+export type PageHeaderProps = {
     title: string;
     subtitle?: string;
     eyebrow?: string;
+    /** Indicador de paso (ej. "01/05"), separado de `eyebrow` — para un formulario multietapa donde el
+     * número de paso y la etiqueta de sección son dos datos distintos que no deben concatenarse a mano
+     * en un solo string. Se pinta como una píldora antes de `eyebrow`/`title`. Sin `stepLabel`, el render
+     * es idéntico al de antes. */
+    stepLabel?: string;
     icon?: ReactNode;
     actions?: ReactNode;
     className?: string;
     tone?: "default" | "app";
     sticky?: boolean;
 };
-export declare const PageHeader: ({ title, subtitle, eyebrow, icon, actions, className, tone, sticky, }: PageHeaderProps) => import("react").JSX.Element;
-export {};
+export declare const PageHeader: ({ title, subtitle, eyebrow, stepLabel, icon, actions, className, tone, sticky, }: PageHeaderProps) => import("react").JSX.Element;

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

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

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

@@ -1,6 +1,7 @@
 export { PageContainer } from './PageContainer';
 export { TablePageLayout } from './TablePageLayout';
 export { PageHeader } from './PageHeader';
+export type { PageHeaderProps } from './PageHeader';
 export { SidePanel } from './SidePanel';
 export { Tabs } from './Tabs';
 export type { TabItem } from './Tabs';

package/dist/types/src/components/table/EditableDataGrid.cellTone.test.d.ts

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

package/dist/types/src/components/table/EditableDataGrid.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { MetricBarTone } from '../cards/types';
 export type EditableColumn<T extends Record<string, unknown>> = {
     id: keyof T & string;
     header: string;
@@ -12,6 +13,11 @@ export type EditableColumn<T extends Record<string, unknown>> = {
     width?: string;
     /** celda custom en modo form (p.ej. botón PDF); recibe la fila y su índice real */
     render?: (row: T, originalIndex: number) => ReactNode;
+    /** Colorea el fondo de la celda según su valor (ej. matriz de intensidad tipo heatmap: productividad,
+     * ocupación, calidad). Devuelve `undefined` para dejar la celda sin colorear. El color es solo un
+     * refuerzo visual — el valor y el `tooltip`/`title` siguen siendo texto, nunca depende únicamente
+     * del color (regla de accesibilidad del resto de la librería). */
+    cellTone?: (value: T[keyof T & string], row: T) => MetricBarTone | undefined;
 };
 export type EditableDataGridProps<T extends Record<string, unknown>> = {
     data: T[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfperusacdev/sf-ui",
-  "version": "0.1.34",
+  "version": "0.1.35",
   "description": "SF UI — librería de componentes React (inputs, tablas, hooks) para aplicaciones SF Perú.",
   "type": "module",
   "main": "./dist/sf-ui.umd.cjs",