@kuzenbo/core 0.0.4 → 0.0.6

package/dist/ui/sidebar.js

@@ -1,14 +1,12 @@
 "use client";
 
 import { a as useComponentSize } from "../size-provider-18EvJgDT.js";
-import { Button } from "./button.js";
+import { ActionIcon } from "./action-icon.js";
 import { Separator } from "./separator.js";
-import { Input } from "./input.js";
+import { t as Input } from "../input-cICL6sH_.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 { a as SheetHeader, c as SheetContent, r as SheetTitle, s as SheetDescription, t as Sheet } from "../sheet-FVsgl5Wk.js";
+import { i as TooltipContent, n as TooltipTrigger, t as Tooltip } from "../tooltip-BUo_HPnp.js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn, tv } from "tailwind-variants";
@@ -57,11 +55,11 @@ const SidebarGroup = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 //#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),
+	props: mergeProps({ className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
 	render,
 	state: {
-		slot: "sidebar-group-action",
-		sidebar: "group-action"
+		sidebar: "group-action",
+		slot: "sidebar-group-action"
 	}
 });
 
@@ -78,11 +76,11 @@ const SidebarGroupContent = ({ className, ...props }) => /* @__PURE__ */ jsx("di
 //#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),
+	props: mergeProps({ className: cn("text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear 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"
+		sidebar: "group-label",
+		slot: "sidebar-group-label"
 	}
 });
 
@@ -98,7 +96,7 @@ const SidebarHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 //#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),
+	className: cn("bg-background w-full shadow-none", className),
 	"data-sidebar": "input",
 	size,
 	"data-slot": "sidebar-input",
@@ -108,7 +106,7 @@ const SidebarInput = ({ className, size = "sm", ...props }) => /* @__PURE__ */ j
 //#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),
+	className: cn("bg-background relative flex w-full min-w-0 flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
 	"data-slot": "sidebar-inset",
 	...props
 });
@@ -121,8 +119,9 @@ const SidebarMenuContext = createContext({ size: "md" });
 //#region src/ui/sidebar/sidebar-menu.tsx
 const SidebarMenu = ({ className, size: providedSize, ...props }) => {
 	const size = useComponentSize(providedSize);
+	const contextValue = useMemo(() => ({ size }), [size]);
 	return /* @__PURE__ */ jsx(SidebarMenuContext.Provider, {
-		value: { size },
+		value: contextValue,
 		children: /* @__PURE__ */ jsx("ul", {
 			className: cn("flex w-full min-w-0 flex-col gap-1", className),
 			"data-sidebar": "menu",
@@ -136,27 +135,27 @@ const SidebarMenu = ({ className, size: providedSize, ...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",
+	base: "text-sidebar-foreground ring-sidebar-ring peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-1 flex aspect-square items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:shrink-0",
+	defaultVariants: { size: "md" },
 	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" }
+		md: "top-1.5 w-5 [&>svg:not([class*='size-'])]:size-4",
+		sm: "top-1 w-5 [&>svg:not([class*='size-'])]:size-3.5",
+		xl: "top-2.5 w-7 [&>svg:not([class*='size-'])]:size-5",
+		xs: "top-0.5 w-4 [&>svg:not([class*='size-'])]:size-3"
+	} }
 });
 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),
+		props: mergeProps({ className: cn(sidebarMenuActionVariants({ size: resolvedSize }), "peer-data-[size=lg]/menu-button:top-2 peer-data-[size=md]/menu-button:top-1.5 peer-data-[size=sm]/menu-button:top-1 peer-data-[size=xl]/menu-button:top-2.5 peer-data-[size=xs]/menu-button:top-0.5", showOnHover && "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0", className) }, props),
 		render,
 		state: {
-			slot: "sidebar-menu-action",
 			sidebar: "menu-action",
-			size: resolvedSize
+			size: resolvedSize,
+			slot: "sidebar-menu-action"
 		}
 	});
 };
