@m5kdev/web-ui 0.8.2 → 0.8.4

package/dist/src/components/ui/sheet.mjs

@@ -0,0 +1,66 @@
+"use client";
+import { cn } from "../../lib/utils.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { cva } from "class-variance-authority";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+//#region src/components/ui/sheet.tsx
+const Sheet = SheetPrimitive.Root;
+const SheetTrigger = SheetPrimitive.Trigger;
+const SheetClose = SheetPrimitive.Close;
+const SheetPortal = SheetPrimitive.Portal;
+const SheetOverlay = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
+	className: cn("fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
+	...props,
+	ref
+}));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+const sheetVariants = cva("fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out", {
+	variants: { side: {
+		top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+		bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+		left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+		right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+	} },
+	defaultVariants: { side: "right" }
+});
+const SheetContent = React$1.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
+	ref,
+	className: cn(sheetVariants({ side }), className),
+	...props,
+	children: [/* @__PURE__ */ jsxs(SheetPrimitive.Close, {
+		className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
+		children: [/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Close"
+		})]
+	}), children]
+})] }));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+const SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col space-y-2 text-center sm:text-left", className),
+	...props
+});
+SheetHeader.displayName = "SheetHeader";
+const SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+	...props
+});
+SheetFooter.displayName = "SheetFooter";
+const SheetTitle = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Title, {
+	ref,
+	className: cn("text-lg font-semibold text-foreground", className),
+	...props
+}));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+const SheetDescription = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Description, {
+	ref,
+	className: cn("text-sm text-muted-foreground", className),
+	...props
+}));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+//#endregion
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger };
+
+//# sourceMappingURL=sheet.mjs.map

package/dist/src/components/ui/sheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.mjs","names":["React"],"sources":["../../../../src/components/ui/sheet.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { X } from \"lucide-react\";\r\nimport * as React from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst Sheet = SheetPrimitive.Root;\r\n\r\nconst SheetTrigger = SheetPrimitive.Trigger;\r\n\r\nconst SheetClose = SheetPrimitive.Close;\r\n\r\nconst SheetPortal = SheetPrimitive.Portal;\r\n\r\nconst SheetOverlay = React.forwardRef<\r\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\r\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\r\n>(({ className, ...props }, ref) => (\r\n  <SheetPrimitive.Overlay\r\n    className={cn(\r\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\r\n      className\r\n    )}\r\n    {...props}\r\n    ref={ref}\r\n  />\r\n));\r\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\r\n\r\nconst sheetVariants = cva(\r\n  \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out\",\r\n  {\r\n    variants: {\r\n      side: {\r\n        top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\r\n        bottom:\r\n          \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\r\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\r\n        right:\r\n          \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      side: \"right\",\r\n    },\r\n  }\r\n);\r\n\r\ninterface SheetContentProps\r\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\r\n    VariantProps<typeof sheetVariants> {}\r\n\r\nconst SheetContent = React.forwardRef<\r\n  React.ElementRef<typeof SheetPrimitive.Content>,\r\n  SheetContentProps\r\n>(({ side = \"right\", className, children, ...props }, ref) => (\r\n  <SheetPortal>\r\n    <SheetOverlay />\r\n    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>\r\n      <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\r\n        <X className=\"h-4 w-4\" />\r\n        <span className=\"sr-only\">Close</span>\r\n      </SheetPrimitive.Close>\r\n      {children}\r\n    </SheetPrimitive.Content>\r\n  </SheetPortal>\r\n));\r\nSheetContent.displayName = SheetPrimitive.Content.displayName;\r\n\r\nconst SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\r\n  <div className={cn(\"flex flex-col space-y-2 text-center sm:text-left\", className)} {...props} />\r\n);\r\nSheetHeader.displayName = \"SheetHeader\";\r\n\r\nconst SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\r\n  <div\r\n    className={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", className)}\r\n    {...props}\r\n  />\r\n);\r\nSheetFooter.displayName = \"SheetFooter\";\r\n\r\nconst SheetTitle = React.forwardRef<\r\n  React.ElementRef<typeof SheetPrimitive.Title>,\r\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\r\n>(({ className, ...props }, ref) => (\r\n  <SheetPrimitive.Title\r\n    ref={ref}\r\n    className={cn(\"text-lg font-semibold text-foreground\", className)}\r\n    {...props}\r\n  />\r\n));\r\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\r\n\r\nconst SheetDescription = React.forwardRef<\r\n  React.ElementRef<typeof SheetPrimitive.Description>,\r\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\r\n>(({ className, ...props }, ref) => (\r\n  <SheetPrimitive.Description\r\n    ref={ref}\r\n    className={cn(\"text-sm text-muted-foreground\", className)}\r\n    {...props}\r\n  />\r\n));\r\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\r\n\r\nexport {\r\n  Sheet,\r\n  SheetPortal,\r\n  SheetOverlay,\r\n  SheetTrigger,\r\n  SheetClose,\r\n  SheetContent,\r\n  SheetHeader,\r\n  SheetFooter,\r\n  SheetTitle,\r\n  SheetDescription,\r\n};\r\n"],"mappings":";;;;;;;;AASA,MAAM,QAAQ,eAAe;AAE7B,MAAM,eAAe,eAAe;AAEpC,MAAM,aAAa,eAAe;AAElC,MAAM,cAAc,eAAe;AAEnC,MAAM,eAAeA,QAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,eAAe,SAAhB;CACE,WAAW,GACT,2JACA,UACD;CACD,GAAI;CACC;CACL,CAAA,CACF;AACF,aAAa,cAAc,eAAe,QAAQ;AAElD,MAAM,gBAAgB,IACpB,oMACA;CACE,UAAU,EACR,MAAM;EACJ,KAAK;EACL,QACE;EACF,MAAM;EACN,OACE;EACH,EACF;CACD,iBAAiB,EACf,MAAM,SACP;CACF,CACF;AAMD,MAAM,eAAeA,QAAM,YAGxB,EAAE,OAAO,SAAS,WAAW,UAAU,GAAG,SAAS,QACpD,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAgB,CAAA,EAChB,qBAAC,eAAe,SAAhB;CAA6B;CAAK,WAAW,GAAG,cAAc,EAAE,MAAM,CAAC,EAAE,UAAU;CAAE,GAAI;WAAzF,CACE,qBAAC,eAAe,OAAhB;EAAsB,WAAU;YAAhC,CACE,oBAAC,GAAD,EAAG,WAAU,WAAY,CAAA,EACzB,oBAAC,QAAD;GAAM,WAAU;aAAU;GAAY,CAAA,CACjB;KACtB,SACsB;GACb,EAAA,CAAA,CACd;AACF,aAAa,cAAc,eAAe,QAAQ;AAElD,MAAM,eAAe,EAAE,WAAW,GAAG,YACnC,oBAAC,OAAD;CAAK,WAAW,GAAG,oDAAoD,UAAU;CAAE,GAAI;CAAS,CAAA;AAElG,YAAY,cAAc;AAE1B,MAAM,eAAe,EAAE,WAAW,GAAG,YACnC,oBAAC,OAAD;CACE,WAAW,GAAG,iEAAiE,UAAU;CACzF,GAAI;CACJ,CAAA;AAEJ,YAAY,cAAc;AAE1B,MAAM,aAAaA,QAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,eAAe,OAAhB;CACO;CACL,WAAW,GAAG,yCAAyC,UAAU;CACjE,GAAI;CACJ,CAAA,CACF;AACF,WAAW,cAAc,eAAe,MAAM;AAE9C,MAAM,mBAAmBA,QAAM,YAG5B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,eAAe,aAAhB;CACO;CACL,WAAW,GAAG,iCAAiC,UAAU;CACzD,GAAI;CACJ,CAAA,CACF;AACF,iBAAiB,cAAc,eAAe,YAAY"}

