@kuzenbo/core 0.0.2 → 0.0.4

package/dist/ui/sidebar.js

@@ -0,0 +1,540 @@
+"use client";
+
+import { a as useComponentSize } from "../size-provider-18EvJgDT.js";
+import { Button } from "./button.js";
+import { Separator } from "./separator.js";
+import { Input } from "./input.js";
+import { Skeleton } from "./skeleton.js";
+import { i as SheetHeader, n as SheetTitle, o as SheetDescription, s as SheetContent } from "../sheet-trigger-D7neoTF5.js";
+import { Sheet } from "./sheet.js";
+import { r as TooltipContent, t as TooltipTrigger } from "../tooltip-trigger-qXw-_nbh.js";
+import { Tooltip } from "./tooltip.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, tv } from "tailwind-variants";
+import { SidebarLeftIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { useIsMobile } from "@kuzenbo/hooks/use-mobile";
+
+//#region src/ui/sidebar/constants.ts
+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";
+
+//#endregion
+//#region src/ui/sidebar/sidebar-content.tsx
+const SidebarContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
+	"data-sidebar": "content",
+	"data-slot": "sidebar-content",
+	...props
+});
+
+//#endregion
+//#region src/ui/sidebar/sidebar-footer.tsx
+const SidebarFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col gap-2 p-2", className),
+	"data-sidebar": "footer",
+	"data-slot": "sidebar-footer",
+	...props
+});
+
+//#endregion
+//#region src/ui/sidebar/sidebar-group.tsx
+const SidebarGroup = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+	"data-sidebar": "group",
+	"data-slot": "sidebar-group",
+	...props
+});
+
+//#endregion
+//#region src/ui/sidebar/sidebar-group-action.tsx
+const SidebarGroupAction = ({ className, render, ...props }) => useRender({
+	defaultTagName: "button",
+	props: mergeProps({ className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
+	render,
+	state: {
+		slot: "sidebar-group-action",
+		sidebar: "group-action"
+	}
+});
+
+//#endregion
+//#region src/ui/sidebar/sidebar-group-content.tsx
+const SidebarGroupContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("w-full text-sm", className),
+	"data-sidebar": "group-content",
+	"data-slot": "sidebar-group-content",
+	...props
+});
+
+//#endregion
+//#region src/ui/sidebar/sidebar-group-label.tsx
+const SidebarGroupLabel = ({ className, render, ...props }) => useRender({
+	defaultTagName: "div",
+	props: mergeProps({ className: cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
+	render,
+	state: {
+		slot: "sidebar-group-label",
+		sidebar: "group-label"
+	}
+});
+
+//#endregion
+//#region src/ui/sidebar/sidebar-header.tsx
+const SidebarHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col gap-2 p-2", className),
+	"data-sidebar": "header",
+	"data-slot": "sidebar-header",
+	...props
+});
+
+//#endregion
+//#region src/ui/sidebar/sidebar-input.tsx
+const SidebarInput = ({ className, size = "sm", ...props }) => /* @__PURE__ */ jsx(Input, {
+	className: cn("w-full bg-background shadow-none", className),
+	"data-sidebar": "input",
+	size,
+	"data-slot": "sidebar-input",
+	...props
+});
+
+//#endregion
+//#region src/ui/sidebar/sidebar-inset.tsx
+const SidebarInset = ({ className, ...props }) => /* @__PURE__ */ jsx("main", {
+	className: cn("relative flex w-full min-w-0 flex-1 flex-col bg-background 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", className),
+	"data-slot": "sidebar-inset",
+	...props
+});
+
+//#endregion
+//#region src/ui/sidebar/sidebar-menu-context.tsx
+const SidebarMenuContext = createContext({ size: "md" });
+
+//#endregion
+//#region src/ui/sidebar/sidebar-menu.tsx
+const SidebarMenu = ({ className, size: providedSize, ...props }) => {
+	const size = useComponentSize(providedSize);
+	return /* @__PURE__ */ jsx(SidebarMenuContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ jsx("ul", {
+			className: cn("flex w-full min-w-0 flex-col gap-1", className),
+			"data-sidebar": "menu",
+			"data-size": size,
+			"data-slot": "sidebar-menu",
+			...props
+		})
+	});
+};
+
+//#endregion
+//#region src/ui/sidebar/sidebar-menu-action.tsx
+const sidebarMenuActionVariants = tv({
+	base: "absolute right-1 flex aspect-square items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:shrink-0",
+	variants: { size: {
+		xs: "top-0.5 w-4 [&>svg:not([class*='size-'])]:size-3",
+		sm: "top-1 w-5 [&>svg:not([class*='size-'])]:size-3.5",
+		md: "top-1.5 w-5 [&>svg:not([class*='size-'])]:size-4",
+		lg: "top-2 w-6 [&>svg:not([class*='size-'])]:size-4",
+		xl: "top-2.5 w-7 [&>svg:not([class*='size-'])]:size-5"
+	} },
+	defaultVariants: { size: "md" }
+});
+const SidebarMenuAction = ({ className, render, size, showOnHover = false, ...props }) => {
+	const { size: menuSize } = useContext(SidebarMenuContext);
+	const resolvedSize = size ?? menuSize ?? "md";
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps({ className: cn(sidebarMenuActionVariants({ size: resolvedSize }), "peer-data-[size=xs]/menu-button:top-0.5 peer-data-[size=sm]/menu-button:top-1 peer-data-[size=md]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2 peer-data-[size=xl]/menu-button:top-2.5", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground data-open:opacity-100 md:opacity-0", className) }, props),
+		render,
+		state: {
+			slot: "sidebar-menu-action",
+			sidebar: "menu-action",
+			size: resolvedSize
+		}
+	});
+};
+
+//#endregion
+//#region src/ui/sidebar/sidebar-menu-badge.tsx
+const sidebarMenuBadgeVariants = tv({
+	base: "pointer-events-none absolute right-1 flex items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground",
+	variants: { size: {
+		xs: "top-0.5 h-4 min-w-4 text-[10px]",
+		sm: "top-1 h-5 min-w-5 text-[11px]",
+		md: "top-1.5 h-5 min-w-5 text-xs",
+		lg: "top-2 h-6 min-w-6 text-xs",
+		xl: "top-2.5 h-7 min-w-7 text-sm"
+	} },
+	defaultVariants: { size: "md" }
+});
+const SidebarMenuBadge = ({ className, size, ...props }) => {
+	const { size: menuSize } = useContext(SidebarMenuContext);
+	const resolvedSize = size ?? menuSize ?? "md";
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(sidebarMenuBadgeVariants({ size: resolvedSize }), className),
+		"data-sidebar": "menu-badge",
+		"data-size": resolvedSize,
+		"data-slot": "sidebar-menu-badge",
+		...props
+	});
+};
+
+//#endregion
+//#region src/ui/sidebar/use-sidebar.tsx
+const SidebarContext = createContext(null);
+const useSidebar = () => {
+	const context = useContext(SidebarContext);
+	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
+	return context;
+};
+
+//#endregion
+//#region src/ui/sidebar/sidebar-menu-button.tsx
+const sidebarMenuButtonVariants = tv({
+	base: "peer/menu-button group/menu-button flex w-full cursor-pointer items-center gap-2 overflow-hidden rounded-md text-left ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! 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 data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground [&_svg]:shrink-0 [&>span:last-child]:truncate",
+	variants: {
+		variant: {
+			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+			outline: "bg-background shadow-[0_0_0_1px_hsl(var(--kb-sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--kb-sidebar-accent))]"
+		},
+		size: {
+			xs: "h-6 px-1.5 py-1 text-xs [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-7 px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+			md: "h-8 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4",
+			lg: "h-10 px-2.5 py-2 text-sm [&_svg:not([class*='size-'])]:size-4",
+			xl: "h-11 px-3 py-2 text-base [&_svg:not([class*='size-'])]:size-5"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+});
+const SidebarMenuButton = ({ render, isActive = false, variant = "default", size, tooltip, className, ...props }) => {
+	const { size: menuSize } = useContext(SidebarMenuContext);
+	const resolvedSize = size ?? menuSize ?? "md";
+	const { isMobile, state } = useSidebar();
+	const comp = useRender({
+		defaultTagName: "button",
+		props: mergeProps({ className: cn(sidebarMenuButtonVariants({
+			size: resolvedSize,
+			variant
+		}), className) }, props),
+		render: tooltip ? TooltipTrigger : render,
+		state: {
+			slot: "sidebar-menu-button",
+			sidebar: "menu-button",
+			size: resolvedSize,
+			active: isActive
+		}
+	});
+	if (!tooltip) return comp;
+	if (typeof tooltip === "string") tooltip = { children: tooltip };
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [comp, /* @__PURE__ */ jsx(TooltipContent, {
+		align: "center",
+		hidden: state !== "collapsed" || isMobile,
+		side: "right",
+		...tooltip
+	})] });
+};
+
+//#endregion
+//#region src/ui/sidebar/sidebar-menu-item.tsx
+const SidebarMenuItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
+	className: cn("group/menu-item relative", className),
+	"data-sidebar": "menu-item",
+	"data-slot": "sidebar-menu-item",
+	...props
+});
+
+//#endregion
+//#region src/ui/sidebar/sidebar-menu-skeleton.tsx
+const sidebarMenuSkeletonVariants = tv({
+	base: "flex items-center gap-2 rounded-md",
+	variants: { size: {
+		xs: "h-6 px-1.5",
+		sm: "h-7 px-2",
+		md: "h-8 px-2",
+		lg: "h-10 px-2.5",
+		xl: "h-11 px-3"
+	} },
+	defaultVariants: { size: "md" }
+});
+const SidebarMenuSkeleton = ({ className, size, showIcon = false, ...props }) => {
+	const { size: menuSize } = useContext(SidebarMenuContext);
+	const resolvedSize = size ?? menuSize ?? "md";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(sidebarMenuSkeletonVariants({ size: resolvedSize }), className),
+		"data-sidebar": "menu-skeleton",
+		"data-size": resolvedSize,
+		"data-slot": "sidebar-menu-skeleton",
+		...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": "100%" }
+		})]
+	});
+};
+
+//#endregion
+//#region src/ui/sidebar/sidebar-menu-sub.tsx
+const sidebarMenuSubVariants = tv({
+	base: "flex min-w-0 translate-x-px flex-col border-l border-sidebar-border group-data-[collapsible=icon]:hidden",
+	variants: { size: {
+		xs: "mx-2.5 gap-0.5 px-1.5 py-0.5",
+		sm: "mx-3 gap-1 px-2 py-0.5",
+		md: "mx-3.5 gap-1 px-2.5 py-0.5",
+		lg: "mx-4 gap-1 px-3 py-1",
+		xl: "mx-4.5 gap-1.5 px-3.5 py-1"
+	} },
+	defaultVariants: { size: "md" }
+});
+const SidebarMenuSub = ({ className, size, ...props }) => {
+	const { size: menuSize } = useContext(SidebarMenuContext);
+	const resolvedSize = size ?? menuSize ?? "md";
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn(sidebarMenuSubVariants({ size: resolvedSize }), className),
+		"data-sidebar": "menu-sub",
+		"data-size": resolvedSize,
+		"data-slot": "sidebar-menu-sub",
+		...props
+	});
+};
+
+//#endregion
+//#region src/ui/sidebar/sidebar-menu-sub-button.tsx
+const sidebarMenuSubButtonVariants = tv({
+	base: "flex min-w-0 -translate-x-px cursor-pointer items-center overflow-hidden rounded-md text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden 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 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+	variants: { size: {
+		xs: "h-6 gap-1.5 px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3",
+		sm: "h-7 gap-2 px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5",
+		md: "h-8 gap-2 px-2 text-sm [&>svg:not([class*='size-'])]:size-4",
+		lg: "h-9 gap-2.5 px-2.5 text-sm [&>svg:not([class*='size-'])]:size-4",
+		xl: "h-10 gap-2.5 px-3 text-base [&>svg:not([class*='size-'])]:size-5"
+	} },
+	defaultVariants: { size: "md" }
+});
+const SidebarMenuSubButton = ({ render, size, isActive = false, className, ...props }) => {
+	const { size: menuSize } = useContext(SidebarMenuContext);
+	const resolvedSize = size ?? menuSize ?? "md";
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps({ className: cn(sidebarMenuSubButtonVariants({ size: resolvedSize }), className) }, props),
+		render,
+		state: {
+			slot: "sidebar-menu-sub-button",
+			sidebar: "menu-sub-button",
+			size: resolvedSize,
+			active: isActive
+		}
+	});
+};
+
+//#endregion
+//#region src/ui/sidebar/sidebar-menu-sub-item.tsx
+const SidebarMenuSubItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
+	className: cn("group/menu-sub-item relative", className),
+	"data-sidebar": "menu-sub-item",
+	"data-slot": "sidebar-menu-sub-item",
+	...props
+});
+
+//#endregion
+//#region src/ui/sidebar/sidebar-provider.tsx
+const SidebarProvider = ({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) => {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = useState(false);
+	const [_open, _setOpen] = useState(defaultOpen);
+	const open = openProp ?? _open;
+	const setOpen = 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 = useCallback(() => isMobile ? setOpenMobile((prev) => !prev) : setOpen((prev) => !prev), [isMobile, setOpen]);
+	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 = useMemo(() => ({
+		state,
+		open,
+		setOpen,
+		isMobile,
+		openMobile,
+		setOpenMobile,
+		toggleSidebar
+	}), [
+		state,
+		open,
+		setOpen,
+		isMobile,
+		openMobile,
+		toggleSidebar
+	]);
+	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className),
+			"data-slot": "sidebar-wrapper",
+			style: {
+				"--sidebar-width": SIDEBAR_WIDTH,
+				"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+				...style
+			},
+			...props,
+			children
+		})
+	});
+};
+
+//#endregion
+//#region src/ui/sidebar/sidebar-rail.tsx
+const SidebarRail = ({ className, ...props }) => {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Toggle Sidebar",
+		className: cn("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] hover:after:bg-sidebar-border 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", "group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full hover:group-data-[collapsible=offExamples]:bg-sidebar", "[[data-side=left][data-collapsible=offExamples]_&]:-right-2", "[[data-side=right][data-collapsible=offExamples]_&]:-left-2", className),
+		"data-sidebar": "rail",
+		"data-slot": "sidebar-rail",
+		onClick: toggleSidebar,
+		tabIndex: -1,
+		title: "Toggle Sidebar",
+		...props
+	});
+};
+
+//#endregion
+//#region src/ui/sidebar/sidebar-separator.tsx
+const SidebarSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(Separator, {
+	className: cn("w-auto bg-sidebar-border", className),
+	"data-sidebar": "separator",
+	"data-slot": "sidebar-separator",
+	...props
+});
+
+//#endregion
+//#region src/ui/sidebar/sidebar-trigger.tsx
+const SidebarTrigger = ({ className, onClick, ...props }) => {
+	const { toggleSidebar } = useSidebar();
+	const handleClick = useCallback((event) => {
+		onClick?.(event);
+		toggleSidebar();
+	}, [onClick, toggleSidebar]);
+	return /* @__PURE__ */ jsxs(Button, {
+		className: cn(className),
+		"data-sidebar": "trigger",
+		"data-slot": "sidebar-trigger",
+		onClick: handleClick,
+		size: "icon-sm",
+		variant: "ghost",
+		...props,
+		children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
+			icon: SidebarLeftIcon,
+			strokeWidth: 2
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Toggle Sidebar"
+		})]
+	});
+};
+
+//#endregion
+//#region src/ui/sidebar/sidebar.tsx
+const Sidebar = ({ side = "left", variant = "sidebar", collapsible = "offExamples", className, children, ...props }) => {
+	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+	if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
+		className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className),
+		"data-slot": "sidebar",
+		...props,
+		children
+	});
+	if (isMobile) return /* @__PURE__ */ jsx(Sheet, {
+		onOpenChange: setOpenMobile,
+		open: openMobile,
+		...props,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+			"data-mobile": "true",
+			"data-sidebar": "sidebar",
+			"data-slot": "sidebar",
+			side,
+			style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
+			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
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group peer hidden text-sidebar-foreground md:block",
+		"data-collapsible": state === "collapsed" ? collapsible : "",
+		"data-side": side,
+		"data-slot": "sidebar",
+		"data-state": state,
+		"data-variant": variant,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offExamples]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"),
+			"data-slot": "sidebar-gap"
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", side === "left" ? "left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "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", className),
+			"data-slot": "sidebar-container",
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border",
+				"data-sidebar": "sidebar",
+				"data-slot": "sidebar-inner",
+				children
+			})
+		})]
+	});
+};
+Sidebar.Content = SidebarContent;
+Sidebar.Footer = SidebarFooter;
+Sidebar.Group = SidebarGroup;
+Sidebar.GroupAction = SidebarGroupAction;
+Sidebar.GroupContent = SidebarGroupContent;
+Sidebar.GroupLabel = SidebarGroupLabel;
+Sidebar.Header = SidebarHeader;
+Sidebar.Input = SidebarInput;
+Sidebar.Inset = SidebarInset;
+Sidebar.Menu = SidebarMenu;
+Sidebar.MenuAction = SidebarMenuAction;
+Sidebar.MenuBadge = SidebarMenuBadge;
+Sidebar.MenuButton = SidebarMenuButton;
+Sidebar.MenuItem = SidebarMenuItem;
+Sidebar.MenuSkeleton = SidebarMenuSkeleton;
+Sidebar.MenuSub = SidebarMenuSub;
+Sidebar.MenuSubButton = SidebarMenuSubButton;
+Sidebar.MenuSubItem = SidebarMenuSubItem;
+Sidebar.Provider = SidebarProvider;
+Sidebar.Rail = SidebarRail;
+Sidebar.Separator = SidebarSeparator;
+Sidebar.Trigger = SidebarTrigger;
+
+//#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.js.map

