ics-ui-kit 0.1.19 → 1.0.0-alpha.1

package/dist/components/sidebar.js

@@ -1,11 +1,11 @@
 import { jsx as r, jsxs as f, Fragment as B } from "react/jsx-runtime";
 import { e as E } from "../useBreakpoints-DHvp74UL.js";
-import o from "react";
-import { T as A, b as D, c as G } from "../Tooltip-7Duaau0S.js";
+import s from "react";
+import { T as A, b as D, c as G } from "../Tooltip-D2XvRS0c.js";
 import { c as w } from "../cn-dsXlqdJg.js";
-import { S as L, a as H, b as O, d as P, e as K } from "../Sheet-qTIXsqm0.js";
-import { I as R } from "../IconButton-uGJ3cQtk.js";
-import { T as j } from "../TextInput-5BuZtWV6.js";
+import { S as L, a as H, b as O, d as P, e as K } from "../Sheet-C2UoHLL0.js";
+import { I as R } from "../IconButton-DAg1oMwz.js";
+import { T as j } from "../TextInput-CoL8nOyt.js";
 import { D as F } from "../Divider-DPW5ZhZ8.js";
 import { S as y } from "../index-BtQfgaSF.js";
 import { T as n } from "../index-BVqs-uqP.js";
@@ -22,9 +22,9 @@ import { c as W } from "../createLucideIcon-DwBrHnj9.js";
 const V = W("PanelLeft", [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }]
-]), C = o.createContext(null);
+]), C = s.createContext(null);
 function N() {
-  const a = o.useContext(C);
+  const a = s.useContext(C);
   if (!a)
     throw new Error("useSidebar must be used within a SidebarProvider.");
   return a;
@@ -36,21 +36,21 @@ const U = "sidebar_state", X = 60 * 60 * 24 * 7, Y = "16rem", J = "18rem", Q = "
       true: "bg-primary-bg"
     }
   }
