@work-rjkashyap/unified-ui 0.2.3 → 0.3.0

package/dist/{chunk-3K2CXZ6H.cjs → chunk-EUHL6H76.cjs}

@@ -775,9 +775,7 @@ var avatarVariants = classVarianceAuthority.cva(
     // Typography for fallback initials
     "font-medium leading-none select-none",
     // Default colors for fallback state
-    "bg-muted text-muted-foreground",
-    // Border for visual separation on grouped/colored backgrounds
-    "ring-2 ring-background"
+    "bg-muted text-muted-foreground"
   ],
   {
     variants: {
@@ -859,15 +857,18 @@ function getInitials(name) {
   return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
 }
 function DefaultFallbackIcon({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
-      className: chunk4ON3M3OM_cjs.cn("size-[60%] text-current opacity-60", className),
+      className: chunk4ON3M3OM_cjs.cn("size-8 translate-y-px text-current opacity-70", className),
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12c2.761 0 5-2.239 5-5s-2.239-5-5-5-5 2.239-5 5 2.239 5 5 5zm0 2c-3.866 0-7 1.79-7 4v1a1 1 0 001 1h12a1 1 0 001-1v-1c0-2.21-3.134-4-7-4z" })
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 14c-4.42 0-8 2.24-8 5v5h16v-5c0-2.76-3.58-5-8-5z" })
+      ]
     }
   );
 }
@@ -988,11 +989,11 @@ var Avatar = React.forwardRef(function Avatar2({
 });
 Avatar.displayName = "Avatar";
 var overlapMap = {
-  xs: { tight: "-ml-2", default: "-ml-1.5", loose: "-ml-1" },
-  sm: { tight: "-ml-3", default: "-ml-2", loose: "-ml-1.5" },
-  md: { tight: "-ml-4", default: "-ml-3", loose: "-ml-2" },
-  lg: { tight: "-ml-5", default: "-ml-3.5", loose: "-ml-2.5" },
-  xl: { tight: "-ml-6", default: "-ml-4", loose: "-ml-3" }
+  xs: { tight: "-ml-3", default: "-ml-2.5", loose: "-ml-1.5" },
+  sm: { tight: "-ml-4", default: "-ml-3", loose: "-ml-2" },
+  md: { tight: "-ml-5", default: "-ml-4", loose: "-ml-3" },
+  lg: { tight: "-ml-6", default: "-ml-5", loose: "-ml-3.5" },
+  xl: { tight: "-ml-8", default: "-ml-6", loose: "-ml-4" }
 };
 var AvatarGroup = React.forwardRef(
   function AvatarGroup2({
@@ -1028,35 +1029,53 @@ var AvatarGroup = React.forwardRef(
                 className: chunk4ON3M3OM_cjs.cn(
                   index > 0 && overlapClass,
                   // Ensure proper stacking order (first avatar on top)
-                  "relative"
+                  // z-index is set via CSS var so hover:z-50! (Tailwind) can override it
+                  "relative inline-flex cursor-pointer transition-transform duration-150 ease-out",
+                  "z-(--ag-z)",
+                  "hover:z-50! hover:scale-110"
                 ),
-                style: { zIndex: totalCount - index },
+                style: { "--ag-z": totalCount - index },
                 children: React.cloneElement(child, {
                   size,
-                  shape
+                  shape,
+                  className: chunk4ON3M3OM_cjs.cn(
+                    child.props?.className,
+                    "ring-2 ring-background"
+                  )
                 })
               },
               child.props?.alt ?? child.props?.name ?? index
             );
           }),
-          overflowCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunk4ON3M3OM_cjs.cn(overlapClass, "relative"), style: { zIndex: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          overflowCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               className: chunk4ON3M3OM_cjs.cn(
-                avatarVariants({ size, shape }),
-                "bg-muted text-muted-foreground",
-                "font-semibold"
+                overlapClass,
+                "relative inline-flex z-(--ag-z)"
               ),
-              role: "img",
-              "aria-label": `${overflowCount} more`,
-              "data-ds": "",
-              "data-ds-component": "avatar-overflow",
-              children: [
-                "+",
-                overflowCount
-              ]
+              style: { "--ag-z": 0 },
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: chunk4ON3M3OM_cjs.cn(
+                    avatarVariants({ size, shape }),
+                    "ring-2 ring-background",
+                    "bg-muted text-muted-foreground",
+                    "font-semibold"
+                  ),
+                  role: "img",
+                  "aria-label": `${overflowCount} more`,
+                  "data-ds": "",
+                  "data-ds-component": "avatar-overflow",
+                  children: [
+                    "+",
+                    overflowCount
+                  ]
+                }
+              )
             }
-          ) })
+          )
         ]
       }
     );
@@ -10317,9 +10336,9 @@ var DropdownMenuItem = React.forwardRef(function DropdownMenuItem2({ className,
       ref,
       className: chunk4ON3M3OM_cjs.cn(
         ...menuItemBase2,
+        "gap-2",
         variant === "danger" && "text-danger focus:bg-danger-muted focus:text-danger-muted-foreground",
         variant === "default" && "text-foreground",
-        icon && "gap-2",
         className
       ),
       "data-ds": "",
@@ -10327,7 +10346,7 @@ var DropdownMenuItem = React.forwardRef(function DropdownMenuItem2({ className,
       ...rest,
       children: [
         icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 [&>svg]:size-4", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 flex items-center gap-2 [&>svg]:shrink-0 [&>svg]:size-4", children }),
         shortcut && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuShortcut, { children: shortcut })
       ]
     }
@@ -10339,13 +10358,13 @@ var DropdownMenuCheckboxItem = React.forwardRef(function DropdownMenuCheckboxIte
     radixUi.DropdownMenu.CheckboxItem,
     {
       ref,
-      className: chunk4ON3M3OM_cjs.cn(...menuItemBase2, "pl-8", className),
+      className: chunk4ON3M3OM_cjs.cn(...menuItemBase2, "gap-2 pl-8", className),
       "data-ds": "",
       "data-ds-component": "dropdown-menu-checkbox-item",
       ...rest,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon6, { className: "size-4" }) }) }),
-        children
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 flex items-center gap-2 [&>svg]:shrink-0 [&>svg]:size-4", children })
       ]
     }
   );
@@ -10360,13 +10379,13 @@ var DropdownMenuRadioItem = React.forwardRef(function DropdownMenuRadioItem2({ c
     radixUi.DropdownMenu.RadioItem,
     {
       ref,
-      className: chunk4ON3M3OM_cjs.cn(...menuItemBase2, "pl-8", className),
+      className: chunk4ON3M3OM_cjs.cn(...menuItemBase2, "gap-2 pl-8", className),
       "data-ds": "",
       "data-ds-component": "dropdown-menu-radio-item",
       ...rest,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(DotIcon2, { className: "size-4" }) }) }),
-        children
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 flex items-center gap-2 [&>svg]:shrink-0 [&>svg]:size-4", children })
       ]
     }
   );