package/dist/ui/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/ui/sidebar/constants.ts","../../src/ui/sidebar/sidebar-content.tsx","../../src/ui/sidebar/sidebar-footer.tsx","../../src/ui/sidebar/sidebar-group.tsx","../../src/ui/sidebar/sidebar-group-action.tsx","../../src/ui/sidebar/sidebar-group-content.tsx","../../src/ui/sidebar/sidebar-group-label.tsx","../../src/ui/sidebar/sidebar-header.tsx","../../src/ui/sidebar/sidebar-input.tsx","../../src/ui/sidebar/sidebar-inset.tsx","../../src/ui/sidebar/sidebar-menu-context.tsx","../../src/ui/sidebar/sidebar-menu.tsx","../../src/ui/sidebar/sidebar-menu-action.tsx","../../src/ui/sidebar/sidebar-menu-badge.tsx","../../src/ui/sidebar/use-sidebar.tsx","../../src/ui/sidebar/sidebar-menu-button.tsx","../../src/ui/sidebar/sidebar-menu-item.tsx","../../src/ui/sidebar/sidebar-menu-skeleton.tsx","../../src/ui/sidebar/sidebar-menu-sub.tsx","../../src/ui/sidebar/sidebar-menu-sub-button.tsx","../../src/ui/sidebar/sidebar-menu-sub-item.tsx","../../src/ui/sidebar/sidebar-provider.tsx","../../src/ui/sidebar/sidebar-rail.tsx","../../src/ui/sidebar/sidebar-separator.tsx","../../src/ui/sidebar/sidebar-trigger.tsx","../../src/ui/sidebar/sidebar.tsx"],"sourcesContent":["export const SIDEBAR_COOKIE_NAME = \"sidebar_state\";\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nexport const SIDEBAR_WIDTH = \"16rem\";\nexport const SIDEBAR_WIDTH_MOBILE = \"18rem\";\nexport const SIDEBAR_WIDTH_ICON = \"3rem\";\nexport const SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type SidebarContentProps = ComponentProps<\"div\">;\n\nconst SidebarContent = ({ className, ...props }: SidebarContentProps) => (\n  <div\n    className={cn(\n      \"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n      className\n    )}\n    data-sidebar=\"content\"\n    data-slot=\"sidebar-content\"\n    {...props}\n  />\n);\n\nexport { SidebarContent };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type SidebarFooterProps = ComponentProps<\"div\">;\n\nconst SidebarFooter = ({ className, ...props }: SidebarFooterProps) => (\n  <div\n    className={cn(\"flex flex-col gap-2 p-2\", className)}\n    data-sidebar=\"footer\"\n    data-slot=\"sidebar-footer\"\n    {...props}\n  />\n);\n\nexport { SidebarFooter };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type SidebarGroupProps = ComponentProps<\"div\">;\n\nconst SidebarGroup = ({ className, ...props }: SidebarGroupProps) => (\n  <div\n    className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n    data-sidebar=\"group\"\n    data-slot=\"sidebar-group\"\n    {...props}\n  />\n);\n\nexport { SidebarGroup };\n","import type { ComponentProps } from \"react\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"tailwind-variants\";\nexport type SidebarGroupActionProps = useRender.ComponentProps<\"button\"> &\n  ComponentProps<\"button\">;\n\nconst SidebarGroupAction = ({\n  className,\n  render,\n  ...props\n}: SidebarGroupActionProps) =>\n  useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  });\n\nexport { SidebarGroupAction };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type SidebarGroupContentProps = ComponentProps<\"div\">;\n\nconst SidebarGroupContent = ({\n  className,\n  ...props\n}: SidebarGroupContentProps) => (\n  <div\n    className={cn(\"w-full text-sm\", className)}\n    data-sidebar=\"group-content\"\n    data-slot=\"sidebar-group-content\"\n    {...props}\n  />\n);\n\nexport { SidebarGroupContent };\n","import type { ComponentProps } from \"react\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"tailwind-variants\";\nexport type SidebarGroupLabelProps = useRender.ComponentProps<\"div\"> &\n  ComponentProps<\"div\">;\n\nconst SidebarGroupLabel = ({\n  className,\n  render,\n  ...props\n}: SidebarGroupLabelProps) =>\n  useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  });\n\nexport { SidebarGroupLabel };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type SidebarHeaderProps = ComponentProps<\"div\">;\n\nconst SidebarHeader = ({ className, ...props }: SidebarHeaderProps) => (\n  <div\n    className={cn(\"flex flex-col gap-2 p-2\", className)}\n    data-sidebar=\"header\"\n    data-slot=\"sidebar-header\"\n    {...props}\n  />\n);\n\nexport { SidebarHeader };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\n\nimport { Input } from \"../input/input\";\nexport type SidebarInputProps = ComponentProps<typeof Input>;\n\nconst SidebarInput = ({\n  className,\n  size = \"sm\",\n  ...props\n}: SidebarInputProps) => (\n  <Input\n    className={cn(\"w-full bg-background shadow-none\", className)}\n    data-sidebar=\"input\"\n    size={size}\n    data-slot=\"sidebar-input\"\n    {...props}\n  />\n);\n\nexport { SidebarInput };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type SidebarInsetProps = ComponentProps<\"main\">;\n\nconst SidebarInset = ({ className, ...props }: SidebarInsetProps) => (\n  <main\n    className={cn(\n      \"relative flex w-full min-w-0 flex-1 flex-col bg-background 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\",\n      className\n    )}\n    data-slot=\"sidebar-inset\"\n    {...props}\n  />\n);\n\nexport { SidebarInset };\n","\"use client\";\n\nimport { createContext } from \"react\";\n\nimport type { InputSize } from \"../input/input\";\n\nexport interface SidebarMenuContextValue {\n  size?: InputSize;\n}\n\nconst SidebarMenuContext = createContext<SidebarMenuContextValue>({\n  size: \"md\",\n});\n\nexport { SidebarMenuContext };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\n\nimport type { InputSize } from \"../input/input\";\n\nimport { useComponentSize } from \"../shared/size/size-provider\";\nimport { SidebarMenuContext } from \"./sidebar-menu-context\";\nexport type SidebarMenuProps = ComponentProps<\"ul\"> & {\n  size?: InputSize;\n};\n\nconst SidebarMenu = ({\n  className,\n  size: providedSize,\n  ...props\n}: SidebarMenuProps) => {\n  const size = useComponentSize(providedSize);\n\n  return (\n    <SidebarMenuContext.Provider value={{ size }}>\n      <ul\n        className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n        data-sidebar=\"menu\"\n        data-size={size}\n        data-slot=\"sidebar-menu\"\n        {...props}\n      />\n    </SidebarMenuContext.Provider>\n  );\n};\n\nexport { SidebarMenu };\n","import type { ComponentProps } from \"react\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { useContext } from \"react\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport type { InputSize } from \"../input/input\";\n\nimport { SidebarMenuContext } from \"./sidebar-menu-context\";\n\nconst sidebarMenuActionVariants = tv({\n  base: \"absolute right-1 flex aspect-square items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:shrink-0\",\n  variants: {\n    size: {\n      xs: \"top-0.5 w-4 [&>svg:not([class*='size-'])]:size-3\",\n      sm: \"top-1 w-5 [&>svg:not([class*='size-'])]:size-3.5\",\n      md: \"top-1.5 w-5 [&>svg:not([class*='size-'])]:size-4\",\n      lg: \"top-2 w-6 [&>svg:not([class*='size-'])]:size-4\",\n      xl: \"top-2.5 w-7 [&>svg:not([class*='size-'])]:size-5\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport type SidebarMenuActionProps = useRender.ComponentProps<\"button\"> &\n  ComponentProps<\"button\"> & {\n    showOnHover?: boolean;\n    size?: InputSize;\n  } & VariantProps<typeof sidebarMenuActionVariants>;\n\nconst SidebarMenuAction = ({\n  className,\n  render,\n  size,\n  showOnHover = false,\n  ...props\n}: SidebarMenuActionProps) => {\n  const { size: menuSize } = useContext(SidebarMenuContext);\n  const resolvedSize: InputSize = size ?? menuSize ?? \"md\";\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          sidebarMenuActionVariants({ size: resolvedSize }),\n          \"peer-data-[size=xs]/menu-button:top-0.5 peer-data-[size=sm]/menu-button:top-1 peer-data-[size=md]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2 peer-data-[size=xl]/menu-button:top-2.5\",\n          showOnHover &&\n            \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n      size: resolvedSize,\n    },\n  });\n};\n\nexport { SidebarMenuAction };\n","import type { ComponentProps } from \"react\";\n\nimport { useContext } from \"react\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport type { InputSize } from \"../input/input\";\n\nimport { SidebarMenuContext } from \"./sidebar-menu-context\";\n\nconst sidebarMenuBadgeVariants = tv({\n  base: \"pointer-events-none absolute right-1 flex items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground\",\n  variants: {\n    size: {\n      xs: \"top-0.5 h-4 min-w-4 text-[10px]\",\n      sm: \"top-1 h-5 min-w-5 text-[11px]\",\n      md: \"top-1.5 h-5 min-w-5 text-xs\",\n      lg: \"top-2 h-6 min-w-6 text-xs\",\n      xl: \"top-2.5 h-7 min-w-7 text-sm\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport type SidebarMenuBadgeProps = ComponentProps<\"div\"> &\n  VariantProps<typeof sidebarMenuBadgeVariants> & {\n    size?: InputSize;\n  };\n\nconst SidebarMenuBadge = ({\n  className,\n  size,\n  ...props\n}: SidebarMenuBadgeProps) => {\n  const { size: menuSize } = useContext(SidebarMenuContext);\n  const resolvedSize: InputSize = size ?? menuSize ?? \"md\";\n\n  return (\n    <div\n      className={cn(\n        sidebarMenuBadgeVariants({ size: resolvedSize }),\n        className\n      )}\n      data-sidebar=\"menu-badge\"\n      data-size={resolvedSize}\n      data-slot=\"sidebar-menu-badge\"\n      {...props}\n    />\n  );\n};\n\nexport { SidebarMenuBadge };\n","\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\nexport interface SidebarContextProps {\n  state: \"expanded\" | \"collapsed\";\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n}\n\nexport const SidebarContext = createContext<SidebarContextProps | null>(null);\n\nexport const useSidebar = () => {\n  const context = useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n  }\n\n  return context;\n};\n","import type { ComponentProps } from \"react\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { useContext } from \"react\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport type { InputSize } from \"../input/input\";\n\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../tooltip/tooltip\";\nimport { SidebarMenuContext } from \"./sidebar-menu-context\";\nimport { useSidebar } from \"./use-sidebar\";\nexport type SidebarMenuButtonProps = useRender.ComponentProps<\"button\"> &\n  ComponentProps<\"button\"> & {\n    isActive?: boolean;\n    tooltip?: string | ComponentProps<typeof TooltipContent>;\n    size?: InputSize;\n  } & VariantProps<typeof sidebarMenuButtonVariants>;\n\nconst sidebarMenuButtonVariants = tv({\n  base: \"peer/menu-button group/menu-button flex w-full cursor-pointer items-center gap-2 overflow-hidden rounded-md text-left ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! 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 data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground [&_svg]:shrink-0 [&>span:last-child]:truncate\",\n  variants: {\n    variant: {\n      default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n      outline:\n        \"bg-background shadow-[0_0_0_1px_hsl(var(--kb-sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--kb-sidebar-accent))]\",\n    },\n    size: {\n      xs: \"h-6 px-1.5 py-1 text-xs [&_svg:not([class*='size-'])]:size-3\",\n      sm: \"h-7 px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5\",\n      md: \"h-8 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4\",\n      lg: \"h-10 px-2.5 py-2 text-sm [&_svg:not([class*='size-'])]:size-4\",\n      xl: \"h-11 px-3 py-2 text-base [&_svg:not([class*='size-'])]:size-5\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\nconst SidebarMenuButton = ({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size,\n  tooltip,\n  className,\n  ...props\n}: SidebarMenuButtonProps) => {\n  const { size: menuSize } = useContext(SidebarMenuContext);\n  const resolvedSize: InputSize = size ?? menuSize ?? \"md\";\n  const { isMobile, state } = useSidebar();\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          sidebarMenuButtonVariants({ size: resolvedSize, variant }),\n          className\n        ),\n      },\n      props\n    ),\n    render: tooltip ? TooltipTrigger : render,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size: resolvedSize,\n      active: isActive,\n    },\n  });\n\n  if (!tooltip) {\n    return comp;\n  }\n\n  if (typeof tooltip === \"string\") {\n    // oxlint-disable-next-line no-param-reassign\n    tooltip = {\n      children: tooltip,\n    };\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        side=\"right\"\n        {...tooltip}\n      />\n    </Tooltip>\n  );\n};\n\nexport { SidebarMenuButton, sidebarMenuButtonVariants };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type SidebarMenuItemProps = ComponentProps<\"li\">;\n\nconst SidebarMenuItem = ({ className, ...props }: SidebarMenuItemProps) => (\n  <li\n    className={cn(\"group/menu-item relative\", className)}\n    data-sidebar=\"menu-item\"\n    data-slot=\"sidebar-menu-item\"\n    {...props}\n  />\n);\n\nexport { SidebarMenuItem };\n","\"use client\";\n\nimport type { ComponentProps, CSSProperties } from \"react\";\n\nimport { useContext } from \"react\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport type { InputSize } from \"../input/input\";\n\nimport { Skeleton } from \"../skeleton/skeleton\";\nimport { SidebarMenuContext } from \"./sidebar-menu-context\";\n\nconst sidebarMenuSkeletonVariants = tv({\n  base: \"flex items-center gap-2 rounded-md\",\n  variants: {\n    size: {\n      xs: \"h-6 px-1.5\",\n      sm: \"h-7 px-2\",\n      md: \"h-8 px-2\",\n      lg: \"h-10 px-2.5\",\n      xl: \"h-11 px-3\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport type SidebarMenuSkeletonProps = ComponentProps<\"div\"> & {\n  showIcon?: boolean;\n  size?: InputSize;\n} & VariantProps<typeof sidebarMenuSkeletonVariants>;\n\nconst SidebarMenuSkeleton = ({\n  className,\n  size,\n  showIcon = false,\n  ...props\n}: SidebarMenuSkeletonProps) => {\n  const { size: menuSize } = useContext(SidebarMenuContext);\n  const resolvedSize: InputSize = size ?? menuSize ?? \"md\";\n\n  return (\n    <div\n      className={cn(\n        sidebarMenuSkeletonVariants({ size: resolvedSize }),\n        className\n      )}\n      data-sidebar=\"menu-skeleton\"\n      data-size={resolvedSize}\n      data-slot=\"sidebar-menu-skeleton\"\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": \"100%\",\n          } as CSSProperties\n        }\n      />\n    </div>\n  );\n};\n\nexport { SidebarMenuSkeleton };\n","import type { ComponentProps } from \"react\";\n\nimport { useContext } from \"react\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport type { InputSize } from \"../input/input\";\n\nimport { SidebarMenuContext } from \"./sidebar-menu-context\";\n\nconst sidebarMenuSubVariants = tv({\n  base: \"flex min-w-0 translate-x-px flex-col border-l border-sidebar-border group-data-[collapsible=icon]:hidden\",\n  variants: {\n    size: {\n      xs: \"mx-2.5 gap-0.5 px-1.5 py-0.5\",\n      sm: \"mx-3 gap-1 px-2 py-0.5\",\n      md: \"mx-3.5 gap-1 px-2.5 py-0.5\",\n      lg: \"mx-4 gap-1 px-3 py-1\",\n      xl: \"mx-4.5 gap-1.5 px-3.5 py-1\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport type SidebarMenuSubProps = ComponentProps<\"ul\"> &\n  VariantProps<typeof sidebarMenuSubVariants> & {\n    size?: InputSize;\n  };\n\nconst SidebarMenuSub = ({ className, size, ...props }: SidebarMenuSubProps) => {\n  const { size: menuSize } = useContext(SidebarMenuContext);\n  const resolvedSize: InputSize = size ?? menuSize ?? \"md\";\n\n  return (\n    <ul\n      className={cn(sidebarMenuSubVariants({ size: resolvedSize }), className)}\n      data-sidebar=\"menu-sub\"\n      data-size={resolvedSize}\n      data-slot=\"sidebar-menu-sub\"\n      {...props}\n    />\n  );\n};\n\nexport { SidebarMenuSub };\n","import type { ComponentProps } from \"react\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { useContext } from \"react\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport type { InputSize } from \"../input/input\";\n\nimport { SidebarMenuContext } from \"./sidebar-menu-context\";\nexport type SidebarMenuSubButtonProps = useRender.ComponentProps<\"a\"> &\n  ComponentProps<\"a\"> & {\n    size?: InputSize;\n    isActive?: boolean;\n  } & VariantProps<typeof sidebarMenuSubButtonVariants>;\n\nconst sidebarMenuSubButtonVariants = tv({\n  base: \"flex min-w-0 -translate-x-px cursor-pointer items-center overflow-hidden rounded-md text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden 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 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n  variants: {\n    size: {\n      xs: \"h-6 gap-1.5 px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3\",\n      sm: \"h-7 gap-2 px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5\",\n      md: \"h-8 gap-2 px-2 text-sm [&>svg:not([class*='size-'])]:size-4\",\n      lg: \"h-9 gap-2.5 px-2.5 text-sm [&>svg:not([class*='size-'])]:size-4\",\n      xl: \"h-10 gap-2.5 px-3 text-base [&>svg:not([class*='size-'])]:size-5\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nconst SidebarMenuSubButton = ({\n  render,\n  size,\n  isActive = false,\n  className,\n  ...props\n}: SidebarMenuSubButtonProps) => {\n  const { size: menuSize } = useContext(SidebarMenuContext);\n  const resolvedSize: InputSize = size ?? menuSize ?? \"md\";\n\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          sidebarMenuSubButtonVariants({ size: resolvedSize }),\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size: resolvedSize,\n      active: isActive,\n    },\n  });\n};\n\nexport { SidebarMenuSubButton };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type SidebarMenuSubItemProps = ComponentProps<\"li\">;\n\nconst SidebarMenuSubItem = ({\n  className,\n  ...props\n}: SidebarMenuSubItemProps) => (\n  <li\n    className={cn(\"group/menu-sub-item relative\", className)}\n    data-sidebar=\"menu-sub-item\"\n    data-slot=\"sidebar-menu-sub-item\"\n    {...props}\n  />\n);\n\nexport { SidebarMenuSubItem };\n","\"use client\";\n\nimport type { ComponentProps, CSSProperties } from \"react\";\n\nimport { useIsMobile } from \"@kuzenbo/hooks/use-mobile\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"tailwind-variants\";\n\nimport {\n  SIDEBAR_COOKIE_MAX_AGE,\n  SIDEBAR_COOKIE_NAME,\n  SIDEBAR_KEYBOARD_SHORTCUT,\n  SIDEBAR_WIDTH,\n  SIDEBAR_WIDTH_ICON,\n} from \"./constants\";\nimport { SidebarContext, type SidebarContextProps } from \"./use-sidebar\";\nexport type SidebarProviderProps = ComponentProps<\"div\"> & {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n};\n\nconst SidebarProvider = ({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: SidebarProviderProps) => {\n  const isMobile = useIsMobile();\n  const [openMobile, setOpenMobile] = useState(false);\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = useCallback(\n    (value: boolean | ((prev: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value;\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        _setOpen(openState);\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      // oxlint-disable-next-line unicorn/no-document-cookie\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n    },\n    [setOpenProp, open]\n  );\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = useCallback(\n    () =>\n      isMobile ? setOpenMobile((prev) => !prev) : setOpen((prev) => !prev),\n    [isMobile, setOpen]\n  );\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault();\n        toggleSidebar();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [toggleSidebar]);\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\";\n\n  const contextValue = useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, toggleSidebar]\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n          className\n        )}\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as CSSProperties\n        }\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  );\n};\n\nexport { SidebarProvider };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\n\nimport { useSidebar } from \"./use-sidebar\";\nexport type SidebarRailProps = ComponentProps<\"button\">;\n\nconst SidebarRail = ({ className, ...props }: SidebarRailProps) => {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Toggle Sidebar\"\n      className={cn(\n        \"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] hover:after:bg-sidebar-border sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full hover:group-data-[collapsible=offExamples]:bg-sidebar\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      onClick={toggleSidebar}\n      tabIndex={-1}\n      title=\"Toggle Sidebar\"\n      {...props}\n    />\n  );\n};\n\nexport { SidebarRail };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\n\nimport { Separator } from \"../separator/separator\";\nexport type SidebarSeparatorProps = ComponentProps<typeof Separator>;\n\nconst SidebarSeparator = ({ className, ...props }: SidebarSeparatorProps) => (\n  <Separator\n    className={cn(\"w-auto bg-sidebar-border\", className)}\n    data-sidebar=\"separator\"\n    data-slot=\"sidebar-separator\"\n    {...props}\n  />\n);\n\nexport { SidebarSeparator };\n","\"use client\";\n\nimport { SidebarLeftIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { useCallback, type ComponentProps } from \"react\";\nimport { cn } from \"tailwind-variants\";\n\nimport { Button } from \"../button/button\";\nimport { useSidebar } from \"./use-sidebar\";\nexport type SidebarTriggerProps = ComponentProps<typeof Button>;\n\nconst SidebarTrigger = ({\n  className,\n  onClick,\n  ...props\n}: SidebarTriggerProps) => {\n  const { toggleSidebar } = useSidebar();\n\n  const handleClick = useCallback(\n    (\n      event: Parameters<\n        NonNullable<ComponentProps<typeof Button>[\"onClick\"]>\n      >[0]\n    ) => {\n      onClick?.(event);\n      toggleSidebar();\n    },\n    [onClick, toggleSidebar]\n  );\n\n  return (\n    <Button\n      className={cn(className)}\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      onClick={handleClick}\n      size=\"icon-sm\"\n      variant=\"ghost\"\n      {...props}\n    >\n      <HugeiconsIcon icon={SidebarLeftIcon} strokeWidth={2} />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n};\n\nexport { SidebarTrigger };\n","\"use client\";\n\nimport type { ComponentProps, CSSProperties } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\n\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"../sheet/sheet\";\nimport { SIDEBAR_WIDTH_MOBILE } from \"./constants\";\nimport { SidebarContent } from \"./sidebar-content\";\nimport { SidebarFooter } from \"./sidebar-footer\";\nimport { SidebarGroup } from \"./sidebar-group\";\nimport { SidebarGroupAction } from \"./sidebar-group-action\";\nimport { SidebarGroupContent } from \"./sidebar-group-content\";\nimport { SidebarGroupLabel } from \"./sidebar-group-label\";\nimport { SidebarHeader } from \"./sidebar-header\";\nimport { SidebarInput } from \"./sidebar-input\";\nimport { SidebarInset } from \"./sidebar-inset\";\nimport { SidebarMenu } from \"./sidebar-menu\";\nimport { SidebarMenuAction } from \"./sidebar-menu-action\";\nimport { SidebarMenuBadge } from \"./sidebar-menu-badge\";\nimport { SidebarMenuButton } from \"./sidebar-menu-button\";\nimport { SidebarMenuItem } from \"./sidebar-menu-item\";\nimport { SidebarMenuSkeleton } from \"./sidebar-menu-skeleton\";\nimport { SidebarMenuSub } from \"./sidebar-menu-sub\";\nimport { SidebarMenuSubButton } from \"./sidebar-menu-sub-button\";\nimport { SidebarMenuSubItem } from \"./sidebar-menu-sub-item\";\nimport { SidebarProvider } from \"./sidebar-provider\";\nimport { SidebarRail } from \"./sidebar-rail\";\nimport { SidebarSeparator } from \"./sidebar-separator\";\nimport { SidebarTrigger } from \"./sidebar-trigger\";\nimport { useSidebar } from \"./use-sidebar\";\nexport type SidebarProps = ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\";\n  variant?: \"sidebar\" | \"floating\" | \"inset\";\n  collapsible?: \"offExamples\" | \"icon\" | \"none\";\n};\n\nconst Sidebar = ({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: SidebarProps) => {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        className={cn(\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n          className\n        )}\n        data-slot=\"sidebar\"\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet onOpenChange={setOpenMobile} open={openMobile} {...props}>\n        <SheetContent\n          className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n          data-mobile=\"true\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          side={side}\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as CSSProperties\n          }\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    );\n  }\n\n  return (\n    <div\n      className=\"group peer hidden text-sidebar-foreground md:block\"\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-side={side}\n      data-slot=\"sidebar\"\n      data-state={state}\n      data-variant={variant}\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n        data-slot=\"sidebar-gap\"\n      />\n      <div\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        data-slot=\"sidebar-container\"\n        {...props}\n      >\n        <div\n          className=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nSidebar.Content = SidebarContent;\nSidebar.Footer = SidebarFooter;\nSidebar.Group = SidebarGroup;\nSidebar.GroupAction = SidebarGroupAction;\nSidebar.GroupContent = SidebarGroupContent;\nSidebar.GroupLabel = SidebarGroupLabel;\nSidebar.Header = SidebarHeader;\nSidebar.Input = SidebarInput;\nSidebar.Inset = SidebarInset;\nSidebar.Menu = SidebarMenu;\nSidebar.MenuAction = SidebarMenuAction;\nSidebar.MenuBadge = SidebarMenuBadge;\nSidebar.MenuButton = SidebarMenuButton;\nSidebar.MenuItem = SidebarMenuItem;\nSidebar.MenuSkeleton = SidebarMenuSkeleton;\nSidebar.MenuSub = SidebarMenuSub;\nSidebar.MenuSubButton = SidebarMenuSubButton;\nSidebar.MenuSubItem = SidebarMenuSubItem;\nSidebar.Provider = SidebarProvider;\nSidebar.Rail = SidebarRail;\nSidebar.Separator = SidebarSeparator;\nSidebar.Trigger = SidebarTrigger;\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n};\n\nexport type { SidebarContentProps } from \"./sidebar-content\";\nexport type { SidebarFooterProps } from \"./sidebar-footer\";\nexport type { SidebarGroupProps } from \"./sidebar-group\";\nexport type { SidebarGroupActionProps } from \"./sidebar-group-action\";\nexport type { SidebarGroupContentProps } from \"./sidebar-group-content\";\nexport type { SidebarGroupLabelProps } from \"./sidebar-group-label\";\nexport type { SidebarHeaderProps } from \"./sidebar-header\";\nexport type { SidebarInputProps } from \"./sidebar-input\";\nexport type { SidebarInsetProps } from \"./sidebar-inset\";\nexport type { SidebarMenuProps } from \"./sidebar-menu\";\nexport type { SidebarMenuActionProps } from \"./sidebar-menu-action\";\nexport type { SidebarMenuBadgeProps } from \"./sidebar-menu-badge\";\nexport type { SidebarMenuButtonProps } from \"./sidebar-menu-button\";\nexport type { SidebarMenuItemProps } from \"./sidebar-menu-item\";\nexport type { SidebarMenuSkeletonProps } from \"./sidebar-menu-skeleton\";\nexport type { SidebarMenuSubProps } from \"./sidebar-menu-sub\";\nexport type { SidebarMenuSubButtonProps } from \"./sidebar-menu-sub-button\";\nexport type { SidebarMenuSubItemProps } from \"./sidebar-menu-sub-item\";\nexport type { SidebarProviderProps } from \"./sidebar-provider\";\nexport type { SidebarRailProps } from \"./sidebar-rail\";\nexport type { SidebarSeparatorProps } from \"./sidebar-separator\";\nexport type { SidebarTriggerProps } from \"./sidebar-trigger\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,MAAa,sBAAsB;AACnC,MAAa,yBAAyB,OAAU,KAAK;AACrD,MAAa,gBAAgB;AAC7B,MAAa,uBAAuB;AACpC,MAAa,qBAAqB;AAClC,MAAa,4BAA4B;;;;ACAzC,MAAM,kBAAkB,EAAE,WAAW,GAAG,YACtC,oBAAC;CACC,WAAW,GACT,+GACA,UACD;CACD,gBAAa;CACb,aAAU;CACV,GAAI;EACJ;;;;ACTJ,MAAM,iBAAiB,EAAE,WAAW,GAAG,YACrC,oBAAC;CACC,WAAW,GAAG,2BAA2B,UAAU;CACnD,gBAAa;CACb,aAAU;CACV,GAAI;EACJ;;;;ACNJ,MAAM,gBAAgB,EAAE,WAAW,GAAG,YACpC,oBAAC;CACC,WAAW,GAAG,6CAA6C,UAAU;CACrE,gBAAa;CACb,aAAU;CACV,GAAI;EACJ;;;;ACHJ,MAAM,sBAAsB,EAC1B,WACA,QACA,GAAG,YAEH,UAAU;CACR,gBAAgB;CAChB,OAAO,WACL,EACE,WAAW,GACT,iXACA,UACD,EACF,EACD,MACD;CACD;CACA,OAAO;EACL,MAAM;EACN,SAAS;EACV;CACF,CAAC;;;;ACxBJ,MAAM,uBAAuB,EAC3B,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,kBAAkB,UAAU;CAC1C,gBAAa;CACb,aAAU;CACV,GAAI;EACJ;;;;ACNJ,MAAM,qBAAqB,EACzB,WACA,QACA,GAAG,YAEH,UAAU;CACR,gBAAgB;CAChB,OAAO,WACL,EACE,WAAW,GACT,wTACA,UACD,EACF,EACD,MACD;CACD;CACA,OAAO;EACL,MAAM;EACN,SAAS;EACV;CACF,CAAC;;;;ACxBJ,MAAM,iBAAiB,EAAE,WAAW,GAAG,YACrC,oBAAC;CACC,WAAW,GAAG,2BAA2B,UAAU;CACnD,gBAAa;CACb,aAAU;CACV,GAAI;EACJ;;;;ACJJ,MAAM,gBAAgB,EACpB,WACA,OAAO,MACP,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,oCAAoC,UAAU;CAC5D,gBAAa;CACP;CACN,aAAU;CACV,GAAI;EACJ;;;;ACbJ,MAAM,gBAAgB,EAAE,WAAW,GAAG,YACpC,oBAAC;CACC,WAAW,GACT,8QACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACHJ,MAAM,qBAAqB,cAAuC,EAChE,MAAM,MACP,CAAC;;;;ACAF,MAAM,eAAe,EACnB,WACA,MAAM,cACN,GAAG,YACmB;CACtB,MAAM,OAAO,iBAAiB,aAAa;AAE3C,QACE,oBAAC,mBAAmB;EAAS,OAAO,EAAE,MAAM;YAC1C,oBAAC;GACC,WAAW,GAAG,sCAAsC,UAAU;GAC9D,gBAAa;GACb,aAAW;GACX,aAAU;GACV,GAAI;IACJ;GAC0B;;;;;ACjBlC,MAAM,4BAA4B,GAAG;CACnC,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC;AAQF,MAAM,qBAAqB,EACzB,WACA,QACA,MACA,cAAc,OACd,GAAG,YACyB;CAC5B,MAAM,EAAE,MAAM,aAAa,WAAW,mBAAmB;CACzD,MAAM,eAA0B,QAAQ,YAAY;AAEpD,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GACT,0BAA0B,EAAE,MAAM,cAAc,CAAC,EACjD,uMACA,eACE,6KACF,UACD,EACF,EACD,MACD;EACD;EACA,OAAO;GACL,MAAM;GACN,SAAS;GACT,MAAM;GACP;EACF,CAAC;;;;;ACtDJ,MAAM,2BAA2B,GAAG;CAClC,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC;AAOF,MAAM,oBAAoB,EACxB,WACA,MACA,GAAG,YACwB;CAC3B,MAAM,EAAE,MAAM,aAAa,WAAW,mBAAmB;CACzD,MAAM,eAA0B,QAAQ,YAAY;AAEpD,QACE,oBAAC;EACC,WAAW,GACT,yBAAyB,EAAE,MAAM,cAAc,CAAC,EAChD,UACD;EACD,gBAAa;EACb,aAAW;EACX,aAAU;EACV,GAAI;GACJ;;;;;AClCN,MAAa,iBAAiB,cAA0C,KAAK;AAE7E,MAAa,mBAAmB;CAC9B,MAAM,UAAU,WAAW,eAAe;AAC1C,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,oDAAoD;AAGtE,QAAO;;;;;ACHT,MAAM,4BAA4B,GAAG;CACnC,MAAM;CACN,UAAU;EACR,SAAS;GACP,SAAS;GACT,SACE;GACH;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CAAC;AAEF,MAAM,qBAAqB,EACzB,QACA,WAAW,OACX,UAAU,WACV,MACA,SACA,WACA,GAAG,YACyB;CAC5B,MAAM,EAAE,MAAM,aAAa,WAAW,mBAAmB;CACzD,MAAM,eAA0B,QAAQ,YAAY;CACpD,MAAM,EAAE,UAAU,UAAU,YAAY;CACxC,MAAM,OAAO,UAAU;EACrB,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GACT,0BAA0B;GAAE,MAAM;GAAc;GAAS,CAAC,EAC1D,UACD,EACF,EACD,MACD;EACD,QAAQ,UAAU,iBAAiB;EACnC,OAAO;GACL,MAAM;GACN,SAAS;GACT,MAAM;GACN,QAAQ;GACT;EACF,CAAC;AAEF,KAAI,CAAC,QACH,QAAO;AAGT,KAAI,OAAO,YAAY,SAErB,WAAU,EACR,UAAU,SACX;AAGH,QACE,qBAAC,sBACE,MACD,oBAAC;EACC,OAAM;EACN,QAAQ,UAAU,eAAe;EACjC,MAAK;EACL,GAAI;GACJ,IACM;;;;;ACxFd,MAAM,mBAAmB,EAAE,WAAW,GAAG,YACvC,oBAAC;CACC,WAAW,GAAG,4BAA4B,UAAU;CACpD,gBAAa;CACb,aAAU;CACV,GAAI;EACJ;;;;ACCJ,MAAM,8BAA8B,GAAG;CACrC,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC;AAOF,MAAM,uBAAuB,EAC3B,WACA,MACA,WAAW,OACX,GAAG,YAC2B;CAC9B,MAAM,EAAE,MAAM,aAAa,WAAW,mBAAmB;CACzD,MAAM,eAA0B,QAAQ,YAAY;AAEpD,QACE,qBAAC;EACC,WAAW,GACT,4BAA4B,EAAE,MAAM,cAAc,CAAC,EACnD,UACD;EACD,gBAAa;EACb,aAAW;EACX,aAAU;EACV,GAAI;aAEH,YACC,oBAAC;GACC,WAAU;GACV,gBAAa;IACb,EAEJ,oBAAC;GACC,WAAU;GACV,gBAAa;GACb,OACE,EACE,oBAAoB,QACrB;IAEH;GACE;;;;;AC3DV,MAAM,yBAAyB,GAAG;CAChC,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC;AAOF,MAAM,kBAAkB,EAAE,WAAW,MAAM,GAAG,YAAiC;CAC7E,MAAM,EAAE,MAAM,aAAa,WAAW,mBAAmB;CACzD,MAAM,eAA0B,QAAQ,YAAY;AAEpD,QACE,oBAAC;EACC,WAAW,GAAG,uBAAuB,EAAE,MAAM,cAAc,CAAC,EAAE,UAAU;EACxE,gBAAa;EACb,aAAW;EACX,aAAU;EACV,GAAI;GACJ;;;;;ACzBN,MAAM,+BAA+B,GAAG;CACtC,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC;AAEF,MAAM,wBAAwB,EAC5B,QACA,MACA,WAAW,OACX,WACA,GAAG,YAC4B;CAC/B,MAAM,EAAE,MAAM,aAAa,WAAW,mBAAmB;CACzD,MAAM,eAA0B,QAAQ,YAAY;AAEpD,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GACT,6BAA6B,EAAE,MAAM,cAAc,CAAC,EACpD,UACD,EACF,EACD,MACD;EACD;EACA,OAAO;GACL,MAAM;GACN,SAAS;GACT,MAAM;GACN,QAAQ;GACT;EACF,CAAC;;;;;ACvDJ,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,gCAAgC,UAAU;CACxD,gBAAa;CACb,aAAU;CACV,GAAI;EACJ;;;;ACQJ,MAAM,mBAAmB,EACvB,cAAc,MACd,MAAM,UACN,cAAc,aACd,WACA,OACA,UACA,GAAG,YACuB;CAC1B,MAAM,WAAW,aAAa;CAC9B,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAInD,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAC/C,MAAM,OAAO,YAAY;CACzB,MAAM,UAAU,aACb,UAAkD;EACjD,MAAM,YAAY,OAAO,UAAU,aAAa,MAAM,KAAK,GAAG;AAC9D,MAAI,YACF,aAAY,UAAU;MAEtB,UAAS,UAAU;AAKrB,WAAS,SAAS,GAAG,oBAAoB,GAAG,UAAU,oBAAoB;IAE5E,CAAC,aAAa,KAAK,CACpB;CAGD,MAAM,gBAAgB,kBAElB,WAAW,eAAe,SAAS,CAAC,KAAK,GAAG,SAAS,SAAS,CAAC,KAAK,EACtE,CAAC,UAAU,QAAQ,CACpB;AAGD,iBAAgB;EACd,MAAM,iBAAiB,UAAyB;AAC9C,OACE,MAAM,QAAQ,8BACb,MAAM,WAAW,MAAM,UACxB;AACA,UAAM,gBAAgB;AACtB,mBAAe;;;AAInB,SAAO,iBAAiB,WAAW,cAAc;AACjD,eAAa,OAAO,oBAAoB,WAAW,cAAc;IAChE,CAAC,cAAc,CAAC;CAInB,MAAM,QAAQ,OAAO,aAAa;CAElC,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EAAC;EAAO;EAAM;EAAS;EAAU;EAAY;EAAc,CAC5D;AAED,QACE,oBAAC,eAAe;EAAS,OAAO;YAC9B,oBAAC;GACC,WAAW,GACT,mFACA,UACD;GACD,aAAU;GACV,OACE;IACE,mBAAmB;IACnB,wBAAwB;IACxB,GAAG;IACJ;GAEH,GAAI;GAEH;IACG;GACkB;;;;;AC1G9B,MAAM,eAAe,EAAE,WAAW,GAAG,YAA8B;CACjE,MAAM,EAAE,kBAAkB,YAAY;AAEtC,QACE,oBAAC;EACC,MAAK;EACL,cAAW;EACX,WAAW,GACT,mPACA,4EACA,0HACA,iKACA,+DACA,+DACA,UACD;EACD,gBAAa;EACb,aAAU;EACV,SAAS;EACT,UAAU;EACV,OAAM;EACN,GAAI;GACJ;;;;;ACtBN,MAAM,oBAAoB,EAAE,WAAW,GAAG,YACxC,oBAAC;CACC,WAAW,GAAG,4BAA4B,UAAU;CACpD,gBAAa;CACb,aAAU;CACV,GAAI;EACJ;;;;ACFJ,MAAM,kBAAkB,EACtB,WACA,SACA,GAAG,YACsB;CACzB,MAAM,EAAE,kBAAkB,YAAY;CAEtC,MAAM,cAAc,aAEhB,UAGG;AACH,YAAU,MAAM;AAChB,iBAAe;IAEjB,CAAC,SAAS,cAAc,CACzB;AAED,QACE,qBAAC;EACC,WAAW,GAAG,UAAU;EACxB,gBAAa;EACb,aAAU;EACV,SAAS;EACT,MAAK;EACL,SAAQ;EACR,GAAI;aAEJ,oBAAC;GAAc,MAAM;GAAiB,aAAa;IAAK,EACxD,oBAAC;GAAK,WAAU;aAAU;IAAqB;GACxC;;;;;ACCb,MAAM,WAAW,EACf,OAAO,QACP,UAAU,WACV,cAAc,eACd,WACA,UACA,GAAG,YACe;CAClB,MAAM,EAAE,UAAU,OAAO,YAAY,kBAAkB,YAAY;AAEnE,KAAI,gBAAgB,OAClB,QACE,oBAAC;EACC,WAAW,GACT,+EACA,UACD;EACD,aAAU;EACV,GAAI;EAEH;GACG;AAIV,KAAI,SACF,QACE,oBAAC;EAAM,cAAc;EAAe,MAAM;EAAY,GAAI;YACxD,qBAAC;GACC,WAAU;GACV,eAAY;GACZ,gBAAa;GACb,aAAU;GACJ;GACN,OACE,EACE,mBAAmB,sBACpB;cAGH,qBAAC;IAAY,WAAU;eACrB,oBAAC,wBAAW,YAAoB,EAChC,oBAAC,8BAAiB,iCAA+C;KACrD,EACd,oBAAC;IAAI,WAAU;IAA+B;KAAe;IAChD;GACT;AAIZ,QACE,qBAAC;EACC,WAAU;EACV,oBAAkB,UAAU,cAAc,cAAc;EACxD,aAAW;EACX,aAAU;EACV,cAAY;EACZ,gBAAc;aAGd,oBAAC;GACC,WAAW,GACT,2FACA,4CACA,sCACA,YAAY,cAAc,YAAY,UAClC,qFACA,yDACL;GACD,aAAU;IACV,EACF,oBAAC;GACC,WAAW,GACT,wHACA,SAAS,SACL,qFACA,sFAEJ,YAAY,cAAc,YAAY,UAClC,6FACA,2HACJ,UACD;GACD,aAAU;GACV,GAAI;aAEJ,oBAAC;IACC,WAAU;IACV,gBAAa;IACb,aAAU;IAET;KACG;IACF;GACF;;AAIV,QAAQ,UAAU;AAClB,QAAQ,SAAS;AACjB,QAAQ,QAAQ;AAChB,QAAQ,cAAc;AACtB,QAAQ,eAAe;AACvB,QAAQ,aAAa;AACrB,QAAQ,SAAS;AACjB,QAAQ,QAAQ;AAChB,QAAQ,QAAQ;AAChB,QAAQ,OAAO;AACf,QAAQ,aAAa;AACrB,QAAQ,YAAY;AACpB,QAAQ,aAAa;AACrB,QAAQ,WAAW;AACnB,QAAQ,eAAe;AACvB,QAAQ,UAAU;AAClB,QAAQ,gBAAgB;AACxB,QAAQ,cAAc;AACtB,QAAQ,WAAW;AACnB,QAAQ,OAAO;AACf,QAAQ,YAAY;AACpB,QAAQ,UAAU"}

package/dist/ui/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","names":[],"sources":["../../src/ui/skeleton/skeleton.tsx"],"mappings":";;;;KAIY,aAAA,GAAgB,cAAA;AAAA,cAEtB,QAAA;EAAY,SAAA;EAAA,GAAA;AAAA,GAAyB,aAAA,KAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}