@kuzenbo/core 0.0.1-alpha.3 → 0.0.1-alpha.5

package/dist/{sidebar-trigger-C_fOu1p2.js → sidebar-trigger-DpUDeyoo.js}

@@ -1,9 +1,10 @@
+import { a as useComponentSize } from "./size-provider-D2Fy00Ky.js";
 import { Button } from "./button.js";
 import { Separator } from "./separator.js";
 import { Input } from "./input.js";
-import { r as TooltipContent, t as TooltipTrigger } from "./tooltip-trigger-iOUSgHR_.js";
-import { Tooltip } from "./tooltip.js";
 import { Skeleton } from "./skeleton.js";
+import { r as TooltipContent, t as TooltipTrigger } from "./tooltip-trigger-Bh-4uwB1.js";
+import { Tooltip } from "./tooltip.js";
 import { cn, tv } from "tailwind-variants";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -92,9 +93,10 @@ const SidebarHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 
 //#endregion
 //#region src/ui/sidebar/sidebar-input.tsx
-const SidebarInput = ({ className, ...props }) => /* @__PURE__ */ jsx(Input, {
-	className: cn("h-8 w-full bg-background shadow-none", className),
+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
 });
@@ -107,35 +109,78 @@ const SidebarInset = ({ className, ...props }) => /* @__PURE__ */ jsx("main", {
 	...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, ...props }) => /* @__PURE__ */ jsx("ul", {
-	className: cn("flex w-full min-w-0 flex-col gap-1", className),
-	"data-sidebar": "menu",
-	"data-slot": "sidebar-menu",
-	...props
-});
+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 SidebarMenuAction = ({ className, render, showOnHover = false, ...props }) => useRender({
-	defaultTagName: "button",
-	props: mergeProps({ className: cn("absolute top-1.5 right-1 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 peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 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", 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"
-	}
+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 SidebarMenuBadge = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs 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 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1", className),
-	"data-sidebar": "menu-badge",
-	"data-slot": "sidebar-menu-badge",
-	...props
+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
@@ -149,36 +194,40 @@ const useSidebar = () => {
 //#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 p-2 text-left text-sm 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]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+	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: {
-			default: "h-8 text-sm",
-			sm: "h-7 text-xs",
-			lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+			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: "default"
+		size: "md"
 	}
 });
-const SidebarMenuButton = ({ render, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) => {
+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({
-			variant,
-			size
+			size: resolvedSize,
+			variant
 		}), className) }, props),
 		render: tooltip ? TooltipTrigger : render,
 		state: {
 			slot: "sidebar-menu-button",
 			sidebar: "menu-button",
-			size,
+			size: resolvedSize,
 			active: isActive
 		}
 	});
@@ -203,43 +252,90 @@ const SidebarMenuItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
 
 //#endregion
 //#region src/ui/sidebar/sidebar-menu-skeleton.tsx
-const SidebarMenuSkeleton = ({ className, showIcon = false, ...props }) => /* @__PURE__ */ jsxs("div", {
-	className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
-	"data-sidebar": "menu-skeleton",
-	"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%" }
-	})]
+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 SidebarMenuSub = ({ className, ...props }) => /* @__PURE__ */ jsx("ul", {
-	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),
-	"data-sidebar": "menu-sub",
-	"data-slot": "sidebar-menu-sub",
-	...props
+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 SidebarMenuSubButton = ({ render, size = "md", isActive = false, className, ...props }) => useRender({
-	defaultTagName: "a",
-	props: mergeProps({ className: cn("flex h-7 min-w-0 -translate-x-px cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 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 data-[size=md]:text-sm data-[size=sm]:text-xs [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className) }, props),
-	render,
-	state: {
-		slot: "sidebar-menu-sub-button",
-		sidebar: "menu-sub-button",
-		size,
-		active: isActive
-	}
+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
@@ -361,4 +457,4 @@ const SidebarTrigger = ({ className, onClick, ...props }) => {
 
 //#endregion
 export { SidebarContent as C, SidebarFooter as S, SidebarHeader as _, SidebarMenuSubItem as a, SidebarGroupAction as b, SidebarMenuSkeleton as c, useSidebar as d, SidebarMenuBadge as f, SidebarInput as g, SidebarInset as h, SidebarProvider as i, SidebarMenuItem as l, SidebarMenu as m, SidebarSeparator as n, SidebarMenuSubButton as o, SidebarMenuAction as p, SidebarRail as r, SidebarMenuSub as s, SidebarTrigger as t, SidebarMenuButton as u, SidebarGroupLabel as v, SIDEBAR_WIDTH_MOBILE as w, SidebarGroup as x, SidebarGroupContent as y };
-//# sourceMappingURL=sidebar-trigger-C_fOu1p2.js.map
+//# sourceMappingURL=sidebar-trigger-DpUDeyoo.js.map

package/dist/sidebar-trigger-DpUDeyoo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-trigger-DpUDeyoo.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"],"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","import { 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\";\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"],"mappings":"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"}