@sfperusacdev/sf-ui 0.1.32 → 0.1.34

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

@@ -25,13 +25,16 @@ export type KPICardProps = {
     /** Controla el borde superior de 3px (.sf-kpi-card). Por defecto true en "stacked" (como hoy) y false en
      * "leading-icon" (el mockup no lo tiene). */
     accentBar?: boolean;
+    /** Por defecto (false) el label se trunca en una línea (acabado actual). Con true se permite el salto de línea:
+     * para tarjetas angostas (5 KPI en la columna izquierda con la ficha abierta, mockup 031). */
+    labelWrap?: boolean;
     /** Solo aplica a `layout="leading-icon"` (el tile `.sf-kpi-tile`). En "stacked" el icono va en
      * `.sf-card-icon`, que no depende del tono, y esta prop se ignora. Por defecto "solid" = aspecto actual. */
     iconStyle?: KPICardIconStyle;
     className?: string;
     onClick?: () => void;
 };
-export declare const KPICard: ({ label, value, sublabel, icon, iconClassName, trend, trendLabel, accentTone, progress, layout, accentBar, iconStyle, className, onClick, }: KPICardProps) => import("react").JSX.Element;
+export declare const KPICard: ({ label, value, sublabel, icon, iconClassName, trend, trendLabel, accentTone, progress, layout, accentBar, iconStyle, labelWrap, className, onClick, }: KPICardProps) => import("react").JSX.Element;
 type KPIGridProps = {
     children: ReactNode;
     cols?: 2 | 3 | 4 | 5;

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

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export type DetailSectionTone = "default" | "info" | "danger" | "warning" | "success";
+export type DetailSectionDensity = "sm" | "md";
+export type DetailSectionRow = {
+    label: string;
+    value: ReactNode;
+    /** Línea de 12px bajo el valor — p.ej. "Vencido hace 72 días". El color lo decide el consumidor en el nodo. */
+    hint?: ReactNode;
+};
+export type DetailSectionProps = {
+    /** Título de la cabecera, 14px/600 — p.ej. "Carnet del conductor". */
+    title: string;
+    /** Icono a la izquierda del título (inline-flex). */
+    icon?: ReactNode;
+    /** "default": cabecera `--sf-surface-alt`. Los demás: fondo tenue del tono e icono/título en su color
+     * (mockup 0402 Conductores: "Carnet del conductor" en `danger` cuando está vencido). */
+    tone?: DetailSectionTone;
+    /** Filas label/valor separadas por línea `--sf-border`; el valor va alineado a la izquierda de su columna. */
+    rows?: DetailSectionRow[];
+    /** Contenido libre bajo las filas. */
+    children?: ReactNode;
+    className?: string;
+    /** "md" (por defecto) o "sm" = padding y fuente menores para paneles laterales de 380px. */
+    density?: DetailSectionDensity;
+};
+export declare const DetailSection: ({ title, icon, tone, rows, children, className, density }: DetailSectionProps) => import("react").JSX.Element;

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

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

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

@@ -18,6 +18,9 @@ export type DetailSidePanelProps = {
     headerAction?: ReactNode;
     /** Icono del bloque de identidad (tile 44px). */
     icon?: ReactNode;
+    /** Tamaño del tile de identidad. "sm" (por defecto) = 44px, el acabado actual. "lg" = 112×84px, para una foto
+     * de la entidad (mockup 031 Vehículos). No cambia nada más del bloque. */
+    iconSize?: "sm" | "lg";
     /** Encabezado del bloque de identidad, 18px bold — p.ej. la placa. */
     heading: string;
     /** Badge del bloque de identidad — p.ej. el estado operativo. */
@@ -32,4 +35,4 @@ export type DetailSidePanelProps = {
     width?: number | string;
     className?: string;
 };
-export declare const DetailSidePanel: ({ title, onClose, headerAction, icon, heading, badge, rows, align, actions, sectionTitle, items, width, className, }: DetailSidePanelProps) => import("react").JSX.Element;
+export declare const DetailSidePanel: ({ title, onClose, headerAction, icon, iconSize, heading, badge, rows, align, actions, sectionTitle, items, width, className, }: DetailSidePanelProps) => import("react").JSX.Element;

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

@@ -13,4 +13,6 @@ export { DashboardCard, DashboardGrid, DashboardSection, DashboardStatBar, Dashb
 export type { DashboardCardProps } from './DashboardCard';
 export { DetailSidePanel } from './DetailSidePanel';
 export type { DetailSidePanelProps, DetailSidePanelRow, DetailSidePanelSecondaryItem } from './DetailSidePanel';
+export { DetailSection } from './DetailSection';
+export type { DetailSectionProps, DetailSectionRow, DetailSectionTone, DetailSectionDensity } from './DetailSection';
 export type { StepStatus, StepItem, CalendarBadgeVariant, CalendarDayBadge, DonutGaugeSize, DashboardCardVariant, EventStatus, EventItem, AlertRowItem, AlertRowSeverity, AlertRowListHeaderLabels, StatBarItem, } from './types';

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { FieldValues, Path, UseFormReturn } from 'react-hook-form';
 import { ColumnDef } from '@tanstack/react-table';
 import { SelectOption } from './SelectOption';
@@ -16,6 +17,12 @@ type AsyncSearchTableSelectProps<TFormValues extends FieldValues, TOption extend
     pageSize?: number;
     onChange?: (value: string | string[]) => void;
     loadOnMount?: boolean;
+    searchPlaceholder?: string;
+    helperText?: ReactNode;
+    minSearchLength?: number;
+    promptIcon?: ReactNode;
+    promptTitle?: string;
+    promptMessage?: ReactNode;
 };
-export declare const AsyncSearchTableSelect: <TFormValues extends FieldValues, TOption extends SelectOption = SelectOption>({ form, name, loadOptions, columns, searchKeys, label, info, required, multiple, emptyMessage, readOnly, pageSize, onChange, loadOnMount, }: AsyncSearchTableSelectProps<TFormValues, TOption>) => import("react").JSX.Element;
+export declare const AsyncSearchTableSelect: <TFormValues extends FieldValues, TOption extends SelectOption = SelectOption>({ form, name, loadOptions, columns, searchKeys, label, info, required, multiple, emptyMessage, readOnly, pageSize, onChange, loadOnMount, searchPlaceholder, helperText, minSearchLength, promptIcon, promptTitle, promptMessage, }: AsyncSearchTableSelectProps<TFormValues, TOption>) => import("react").JSX.Element;
 export {};

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { FieldValues, Path, UseFormReturn } from 'react-hook-form';
 import { ColumnDef } from '@tanstack/react-table';
 import { SelectOption } from './SelectOption';
@@ -17,6 +18,20 @@ type SearchTableSelectProps<TFormValues extends FieldValues, TOption extends Sel
     pageSize?: number;
     onChange?: (value: string | string[]) => void;
     onRefresh?: () => Promise<void> | void;
+    /** Placeholder de la caja de búsqueda. Default: "Buscar..." ("Cargando..." mientras `loading`). */
+    searchPlaceholder?: string;
+    /** Texto de ayuda bajo la caja de búsqueda. Sin la prop no se renderiza nada. */
+    helperText?: ReactNode;
+    /**
+     * Cantidad mínima de caracteres (del texto ya recortado con `trim`) para listar filas.
+     * Default `0` = comportamiento histórico: la lista se muestra siempre.
+     * Con un valor > 0, mientras la búsqueda no alcance el mínimo se pinta el
+     * estado inicial (`promptIcon` / `promptTitle` / `promptMessage`) en lugar de la tabla.
+     */
+    minSearchLength?: number;
+    promptIcon?: ReactNode;
+    promptTitle?: string;
+    promptMessage?: ReactNode;
 };
-export declare const SearchTableSelect: <TFormValues extends FieldValues, TOption extends SelectOption = SelectOption>({ form, name, options, columns: extraColumns, searchKeys, label, info, required, multiple, emptyMessage, readOnly, loading, pageSize, onChange, onRefresh, }: SearchTableSelectProps<TFormValues, TOption>) => import("react").JSX.Element;
+export declare const SearchTableSelect: <TFormValues extends FieldValues, TOption extends SelectOption = SelectOption>({ form, name, options, columns: extraColumns, searchKeys, label, info, required, multiple, emptyMessage, readOnly, loading, pageSize, onChange, onRefresh, searchPlaceholder, helperText, minSearchLength, promptIcon, promptTitle, promptMessage, }: SearchTableSelectProps<TFormValues, TOption>) => import("react").JSX.Element;
 export {};

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

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

package/package.json

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