@sfperusacdev/sf-ui 0.1.33 → 0.1.34

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/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.33",
+  "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",