@@ -10414,8 +10433,7 @@ var DropdownMenuSubTrigger = React.forwardRef(function DropdownMenuSubTrigger2({
       ref,
       className: chunk4ON3M3OM_cjs.cn(
         ...menuItemBase2,
-        "data-[state=open]:bg-muted",
-        icon && "gap-2",
+        "gap-2 data-[state=open]:bg-muted",
         inset && "pl-8",
         className
       ),
@@ -10424,7 +10442,7 @@ var DropdownMenuSubTrigger = React.forwardRef(function DropdownMenuSubTrigger2({
       ...rest,
       children: [
         icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 [&>svg]:size-4", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 flex items-center gap-2 [&>svg]:shrink-0 [&>svg]:size-4", children }),
         /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon4, { className: "ml-auto size-4 text-muted-foreground" })
       ]
     }
@@ -13477,18 +13495,7 @@ var stripedStyle = {
   backgroundSize: "1rem 1rem"
 };
 var PROGRESS_STYLE_ID = "unified-ui-progress-keyframes";
-function ProgressKeyframes() {
-  if (typeof document !== "undefined") {
-    if (document.getElementById(PROGRESS_STYLE_ID)) {
-      return null;
-    }
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "style",
-    {
-      id: PROGRESS_STYLE_ID,
-      dangerouslySetInnerHTML: {
-        __html: `
+var PROGRESS_KEYFRAMES_CSS = `
 @keyframes unified-ui-progress-indeterminate {
   0% { transform: translateX(-100%); width: 50%; }
   50% { transform: translateX(50%); width: 30%; }
@@ -13498,10 +13505,17 @@ function ProgressKeyframes() {
   0% { background-position: 1rem 0; }
   100% { background-position: 0 0; }
 }
-`
-      }
+`;
+function useProgressKeyframes() {
+  React.useEffect(() => {
+    if (document.getElementById(PROGRESS_STYLE_ID)) {
+      return;
     }
-  );
+    const style = document.createElement("style");
+    style.id = PROGRESS_STYLE_ID;
+    style.textContent = PROGRESS_KEYFRAMES_CSS;
+    document.head.appendChild(style);
+  }, []);
 }
 var Progress = React.forwardRef(
   function Progress2({
@@ -13522,6 +13536,7 @@ var Progress = React.forwardRef(
     indicatorClassName,
     ...rest
   }, ref) {
+    useProgressKeyframes();
     const clampedValue = Math.max(min2, Math.min(value, max2));
     const range = max2 - min2;
     const percentage = range > 0 ? (clampedValue - min2) / range * 100 : 0;
@@ -13561,7 +13576,6 @@ var Progress = React.forwardRef(
         "data-ds-size": size,
         ...indeterminate ? { "data-ds-indeterminate": "" } : {},
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ProgressKeyframes, {}),
           showLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium leading-4 text-foreground", children: label ?? "" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium leading-4 text-muted-foreground tabular-nums", children: typeof label === "string" || !label ? labelFormatter(clampedValue, max2) : "" })
@@ -14595,6 +14609,168 @@ var SelectSeparator = React.forwardRef(function SelectSeparator2({ className, ..
   );
 });
 SelectSeparator.displayName = "SelectSeparator";
+var separatorVariants = classVarianceAuthority.cva(
+  // Base styles — shared across all variants
+  "shrink-0 bg-border",
+  {
+    variants: {
+      /**
+       * Visual variant of the separator line.
+       */
+      variant: {
+        /**
+         * Default — solid line using the border token color.
+         */
+        default: "",
+        /**
+         * Muted — lighter separator using the muted-foreground color at
+         * reduced opacity. Useful for less prominent divisions.
+         */
+        muted: "bg-muted-foreground/20",
+        /**
+         * Dashed — renders a dashed border instead of a solid background.
+         * Uses border-style rather than background.
+         */
+        dashed: "bg-transparent !h-auto !w-auto",
+        /**
+         * Gradient — fades in from transparent at both ends.
+         * Creates a more elegant, subtle divider.
+         */
+        gradient: "bg-transparent"
+      },
+      /**
+       * Orientation of the separator.
+       */
+      orientation: {
+        horizontal: "h-px w-full",
+        vertical: "h-full w-px"
+      }
+    },
+    compoundVariants: [
+      // Dashed + horizontal
+      {
+        variant: "dashed",
+        orientation: "horizontal",
+        class: "border-b border-dashed border-border w-full"
+      },
+      // Dashed + vertical
+      {
+        variant: "dashed",
+        orientation: "vertical",
+        class: "border-l border-dashed border-border h-full"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      orientation: "horizontal"
+    }
+  }
+);
+var spacingYMap = {
+  0: "my-0",
+  1: "my-1",
+  2: "my-2",
+  3: "my-3",
+  4: "my-4",
+  5: "my-5",
+  6: "my-6",
+  8: "my-8",
+  10: "my-10",
+  12: "my-12"
+};
+var spacingXMap = {
+  0: "mx-0",
+  1: "mx-1",
+  2: "mx-2",
+  3: "mx-3",
+  4: "mx-4",
+  5: "mx-5",
+  6: "mx-6",
+  8: "mx-8",
+  10: "mx-10",
+  12: "mx-12"
+};
+var gradientHorizontal = "bg-gradient-to-r from-transparent via-border to-transparent";
+var gradientVertical = "bg-gradient-to-b from-transparent via-border to-transparent";
+var Separator2 = React.forwardRef(function Separator3({
+  variant = "default",
+  orientation = "horizontal",
+  decorative = true,
+  spacing = 4,
+  label,
+  className,
+  ...rest
+}, ref) {
+  const isVertical = orientation === "vertical";
+  const spacingClass = isVertical ? spacingXMap[spacing] ?? "mx-4" : spacingYMap[spacing] ?? "my-4";
+  const gradientClass = variant === "gradient" ? isVertical ? gradientVertical : gradientHorizontal : void 0;
+  if (label && !isVertical) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunk4ON3M3OM_cjs.cn(
+          "flex items-center w-full",
+          spacingClass,
+          className
+        ),
+        role: decorative ? "none" : "separator",
+        "aria-orientation": decorative ? void 0 : orientation,
+        "data-ds": "",
+        "data-ds-component": "separator",
+        "data-ds-variant": variant,
+        "data-ds-orientation": orientation,
+        "data-ds-labeled": "",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            radixUi.Separator.Root,
+            {
+              decorative: true,
+              orientation,
+              className: chunk4ON3M3OM_cjs.cn(
+                separatorVariants({ variant, orientation }),
+                gradientClass,
+                "flex-1"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 text-xs text-muted-foreground font-medium select-none shrink-0", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            radixUi.Separator.Root,
+            {
+              decorative: true,
+              orientation,
+              className: chunk4ON3M3OM_cjs.cn(
+                separatorVariants({ variant, orientation }),
+                gradientClass,
+                "flex-1"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Separator.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: chunk4ON3M3OM_cjs.cn(
+        separatorVariants({ variant, orientation }),
+        gradientClass,
+        spacingClass,
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "separator",
+      "data-ds-variant": variant,
+      "data-ds-orientation": orientation,
+      ...rest
+    }
+  );
+});
+Separator2.displayName = "Separator";
 var sheetContentVariants = classVarianceAuthority.cva(
   [
     // Layout
@@ -15163,51 +15339,14 @@ var DrawerClose = React.forwardRef(function DrawerClose2({ className, ...rest },
   );
 });
 DrawerClose.displayName = "DrawerClose";
-var SidebarContext = React.createContext({
-  collapsed: false,
-  setCollapsed: () => {
-  },
-  isMobile: false,
-  mobileOpen: false,
-  setMobileOpen: () => {
-  }
-});
-function useSidebarContext() {
-  return React.useContext(SidebarContext);
-}
-function SidebarProvider({
-  defaultCollapsed = false,
-  collapsed: controlledCollapsed,
-  onCollapsedChange,
-  children
-}) {
-  const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed);
-  const [mobileOpen, setMobileOpen] = React.useState(false);
-  const collapsed = controlledCollapsed !== void 0 ? controlledCollapsed : internalCollapsed;
-  const setCollapsed = React.useCallback(
-    (v) => {
-      if (controlledCollapsed === void 0) setInternalCollapsed(v);
-      onCollapsedChange?.(v);
-    },
-    [controlledCollapsed, onCollapsedChange]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SidebarContext.Provider,
-    {
-      value: {
-        collapsed,
-        setCollapsed,
-        isMobile: false,
-        mobileOpen,
-        setMobileOpen
-      },
-      children
-    }
-  );
-}
-SidebarProvider.displayName = "SidebarProvider";
-function ChevronLeftIcon3({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+var SIDEBAR_COOKIE_NAME = "sidebar:state";
+var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var SIDEBAR_WIDTH = "16rem";
+var SIDEBAR_WIDTH_MOBILE = "18rem";
+var SIDEBAR_WIDTH_ICON = "3rem";
+var SIDEBAR_KEYBOARD_SHORTCUT = "b";
+function PanelLeftIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
       className,
@@ -15219,162 +15358,893 @@ function ChevronLeftIcon3({ className }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" })
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3v18" })
+      ]
     }
   );
 }
-function ChevronRightIcon7({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      className,
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" })
-    }
-  );
+var SidebarContext = React.createContext({
+  state: "expanded",
+  open: true,
+  setOpen: () => {
+  },
+  openMobile: false,
+  setOpenMobile: () => {
+  },
+  isMobile: false,
+  toggleSidebar: () => {
+  },
+  variant: "default",
+  collapsible: "offcanvas",
+  side: "left"
+});
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a <SidebarProvider>");
+  }
+  return context;
 }
-var Sidebar = React.forwardRef(function Sidebar2({
-  side = "left",
-  collapsedWidth = "64px",
-  expandedWidth = "240px",
-  className,
-  children
-}, ref) {
-  const { collapsed } = useSidebarContext();
-  const shouldReduce = framerMotion.useReducedMotion();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    framerMotion.motion.aside,
-    {
-      ref,
-      className: chunk4ON3M3OM_cjs.cn(
-        "flex flex-col h-full border-r border-border bg-background overflow-hidden",
-        side === "right" && "border-r-0 border-l",
-        className
-      ),
-      animate: {
-        width: collapsed ? collapsedWidth : expandedWidth
+var useSidebarContext = useSidebar;
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(false);
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => setIsMobile(mql.matches);
+    mql.addEventListener("change", onChange);
+    setIsMobile(mql.matches);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return isMobile;
+}
+var SidebarProvider = React.forwardRef(
+  function SidebarProvider2({
+    defaultOpen = true,
+    open: openProp,
+    onOpenChange: setOpenProp,
+    variant = "default",
+    collapsible = "offcanvas",
+    side = "left",
+    className,
+    style,
+    children,
+    ...rest
+  }, ref) {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);
+    const isControlled = openProp !== void 0;
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = isControlled ? openProp : _open;
+    const setOpen = React.useCallback(
+      (value) => {
+        const openState = typeof value === "function" ? value(open) : value;
+        if (setOpenProp) {
+          setOpenProp(openState);
+        } else {
+          _setOpen(openState);
+        }
+        try {
+          document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+        } catch {
+        }
       },
-      transition: shouldReduce ? { duration: 0 } : { type: "spring", stiffness: 300, damping: 30, mass: 0.8 },
-      "data-ds": "",
-      "data-ds-component": "sidebar",
-      "data-ds-collapsed": collapsed ? "" : void 0,
-      "data-ds-animated": "",
-      children
-    }
-  );
-});
-Sidebar.displayName = "Sidebar";
-var SidebarToggle = React.forwardRef(
-  function SidebarToggle2({ className, children, ...rest }, ref) {
-    const { collapsed, setCollapsed } = useSidebarContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        ref,
-        type: "button",
-        onClick: () => setCollapsed(!collapsed),
-        "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
-        "aria-expanded": !collapsed,
-        className: chunk4ON3M3OM_cjs.cn(
-          "inline-flex items-center justify-center size-8 rounded-md",
-          "text-muted-foreground hover:text-foreground hover:bg-accent",
-          "transition-colors duration-fast",
-          chunk3EHT6IOA_cjs.focusRingClasses,
-          className
-        ),
-        "data-ds-component": "sidebar-toggle",
-        ...rest,
-        children: children ?? (collapsed ? /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon7, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon3, { className: "size-4" }))
+      [setOpenProp, open]
+    );
+    const toggleSidebar = React.useCallback(() => {
+      if (isMobile) {
+        setOpenMobile((prev) => !prev);
+      } else {
+        setOpen((prev) => !prev);
       }
+    }, [isMobile, setOpen]);
+    React.useEffect(() => {
+      const handleKeyDown = (e) => {
+        if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault();
+          toggleSidebar();
+        }
+      };
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [toggleSidebar]);
+    const state = open ? "expanded" : "collapsed";
+    const contextValue = React.useMemo(
+      () => ({
+        state,
+        open,
+        setOpen,
+        openMobile,
+        setOpenMobile,
+        isMobile,
+        toggleSidebar,
+        variant,
+        collapsible,
+        side
+      }),
+      [
+        state,
+        open,
+        setOpen,
+        openMobile,
+        setOpenMobile,
+        isMobile,
+        toggleSidebar,
+        variant,
+        collapsible,
+        side
+      ]
     );
-  }
-);
-SidebarToggle.displayName = "SidebarToggle";
-var SidebarHeader = React.forwardRef(
-  function SidebarHeader2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Provider, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         className: chunk4ON3M3OM_cjs.cn(
-          "flex items-center gap-3 p-4 border-b border-border shrink-0",
+          "group/sidebar-wrapper flex min-h-svh w-full",
+          "has-data-[variant=inset]:bg-sidebar",
           className
         ),
-        "data-ds-component": "sidebar-header",
-        ...rest,
-        children
-      }
-    );
-  }
-);
-SidebarHeader.displayName = "SidebarHeader";
-var SidebarContent = React.forwardRef(
-  function SidebarContent2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: chunk4ON3M3OM_cjs.cn("flex-1 overflow-y-auto py-2", className),
-        "data-ds-component": "sidebar-content",
+        style: {
+          "--sidebar-width": SIDEBAR_WIDTH,
+          "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+          ...style
+        },
+        "data-ds": "",
+        "data-ds-component": "sidebar-provider",
         ...rest,
         children
       }
-    );
+    ) }) });
   }
 );
