@bmsuisse/ui 0.11.0 → 0.12.0

package/dist/index.js

@@ -645,10 +645,15 @@ var sheetVariants = cva3(
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:-translate-y-full data-[state=open]:translate-y-0",
-        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:translate-y-full data-[state=open]:translate-y-0",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:-translate-x-full data-[state=open]:translate-x-0 sm:max-w-sm",
-        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:translate-x-full data-[state=open]:translate-x-0 sm:max-w-sm"
+        // Every edge border below is paired with `border-border` explicitly —
+        // Tailwind v4's bare `border-*` utilities default to `currentColor`,
+        // not the theme's border token, which otherwise renders this seam in
+        // the foreground text color (a harsh, high-contrast line in both
+        // themes) instead of the intended subtle divider.
+        top: "inset-x-0 top-0 border-b border-border data-[state=closed]:-translate-y-full data-[state=open]:translate-y-0",
+        bottom: "inset-x-0 bottom-0 border-t border-border data-[state=closed]:translate-y-full data-[state=open]:translate-y-0",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:-translate-x-full data-[state=open]:translate-x-0 sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4 border-l border-border data-[state=closed]:translate-x-full data-[state=open]:translate-x-0 sm:max-w-sm"
       }
     },
     defaultVariants: {
@@ -929,7 +934,7 @@ var desktopSizeClasses = {
   sm: "max-w-md",
   md: "max-w-xl",
   lg: "max-w-2xl",
-  xl: "max-w-4xl"
+  xl: "max-w-7xl"
 };
 var drawerSizeClasses = {
   sm: "max-h-[50vh]",
@@ -1201,8 +1206,78 @@ function buildRenderChunks(visibleOptions) {
   return chunks;
 }
 
-// src/patterns/combobox/Combobox.tsx
+// src/lib/optionGrid.tsx
 import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+function renderGridOptions({
+  columns,
+  options,
+  activeIndex,
+  multiple,
+  isSelected,
+  onSelect,
+  onHover,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs11(Table, { className: "text-sm", children: [
+    /* @__PURE__ */ jsx25(TableHeader, { children: /* @__PURE__ */ jsxs11(TableRow, { className: "hover:bg-transparent", children: [
+      multiple && /* @__PURE__ */ jsx25(TableHead, { className: "sticky top-0 z-10 w-6 bg-muted" }),
+      columns.map((column) => /* @__PURE__ */ jsx25(
+        TableHead,
+        {
+          className: cn("sticky top-0 z-10 whitespace-nowrap bg-muted text-xs", column.className),
+          children: column.header
+        },
+        column.key
+      ))
+    ] }) }),
+    /* @__PURE__ */ jsx25(TableBody, { children: options.map((option, index) => {
+      const selected = isSelected(option);
+      const active = index === activeIndex;
+      return /* @__PURE__ */ jsxs11(
+        TableRow,
+        {
+          role: "option",
+          "aria-selected": selected,
+          "aria-label": option.label,
+          "aria-disabled": option.disabled,
+          "data-testid": testId ? `${testId}-option` : void 0,
+          "data-option-value": option.value,
+          onMouseEnter: () => onHover(index),
+          onClick: () => {
+            if (!option.disabled) onSelect(option);
+          },
+          className: cn(
+            "cursor-pointer outline-none",
+            // `hover:bg-accent` repeats the active row's own background under
+            // `:hover` -- otherwise TableRow's default `hover:bg-muted/50`
+            // would win over the plain `bg-accent` below (later in the
+            // stylesheet) and flash the active/keyboard-selected row to the
+            // wrong color the instant the mouse sits over it.
+            active && "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground",
+            option.disabled && "pointer-events-none opacity-50"
+          ),
+          children: [
+            multiple && /* @__PURE__ */ jsx25(TableCell, { className: "w-6", children: /* @__PURE__ */ jsx25(
+              "input",
+              {
+                type: "checkbox",
+                checked: selected,
+                readOnly: true,
+                tabIndex: -1,
+                className: "pointer-events-none h-3.5 w-3.5 shrink-0 accent-primary"
+              }
+            ) }),
+            columns.map((column) => /* @__PURE__ */ jsx25(TableCell, { className: cn("truncate", column.className), children: column.key === "label" ? option.label : option.data?.[column.key] }, column.key))
+          ]
+        },
+        option.value
+      );
+    }) })
+  ] });
+}
+
+// src/patterns/combobox/Combobox.tsx
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
 function resolveGroupTriggerLabel(options, selectedValues, groupLabel) {
   const selectedSet = new Set(selectedValues);
   const groupsPresent = Array.from(
@@ -1237,7 +1312,8 @@ function Combobox(props) {
     groupLabels,
     container,
     onSearchChange,
-    selectedLabel
+    selectedLabel,
+    columns
   } = props;
   const testId = props["data-testid"];
   const [open, setOpen] = useState6(false);
@@ -1301,11 +1377,11 @@ function Combobox(props) {
     props.onChange(next);
   }
   const triggerLabel = loading ? loadingMessage : selectedOptions.length === 0 ? selectedValues.length > 0 ? selectedLabel ?? placeholder : placeholder : selectedOptions.length === 1 ? selectedOptions[0]?.label ?? placeholder : (props.multiple ? resolveGroupTriggerLabel(options, selectedValues, groupLabel) : null) ?? `${selectedOptions.length} selected`;
-  const renderChunks = useMemo(() => buildRenderChunks(visibleOptions), [visibleOptions]);
+  const renderChunks = useMemo(() => columns ? [] : buildRenderChunks(visibleOptions), [visibleOptions, columns]);
   function renderOption({ option, index }) {
     const isSelected = selectedValues.includes(option.value);
     const isActive = index === activeIndex;
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs12(
       "button",
       {
         type: "button",
@@ -1321,7 +1397,7 @@ function Combobox(props) {
           isActive && "bg-accent text-accent-foreground"
         ),
         children: [
-          props.multiple ? /* @__PURE__ */ jsx25(
+          props.multiple ? /* @__PURE__ */ jsx26(
             "input",
             {
               type: "checkbox",
@@ -1330,15 +1406,15 @@ function Combobox(props) {
               tabIndex: -1,
               className: "pointer-events-none h-3.5 w-3.5 shrink-0 accent-primary"
             }
-          ) : /* @__PURE__ */ jsx25(Check4, { className: cn("h-4 w-4 shrink-0", isSelected ? "opacity-100" : "opacity-0") }),
-          /* @__PURE__ */ jsx25("span", { className: "truncate", children: option.label })
+          ) : /* @__PURE__ */ jsx26(Check4, { className: cn("h-4 w-4 shrink-0", isSelected ? "opacity-100" : "opacity-0") }),
+          /* @__PURE__ */ jsx26("span", { className: "truncate", children: option.label })
         ]
       },
       option.value
     );
   }
-  return /* @__PURE__ */ jsxs11(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx25(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx26(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs12(
       Button,
       {
         id,
@@ -1354,9 +1430,9 @@ function Combobox(props) {
           className
         ),
         children: [
-          /* @__PURE__ */ jsx25("span", { className: "truncate", children: triggerLabel }),
-          /* @__PURE__ */ jsxs11("span", { className: "flex items-center gap-1", children: [
-            clearable && !loading && selectedValues.length > 0 ? /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26("span", { className: "truncate", children: triggerLabel }),
+          /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-1", children: [
+            clearable && !loading && selectedValues.length > 0 ? /* @__PURE__ */ jsx26(
               "span",
               {
                 role: "button",
@@ -1371,23 +1447,26 @@ function Combobox(props) {
                     props.onChange(null);
                   }
                 },
-                children: /* @__PURE__ */ jsx25(X3, { className: "h-3.5 w-3.5" })
+                children: /* @__PURE__ */ jsx26(X3, { className: "h-3.5 w-3.5" })
               }
             ) : null,
-            /* @__PURE__ */ jsx25(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50", "aria-hidden": "true" })
+            /* @__PURE__ */ jsx26(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50", "aria-hidden": "true" })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26(
       PopoverContent,
       {
         align: "start",
         container,
-        className: "w-[var(--radix-popover-trigger-width)] min-w-[10rem] p-2",
+        className: cn(
+          "w-[var(--radix-popover-trigger-width)] min-w-[10rem] p-2",
+          columns && "w-max min-w-[var(--radix-popover-trigger-width)] max-w-[min(40rem,90vw)]"
+        ),
         onOpenAutoFocus: (event) => event.preventDefault(),
-        children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx25(
+        children: /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx26(
             Input,
             {
               ref: inputRef,
@@ -1401,7 +1480,16 @@ function Combobox(props) {
               "aria-label": searchPlaceholder
             }
           ),
-          /* @__PURE__ */ jsx25("div", { role: "listbox", className: "flex max-h-60 flex-col gap-0.5 overflow-y-auto", children: renderChunks.length === 0 ? /* @__PURE__ */ jsx25("p", { className: "py-2 text-center text-sm text-muted-foreground", children: emptyMessage }) : renderChunks.map((chunk) => {
+          /* @__PURE__ */ jsx26("div", { role: "listbox", className: cn("max-h-60 overflow-y-auto", !columns && "flex flex-col gap-0.5"), children: visibleOptions.length === 0 ? /* @__PURE__ */ jsx26("p", { className: "py-2 text-center text-sm text-muted-foreground", children: emptyMessage }) : columns ? renderGridOptions({
+            columns,
+            options: visibleOptions,
+            activeIndex,
+            multiple: Boolean(props.multiple),
+            isSelected: (option) => selectedValues.includes(option.value),
+            onSelect: selectOption,
+            onHover: setActiveIndex,
+            testId
+          }) : renderChunks.map((chunk) => {
             if (chunk.kind === "single") return renderOption(chunk.row);
             const headerState = groupCheckState(options, selectedValues, chunk.group);
             return (
@@ -1412,14 +1500,14 @@ function Combobox(props) {
               // lives on this wrapper's `pt-1`, not on the header itself -- a margin on
               // the sticky element would travel with it once stuck, leaving a gap at the
               // scrollport's top that the row behind it shows through.
-              /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-0.5 pt-1 first:pt-0", children: [
-                /* @__PURE__ */ jsxs11(
+              /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-0.5 pt-1 first:pt-0", children: [
+                /* @__PURE__ */ jsxs12(
                   "div",
                   {
                     "data-group-header": true,
                     className: "sticky top-0 z-10 flex items-center gap-2 rounded-sm bg-muted px-2 py-1.5 text-sm font-semibold text-foreground",
                     children: [
-                      props.multiple ? /* @__PURE__ */ jsx25(
+                      props.multiple ? /* @__PURE__ */ jsx26(
                         "input",
                         {
                           type: "checkbox",
@@ -1433,7 +1521,7 @@ function Combobox(props) {
                           "aria-label": `Select all of ${groupLabel(chunk.group)}`
                         }
                       ) : null,
-                      /* @__PURE__ */ jsx25("span", { className: "truncate", children: groupLabel(chunk.group) })
+                      /* @__PURE__ */ jsx26("span", { className: "truncate", children: groupLabel(chunk.group) })
                     ]
                   }
                 ),
@@ -1450,7 +1538,7 @@ function Combobox(props) {
 // src/patterns/tag-combobox/TagCombobox.tsx
 import { X as X4 } from "lucide-react";
 import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4, useState as useState7 } from "react";
-import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
 function TagCombobox({
   options,
   value,
@@ -1465,6 +1553,7 @@ function TagCombobox({
   onSearchChange,
   container,
   groupLabels,
+  columns,
   ...rest
 }) {
   const testId = rest["data-testid"];
@@ -1486,7 +1575,7 @@ function TagCombobox({
   useEffect4(() => {
     setActiveIndex((i) => Math.min(Math.max(i, 0), Math.max(visibleOptions.length - 1, 0)));
   }, [visibleOptions.length]);
-  const renderChunks = useMemo2(() => buildRenderChunks(visibleOptions), [visibleOptions]);
+  const renderChunks = useMemo2(() => columns ? [] : buildRenderChunks(visibleOptions), [visibleOptions, columns]);
   useEffect4(() => {
     if (!open) return;
     setSearch("");
@@ -1540,7 +1629,7 @@ function TagCombobox({
   function renderOption({ option, index }) {
     const isSelected = value.includes(option.value);
     const isActive = index === activeIndex;
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs13(
       "button",
       {
         type: "button",
@@ -1556,7 +1645,7 @@ function TagCombobox({
           isActive && "bg-accent text-accent-foreground"
         ),
         children: [
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             "input",
             {
               type: "checkbox",
@@ -1566,14 +1655,14 @@ function TagCombobox({
               className: "pointer-events-none h-3.5 w-3.5 shrink-0 accent-primary"
             }
           ),
-          /* @__PURE__ */ jsx26("span", { className: "truncate", children: option.label })
+          /* @__PURE__ */ jsx27("span", { className: "truncate", children: option.label })
         ]
       },
       option.value
     );
   }
-  return /* @__PURE__ */ jsxs12(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx26(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx27(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs13(
       "div",
       {
         ref: fieldRef,
@@ -1591,13 +1680,13 @@ function TagCombobox({
           if (!disabled) inputRef.current?.focus();
         },
         children: [
-          selectedOptions.map((option) => /* @__PURE__ */ jsxs12(
+          selectedOptions.map((option) => /* @__PURE__ */ jsxs13(
             "span",
             {
               className: "inline-flex items-center gap-1 rounded-full bg-muted py-0.5 pr-1 pl-2.5 text-xs font-medium text-muted-foreground",
               children: [
-                /* @__PURE__ */ jsx26("span", { className: "max-w-48 truncate", children: option.label }),
-                !disabled && /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsx27("span", { className: "max-w-48 truncate", children: option.label }),
+                !disabled && /* @__PURE__ */ jsx27(
                   "button",
                   {
                     type: "button",
@@ -1607,14 +1696,14 @@ function TagCombobox({
                       event.stopPropagation();
                       removeValue(option.value);
                     },
-                    children: /* @__PURE__ */ jsx26(X4, { className: "h-3 w-3" })
+                    children: /* @__PURE__ */ jsx27(X4, { className: "h-3 w-3" })
                   }
                 )
               ]
             },
             option.value
           )),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             "input",
             {
               ref: inputRef,
@@ -1632,18 +1721,30 @@ function TagCombobox({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(
       PopoverContent,
       {
         align: "start",
         container,
-        className: "w-[var(--radix-popover-trigger-width)] min-w-[10rem] p-2",
+        className: cn(
+          "w-[var(--radix-popover-trigger-width)] min-w-[10rem] p-2",
+          columns && "w-max min-w-[var(--radix-popover-trigger-width)] max-w-[min(40rem,90vw)]"
+        ),
         onOpenAutoFocus: (event) => event.preventDefault(),
         onCloseAutoFocus: (event) => event.preventDefault(),
         onInteractOutside: (event) => {
           if (fieldRef.current?.contains(event.target)) event.preventDefault();
         },
-        children: /* @__PURE__ */ jsx26("div", { role: "listbox", className: "flex max-h-60 flex-col gap-0.5 overflow-y-auto", children: loading ? /* @__PURE__ */ jsx26("p", { className: "py-2 text-center text-sm text-muted-foreground", children: loadingMessage }) : renderChunks.length === 0 ? /* @__PURE__ */ jsx26("p", { className: "py-2 text-center text-sm text-muted-foreground", children: emptyMessage }) : renderChunks.map((chunk) => {
+        children: /* @__PURE__ */ jsx27("div", { role: "listbox", className: cn("max-h-60 overflow-y-auto", !columns && "flex flex-col gap-0.5"), children: loading ? /* @__PURE__ */ jsx27("p", { className: "py-2 text-center text-sm text-muted-foreground", children: loadingMessage }) : visibleOptions.length === 0 ? /* @__PURE__ */ jsx27("p", { className: "py-2 text-center text-sm text-muted-foreground", children: emptyMessage }) : columns ? renderGridOptions({
+          columns,
+          options: visibleOptions,
+          activeIndex,
+          multiple: true,
+          isSelected: (option) => value.includes(option.value),
+          onSelect: toggleOption,
+          onHover: setActiveIndex,
+          testId
+        }) : renderChunks.map((chunk) => {
           if (chunk.kind === "single") return renderOption(chunk.row);
           const headerState = groupCheckState(options, value, chunk.group);
           return (
@@ -1653,14 +1754,14 @@ function TagCombobox({
             // past its first row. Spacing above a group lives on this wrapper's
             // `pt-1`/`first:pt-0`, not on the header itself -- see `Combobox`'s own
             // identical structure for why both of these matter.
-            /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-0.5 pt-1 first:pt-0", children: [
-              /* @__PURE__ */ jsxs12(
+            /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-0.5 pt-1 first:pt-0", children: [
+              /* @__PURE__ */ jsxs13(
                 "div",
                 {
                   "data-group-header": true,
                   className: "sticky top-0 z-10 flex items-center gap-2 rounded-sm bg-muted px-2 py-1.5 text-sm font-semibold text-foreground",
                   children: [
-                    /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsx27(
                       "input",
                       {
                         type: "checkbox",
@@ -1674,7 +1775,7 @@ function TagCombobox({
                         "aria-label": `Select all of ${groupLabel(chunk.group)}`
                       }
                     ),
-                    /* @__PURE__ */ jsx26("span", { className: "truncate", children: groupLabel(chunk.group) })
+                    /* @__PURE__ */ jsx27("span", { className: "truncate", children: groupLabel(chunk.group) })
                   ]
                 }
               ),
@@ -1689,37 +1790,37 @@ function TagCombobox({
 
 // src/patterns/alert-box/AlertBox.tsx
 import { AlertCircle, AlertTriangle, CheckCircle2, Info } from "lucide-react";
-import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
 var variantStyles = {
-  error: "border-destructive bg-destructive/10 text-destructive",
-  warning: "border-amber-500 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  error: "border-destructive bg-destructive/10 text-red-800 dark:text-red-300",
+  warning: "border-amber-500 bg-amber-500/10 text-amber-900 dark:text-amber-200",
   info: "border-sky-500 bg-sky-500/10 text-sky-700 dark:text-sky-300",
   success: "border-emerald-500 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
 };
 var defaultIcons = {
-  error: /* @__PURE__ */ jsx27(AlertCircle, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
-  warning: /* @__PURE__ */ jsx27(AlertTriangle, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
-  info: /* @__PURE__ */ jsx27(Info, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
-  success: /* @__PURE__ */ jsx27(CheckCircle2, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" })
+  error: /* @__PURE__ */ jsx28(AlertCircle, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ jsx28(AlertTriangle, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  info: /* @__PURE__ */ jsx28(Info, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  success: /* @__PURE__ */ jsx28(CheckCircle2, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" })
 };
 var AlertBox = ({ variant, title, children, className, icon }) => {
   const resolvedIcon = icon === void 0 ? defaultIcons[variant] : icon;
-  return /* @__PURE__ */ jsx27("div", { className: cn("rounded-md border p-3 text-sm", variantStyles[variant], className), children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-row items-start gap-2", children: [
-    resolvedIcon != null && /* @__PURE__ */ jsx27("span", { className: "mt-0.5 shrink-0", children: resolvedIcon }),
-    /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-1", children: [
-      title && /* @__PURE__ */ jsx27("p", { className: "font-bold", children: title }),
-      /* @__PURE__ */ jsx27("div", { children })
+  return /* @__PURE__ */ jsx28("div", { className: cn("rounded-md border p-3 text-sm", variantStyles[variant], className), children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-row items-start gap-2", children: [
+    resolvedIcon != null && /* @__PURE__ */ jsx28("span", { className: "mt-0.5 shrink-0", children: resolvedIcon }),
+    /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1", children: [
+      title && /* @__PURE__ */ jsx28("p", { className: "font-bold", children: title }),
+      /* @__PURE__ */ jsx28("div", { children })
     ] })
   ] }) });
 };
 
 // src/patterns/status-badge/StatusBadge.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var TONE_CLASSES = {
   success: "border-transparent bg-emerald-500/15 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300",
-  warning: "border-transparent bg-amber-500/15 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300",
+  warning: "border-transparent bg-amber-500/15 text-amber-800 dark:bg-amber-500/20 dark:text-amber-300",
   info: "border-transparent bg-sky-500/15 text-sky-700 dark:bg-sky-500/20 dark:text-sky-300",
-  error: "border-transparent bg-destructive/15 text-destructive",
+  error: "border-transparent bg-destructive/15 text-red-800 dark:text-red-300",
   neutral: "border-transparent bg-muted text-muted-foreground"
 };
 var DEFAULT_TONE_MAP = {
@@ -1761,11 +1862,11 @@ function resolveTone(status, tone, toneMap) {
 var StatusBadge = ({ status, label, tone, toneMap, className, ...props }) => {
   const resolvedTone = resolveTone(status, tone, toneMap);
   const displayLabel = label ?? deriveLabel(status);
-  return /* @__PURE__ */ jsx28(Badge, { variant: "outline", className: cn(TONE_CLASSES[resolvedTone], className), ...props, children: displayLabel });
+  return /* @__PURE__ */ jsx29(Badge, { variant: "outline", className: cn(TONE_CLASSES[resolvedTone], className), ...props, children: displayLabel });
 };
 
 // src/patterns/button-group/ButtonGroup.tsx
-import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
 function ButtonGroup({
   options,
   value,
@@ -1775,10 +1876,10 @@ function ButtonGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx29("div", { role: "group", "aria-label": props["aria-label"], className: cn("inline-flex", className), "data-testid": props["data-testid"], children: options.map((option, index) => {
+  return /* @__PURE__ */ jsx30("div", { role: "group", "aria-label": props["aria-label"], className: cn("inline-flex", className), "data-testid": props["data-testid"], children: options.map((option, index) => {
     const selected = option.value === value;
     const Icon2 = option.icon;
-    return /* @__PURE__ */ jsxs14(
+    return /* @__PURE__ */ jsxs15(
       Button,
       {
         type: "button",
@@ -1796,7 +1897,7 @@ function ButtonGroup({
           index > 0 && "-ml-px"
         ),
         children: [
-          Icon2 && /* @__PURE__ */ jsx29(Icon2, { className: "h-4 w-4" }),
+          Icon2 && /* @__PURE__ */ jsx30(Icon2, { className: "h-4 w-4" }),
           option.label
         ]
       },
@@ -1808,7 +1909,7 @@ function ButtonGroup({
 // src/patterns/loading-spinner/LoadingSpinner.tsx
 import { cva as cva4 } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
-import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 var loadingSpinnerIconVariants = cva4("animate-spin text-muted-foreground", {
   variants: {
     size: {
@@ -1826,27 +1927,27 @@ var LoadingSpinner = ({
   label,
   className,
   ...props
-}) => /* @__PURE__ */ jsxs15("span", { role: "status", className: cn("inline-flex items-center gap-2", className), ...props, children: [
-  /* @__PURE__ */ jsx30(Loader2, { className: cn(loadingSpinnerIconVariants({ size })), "aria-hidden": "true" }),
-  label ? /* @__PURE__ */ jsx30("span", { children: label }) : null
+}) => /* @__PURE__ */ jsxs16("span", { role: "status", className: cn("inline-flex items-center gap-2", className), ...props, children: [
+  /* @__PURE__ */ jsx31(Loader2, { className: cn(loadingSpinnerIconVariants({ size })), "aria-hidden": "true" }),
+  label ? /* @__PURE__ */ jsx31("span", { children: label }) : null
 ] });
 var LoadingOverlay = ({
   size = "lg",
   label,
   className,
   ...props
-}) => /* @__PURE__ */ jsx30(
+}) => /* @__PURE__ */ jsx31(
   "div",
   {
     className: cn("flex h-full min-h-32 w-full items-center justify-center", className),
     ...props,
-    children: /* @__PURE__ */ jsx30(LoadingSpinner, { size, label })
+    children: /* @__PURE__ */ jsx31(LoadingSpinner, { size, label })
   }
 );
 
 // src/patterns/search-bar/SearchBar.tsx
 import { Search, X as X5 } from "lucide-react";
-import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 function SearchBar({
   value,
   onChange,
@@ -1858,9 +1959,9 @@ function SearchBar({
   ...props
 }) {
   const showClear = onClear !== false && value.length > 0;
-  return /* @__PURE__ */ jsxs16("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx31("span", { className: "pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-muted-foreground", children: isLoading ? /* @__PURE__ */ jsx31(LoadingSpinner, { size: "sm" }) : /* @__PURE__ */ jsx31(Search, { className: "h-4 w-4", "aria-hidden": "true" }) }),
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs17("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx32("span", { className: "pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-muted-foreground", children: isLoading ? /* @__PURE__ */ jsx32(LoadingSpinner, { size: "sm" }) : /* @__PURE__ */ jsx32(Search, { className: "h-4 w-4", "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsx32(
       "input",
       {
         ref: inputRef,
@@ -1879,19 +1980,370 @@ function SearchBar({
         ...props
       }
     ),
-    showClear && /* @__PURE__ */ jsx31(
+    showClear && /* @__PURE__ */ jsx32(
       "button",
       {
         type: "button",
         onClick: () => onClear ? onClear() : onChange(""),
         "aria-label": clearLabel,
         className: "absolute top-1/2 right-2 flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground hover:bg-accent hover:text-foreground",
-        children: /* @__PURE__ */ jsx31(X5, { className: "h-4 w-4", "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx32(X5, { className: "h-4 w-4", "aria-hidden": "true" })
       }
     )
   ] });
 }
 
+// src/patterns/kpi-card/KpiCard.tsx
+import { memo } from "react";
+import { Fragment as Fragment2, jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+var DONUT_COLORS = [
+  "var(--chart-1, #3b82f6)",
+  "var(--chart-2, #22c55e)",
+  "var(--chart-3, #f59e0b)",
+  "var(--chart-4, #8b5cf6)",
+  "var(--chart-5, #ef4444)",
+  "var(--chart-6, #06b6d4)"
+];
+function DonutChart({
+  data,
+  size = 96,
+  thickness = 14,
+  centerValue,
+  centerLabel
+}) {
+  const total = data.reduce((sum, d) => sum + d.value, 0);
+  if (total <= 0) return null;
+  const radius = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+  let offset = 0;
+  return /* @__PURE__ */ jsxs18("div", { className: "relative inline-flex shrink-0 items-center justify-center", style: { width: size, height: size }, children: [
+    /* @__PURE__ */ jsxs18("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "-rotate-90", children: [
+      /* @__PURE__ */ jsx33("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: "currentColor", className: "text-muted/40", strokeWidth: thickness }),
+      data.map((segment, i) => {
+        const fraction = segment.value / total;
+        const dash = fraction * circumference;
+        const el = /* @__PURE__ */ jsx33(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r: radius,
+            fill: "none",
+            stroke: segment.color ?? DONUT_COLORS[i % DONUT_COLORS.length],
+            strokeWidth: thickness,
+            strokeDasharray: `${dash} ${circumference - dash}`,
+            strokeDashoffset: -offset,
+            strokeLinecap: data.length > 1 ? "butt" : "round"
+          },
+          segment.label
+        );
+        offset += dash;
+        return el;
+      })
+    ] }),
+    (centerValue || centerLabel) && /* @__PURE__ */ jsxs18("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [
+      centerValue && /* @__PURE__ */ jsx33("span", { className: "text-base font-black tracking-tight text-foreground tabular-nums", children: centerValue }),
+      centerLabel && /* @__PURE__ */ jsx33("span", { className: "text-[9px] font-medium text-muted-foreground uppercase", children: centerLabel })
+    ] })
+  ] });
+}
+function Sparkline({ data, color }) {
+  if (data.length < 2) return null;
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const W = 72;
+  const H = 28;
+  const pts = data.map((v, i) => `${i / (data.length - 1) * W},${H - (v - min) / range * (H - 2) - 1}`).join(" ");
+  return /* @__PURE__ */ jsx33("svg", { width: W, height: H, viewBox: `0 0 ${W} ${H}`, className: "overflow-visible opacity-70", children: /* @__PURE__ */ jsx33("polyline", { points: pts, fill: "none", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function AreaSparkline({ data, color }) {
+  if (data.length < 2) return null;
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const W = 200;
+  const H = 28;
+  const P = 2;
+  const xs = data.map((_, i) => i / (data.length - 1) * W);
+  const ys = data.map((v) => H - (v - min) / range * (H - 2 * P) - P);
+  const linePts = xs.map((x, i) => `${x},${ys[i]}`).join(" ");
+  const areaPath = `M${xs[0]},${H} ` + xs.map((x, i) => `L${x},${ys[i]}`).join(" ") + ` L${xs[xs.length - 1]},${H} Z`;
+  return /* @__PURE__ */ jsxs18("svg", { width: W, height: H, viewBox: `0 0 ${W} ${H}`, className: "overflow-visible", preserveAspectRatio: "none", children: [
+    /* @__PURE__ */ jsx33("defs", { children: /* @__PURE__ */ jsxs18("linearGradient", { id: "kpi-card-spark-fill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx33("stop", { offset: "0%", stopColor: color, stopOpacity: "0.22" }),
+      /* @__PURE__ */ jsx33("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+    ] }) }),
+    /* @__PURE__ */ jsx33("path", { d: areaPath, fill: "url(#kpi-card-spark-fill)" }),
+    /* @__PURE__ */ jsx33("polyline", { points: linePts, fill: "none", stroke: color, strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx33("circle", { cx: xs[xs.length - 1], cy: ys[ys.length - 1], r: "2.5", fill: color })
+  ] });
+}
+var rowBetween = "flex items-center justify-between";
+var KpiCard = memo(function KpiCard2({
+  label,
+  value,
+  icon: Icon2,
+  badge,
+  badgeLabel,
+  variant = "default",
+  loading = false,
+  sub,
+  subTone = "default",
+  href,
+  sparkline,
+  sparklineColor = "var(--color-primary, #3b82f6)",
+  progress,
+  progressLabel,
+  segments,
+  centerValue,
+  testId
+}) {
+  if (variant === "hero") {
+    return /* @__PURE__ */ jsxs18(
+      "div",
+      {
+        "data-testid": testId,
+        className: "relative col-span-2 flex min-w-0 flex-1 flex-col gap-1.5 overflow-hidden rounded-2xl p-4 md:p-3 lg:col-span-1 lg:max-w-[340px] lg:min-w-[260px]",
+        style: {
+          background: "var(--color-primary)",
+          boxShadow: "0 2px 10px color-mix(in oklch, var(--color-primary) 18%, transparent)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs18("div", { className: "relative flex items-start justify-between", children: [
+            /* @__PURE__ */ jsx33("p", { className: "text-[11px] font-bold tracking-[0.14em] text-white/70 uppercase", children: label }),
+            Icon2 && /* @__PURE__ */ jsx33("div", { className: "flex h-6 w-6 items-center justify-center rounded-lg bg-white/15 ring-1 ring-white/20", children: /* @__PURE__ */ jsx33(Icon2, { className: "h-3 w-3 text-white/90", "aria-hidden": "true" }) })
+          ] }),
+          /* @__PURE__ */ jsx33("div", { className: "relative", children: loading ? /* @__PURE__ */ jsx33("div", { className: "h-6 w-28 animate-pulse rounded-lg bg-white/15" }) : /* @__PURE__ */ jsx33("p", { className: "text-2xl leading-none font-black tracking-tight text-white tabular-nums md:text-[22px]", children: value ?? "\u2014" }) }),
+          (badge || badgeLabel) && !loading && /* @__PURE__ */ jsxs18("div", { className: "relative flex items-center gap-2", children: [
+            badge && /* @__PURE__ */ jsx33(
+              "span",
+              {
+                className: cn(
+                  "inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-bold tabular-nums ring-1",
+                  badge.positive ? "bg-white/15 text-white ring-white/25" : "bg-black/25 text-white ring-white/15"
+                ),
+                children: badge.text
+              }
+            ),
+            badgeLabel && /* @__PURE__ */ jsx33("span", { className: "text-[11px] text-white/70", children: badgeLabel })
+          ] }),
+          sub && !loading && /* @__PURE__ */ jsx33("p", { className: "relative -mt-1 text-[11px] font-medium text-white/75 tabular-nums", children: sub }),
+          progress != null && !loading && /* @__PURE__ */ jsxs18("div", { className: "relative flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx33("div", { className: "h-1 flex-1 overflow-hidden rounded-full bg-white/20", children: /* @__PURE__ */ jsx33("div", { className: "h-1 rounded-full bg-white/85", style: { width: `${Math.min(100, Math.max(0, progress))}%` } }) }),
+            progressLabel && /* @__PURE__ */ jsx33("span", { className: "shrink-0 text-[11px] font-semibold text-white/80 tabular-nums", children: progressLabel })
+          ] }),
+          sparkline && sparkline.length > 1 && !loading && /* @__PURE__ */ jsx33("div", { className: "relative -mx-4 mt-auto -mb-4 md:-mx-3 md:-mb-3", children: /* @__PURE__ */ jsx33(AreaSparkline, { data: sparkline, color: "#ffffff" }) })
+        ]
+      }
+    );
+  }
+  if (variant === "mini") {
+    const iconSlot = Icon2 ? href ? /* @__PURE__ */ jsx33(
+      "a",
+      {
+        href,
+        className: "tap-target flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary transition-[background-color,scale] hover:bg-primary/20 active:scale-90 motion-reduce:transition-none md:h-6 md:w-6",
+        children: /* @__PURE__ */ jsx33(Icon2, { className: "h-4 w-4 md:h-3.5 md:w-3.5", "aria-hidden": "true" })
+      }
+    ) : /* @__PURE__ */ jsx33("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary md:h-6 md:w-6", children: /* @__PURE__ */ jsx33(Icon2, { className: "h-4 w-4 md:h-3.5 md:w-3.5", "aria-hidden": "true" }) }) : null;
+    return /* @__PURE__ */ jsxs18(
+      "div",
+      {
+        "data-testid": testId,
+        className: cn(
+          "flex h-full min-w-0 flex-1 flex-col gap-1.5 overflow-hidden rounded-2xl border border-border bg-card p-3 transition-shadow md:p-2.5",
+          href && "hover:border-primary/20 hover:shadow-md"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs18("div", { className: rowBetween, children: [
+            /* @__PURE__ */ jsx33("p", { className: "text-[11px] font-bold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
+            iconSlot
+          ] }),
+          /* @__PURE__ */ jsx33("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: loading ? /* @__PURE__ */ jsx33(Skeleton, { className: "h-6 w-16" }) : /* @__PURE__ */ jsxs18(Fragment2, { children: [
+            /* @__PURE__ */ jsx33("p", { className: "min-w-0 animate-in truncate text-[20px] leading-none font-black tracking-tight text-foreground duration-200 fade-in-0 tabular-nums motion-reduce:animate-none md:text-[16px]", children: value ?? "\u2014" }),
+            badge && /* @__PURE__ */ jsx33(
+              "span",
+              {
+                className: cn(
+                  "shrink-0 animate-in rounded-md px-1.5 py-0.5 text-[11px] font-bold duration-200 fade-in-0 tabular-nums motion-reduce:animate-none",
+                  badge.positive ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400" : "bg-muted text-muted-foreground"
+                ),
+                children: badge.text
+              }
+            )
+          ] }) }),
+          (sub || sparkline) && !loading && /* @__PURE__ */ jsxs18("div", { className: "flex items-end justify-between gap-2", children: [
+            sub && /* @__PURE__ */ jsx33(
+              "p",
+              {
+                className: cn(
+                  "text-[11px]",
+                  subTone === "danger" ? "font-semibold text-red-600 dark:text-red-400" : subTone === "warn" ? "font-semibold text-amber-700 dark:text-amber-300" : "text-muted-foreground"
+                ),
+                children: sub
+              }
+            ),
+            sparkline && /* @__PURE__ */ jsx33(Sparkline, { data: sparkline, color: sparklineColor })
+          ] })
+        ]
+      }
+    );
+  }
+  if (variant === "donut") {
+    const total = segments?.reduce((sum, s) => sum + s.value, 0) ?? 0;
+    return /* @__PURE__ */ jsxs18("div", { "data-testid": testId, className: "rounded-xl border border-border bg-card p-5", children: [
+      /* @__PURE__ */ jsxs18("div", { className: rowBetween, children: [
+        /* @__PURE__ */ jsx33("p", { className: "text-[11px] font-bold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
+        Icon2 && /* @__PURE__ */ jsx33("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary/8 text-primary", children: /* @__PURE__ */ jsx33(Icon2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) })
+      ] }),
+      loading ? /* @__PURE__ */ jsxs18("div", { className: "mt-3 flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx33(Skeleton, { className: "h-24 w-24 shrink-0 rounded-full" }),
+        /* @__PURE__ */ jsxs18("div", { className: "flex flex-1 flex-col gap-2", children: [
+          /* @__PURE__ */ jsx33(Skeleton, { className: "h-3 w-full" }),
+          /* @__PURE__ */ jsx33(Skeleton, { className: "h-3 w-3/4" }),
+          /* @__PURE__ */ jsx33(Skeleton, { className: "h-3 w-1/2" })
+        ] })
+      ] }) : segments && segments.length > 0 ? /* @__PURE__ */ jsxs18("div", { className: "mt-3 flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx33(DonutChart, { data: segments, centerValue: centerValue ?? String(total) }),
+        /* @__PURE__ */ jsx33("ul", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: segments.map((segment, i) => /* @__PURE__ */ jsxs18("li", { className: "flex items-center gap-2 text-[12px]", children: [
+          /* @__PURE__ */ jsx33(
+            "span",
+            {
+              className: "h-2 w-2 shrink-0 rounded-full",
+              style: { backgroundColor: segment.color ?? DONUT_COLORS[i % DONUT_COLORS.length] },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx33("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: segment.label }),
+          /* @__PURE__ */ jsx33("span", { className: "shrink-0 font-semibold text-foreground tabular-nums", children: total > 0 ? `${Math.round(segment.value / total * 100)}%` : segment.value })
+        ] }, segment.label)) })
+      ] }) : /* @__PURE__ */ jsx33("span", { className: "mt-3 block text-2xl font-black text-muted-foreground/40", children: "\u2014" }),
+      sub && !loading && /* @__PURE__ */ jsx33("p", { className: "mt-2.5 text-[11px] text-muted-foreground tabular-nums", children: sub })
+    ] });
+  }
+  const strValue = value != null ? String(value) : null;
+  const parts = strValue ? strValue.split(/\s(.+)/) : null;
+  const plain = !parts || parts.length === 1;
+  const isSuffix = !plain && /^\d/.test(parts[0]) && parts[1].length <= 3;
+  const prefix = isSuffix ? null : parts?.[0];
+  const number = isSuffix ? parts[0] : parts?.[1] ?? parts?.[0];
+  const suffix = isSuffix ? parts[1] : null;
+  return /* @__PURE__ */ jsxs18("div", { "data-testid": testId, className: "rounded-xl border border-border bg-card p-5", children: [
+    /* @__PURE__ */ jsxs18("div", { className: rowBetween, children: [
+      /* @__PURE__ */ jsx33("p", { className: "text-[11px] font-bold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
+      Icon2 && /* @__PURE__ */ jsx33("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary/8 text-primary", children: /* @__PURE__ */ jsx33(Icon2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) })
+    ] }),
+    /* @__PURE__ */ jsxs18("div", { className: "mt-3", children: [
+      loading ? /* @__PURE__ */ jsx33(Skeleton, { className: "h-7 w-20" }) : value == null ? /* @__PURE__ */ jsx33("span", { className: "text-2xl font-black text-muted-foreground/40", children: "\u2014" }) : plain ? /* @__PURE__ */ jsx33("span", { className: "animate-in text-2xl font-black tracking-tight text-foreground duration-200 fade-in-0 tabular-nums motion-reduce:animate-none", children: strValue }) : /* @__PURE__ */ jsxs18("span", { className: "animate-in font-black tracking-tight text-foreground duration-200 fade-in-0 tabular-nums motion-reduce:animate-none", children: [
+        prefix && /* @__PURE__ */ jsxs18("span", { className: "text-sm text-muted-foreground", children: [
+          prefix,
+          " "
+        ] }),
+        /* @__PURE__ */ jsx33("span", { className: "text-2xl", children: number }),
+        suffix && /* @__PURE__ */ jsxs18("span", { className: "text-sm text-muted-foreground", children: [
+          " ",
+          suffix
+        ] })
+      ] }),
+      sub && !loading && /* @__PURE__ */ jsx33("p", { className: "mt-0.5 text-[11px] text-muted-foreground tabular-nums", children: sub })
+    ] }),
+    (badge || badgeLabel || sparkline) && !loading && /* @__PURE__ */ jsxs18("div", { className: "mt-2.5 flex items-end justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "flex flex-wrap items-center gap-2", children: [
+        badge && /* @__PURE__ */ jsx33(
+          "span",
+          {
+            className: cn(
+              "rounded-md px-1.5 py-0.5 text-[11px] font-semibold tabular-nums",
+              badge.positive ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400" : "bg-muted text-muted-foreground"
+            ),
+            children: badge.text
+          }
+        ),
+        badgeLabel && /* @__PURE__ */ jsx33("span", { className: "text-[11px] text-muted-foreground", children: badgeLabel })
+      ] }),
+      sparkline && /* @__PURE__ */ jsx33(Sparkline, { data: sparkline, color: sparklineColor })
+    ] })
+  ] });
+});
+
+// src/patterns/search-panel/SearchPanel.tsx
+import { Search as Search2 } from "lucide-react";
+import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+function SearchPanel({
+  value,
+  onChange,
+  isLoading,
+  trailingSlot,
+  shortcutHint,
+  modes,
+  activeMode,
+  onModeChange,
+  expanded = false,
+  inputRef,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs19(
+    "div",
+    {
+      className: cn(
+        "flex flex-col border border-border bg-card shadow-sm",
+        expanded ? "rounded-t-2xl border-b-transparent" : "rounded-2xl",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs19("div", { className: "flex h-14 items-center gap-3 px-4", children: [
+          isLoading ? /* @__PURE__ */ jsx34(LoadingSpinner, { size: "sm" }) : /* @__PURE__ */ jsx34(Search2, { className: "h-5 w-5 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx34(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value,
+              onChange: (event) => onChange(event.target.value),
+              className: "min-w-0 flex-1 bg-transparent text-[15px] text-foreground outline-none placeholder:text-muted-foreground",
+              ...props
+            }
+          ),
+          trailingSlot,
+          shortcutHint && /* @__PURE__ */ jsx34(
+            "kbd",
+            {
+              "aria-hidden": "true",
+              className: "hidden shrink-0 items-center rounded border border-border bg-muted/60 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground select-none sm:inline-flex",
+              children: shortcutHint
+            }
+          )
+        ] }),
+        modes && modes.length > 0 && /* @__PURE__ */ jsx34("div", { className: "flex items-center gap-2 px-4 pb-3", children: modes.map(({ key, label, icon: Icon2 }) => /* @__PURE__ */ jsxs19(
+          "button",
+          {
+            type: "button",
+            onClick: () => onModeChange?.(key),
+            className: cn(
+              "flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[13px] font-medium transition-colors",
+              activeMode === key ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"
+            ),
+            children: [
+              Icon2 && /* @__PURE__ */ jsx34(Icon2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+              label
+            ]
+          },
+          key
+        )) })
+      ]
+    }
+  );
+}
+
+// src/patterns/search-panel/SearchTrigger.tsx
+import { Search as Search3 } from "lucide-react";
+import { jsx as jsx35 } from "react/jsx-runtime";
+function SearchTrigger({ label = "Search", ...props }) {
+  return /* @__PURE__ */ jsx35(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": label, ...props, children: /* @__PURE__ */ jsx35(Search3, { className: "h-[18px] w-[18px]", "aria-hidden": "true" }) });
+}
+
 // src/patterns/sidebar/context.ts
 import { createContext, useContext } from "react";
 var SidebarContext = createContext({ collapsed: false });
@@ -1901,7 +2353,7 @@ function useSidebarCollapsed() {
 }
 
 // src/patterns/sidebar/NavItem.tsx
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
 function NavItem({
   as,
   icon: Icon2,
@@ -1913,7 +2365,7 @@ function NavItem({
 }) {
   const collapsed = useSidebarCollapsed();
   const Comp = as ?? "a";
-  const row = /* @__PURE__ */ jsxs17(
+  const row = /* @__PURE__ */ jsxs20(
     Comp,
     {
       className: cn(
@@ -1925,7 +2377,7 @@ function NavItem({
       ),
       ...rest,
       children: [
-        Icon2 && /* @__PURE__ */ jsx32(
+        Icon2 && /* @__PURE__ */ jsx36(
           Icon2,
           {
             className: cn("h-[18px] w-[18px] shrink-0", active ? "text-nav-primary" : "text-muted-foreground"),
@@ -1933,7 +2385,7 @@ function NavItem({
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx36(
           "span",
           {
             className: cn(
@@ -1948,9 +2400,9 @@ function NavItem({
     }
   );
   if (!collapsed) return row;
-  return /* @__PURE__ */ jsxs17(Tooltip, { children: [
-    /* @__PURE__ */ jsx32(TooltipTrigger, { asChild: true, children: row }),
-    /* @__PURE__ */ jsxs17(TooltipContent, { side: "right", className: "flex items-center gap-1.5", children: [
+  return /* @__PURE__ */ jsxs20(Tooltip, { children: [
+    /* @__PURE__ */ jsx36(TooltipTrigger, { asChild: true, children: row }),
+    /* @__PURE__ */ jsxs20(TooltipContent, { side: "right", className: "flex items-center gap-1.5", children: [
       label,
       badge
     ] })
@@ -1960,7 +2412,7 @@ function NavItem({
 // src/patterns/sidebar/NavGroup.tsx
 import { ChevronDown as ChevronDown2 } from "lucide-react";
 import { useState as useState8 } from "react";
-import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
 function NavGroup({
   label,
   defaultCollapsed = false,
@@ -1976,8 +2428,8 @@ function NavGroup({
     onCollapsedChange?.(next);
     if (collapsed === void 0) setInternalCollapsed(next);
   };
-  return /* @__PURE__ */ jsxs18("div", { className: cn("flex flex-col gap-0.5", className), children: [
-    label && (railCollapsed ? /* @__PURE__ */ jsx33("div", { className: "mx-2 my-1 h-px bg-border/50", "aria-hidden": true }) : /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs21("div", { className: cn("flex flex-col gap-0.5", className), children: [
+    label && (railCollapsed ? /* @__PURE__ */ jsx37("div", { className: "mx-2 my-1 h-px bg-border/50", "aria-hidden": true }) : /* @__PURE__ */ jsxs21(
       "button",
       {
         type: "button",
@@ -1985,8 +2437,8 @@ function NavGroup({
         "aria-expanded": !groupCollapsed,
         className: "group flex w-full items-center justify-between px-2.5 py-0.5 text-[11px] font-medium text-muted-foreground/80 hover:text-foreground",
         children: [
-          /* @__PURE__ */ jsx33("span", { children: label }),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx37("span", { children: label }),
+          /* @__PURE__ */ jsx37(
             ChevronDown2,
             {
               className: cn(
@@ -1999,7 +2451,7 @@ function NavGroup({
         ]
       }
     )),
-    !groupCollapsed && /* @__PURE__ */ jsx33("div", { className: "flex flex-col gap-0.5", children })
+    !groupCollapsed && /* @__PURE__ */ jsx37("div", { className: "flex flex-col gap-0.5", children })
   ] });
 }
 
@@ -2011,7 +2463,7 @@ import {
   useRef as useRef5,
   useState as useState9
 } from "react";
-import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 function resolve(value, collapsed) {
   return typeof value === "function" ? value(collapsed) : value;
 }
@@ -2058,7 +2510,7 @@ function Sidebar({
     dragStartRef.current = null;
     setIsDragging(false);
   };
-  return /* @__PURE__ */ jsx34(SidebarContextProvider, { value: { collapsed }, children: /* @__PURE__ */ jsx34(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx38(SidebarContextProvider, { value: { collapsed }, children: /* @__PURE__ */ jsx38(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs22(
     "aside",
     {
       style: { width: collapsed ? railWidth : currentWidth },
@@ -2068,22 +2520,47 @@ function Sidebar({
         className
       ),
       children: [
-        (header || onCollapsedChange) && /* @__PURE__ */ jsxs19("div", { className: "flex h-16 items-center gap-2 border-b border-border px-3", children: [
-          header && /* @__PURE__ */ jsx34("div", { className: "min-w-0 flex-1", children: resolve(header, collapsed) }),
-          onCollapsedChange && /* @__PURE__ */ jsx34(
+        (header || onCollapsedChange) && /* @__PURE__ */ jsx38("div", { className: "flex h-16 items-center gap-2 border-b border-border px-3", children: collapsed && onCollapsedChange ? (
+          // Collapsed rail: the header slot (e.g. a compact logo mark) and the
+          // expand toggle would otherwise compete for the narrow rail's width
+          // and clip each other, so they're stacked instead — the header shows
+          // by default and cross-fades to the toggle icon on hover, matching
+          // the same affordance OneSales' own sidebar rail uses.
+          /* @__PURE__ */ jsxs22(
+            "button",
+            {
+              type: "button",
+              onClick: () => onCollapsedChange(!collapsed),
+              "aria-label": "Expand sidebar",
+              className: "group relative flex h-9 w-9 shrink-0 items-center justify-center",
+              children: [
+                header && /* @__PURE__ */ jsx38("span", { className: "transition-opacity group-hover:opacity-0", children: resolve(header, collapsed) }),
+                /* @__PURE__ */ jsx38(
+                  PanelLeftOpen,
+                  {
+                    className: "absolute h-4 w-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+                    "aria-hidden": true
+                  }
+                )
+              ]
+            }
+          )
+        ) : /* @__PURE__ */ jsxs22(Fragment3, { children: [
+          header && /* @__PURE__ */ jsx38("div", { className: "min-w-0 flex-1", children: resolve(header, collapsed) }),
+          onCollapsedChange && /* @__PURE__ */ jsx38(
             "button",
             {
               type: "button",
               onClick: () => onCollapsedChange(!collapsed),
-              "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+              "aria-label": "Collapse sidebar",
               className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
-              children: collapsed ? /* @__PURE__ */ jsx34(PanelLeftOpen, { className: "h-4 w-4", "aria-hidden": true }) : /* @__PURE__ */ jsx34(PanelLeftClose, { className: "h-4 w-4", "aria-hidden": true })
+              children: /* @__PURE__ */ jsx38(PanelLeftClose, { className: "h-4 w-4", "aria-hidden": true })
             }
           )
-        ] }),
-        /* @__PURE__ */ jsx34(SidebarNav, { children }),
-        footer && /* @__PURE__ */ jsx34("div", { className: "border-t border-border/50 px-2 py-2", children: resolve(footer, collapsed) }),
-        resizable && !collapsed && /* @__PURE__ */ jsx34(
+        ] }) }),
+        /* @__PURE__ */ jsx38(SidebarNav, { children }),
+        footer && /* @__PURE__ */ jsx38("div", { className: "border-t border-border/50 px-2 py-2", children: resolve(footer, collapsed) }),
+        resizable && !collapsed && /* @__PURE__ */ jsx38(
           "div",
           {
             onPointerDown: handlePointerDown,
@@ -2113,8 +2590,8 @@ function SidebarNav({ children, className, ...rest }) {
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsxs19("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
-    /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs22("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsx38(
       "div",
       {
         ref,
@@ -2123,7 +2600,7 @@ function SidebarNav({ children, className, ...rest }) {
         children
       }
     ),
-    showFade && /* @__PURE__ */ jsx34(
+    showFade && /* @__PURE__ */ jsx38(
       "div",
       {
         className: "pointer-events-none absolute right-0 bottom-0 left-0 h-6 bg-gradient-to-t from-sidebar to-transparent",
@@ -2153,6 +2630,7 @@ export {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
+  DonutChart,
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
@@ -2171,6 +2649,7 @@ export {
   FormField,
   FormModal,
   Input,
+  KpiCard,
   Label,
   LoadingOverlay,
   LoadingSpinner,
@@ -2185,6 +2664,8 @@ export {
   ScrollArea,
   ScrollBar,
   SearchBar,
+  SearchPanel,
+  SearchTrigger,
   Select,
   SelectContent,
   SelectGroup,
@@ -2204,6 +2685,7 @@ export {
   Sidebar,
   SidebarNav,
   Skeleton,
+  Sparkline,
   StatusBadge,
   Switch,
   Table,