@nubitio/ui 0.5.23 → 0.5.24

package/dist/index.cjs

@@ -1315,6 +1315,25 @@ const StatCard = ({ title, headerExtra, menuVisible = true, menuItems = [{ label
 	})]
 });
 //#endregion
+//#region packages/ui/KpiMetricRow.tsx
+function KpiMetricRow({ items, className = "" }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `nb-kpi-metric-row${className ? ` ${className}` : ""}`,
+		role: "group",
+		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: `nb-kpi-metric-card nb-kpi-metric-card--${item.tone ?? "default"}`,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "nb-kpi-metric-card__label",
+				children: item.label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "nb-kpi-metric-card__value",
+				children: item.value
+			})]
+		}, item.label))
+	});
+}
+//#endregion
 //#region packages/ui/CollapsibleSection.tsx
 /**
 * Accessible collapsible section with a labelled header trigger.
@@ -2687,6 +2706,7 @@ exports.FeatureGate = FeatureGate;
 exports.FileDropzone = FileDropzone;
 exports.FormField = FormField;
 exports.IconButton = IconButton;
+exports.KpiMetricRow = KpiMetricRow;
 exports.Popover = Popover;
 exports.SelectField = SelectField;
 exports.SettingsPanel = SettingsPanel;

package/dist/index.d.cts

@@ -604,6 +604,22 @@ declare const StatCard: ({
   children
 }: StatCardProps) => React$1.JSX.Element;
 //#endregion
+//#region packages/ui/KpiMetricRow.d.ts
+type KpiMetricTone = 'default' | 'success' | 'warning' | 'danger';
+interface KpiMetricItem {
+  label: string;
+  value: ReactNode;
+  tone?: KpiMetricTone;
+}
+interface KpiMetricRowProps {
+  items: KpiMetricItem[];
+  className?: string;
+}
+declare function KpiMetricRow({
+  items,
+  className
+}: KpiMetricRowProps): import("react").JSX.Element | null;
+//#endregion
 //#region packages/ui/CollapsibleSection.d.ts
 interface CollapsibleSectionProps {
   /** Section heading text. */
@@ -901,4 +917,4 @@ interface UiStringsProviderProps {
 declare const UiStringsProvider: React$1.FC<UiStringsProviderProps>;
 declare const useUiStrings: () => UiStrings;
 //#endregion
-export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FeatureGate, type FeatureGateProps, FileDropzone, type FileDropzoneLabels, type FileDropzoneProps, type FileDropzoneValue, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };
+export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FeatureGate, type FeatureGateProps, FileDropzone, type FileDropzoneLabels, type FileDropzoneProps, type FileDropzoneValue, FormField, type FormFieldProps, IconButton, type IconButtonProps, type KpiMetricItem, KpiMetricRow, type KpiMetricRowProps, type KpiMetricTone, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };

package/dist/index.d.mts

@@ -604,6 +604,22 @@ declare const StatCard: ({
   children
 }: StatCardProps) => React$1.JSX.Element;
 //#endregion
+//#region packages/ui/KpiMetricRow.d.ts
+type KpiMetricTone = 'default' | 'success' | 'warning' | 'danger';
+interface KpiMetricItem {
+  label: string;
+  value: ReactNode;
+  tone?: KpiMetricTone;
+}
+interface KpiMetricRowProps {
+  items: KpiMetricItem[];
+  className?: string;
+}
+declare function KpiMetricRow({
+  items,
+  className
+}: KpiMetricRowProps): import("react").JSX.Element | null;
+//#endregion
 //#region packages/ui/CollapsibleSection.d.ts
 interface CollapsibleSectionProps {
   /** Section heading text. */
@@ -901,4 +917,4 @@ interface UiStringsProviderProps {
 declare const UiStringsProvider: React$1.FC<UiStringsProviderProps>;
 declare const useUiStrings: () => UiStrings;
 //#endregion
-export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FeatureGate, type FeatureGateProps, FileDropzone, type FileDropzoneLabels, type FileDropzoneProps, type FileDropzoneValue, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };
+export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FeatureGate, type FeatureGateProps, FileDropzone, type FileDropzoneLabels, type FileDropzoneProps, type FileDropzoneValue, FormField, type FormFieldProps, IconButton, type IconButtonProps, type KpiMetricItem, KpiMetricRow, type KpiMetricRowProps, type KpiMetricTone, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };

package/dist/index.mjs

@@ -1291,6 +1291,25 @@ const StatCard = ({ title, headerExtra, menuVisible = true, menuItems = [{ label
 	})]
 });
 //#endregion
+//#region packages/ui/KpiMetricRow.tsx
+function KpiMetricRow({ items, className = "" }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: `nb-kpi-metric-row${className ? ` ${className}` : ""}`,
+		role: "group",
+		children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+			className: `nb-kpi-metric-card nb-kpi-metric-card--${item.tone ?? "default"}`,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "nb-kpi-metric-card__label",
+				children: item.label
+			}), /* @__PURE__ */ jsx("span", {
+				className: "nb-kpi-metric-card__value",
+				children: item.value
+			})]
+		}, item.label))
+	});
+}
+//#endregion
 //#region packages/ui/CollapsibleSection.tsx
 /**
 * Accessible collapsible section with a labelled header trigger.
@@ -2639,4 +2658,4 @@ function Timeline({ variant = "stepper", orientation = "vertical", title, descri
 	});
 }
 //#endregion
-export { ACCENT_PRESETS, AppDialog, AppDropdown, AppToolbar, Avatar, Badge, Button, Card, Chip, CollapsibleSection, ConfirmDialog, ContextMenu, DatePicker, DateRangePicker, DensityContext, DensityProvider, Drawer, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, FeatureGate, FileDropzone, FormField, IconButton, Popover, SelectField, SettingsPanel, Skeleton, StatCard, TextAreaField, TextField, ThemeContext, ThemeProvider, ThemeSwitcher, Timeline, TimelineItem, Toggle, UiStringsProvider, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };
+export { ACCENT_PRESETS, AppDialog, AppDropdown, AppToolbar, Avatar, Badge, Button, Card, Chip, CollapsibleSection, ConfirmDialog, ContextMenu, DatePicker, DateRangePicker, DensityContext, DensityProvider, Drawer, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, FeatureGate, FileDropzone, FormField, IconButton, KpiMetricRow, Popover, SelectField, SettingsPanel, Skeleton, StatCard, TextAreaField, TextField, ThemeContext, ThemeProvider, ThemeSwitcher, Timeline, TimelineItem, Toggle, UiStringsProvider, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };

package/dist/style.css

@@ -1871,6 +1871,51 @@ html[data-density=compact] .nb-context-menu__item {
 .nb-stat-card--accented-danger {
   border-left: 3px solid var(--error-color);
 }
+.nb-kpi-metric-row {
+  display: grid;
+  gap: var(--space-3);
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  width: 100%;
+}
+
+.nb-kpi-metric-card {
+  background: var(--surface-1);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+  padding: var(--space-3) var(--space-4);
+}
+
+.nb-kpi-metric-card__label {
+  color: var(--text-secondary);
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.nb-kpi-metric-card__value {
+  color: var(--text-primary);
+  font-size: 1.35rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.nb-kpi-metric-card--success .nb-kpi-metric-card__value {
+  color: var(--color-success, #16a34a);
+}
+
+.nb-kpi-metric-card--warning .nb-kpi-metric-card__value {
+  color: var(--color-warning, #d97706);
+}
+
+.nb-kpi-metric-card--danger .nb-kpi-metric-card__value {
+  color: var(--color-error, #dc2626);
+}
 .nb-collapsible__header {
   display: flex;
   align-items: stretch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/ui",
-  "version": "0.5.23",
+  "version": "0.5.24",
   "type": "module",
   "description": "Visual primitives and theme system for the Nubit admin stack (dialogs, cards, toolbar, light/dark theme).",
   "license": "MIT",