-SidebarContent.displayName = "SidebarContent";
-var SidebarFooter = React.forwardRef(
-  function SidebarFooter2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: chunk4ON3M3OM_cjs.cn("shrink-0 border-t border-border p-4", className),
-        "data-ds-component": "sidebar-footer",
-        ...rest,
-        children
-      }
-    );
+SidebarProvider.displayName = "SidebarProvider";
+var Sidebar = React.forwardRef(
+  function Sidebar2({
+    side: sideProp,
+    variant: variantProp,
+    collapsible: collapsibleProp,
+    className,
+    children,
+    ...rest
+  }, ref) {
+    const ctx = useSidebar();
+    const side = sideProp ?? ctx.side;
+    const variant = variantProp ?? ctx.variant;
+    const collapsible = collapsibleProp ?? ctx.collapsible;
+    const shouldReduce = framerMotion.useReducedMotion();
+    if (collapsible === "none") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          className: chunk4ON3M3OM_cjs.cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          ),
+          "data-ds": "",
+          "data-ds-component": "sidebar",
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      ctx.isMobile && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: ctx.openMobile && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            className: "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
+            variants: shouldReduce ? void 0 : chunkF4JJFWWU_cjs.overlayBackdrop.variants,
+            initial: shouldReduce ? { opacity: 0 } : "initial",
+            animate: shouldReduce ? { opacity: 1 } : "animate",
+            exit: shouldReduce ? { opacity: 0 } : "exit",
+            transition: shouldReduce ? { duration: 0.15 } : chunkF4JJFWWU_cjs.overlayBackdrop.transition,
+            onClick: () => ctx.setOpenMobile(false),
+            "data-ds-animated": ""
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            className: chunk4ON3M3OM_cjs.cn(
+              "fixed inset-y-0 z-50 flex w-[--sidebar-width-mobile] flex-col bg-sidebar text-sidebar-foreground",
+              "p-0 shadow-lg",
+              side === "left" ? "left-0 border-r border-sidebar-border" : "right-0 border-l border-sidebar-border",
+              className
+            ),
+            style: {
+              "--sidebar-width-mobile": SIDEBAR_WIDTH_MOBILE
+            },
+            initial: {
+              x: side === "left" ? "-100%" : "100%",
+              opacity: shouldReduce ? 0 : 1
+            },
+            animate: {
+              x: 0,
+              opacity: 1
+            },
+            exit: {
+              x: side === "left" ? "-100%" : "100%",
+              opacity: shouldReduce ? 0 : 1
+            },
+            transition: shouldReduce ? { duration: 0.15 } : {
+              type: "spring",
+              stiffness: 300,
+              damping: 30,
+              mass: 0.8
+            },
+            "data-ds": "",
+            "data-ds-component": "sidebar",
+            "data-variant": variant,
+            "data-side": side,
+            "data-mobile": "",
+            "data-ds-animated": "",
+            children
+          }
+        )
+      ] }) }),
+      !ctx.isMobile && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          className: "group peer hidden md:block text-sidebar-foreground",
+          "data-state": ctx.state,
+          "data-collapsible": ctx.state === "collapsed" ? collapsible : "",
+          "data-variant": variant,
+          "data-side": side,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.div,
+              {
+                className: chunk4ON3M3OM_cjs.cn(
+                  "relative h-svh bg-transparent",
+                  "duration-200 ease-linear",
+                  variant === "floating" || variant === "inset" ? "w-[calc(var(--sidebar-width)+(--spacing(4)))]" : "w-[--sidebar-width]"
+                ),
+                animate: {
+                  width: ctx.state === "collapsed" ? collapsible === "offcanvas" ? "0px" : variant === "floating" || variant === "inset" ? "calc(var(--sidebar-width-icon) + theme(spacing.4) + 2px)" : "var(--sidebar-width-icon)" : variant === "floating" || variant === "inset" ? "calc(var(--sidebar-width) + theme(spacing.4))" : "var(--sidebar-width)"
+                },
+                transition: shouldReduce ? { duration: 0 } : { duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.div,
+              {
+                className: chunk4ON3M3OM_cjs.cn(
+                  "fixed inset-y-0 z-10 hidden h-svh md:flex flex-col",
+                  side === "left" ? "left-0" : "right-0",
+                  // Variant styles
+                  variant === "floating" && "m-2 rounded-lg border border-sidebar-border shadow-lg overflow-hidden",
+                  variant === "inset" && "m-2 rounded-lg overflow-hidden",
+                  variant === "default" && chunk4ON3M3OM_cjs.cn(
+                    "border-sidebar-border",
+                    side === "left" ? "border-r" : "border-l"
+                  ),
+                  "bg-sidebar text-sidebar-foreground",
+                  className
+                ),
+                animate: {
+                  width: ctx.state === "collapsed" ? collapsible === "offcanvas" ? "0px" : "var(--sidebar-width-icon)" : "var(--sidebar-width)"
+                },
+                transition: shouldReduce ? { duration: 0 } : { duration: 0.2, ease: [0.25, 0.1, 0.25, 1] },
+                "data-ds": "",
+                "data-ds-component": "sidebar",
+                "data-variant": variant,
+                "data-side": side,
+                "data-state": ctx.state,
+                "data-collapsible": ctx.state === "collapsed" ? collapsible : "",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: chunk4ON3M3OM_cjs.cn(
+                      "flex h-full w-full flex-col",
+                      "group-data-[collapsible=offcanvas]:opacity-0 group-data-[collapsible=offcanvas]:pointer-events-none"
+                    ),
+                    "data-sidebar": "content-wrapper",
+                    children
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+Sidebar.displayName = "Sidebar";
+var SidebarTrigger = React.forwardRef(function SidebarTrigger2({ className, onClick, children, ...rest }, ref) {
+  const { toggleSidebar, state, isMobile } = useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      onClick: (e) => {
+        onClick?.(e);
+        toggleSidebar();
+      },
+      "aria-label": state === "expanded" ? "Collapse sidebar" : "Expand sidebar",
+      "aria-expanded": state === "expanded",
+      className: chunk4ON3M3OM_cjs.cn(
+        "inline-flex items-center justify-center size-8 shrink-0 rounded-md",
+        "text-muted-foreground hover:text-foreground hover:bg-accent",
+        "transition-colors duration-fast",
+        chunk3EHT6IOA_cjs.focusRingClasses,
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "sidebar-trigger",
+      ...rest,
+      children: [
+        children ?? /* @__PURE__ */ jsxRuntime.jsx(PanelLeftIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
+      ]
+    }
+  );
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+var SidebarToggle = SidebarTrigger;
+var SidebarRail = React.forwardRef(
+  function SidebarRail2({ className, ...rest }, ref) {
+    const { toggleSidebar, side } = useSidebar();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        tabIndex: -1,
+        "aria-label": "Toggle Sidebar",
+        onClick: toggleSidebar,
+        title: "Toggle Sidebar",
+        className: chunk4ON3M3OM_cjs.cn(
+          "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 md:flex items-center justify-center",
+          "after:absolute after:inset-y-0 after:left-1/2 after:w-0.5",
+          "hover:after:bg-sidebar-border",
+          "transition-all duration-fast ease-linear",
+          "group-data-[side=left]:right-0 group-data-[side=right]:left-0",
+          side === "left" ? "cursor-w-resize group-data-[state=collapsed]:cursor-e-resize" : "cursor-e-resize group-data-[state=collapsed]:cursor-w-resize",
+          "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize",
+          "[[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+          className
+        ),
+        "data-ds": "",
+        "data-ds-component": "sidebar-rail",
+        ...rest
+      }
+    );
+  }
+);
+SidebarRail.displayName = "SidebarRail";
+var SidebarInset = React.forwardRef(
+  function SidebarInset2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "main",
+      {
+        ref,
+        className: chunk4ON3M3OM_cjs.cn(
+          "relative flex min-h-svh flex-1 flex-col bg-background",
+          "peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))]",
+          "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0",
+          "md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
+          className
+        ),
+        "data-ds": "",
+        "data-ds-component": "sidebar-inset",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+SidebarInset.displayName = "SidebarInset";
+var SidebarHeader = React.forwardRef(
+  function SidebarHeader2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: chunk4ON3M3OM_cjs.cn(
+          "flex flex-col gap-2 p-2",
+          "group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-1.5",
+          className
+        ),
+        "data-ds": "",
+        "data-ds-component": "sidebar-header",
+        "data-sidebar": "header",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+SidebarHeader.displayName = "SidebarHeader";
+var SidebarContent = React.forwardRef(
+  function SidebarContent2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: chunk4ON3M3OM_cjs.cn(
+          "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden",
+          "group-data-[collapsible=icon]:items-center",
+          className
+        ),
+        "data-ds": "",
+        "data-ds-component": "sidebar-content",
+        "data-sidebar": "content",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+SidebarContent.displayName = "SidebarContent";
+var SidebarFooter = React.forwardRef(
+  function SidebarFooter2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: chunk4ON3M3OM_cjs.cn(
+          "flex flex-col gap-2 p-2",
+          "group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-1.5",
+          className
+        ),
+        "data-ds": "",
+        "data-ds-component": "sidebar-footer",
+        "data-sidebar": "footer",
+        ...rest,
+        children
+      }
+    );
   }
 );
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSection = React.forwardRef(
-  function SidebarSection2({ title, className, children, ...rest }, ref) {
-    const { collapsed } = useSidebarContext();
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+var SidebarSeparator = React.forwardRef(function SidebarSeparator2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "hr",
+    {
+      ref,
+      className: chunk4ON3M3OM_cjs.cn("mx-2 w-auto border-sidebar-border", className),
+      "data-ds": "",
+      "data-ds-component": "sidebar-separator",
+      "data-sidebar": "separator",
+      ...rest
+    }
+  );
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+var SidebarInput = React.forwardRef(
+  function SidebarInput2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref,
+        className: chunk4ON3M3OM_cjs.cn(
+          "h-8 w-full rounded-md border border-sidebar-border bg-background px-3",
+          "text-sm text-sidebar-foreground placeholder:text-sidebar-foreground/50",
+          "transition-[border-color,box-shadow] duration-fast",
+          "focus:border-sidebar-ring focus:outline-none focus:ring-2 focus:ring-sidebar-ring/20",
+          className
+        ),
+        "data-ds": "",
+        "data-ds-component": "sidebar-input",
+        "data-sidebar": "input",
+        ...rest
+      }
+    );
+  }
+);
+SidebarInput.displayName = "SidebarInput";
+var SidebarGroup = React.forwardRef(
+  function SidebarGroup2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
-        className: chunk4ON3M3OM_cjs.cn("px-3 py-2", className),
-        "data-ds-component": "sidebar-section",
+        className: chunk4ON3M3OM_cjs.cn(
+          "relative flex w-full min-w-0 flex-col p-2",
+          "group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-1.5",
+          className
+        ),
+        "data-ds": "",
+        "data-ds-component": "sidebar-group",
+        "data-sidebar": "group",
         ...rest,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: title && !collapsed && /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.motion.p,
-            {
-              className: "px-2 mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground",
-              initial: { opacity: 0 },
-              animate: { opacity: 1 },
-              exit: { opacity: 0 },
-              transition: { duration: 0.15 },
-              "data-ds-animated": "",
-              children: title
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5", children })
-        ]
+        children
+      }
+    );
+  }
+);
+SidebarGroup.displayName = "SidebarGroup";
+var SidebarGroupLabel = React.forwardRef(function SidebarGroupLabel2({ className, asChild = false, children, ...rest }, ref) {
+  const { state } = useSidebar();
+  const classes = chunk4ON3M3OM_cjs.cn(
+    "flex h-8 shrink-0 items-center rounded-md px-2",
+    "text-xs font-medium text-sidebar-foreground/70",
+    "outline-none ring-sidebar-ring",
+    "transition-[margin,opacity,padding] duration-200 ease-linear",
+    // When collapsed to icon mode, hide label
+    state === "collapsed" && "opacity-0 overflow-hidden h-0 p-0 m-0",
+    className
+  );
+  if (asChild) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: classes,
+        "data-ds": "",
+        "data-ds-component": "sidebar-group-label",
+        "data-sidebar": "group-label",
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: classes,
+      "data-ds": "",
+      "data-ds-component": "sidebar-group-label",
+      "data-sidebar": "group-label",
+      ...rest,
+      children
+    }
+  );
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+var SidebarGroupAction = React.forwardRef(function SidebarGroupAction2({ className, children, ...rest }, ref) {
+  const { state } = useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: chunk4ON3M3OM_cjs.cn(
+        "absolute right-3 top-3.5 flex items-center justify-center",
+        "size-5 rounded-md p-0",
+        "text-sidebar-foreground/70 ring-sidebar-ring",
+        "outline-none",
+        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        "transition-transform duration-200",
+        chunk3EHT6IOA_cjs.focusRingClasses,
+        "[&>svg]:size-4 [&>svg]:shrink-0",
+        // When icon-collapsed, hide
+        state === "collapsed" && "hidden",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "sidebar-group-action",
+      "data-sidebar": "group-action",
+      ...rest,
+      children
+    }
+  );
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+var SidebarGroupContent = React.forwardRef(function SidebarGroupContent2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: chunk4ON3M3OM_cjs.cn("w-full text-sm", className),
+      "data-ds": "",
+      "data-ds-component": "sidebar-group-content",
+      "data-sidebar": "group-content",
+      ...rest,
+      children
+    }
+  );
+});
+SidebarGroupContent.displayName = "SidebarGroupContent";
+var SidebarMenu = React.forwardRef(
+  function SidebarMenu2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        ref,
+        className: chunk4ON3M3OM_cjs.cn(
+          "flex w-full min-w-0 flex-col gap-1 list-none m-0 p-0",
+          "group-data-[collapsible=icon]:items-center",
+          className
+        ),
+        "data-ds": "",
+        "data-ds-component": "sidebar-menu",
+        "data-sidebar": "menu",
+        ...rest,
+        children
       }
     );
   }
 );