-}), ae = o.forwardRef(({ defaultOpen: a = !0, open: e, onOpenChange: t, className: s, style: i, children: d, ...p }, m) => {
-  const u = E(), [g, l] = o.useState(!1), [h, k] = o.useState(!1), [_, z] = o.useState(a), v = e ?? _, S = o.useCallback(
+}), ae = s.forwardRef(({ defaultOpen: a = !0, open: e, onOpenChange: t, className: i, style: o, children: d, ...p }, m) => {
+  const u = E(), [g, l] = s.useState(!1), [h, k] = s.useState(!1), [_, z] = s.useState(a), v = e ?? _, S = s.useCallback(
     (c) => {
       const b = typeof c == "function" ? c(v) : c;
       t ? t(b) : z(b), document.cookie = `${U}=${b}; path=/; max-age=${X}`;
     },
     [t, v]
-  ), x = o.useCallback(() => u ? l((c) => !c) : S((c) => !c), [u, S, l]);
-  o.useEffect(() => {
+  ), x = s.useCallback(() => u ? l((c) => !c) : S((c) => !c), [u, S, l]);
+  s.useEffect(() => {
     const c = (b) => {
       b.key === Z && (b.metaKey || b.ctrlKey) && (b.preventDefault(), x());
     };
     return window.addEventListener("keydown", c), () => window.removeEventListener("keydown", c);
   }, [x]);
-  const M = v ? "expanded" : "collapsed", T = o.useMemo(
+  const M = v ? "expanded" : "collapsed", T = s.useMemo(
     () => ({
       state: M,
       open: v,
@@ -70,9 +70,9 @@ const U = "sidebar_state", X = 60 * 60 * 24 * 7, Y = "16rem", J = "18rem", Q = "
       style: {
         "--sidebar-width": Y,
         "--sidebar-width-icon": Q,
-        ...i
+        ...o
       },
-      className: ee({ hasInset: h, className: s }),
+      className: ee({ hasInset: h, className: i }),
       ref: m,
       ...p,
       children: d
@@ -80,21 +80,21 @@ const U = "sidebar_state", X = 60 * 60 * 24 * 7, Y = "16rem", J = "18rem", Q = "
   ) });
 });
 ae.displayName = "SidebarProvider";
-const te = o.forwardRef(({ side: a = "left", variant: e = "sidebar", collapsible: t = "offcanvas", className: s, children: i, ...d }, p) => {
+const te = s.forwardRef(({ side: a = "left", variant: e = "sidebar", collapsible: t = "offcanvas", className: i, children: o, ...d }, p) => {
   const { state: m, openMobile: u, setOpenMobile: g, setHasInset: l } = N();
-  return o.useLayoutEffect(() => {
+  return s.useLayoutEffect(() => {
     if (e === "inset")
       return l(!0), () => l(!1);
   }, [e, l]), t === "none" ? /* @__PURE__ */ r(
     "div",
     {
       className: w(
-        "text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col bg-sidebar-bg",
-        s
+        "text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col bg-sidebar-bg",
+        i
       ),
       ref: p,
       ...d,
-      children: i
+      children: o
     }
   ) : /* @__PURE__ */ f(B, { children: [
     /* @__PURE__ */ r("div", { className: "contents lg:hidden", children: /* @__PURE__ */ r(L, { open: u, onOpenChange: g, ...d, children: /* @__PURE__ */ f(
@@ -102,7 +102,7 @@ const te = o.forwardRef(({ side: a = "left", variant: e = "sidebar", collapsible
       {
         "data-sidebar": "sidebar",
         "data-mobile": "true",
-        className: "w-[--sidebar-width] bg-sidebar-bg p-0 text-secondary-fg [&>button]:hidden",
+        className: "w-(--sidebar-width) bg-sidebar-bg p-0 text-secondary-fg [&>button]:hidden",
         style: {
           "--sidebar-width": J
         },
@@ -112,7 +112,7 @@ const te = o.forwardRef(({ side: a = "left", variant: e = "sidebar", collapsible
             /* @__PURE__ */ r(P, { children: "Sidebar" }),
             /* @__PURE__ */ r(K, { children: "Displays the mobile sidebar." })
           ] }),
-          /* @__PURE__ */ r("div", { className: "flex h-full w-full flex-col", children: i })
+          /* @__PURE__ */ r("div", { className: "flex h-full w-full flex-col", children: o })
         ]
       }
     ) }) }),
@@ -130,10 +130,10 @@ const te = o.forwardRef(({ side: a = "left", variant: e = "sidebar", collapsible
             "div",
             {
               className: w(
-                "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+                "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
                 "group-data-[collapsible=offcanvas]:w-0",
                 "group-data-[side=right]:rotate-180",
-                e === "floating" || e === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+                e === "floating" || e === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_--spacing(4))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
               )
             }
           ),
@@ -141,19 +141,19 @@ const te = o.forwardRef(({ side: a = "left", variant: e = "sidebar", collapsible
             "div",
             {
               className: w(
-                "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear lg:flex",
+                "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex",
                 a === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
                 // Adjust the padding for floating and inset variants.
-                e === "floating" || e === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l group-data-[side=left]:border-secondary-border group-data-[side=right]:border-secondary-border",
-                s
+                e === "floating" || e === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_--spacing(4)_+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l group-data-[side=left]:border-secondary-border group-data-[side=right]:border-secondary-border",
+                i
               ),
               ...d,
               children: /* @__PURE__ */ r(
                 "div",
                 {
                   "data-sidebar": "sidebar",
-                  className: "flex h-full w-full flex-col bg-sidebar-bg group-data-[variant=floating]:rounded-xl group-data-[variant=floating]:border-0.5 group-data-[variant=floating]:border-primary-border group-data-[variant=floating]:shadow-soft-xl",
-                  children: i
+                  className: "flex h-full w-full flex-col bg-sidebar-bg group-data-[variant=floating]:rounded-xl group-data-[variant=floating]:border-[0.5px] group-data-[variant=floating]:border-primary-border group-data-[variant=floating]:shadow-soft-xl",
+                  children: o
                 }
               )
             }
@@ -164,9 +164,9 @@ const te = o.forwardRef(({ side: a = "left", variant: e = "sidebar", collapsible
   ] });
 });
 te.displayName = "Sidebar";
-const re = o.forwardRef(
+const re = s.forwardRef(
   ({ onClick: a, ...e }, t) => {
-    const { toggleSidebar: s } = N();
+    const { toggleSidebar: i } = N();
     return /* @__PURE__ */ r(
       R,
       {
@@ -174,8 +174,8 @@ const re = o.forwardRef(
         ref: t,
         "data-sidebar": "trigger",
         variant: "ghost",
-        onClick: (i) => {
-          a?.(i), s();
+        onClick: (o) => {
+          a?.(o), i();
         },
         ...e,
         children: /* @__PURE__ */ r("span", { className: "sr-only", children: "Toggle Sidebar" })
@@ -184,7 +184,7 @@ const re = o.forwardRef(
   }
 );
 re.displayName = "SidebarTrigger";
-const oe = n({
+const se = n({
   base: [
     "absolute inset-y-0 z-20 hidden w-[5px] -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0 hover:after:-translate-x-1/2 hover:after:border-l hover:after:border-primary-border group-data-[side=left]:-right-[5px] group-data-[side=right]:left-0 sm:flex",
     "cursor-ew-resize",
@@ -192,9 +192,9 @@ const oe = n({
     "[[data-side=left][data-collapsible=offcanvas]_&]:-right-[2.5px]",
     "[[data-side=right][data-collapsible=offcanvas]_&]:-left-[2.5px]"
   ]
-}), se = o.forwardRef(
+}), ie = s.forwardRef(
   ({ className: a, ...e }, t) => {
-    const { toggleSidebar: s } = N();
+    const { toggleSidebar: i } = N();
     return /* @__PURE__ */ r(
       "button",
       {
@@ -202,39 +202,39 @@ const oe = n({
         "data-sidebar": "rail",
         "aria-label": "Toggle Sidebar",
         tabIndex: -1,
-        onClick: s,
+        onClick: i,
         title: "Toggle Sidebar",
-        className: oe({ className: a }),
+        className: se({ className: a }),
         ...e
       }
     );
   }
 );
-se.displayName = "SidebarRail";
-const ie = n({
+ie.displayName = "SidebarRail";
+const oe = n({
   base: [
     "relative flex w-full flex-1 flex-col bg-secondary-bg",
     "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow"
   ]
-}), ne = o.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("main", { ref: t, className: ie({ className: a }), ...e }));
+}), ne = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("main", { ref: t, className: oe({ className: a }), ...e }));
 ne.displayName = "SidebarInset";
 const de = n({
   base: "h-8 w-full shadow-none"
-}), le = o.forwardRef(
+}), le = s.forwardRef(
   ({ className: a, ...e }, t) => /* @__PURE__ */ r(j, { ref: t, "data-sidebar": "input", className: de({ className: a }), ...e })
 );
 le.displayName = "SidebarInput";
 const ce = n({
   base: "flex flex-col gap-2 p-2 group-data-[variant=floating]:px-2.5 overflow-y-hidden [scrollbar-gutter:stable]"
-}), ue = o.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "header", className: ce({ className: a }), ...e }));
+}), ue = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "header", className: ce({ className: a }), ...e }));
 ue.displayName = "SidebarHeader";
 const be = n({
   base: "flex flex-col gap-2 p-2 group-data-[variant=floating]:px-2.5 overflow-y-hidden [scrollbar-gutter:stable]"
-}), pe = o.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "footer", className: be({ className: a }), ...e }));
+}), pe = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "footer", className: be({ className: a }), ...e }));
 pe.displayName = "SidebarFooter";
 const fe = n({
   base: "w-auto bg-secondary-border"
-}), me = o.forwardRef(
+}), me = s.forwardRef(
   ({ className: a, ...e }, t) => /* @__PURE__ */ r(
     F,
     {
@@ -251,15 +251,15 @@ const ge = n({
   slots: {
     content: "flex flex-1 flex-col gap-2 [scrollbar-gutter:stable] group-data-[collapsible=icon]:overflow-hidden"
   }
-}), he = o.forwardRef(
-  ({ className: a, children: e, ...t }, s) => {
-    const i = ge();
+}), he = s.forwardRef(
+  ({ className: a, children: e, ...t }, i) => {
+    const o = ge();
     return /* @__PURE__ */ r(
       $,
       {
-        ref: s,
+        ref: i,
         "data-sidebar": "content",
-        className: i.content({ className: a }),
+        className: o.content({ className: a }),
         shadowSize: 32,
         ...t,
         children: e
@@ -270,29 +270,29 @@ const ge = n({
 he.displayName = "SidebarContent";
 const ve = n({
   base: "relative flex w-full min-w-0 flex-col p-2 group-data-[variant=floating]:px-2.5"
-}), ye = o.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group", className: ve({ className: a }), ...e }));
+}), ye = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group", className: ve({ className: a }), ...e }));
 ye.displayName = "SidebarGroup";
 const Se = n({
   base: [
-    "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-secondary-fg/70 outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+    "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-secondary-fg/70 outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
     "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0"
   ]
-}), xe = o.forwardRef(
-  ({ className: a, asChild: e = !1, ...t }, s) => /* @__PURE__ */ r(e ? y : "div", { ref: s, "data-sidebar": "group-label", className: Se({ className: a }), ...t })
+}), xe = s.forwardRef(
+  ({ className: a, asChild: e = !1, ...t }, i) => /* @__PURE__ */ r(e ? y : "div", { ref: i, "data-sidebar": "group-label", className: Se({ className: a }), ...t })
 );
 xe.displayName = "SidebarGroupLabel";
 const we = n({
   base: [
-    "focus-visible:ring-primary2 absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-muted outline-none transition-transform hover:text-primary-fg focus-visible:shadow-focus [&>svg]:size-4 [&>svg]:shrink-0",
+    "focus-visible:ring-primary2 absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-muted outline-hidden transition-transform hover:text-primary-fg focus-visible:shadow-focus [&>svg]:size-4 [&>svg]:shrink-0",
     // Increases the hit area of the button on mobile.
     "after:absolute after:-inset-2 after:md:hidden",
     "group-data-[collapsible=icon]:hidden"
   ]
-}), Ne = o.forwardRef(
-  ({ className: a, asChild: e = !1, ...t }, s) => /* @__PURE__ */ r(
+}), Ne = s.forwardRef(
+  ({ className: a, asChild: e = !1, ...t }, i) => /* @__PURE__ */ r(
     e ? y : "button",
     {
-      ref: s,
+      ref: i,
       "data-sidebar": "group-action",
       className: we({ className: a }),
       ...t
@@ -302,21 +302,21 @@ const we = n({
 Ne.displayName = "SidebarGroupAction";
 const Me = n({
   base: "w-full text-sm"
-}), Ie = o.forwardRef(
+}), Ie = s.forwardRef(
   ({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group-content", className: Me({ className: a }), ...e })
 );
 Ie.displayName = "SidebarGroupContent";
 const Re = n({
   base: "flex w-full min-w-0 flex-col gap-1"
-}), Ce = o.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu", className: Re({ className: a }), ...e }));
+}), Ce = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu", className: Re({ className: a }), ...e }));
 Ce.displayName = "SidebarMenu";
 const ke = n({
   base: "group/menu-item relative"
-}), _e = o.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("li", { ref: t, "data-sidebar": "menu-item", className: ke({ className: a }), ...e }));
+}), _e = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("li", { ref: t, "data-sidebar": "menu-item", className: ke({ className: a }), ...e }));
 _e.displayName = "SidebarMenuItem";
 const ze = n({
   base: [
-    "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md bg-primary-bg p-2 text-left text-sm text-secondary-fg outline-none transition-[width,height,padding]",
+    "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md bg-primary-bg p-2 text-left text-sm text-secondary-fg outline-hidden transition-[width,height,padding]",
     "hover:bg-primary-bg-hover hover:text-primary-fg focus-visible:shadow-focus",
     "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
     "data-[active=true]:bg-primary-bg-hover data-[active=true]:font-medium data-[active=true]:text-primary-accent",
@@ -343,29 +343,29 @@ const ze = n({
     variant: "default",
     size: "default"
   }
-}), Te = o.forwardRef(({ asChild: a = !1, isActive: e = !1, variant: t = "default", size: s = "default", tooltip: i, className: d, ...p }, m) => {
+}), Te = s.forwardRef(({ asChild: a = !1, isActive: e = !1, variant: t = "default", size: i = "default", tooltip: o, className: d, ...p }, m) => {
   const u = a ? y : "button", { isMobile: g, state: l } = N(), h = /* @__PURE__ */ r(
     u,
     {
       ref: m,
       "data-sidebar": "menu-button",
-      "data-size": s,
+      "data-size": i,
       "data-active": e,
-      className: w(ze({ variant: t, size: s }), d),
+      className: w(ze({ variant: t, size: i }), d),
       ...p
     }
   );
-  return i ? (typeof i == "string" && (i = {
-    children: i
+  return o ? (typeof o == "string" && (o = {
+    children: o
   }), /* @__PURE__ */ f(A, { children: [
     /* @__PURE__ */ r(D, { asChild: !0, children: h }),
-    /* @__PURE__ */ r(G, { side: "right", align: "center", hidden: l !== "collapsed" || g, ...i })
+    /* @__PURE__ */ r(G, { side: "right", align: "center", hidden: l !== "collapsed" || g, ...o })
   ] })) : h;
 });
 Te.displayName = "SidebarMenuButton";
 const Be = n({
   base: [
-    "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-muted outline-none transition-transform hover:text-primary-fg focus-visible:ring-1 focus-visible:ring-primary peer-hover/menu-button:text-primary-fg [&>svg]:size-4 [&>svg]:shrink-0",
+    "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-muted outline-hidden transition-transform hover:text-primary-fg focus-visible:ring-1 focus-visible:ring-primary peer-hover/menu-button:text-primary-fg [&>svg]:size-4 [&>svg]:shrink-0",
     // Increases the hit area of the button on mobile.
     "after:absolute after:-inset-2 after:md:hidden",
     "peer-data-[size=sm]/menu-button:top-1",
@@ -378,13 +378,13 @@ const Be = n({
       true: "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-primary-accent md:opacity-0"
     }
   }
-}), Ee = o.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, ...s }, i) => /* @__PURE__ */ r(
+}), Ee = s.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, ...i }, o) => /* @__PURE__ */ r(
   e ? y : "button",
   {
-    ref: i,
+    ref: o,
     "data-sidebar": "menu-action",
     className: Be({ isHover: t, className: a }),
-    ...s
+    ...i
   }
 ));
 Ee.displayName = "SidebarMenuAction";
@@ -397,19 +397,19 @@ const Ae = n({
     "peer-data-[size=lg]/menu-button:top-2.5",
     "group-data-[collapsible=icon]:hidden"
   ]
-}), De = o.forwardRef(
+}), De = s.forwardRef(
   ({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "menu-badge", className: Ae({ className: a }), ...e })
 );
 De.displayName = "SidebarMenuBadge";
 const Ge = n({
   slots: {
     wrapper: "flex h-8 items-center gap-2 rounded-md px-2",
-    skeleton: "h-4 max-w-[--skeleton-width] flex-1",
+    skeleton: "h-4 max-w-(--skeleton-width) flex-1",
     skeletonIcon: "size-4 rounded-md"
   }
-}), Le = o.forwardRef(({ className: a, showIcon: e = !1, ...t }, s) => {
-  const i = o.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []), d = Ge();
-  return /* @__PURE__ */ f("div", { ref: s, "data-sidebar": "menu-skeleton", className: d.wrapper({ className: a }), ...t, children: [
+}), Le = s.forwardRef(({ className: a, showIcon: e = !1, ...t }, i) => {
+  const o = s.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []), d = Ge();
+  return /* @__PURE__ */ f("div", { ref: i, "data-sidebar": "menu-skeleton", className: d.wrapper({ className: a }), ...t, children: [
     e && /* @__PURE__ */ r(I, { className: d.skeletonIcon(), "data-sidebar": "menu-skeleton-icon" }),
     /* @__PURE__ */ r(
       I,
@@ -417,7 +417,7 @@ const Ge = n({
         className: d.skeleton(),
         "data-sidebar": "menu-skeleton-text",
         style: {
-          "--skeleton-width": i
+          "--skeleton-width": o
         }
       }
     )
@@ -429,19 +429,19 @@ const He = n({
     "ml-3.5 flex min-w-0 flex-col gap-1 border-l border-secondary-border py-0.5 pl-2.5",
     "group-data-[collapsible=icon]:hidden"
   ]
-}), Oe = o.forwardRef(
+}), Oe = s.forwardRef(
   ({ className: a, ...e }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu-sub", className: He({ className: a }), ...e })
 );
 Oe.displayName = "SidebarMenuSub";
 const Pe = n({
-  base: "rounded-md focus-visible:shadow-focus focus-visible:outline-none"
-}), Ke = o.forwardRef(
+  base: "rounded-md focus-visible:shadow-focus focus-visible:outline-hidden"
+}), Ke = s.forwardRef(
   ({ className: a, ...e }, t) => /* @__PURE__ */ r("li", { ref: t, className: Pe({ className: a }), ...e })
 );
 Ke.displayName = "SidebarMenuSubItem";
 const je = n({
   base: [
-    "flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-secondary-fg outline-none hover:bg-secondary-bg-hover hover:text-primary-fg focus-visible:mr-0.5 focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-primary-fg",
+    "flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-secondary-fg outline-hidden hover:bg-secondary-bg-hover hover:text-primary-fg focus-visible:mr-0.5 focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-primary-fg",
     "data-[active=true]:bg-primary-bg-hover data-[active=true]:text-primary-accent",
     "group-data-[collapsible=icon]:hidden"
   ],
@@ -451,15 +451,15 @@ const je = n({
       md: "text-sm"
     }
   }
-}), Fe = o.forwardRef(({ asChild: a = !1, size: e = "md", isActive: t, className: s, ...i }, d) => /* @__PURE__ */ r(
+}), Fe = s.forwardRef(({ asChild: a = !1, size: e = "md", isActive: t, className: i, ...o }, d) => /* @__PURE__ */ r(
   a ? y : "a",
   {
     ref: d,
     "data-sidebar": "menu-sub-button",
     "data-size": e,
     "data-active": t,
-    className: je({ size: e, className: s }),
-    ...i
+    className: je({ size: e, className: i }),
+    ...o
   }
 ));
 Fe.displayName = "SidebarMenuSubButton";
@@ -469,12 +469,12 @@ const $e = n({
     icon: "peer/icon h-4 w-4 p-0.5 text-muted opacity-0 group-hover/insertion:opacity-100",
     line: "h-px w-full bg-transparent group-hover/insertion:bg-muted peer-hover/icon:bg-primary-fg"
   }
-}), qe = o.forwardRef(
+}), qe = s.forwardRef(
   ({ className: a, ...e }, t) => {
-    const s = $e();
-    return /* @__PURE__ */ f("div", { "data-sidebar": "sidebar-insertion-line", className: s.wrapper({ className: a }), ref: t, ...e, children: [
-      /* @__PURE__ */ r(R, { icon: q, size: "xs", className: s.icon(), variant: "link" }),
-      /* @__PURE__ */ r("div", { className: s.line() })
+    const i = $e();
+    return /* @__PURE__ */ f("div", { "data-sidebar": "sidebar-insertion-line", className: i.wrapper({ className: a }), ref: t, ...e, children: [
+      /* @__PURE__ */ r(R, { icon: q, size: "xs", className: i.icon(), variant: "link" }),
+      /* @__PURE__ */ r("div", { className: i.line() })
     ] });
   }
 );
@@ -501,7 +501,7 @@ export {
   Fe as SidebarMenuSubButton,
   Ke as SidebarMenuSubItem,
   ae as SidebarProvider,
-  se as SidebarRail,
+  ie as SidebarRail,
   me as SidebarSeparator,
   re as SidebarTrigger,
   N as useSidebar