@kubetail/ui 2.0.3 → 2.0.4-rc1

package/dist/elements/sidebar.js

@@ -1,559 +1,347 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import { Slot as g } from "@radix-ui/react-slot";
-import { cva as I } from "class-variance-authority";
-import { PanelLeftIcon as E } from "lucide-react";
-import { createContext as D, useMemo as z, useState as y, useCallback as _, useEffect as T, useContext as B } from "react";
-import { Button as A } from "./button.js";
-import { Input as O } from "./input.js";
-import { useIsMobile as R } from "../hooks/use-mobile.js";
-import { cn as r } from "../lib/utils.js";
-import { Separator as H } from "./separator.js";
-import { Sheet as K, SheetContent as j, SheetHeader as G, SheetTitle as L, SheetDescription as P } from "./sheet.js";
-import { Skeleton as M } from "./skeleton.js";
-import { Tooltip as $, TooltipTrigger as V, TooltipContent as W, TooltipProvider as q } from "./tooltip.js";
-const F = "sidebar_state", U = 60 * 60 * 24 * 7, X = "16rem", Y = "18rem", J = "3rem", Q = "b", C = D(null);
-function w() {
-  const a = B(C);
-  if (!a)
-    throw new Error("useSidebar must be used within a SidebarProvider.");
-  return a;
+"use client";
+import { cn } from "../lib/utils.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+import { Skeleton } from "./skeleton.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { useIsMobile } from "../hooks/use-mobile.js";
+import { Separator } from "./separator.js";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+var SIDEBAR_COOKIE_NAME = "sidebar_state", SIDEBAR_COOKIE_MAX_AGE = 3600 * 24 * 7, SIDEBAR_WIDTH = "16rem", SIDEBAR_WIDTH_MOBILE = "18rem", SIDEBAR_WIDTH_ICON = "3rem", SIDEBAR_KEYBOARD_SHORTCUT = "b", SidebarContext = createContext(null);
+function useSidebar() {
+	let t = useContext(SidebarContext);
+	if (!t) throw Error("useSidebar must be used within a SidebarProvider.");
+	return t;
 }
-function pe({
-  defaultOpen: a = !0,
-  open: e,
-  onOpenChange: i,
-  className: n,
-  style: o,
-  children: l,
-  ...f
-}) {
-  const s = R(), [b, c] = y(!1), [h, S] = y(a), m = e ?? h, v = _(
-    (d) => {
-      const u = typeof d == "function" ? d(m) : d;
-      i ? i(u) : S(u), document.cookie = `${F}=${u}; path=/; max-age=${U}`;
-    },
-    [i, m]
-  ), x = _(
-    () => s ? c((d) => !d) : v((d) => !d),
-    [s, v, c]
-  );
-  T(() => {
-    const d = (u) => {
-      u.key === Q && (u.metaKey || u.ctrlKey) && (u.preventDefault(), x());
-    };
-    return window.addEventListener("keydown", d), () => window.removeEventListener("keydown", d);
-  }, [x]);
-  const N = m ? "expanded" : "collapsed", k = z(
-    () => ({
-      state: N,
-      open: m,
-      setOpen: v,
-      isMobile: s,
-      openMobile: b,
-      setOpenMobile: c,
-      toggleSidebar: x
-    }),
-    [N, m, v, s, b, c, x]
-  );
-  return /* @__PURE__ */ t(C.Provider, { value: k, children: /* @__PURE__ */ t(q, { delayDuration: 0, children: /* @__PURE__ */ t(
-    "div",
-    {
-      "data-slot": "sidebar-wrapper",
-      style: {
-        "--sidebar-width": X,
-        "--sidebar-width-icon": J,
-        ...o
-      },
-      className: r("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", n),
-      ...f,
-      children: l
-    }
-  ) }) });
+function SidebarProvider({ defaultOpen: F = !0, open: I, onOpenChange: R, className: z, style: B, children: V, ...U }) {
+	let W = useIsMobile(), [G, K] = useState(!1), [q, J] = useState(F), Y = I ?? q, X = useCallback((t) => {
+		let F = typeof t == "function" ? t(Y) : t;
+		R ? R(F) : J(F), document.cookie = `${SIDEBAR_COOKIE_NAME}=${F}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+	}, [R, Y]), Z = useCallback(() => W ? K((t) => !t) : X((t) => !t), [
+		W,
+		X,
+		K
+	]);
+	useEffect(() => {
+		let t = (t) => {
+			t.key === SIDEBAR_KEYBOARD_SHORTCUT && (t.metaKey || t.ctrlKey) && (t.preventDefault(), Z());
+		};
+		return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+	}, [Z]);
+	let Q = Y ? "expanded" : "collapsed", $ = useMemo(() => ({
+		state: Q,
+		open: Y,
+		setOpen: X,
+		isMobile: W,
+		openMobile: G,
+		setOpenMobile: K,
+		toggleSidebar: Z
+	}), [
+		Q,
+		Y,
+		X,
+		W,
+		G,
+		K,
+		Z
+	]);
+	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+		value: $,
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			delayDuration: 0,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "sidebar-wrapper",
+				style: {
+					"--sidebar-width": SIDEBAR_WIDTH,
+					"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+					...B
+				},
+				className: cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", z),
+				...U,
+				children: V
+			})
+		})
+	});
 }
-function fe({
-  side: a = "left",
-  variant: e = "sidebar",
-  collapsible: i = "offcanvas",
-  className: n,
-  children: o,
-  ...l
-}) {
-  const { isMobile: f, state: s, openMobile: b, setOpenMobile: c } = w();
-  return i === "none" ? /* @__PURE__ */ t(
-    "div",
-    {
-      "data-slot": "sidebar",
-      className: r("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", n),
-      ...l,
-      children: o
-    }
-  ) : f ? /* @__PURE__ */ t(K, { open: b, onOpenChange: c, ...l, children: /* @__PURE__ */ p(
-    j,
-    {
-      "data-sidebar": "sidebar",
-      "data-slot": "sidebar",
-      "data-mobile": "true",
-      className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
-      style: {
-        "--sidebar-width": Y
-      },
-      side: a,
-      children: [
-        /* @__PURE__ */ p(G, { className: "sr-only", children: [
-          /* @__PURE__ */ t(L, { children: "Sidebar" }),
-          /* @__PURE__ */ t(P, { children: "Displays the mobile sidebar." })
-        ] }),
-        /* @__PURE__ */ t("div", { className: "flex h-full w-full flex-col", children: o })
-      ]
-    }
-  ) }) : /* @__PURE__ */ p(
-    "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",
-              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 inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md: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)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-              n
-            ),
-            ...l,
-            children: /* @__PURE__ */ t(
-              "div",
-              {
-                "data-sidebar": "sidebar",
-                "data-slot": "sidebar-inner",
-                className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
-                children: o
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
+function Sidebar({ side: F = "left", variant: I = "sidebar", collapsible: L = "offcanvas", className: R, children: z, ...B }) {
+	let { isMobile: V, state: H, openMobile: U, setOpenMobile: X } = useSidebar();
+	return L === "none" ? /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar",
+		className: cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", R),
+		...B,
+		children: z
+	}) : V ? /* @__PURE__ */ jsx(Sheet, {
+		open: U,
+		onOpenChange: X,
+		...B,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			"data-sidebar": "sidebar",
+			"data-slot": "sidebar",
+			"data-mobile": "true",
+			className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+			style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
+			side: F,
+			children: [/* @__PURE__ */ jsxs(SheetHeader, {
+				className: "sr-only",
+				children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex h-full w-full flex-col",
+				children: z
+			})]
+		})
+	}) : /* @__PURE__ */ jsxs("div", {
+		className: "group peer text-sidebar-foreground hidden md:block",
+		"data-state": H,
+		"data-collapsible": H === "collapsed" ? L : "",
+		"data-variant": I,
+		"data-side": F,
+		"data-slot": "sidebar",
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "sidebar-gap",
+			className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", I === "floating" || I === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)")
+		}), /* @__PURE__ */ jsx("div", {
+			"data-slot": "sidebar-container",
+			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", F === "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)]", I === "floating" || I === "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", R),
+			...B,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-sidebar": "sidebar",
+				"data-slot": "sidebar-inner",
+				className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
+				children: z
+			})
+		})]
+	});
 }
-function me({ className: a, onClick: e, ...i }) {
-  const { toggleSidebar: n } = w();
-  return /* @__PURE__ */ p(
-    A,
-    {
-      "data-sidebar": "trigger",
-      "data-slot": "sidebar-trigger",
-      variant: "ghost",
-      size: "icon",
-      className: r("size-7", a),
-      onClick: (o) => {
-        e == null || e(o), n();
-      },
-      ...i,
-      children: [
-        /* @__PURE__ */ t(E, {}),
-        /* @__PURE__ */ t("span", { className: "sr-only", children: "Toggle Sidebar" })
-      ]
-    }
-  );
+function SidebarTrigger({ className: F, onClick: I, ...L }) {
+	let { toggleSidebar: R } = useSidebar();
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-sidebar": "trigger",
+		"data-slot": "sidebar-trigger",
+		variant: "ghost",
+		size: "icon",
+		className: cn("size-7", F),
+		onClick: (t) => {
+			I?.(t), R();
+		},
+		...L,
+		children: [/* @__PURE__ */ jsx(PanelLeftIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Toggle Sidebar"
+		})]
+	});
 }
-function ge({ className: a, ...e }) {
-  const { toggleSidebar: i } = w();
-  return /* @__PURE__ */ t(
-    "button",
-    {
-      type: "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 SidebarRail({ className: F, ...I }) {
+	let { toggleSidebar: L } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-sidebar": "rail",
+		"data-slot": "sidebar-rail",
+		"aria-label": "Toggle Sidebar",
+		tabIndex: -1,
+		onClick: L,
+		title: "Toggle Sidebar",
+		className: cn("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", F),
+		...I
+	});
 }
-function he({ 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-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-        a
-      ),
-      ...e
-    }
-  );
+function SidebarInset({ className: F, ...I }) {
+	return /* @__PURE__ */ jsx("main", {
+		"data-slot": "sidebar-inset",
+		className: cn("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-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", F),
+		...I
+	});
 }
-function ve({ className: a, ...e }) {
-  return /* @__PURE__ */ t(
-    O,
-    {
-      "data-slot": "sidebar-input",
-      "data-sidebar": "input",
-      className: r("bg-background h-8 w-full shadow-none", a),
-      ...e
-    }
-  );
+function SidebarInput({ className: F, ...I }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "sidebar-input",
+		"data-sidebar": "input",
+		className: cn("bg-background h-8 w-full shadow-none", F),
+		...I
+	});
 }
-function xe({ 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 SidebarHeader({ className: F, ...I }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-header",
+		"data-sidebar": "header",
+		className: cn("flex flex-col gap-2 p-2", F),
+		...I
+	});
 }
-function we({ 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 SidebarFooter({ className: F, ...I }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-footer",
+		"data-sidebar": "footer",
+		className: cn("flex flex-col gap-2 p-2", F),
+		...I
+	});
 }
-function Se({ className: a, ...e }) {
-  return /* @__PURE__ */ t(
-    H,
-    {
-      "data-slot": "sidebar-separator",
-      "data-sidebar": "separator",
-      className: r("bg-sidebar-border mx-2 w-auto", a),
-      ...e
-    }
-  );
+function SidebarSeparator({ className: F, ...I }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "sidebar-separator",
+		"data-sidebar": "separator",
+		className: cn("bg-sidebar-border mx-2 w-auto", F),
+		...I
+	});
 }
-function Ne({ 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 SidebarContent({ className: F, ...I }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-content",
+		"data-sidebar": "content",
+		className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", F),
+		...I
+	});
 }
-function ye({ 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 SidebarGroup({ className: F, ...I }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-group",
+		"data-sidebar": "group",
+		className: cn("relative flex w-full min-w-0 flex-col p-2", F),
+		...I
+	});
 }
-function _e({
-  className: a,
-  asChild: e = !1,
-  ...i
-}) {
-  return /* @__PURE__ */ t(
-    e ? g : "div",
-    {
-      "data-slot": "sidebar-group-label",
-      "data-sidebar": "group-label",
-      className: r(
-        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium 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 SidebarGroupLabel({ className: F, asChild: I = !1, ...L }) {
+	return /* @__PURE__ */ jsx(I ? Slot : "div", {
+		"data-slot": "sidebar-group-label",
+		"data-sidebar": "group-label",
+		className: cn("text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium 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", F),
+		...L
+	});
 }
-function Me({
-  className: a,
-  asChild: e = !1,
-  ...i
-}) {
-  return /* @__PURE__ */ t(
-    e ? g : "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-md 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 SidebarGroupAction({ className: F, asChild: I = !1, ...L }) {
+	return /* @__PURE__ */ jsx(I ? Slot : "button", {
+		"data-slot": "sidebar-group-action",
+		"data-sidebar": "group-action",
+		className: cn("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-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "group-data-[collapsible=icon]:hidden", F),
+		...L
+	});
 }
-function ze({ 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 SidebarGroupContent({ className: F, ...I }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-group-content",
+		"data-sidebar": "group-content",
+		className: cn("w-full text-sm", F),
+		...I
+	});
 }
-function Ce({ 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 SidebarMenu({ className: F, ...I }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "sidebar-menu",
+		"data-sidebar": "menu",
+		className: cn("flex w-full min-w-0 flex-col gap-1", F),
+		...I
+	});
 }
-function ke({ className: a, ...e }) {
-  return /* @__PURE__ */ t(
-    "li",
-    {
-      "data-slot": "sidebar-menu-item",
-      "data-sidebar": "menu-item",
-      className: r("group/menu-item relative", a),
-      ...e
-    }
-  );
+function SidebarMenuItem({ className: F, ...I }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "sidebar-menu-item",
+		"data-sidebar": "menu-item",
+		className: cn("group/menu-item relative", F),
+		...I
+	});
 }
-const Z = I(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md 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 Ie({
-  asChild: a = !1,
-  isActive: e = !1,
-  variant: i = "default",
-  size: n = "default",
-  tooltip: o,
-  className: l,
-  ...f
-}) {
-  const s = a ? g : "button", { isMobile: b, state: c } = w(), h = /* @__PURE__ */ t(
-    s,
-    {
-      "data-slot": "sidebar-menu-button",
-      "data-sidebar": "menu-button",
-      "data-size": n,
-      "data-active": e,
-      className: r(Z({ variant: i, size: n }), l),
-      ...f
-    }
-  );
-  return o ? /* @__PURE__ */ p($, { children: [
-    /* @__PURE__ */ t(V, { asChild: !0, children: h }),
-    /* @__PURE__ */ t(W, { side: "right", align: "center", hidden: c !== "collapsed" || b, ...typeof o == "string" ? {
-      children: o
-    } : o })
-  ] }) : h;
+var sidebarMenuButtonVariants = cva("peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md 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 SidebarMenuButton({ asChild: L = !1, isActive: z = !1, variant: B = "default", size: V = "default", tooltip: H, className: U, ...W }) {
+	let G = L ? Slot : "button", { isMobile: K, state: q } = useSidebar(), J = /* @__PURE__ */ jsx(G, {
+		"data-slot": "sidebar-menu-button",
+		"data-sidebar": "menu-button",
+		"data-size": V,
+		"data-active": z,
+		className: cn(sidebarMenuButtonVariants({
+			variant: B,
+			size: V
+		}), U),
+		...W
+	});
+	return H ? /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: !0,
+		children: J
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "right",
+		align: "center",
+		hidden: q !== "collapsed" || K,
+		...typeof H == "string" ? { children: H } : H
+	})] }) : J;
 }
-function Ee({
-  className: a,
-  asChild: e = !1,
-  showOnHover: i = !1,
-  ...n
-}) {
-  return /* @__PURE__ */ t(
-    e ? g : "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-md 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 SidebarMenuAction({ className: F, asChild: I = !1, showOnHover: L = !1, ...R }) {
+	return /* @__PURE__ */ jsx(I ? Slot : "button", {
+		"data-slot": "sidebar-menu-action",
+		"data-sidebar": "menu-action",
+		className: cn("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-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "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", L && "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", F),
+		...R
+	});
 }
-function De({ 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-md 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 SidebarMenuBadge({ className: F, ...I }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-menu-badge",
+		"data-sidebar": "menu-badge",
+		className: cn("text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md 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", F),
+		...I
+	});
 }
-function Te({
-  className: a,
-  showIcon: e = !1,
-  ...i
-}) {
-  const n = z(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
-  return /* @__PURE__ */ p(
-    "div",
-    {
-      "data-slot": "sidebar-menu-skeleton",
-      "data-sidebar": "menu-skeleton",
-      className: r("flex h-8 items-center gap-2 rounded-md px-2", a),
-      ...i,
-      children: [
-        e && /* @__PURE__ */ t(M, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }),
-        /* @__PURE__ */ t(
-          M,
-          {
-            className: "h-4 max-w-(--skeleton-width) flex-1",
-            "data-sidebar": "menu-skeleton-text",
-            style: {
-              "--skeleton-width": n
-            }
-          }
-        )
-      ]
-    }
-  );
+function SidebarMenuSkeleton({ className: F, showIcon: I = !1, ...L }) {
+	let R = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "sidebar-menu-skeleton",
+		"data-sidebar": "menu-skeleton",
+		className: cn("flex h-8 items-center gap-2 rounded-md px-2", F),
+		...L,
+		children: [I && /* @__PURE__ */ jsx(Skeleton, {
+			className: "size-4 rounded-md",
+			"data-sidebar": "menu-skeleton-icon"
+		}), /* @__PURE__ */ jsx(Skeleton, {
+			className: "h-4 max-w-(--skeleton-width) flex-1",
+			"data-sidebar": "menu-skeleton-text",
+			style: { "--skeleton-width": R }
+		})]
+	});
 }
-function Be({ 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 SidebarMenuSub({ className: F, ...I }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "sidebar-menu-sub",
+		"data-sidebar": "menu-sub",
+		className: cn("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", F),
+		...I
+	});
 }
-function Ae({ 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 SidebarMenuSubItem({ className: F, ...I }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "sidebar-menu-sub-item",
+		"data-sidebar": "menu-sub-item",
+		className: cn("group/menu-sub-item relative", F),
+		...I
+	});
 }
-function Oe({
-  asChild: a = !1,
-  size: e = "md",
-  isActive: i = !1,
-  className: n,
-  ...o
-}) {
-  return /* @__PURE__ */ t(
-    a ? g : "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-md 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
-    }
-  );
+function SidebarMenuSubButton({ asChild: F = !1, size: I = "md", isActive: L = !1, className: R, ...z }) {
+	return /* @__PURE__ */ jsx(F ? Slot : "a", {
+		"data-slot": "sidebar-menu-sub-button",
+		"data-sidebar": "menu-sub-button",
+		"data-size": I,
+		"data-active": L,
+		className: cn("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-md 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", I === "sm" && "text-xs", I === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", R),
+		...z
+	});
 }
-export {
-  fe as Sidebar,
-  Ne as SidebarContent,
-  we as SidebarFooter,
-  ye as SidebarGroup,
-  Me as SidebarGroupAction,
-  ze as SidebarGroupContent,
-  _e as SidebarGroupLabel,
-  xe as SidebarHeader,
-  ve as SidebarInput,
-  he as SidebarInset,
-  Ce as SidebarMenu,
-  Ee as SidebarMenuAction,
-  De as SidebarMenuBadge,
-  Ie as SidebarMenuButton,
-  ke as SidebarMenuItem,
-  Te as SidebarMenuSkeleton,
-  Be as SidebarMenuSub,
-  Oe as SidebarMenuSubButton,
-  Ae as SidebarMenuSubItem,
-  pe as SidebarProvider,
-  ge as SidebarRail,
-  Se as SidebarSeparator,
-  me as SidebarTrigger,
-  w as useSidebar
-};
-//# sourceMappingURL=sidebar.js.map
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };
+
+//# sourceMappingURL=sidebar.js.map