-SidebarSection.displayName = "SidebarSection";
+SidebarMenu.displayName = "SidebarMenu";
+var SidebarMenuItem = React.forwardRef(function SidebarMenuItem2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      ref,
+      className: chunk4ON3M3OM_cjs.cn("group/menu-item relative list-none m-0 p-0", className),
+      "data-ds": "",
+      "data-ds-component": "sidebar-menu-item",
+      "data-sidebar": "menu-item",
+      ...rest,
+      children
+    }
+  );
+});
+SidebarMenuItem.displayName = "SidebarMenuItem";
+var SidebarMenuButton = React.forwardRef(function SidebarMenuButton2({
+  isActive = false,
+  size = "default",
+  variant = "default",
+  tooltip,
+  asChild = false,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const { state, isMobile, collapsible } = useSidebar();
+  const isCollapsed = state === "collapsed" && collapsible === "icon";
+  const lgExpandedLayout = !isCollapsed ? [
+    "[&>*:nth-child(2)]:flex-1 [&>*:nth-child(2)]:min-w-0",
+    "[&>*:nth-child(2)]:grid [&>*:nth-child(2)]:text-left [&>*:nth-child(2)]:text-sm [&>*:nth-child(2)]:leading-tight",
+    "[&>*:nth-child(2)_span]:truncate",
+    "[&>svg:last-child]:ml-auto [&>svg:last-child]:shrink-0"
+  ].join(" ") : "";
+  const sizeClasses3 = {
+    sm: "h-7 text-xs",
+    default: "h-8 text-sm",
+    lg: [
+      "h-12 text-sm",
+      lgExpandedLayout,
+      // lg collapsed: shrink height to match default buttons and scale
+      // the first-child wrapper (logo div, Avatar) to 24px so it fits
+      // neatly inside the 32px collapsed button.
+      "group-data-[collapsible=icon]:!h-8",
+      "group-data-[collapsible=icon]:[&>:first-child]:!size-6",
+      "group-data-[collapsible=icon]:[&>:first-child]:shrink-0",
+      "group-data-[collapsible=icon]:[&>:first-child]:overflow-hidden",
+      "group-data-[collapsible=icon]:[&>:first-child]:rounded-md"
+    ].join(" ")
+  };
+  const buttonClasses = chunk4ON3M3OM_cjs.cn(
+    // Base
+    "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2",
+    "outline-none ring-sidebar-ring",
+    "transition-[width,height,padding] duration-200 ease-linear",
+    chunk3EHT6IOA_cjs.focusRingClasses,
+    // Active & hover states
+    "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+    "active:bg-sidebar-accent active:text-sidebar-accent-foreground",
+    // Size
+    sizeClasses3[size],
+    // Variant
+    variant === "outline" && "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+    // Active
+    isActive && "bg-sidebar-accent text-sidebar-accent-foreground font-medium",
+    // Icon collapse — fixed 32px button, no padding, center the icon,
+    // hide everything except the first child (icon/avatar).
+    // Plain <svg> icons stay at size-4 (16px); lg wrapper divs are
+    // handled separately by the lg sizeClass above.
+    isCollapsed && "!size-8 !p-0 !gap-0 justify-center [&>*:not(:first-child)]:hidden [&>svg]:size-4",
+    // Disabled
+    "disabled:pointer-events-none disabled:opacity-50",
+    // Icon sizing
+    "[&>svg]:size-4 [&>svg]:shrink-0",
+    className
+  );
+  const button = asChild ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      className: buttonClasses,
+      "data-ds": "",
+      "data-ds-component": "sidebar-menu-button",
+      "data-sidebar": "menu-button",
+      "data-size": size,
+      "data-active": isActive ? "" : void 0,
+      children
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: buttonClasses,
+      "aria-current": isActive ? "page" : void 0,
+      "data-ds": "",
+      "data-ds-component": "sidebar-menu-button",
+      "data-sidebar": "menu-button",
+      "data-size": size,
+      "data-active": isActive ? "" : void 0,
+      ...rest,
+      children
+    }
+  );
+  if (!tooltip || isMobile) {
+    return button;
+  }
+  if (!isCollapsed) {
+    return button;
+  }
+  const tooltipContent = typeof tooltip === "string" ? tooltip : tooltip;
+  return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Tooltip.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Trigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      radixUi.Tooltip.Content,
+      {
+        side: "right",
+        align: "center",
+        sideOffset: 4,
+        className: chunk4ON3M3OM_cjs.cn(
+          "z-(--z-tooltip,9999)",
+          "overflow-hidden rounded-md px-3 py-1.5",
+          "bg-sidebar-primary text-sidebar-primary-foreground",
+          "text-xs font-medium",
+          "animate-in fade-in-0 zoom-in-95",
+          "data-[side=right]:slide-in-from-left-2"
+        ),
+        children: tooltipContent
+      }
+    ) })
+  ] });
+});
+SidebarMenuButton.displayName = "SidebarMenuButton";
+var SidebarMenuAction = React.forwardRef(function SidebarMenuAction2({ showOnHover = false, className, children, ...rest }, ref) {
+  const { state } = useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: chunk4ON3M3OM_cjs.cn(
+        "absolute right-1 top-1.5 flex items-center justify-center",
+        "size-5 rounded-md p-0",
+        "text-sidebar-foreground/70 outline-none ring-sidebar-ring",
+        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        "transition-opacity duration-fast",
+        chunk3EHT6IOA_cjs.focusRingClasses,
+        "[&>svg]:size-4 [&>svg]:shrink-0",
+        // Show on hover only
+        showOnHover && "opacity-0 group-hover/menu-item:opacity-100 group-focus-within/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        // Hide when collapsed to icon mode
+        state === "collapsed" && "hidden",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "sidebar-menu-action",
+      "data-sidebar": "menu-action",
+      ...rest,
+      children
+    }
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+var SidebarMenuBadge = React.forwardRef(function SidebarMenuBadge2({ className, children, ...rest }, ref) {
+  const { state } = useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: chunk4ON3M3OM_cjs.cn(
+        "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1",
+        "text-xs font-medium tabular-nums text-sidebar-foreground",
+        "select-none pointer-events-none",
+        // Hide when collapsed
+        state === "collapsed" && "hidden",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "sidebar-menu-badge",
+      "data-sidebar": "menu-badge",
+      ...rest,
+      children
+    }
+  );
+});
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+var SidebarMenuSkeleton = React.forwardRef(function SidebarMenuSkeleton2({ className, showIcon = false, ...rest }, ref) {
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: chunk4ON3M3OM_cjs.cn(
+        "flex h-8 items-center gap-2 rounded-md px-2",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "sidebar-menu-skeleton",
+      "data-sidebar": "menu-skeleton",
+      ...rest,
+      children: [
+        showIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-4 rounded-md bg-sidebar-accent animate-pulse" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "h-4 max-w-[--skeleton-width] flex-1 rounded-md bg-sidebar-accent animate-pulse",
+            style: { "--skeleton-width": width }
+          }
+        )
+      ]
+    }
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+var SidebarMenuSub = React.forwardRef(function SidebarMenuSub2({ className, children, ...rest }, ref) {
+  const { state } = useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      ref,
+      className: chunk4ON3M3OM_cjs.cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 list-none m-0 p-0",
+        "border-l border-sidebar-border pl-2.5 py-0.5",
+        // Hide when collapsed to icon
+        state === "collapsed" && "hidden",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "sidebar-menu-sub",
+      "data-sidebar": "menu-sub",
+      ...rest,
+      children
+    }
+  );
+});
+SidebarMenuSub.displayName = "SidebarMenuSub";
+var SidebarMenuSubItem = React.forwardRef(function SidebarMenuSubItem2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      ref,
+      className: chunk4ON3M3OM_cjs.cn("list-none m-0 p-0", className),
+      "data-ds": "",
+      "data-ds-component": "sidebar-menu-sub-item",
+      "data-sidebar": "menu-sub-item",
+      ...rest,
+      children
+    }
+  );
+});
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+var SidebarMenuSubButton = React.forwardRef(function SidebarMenuSubButton2({ isActive = false, size = "md", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      ref,
+      className: chunk4ON3M3OM_cjs.cn(
+        "flex min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 no-underline",
+        "text-sidebar-foreground/70 outline-none ring-sidebar-ring",
+        "transition-colors duration-fast",
+        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:no-underline",
+        chunk3EHT6IOA_cjs.focusRingClasses,
+        size === "sm" ? "h-6 text-xs" : "h-7 text-xs",
+        isActive && "bg-sidebar-accent text-sidebar-accent-foreground font-medium",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        className
+      ),
+      "aria-current": isActive ? "page" : void 0,
+      "data-ds": "",
+      "data-ds-component": "sidebar-menu-sub-button",
+      "data-sidebar": "menu-sub-button",
+      "data-active": isActive ? "" : void 0,
+      ...rest,
+      children
+    }
+  );
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+var SidebarSection = SidebarGroup;
 var SidebarItem = React.forwardRef(
   function SidebarItem2({
     icon,
@@ -15386,12 +16256,14 @@ var SidebarItem = React.forwardRef(
     className,
     children,
     ...rest
-  }, _ref) {
-    const { collapsed } = useSidebarContext();
+  }, ref) {
+    const { state } = useSidebar();
+    const isCollapsed = state === "collapsed";
     const Tag3 = href ? "a" : "button";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Tag3,
       {
+        ref,
         href,
         type: href ? void 0 : "button",
         disabled,
@@ -15402,17 +16274,18 @@ var SidebarItem = React.forwardRef(
           "transition-colors duration-fast",
           "disabled:pointer-events-none disabled:opacity-50",
           chunk3EHT6IOA_cjs.focusRingClasses,
-          active ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:text-foreground hover:bg-accent/60",
-          collapsed && "justify-center",
+          active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent/60",
+          isCollapsed && "justify-center",
           className
         ),
-        title: collapsed && typeof label === "string" ? label : void 0,
+        title: isCollapsed && typeof label === "string" ? label : void 0,
+        "data-ds": "",
         "data-ds-component": "sidebar-item",
         "data-ds-active": active ? "" : void 0,
         ...rest,
         children: [
           icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-5 flex items-center justify-center", children: icon }),
-          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: !collapsed && (label || children) && /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: !isCollapsed && (label || children) && /* @__PURE__ */ jsxRuntime.jsx(
             framerMotion.motion.span,
             {
               className: "flex-1 truncate",
@@ -15424,32 +16297,15 @@ var SidebarItem = React.forwardRef(
               children: label ?? children
             }
           ) }),
-          badge && !collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: badge })
+          badge && !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: badge })
         ]
       }
     );
   }
 );
 SidebarItem.displayName = "SidebarItem";