@@ -164,15 +163,15 @@ const SidebarMenuAction = ({ className, render, size, showOnHover = false, ...pr
 //#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",
+	base: "text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex items-center justify-center rounded-md px-1 font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden",
+	defaultVariants: { size: "md" },
 	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" }
+		md: "top-1.5 h-5 min-w-5 text-xs",
+		sm: "top-1 h-5 min-w-5 text-[11px]",
+		xl: "top-2.5 h-7 min-w-7 text-sm",
+		xs: "top-0.5 h-4 min-w-4 text-[10px]"
+	} }
 });
 const SidebarMenuBadge = ({ className, size, ...props }) => {
 	const { size: menuSize } = useContext(SidebarMenuContext);
@@ -198,23 +197,23 @@ 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 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",
+	base: "peer/menu-button group/menu-button cursor-clickable ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md text-left 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! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:font-medium [&_svg]:shrink-0 [&>span:last-child]:truncate",
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	},
 	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"
+			md: "h-8 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4",
+			sm: "h-7 px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+			xl: "h-11 px-3 py-2 text-base [&_svg:not([class*='size-'])]:size-5",
+			xs: "h-6 px-1.5 py-1 text-xs [&_svg:not([class*='size-'])]:size-3"
+		},
+		variant: {
+			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+			outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--kb-sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--kb-sidebar-accent))]"
 		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "md"
 	}
 });
 const SidebarMenuButton = ({ render, isActive = false, variant = "default", size, tooltip, className, ...props }) => {
@@ -229,10 +228,10 @@ const SidebarMenuButton = ({ render, isActive = false, variant = "default", size
 		}), className) }, props),
 		render: tooltip ? TooltipTrigger : render,
 		state: {
-			slot: "sidebar-menu-button",
+			active: isActive,
 			sidebar: "menu-button",
 			size: resolvedSize,
-			active: isActive
+			slot: "sidebar-menu-button"
 		}
 	});
 	if (!tooltip) return comp;
@@ -258,14 +257,14 @@ const SidebarMenuItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
 //#region src/ui/sidebar/sidebar-menu-skeleton.tsx
 const sidebarMenuSkeletonVariants = tv({
 	base: "flex items-center gap-2 rounded-md",
+	defaultVariants: { size: "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" }
+		md: "h-8 px-2",
+		sm: "h-7 px-2",
+		xl: "h-11 px-3",
+		xs: "h-6 px-1.5"
+	} }
 });
 const SidebarMenuSkeleton = ({ className, size, showIcon = false, ...props }) => {
 	const { size: menuSize } = useContext(SidebarMenuContext);
@@ -290,15 +289,15 @@ const SidebarMenuSkeleton = ({ className, size, showIcon = false, ...props }) =>
 //#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",
+	base: "border-sidebar-border flex min-w-0 translate-x-px flex-col border-l group-data-[collapsible=icon]:hidden",
+	defaultVariants: { size: "md" },
 	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" }
+		md: "mx-3.5 gap-1 px-2.5 py-0.5",
+		sm: "mx-3 gap-1 px-2 py-0.5",
+		xl: "mx-4.5 gap-1.5 px-3.5 py-1",
+		xs: "mx-2.5 gap-0.5 px-1.5 py-0.5"
+	} }
 });
 const SidebarMenuSub = ({ className, size, ...props }) => {
 	const { size: menuSize } = useContext(SidebarMenuContext);
@@ -315,15 +314,15 @@ const SidebarMenuSub = ({ className, size, ...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",
+	base: "cursor-clickable text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex min-w-0 -translate-x-px items-center overflow-hidden rounded-md outline-hidden group-data-[collapsible=icon]:hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
+	defaultVariants: { size: "md" },
 	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" }
+		md: "h-8 gap-2 px-2 text-sm [&>svg:not([class*='size-'])]:size-4",
+		sm: "h-7 gap-2 px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5",
+		xl: "h-10 gap-2.5 px-3 text-base [&>svg:not([class*='size-'])]:size-5",
+		xs: "h-6 gap-1.5 px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3"
+	} }
 });
 const SidebarMenuSubButton = ({ render, size, isActive = false, className, ...props }) => {
 	const { size: menuSize } = useContext(SidebarMenuContext);
@@ -333,10 +332,10 @@ const SidebarMenuSubButton = ({ render, size, isActive = false, className, ...pr
 		props: mergeProps({ className: cn(sidebarMenuSubButtonVariants({ size: resolvedSize }), className) }, props),
 		render,
 		state: {
-			slot: "sidebar-menu-sub-button",
+			active: isActive,
 			sidebar: "menu-sub-button",
 			size: resolvedSize,
-			active: isActive
+			slot: "sidebar-menu-sub-button"
 		}
 	});
 };