package/dist/src/components/ui/sidebar.d.mts

@@ -0,0 +1,73 @@
+import { ButtonProps } from "./button.mjs";
+import { TooltipContent } from "./tooltip.mjs";
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+import * as _$_radix_ui_react_separator0 from "@radix-ui/react-separator";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/ui/sidebar.d.ts
+type SidebarContext = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+declare const SidebarContext: React$1.Context<SidebarContext | null>;
+declare function useSidebar(): SidebarContext;
+declare const SidebarProvider: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const Sidebar: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarTrigger: React$1.ForwardRefExoticComponent<Omit<ButtonProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarRail: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarInset: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarInput: React$1.ForwardRefExoticComponent<Omit<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const SidebarHeader: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarFooter: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarSeparator: React$1.ForwardRefExoticComponent<Omit<Omit<_$_radix_ui_react_separator0.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroup: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupLabel: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+  asChild?: boolean;
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupAction: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
+  asChild?: boolean;
+}, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarGroupContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenu: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
+declare const SidebarMenuButton: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React$1.ComponentProps<typeof TooltipContent>;
+} & VariantProps<(props?: ({
+  variant?: "default" | "outline" | null | undefined;
+  size?: "default" | "sm" | "lg" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuAction: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
+  asChild?: boolean;
+  showOnHover?: boolean;
+}, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuBadge: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSkeleton: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+  showIcon?: boolean;
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSub: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuSubItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
+declare const SidebarMenuSubButton: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLAnchorElement> & React$1.AnchorHTMLAttributes<HTMLAnchorElement> & {
+  asChild?: boolean;
+  size?: "sm" | "md";
+  isActive?: boolean;
+}, "ref"> & React$1.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+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.d.mts.map

package/dist/src/components/ui/sidebar.mjs

@@ -0,0 +1,377 @@
+"use client";
+import { useIsMobile } from "../../hooks/use-mobile.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { Button } from "./button.mjs";
+import { Input } from "./input.mjs";
+import { Separator } from "./separator.mjs";
+import { Sheet, SheetContent } from "./sheet.mjs";
+import { Skeleton } from "./skeleton.mjs";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PanelLeft } from "lucide-react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/sidebar.tsx
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const SIDEBAR_COOKIE_MAX_AGE = 3600 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SidebarContext = React$1.createContext(null);
+function useSidebar() {
+	const context = React$1.useContext(SidebarContext);
+	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
+	return context;
+}
+const SidebarProvider = React$1.forwardRef(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = React$1.useState(false);
+	const [_open, _setOpen] = React$1.useState(defaultOpen);
+	const open = openProp ?? _open;
+	const setOpen = React$1.useCallback((value) => {
+		const openState = typeof value === "function" ? value(open) : value;
+		if (setOpenProp) setOpenProp(openState);
+		else _setOpen(openState);
+		document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+	}, [setOpenProp, open]);
+	const toggleSidebar = React$1.useCallback(() => {
+		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+	}, [
+		isMobile,
+		setOpen,
+		setOpenMobile
+	]);
+	React$1.useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleSidebar]);
+	const state = open ? "expanded" : "collapsed";
+	const contextValue = React$1.useMemo(() => ({
+		state,
+		open,
+		setOpen,
+		isMobile,
+		openMobile,
+		setOpenMobile,
+		toggleSidebar
+	}), [
+		state,
+		open,
+		setOpen,
+		isMobile,
+		openMobile,
+		setOpenMobile,
+		toggleSidebar
+	]);
+	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			delayDuration: 0,
+			children: /* @__PURE__ */ jsx("div", {
+				style: {
+					"--sidebar-width": SIDEBAR_WIDTH,
+					"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+					...style
+				},
+				className: cn("group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", className),
+				ref,
+				...props,
+				children
+			})
+		})
+	});
+});
+SidebarProvider.displayName = "SidebarProvider";
+const Sidebar = React$1.forwardRef(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
+	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+	if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
+		className: cn("flex h-full w-[var(--sidebar-width)] flex-col bg-sidebar text-sidebar-foreground", className),
+		ref,
+		...props,
+		children
+	});
+	if (isMobile) return /* @__PURE__ */ jsx(Sheet, {
+		open: openMobile,
+		onOpenChange: setOpenMobile,
+		...props,
+		children: /* @__PURE__ */ jsx(SheetContent, {
+			"data-sidebar": "sidebar",
+			"data-mobile": "true",
+			className: "w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+			style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
+			side,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex h-full w-full flex-col",
+				children
+			})
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "group peer hidden text-sidebar-foreground md:block",
+		"data-state": state,
+		"data-collapsible": state === "collapsed" ? collapsible : "",
+		"data-variant": variant,
+		"data-side": side,
+		children: [/* @__PURE__ */ jsx("div", { className: cn("relative h-svh w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]") }), /* @__PURE__ */ jsx("div", {
+			className: cn("fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex", side === "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)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l", className),
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-sidebar": "sidebar",
+				className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
+				children
+			})
+		})]
+	});
+});
+Sidebar.displayName = "Sidebar";
+const SidebarTrigger = React$1.forwardRef(({ className, onClick, ...props }, ref) => {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsxs(Button, {
+		ref,
+		"data-sidebar": "trigger",
+		variant: "ghost",
+		size: "icon",
+		className: cn("h-7 w-7", className),
+		onClick: (event) => {
+			onClick?.(event);
+			toggleSidebar();
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx(PanelLeft, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Toggle Sidebar"
+		})]
+	});
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+const SidebarRail = React$1.forwardRef(({ className, ...props }, ref) => {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		"data-sidebar": "rail",
+		"aria-label": "Toggle Sidebar",
+		tabIndex: -1,
+		onClick: toggleSidebar,
+		title: "Toggle Sidebar",
+		className: cn("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-sidebar-border 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-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
+		...props
+	});
+});
+SidebarRail.displayName = "SidebarRail";
+const SidebarInset = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("main", {
+		ref,
+		className: cn("relative flex min-h-svh flex-1 flex-col bg-background", "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", className),
+		...props
+	});
+});
+SidebarInset.displayName = "SidebarInset";
+const SidebarInput = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Input, {
+		ref,
+		"data-sidebar": "input",
+		className: cn("h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring", className),
+		...props
+	});
+});
+SidebarInput.displayName = "SidebarInput";
+const SidebarHeader = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-sidebar": "header",
+		className: cn("flex flex-col gap-2 p-2", className),
+		...props
+	});
+});
+SidebarHeader.displayName = "SidebarHeader";
+const SidebarFooter = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-sidebar": "footer",
+		className: cn("flex flex-col gap-2 p-2", className),
+		...props
+	});
+});
+SidebarFooter.displayName = "SidebarFooter";
+const SidebarSeparator = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Separator, {
+		ref,
+		"data-sidebar": "separator",
+		className: cn("mx-2 w-auto bg-sidebar-border", className),
+		...props
+	});
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+const SidebarContent = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-sidebar": "content",
+		className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
+		...props
+	});
+});
+SidebarContent.displayName = "SidebarContent";
+const SidebarGroup = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-sidebar": "group",
+		className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+		...props
+	});
+});
+SidebarGroup.displayName = "SidebarGroup";
+const SidebarGroupLabel = React$1.forwardRef(({ className, asChild = false, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		ref,
+		"data-sidebar": "group-label",
+		className: cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] 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", className),
+		...props
+	});
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+const SidebarGroupAction = React$1.forwardRef(({ className, asChild = false, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		ref,
+		"data-sidebar": "group-action",
+		className: cn("absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md:hidden", "group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+const SidebarGroupContent = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-sidebar": "group-content",
+	className: cn("w-full text-sm", className),
+	...props
+}));
+SidebarGroupContent.displayName = "SidebarGroupContent";
+const SidebarMenu = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("ul", {
+	ref,
+	"data-sidebar": "menu",
+	className: cn("flex w-full min-w-0 flex-col gap-1", className),
+	...props
+}));
+SidebarMenu.displayName = "SidebarMenu";
+const SidebarMenuItem = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", {
+	ref,
+	"data-sidebar": "menu-item",
+	className: cn("group/menu-item relative", className),
+	...props
+}));
+SidebarMenuItem.displayName = "SidebarMenuItem";
+const sidebarMenuButtonVariants = cva("peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none 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"
+	}
+});
+const SidebarMenuButton = React$1.forwardRef(({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+	const { isMobile, state } = useSidebar();
+	const button = /* @__PURE__ */ jsx(Comp, {
+		ref,
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		"data-active": isActive,
+		className: cn(sidebarMenuButtonVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+	if (!tooltip) return button;
+	if (typeof tooltip === "string") tooltip = { children: tooltip };
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: button
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "right",
+		align: "center",
+		hidden: state !== "collapsed" || isMobile,
+		...tooltip
+	})] });
+});
+SidebarMenuButton.displayName = "SidebarMenuButton";
+const SidebarMenuAction = React$1.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		ref,
+		"data-sidebar": "menu-action",
+		className: cn("absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md: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", showOnHover && "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-sidebar-accent-foreground md:opacity-0", className),
+		...props
+	});
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+const SidebarMenuBadge = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-sidebar": "menu-badge",
+	className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground", "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", className),
+	...props
+}));
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+const SidebarMenuSkeleton = React$1.forwardRef(({ className, showIcon = false, ...props }, ref) => {
+	const width = React$1.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-sidebar": "menu-skeleton",
+		className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+		...props,
+		children: [showIcon && /* @__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": width }
+		})]
+	});
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+const SidebarMenuSub = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("ul", {
+	ref,
+	"data-sidebar": "menu-sub",
+	className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className),
+	...props
+}));
+SidebarMenuSub.displayName = "SidebarMenuSub";
+const SidebarMenuSubItem = React$1.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("li", {
+	ref,
+	...props
+}));
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+const SidebarMenuSubButton = React$1.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
+		ref,
+		"data-sidebar": "menu-sub-button",
+		"data-size": size,
+		"data-active": isActive,
+		className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+//#endregion
+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.mjs.map

package/dist/src/components/ui/sidebar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.mjs","names":["React"],"sources":["../../../../src/components/ui/sidebar.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { PanelLeft } from \"lucide-react\";\r\nimport * as React from \"react\";\r\n\r\nimport { Button } from \"./button\";\r\nimport { Input } from \"./input\";\r\nimport { Separator } from \"./separator\";\r\nimport { Sheet, SheetContent } from \"./sheet\";\r\nimport { Skeleton } from \"./skeleton\";\r\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"./tooltip\";\r\nimport { useIsMobile } from \"../../hooks/use-mobile\";\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst SIDEBAR_COOKIE_NAME = \"sidebar:state\";\r\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\r\nconst SIDEBAR_WIDTH = \"16rem\";\r\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\r\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\r\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\r\n\r\ntype SidebarContext = {\r\n  state: \"expanded\" | \"collapsed\";\r\n  open: boolean;\r\n  setOpen: (open: boolean) => void;\r\n  openMobile: boolean;\r\n  setOpenMobile: (open: boolean) => void;\r\n  isMobile: boolean;\r\n  toggleSidebar: () => void;\r\n};\r\n\r\nconst SidebarContext = React.createContext<SidebarContext | null>(null);\r\n\r\nfunction useSidebar() {\r\n  const context = React.useContext(SidebarContext);\r\n  if (!context) {\r\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\");\r\n  }\r\n\r\n  return context;\r\n}\r\n\r\nconst SidebarProvider = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\"> & {\r\n    defaultOpen?: boolean;\r\n    open?: boolean;\r\n    onOpenChange?: (open: boolean) => void;\r\n  }\r\n>(\r\n  (\r\n    {\r\n      defaultOpen = true,\r\n      open: openProp,\r\n      onOpenChange: setOpenProp,\r\n      className,\r\n      style,\r\n      children,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const isMobile = useIsMobile();\r\n    const [openMobile, setOpenMobile] = React.useState(false);\r\n\r\n    // This is the internal state of the sidebar.\r\n    // We use openProp and setOpenProp for control from outside the component.\r\n    const [_open, _setOpen] = React.useState(defaultOpen);\r\n    const open = openProp ?? _open;\r\n    const setOpen = React.useCallback(\r\n      (value: boolean | ((value: boolean) => boolean)) => {\r\n        const openState = typeof value === \"function\" ? value(open) : value;\r\n        if (setOpenProp) {\r\n          setOpenProp(openState);\r\n        } else {\r\n          _setOpen(openState);\r\n        }\r\n\r\n        // This sets the cookie to keep the sidebar state.\r\n        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\r\n      },\r\n      [setOpenProp, open]\r\n    );\r\n\r\n    // Helper to toggle the sidebar.\r\n    const toggleSidebar = React.useCallback(() => {\r\n      return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\r\n    }, [isMobile, setOpen, setOpenMobile]);\r\n\r\n    // Adds a keyboard shortcut to toggle the sidebar.\r\n    React.useEffect(() => {\r\n      const handleKeyDown = (event: KeyboardEvent) => {\r\n        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\r\n          event.preventDefault();\r\n          toggleSidebar();\r\n        }\r\n      };\r\n\r\n      window.addEventListener(\"keydown\", handleKeyDown);\r\n      return () => window.removeEventListener(\"keydown\", handleKeyDown);\r\n    }, [toggleSidebar]);\r\n\r\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\r\n    // This makes it easier to style the sidebar with Tailwind classes.\r\n    const state = open ? \"expanded\" : \"collapsed\";\r\n\r\n    const contextValue = React.useMemo<SidebarContext>(\r\n      () => ({\r\n        state,\r\n        open,\r\n        setOpen,\r\n        isMobile,\r\n        openMobile,\r\n        setOpenMobile,\r\n        toggleSidebar,\r\n      }),\r\n      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\r\n    );\r\n\r\n    return (\r\n      <SidebarContext.Provider value={contextValue}>\r\n        <TooltipProvider delayDuration={0}>\r\n          <div\r\n            style={\r\n              {\r\n                \"--sidebar-width\": SIDEBAR_WIDTH,\r\n                \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\r\n                ...style,\r\n              } as React.CSSProperties\r\n            }\r\n            className={cn(\r\n              \"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar\",\r\n              className\r\n            )}\r\n            ref={ref}\r\n            {...props}\r\n          >\r\n            {children}\r\n          </div>\r\n        </TooltipProvider>\r\n      </SidebarContext.Provider>\r\n    );\r\n  }\r\n);\r\nSidebarProvider.displayName = \"SidebarProvider\";\r\n\r\nconst Sidebar = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\"> & {\r\n    side?: \"left\" | \"right\";\r\n    variant?: \"sidebar\" | \"floating\" | \"inset\";\r\n    collapsible?: \"offcanvas\" | \"icon\" | \"none\";\r\n  }\r\n>(\r\n  (\r\n    {\r\n      side = \"left\",\r\n      variant = \"sidebar\",\r\n      collapsible = \"offcanvas\",\r\n      className,\r\n      children,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\r\n\r\n    if (collapsible === \"none\") {\r\n      return (\r\n        <div\r\n          className={cn(\r\n            \"flex h-full w-[var(--sidebar-width)] flex-col bg-sidebar text-sidebar-foreground\",\r\n            className\r\n          )}\r\n          ref={ref}\r\n          {...props}\r\n        >\r\n          {children}\r\n        </div>\r\n      );\r\n    }\r\n\r\n    if (isMobile) {\r\n      return (\r\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\r\n          <SheetContent\r\n            data-sidebar=\"sidebar\"\r\n            data-mobile=\"true\"\r\n            className=\"w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\r\n            style={\r\n              {\r\n                \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\r\n              } as React.CSSProperties\r\n            }\r\n            side={side}\r\n          >\r\n            <div className=\"flex h-full w-full flex-col\">{children}</div>\r\n          </SheetContent>\r\n        </Sheet>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className=\"group peer hidden text-sidebar-foreground md:block\"\r\n        data-state={state}\r\n        data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\r\n        data-variant={variant}\r\n        data-side={side}\r\n      >\r\n        {/* This is what handles the sidebar gap on desktop */}\r\n        <div\r\n          className={cn(\r\n            \"relative h-svh w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear\",\r\n            \"group-data-[collapsible=offcanvas]:w-0\",\r\n            \"group-data-[side=right]:rotate-180\",\r\n            variant === \"floating\" || variant === \"inset\"\r\n              ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\r\n              : \"group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]\"\r\n          )}\r\n        />\r\n        <div\r\n          className={cn(\r\n            \"fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex\",\r\n            side === \"left\"\r\n              ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\r\n              : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\r\n            // Adjust the padding for floating and inset variants.\r\n            variant === \"floating\" || variant === \"inset\"\r\n              ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\r\n              : \"group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l\",\r\n            className\r\n          )}\r\n          {...props}\r\n        >\r\n          <div\r\n            data-sidebar=\"sidebar\"\r\n            className=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\r\n          >\r\n            {children}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n);\r\nSidebar.displayName = \"Sidebar\";\r\n\r\nconst SidebarTrigger = React.forwardRef<\r\n  React.ElementRef<typeof Button>,\r\n  React.ComponentProps<typeof Button>\r\n>(({ className, onClick, ...props }, ref) => {\r\n  const { toggleSidebar } = useSidebar();\r\n\r\n  return (\r\n    <Button\r\n      ref={ref}\r\n      data-sidebar=\"trigger\"\r\n      variant=\"ghost\"\r\n      size=\"icon\"\r\n      className={cn(\"h-7 w-7\", className)}\r\n      onClick={(event) => {\r\n        onClick?.(event);\r\n        toggleSidebar();\r\n      }}\r\n      {...props}\r\n    >\r\n      <PanelLeft />\r\n      <span className=\"sr-only\">Toggle Sidebar</span>\r\n    </Button>\r\n  );\r\n});\r\nSidebarTrigger.displayName = \"SidebarTrigger\";\r\n\r\nconst SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<\"button\">>(\r\n  ({ className, ...props }, ref) => {\r\n    const { toggleSidebar } = useSidebar();\r\n\r\n    return (\r\n      <button\r\n        ref={ref}\r\n        data-sidebar=\"rail\"\r\n        aria-label=\"Toggle Sidebar\"\r\n        tabIndex={-1}\r\n        onClick={toggleSidebar}\r\n        title=\"Toggle Sidebar\"\r\n        className={cn(\r\n          \"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-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\r\n          \"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\r\n          \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\r\n          \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar\",\r\n          \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\r\n          \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    );\r\n  }\r\n);\r\nSidebarRail.displayName = \"SidebarRail\";\r\n\r\nconst SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<\"main\">>(\r\n  ({ className, ...props }, ref) => {\r\n    return (\r\n      <main\r\n        ref={ref}\r\n        className={cn(\r\n          \"relative flex min-h-svh flex-1 flex-col bg-background\",\r\n          \"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\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    );\r\n  }\r\n);\r\nSidebarInset.displayName = \"SidebarInset\";\r\n\r\nconst SidebarInput = React.forwardRef<\r\n  React.ElementRef<typeof Input>,\r\n  React.ComponentProps<typeof Input>\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <Input\r\n      ref={ref}\r\n      data-sidebar=\"input\"\r\n      className={cn(\r\n        \"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nSidebarInput.displayName = \"SidebarInput\";\r\n\r\nconst SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\r\n  ({ className, ...props }, ref) => {\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        data-sidebar=\"header\"\r\n        className={cn(\"flex flex-col gap-2 p-2\", className)}\r\n        {...props}\r\n      />\r\n    );\r\n  }\r\n);\r\nSidebarHeader.displayName = \"SidebarHeader\";\r\n\r\nconst SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\r\n  ({ className, ...props }, ref) => {\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        data-sidebar=\"footer\"\r\n        className={cn(\"flex flex-col gap-2 p-2\", className)}\r\n        {...props}\r\n      />\r\n    );\r\n  }\r\n);\r\nSidebarFooter.displayName = \"SidebarFooter\";\r\n\r\nconst SidebarSeparator = React.forwardRef<\r\n  React.ElementRef<typeof Separator>,\r\n  React.ComponentProps<typeof Separator>\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <Separator\r\n      ref={ref}\r\n      data-sidebar=\"separator\"\r\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nSidebarSeparator.displayName = \"SidebarSeparator\";\r\n\r\nconst SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\r\n  ({ className, ...props }, ref) => {\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        data-sidebar=\"content\"\r\n        className={cn(\r\n          \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    );\r\n  }\r\n);\r\nSidebarContent.displayName = \"SidebarContent\";\r\n\r\nconst SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\r\n  ({ className, ...props }, ref) => {\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        data-sidebar=\"group\"\r\n        className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\r\n        {...props}\r\n      />\r\n    );\r\n  }\r\n);\r\nSidebarGroup.displayName = \"SidebarGroup\";\r\n\r\nconst SidebarGroupLabel = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\"> & { asChild?: boolean }\r\n>(({ className, asChild = false, ...props }, ref) => {\r\n  const Comp = asChild ? Slot : \"div\";\r\n\r\n  return (\r\n    <Comp\r\n      ref={ref}\r\n      data-sidebar=\"group-label\"\r\n      className={cn(\r\n        \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\r\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\";\r\n\r\nconst SidebarGroupAction = React.forwardRef<\r\n  HTMLButtonElement,\r\n  React.ComponentProps<\"button\"> & { asChild?: boolean }\r\n>(({ className, asChild = false, ...props }, ref) => {\r\n  const Comp = asChild ? Slot : \"button\";\r\n\r\n  return (\r\n    <Comp\r\n      ref={ref}\r\n      data-sidebar=\"group-action\"\r\n      className={cn(\r\n        \"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\r\n        // Increases the hit area of the button on mobile.\r\n        \"after:absolute after:-inset-2 after:md:hidden\",\r\n        \"group-data-[collapsible=icon]:hidden\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nSidebarGroupAction.displayName = \"SidebarGroupAction\";\r\n\r\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\r\n  ({ className, ...props }, ref) => (\r\n    <div\r\n      ref={ref}\r\n      data-sidebar=\"group-content\"\r\n      className={cn(\"w-full text-sm\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n);\r\nSidebarGroupContent.displayName = \"SidebarGroupContent\";\r\n\r\nconst SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<\"ul\">>(\r\n  ({ className, ...props }, ref) => (\r\n    <ul\r\n      ref={ref}\r\n      data-sidebar=\"menu\"\r\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n);\r\nSidebarMenu.displayName = \"SidebarMenu\";\r\n\r\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<\"li\">>(\r\n  ({ className, ...props }, ref) => (\r\n    <li\r\n      ref={ref}\r\n      data-sidebar=\"menu-item\"\r\n      className={cn(\"group/menu-item relative\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n);\r\nSidebarMenuItem.displayName = \"SidebarMenuItem\";\r\n\r\nconst sidebarMenuButtonVariants = cva(\r\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none 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\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\r\n        outline:\r\n          \"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))]\",\r\n      },\r\n      size: {\r\n        default: \"h-8 text-sm\",\r\n        sm: \"h-7 text-xs\",\r\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:!p-0\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\",\r\n    },\r\n  }\r\n);\r\n\r\nconst SidebarMenuButton = React.forwardRef<\r\n  HTMLButtonElement,\r\n  React.ComponentProps<\"button\"> & {\r\n    asChild?: boolean;\r\n    isActive?: boolean;\r\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>;\r\n  } & VariantProps<typeof sidebarMenuButtonVariants>\r\n>(\r\n  (\r\n    {\r\n      asChild = false,\r\n      isActive = false,\r\n      variant = \"default\",\r\n      size = \"default\",\r\n      tooltip,\r\n      className,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const Comp = asChild ? Slot : \"button\";\r\n    const { isMobile, state } = useSidebar();\r\n\r\n    const button = (\r\n      <Comp\r\n        ref={ref}\r\n        data-sidebar=\"menu-button\"\r\n        data-size={size}\r\n        data-active={isActive}\r\n        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\r\n        {...props}\r\n      />\r\n    );\r\n\r\n    if (!tooltip) {\r\n      return button;\r\n    }\r\n\r\n    if (typeof tooltip === \"string\") {\r\n      tooltip = {\r\n        children: tooltip,\r\n      };\r\n    }\r\n\r\n    return (\r\n      <Tooltip>\r\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\r\n        <TooltipContent\r\n          side=\"right\"\r\n          align=\"center\"\r\n          hidden={state !== \"collapsed\" || isMobile}\r\n          {...tooltip}\r\n        />\r\n      </Tooltip>\r\n    );\r\n  }\r\n);\r\nSidebarMenuButton.displayName = \"SidebarMenuButton\";\r\n\r\nconst SidebarMenuAction = React.forwardRef<\r\n  HTMLButtonElement,\r\n  React.ComponentProps<\"button\"> & {\r\n    asChild?: boolean;\r\n    showOnHover?: boolean;\r\n  }\r\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\r\n  const Comp = asChild ? Slot : \"button\";\r\n\r\n  return (\r\n    <Comp\r\n      ref={ref}\r\n      data-sidebar=\"menu-action\"\r\n      className={cn(\r\n        \"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0\",\r\n        // Increases the hit area of the button on mobile.\r\n        \"after:absolute after:-inset-2 after:md:hidden\",\r\n        \"peer-data-[size=sm]/menu-button:top-1\",\r\n        \"peer-data-[size=default]/menu-button:top-1.5\",\r\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\r\n        \"group-data-[collapsible=icon]:hidden\",\r\n        showOnHover &&\r\n          \"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-sidebar-accent-foreground md:opacity-0\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nSidebarMenuAction.displayName = \"SidebarMenuAction\";\r\n\r\nconst SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\r\n  ({ className, ...props }, ref) => (\r\n    <div\r\n      ref={ref}\r\n      data-sidebar=\"menu-badge\"\r\n      className={cn(\r\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground\",\r\n        \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\r\n        \"peer-data-[size=sm]/menu-button:top-1\",\r\n        \"peer-data-[size=default]/menu-button:top-1.5\",\r\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\r\n        \"group-data-[collapsible=icon]:hidden\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n);\r\nSidebarMenuBadge.displayName = \"SidebarMenuBadge\";\r\n\r\nconst SidebarMenuSkeleton = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\"> & {\r\n    showIcon?: boolean;\r\n  }\r\n>(({ className, showIcon = false, ...props }, ref) => {\r\n  // Random width between 50 to 90%.\r\n  const width = React.useMemo(() => {\r\n    return `${Math.floor(Math.random() * 40) + 50}%`;\r\n  }, []);\r\n\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      data-sidebar=\"menu-skeleton\"\r\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\r\n      {...props}\r\n    >\r\n      {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\r\n      <Skeleton\r\n        className=\"h-4 max-w-[--skeleton-width] flex-1\"\r\n        data-sidebar=\"menu-skeleton-text\"\r\n        style={\r\n          {\r\n            \"--skeleton-width\": width,\r\n          } as React.CSSProperties\r\n        }\r\n      />\r\n    </div>\r\n  );\r\n});\r\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\";\r\n\r\nconst SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<\"ul\">>(\r\n  ({ className, ...props }, ref) => (\r\n    <ul\r\n      ref={ref}\r\n      data-sidebar=\"menu-sub\"\r\n      className={cn(\r\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5\",\r\n        \"group-data-[collapsible=icon]:hidden\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n);\r\nSidebarMenuSub.displayName = \"SidebarMenuSub\";\r\n\r\nconst SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<\"li\">>(\r\n  ({ ...props }, ref) => <li ref={ref} {...props} />\r\n);\r\nSidebarMenuSubItem.displayName = \"SidebarMenuSubItem\";\r\n\r\nconst SidebarMenuSubButton = React.forwardRef<\r\n  HTMLAnchorElement,\r\n  React.ComponentProps<\"a\"> & {\r\n    asChild?: boolean;\r\n    size?: \"sm\" | \"md\";\r\n    isActive?: boolean;\r\n  }\r\n>(({ asChild = false, size = \"md\", isActive, className, ...props }, ref) => {\r\n  const Comp = asChild ? Slot : \"a\";\r\n\r\n  return (\r\n    <Comp\r\n      ref={ref}\r\n      data-sidebar=\"menu-sub-button\"\r\n      data-size={size}\r\n      data-active={isActive}\r\n      className={cn(\r\n        \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\r\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\r\n        size === \"sm\" && \"text-xs\",\r\n        size === \"md\" && \"text-sm\",\r\n        \"group-data-[collapsible=icon]:hidden\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nSidebarMenuSubButton.displayName = \"SidebarMenuSubButton\";\r\n\r\nexport {\r\n  Sidebar,\r\n  SidebarContent,\r\n  SidebarFooter,\r\n  SidebarGroup,\r\n  SidebarGroupAction,\r\n  SidebarGroupContent,\r\n  SidebarGroupLabel,\r\n  SidebarHeader,\r\n  SidebarInput,\r\n  SidebarInset,\r\n  SidebarMenu,\r\n  SidebarMenuAction,\r\n  SidebarMenuBadge,\r\n  SidebarMenuButton,\r\n  SidebarMenuItem,\r\n  SidebarMenuSkeleton,\r\n  SidebarMenuSub,\r\n  SidebarMenuSubButton,\r\n  SidebarMenuSubItem,\r\n  SidebarProvider,\r\n  SidebarRail,\r\n  SidebarSeparator,\r\n  SidebarTrigger,\r\n  useSidebar,\r\n};\r\n"],"mappings":"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"}

package/dist/src/components/ui/skeleton.d.mts

@@ -0,0 +1,10 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ui/skeleton.d.ts
+declare function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Skeleton };
+//# sourceMappingURL=skeleton.d.mts.map