-function SidebarMobileOverlay({ className }) {
-  const { mobileOpen, setMobileOpen } = useSidebarContext();
-  const shouldReduce = framerMotion.useReducedMotion();
-  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: mobileOpen && /* @__PURE__ */ jsxRuntime.jsx(
-    framerMotion.motion.div,
-    {
-      className: chunk4ON3M3OM_cjs.cn(
-        "fixed inset-0 z-overlay bg-black/50 backdrop-blur-sm md:hidden",
-        className
-      ),
-      variants: shouldReduce ? void 0 : chunkF4JJFWWU_cjs.overlayBackdrop.variants,
-      initial: shouldReduce ? { opacity: 0 } : "initial",
-      animate: shouldReduce ? { opacity: 1 } : "animate",
-      exit: shouldReduce ? { opacity: 0 } : "exit",
-      transition: shouldReduce ? { duration: 0.15 } : chunkF4JJFWWU_cjs.overlayBackdrop.transition,
-      onClick: () => setMobileOpen(false),
-      "data-ds-animated": ""
-    }
-  ) });
+function SidebarMobileOverlay(_props) {
+  return null;
 }
 SidebarMobileOverlay.displayName = "SidebarMobileOverlay";
 var skeletonVariants = classVarianceAuthority.cva(
@@ -16557,11 +17413,11 @@ var Switch = React.forwardRef(function Switch2({
   const [internalChecked, setInternalChecked] = React.useState(
     checked ?? defaultChecked ?? false
   );
-  React.useEffect(() => {
-    if (isControlled) {
-      setInternalChecked(checked);
-    }
-  }, [isControlled, checked]);
+  const [prevChecked, setPrevChecked] = React.useState(checked);
+  if (isControlled && checked !== prevChecked) {
+    setPrevChecked(checked);
+    setInternalChecked(checked);
+  }
   const handleCheckedChange = React.useCallback(
     (value) => {
       if (!isControlled) {
@@ -17076,20 +17932,17 @@ var Textarea = React.forwardRef(
     ...rest
   }, ref) {
     const internalRef = React.useRef(null);
-    const [charCount, setCharCount] = React.useState(() => {
-      if (value !== void 0) return String(value).length;
-      if (defaultValue !== void 0) return String(defaultValue).length;
-      return 0;
-    });
-    const adjustHeight = useAutoResize(internalRef, autoResize, maxHeight);
-    React.useEffect(() => {
-      if (value !== void 0) {
-        setCharCount(String(value).length);
+    const [uncontrolledCharCount, setUncontrolledCharCount] = React.useState(
+      () => {
+        if (defaultValue !== void 0) return String(defaultValue).length;
+        return 0;
       }
-    }, [value]);
+    );
+    const charCount = value !== void 0 ? String(value).length : uncontrolledCharCount;
+    const adjustHeight = useAutoResize(internalRef, autoResize, maxHeight);
     const handleChange = React.useCallback(
       (e) => {
-        setCharCount(e.target.value.length);
+        setUncontrolledCharCount(e.target.value.length);
         adjustHeight();
         onChange?.(e);
       },
@@ -18424,13 +19277,15 @@ var ColorPicker = React.forwardRef(
     const [hue, setHue] = React.useState(hsl.h);
     const [sat, setSat] = React.useState(hsl.s);
     const [lit, setLit] = React.useState(hsl.l);
-    React.useEffect(() => {
+    const [prevValue, setPrevValue] = React.useState(currentValue);
+    if (currentValue !== prevValue) {
+      setPrevValue(currentValue);
       const parsed = hexToHsl(currentValue);
       setHue(parsed.h);
       setSat(parsed.s);
       setLit(parsed.l);
       setHexInput(currentValue);
-    }, [currentValue]);
+    }
     const updateColor = React.useCallback(
       (hex) => {
         if (!value) setInternalValue(hex);
@@ -18727,7 +19582,7 @@ var SonnerToaster = React.forwardRef(
   }
 );
 SonnerToaster.displayName = "SonnerToaster";
-function ChevronRightIcon8({ className }) {
+function ChevronRightIcon7({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -18955,7 +19810,7 @@ function TreeItem({ node, depth }) {
             tabIndex: node.disabled ? -1 : 0,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex size-4 items-center justify-center shrink-0", children: hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
-                ChevronRightIcon8,
+                ChevronRightIcon7,
                 {
                   className: chunk4ON3M3OM_cjs.cn(
                     "size-3.5 text-muted-foreground transition-transform duration-fast",
@@ -19277,7 +20132,7 @@ function XIcon6({ className }) {
     }
   );
 }
-function ChevronLeftIcon4({ className }) {
+function ChevronLeftIcon3({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -19294,7 +20149,7 @@ function ChevronLeftIcon4({ className }) {
     }
   );
 }
-function ChevronRightIcon9({ className }) {
+function ChevronRightIcon8({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -19445,7 +20300,7 @@ function Lightbox({
                 onClick: prev,
                 className: "absolute left-3 z-10 inline-flex size-10 items-center justify-center rounded-full bg-black/50 text-white/80 hover:bg-black/70 hover:text-white transition-colors",
                 "aria-label": "Previous image",
-                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon4, { className: "size-5" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon3, { className: "size-5" })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -19473,7 +20328,7 @@ function Lightbox({
                 onClick: next,
                 className: "absolute right-3 z-10 inline-flex size-10 items-center justify-center rounded-full bg-black/50 text-white/80 hover:bg-black/70 hover:text-white transition-colors",
                 "aria-label": "Next image",
-                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon9, { className: "size-5" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon8, { className: "size-5" })
               }
             )
           ] }),
@@ -20224,10 +21079,12 @@ var DataTableToolbar = React.forwardRef(function DataTableToolbar2({
   className
 }, ref) {
   const [localSearch, setLocalSearch] = React.useState(searchValue);
-  const debounceTimer = React.useRef(null);
-  React.useEffect(() => {
+  const [prevSearchValue, setPrevSearchValue] = React.useState(searchValue);
+  if (searchValue !== prevSearchValue) {
+    setPrevSearchValue(searchValue);
     setLocalSearch(searchValue);
-  }, [searchValue]);
+  }
+  const debounceTimer = React.useRef(null);
   const handleSearchChange = React.useCallback(
     (value) => {
       setLocalSearch(value);
@@ -20829,6 +21686,7 @@ exports.SelectScrollUpButton = SelectScrollUpButton;
 exports.SelectSeparator = SelectSeparator;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
+exports.Separator = Separator2;
 exports.Sheet = Sheet;
 exports.SheetClose = SheetClose;
 exports.SheetContent = SheetContent;
@@ -20840,12 +21698,30 @@ exports.SheetTrigger = SheetTrigger;
 exports.Sidebar = Sidebar;
 exports.SidebarContent = SidebarContent;
 exports.SidebarFooter = SidebarFooter;
+exports.SidebarGroup = SidebarGroup;
+exports.SidebarGroupAction = SidebarGroupAction;
+exports.SidebarGroupContent = SidebarGroupContent;
+exports.SidebarGroupLabel = SidebarGroupLabel;
 exports.SidebarHeader = SidebarHeader;
+exports.SidebarInput = SidebarInput;
+exports.SidebarInset = SidebarInset;
 exports.SidebarItem = SidebarItem;
+exports.SidebarMenu = SidebarMenu;
+exports.SidebarMenuAction = SidebarMenuAction;
+exports.SidebarMenuBadge = SidebarMenuBadge;
+exports.SidebarMenuButton = SidebarMenuButton;
+exports.SidebarMenuItem = SidebarMenuItem;
+exports.SidebarMenuSkeleton = SidebarMenuSkeleton;
+exports.SidebarMenuSub = SidebarMenuSub;
+exports.SidebarMenuSubButton = SidebarMenuSubButton;
+exports.SidebarMenuSubItem = SidebarMenuSubItem;
 exports.SidebarMobileOverlay = SidebarMobileOverlay;
 exports.SidebarProvider = SidebarProvider;
+exports.SidebarRail = SidebarRail;
 exports.SidebarSection = SidebarSection;
+exports.SidebarSeparator = SidebarSeparator;
 exports.SidebarToggle = SidebarToggle;
+exports.SidebarTrigger = SidebarTrigger;
 exports.Skeleton = Skeleton;
 exports.SkeletonCircle = SkeletonCircle;
 exports.SkeletonRect = SkeletonRect;
@@ -20921,6 +21797,7 @@ exports.scrollbarThumbVariants = scrollbarThumbVariants;
 exports.scrollbarVariants = scrollbarVariants;
 exports.searchInputVariants = searchInputVariants;
 exports.selectTriggerVariants = selectTriggerVariants;
+exports.separatorVariants = separatorVariants;
 exports.sheetContentVariants = sheetContentVariants;
 exports.skeletonVariants = skeletonVariants;
 exports.sliderRangeVariants = sliderRangeVariants;
@@ -20943,6 +21820,7 @@ exports.useCarouselContext = useCarouselContext;
 exports.useCheckboxGroupContext = useCheckboxGroupContext;
 exports.useCollapsibleContext = useCollapsibleContext;
 exports.useDataTable = useDataTable;
+exports.useSidebar = useSidebar;
 exports.useSidebarContext = useSidebarContext;
 exports.useToast = useToast;
 exports.useToggleGroupContext = useToggleGroupContext;