@@ -376,12 +375,12 @@ const SidebarProvider = ({ defaultOpen = true, open: openProp, onOpenChange: set
 	}, [toggleSidebar]);
 	const state = open ? "expanded" : "collapsed";
 	const contextValue = useMemo(() => ({
-		state,
-		open,
-		setOpen,
 		isMobile,
+		open,
 		openMobile,
+		setOpen,
 		setOpenMobile,
+		state,
 		toggleSidebar
 	}), [
 		state,
@@ -394,7 +393,7 @@ const SidebarProvider = ({ defaultOpen = true, open: openProp, onOpenChange: set
 	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),
+			className: cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className),
 			"data-slot": "sidebar-wrapper",
 			style: {
 				"--sidebar-width": SIDEBAR_WIDTH,
@@ -410,16 +409,18 @@ const SidebarProvider = ({ defaultOpen = true, open: openProp, onOpenChange: set
 //#endregion
 //#region src/ui/sidebar/sidebar-rail.tsx
 const SidebarRail = ({ className, ...props }) => {
-	const { toggleSidebar } = useSidebar();
+	const { state, toggleSidebar } = useSidebar();
+	const isExpanded = state === "expanded";
+	const label = isExpanded ? "Collapse Sidebar" : "Expand Sidebar";
 	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),
+		"aria-expanded": isExpanded,
+		"aria-label": label,
+		className: cn("z-elevated focus-visible:ring-sidebar-ring hover:after:bg-sidebar-border focus-visible:after:bg-sidebar-border absolute inset-y-0 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] focus-visible:ring-2 focus-visible:outline-none sm:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full", "[[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",
+		title: label,
 		...props
 	});
 };
@@ -427,7 +428,7 @@ const SidebarRail = ({ className, ...props }) => {
 //#endregion
 //#region src/ui/sidebar/sidebar-separator.tsx
 const SidebarSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(Separator, {
-	className: cn("w-auto bg-sidebar-border", className),
+	className: cn("bg-sidebar-border w-auto", className),
 	"data-sidebar": "separator",
 	"data-slot": "sidebar-separator",
 	...props
@@ -441,12 +442,12 @@ const SidebarTrigger = ({ className, onClick, ...props }) => {
 		onClick?.(event);
 		toggleSidebar();
 	}, [onClick, toggleSidebar]);
-	return /* @__PURE__ */ jsxs(Button, {
-		className: cn(className),
+	return /* @__PURE__ */ jsxs(ActionIcon, {
+		className: cn("cursor-clickable", className),
 		"data-sidebar": "trigger",
 		"data-slot": "sidebar-trigger",
 		onClick: handleClick,
-		size: "icon-sm",
+		size: "sm",
 		variant: "ghost",
 		...props,
 		children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
@@ -464,7 +465,7 @@ const SidebarTrigger = ({ className, onClick, ...props }) => {
 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),
+		className: cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className),
 		"data-slot": "sidebar",
 		...props,
 		children
@@ -474,7 +475,7 @@ const Sidebar = ({ side = "left", variant = "sidebar", collapsible = "offExample
 		open: openMobile,
 		...props,
 		children: /* @__PURE__ */ jsxs(SheetContent, {
-			className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+			className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
 			"data-mobile": "true",
 			"data-sidebar": "sidebar",
 			"data-slot": "sidebar",
@@ -490,7 +491,7 @@ const Sidebar = ({ side = "left", variant = "sidebar", collapsible = "offExample
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "group peer hidden text-sidebar-foreground md:block",
+		className: "group peer text-sidebar-foreground hidden md:block",
 		"data-collapsible": state === "collapsed" ? collapsible : "",
 		"data-side": side,
 		"data-slot": "sidebar",
@@ -500,11 +501,11 @@ const Sidebar = ({ side = "left", variant = "sidebar", collapsible = "offExample
 			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),
+			className: cn("z-raised fixed inset-y-0 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",
+				className: "bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1",
 				"data-sidebar": "sidebar",
 				"data-slot": "sidebar-inner",
 				children