@sfperusacdev/sf-ui 0.1.21 → 0.1.23

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+type StatCardProps = {
+    value: ReactNode;
+    label: ReactNode;
+    /** color CSS del acento superior (y del icono); default var(--sf-success) */
+    accent?: string;
+    /** icono opcional; se pinta dentro de un halo del color del acento */
+    icon?: ReactNode;
+    className?: string;
+};
+/**
+ * Tarjeta KPI de los reportes (mockup transporte): franja superior de color,
+ * icono con halo, valor grande y label. El halo se deriva del acento con
+ * color-mix para no pedir dos colores.
+ */
+export declare const StatCard: ({ value, label, accent, icon, className }: StatCardProps) => import("react").JSX.Element;
+export {};

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

@@ -2,6 +2,7 @@ export { Stepper } from './Stepper';
 export type { StepperVariant } from './Stepper';
 export { TramoCard } from './TramoCard';
 export type { TramoCardTipo } from './TramoCard';
+export { StatCard } from './StatCard';
 export { Calendar } from './Calendar';
 export { MONTH_NAMES, WEEKDAY_LABELS, toLocalYMD, parseYMD, buildMonthGrid } from './calendarUtils';
 export { DonutGauge, DonutGaugeRow } from './DonutGauge';

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

@@ -11,11 +11,15 @@ type InputProps<TFormValues extends FieldValues> = {
     className?: string;
     placeholder?: string;
     readOnly?: boolean;
+    /** límites nativos para type="number" (y step opcional) */
+    min?: number | string;
+    max?: number | string;
+    step?: number | string;
     onChange?: (value: string) => void;
     icon?: IconType;
     small?: boolean;
     onIconClick?: () => Promise<void> | void;
     onRefresh?: () => Promise<void> | void;
 };
-export declare const Input: <TFormValues extends FieldValues>({ form, name, label, info, required, type, className, placeholder, readOnly, 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, }: InputProps<TFormValues>) => React.JSX.Element;
 export {};

package/dist/types/src/components/range-inputs/DateRangeFields.d.ts

@@ -0,0 +1,37 @@
+import { FieldValues, Path, UseFormReturn } from 'react-hook-form';
+export type DateRangeAdjustEnd = "start" | "month-end" | "none";
+type DateRangeFieldsProps<TFormValues extends FieldValues> = {
+    form: UseFormReturn<TFormValues>;
+    startName: Path<TFormValues>;
+    endName: Path<TFormValues>;
+    startLabel?: string;
+    endLabel?: string;
+    required?: boolean;
+    /** por defecto hereda `required`; útil para rangos con fin opcional */
+    endRequired?: boolean;
+    small?: boolean;
+    readOnlyEnd?: boolean;
+    /**
+     * Qué hacer cuando el fin queda antes del inicio:
+     * - "start": el fin se iguala al inicio (default)
+     * - "month-end": el fin salta al último día del mes del inicio (contratos)
+     * - "none": no autocorrige (el `min` nativo igual limita el calendario)
+     */
+    adjustEnd?: DateRangeAdjustEnd;
+    /** notifica la autocorrección (para que el consumidor muestre su toast) */
+    onEndAdjusted?: (nuevaFecha: string) => void;
+    className?: string;
+};
+/**
+ * Par de fechas Desde/Hasta ligado a DOS campos planos del formulario
+ * (p.ej. `fecha_inicio` / `fecha_fin` de un entity), cada uno con su label.
+ * El calendario del fin no permite fechas anteriores al inicio (min nativo)
+ * y, si igual queda un rango invertido (tipeo manual, cambio del inicio),
+ * el fin se autocorrige según `adjustEnd`.
+ *
+ * Diferencia con `DateRangeInput`: aquel es UN solo campo cuyo valor es un
+ * objeto `{start, end}` (con soporte UTC) — ideal para filtros; este mapea
+ * directo a columnas del entity, que es el caso de los mantenimientos.
+ */
+export declare const DateRangeFields: <TFormValues extends FieldValues>({ form, startName, endName, startLabel, endLabel, required, endRequired, small, readOnlyEnd, adjustEnd, onEndAdjusted, className, }: DateRangeFieldsProps<TFormValues>) => import("react").JSX.Element;
+export {};

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

