@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

package/dist/es/components/fundamental/sidebar.js

@@ -0,0 +1,709 @@
+import { jsx as d, jsxs as C } from "react/jsx-runtime";
+import * as t from "react";
+import { cva as P } from "class-variance-authority";
+import * as I from "@radix-ui/react-dialog";
+import * as _ from "@radix-ui/react-tooltip";
+import { cn as s } from "../../lib/utils.js";
+import { Button as O } from "./button.js";
+import { Separator as F } from "./separator.js";
+import { Icon as W } from "./icon.js";
+const $ = "sidebar:state", V = 3600 * 24 * 7, q = "16rem", U = "18rem", X = "3rem", Y = "b", G = t.createContext(null);
+function E() {
+  const r = t.useContext(G);
+  if (!r)
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  return r;
+}
+const A = /* @__PURE__ */ t.forwardRef(
+  ({ defaultOpen: r = !0, open: e, onOpenChange: a, className: o, style: i, children: l, ...u }, f) => {
+    const [p, m] = t.useState(r), [v, h] = t.useState(!1), [y, R] = t.useState(!1), g = e ?? p, w = t.useCallback(
+      (n) => {
+        const c = typeof n == "function" ? n(g) : n;
+        a ? a(c) : m(c), typeof document < "u" && (document.cookie = `${$}=${c}; path=/; max-age=${V}`);
+      },
+      [a, g]
+    ), b = t.useCallback(() => y ? h((n) => !n) : w((n) => !n), [y, w, h]);
+    t.useEffect(() => {
+      const n = (c) => {
+        c.key === Y && (c.metaKey || c.ctrlKey) && (c.preventDefault(), b());
+      };
+      return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+    }, [b]), t.useEffect(() => {
+      const n = () => {
+        R(window.innerWidth < 768);
+      };
+      return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+    }, []);
+    const N = g ? "expanded" : "collapsed", S = t.useMemo(
+      () => ({
+        state: N,
+        open: g,
+        setOpen: w,
+        isMobile: y,
+        openMobile: v,
+        setOpenMobile: h,
+        toggleSidebar: b
+      }),
+      [N, g, w, y, v, h, b]
+    );
+    return /* @__PURE__ */ d(G.Provider, { value: S, children: /* @__PURE__ */ d(_.Provider, { delayDuration: 0, children: /* @__PURE__ */ d(
+      "div",
+      {
+        ref: f,
+        style: {
+          "--sidebar-width": q,
+          "--sidebar-width-icon": X,
+          ...i
+        },
+        className: s(
+          "group/sidebar-wrapper flex h-svh w-full min-w-0 has-[[data-variant=inset]]:bg-[var(--color-surface-secondary)]",
+          o
+        ),
+        ...u,
+        children: l
+      }
+    ) }) });
+  }
+);
+A.displayName = "SidebarProvider";
+const J = /* @__PURE__ */ t.forwardRef(
+  ({
+    variant: r = "sidebar",
+    collapsible: e = "offcanvas",
+    side: a = "left",
+    className: o,
+    children: i,
+    ...l
+  }, u) => {
+    const { isMobile: f, state: p, openMobile: m, setOpenMobile: v } = E();
+    return e === "none" ? /* @__PURE__ */ d(
+      "div",
+      {
+        className: s(
+          "flex h-full w-[var(--sidebar-width)] flex-col bg-[var(--color-surface-primary)] text-[var(--color-text-primary)]",
+          o
+        ),
+        ref: u,
+        ...l,
+        children: i
+      }
+    ) : f ? /* @__PURE__ */ d(I.Root, { open: m, onOpenChange: v, modal: !1, children: /* @__PURE__ */ C(I.Portal, { children: [
+      /* @__PURE__ */ d(I.Overlay, { className: "fixed inset-0 z-40 bg-black/80" }),
+      /* @__PURE__ */ d(
+        I.Content,
+        {
+          ref: u,
+          "data-sidebar": "sidebar",
+          "data-mobile": "true",
+          className: "fixed inset-y-0 z-50 h-auto w-[var(--sidebar-width-mobile)] bg-[var(--color-surface-primary)] p-0 text-[var(--color-text-primary)] shadow-md transition ease-in-out data-[state=open]:duration-300 data-[state=closed]:duration-200 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+          style: {
+            "--sidebar-width": U
+          },
+          ...l,
+          children: /* @__PURE__ */ d("div", { className: "flex h-full w-full flex-col", children: i })
+        }
+      )
+    ] }) }) : /* @__PURE__ */ d(
+      "div",
+      {
+        ref: u,
+        className: "group peer hidden md:block text-[var(--color-text-primary)]",
+        "data-state": p,
+        "data-collapsible": p === "collapsed" ? e : "",
+        "data-variant": r,
+        "data-side": a,
+        children: /* @__PURE__ */ d(
+          "div",
+          {
+            className: s(
+              "duration-200 relative h-svh w-[var(--sidebar-width)] bg-[var(--color-surface-primary)] border-r border-[var(--color-border-primary-subtle)] transition-[width] ease-linear",
+              "group-data-[collapsible=offcanvas]:w-0",
+              "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]",
+              r === "floating" && "m-[var(--space-s)] rounded-m border border-[var(--color-border-primary-subtle)] shadow-md",
+              r === "inset" && "m-[var(--space-s)] ml-0 rounded-r-m border-r border-[var(--color-border-primary-subtle)]",
+              o
+            ),
+            ...l,
+            children: /* @__PURE__ */ d(
+              "div",
+              {
+                "data-sidebar": "sidebar",
+                className: "flex h-full w-full flex-col",
+                children: i
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+J.displayName = "Sidebar";
+const Q = /* @__PURE__ */ t.forwardRef(({ className: r, onClick: e, ...a }, o) => {
+  const { toggleSidebar: i } = E();
+  return /* @__PURE__ */ C(
+    O,
+    {
+      ref: o,
+      "data-sidebar": "trigger",
+      variant: "ghost",
+      size: "s",
+      className: s("h-7 w-7 p-0", r),
+      onClick: (l) => {
+        e?.(l), i();
+      },
+      ...a,
+      children: [
+        /* @__PURE__ */ d(W, { name: "panel-left", size: "s" }),
+        /* @__PURE__ */ d("span", { className: "sr-only", children: "Toggle sidebar" })
+      ]
+    }
+  );
+});
+Q.displayName = "SidebarTrigger";
+const Z = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => {
+  const { toggleSidebar: o } = E();
+  return /* @__PURE__ */ d(
+    "button",
+    {
+      ref: a,
+      "data-sidebar": "rail",
+      "aria-label": "Toggle sidebar",
+      tabIndex: -1,
+      onClick: o,
+      title: "Toggle sidebar",
+      className: s(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-[var(--color-border-primary)] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-[var(--color-surface-secondary)]",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        r
+      ),
+      ...e
+    }
+  );
+});
+Z.displayName = "SidebarRail";
+const H = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ d(
+  "main",
+  {
+    ref: a,
+    className: s(
+      "relative flex flex-1 flex-col min-w-0 bg-[var(--color-surface-base)]",
+      "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] 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-sm",
+      r
+    ),
+    ...e
+  }
+));
+H.displayName = "SidebarInset";
+const ee = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ d(
+  "input",
+  {
+    ref: a,
+    "data-sidebar": "input",
+    className: s(
+      "flex h-8 w-full rounded-l border border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)] px-[var(--space-m)] py-[var(--space-s)] text-sm text-[var(--color-text-primary)] ring-offset-[var(--color-surface-primary)] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--color-text-tertiary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focused)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      r
+    ),
+    ...e
+  }
+));
+ee.displayName = "SidebarInput";
+const re = /* @__PURE__ */ t.forwardRef(({ className: r, children: e, onOpenChange: a, shortcuts: o = ["⌘", "K"], ...i }, l) => /* @__PURE__ */ C(
+  "button",
+  {
+    ref: l,
+    "data-sidebar": "search-button",
+    className: s(
+      "text-body-md flex h-8 w-full cursor-pointer items-center rounded-m border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] px-3 py-1 pr-20 pl-8 text-left text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--color-border-primary-medium)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] focus:border-[var(--color-border-brand-bold)] focus:ring-2 focus:ring-[var(--color-border-brand-bold)] focus:ring-offset-2 focus:outline-none active:border-[var(--color-border-primary-medium)] group-data-[collapsible=icon]:hidden",
+      r
+    ),
+    onClick: () => a?.(!0),
+    ...i,
+    children: [
+      e || "Search",
+      /* @__PURE__ */ d("div", { className: "absolute top-1/2 right-2 flex -translate-y-1/2 gap-1", children: o.map((u, f) => /* @__PURE__ */ d("kbd", { className: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-secondary)] px-1.5 font-mono text-[10px] font-medium text-[var(--color-text-tertiary)] opacity-100", children: u }, f)) })
+    ]
+  }
+));
+re.displayName = "SidebarSearchButton";
+const ae = /* @__PURE__ */ t.forwardRef(({ className: r, onOpenChange: e, shortcuts: a = ["⌘", "K"], ...o }, i) => /* @__PURE__ */ d(
+  "button",
+  {
+    ref: i,
+    "data-sidebar": "search-trigger",
+    className: s(
+      "hidden h-8 w-8 cursor-pointer items-center justify-center rounded border border-[var(--color-border-primary-subtle)] bg-transparent transition-all duration-200 group-data-[collapsible=icon]:flex hover:border-[var(--color-border-primary-medium)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] focus:border-[var(--color-border-brand-bold)] focus:ring-2 focus:ring-[var(--color-border-brand-bold)] focus:ring-offset-2 focus:outline-none active:border-[var(--color-border-primary-medium)]",
+      r
+    ),
+    onClick: () => e?.(!0),
+    "aria-label": "Search",
+    ...o
+  }
+));
+ae.displayName = "SidebarSearchTrigger";
+const te = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: a,
+    "data-sidebar": "header",
+    className: s("flex flex-col gap-[var(--space-s)] p-[var(--space-m)] group-data-[collapsible=icon]:p-[var(--space-s)]", r),
+    ...e
+  }
+));
+te.displayName = "SidebarHeader";
+const oe = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: a,
+    "data-sidebar": "footer",
+    className: s("flex flex-col gap-[var(--space-s)] p-[var(--space-m)] group-data-[collapsible=icon]:p-[var(--space-s)]", r),
+    ...e
+  }
+));
+oe.displayName = "SidebarFooter";
+const de = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ d(
+  F,
+  {
+    ref: a,
+    "data-sidebar": "separator",
+    className: s("mx-2 w-auto bg-[var(--color-border-primary-subtle)]", r),
+    ...e
+  }
+));
+de.displayName = "SidebarSeparator";
+const se = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: a,
+    "data-sidebar": "content",
+    className: s(
+      "flex min-h-0 flex-1 flex-col overflow-y-auto group-data-[collapsible=icon]:overflow-hidden",
+      r
+    ),
+    ...e
+  }
+));
+se.displayName = "SidebarContent";
+const le = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: a,
+    "data-sidebar": "group",
+    className: s("relative flex w-full min-w-0 flex-col p-[var(--space-m)] group-data-[collapsible=icon]:p-[var(--space-s)]", r),
+    ...e
+  }
+));
+le.displayName = "SidebarGroup";
+const ie = /* @__PURE__ */ t.forwardRef(({ className: r, asChild: e = !1, ...a }, o) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: o,
+    "data-sidebar": "group-label",
+    className: s(
+      "duration-200 flex h-8 shrink-0 items-center rounded-m px-2 [&]:text-body-medium-sm text-[var(--color-text-tertiary)] outline-none ring-[var(--color-border-focused)] transition-opacity ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+      r
+    ),
+    ...a
+  }
+));
+ie.displayName = "SidebarGroupLabel";
+const ne = /* @__PURE__ */ t.forwardRef(({ className: r, asChild: e = !1, ...a }, o) => /* @__PURE__ */ d(
+  "button",
+  {
+    ref: o,
+    "data-sidebar": "group-action",
+    className: s(
+      "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-m p-0 text-[var(--color-text-secondary)] outline-none ring-[var(--color-border-focused)] transition-transform hover:bg-[var(--color-background-neutral-subtlest)] focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      "after:absolute after:-inset-2 after:md:hidden",
+      "group-data-[collapsible=icon]:hidden",
+      r
+    ),
+    ...a
+  }
+));
+ne.displayName = "SidebarGroupAction";
+const ce = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: a,
+    "data-sidebar": "group-content",
+    className: s("w-full text-sm", r),
+    ...e
+  }
+));
+ce.displayName = "SidebarGroupContent";
+const ue = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ d(
+  "ul",
+  {
+    ref: a,
+    "data-sidebar": "menu",
+    className: s("flex w-full min-w-0 flex-col gap-[var(--space-s)]", r),
+    ...e
+  }
+));
+ue.displayName = "SidebarMenu";
+const be = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ d(
+  "li",
+  {
+    ref: a,
+    "data-sidebar": "menu-item",
+    className: s("group/menu-item relative", r),
+    ...e
+  }
+));
+be.displayName = "SidebarMenuItem";
+const pe = P(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-m px-2 py-1.5 text-left text-body-medium-md outline-none ring-[var(--color-border-focused)] transition-all duration-150 ease-in-out focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-[var(--color-background-blue-subtle-selected)] data-[active=true]:text-[var(--color-text-brand-bold-selected)] data-[state=open]:bg-[var(--color-surface-secondary)] group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 group-data-[collapsible=icon]:justify-center [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 data-[active=true]:[&>svg]:text-[var(--color-text-brand-bold-selected)] cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] focus-visible:bg-[var(--color-background-neutral-subtlest-hovered)] active:bg-[var(--color-background-neutral-subtlest-hovered)] data-[active=true]:hover:!bg-[var(--color-background-blue-subtle-selected-hovered)] data-[active=true]:hover:!text-[var(--color-text-brand-bold-hovered)] data-[active=true]:active:!bg-[var(--color-background-blue-subtle-selected-hovered)] data-[active=true]:active:!text-[var(--color-text-brand-bold-hovered)] data-[active=true]:hover:[&>svg]:!text-[var(--color-icon-brand-bold-hovered)] data-[active=true]:active:[&>svg]:!text-[var(--color-icon-brand-bold-hovered)] data-[state=open]:hover:bg-[var(--color-background-neutral-subtlest-hovered)]",
+        outline: "bg-[var(--color-surface-primary)] border border-[var(--color-border-primary-subtle)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] focus-visible:bg-[var(--color-background-neutral-subtlest-hovered)] active:bg-[var(--color-background-neutral-subtlest-hovered)] data-[active=true]:hover:!bg-[var(--color-background-blue-subtle-selected-hovered)] data-[active=true]:hover:!text-[var(--color-text-brand-bold-hovered)] data-[active=true]:active:!bg-[var(--color-background-blue-subtle-selected-hovered)] data-[active=true]:active:!text-[var(--color-text-brand-bold-hovered)] data-[active=true]:hover:[&>svg]:!text-[var(--color-icon-brand-bold-hovered)] data-[active=true]:active:[&>svg]:!text-[var(--color-icon-brand-bold-hovered)]"
+      },
+      size: {
+        default: "h-8",
+        s: "h-7 text-body-sm py-1",
+        l: "h-12 py-3 text-body-lg group-data-[collapsible=icon]:!size-8"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+), ve = /* @__PURE__ */ t.forwardRef(
+  ({
+    asChild: r = !1,
+    isActive: e = !1,
+    variant: a = "enhanced",
+    size: o = "default",
+    tooltip: i,
+    enhancedHover: l = !0,
+    preserveActiveOnFocus: u = !0,
+    className: f,
+    onMouseEnter: p,
+    onMouseLeave: m,
+    onFocus: v,
+    onBlur: h,
+    onMouseDown: y,
+    ...R
+  }, g) => {
+    const w = r ? "span" : "button", { isMobile: b, state: N } = E(), [S, n] = t.useState(!1), [c, z] = t.useState(!1), M = t.useRef(!1), B = t.useCallback(
+      (k) => {
+        l && n(!0), p?.(k);
+      },
+      [l, p]
+    ), D = t.useCallback(
+      (k) => {
+        l && n(!1), m?.(k);
+      },
+      [l, m]
+    ), x = t.useCallback(
+      (k) => {
+        M.current = !0, y?.(k);
+      },
+      [y]
+    ), j = t.useCallback(
+      (k) => {
+        l && !M.current && z(!0), M.current = !1, v?.(k);
+      },
+      [l, v]
+    ), K = t.useCallback(
+      (k) => {
+        l && z(!1), h?.(k);
+      },
+      [l, h]
+    ), L = t.useMemo(() => a !== "enhanced" ? pe({ variant: "default", size: o }) : s(
+      // Base button styles
+      "relative peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-m px-2 py-1.5 text-left text-body-medium-md outline-none ring-[var(--color-border-focused)] transition-all duration-150 ease-in-out focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 cursor-pointer z-2",
+      // Size variants
+      o === "s" && "h-7 text-body-sm py-1",
+      o === "default" && "h-8",
+      o === "l" && "h-12 py-3 text-body-lg group-data-[collapsible=icon]:!size-8",
+      // Enhanced hover behavior for non-active items
+      S && !c && !e && "bg-[var(--color-background-neutral-subtlest-hovered)]",
+      // Enhanced hover behavior for active items
+      S && !c && e && [
+        "bg-[var(--color-background-blue-subtle-selected-hovered)]",
+        "[&>svg]:text-[var(--color-icon-brand-bold-hovered)]"
+      ],
+      // Focus styles - clean focus for non-active items
+      c && !e && "bg-transparent ring-2 ring-[var(--color-border-brand-bold)]",
+      // Active item focus - preserve brand background when focused
+      c && e && u && [
+        "bg-[var(--color-background-blue-subtle-selected)]",
+        "text-[var(--color-text-brand-bold)]",
+        "[&]:text-body-medium-md [&]:font-normal",
+        "ring-2 ring-[var(--color-border-brand-bold)]",
+        "[&>svg]:text-[var(--color-text-brand-bold)]"
+      ],
+      // Active item styles (non-focus state)
+      e && !c && [
+        "bg-[var(--color-background-blue-subtle-selected)]",
+        "text-[var(--color-text-brand-bold)]",
+        "[&]:text-body-medium-md [&]:font-normal",
+        "[&>svg]:text-[var(--color-text-brand-bold)]",
+        "hover:bg-[var(--color-background-blue-subtle-selected-hovered)]",
+        "hover:[&>svg]:text-[var(--color-icon-brand-bold-hovered)]"
+      ],
+      // Open state (for collapsible items)
+      "data-[state=open]:bg-[var(--color-surface-secondary)]",
+      // Collapsed sidebar styles
+      "group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2"
+    ), [a, o, S, c, e, u]), T = /* @__PURE__ */ d(
+      w,
+      {
+        ref: g,
+        "data-sidebar": "menu-button",
+        "data-size": o,
+        "data-active": e,
+        className: s(L, f),
+        onMouseEnter: l ? B : p,
+        onMouseLeave: l ? D : m,
+        onMouseDown: l ? x : y,
+        onFocus: l ? j : v,
+        onBlur: l ? K : h,
+        ...R
+      }
+    );
+    return i ? (typeof i == "string" && (i = {
+      children: i
+    }), /* @__PURE__ */ C(_.Root, { children: [
+      /* @__PURE__ */ d(_.Trigger, { asChild: !0, children: T }),
+      /* @__PURE__ */ d(
+        _.Content,
+        {
+          side: "right",
+          align: "center",
+          hidden: N !== "collapsed" || b,
+          className: "z-50 overflow-hidden rounded-m bg-[var(--color-surface-primary)] px-3 py-1.5 text-xs text-[var(--color-text-primary)] border border-[var(--color-border-primary-subtle)] shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          ...i
+        }
+      )
+    ] })) : T;
+  }
+);
+ve.displayName = "SidebarMenuButton";
+const fe = /* @__PURE__ */ t.forwardRef(({ className: r, showOnHover: e = !1, size: a = "m", ...o }, i) => /* @__PURE__ */ d(
+  O,
+  {
+    ref: i,
+    "data-sidebar": "menu-action",
+    variant: "ghost",
+    size: "s",
+    className: s(
+      // Base positioning and styling - Fixed inconsistencies
+      "absolute right-1 flex aspect-square items-center justify-center rounded-m p-0",
+      "text-[var(--color-text-secondary)] outline-none transition-all duration-150 ease-in-out",
+      "hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)]",
+      "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focused)]",
+      "peer-hover/menu-button:text-[var(--color-text-primary)]",
+      "enabled:active:bg-[var(--grey-alpha-100)] enabled:active:translate-y-px",
+      "[&>svg]:size-4 [&>svg]:shrink-0",
+      // Consistent sizing - Fixed w-5 -> w-6 issue
+      "w-6 h-6",
+      // Improved positioning - Fixed top-1.5 -> top-1 issue
+      "top-1",
+      // Size-responsive positioning for different menu button sizes
+      "peer-data-[size=s]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1",
+      "peer-data-[size=l]/menu-button:top-2.5",
+      // Enhanced showOnHover behavior with improved transitions
+      e && [
+        "opacity-0 transition-opacity duration-150",
+        "group-hover/menu-item:opacity-100",
+        "group-focus-within/menu-item:opacity-100",
+        "data-[state=open]:opacity-100",
+        "peer-data-[active=true]/menu-button:opacity-100",
+        "peer-data-[active=true]/menu-button:text-[var(--color-text-primary)]"
+      ],
+      // Hide in collapsed sidebar
+      "group-data-[collapsible=icon]:hidden",
+      r
+    ),
+    ...o
+  }
+));
+fe.displayName = "SidebarMenuAction";
+const me = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: a,
+    "data-sidebar": "menu-badge",
+    className: s(
+      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-m px-1 text-xs font-medium tabular-nums text-[var(--color-text-on-action)] select-none pointer-events-none",
+      "peer-hover/menu-button:text-[var(--color-text-brand-bold-selected)] peer-data-[active=true]/menu-button:text-[var(--color-text-brand-bold-selected)]",
+      "peer-data-[size=s]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=l]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      r
+    ),
+    ...e
+  }
+));
+me.displayName = "SidebarMenuBadge";
+const ge = /* @__PURE__ */ t.forwardRef(({ className: r, showIcon: e = !1, ...a }, o) => {
+  const i = t.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      ref: o,
+      "data-sidebar": "menu-skeleton",
+      className: s("rounded-m h-8 flex gap-2 px-2 items-center", r),
+      ...a,
+      children: [
+        e && /* @__PURE__ */ d("div", { className: "rounded-m bg-[var(--color-surface-secondary)] size-4 animate-pulse" }),
+        /* @__PURE__ */ d(
+          "div",
+          {
+            className: "h-4 flex-1 max-w-[--skeleton-width] bg-[var(--color-surface-secondary)] rounded-m animate-pulse",
+            style: {
+              "--skeleton-width": i
+            }
+          }
+        )
+      ]
+    }
+  );
+});
+ge.displayName = "SidebarMenuSkeleton";
+const xe = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ d(
+  "ul",
+  {
+    ref: a,
+    "data-sidebar": "menu-sub",
+    className: s(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-[var(--color-border-primary-subtle)] px-2.5 py-0.5 z-1",
+      "group-data-[collapsible=icon]:hidden",
+      r
+    ),
+    ...e
+  }
+));
+xe.displayName = "SidebarMenuSub";
+const he = /* @__PURE__ */ t.forwardRef(({ ...r }, e) => /* @__PURE__ */ d("li", { ref: e, ...r }));
+he.displayName = "SidebarMenuSubItem";
+const ye = /* @__PURE__ */ t.forwardRef(({
+  asChild: r = !1,
+  size: e = "m",
+  isActive: a = !1,
+  enhancedHover: o = !0,
+  preserveActiveOnFocus: i = !0,
+  className: l,
+  onMouseEnter: u,
+  onMouseLeave: f,
+  onFocus: p,
+  onBlur: m,
+  onMouseDown: v,
+  ...h
+}, y) => {
+  const R = r ? "span" : "button", [g, w] = t.useState(!1), [b, N] = t.useState(!1), S = t.useRef(!1), n = t.useCallback(
+    (x) => {
+      o && w(!0), u?.(x);
+    },
+    [o, u]
+  ), c = t.useCallback(
+    (x) => {
+      o && w(!1), f?.(x);
+    },
+    [o, f]
+  ), z = t.useCallback(
+    (x) => {
+      S.current = !0, v?.(x);
+    },
+    [v]
+  ), M = t.useCallback(
+    (x) => {
+      o && !S.current && N(!0), S.current = !1, p?.(x);
+    },
+    [o, p]
+  ), B = t.useCallback(
+    (x) => {
+      o && N(!1), m?.(x);
+    },
+    [o, m]
+  ), D = t.useMemo(() => s(
+    // Base submenu button styles
+    "relative flex w-full justify-start h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-m px-2 text-[var(--color-text-secondary)] outline-none ring-[var(--color-border-focused)] transition-all duration-150 ease-in-out disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 cursor-pointer [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-[var(--color-text-secondary)] z-2",
+    // Size variants
+    e === "s" && "text-body-sm px-1.5 py-0.5",
+    e === "m" && "text-body-md",
+    // Enhanced hover behavior for non-active items
+    o && g && !b && !a && "bg-[var(--color-background-neutral-subtlest-hovered)]",
+    // Enhanced hover behavior for active items
+    o && g && !b && a && "bg-[var(--color-background-blue-subtle-selected-hovered)]",
+    // Focus styles - clean focus for non-active items
+    o && b && !a && "bg-transparent ring-2 ring-[var(--color-border-brand-bold)]",
+    // Active item focus - preserve brand background when focused
+    o && b && a && i && [
+      "bg-[var(--color-background-blue-subtle-selected)]",
+      "text-[var(--color-text-brand-bold)]",
+      "[&]:text-body-md [&]:font-normal",
+      "ring-2 ring-[var(--color-border-brand-bold)]"
+    ],
+    // Active item styles (non-focus state)
+    a && !b && [
+      "bg-[var(--color-background-blue-subtle-selected)]",
+      "text-[var(--color-text-brand-bold)]",
+      "[&]:text-body-md [&]:font-normal",
+      "hover:bg-[var(--color-background-blue-subtle-selected-hovered)]"
+    ],
+    // Fallback for non-enhanced behavior
+    !o && [
+      "hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] focus-visible:ring-2 active:bg-[var(--color-background-neutral-subtlest-hovered)] active:text-[var(--color-text-primary)]",
+      "data-[active=true]:bg-[var(--color-background-blue-subtle-selected)] data-[active=true]:text-[var(--color-text-brand-bold-selected)] data-[active=true]:hover:!bg-[var(--color-background-blue-subtle-selected-hovered)] data-[active=true]:hover:!text-[var(--color-text-brand-bold-hovered)] data-[active=true]:active:!bg-[var(--color-background-blue-subtle-selected-hovered)] data-[active=true]:active:!text-[var(--color-text-brand-bold-hovered)]"
+    ]
+  ), [e, o, g, b, a, i]);
+  return /* @__PURE__ */ d(
+    R,
+    {
+      ref: y,
+      "data-sidebar": "menu-sub-button",
+      "data-size": e,
+      "data-active": a,
+      className: s(D, l),
+      type: r ? void 0 : "button",
+      onMouseEnter: o ? n : u,
+      onMouseLeave: o ? c : f,
+      onMouseDown: o ? z : v,
+      onFocus: o ? M : p,
+      onBlur: o ? B : m,
+      ...h
+    }
+  );
+});
+ye.displayName = "SidebarMenuSubButton";
+export {
+  J as Sidebar,
+  se as SidebarContent,
+  oe as SidebarFooter,
+  le as SidebarGroup,
+  ne as SidebarGroupAction,
+  ce as SidebarGroupContent,
+  ie as SidebarGroupLabel,
+  te as SidebarHeader,
+  ee as SidebarInput,
+  H as SidebarInset,
+  ue as SidebarMenu,
+  fe as SidebarMenuAction,
+  me as SidebarMenuBadge,
+  ve as SidebarMenuButton,
+  be as SidebarMenuItem,
+  ge as SidebarMenuSkeleton,
+  xe as SidebarMenuSub,
+  ye as SidebarMenuSubButton,
+  he as SidebarMenuSubItem,
+  A as SidebarProvider,
+  Z as SidebarRail,
+  re as SidebarSearchButton,
+  ae as SidebarSearchTrigger,
+  de as SidebarSeparator,
+  Q as SidebarTrigger,
+  E as useSidebar
+};