@polastack/design-system 0.1.26 → 0.1.28

package/dist/index.js

@@ -3687,10 +3687,92 @@ var AppShellFooter = React39.forwardRef(({ className, ...props }, ref) => /* @__
 ));
 AppShellFooter.displayName = "AppShellFooter";
 
-// src/components/bottom-navigation/bottom-navigation.tsx
+// src/components/sidebar-nav/sidebar-nav.tsx
 import * as React40 from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { ChevronDown as ChevronDown4 } from "lucide-react";
 import { jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
-var BottomNavigation = React40.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
+var SidebarNav = React40.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
+  "nav",
+  {
+    ref,
+    className: cn("flex flex-col gap-1 px-3", className),
+    ...props
+  }
+));
+SidebarNav.displayName = "SidebarNav";
+var SidebarNavGroup = React40.forwardRef(
+  ({
+    className,
+    title,
+    defaultOpen = true,
+    open: controlledOpen,
+    onOpenChange,
+    icon,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs22(
+      CollapsiblePrimitive.Root,
+      {
+        ref,
+        defaultOpen,
+        open: controlledOpen,
+        onOpenChange,
+        className: cn("flex flex-col", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs22(CollapsiblePrimitive.Trigger, { className: "group flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-xs font-semibold uppercase tracking-wider text-[var(--color-on-surface-muted)] transition-colors hover:text-[var(--color-on-surface-secondary)] hover:bg-[var(--color-surface-muted)]", children: [
+            icon && /* @__PURE__ */ jsx42("span", { className: "shrink-0 opacity-70", children: icon }),
+            /* @__PURE__ */ jsx42("span", { className: "flex-1 text-left", children: title }),
+            /* @__PURE__ */ jsx42(
+              ChevronDown4,
+              {
+                className: "h-3.5 w-3.5 shrink-0 opacity-60 transition-transform duration-normal group-data-[state=closed]:-rotate-90"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx42(CollapsiblePrimitive.Content, { className: "overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up", children: /* @__PURE__ */ jsx42("div", { className: "flex flex-col gap-0.5 pt-0.5", children }) })
+        ]
+      }
+    );
+  }
+);
+SidebarNavGroup.displayName = "SidebarNavGroup";
+var SidebarNavItem = React40.forwardRef(({ className, icon, active = false, badge, children, ...props }, ref) => /* @__PURE__ */ jsxs22(
+  "button",
+  {
+    ref,
+    type: "button",
+    className: cn(
+      "flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
+      active ? "bg-[var(--color-surface-accent)] text-[var(--color-on-surface-accent)] font-medium" : "text-[var(--color-on-surface-secondary)] hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-on-surface)]",
+      className
+    ),
+    "aria-current": active ? "page" : void 0,
+    ...props,
+    children: [
+      icon && /* @__PURE__ */ jsx42("span", { className: cn("shrink-0", active ? "opacity-100" : "opacity-70"), children: icon }),
+      /* @__PURE__ */ jsx42("span", { className: "flex-1 text-left truncate", children }),
+      badge && /* @__PURE__ */ jsx42(
+        "span",
+        {
+          className: cn(
+            "min-w-[20px] rounded-full px-1.5 py-0.5 text-center text-xs font-medium",
+            active ? "bg-[var(--color-primary-100)] text-[var(--color-primary-700)] dark:bg-[var(--color-primary-950)] dark:text-[var(--color-primary-300)]" : "bg-[var(--color-surface-sunken)] text-[var(--color-on-surface-muted)]"
+          ),
+          children: badge
+        }
+      )
+    ]
+  }
+));
+SidebarNavItem.displayName = "SidebarNavItem";
+
+// src/components/bottom-navigation/bottom-navigation.tsx
+import * as React41 from "react";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+var BottomNavigation = React41.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
   "nav",
   {
     ref,
@@ -3703,7 +3785,7 @@ var BottomNavigation = React40.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 BottomNavigation.displayName = "BottomNavigation";
-var BottomNavigationItem = React40.forwardRef(({ className, icon, label, active = false, ...props }, ref) => /* @__PURE__ */ jsxs22(
+var BottomNavigationItem = React41.forwardRef(({ className, icon, label, active = false, ...props }, ref) => /* @__PURE__ */ jsxs23(
   "button",
   {
     ref,
@@ -3715,18 +3797,18 @@ var BottomNavigationItem = React40.forwardRef(({ className, icon, label, active
     "aria-current": active ? "page" : void 0,
     ...props,
     children: [
-      /* @__PURE__ */ jsx42("span", { className: "flex h-6 w-6 items-center justify-center", children: icon }),
-      /* @__PURE__ */ jsx42("span", { children: label })
+      /* @__PURE__ */ jsx43("span", { className: "flex h-6 w-6 items-center justify-center", children: icon }),
+      /* @__PURE__ */ jsx43("span", { children: label })
     ]
   }
 ));
 BottomNavigationItem.displayName = "BottomNavigationItem";
 
 // src/components/offline-indicator/offline-indicator.tsx
-import * as React41 from "react";
+import * as React42 from "react";
 import { WifiOff } from "lucide-react";
-import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
-var OfflineIndicator = React41.forwardRef(
+import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
+var OfflineIndicator = React42.forwardRef(
   ({
     className,
     isOffline,
@@ -3734,7 +3816,7 @@ var OfflineIndicator = React41.forwardRef(
     ...props
   }, ref) => {
     if (!isOffline) return null;
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsxs24(
       "div",
       {
         ref,
@@ -3745,7 +3827,7 @@ var OfflineIndicator = React41.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx43(WifiOff, { className: "mr-2 h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx44(WifiOff, { className: "mr-2 h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }),
           message
         ]
       }
@@ -3755,9 +3837,9 @@ var OfflineIndicator = React41.forwardRef(
 OfflineIndicator.displayName = "OfflineIndicator";
 
 // src/components/install-prompt/install-prompt.tsx
-import * as React42 from "react";
-import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
-var InstallPrompt = React42.forwardRef(
+import * as React43 from "react";
+import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
+var InstallPrompt = React43.forwardRef(
   ({
     className,
     canInstall,
@@ -3770,7 +3852,7 @@ var InstallPrompt = React42.forwardRef(
     ...props
   }, ref) => {
     if (!canInstall) return null;
-    return /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsx45(
       "div",
       {
         ref,
@@ -3781,12 +3863,12 @@ var InstallPrompt = React42.forwardRef(
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsxs24("div", { className: "mx-auto max-w-md", children: [
-          /* @__PURE__ */ jsx44("p", { className: "text-sm font-semibold text-[var(--color-on-surface)]", children: title }),
-          /* @__PURE__ */ jsx44("p", { className: "mt-1 text-xs text-[var(--color-on-surface-muted)]", children: description }),
-          /* @__PURE__ */ jsxs24("div", { className: "mt-3 flex gap-2", children: [
-            /* @__PURE__ */ jsx44(Button, { size: "sm", onClick: onInstall, className: "flex-1", children: installLabel }),
-            /* @__PURE__ */ jsx44(
+        children: /* @__PURE__ */ jsxs25("div", { className: "mx-auto max-w-md", children: [
+          /* @__PURE__ */ jsx45("p", { className: "text-sm font-semibold text-[var(--color-on-surface)]", children: title }),
+          /* @__PURE__ */ jsx45("p", { className: "mt-1 text-xs text-[var(--color-on-surface-muted)]", children: description }),
+          /* @__PURE__ */ jsxs25("div", { className: "mt-3 flex gap-2", children: [
+            /* @__PURE__ */ jsx45(Button, { size: "sm", onClick: onInstall, className: "flex-1", children: installLabel }),
+            /* @__PURE__ */ jsx45(
               Button,
               {
                 size: "sm",
@@ -3805,17 +3887,17 @@ var InstallPrompt = React42.forwardRef(
 InstallPrompt.displayName = "InstallPrompt";
 
 // src/components/pull-to-refresh/pull-to-refresh.tsx
-import * as React43 from "react";
+import * as React44 from "react";
 import { ArrowDown } from "lucide-react";
-import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
-var PullToRefresh = React43.forwardRef(
+import { jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
+var PullToRefresh = React44.forwardRef(
   ({ className, onRefresh, threshold = 80, disabled = false, children, ...props }, ref) => {
-    const [pullDistance, setPullDistance] = React43.useState(0);
-    const [isRefreshing, setIsRefreshing] = React43.useState(false);
-    const startYRef = React43.useRef(0);
-    const containerRef = React43.useRef(null);
-    React43.useImperativeHandle(ref, () => containerRef.current);
-    const handleTouchStart = React43.useCallback(
+    const [pullDistance, setPullDistance] = React44.useState(0);
+    const [isRefreshing, setIsRefreshing] = React44.useState(false);
+    const startYRef = React44.useRef(0);
+    const containerRef = React44.useRef(null);
+    React44.useImperativeHandle(ref, () => containerRef.current);
+    const handleTouchStart = React44.useCallback(
       (e) => {
         if (disabled || isRefreshing) return;
         const container = containerRef.current;
@@ -3825,7 +3907,7 @@ var PullToRefresh = React43.forwardRef(
       },
       [disabled, isRefreshing]
     );
-    const handleTouchMove = React43.useCallback(
+    const handleTouchMove = React44.useCallback(
       (e) => {
         if (disabled || isRefreshing || startYRef.current === 0) return;
         const distance = Math.max(
@@ -3838,7 +3920,7 @@ var PullToRefresh = React43.forwardRef(
       },
       [disabled, isRefreshing, threshold]
     );
-    const handleTouchEnd = React43.useCallback(async () => {
+    const handleTouchEnd = React44.useCallback(async () => {
       if (disabled || isRefreshing) return;
       if (pullDistance >= threshold) {
         setIsRefreshing(true);
@@ -3853,7 +3935,7 @@ var PullToRefresh = React43.forwardRef(
     }, [disabled, isRefreshing, pullDistance, threshold, onRefresh]);
     const indicatorOpacity = Math.min(pullDistance / threshold, 1);
     const shouldTrigger = pullDistance >= threshold;
-    return /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsxs26(
       "div",
       {
         ref: containerRef,
@@ -3863,18 +3945,18 @@ var PullToRefresh = React43.forwardRef(
         onTouchEnd: handleTouchEnd,
         ...props,
         children: [
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx46(
             "div",
             {
               className: "flex items-center justify-center overflow-hidden transition-[height] duration-normal",
               style: { height: isRefreshing ? threshold * 0.6 : pullDistance },
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx45(
+              children: /* @__PURE__ */ jsx46(
                 "div",
                 {
                   className: "transition-opacity",
                   style: { opacity: isRefreshing ? 1 : indicatorOpacity },
-                  children: isRefreshing ? /* @__PURE__ */ jsx45(Spinner, { size: "sm" }) : /* @__PURE__ */ jsx45(
+                  children: isRefreshing ? /* @__PURE__ */ jsx46(Spinner, { size: "sm" }) : /* @__PURE__ */ jsx46(
                     ArrowDown,
                     {
                       className: cn(
@@ -3896,9 +3978,9 @@ var PullToRefresh = React43.forwardRef(
 PullToRefresh.displayName = "PullToRefresh";
 
 // src/components/print/print-document.tsx
-import * as React44 from "react";
+import * as React45 from "react";
 import { cva as cva17 } from "class-variance-authority";
-import { jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs27 } from "react/jsx-runtime";
 var printDocumentVariants = cva17(
   [
     "bg-white text-neutral-900",
@@ -3927,8 +4009,8 @@ var printDocumentVariants = cva17(
     }
   }
 );
-var PrintDocument = React44.forwardRef(
-  ({ className, size, orientation, padding = "20mm", style, children, ...props }, ref) => /* @__PURE__ */ jsx46(
+var PrintDocument = React45.forwardRef(
+  ({ className, size, orientation, padding = "20mm", style, children, ...props }, ref) => /* @__PURE__ */ jsx47(
     "div",
     {
       ref,
@@ -3947,25 +4029,25 @@ var PrintDocument = React44.forwardRef(
   )
 );
 PrintDocument.displayName = "PrintDocument";
-var PrintHeader = React44.forwardRef(
-  ({ className, logo, title, subtitle, meta, children, ...props }, ref) => /* @__PURE__ */ jsxs26("div", { ref, className: cn("mb-6", className), ...props, children: [
-    /* @__PURE__ */ jsx46("div", { className: "h-1 bg-primary-400 rounded-full mb-5" }),
-    /* @__PURE__ */ jsxs26("div", { className: "flex items-start justify-between pb-4 border-b border-neutral-200", children: [
-      /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-3", children: [
-        logo && /* @__PURE__ */ jsx46("div", { className: "shrink-0", children: logo }),
-        /* @__PURE__ */ jsxs26("div", { children: [
-          title && /* @__PURE__ */ jsx46("h1", { className: "text-2xl font-bold text-neutral-900 leading-tight", children: title }),
-          subtitle && /* @__PURE__ */ jsx46("p", { className: "text-[8pt] font-medium tracking-widest uppercase text-neutral-400 mt-0.5", children: subtitle })
+var PrintHeader = React45.forwardRef(
+  ({ className, logo, title, subtitle, meta, children, ...props }, ref) => /* @__PURE__ */ jsxs27("div", { ref, className: cn("mb-6", className), ...props, children: [
+    /* @__PURE__ */ jsx47("div", { className: "h-1 bg-primary-400 rounded-full mb-5" }),
+    /* @__PURE__ */ jsxs27("div", { className: "flex items-start justify-between pb-4 border-b border-neutral-200", children: [
+      /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-3", children: [
+        logo && /* @__PURE__ */ jsx47("div", { className: "shrink-0", children: logo }),
+        /* @__PURE__ */ jsxs27("div", { children: [
+          title && /* @__PURE__ */ jsx47("h1", { className: "text-2xl font-bold text-neutral-900 leading-tight", children: title }),
+          subtitle && /* @__PURE__ */ jsx47("p", { className: "text-[8pt] font-medium tracking-widest uppercase text-neutral-400 mt-0.5", children: subtitle })
         ] })
       ] }),
-      meta && /* @__PURE__ */ jsx46("div", { className: "text-right text-[9pt] text-neutral-600 leading-relaxed", children: meta }),
+      meta && /* @__PURE__ */ jsx47("div", { className: "text-right text-[9pt] text-neutral-600 leading-relaxed", children: meta }),
       children
     ] })
   ] })
 );
 PrintHeader.displayName = "PrintHeader";
-var PrintFooter = React44.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx46(
+var PrintFooter = React45.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx47(
     "div",
     {
       ref,
@@ -3978,10 +4060,10 @@ var PrintFooter = React44.forwardRef(
 PrintFooter.displayName = "PrintFooter";
 
 // src/components/print/print-table.tsx
-import * as React45 from "react";
-import { jsx as jsx47 } from "react/jsx-runtime";
-var PrintTable = React45.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
+import * as React46 from "react";
+import { jsx as jsx48 } from "react/jsx-runtime";
+var PrintTable = React46.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
     "table",
     {
       ref,
@@ -3991,20 +4073,20 @@ var PrintTable = React45.forwardRef(
   )
 );
 PrintTable.displayName = "PrintTable";
-var PrintTableHeader = React45.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx47("thead", { ref, className: cn("", className), ...props })
+var PrintTableHeader = React46.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx48("thead", { ref, className: cn("", className), ...props })
 );
 PrintTableHeader.displayName = "PrintTableHeader";
-var PrintTableBody = React45.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx47("tbody", { ref, className: cn("", className), ...props })
+var PrintTableBody = React46.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx48("tbody", { ref, className: cn("", className), ...props })
 );
 PrintTableBody.displayName = "PrintTableBody";
-var PrintTableFooter = React45.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx47("tfoot", { ref, className: cn("", className), ...props })
+var PrintTableFooter = React46.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx48("tfoot", { ref, className: cn("", className), ...props })
 );
 PrintTableFooter.displayName = "PrintTableFooter";
-var PrintTableRow = React45.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
+var PrintTableRow = React46.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
     "tr",
     {
       ref,
@@ -4014,8 +4096,8 @@ var PrintTableRow = React45.forwardRef(
   )
 );
 PrintTableRow.displayName = "PrintTableRow";
-var PrintTableHead = React45.forwardRef(
-  ({ className, align = "left", ...props }, ref) => /* @__PURE__ */ jsx47(
+var PrintTableHead = React46.forwardRef(
+  ({ className, align = "left", ...props }, ref) => /* @__PURE__ */ jsx48(
     "th",
     {
       ref,
@@ -4031,8 +4113,8 @@ var PrintTableHead = React45.forwardRef(
   )
 );
 PrintTableHead.displayName = "PrintTableHead";
-var PrintTableCell = React45.forwardRef(
-  ({ className, align = "left", ...props }, ref) => /* @__PURE__ */ jsx47(
+var PrintTableCell = React46.forwardRef(
+  ({ className, align = "left", ...props }, ref) => /* @__PURE__ */ jsx48(
     "td",
     {
       ref,
@@ -4050,13 +4132,13 @@ var PrintTableCell = React45.forwardRef(
 PrintTableCell.displayName = "PrintTableCell";
 
 // src/components/print/print-field.tsx
-import * as React46 from "react";
+import * as React47 from "react";
 import { cva as cva18 } from "class-variance-authority";
-import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
-var PrintField = React46.forwardRef(
-  ({ className, label, value, children, ...props }, ref) => /* @__PURE__ */ jsxs27("div", { ref, className: cn("", className), ...props, children: [
-    /* @__PURE__ */ jsx48("dt", { className: "text-[8pt] font-medium text-neutral-500 mb-0.5", children: label }),
-    /* @__PURE__ */ jsx48("dd", { className: "text-[9pt] text-neutral-900", children: value ?? children })
+import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
+var PrintField = React47.forwardRef(
+  ({ className, label, value, children, ...props }, ref) => /* @__PURE__ */ jsxs28("div", { ref, className: cn("", className), ...props, children: [
+    /* @__PURE__ */ jsx49("dt", { className: "text-[8pt] font-medium text-neutral-500 mb-0.5", children: label }),
+    /* @__PURE__ */ jsx49("dd", { className: "text-[9pt] text-neutral-900", children: value ?? children })
   ] })
 );
 PrintField.displayName = "PrintField";
@@ -4073,8 +4155,8 @@ var printFieldGroupVariants = cva18("grid gap-x-6 gap-y-2", {
     columns: 2
   }
 });
-var PrintFieldGroup = React46.forwardRef(
-  ({ className, columns, ...props }, ref) => /* @__PURE__ */ jsx48(
+var PrintFieldGroup = React47.forwardRef(
+  ({ className, columns, ...props }, ref) => /* @__PURE__ */ jsx49(
     "dl",
     {
       ref,
@@ -4086,10 +4168,10 @@ var PrintFieldGroup = React46.forwardRef(
 PrintFieldGroup.displayName = "PrintFieldGroup";
 
 // src/components/print/print-divider.tsx
-import * as React47 from "react";
-import { jsx as jsx49 } from "react/jsx-runtime";
-var PrintDivider = React47.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+import * as React48 from "react";
+import { jsx as jsx50 } from "react/jsx-runtime";
+var PrintDivider = React48.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
     "hr",
     {
       ref,
@@ -4101,9 +4183,9 @@ var PrintDivider = React47.forwardRef(
 PrintDivider.displayName = "PrintDivider";
 
 // src/components/stat-card/stat-card.tsx
-import * as React48 from "react";
-import { ChevronUp as ChevronUp2, ChevronDown as ChevronDown4 } from "lucide-react";
-import { jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
+import * as React49 from "react";
+import { ChevronUp as ChevronUp2, ChevronDown as ChevronDown5 } from "lucide-react";
+import { jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
 function inferDirection(trend) {
   if (!trend) return "neutral";
   if (trend.startsWith("+")) return "up";
@@ -4117,13 +4199,13 @@ var TREND_STYLES = {
 };
 var TREND_ICON_COMPONENTS = {
   up: ChevronUp2,
-  down: ChevronDown4,
+  down: ChevronDown5,
   neutral: null
 };
-var StatCard = React48.forwardRef(
+var StatCard = React49.forwardRef(
   ({ className, label, value, trend, trendDirection, icon, ...props }, ref) => {
     const direction = trendDirection ?? inferDirection(trend);
-    return /* @__PURE__ */ jsxs28(
+    return /* @__PURE__ */ jsxs29(
       "div",
       {
         ref,
@@ -4133,16 +4215,16 @@ var StatCard = React48.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx50("p", { className: "text-xs font-medium text-[var(--color-on-surface-muted)] uppercase tracking-wider", children: label }),
-            icon && /* @__PURE__ */ jsx50("span", { className: "text-[var(--color-on-surface-muted)]", children: icon })
+          /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx51("p", { className: "text-xs font-medium text-[var(--color-on-surface-muted)] uppercase tracking-wider", children: label }),
+            icon && /* @__PURE__ */ jsx51("span", { className: "text-[var(--color-on-surface-muted)]", children: icon })
           ] }),
-          /* @__PURE__ */ jsxs28("div", { className: "flex items-baseline gap-2 mt-2", children: [
-            /* @__PURE__ */ jsx50("span", { className: "text-xl sm:text-2xl font-bold tabular-nums", children: value }),
-            trend && /* @__PURE__ */ jsxs28("span", { className: cn("inline-flex items-center gap-0.5 text-xs font-medium", TREND_STYLES[direction]), children: [
+          /* @__PURE__ */ jsxs29("div", { className: "flex items-baseline gap-2 mt-2", children: [
+            /* @__PURE__ */ jsx51("span", { className: "text-xl sm:text-2xl font-bold tabular-nums", children: value }),
+            trend && /* @__PURE__ */ jsxs29("span", { className: cn("inline-flex items-center gap-0.5 text-xs font-medium", TREND_STYLES[direction]), children: [
               (() => {
                 const TrendIcon = TREND_ICON_COMPONENTS[direction];
-                return TrendIcon ? /* @__PURE__ */ jsx50(TrendIcon, { className: "h-3 w-3", strokeWidth: 2.5 }) : null;
+                return TrendIcon ? /* @__PURE__ */ jsx51(TrendIcon, { className: "h-3 w-3", strokeWidth: 2.5 }) : null;
               })(),
               trend
             ] })
@@ -4155,10 +4237,10 @@ var StatCard = React48.forwardRef(
 StatCard.displayName = "StatCard";
 
 // src/components/chart-container/chart-container.tsx
-import * as React49 from "react";
-import { jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
-var ChartContainer = React49.forwardRef(
-  ({ className, title, description, actions, children, ...props }, ref) => /* @__PURE__ */ jsxs29(
+import * as React50 from "react";
+import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
+var ChartContainer = React50.forwardRef(
+  ({ className, title, description, actions, children, ...props }, ref) => /* @__PURE__ */ jsxs30(
     "div",
     {
       ref,
@@ -4168,14 +4250,14 @@ var ChartContainer = React49.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs29("div", { className: "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 sm:gap-4 p-4 sm:p-5 pb-0", children: [
-          /* @__PURE__ */ jsxs29("div", { children: [
-            /* @__PURE__ */ jsx51("h3", { className: "text-sm font-semibold leading-none tracking-tight", children: title }),
-            description && /* @__PURE__ */ jsx51("p", { className: "mt-1 text-xs text-[var(--color-on-surface-muted)]", children: description })
+        /* @__PURE__ */ jsxs30("div", { className: "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 sm:gap-4 p-4 sm:p-5 pb-0", children: [
+          /* @__PURE__ */ jsxs30("div", { children: [
+            /* @__PURE__ */ jsx52("h3", { className: "text-sm font-semibold leading-none tracking-tight", children: title }),
+            description && /* @__PURE__ */ jsx52("p", { className: "mt-1 text-xs text-[var(--color-on-surface-muted)]", children: description })
           ] }),
-          actions && /* @__PURE__ */ jsx51("div", { className: "flex items-center gap-2 shrink-0", children: actions })
+          actions && /* @__PURE__ */ jsx52("div", { className: "flex items-center gap-2 shrink-0", children: actions })
         ] }),
-        /* @__PURE__ */ jsx51("div", { className: "p-4 sm:p-5", children })
+        /* @__PURE__ */ jsx52("div", { className: "p-4 sm:p-5", children })
       ]
     }
   )
@@ -4186,7 +4268,7 @@ ChartContainer.displayName = "ChartContainer";
 var chartColors = {
   /** Solid colors for bars, lines, dots, and legends */
   categorical: [
-    "#1BA491",
+    "#13C3A0",
     // teal    — brand anchor
     "#4E79A7",
     // slate   — classic dataviz blue
@@ -4205,7 +4287,7 @@ var chartColors = {
   ],
   /** Subtle tints — 1:1 paired with categorical for area fills and backgrounds */
   subtle: [
-    "#E6F7F4",
+    "#E8FAF6",
     // teal
     "#E8EEF4",
     // slate
@@ -4243,7 +4325,7 @@ var chartColors = {
   ],
   /** Semantic colors for status-meaning charts (P&L, health scores, etc.) */
   semantic: {
-    positive: "#1BA491",
+    positive: "#13C3A0",
     negative: "#D4687A",
     neutral: "#94939B",
     warning: "#E8A838"
@@ -4288,7 +4370,7 @@ function getChartTheme() {
 }
 
 // src/components/chart/chart-tooltip.tsx
-import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
 var ChartTooltip = ({
   active,
   payload,
@@ -4299,7 +4381,7 @@ var ChartTooltip = ({
 }) => {
   if (!active || !payload?.length) return null;
   const displayLabel = labelFormatter ? labelFormatter(String(label)) : label;
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       className: cn(
@@ -4308,17 +4390,17 @@ var ChartTooltip = ({
         className
       ),
       children: [
-        displayLabel && /* @__PURE__ */ jsx52("p", { className: "font-medium text-[var(--color-on-surface)] mb-1", children: displayLabel }),
-        /* @__PURE__ */ jsx52("div", { className: "flex flex-col gap-0.5", children: payload.map((entry, i) => /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx52(
+        displayLabel && /* @__PURE__ */ jsx53("p", { className: "font-medium text-[var(--color-on-surface)] mb-1", children: displayLabel }),
+        /* @__PURE__ */ jsx53("div", { className: "flex flex-col gap-0.5", children: payload.map((entry, i) => /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx53(
             "span",
             {
               className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full",
               style: { backgroundColor: entry.color }
             }
           ),
-          /* @__PURE__ */ jsx52("span", { className: "text-[var(--color-on-surface-muted)]", children: entry.name }),
-          /* @__PURE__ */ jsx52("span", { className: "ml-auto font-medium tabular-nums text-[var(--color-on-surface)]", children: formatter ? formatter(entry.value, entry.name) : entry.value.toLocaleString() })
+          /* @__PURE__ */ jsx53("span", { className: "text-[var(--color-on-surface-muted)]", children: entry.name }),
+          /* @__PURE__ */ jsx53("span", { className: "ml-auto font-medium tabular-nums text-[var(--color-on-surface)]", children: formatter ? formatter(entry.value, entry.name) : entry.value.toLocaleString() })
         ] }, i)) })
       ]
     }
@@ -4327,21 +4409,21 @@ var ChartTooltip = ({
 ChartTooltip.displayName = "ChartTooltip";
 
 // src/components/chart/chart-legend.tsx
-import { jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs32 } from "react/jsx-runtime";
 var ChartLegend = ({
   payload,
   className
 }) => {
   if (!payload?.length) return null;
-  return /* @__PURE__ */ jsx53("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3", className), children: payload.map((entry, i) => /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-1.5 text-xs text-[var(--color-on-surface-muted)]", children: [
-    /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3", className), children: payload.map((entry, i) => /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-1.5 text-xs text-[var(--color-on-surface-muted)]", children: [
+    /* @__PURE__ */ jsx54(
       "span",
       {
         className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full",
         style: { backgroundColor: entry.color }
       }
     ),
-    /* @__PURE__ */ jsx53("span", { children: entry.value })
+    /* @__PURE__ */ jsx54("span", { children: entry.value })
   ] }, i)) });
 };
 ChartLegend.displayName = "ChartLegend";
@@ -4470,6 +4552,9 @@ export {
   SelectTrigger,
   SelectValue,
   Separator,
+  SidebarNav,
+  SidebarNavGroup,
+  SidebarNavItem,
   Skeleton,
   Spinner,
   StatCard,