@@ -1,5 +1,7 @@
 export { DateRangeInput } from './DateRangeInput';
 export type { DateRangeInputProps } from './DateRangeInput';
+export { DateRangeFields } from './DateRangeFields';
+export type { DateRangeAdjustEnd } from './DateRangeFields';
 export { DateRangeUtcInput } from './DateRangeUtcInput';
 export { TimeRangeInput } from './TimeRangeInput';
 export type { TimeRangeInputProps } from './TimeRangeInput';

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

@@ -1,9 +1,17 @@
+import { ReactNode } from 'react';
 export type EditableColumn<T extends Record<string, unknown>> = {
     id: keyof T & string;
     header: string;
     editable?: boolean;
     sortable?: boolean;
     align?: "left" | "right";
+    /** tipo del input en modo form (default "text") */
+    type?: "text" | "date" | "number";
+    placeholder?: string;
+    /** ancho CSS de la columna (p.ej. "2fr" no aplica: usar "220px" o "20%") */
+    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;
 };
 export type EditableDataGridProps<T extends Record<string, unknown>> = {
     data: T[];
@@ -11,5 +19,26 @@ export type EditableDataGridProps<T extends Record<string, unknown>> = {
     rowKey: keyof T & string;
     onChange?: (next: T[]) => void;
     className?: string;
+    /**
+     * - "cell" (default): la tabla se ve como texto y se edita celda a celda
+     *   (doble clic / Enter), comportamiento histórico.
+     * - "form": grilla del mockup transporte — inputs siempre visibles por
+     *   celda, columna #, botón para agregar fila en blanco y ✕ para quitar.
+     */
+    mode?: "cell" | "form";
+    /** modo form: muestra la columna # con el número de fila */
+    showIndex?: boolean;
+    /** modo form: agrega una fila en blanco (el consumidor la fabrica) */
+    onAddRow?: () => void;
+    addLabel?: string;
+    /** modo form: quita la fila (el consumidor decide si es delete o descarte) */
+    onRemoveRow?: (row: T, originalIndex: number) => void;
+    /** título del toolbar (p.ej. "Contactos · 8") */
+    title?: ReactNode;
+    /** paginación en cliente (mockup: "Mostrar 5 por página") */
+    pageSize?: number;
+    emptyMessage?: string;
 };
-export declare const EditableDataGrid: <T extends Record<string, unknown>>({ data, columns, rowKey, onChange, className, }: EditableDataGridProps<T>) => import("react").JSX.Element;
+/** true si TODOS los campos indicados están vacíos ("" / null / undefined / 0 no cuenta como vacío) */
+export declare const isBlankRow: <T extends object>(row: T, keys: Array<keyof T & string>) => boolean;
+export declare const EditableDataGrid: <T extends Record<string, unknown>>({ data, columns, rowKey, onChange, className, mode, showIndex, onAddRow, addLabel, onRemoveRow, title, pageSize, emptyMessage, }: EditableDataGridProps<T>) => import("react").JSX.Element;

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

@@ -20,7 +20,7 @@ export { ActiveFiltersBar } from './ActiveFiltersBar';
 export type { ActiveFiltersBarProps } from './ActiveFiltersBar';
 export { buildActiveFilterChips, formatColumnFilterValue } from './activeFilterUtils';
 export type { ActiveFilterChip } from './activeFilterUtils';
-export { EditableDataGrid } from './EditableDataGrid';
+export { EditableDataGrid, isBlankRow } from './EditableDataGrid';
 export type { EditableColumn, EditableDataGridProps } from './EditableDataGrid';
 export { ExpandableTableSection } from './ExpandableTableSection';
 export type { ExpandableTableSectionItem, ExpandableTableSectionProps, ExpandableTableSectionTableConfig, } from './ExpandableTableSection';

package/package.json

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