@sfperusacdev/sf-ui 0.1.28 → 0.1.29

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 export type KPICardAccentTone = "emerald" | "blue" | "amber" | "red" | "teal" | "slate";
+export type KPICardLayout = "stacked" | "leading-icon";
 export type KPICardProgress = {
     value: number;
     max: number;
@@ -15,10 +16,16 @@ type KPICardProps = {
     trendLabel?: string;
     accentTone?: KPICardAccentTone;
     progress?: KPICardProgress;
+    /** Disposición visual. "stacked" (por defecto) reproduce el acabado actual; "leading-icon" pone el icono a la
+     * izquierda en un tile de color sólido con label/valor en columna, como en el mockup de Torre de control. */
+    layout?: KPICardLayout;
+    /** 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;
     className?: string;
     onClick?: () => void;
 };
-export declare const KPICard: ({ label, value, sublabel, icon, iconClassName, trend, trendLabel, accentTone, progress, className, onClick, }: KPICardProps) => import("react").JSX.Element;
+export declare const KPICard: ({ label, value, sublabel, icon, iconClassName, trend, trendLabel, accentTone, progress, layout, accentBar, className, onClick, }: KPICardProps) => import("react").JSX.Element;
 type KPIGridProps = {
     children: ReactNode;
     cols?: 2 | 3 | 4 | 5;

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type QuickActionTileProps = {
+    label: string;
+    icon: ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    className?: string;
+};
+export declare const QuickActionTile: ({ label, icon, onClick, disabled, className }: QuickActionTileProps) => import("react").JSX.Element;
+export type QuickActionGridProps = {
+    children: ReactNode;
+    cols?: 2 | 3 | 4;
+    className?: string;
+};
+export declare const QuickActionGrid: ({ children, cols, className }: QuickActionGridProps) => import("react").JSX.Element;

package/dist/types/src/components/cards/QuickActionTile.test.d.ts

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

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

@@ -1,7 +1,9 @@
 export { Badge } from './Badge';
 export { badgeClassName, badgeDotClassName } from './badgeClassName';
 export { KPICard, KPIGrid } from './KPICard';
-export type { KPICardAccentTone, KPICardProgress } from './KPICard';
+export type { KPICardAccentTone, KPICardProgress, KPICardLayout } from './KPICard';
+export { QuickActionTile, QuickActionGrid } from './QuickActionTile';
+export type { QuickActionTileProps, QuickActionGridProps } from './QuickActionTile';
 export { MetricBarRow, MetricBarList } from './MetricBar';
 export { EntityCard, EntityCardGrid } from './EntityCard';
 export type { EntityCardProps } from './EntityCard';

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

@@ -8,10 +8,13 @@ export type DashboardCardProps = {
     variant?: DashboardCardVariant;
     span?: 1 | 2 | 3 | 4;
     padding?: "sm" | "md" | "lg" | "none";
+    /** Tamaño de la cabecera. "sm" (por defecto) reproduce el acabado actual; "md" usa el título 15px, icono en
+     * círculo de 28px y padding más generoso del mockup de Torre de control. */
+    headerSize?: "sm" | "md";
     className?: string;
     children?: ReactNode;
 };
-export declare const DashboardCard: ({ title, subtitle, icon, headerAction, variant, span, padding, className, children, }: DashboardCardProps) => import("react").JSX.Element;
+export declare const DashboardCard: ({ title, subtitle, icon, headerAction, variant, span, padding, headerSize, className, children, }: DashboardCardProps) => import("react").JSX.Element;
 type DashboardGridProps = {
     cols?: 2 | 3 | 4 | 5 | 6;
     gap?: "sm" | "md" | "lg";

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

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+export type DetailSidePanelRow = {
+    icon?: ReactNode;
+    label: string;
+    value: ReactNode;
+    hint?: string;
+};
+export type DetailSidePanelSecondaryItem = {
+    icon?: ReactNode;
+    label: string;
+    value: ReactNode;
+};
+export type DetailSidePanelProps = {
+    /** Título del panel (cabecera), 16px bold — p.ej. "Detalle del vehículo". */
+    title?: string;
+    onClose: () => void;
+    /** Slot a la izquierda de la cabecera — p.ej. el botón "Actualizar". */
+    headerAction?: ReactNode;
+    /** Icono del bloque de identidad (tile 44px). */
+    icon?: ReactNode;
+    /** Encabezado del bloque de identidad, 18px bold — p.ej. la placa. */
+    heading: string;
+    /** Badge del bloque de identidad — p.ej. el estado operativo. */
+    badge?: ReactNode;
+    rows?: DetailSidePanelRow[];
+    /** "stack" (por defecto): label arriba, valor debajo. "inline": label a la izquierda, valor a la derecha. */
+    align?: "stack" | "inline";
+    /** Slot de acciones — p.ej. "Centrar en mapa". */
+    actions?: ReactNode;
+    sectionTitle?: string;
+    items?: DetailSidePanelSecondaryItem[];
+    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;

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

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

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

@@ -11,4 +11,6 @@ export { EventLog, AlertRowList, AlertLane } from './EventLog';
 export type { AlertLaneItem } from './EventLog';
 export { DashboardCard, DashboardGrid, DashboardSection, DashboardStatBar, DashboardLayout, } from './DashboardCard';
 export type { DashboardCardProps } from './DashboardCard';
+export { DetailSidePanel } from './DetailSidePanel';
+export type { DetailSidePanelProps, DetailSidePanelRow, DetailSidePanelSecondaryItem } from './DetailSidePanel';
 export type { StepStatus, StepItem, CalendarBadgeVariant, CalendarDayBadge, DonutGaugeSize, DashboardCardVariant, EventStatus, EventItem, AlertRowItem, StatBarItem, } from './types';

package/dist/types/src/components/maps/base/MapLegend.d.ts

@@ -0,0 +1,10 @@
+export type MapLegendItem = {
+    label: string;
+    color: string;
+    count?: number;
+};
+export type MapLegendProps = {
+    items: MapLegendItem[];
+    className?: string;
+};
+export declare const MapLegend: ({ items, className }: MapLegendProps) => import("react").JSX.Element;

package/dist/types/src/components/maps/base/MapLegend.test.d.ts

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

package/dist/types/src/components/maps/base/MapToolbar.d.ts

@@ -0,0 +1,10 @@
+export type MapToolbarMapType = "roadmap" | "satellite";
+export type MapToolbarProps = {
+    mapType: MapToolbarMapType;
+    onMapTypeChange: (mapType: MapToolbarMapType) => void;
+    onFullscreen: () => void;
+    /** Botón de capas — solo se muestra si viene el callback. */
+    onLayers?: () => void;
+    className?: string;
+};
+export declare const MapToolbar: ({ mapType, onMapTypeChange, onFullscreen, onLayers, className }: MapToolbarProps) => import("react").JSX.Element;

package/dist/types/src/components/maps/base/MapToolbar.test.d.ts

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

package/dist/types/src/components/maps/base/MapVehiclePopup.d.ts

@@ -0,0 +1,10 @@
+export type MapVehiclePopupProps = {
+    title: string;
+    subtitle?: string;
+    statusLabel: string;
+    statusColor: string;
+    speedKmh?: number;
+    onClick?: () => void;
+    className?: string;
+};
+export declare const MapVehiclePopup: ({ title, subtitle, statusLabel, statusColor, speedKmh, onClick, className, }: MapVehiclePopupProps) => import("react").JSX.Element;

package/dist/types/src/components/maps/base/MapVehiclePopup.test.d.ts

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

package/dist/types/src/components/maps/base/index.d.ts

@@ -2,3 +2,9 @@ export { MapFrame } from './MapFrame';
 export type { MapFrameProps } from './MapFrame';
 export { MapStatus } from './MapStatus';
 export type { MapStatusProps } from './MapStatus';
+export { MapLegend } from './MapLegend';
+export type { MapLegendItem, MapLegendProps } from './MapLegend';
+export { MapToolbar } from './MapToolbar';
+export type { MapToolbarMapType, MapToolbarProps } from './MapToolbar';
+export { MapVehiclePopup } from './MapVehiclePopup';
+export type { MapVehiclePopupProps } from './MapVehiclePopup';

package/package.json

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