@abumble/design-system 0.0.8 → 0.0.10

package/dist/components/Sidebar.js

@@ -1,28 +1,595 @@
-import { Sidebar as a, SidebarContent as i, SidebarFooter as S, SidebarGroup as b, SidebarGroupAction as d, SidebarGroupContent as n, SidebarGroupLabel as u, SidebarHeader as t, SidebarInput as o, SidebarInset as M, SidebarMenu as p, SidebarMenuAction as G, SidebarMenuBadge as I, SidebarMenuButton as g, SidebarMenuItem as l, SidebarMenuSkeleton as m, SidebarMenuSub as B, SidebarMenuSubButton as c, SidebarMenuSubItem as s, SidebarProvider as A, SidebarRail as C, SidebarSeparator as f, SidebarTrigger as k, useSidebar as v } from "./Sidebar/Sidebar.js";
+import { jsx as t, jsxs as m, Fragment as k } from "react/jsx-runtime";
+import { Slot as h } from "@radix-ui/react-slot";
+import { cva as z } from "class-variance-authority";
+import { ChevronsLeft as I } from "lucide-react";
+import * as c from "react";
+import { B as E } from "../Button.js";
+import { I as T } from "../Input.js";
+import { S as D } from "../Separator.js";
+import { S as B, c as A, d as O, f as R, g as H } from "../Sheet.js";
+import { S as y } from "../Skeleton.js";
+import { T as K, a as j, b as G, c as L } from "../Tooltip.js";
+import { u as $ } from "../use-mobile.js";
+import { c as r } from "../utils2.js";
+const V = "sidebar_state", W = 3600 * 24 * 7, q = "18rem", F = "18rem", P = "3rem", U = "b", C = c.createContext(null);
+function S() {
+  const a = c.useContext(C);
+  if (!a)
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  return a;
+}
+function de({
+  defaultOpen: a = !0,
+  open: e,
+  onOpenChange: i,
+  className: n,
+  style: o,
+  children: d,
+  ...p
+}) {
+  const s = $(), [f, u] = c.useState(!1), [v, _] = c.useState(a), g = e ?? v, x = c.useCallback(
+    (l) => {
+      const b = typeof l == "function" ? l(g) : l;
+      i ? i(b) : _(b), document.cookie = `${V}=${b}; path=/; max-age=${W}`;
+    },
+    [i, g]
+  ), w = c.useCallback(() => s ? u((l) => !l) : x((l) => !l), [s, x, u]);
+  c.useEffect(() => {
+    const l = (b) => {
+      b.key === U && (b.metaKey || b.ctrlKey) && (b.preventDefault(), w());
+    };
+    return window.addEventListener("keydown", l), () => window.removeEventListener("keydown", l);
+  }, [w]);
+  const N = g ? "expanded" : "collapsed", M = c.useMemo(
+    () => ({
+      state: N,
+      open: g,
+      setOpen: x,
+      isMobile: s,
+      openMobile: f,
+      setOpenMobile: u,
+      toggleSidebar: w
+    }),
+    [N, g, x, s, f, u, w]
+  );
+  return /* @__PURE__ */ t(C.Provider, { value: M, children: /* @__PURE__ */ t(L, { delayDuration: 0, children: /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "sidebar-wrapper",
+      style: {
+        "--sidebar-width": q,
+        "--sidebar-width-icon": P,
+        ...o
+      },
+      className: r(
+        "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex w-full",
+        n
+      ),
+      ...p,
+      children: d
+    }
+  ) }) });
+}
+function le({
+  side: a = "left",
+  variant: e = "sidebar",
+  collapsible: i = "offcanvas",
+  className: n,
+  children: o,
+  ...d
+}) {
+  const { isMobile: p, state: s, openMobile: f, setOpenMobile: u } = S();
+  return i === "none" ? /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "sidebar",
+      className: r(
+        "sidebar flex w-(--sidebar-width) flex-col",
+        n
+      ),
+      ...d,
+      children: o
+    }
+  ) : p ? /* @__PURE__ */ t(B, { open: f, onOpenChange: u, ...d, children: /* @__PURE__ */ m(
+    A,
+    {
+      "data-sidebar": "sidebar",
+      "data-slot": "sidebar",
+      "data-mobile": "true",
+      className: "sidebar w-(--sidebar-width) p-0 [&>button]:hidden",
+      style: {
+        "--sidebar-width": F
+      },
+      side: a,
+      children: [
+        /* @__PURE__ */ m(O, { className: "sr-only", children: [
+          /* @__PURE__ */ t(R, { children: "Sidebar" }),
+          /* @__PURE__ */ t(H, { children: "Displays the mobile sidebar." })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex w-full flex-col", children: o })
+      ]
+    }
+  ) }) : /* @__PURE__ */ m(
+    "div",
+    {
+      className: "group peer text-sidebar-foreground hidden md:block",
+      "data-state": s,
+      "data-collapsible": s === "collapsed" ? i : "",
+      "data-variant": e,
+      "data-side": a,
+      "data-slot": "sidebar",
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            "data-slot": "sidebar-gap",
+            className: r(
+              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+              "group-data-[collapsible=offcanvas]:w-0",
+              "group-data-[side=right]:rotate-180",
+              "group-data-[state=collapsed]:mr-0 mr-6",
+              e === "floating" || e === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+            )
+          }
+        ),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            "data-slot": "sidebar-container",
+            className: r(
+              "fixed z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+              a === "left" ? "group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "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)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              n
+            ),
+            ...d,
+            children: /* @__PURE__ */ t(
+              "div",
+              {
+                "data-sidebar": "sidebar",
+                "data-slot": "sidebar-inner",
+                className: "sidebar group-data-[variant=floating]:border-sidebar-border flex w-full flex-col group-data-[variant=floating]:rounded group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm flex-1",
+                children: o
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function ce({
+  className: a,
+  onClick: e,
+  ...i
+}) {
+  const { isMobile: n, open: o, toggleSidebar: d } = S(), p = n || !o ? "rotate-180" : "";
+  return /* @__PURE__ */ t(k, { children: /* @__PURE__ */ m(
+    E,
+    {
+      "data-sidebar": "trigger",
+      "data-slot": "sidebar-trigger",
+      variant: "ghost",
+      size: "icon",
+      className: r("rounded-full", a),
+      onClick: (s) => {
+        e?.(s), d();
+      },
+      ...i,
+      children: [
+        /* @__PURE__ */ t(I, { className: `transition-transform ${p} size-6` }),
+        /* @__PURE__ */ t("span", { className: "sr-only", children: "Toggle Sidebar" })
+      ]
+    }
+  ) });
+}
+function ue({ className: a, ...e }) {
+  const { toggleSidebar: i } = S();
+  return /* @__PURE__ */ t(
+    "button",
+    {
+      "data-sidebar": "rail",
+      "data-slot": "sidebar-rail",
+      "aria-label": "Toggle Sidebar",
+      tabIndex: -1,
+      onClick: i,
+      title: "Toggle Sidebar",
+      className: r(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        a
+      ),
+      ...e
+    }
+  );
+}
+function be({ className: a, ...e }) {
+  return /* @__PURE__ */ t(
+    "main",
+    {
+      "data-slot": "sidebar-inset",
+      className: r(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        a
+      ),
+      ...e
+    }
+  );
+}
+function pe({
+  className: a,
+  ...e
+}) {
+  return /* @__PURE__ */ t(
+    T,
+    {
+      "data-slot": "sidebar-input",
+      "data-sidebar": "input",
+      className: r("bg-background h-8 w-full shadow-none", a),
+      ...e
+    }
+  );
+}
+function fe({ className: a, ...e }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "sidebar-header",
+      "data-sidebar": "header",
+      className: r("flex flex-col gap-2 p-2", a),
+      ...e
+    }
+  );
+}
+function me({ className: a, ...e }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "sidebar-footer",
+      "data-sidebar": "footer",
+      className: r("flex flex-col gap-2 p-2", a),
+      ...e
+    }
+  );
+}
+function ge({
+  className: a,
+  ...e
+}) {
+  return /* @__PURE__ */ t(
+    D,
+    {
+      "data-slot": "sidebar-separator",
+      "data-sidebar": "separator",
+      className: r("bg-sidebar-border mx-2 w-auto", a),
+      ...e
+    }
+  );
+}
+function he({ className: a, ...e }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "sidebar-content",
+      "data-sidebar": "content",
+      className: r(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        a
+      ),
+      ...e
+    }
+  );
+}
+function ve({ className: a, ...e }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "sidebar-group",
+      "data-sidebar": "group",
+      className: r("relative flex w-full min-w-0 flex-col p-2", a),
+      ...e
+    }
+  );
+}
+function xe({
+  className: a,
+  asChild: e = !1,
+  ...i
+}) {
+  return /* @__PURE__ */ t(
+    e ? h : "div",
+    {
+      "data-slot": "sidebar-group-label",
+      "data-sidebar": "group-label",
+      className: r(
+        "sidebar-text 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",
+        a
+      ),
+      ...i
+    }
+  );
+}
+function we({
+  className: a,
+  asChild: e = !1,
+  ...i
+}) {
+  return /* @__PURE__ */ t(
+    e ? h : "button",
+    {
+      "data-slot": "sidebar-group-action",
+      "data-sidebar": "group-action",
+      className: r(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        a
+      ),
+      ...i
+    }
+  );
+}
+function Se({
+  className: a,
+  ...e
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "sidebar-group-content",
+      "data-sidebar": "group-content",
+      className: r("w-full text-sm", a),
+      ...e
+    }
+  );
+}
+function Ne({ className: a, ...e }) {
+  return /* @__PURE__ */ t(
+    "ul",
+    {
+      "data-slot": "sidebar-menu",
+      "data-sidebar": "menu",
+      className: r("flex w-full min-w-0 flex-col gap-1", a),
+      ...e
+    }
+  );
+}
+function ye({ className: a, ...e }) {
+  return /* @__PURE__ */ t(
+    "li",
+    {
+      "data-slot": "sidebar-menu-item",
+      "data-sidebar": "menu-item",
+      className: r("group/menu-item relative", a),
+      ...e
+    }
+  );
+}
+const X = z(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground 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-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Ce({
+  asChild: a = !1,
+  isActive: e = !1,
+  variant: i = "default",
+  size: n = "default",
+  tooltip: o,
+  className: d,
+  ...p
+}) {
+  const s = a ? h : "button", { isMobile: f, state: u } = S(), v = /* @__PURE__ */ t(
+    s,
+    {
+      "data-slot": "sidebar-menu-button",
+      "data-sidebar": "menu-button",
+      "data-size": n,
+      "data-active": e,
+      className: r(X({ variant: i, size: n }), d),
+      ...p
+    }
+  );
+  return o ? (typeof o == "string" && (o = {
+    children: o
+  }), /* @__PURE__ */ m(K, { children: [
+    /* @__PURE__ */ t(j, { asChild: !0, children: v }),
+    /* @__PURE__ */ t(
+      G,
+      {
+        side: "right",
+        align: "center",
+        hidden: u !== "collapsed" || f,
+        ...o
+      }
+    )
+  ] })) : v;
+}
+function _e({
+  className: a,
+  asChild: e = !1,
+  showOnHover: i = !1,
+  ...n
+}) {
+  return /* @__PURE__ */ t(
+    e ? h : "button",
+    {
+      "data-slot": "sidebar-menu-action",
+      "data-sidebar": "menu-action",
+      className: r(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        i && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        a
+      ),
+      ...n
+    }
+  );
+}
+function Me({
+  className: a,
+  ...e
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "sidebar-menu-badge",
+      "data-sidebar": "menu-badge",
+      className: r(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        a
+      ),
+      ...e
+    }
+  );
+}
+function ke({
+  className: a,
+  showIcon: e = !1,
+  ...i
+}) {
+  const n = c.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      "data-slot": "sidebar-menu-skeleton",
+      "data-sidebar": "menu-skeleton",
+      className: r("flex h-8 items-center gap-2 rounded px-2", a),
+      ...i,
+      children: [
+        e && /* @__PURE__ */ t(
+          y,
+          {
+            className: "size-4 rounded",
+            "data-sidebar": "menu-skeleton-icon"
+          }
+        ),
+        /* @__PURE__ */ t(
+          y,
+          {
+            className: "h-4 max-w-(--skeleton-width) flex-1",
+            "data-sidebar": "menu-skeleton-text",
+            style: {
+              "--skeleton-width": n
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function ze({ className: a, ...e }) {
+  return /* @__PURE__ */ t(
+    "ul",
+    {
+      "data-slot": "sidebar-menu-sub",
+      "data-sidebar": "menu-sub",
+      className: r(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        a
+      ),
+      ...e
+    }
+  );
+}
+function Ie({
+  className: a,
+  ...e
+}) {
+  return /* @__PURE__ */ t(
+    "li",
+    {
+      "data-slot": "sidebar-menu-sub-item",
+      "data-sidebar": "menu-sub-item",
+      className: r("group/menu-sub-item relative", a),
+      ...e
+    }
+  );
+}
+function Ee({
+  asChild: a = !1,
+  size: e = "md",
+  isActive: i = !1,
+  className: n,
+  ...o
+}) {
+  return /* @__PURE__ */ t(
+    a ? h : "a",
+    {
+      "data-slot": "sidebar-menu-sub-button",
+      "data-sidebar": "menu-sub-button",
+      "data-size": e,
+      "data-active": i,
+      className: r(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded px-2 outline-hidden focus-visible:ring-2 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",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        e === "sm" && "text-xs",
+        e === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        n
+      ),
+      ...o
+    }
+  );
+}
 export {
-  a as Sidebar,
-  i as SidebarContent,
-  S as SidebarFooter,
-  b as SidebarGroup,
-  d as SidebarGroupAction,
-  n as SidebarGroupContent,
-  u as SidebarGroupLabel,
-  t as SidebarHeader,
-  o as SidebarInput,
-  M as SidebarInset,
-  p as SidebarMenu,
-  G as SidebarMenuAction,
-  I as SidebarMenuBadge,
-  g as SidebarMenuButton,
-  l as SidebarMenuItem,
-  m as SidebarMenuSkeleton,
-  B as SidebarMenuSub,
-  c as SidebarMenuSubButton,
-  s as SidebarMenuSubItem,
-  A as SidebarProvider,
-  C as SidebarRail,
-  f as SidebarSeparator,
-  k as SidebarTrigger,
-  v as useSidebar
+  le as Sidebar,
+  he as SidebarContent,
+  me as SidebarFooter,
+  ve as SidebarGroup,
+  we as SidebarGroupAction,
+  Se as SidebarGroupContent,
+  xe as SidebarGroupLabel,
+  fe as SidebarHeader,
+  pe as SidebarInput,
+  be as SidebarInset,
+  Ne as SidebarMenu,
+  _e as SidebarMenuAction,
+  Me as SidebarMenuBadge,
+  Ce as SidebarMenuButton,
+  ye as SidebarMenuItem,
+  ke as SidebarMenuSkeleton,
+  ze as SidebarMenuSub,
+  Ee as SidebarMenuSubButton,
+  Ie as SidebarMenuSubItem,
+  de as SidebarProvider,
+  ue as SidebarRail,
+  ge as SidebarSeparator,
+  ce as SidebarTrigger,
+  S as useSidebar
 };
 //# sourceMappingURL=Sidebar.js.map