@codefast/ui 0.3.16-canary.3 → 0.4.0-canary.5

package/dist/components/sidebar.mjs

@@ -1,18 +1,17 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
-import { Separator } from "./separator.mjs";
 import { Button } from "./button.mjs";
+import { Separator as Separator$1 } from "./separator.mjs";
 import { Input } from "./input.mjs";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.mjs";
-import { sidebarMenuButtonVariants } from "../variants/sidebar.mjs";
 import { Skeleton } from "./skeleton.mjs";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.mjs";
+import { Tooltip as Tooltip$1, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.mjs";
 import { useIsMobile } from "../hooks/use-is-mobile.mjs";
-import { Slot } from "@radix-ui/react-slot";
+import { sidebarMenuButtonVariants } from "../variants/sidebar.mjs";
 import { PanelLeftIcon } from "lucide-react";
+import { Slot } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
-import { createContext } from "@radix-ui/react-context";
+import { Context } from "radix-ui/internal";
 //#region src/components/sidebar.tsx
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 3600 * 24 * 7;
@@ -20,7 +19,7 @@ const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3.0625rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
-const [SidebarContextProvider, useSidebar] = createContext("SidebarProvider");
+const [SidebarContextProvider, useSidebar] = Context.createContext("SidebarProvider");
 /**
 * @since 0.3.16-canary.0
 */
@@ -62,7 +61,7 @@ function SidebarProvider({ children, className, defaultOpen = true, onOpenChange
 		children: /* @__PURE__ */ jsx(TooltipProvider, {
 			delayDuration: 0,
 			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 flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className),
 				"data-slot": "sidebar-wrapper",
 				style: {
 					"--sidebar-width": SIDEBAR_WIDTH,
@@ -82,7 +81,7 @@ const SIDEBAR_NAME = "Sidebar";
 function Sidebar({ children, className, collapsible = "offcanvas", side = "left", variant = "sidebar", ...props }) {
 	const { isMobile, openMobile, setOpenMobile, state } = useSidebar(SIDEBAR_NAME);
 	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("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className),
 		"data-slot": "sidebar",
 		...props,
 		children
@@ -92,7 +91,7 @@ function Sidebar({ children, className, collapsible = "offcanvas", side = "left"
 		onOpenChange: setOpenMobile,
 		...props,
 		children: /* @__PURE__ */ jsxs(SheetContent, {
-			className: cn("w-(--sidebar-width) p-0", "bg-sidebar text-sidebar-foreground", "[&>button]:hidden"),
+			className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
 			"data-mobile": "true",
 			"data-sidebar": "sidebar",
 			"data-slot": "sidebar",
@@ -108,21 +107,22 @@ function Sidebar({ children, className, collapsible = "offcanvas", side = "left"
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("group peer hidden", "text-sidebar-foreground", "md:block", className),
+		className: cn("group peer hidden text-sidebar-foreground md:block", className),
 		"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", "motion-reduce:transition-none motion-reduce:duration-0", "group-data-[collapsible=offcanvas]:w-0", "group-data-side-right:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"),
+			className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-gentle group-data-[collapsible=offcanvas]:w-0 group-data-side-right:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--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", "motion-reduce:transition-none motion-reduce:duration-0", "md:flex", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-side-right:border-l group-data-side-left:border-r", className),
+			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-gentle md:flex data-side-right:right-0 data-side-right:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] data-side-left:left-0 data-side-left:group-data-[collapsible=offcanvas]:left-[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-right:border-l group-data-side-left:border-r", className),
+			"data-side": side,
 			"data-slot": "sidebar-container",
 			...props,
 			children: /* @__PURE__ */ jsx("div", {
-				className: cn("flex h-full w-full flex-col", "bg-sidebar", "group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"),
+				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
@@ -134,20 +134,19 @@ const SIDEBAR_TRIGGER_NAME = "SidebarTrigger";
 /**
 * @since 0.3.16-canary.0
 */
-function SidebarTrigger({ className, onClick, ...props }) {
+function SidebarTrigger({ onClick, ...props }) {
 	const { toggleSidebar } = useSidebar(SIDEBAR_TRIGGER_NAME);
 	return /* @__PURE__ */ jsxs(Button, {
-		className: cn("size-7", className),
 		"data-sidebar": "trigger",
 		"data-slot": "sidebar-trigger",
-		size: "icon",
+		size: "icon-sm",
 		variant: "ghost",
 		onClick: (event) => {
 			onClick?.(event);
 			toggleSidebar();
 		},
 		...props,
-		children: [/* @__PURE__ */ jsx(PanelLeftIcon, {}), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(PanelLeftIcon, { className: "rtl:rotate-180" }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Toggle Sidebar"
 		})]
@@ -160,7 +159,7 @@ const SIDEBAR_RAIL_NAME = "SidebarRail";
 function SidebarRail({ className, ...props }) {
 	const { toggleSidebar } = useSidebar(SIDEBAR_RAIL_NAME);
 	return /* @__PURE__ */ jsx("button", {
-		className: cn("absolute inset-y-0 z-20 hidden", "w-4 -translate-x-1/2 transition-all ease-linear", "motion-reduce:transition-none", "in-data-side-right:cursor-e-resize", "in-data-side-left:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0", "group-data-side-right:left-0", "group-data-side-left:-right-4", "after:absolute after:inset-y-0 after:left-1/2 after:w-0.5", "group-data-[collapsible=offcanvas]:after:left-full", "hover:group-data-[collapsible=offcanvas]:bg-sidebar", "hover:after:bg-sidebar-border", "sm:flex", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", "[[data-side=right][data-state=collapsed]_&]:cursor-w-resize", className),
+		className: cn("absolute inset-y-0 z-20 hidden w-4 transition-all ease-gentle group-data-[collapsible=offcanvas]:translate-x-0 group-data-side-right:left-0 group-data-side-left:-right-4 after:absolute after:inset-y-0 after:inset-s-1/2 after:w-0.5 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar hover:after:bg-sidebar-border in-data-side-right:cursor-e-resize in-data-side-left:cursor-w-resize sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2 rtl:group-data-[collapsible=offcanvas]:-translate-x-0 rtl:in-data-side-right:cursor-w-resize rtl:in-data-side-left:cursor-e-resize [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=left][data-state=collapsed]_&]:cursor-e-resize rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize [[data-side=right][data-collapsible=offcanvas]_&]:-left-2 [[data-side=right][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-e-resize", className),
 		"data-sidebar": "rail",
 		"data-slot": "sidebar-rail",
 		title: "Toggle Sidebar",
@@ -174,7 +173,7 @@ function SidebarRail({ className, ...props }) {
 */
 function SidebarInset({ className, ...props }) {
 	return /* @__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("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-collapsed:ms-2", className),
 		"data-slot": "sidebar-inset",
 		...props
 	});
@@ -184,7 +183,7 @@ function SidebarInset({ className, ...props }) {
 */
 function SidebarInput({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Input, {
-		className: cn("h-8 w-full", "bg-background shadow-none", className),
+		className: cn("h-8 w-full bg-background shadow-none", className),
 		"data-sidebar": "input",
 		"data-slot": "sidebar-input",
 		...props
@@ -195,7 +194,7 @@ function SidebarInput({ className, ...props }) {
 */
 function SidebarHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex flex-col gap-2", "p-2", className),
+		className: cn("flex flex-col gap-2 p-2", className),
 		"data-sidebar": "header",
 		"data-slot": "sidebar-header",
 		...props
@@ -206,7 +205,7 @@ function SidebarHeader({ className, ...props }) {
 */
 function SidebarFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex flex-col gap-2", "p-2", className),
+		className: cn("flex flex-col gap-2 p-2", className),
 		"data-sidebar": "footer",
 		"data-slot": "sidebar-footer",
 		...props
@@ -216,8 +215,8 @@ function SidebarFooter({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function SidebarSeparator({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Separator, {
-		className: cn("mx-2 w-auto", "bg-sidebar-border", className),
+	return /* @__PURE__ */ jsx(Separator$1, {
+		className: cn("mx-2 w-auto bg-sidebar-border", className),
 		"data-sidebar": "separator",
 		"data-slot": "sidebar-separator",
 		...props
@@ -228,7 +227,7 @@ function SidebarSeparator({ className, ...props }) {
 */
 function SidebarContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto", "group-data-[collapsible=icon]:overflow-hidden", className),
+		className: cn("flex min-h-0 flex-1 scrollbar-none flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
 		"data-sidebar": "content",
 		"data-slot": "sidebar-content",
 		...props
@@ -239,7 +238,7 @@ function SidebarContent({ className, ...props }) {
 */
 function SidebarGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("relative flex w-full min-w-0 flex-col", "p-2", className),
+		className: cn("relative flex w-full min-w-0 flex-col p-2", className),
 		"data-sidebar": "group",
 		"data-slot": "sidebar-group",
 		...props
@@ -249,8 +248,8 @@ function SidebarGroup({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function SidebarGroupLabel({ asChild = false, className, ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
-		className: cn("flex h-8 shrink-0 items-center px-2", "rounded-md ring-sidebar-ring outline-hidden", "truncate text-xs font-medium text-sidebar-foreground/70", "transition-[margin,opacity] duration-200 ease-linear", "motion-reduce:transition-none motion-reduce:duration-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", "focus-visible:ring-3", "[&>svg]:size-4 [&>svg]:shrink-0", className),
+	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "div", {
+		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-gentle group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className),
 		"data-sidebar": "group-label",
 		"data-slot": "sidebar-group-label",
 		...props
@@ -260,8 +259,8 @@ function SidebarGroupLabel({ asChild = false, className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function SidebarGroupAction({ asChild = false, className, ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
-		className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center p-0", "rounded-md ring-sidebar-ring outline-hidden", "text-sidebar-foreground", "transition-transform", "motion-reduce:transition-none", "group-data-[collapsible=icon]:hidden", "after:absolute after:-inset-2", "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", "focus-visible:ring-3", "md:after:hidden", "[&>svg]:size-4 [&>svg]:shrink-0", className),
+	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "button", {
+		className: cn("absolute end-3 top-3.5 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),
 		"data-sidebar": "group-action",
 		"data-slot": "sidebar-group-action",
 		...props
@@ -272,7 +271,7 @@ function SidebarGroupAction({ asChild = false, className, ...props }) {
 */
 function SidebarGroupContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("w-full", "text-sm", className),
+		className: cn("w-full text-sm", className),
 		"data-sidebar": "group-content",
 		"data-slot": "sidebar-group-content",
 		...props
@@ -304,14 +303,15 @@ const SIDEBAR_MENU_BUTTON_NAME = "SidebarMenuButton";
 /**
 * @since 0.3.16-canary.0
 */
-function SidebarMenuButton({ asChild = false, className, isActive = false, size = "md", tooltip, variant = "default", ...props }) {
-	const Component = asChild ? Slot : "button";
+function SidebarMenuButton({ asChild = false, className, isActive = false, size = "default", tooltip, variant = "default", ...props }) {
+	const Component = asChild ? Slot.Root : "button";
 	const { isMobile, state } = useSidebar(SIDEBAR_MENU_BUTTON_NAME);
 	const button = /* @__PURE__ */ jsx(Component, {
-		className: cn(sidebarMenuButtonVariants({
+		className: sidebarMenuButtonVariants({
 			size,
-			variant
-		}), className),
+			variant,
+			className
+		}),
 		"data-active": isActive,
 		"data-sidebar": "menu-button",
 		"data-size": size,
@@ -320,7 +320,7 @@ function SidebarMenuButton({ asChild = false, className, isActive = false, size
 	});
 	if (!tooltip) return button;
 	if (typeof tooltip === "string") tooltip = { children: tooltip };
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+	return /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 		asChild: true,
 		children: button
 	}), /* @__PURE__ */ jsx(TooltipContent, {
@@ -334,8 +334,8 @@ function SidebarMenuButton({ asChild = false, className, isActive = false, size
 * @since 0.3.16-canary.0
 */
 function SidebarMenuAction({ asChild = false, className, showOnHover = false, ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
-		className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center p-0", "rounded-md ring-sidebar-ring outline-hidden", "text-sidebar-foreground", "transition-transform", "motion-reduce:transition-none", "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-3", "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 md:opacity-0 data-open:opacity-100", className),
+	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "button", {
+		className: cn("absolute end-1 top-1.5 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 aria-expanded:opacity-100 md:opacity-0", className),
 		"data-sidebar": "menu-action",
 		"data-slot": "sidebar-menu-action",
 		...props
@@ -346,7 +346,7 @@ function SidebarMenuAction({ asChild = false, className, showOnHover = false, ..
 */
 function SidebarMenuBadge({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("absolute right-1 flex h-5 min-w-5 items-center justify-center px-1", "rounded-md", "text-xs font-medium text-sidebar-foreground tabular-nums", "pointer-events-none select-none", "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", "peer-data-active/menu-button:text-sidebar-accent-foreground", className),
+		className: cn("pointer-events-none absolute end-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-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground", className),
 		"data-sidebar": "menu-badge",
 		"data-slot": "sidebar-menu-badge",
 		...props
@@ -358,12 +358,12 @@ function SidebarMenuBadge({ className, ...props }) {
 function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
 	const [width] = useState(() => `${String(Math.floor(Math.random() * 40) + 50)}%`);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex h-8 items-center gap-2 px-2", "rounded-md", className),
+		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: cn("size-4", "rounded-md"),
+			className: "size-4 rounded-md",
 			"data-sidebar": "menu-skeleton-icon"
 		}) : null, /* @__PURE__ */ jsx(Skeleton, {
 			className: "h-4 max-w-(--skeleton-width) flex-1",
@@ -377,7 +377,7 @@ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
 */
 function SidebarMenuSub({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ul", {
-		className: cn("mx-3.5 flex min-w-0 flex-col gap-1 px-2.5 py-0.5", "border-l border-sidebar-border", "translate-x-px", "group-data-[collapsible=icon]:hidden", className),
+		className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden rtl:-translate-x-px", className),
 		"data-sidebar": "menu-sub",
 		"data-slot": "sidebar-menu-sub",
 		...props
@@ -398,8 +398,8 @@ function SidebarMenuSubItem({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function SidebarMenuSubButton({ asChild = false, className, isActive = false, size = "md", ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
-		className: cn("flex h-7 min-w-0 items-center gap-2 overflow-hidden px-2", "rounded-md ring-sidebar-ring outline-hidden", "text-sidebar-foreground", "-translate-x-px", "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", "focus-visible:ring-3", "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", "group-data-[collapsible=icon]:hidden", "[&>span:last-child]:truncate", "[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", className),
+	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "a", {
+		className: cn("flex h-7 min-w-0 -translate-x-px 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-[size=md]:text-sm data-[size=sm]:text-xs rtl:translate-x-px data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className),
 		"data-active": isActive,
 		"data-sidebar": "menu-sub-button",
 		"data-size": size,

package/dist/components/skeleton.mjs

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function Skeleton({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("rounded-lg", "bg-gradient-to-r from-muted via-white/15 to-muted bg-[length:400%_100%]", "animate-shimmer motion-reduce:animate-none", className),
+		className: cn("animate-shimmer rounded-md bg-linear-to-r from-muted via-white/15 to-muted bg-size-[400%_100%]", className),
 		"data-slot": "skeleton",
 		...props
 	});

package/dist/components/slider.d.mts

@@ -1,11 +1,11 @@
+import { Slider as Slider$1 } from "radix-ui";
 import { ComponentProps, JSX } from "react";
-import * as SliderPrimitive from "@radix-ui/react-slider";
 
 //#region src/components/slider.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-type SliderProps = ComponentProps<typeof SliderPrimitive.Root>;
+type SliderProps = ComponentProps<typeof Slider$1.Root>;
 /**
  * @since 0.3.16-canary.0
  */

package/dist/components/slider.mjs

@@ -1,8 +1,7 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
+import { Slider as Slider$1 } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import * as SliderPrimitive from "@radix-ui/react-slider";
 //#region src/components/slider.tsx
 /**
 * @since 0.3.16-canary.0
@@ -17,24 +16,23 @@ function Slider({ className, defaultValue, max = 100, min = 0, value, ...props }
 		min,
 		max
 	]);
-	return /* @__PURE__ */ jsxs(SliderPrimitive.Root, {
-		className: cn("relative flex w-full items-center", "touch-none select-none", "data-vertical:h-full data-vertical:min-h-44 data-vertical:w-auto data-vertical:flex-col", "data-disabled:opacity-50", className),
+	return /* @__PURE__ */ jsxs(Slider$1.Root, {
+		className: cn("relative flex w-full touch-none items-center select-none data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col data-disabled:opacity-50", className),
 		"data-slot": "slider",
 		defaultValue,
 		max,
 		min,
 		value,
 		...props,
-		children: [/* @__PURE__ */ jsx(SliderPrimitive.Track, {
-			className: cn("relative", "w-full grow overflow-hidden", "rounded-full", "bg-input", "data-horizontal:h-1 data-horizontal:w-full", "data-vertical:h-full data-vertical:w-1"),
+		children: [/* @__PURE__ */ jsx(Slider$1.Track, {
+			className: "relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5",
 			"data-slot": "slider-track",
-			children: /* @__PURE__ */ jsx(SliderPrimitive.Range, {
-				className: cn("absolute", "bg-primary", "data-horizontal:h-full", "data-vertical:w-full"),
+			children: /* @__PURE__ */ jsx(Slider$1.Range, {
+				className: "absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full",
 				"data-slot": "slider-range"
 			})
-		}), Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(SliderPrimitive.Thumb, {
-			"aria-label": "Volume",
-			className: cn("flex size-4 items-center justify-center", "rounded-full border-2 border-primary", "bg-primary shadow-sm outline-hidden", "after:size-full after:rounded-full after:bg-background after:transition-[width,height] after:duration-200 after:ease-spring", "motion-reduce:after:transition-none motion-reduce:after:duration-0", "focus-visible:ring-4 focus-visible:ring-primary/20", "active:not-data-disabled:after:size-1", "dark:focus-visible:ring-primary/40"),
+		}), Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
+			className: "block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
 			"data-slot": "slider-thumb"
 		}, index))]
 	});

package/dist/components/sonner.mjs

@@ -1,5 +1,4 @@
-"use client";
-import { cn } from "../lib/utils.mjs";
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 import { useTheme } from "next-themes";
 import { Toaster as Toaster$1, toast, useSonner } from "sonner";
@@ -10,13 +9,22 @@ import { Toaster as Toaster$1, toast, useSonner } from "sonner";
 function Toaster({ ...props }) {
 	const { theme = "system" } = useTheme();
 	return /* @__PURE__ */ jsx(Toaster$1, {
-		className: cn("group", "toaster"),
+		className: "toaster group",
+		icons: {
+			error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
+			info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
+			loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" }),
+			success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
+			warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" })
+		},
 		style: {
+			"--border-radius": "var(--radius)",
 			"--normal-bg": "var(--popover)",
 			"--normal-border": "var(--border)",
 			"--normal-text": "var(--popover-foreground)"
 		},
 		theme,
+		toastOptions: { classNames: { toast: "rounded-2xl" } },
 		...props
 	});
 }

package/dist/components/spinner.mjs

@@ -1,7 +1,6 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
+import { VisuallyHidden } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 //#region src/components/spinner.tsx
 const SPINNER_COUNT = 8;
 /**
@@ -10,10 +9,10 @@ const SPINNER_COUNT = 8;
 function Spinner({ children, className, loading = true, ...props }) {
 	if (!loading) return children;
 	const spinner = /* @__PURE__ */ jsx("span", {
-		className: cn("relative flex size-4 items-center justify-center", "opacity-60", className),
+		className: cn("relative flex size-4 items-center justify-center opacity-60", className),
 		...props,
 		children: Array.from({ length: SPINNER_COUNT }, (_, index) => /* @__PURE__ */ jsx("span", {
-			className: cn("absolute", "h-full rotate-(--spinner-rotate)", "before:block before:h-1/3 before:w-full before:animate-out before:rounded-full before:bg-current before:delay-(--spinner-delay) before:animation-duration-(--spinner-duration) before:fade-out-25 before:repeat-infinite motion-reduce:before:animate-none"),
+			className: "absolute h-full rotate-(--spinner-rotate) before:block before:h-1/3 before:w-full before:animate-out before:rounded-full before:bg-current before:delay-(--spinner-delay) before:animation-duration-(--spinner-duration) before:fade-out-25 before:repeat-infinite motion-reduce:before:animate-none",
 			style: {
 				"--spinner-delay": `-${((SPINNER_COUNT - index) * 100).toString()}ms`,
 				"--spinner-duration": `${(SPINNER_COUNT * 100).toString()}ms`,
@@ -28,12 +27,12 @@ function Spinner({ children, className, loading = true, ...props }) {
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("contents", "invisible"),
+				className: "invisible contents",
 				children
 			}),
-			/* @__PURE__ */ jsx(VisuallyHidden, { children }),
+			/* @__PURE__ */ jsx(VisuallyHidden.Root, { children }),
 			/* @__PURE__ */ jsx("span", {
-				className: cn("absolute flex items-center justify-center", "inset-0"),
+				className: "absolute inset-0 flex items-center justify-center",
 				children: spinner
 			})
 		]

package/dist/components/switch.d.mts

@@ -1,16 +1,19 @@
+import { Switch as Switch$1 } from "radix-ui";
 import { ComponentProps, JSX } from "react";
-import * as SwitchPrimitives from "@radix-ui/react-switch";
 
 //#region src/components/switch.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-type SwitchProps = ComponentProps<typeof SwitchPrimitives.Root>;
+type SwitchProps = ComponentProps<typeof Switch$1.Root> & {
+  size?: "default" | "sm";
+};
 /**
  * @since 0.3.16-canary.0
  */
 declare function Switch({
   className,
+  size,
   ...props
 }: SwitchProps): JSX.Element;
 //#endregion

package/dist/components/switch.mjs

@@ -1,18 +1,18 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
+import { Switch as Switch$1 } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
-import * as SwitchPrimitives from "@radix-ui/react-switch";
 //#region src/components/switch.tsx
 /**
 * @since 0.3.16-canary.0
 */
-function Switch({ className, ...props }) {
-	return /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
-		className: cn("peer group/switch inline-flex h-5 w-9 shrink-0 items-center p-0.75", "rounded-full border border-transparent shadow-xs outline-hidden", "transition-[background-color,box-shadow] duration-200 ease-snappy", "motion-reduce:transition-none motion-reduce:duration-0", "active:not-disabled:inset-shadow-sm", "focus-visible:ring-3 focus-visible:ring-ring/50", "focus-visible:not-data-checked:border-ring/60", "disabled:opacity-50", "data-checked:bg-primary", "data-checked:focus-visible:ring-primary/20", "dark:data-checked:focus-visible:ring-primary/40", "data-unchecked:bg-input", "dark:data-unchecked:bg-input/80", className),
+function Switch({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		className: cn("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all duration-control ease-snappy outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-4.5 data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		"data-size": size,
 		"data-slot": "switch",
 		...props,
-		children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, {
-			className: cn("block", "size-3.5", "rounded-full", "bg-background shadow-sm", "pointer-events-none", "transition-transform duration-300 ease-spring", "motion-reduce:transition-none motion-reduce:duration-0", "dark:not-data-checked:bg-foreground", "data-checked:translate-x-3.5", "data-unchecked:translate-x-0"),
+		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
+			className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform duration-control-indicator ease-spring group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-3.5 group-data-[size=sm]/switch:data-checked:translate-x-2.5 rtl:group-data-[size=default]/switch:data-checked:-translate-x-3.5 rtl:group-data-[size=sm]/switch:data-checked:-translate-x-2.5 dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-unchecked:-translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:-translate-x-0 dark:data-unchecked:bg-foreground",
 			"data-slot": "switch-thumb"
 		})
 	});

package/dist/components/table.mjs

@@ -6,10 +6,10 @@ import { jsx } from "react/jsx-runtime";
 */
 function Table({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("relative", "w-full overflow-auto"),
-		"data-slot": "table-cotainer",
+		className: "relative w-full overflow-x-auto",
+		"data-slot": "table-container",
 		children: /* @__PURE__ */ jsx("table", {
-			className: cn("w-full text-sm", "caption-bottom", className),
+			className: cn("w-full caption-bottom text-sm", className),
 			"data-slot": "table",
 			...props
 		})
@@ -20,7 +20,7 @@ function Table({ className, ...props }) {
 */
 function TableHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("thead", {
-		className: cn("*:border-b", "*:has-aria-expanded:bg-transparent", className),
+		className: cn("[&_tr]:border-b", className),
 		"data-slot": "table-header",
 		...props
 	});
@@ -30,7 +30,7 @@ function TableHeader({ className, ...props }) {
 */
 function TableBody({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tbody", {
-		className: cn("*:last-child:border-0", className),
+		className: cn("[&_tr:last-child]:border-0", className),
 		"data-slot": "table-body",
 		...props
 	});
@@ -40,7 +40,7 @@ function TableBody({ className, ...props }) {
 */
 function TableFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tfoot", {
-		className: cn("bg-muted/50 font-medium", "*:border-t *:border-b-0", "*:has-aria-expanded:bg-transparent", className),
+		className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
 		"data-slot": "table-footer",
 		...props
 	});
@@ -50,7 +50,7 @@ function TableFooter({ className, ...props }) {
 */
 function TableRow({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tr", {
-		className: cn("border-b", "transition-colors", "motion-reduce:transition-none", "hover:bg-muted/50", "has-aria-expanded:bg-muted/50", "data-selected:bg-muted", className),
+		className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-selected:bg-muted", className),
 		"data-slot": "table-row",
 		...props
 	});
@@ -60,7 +60,7 @@ function TableRow({ className, ...props }) {
 */
 function TableHead({ className, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
-		className: cn("p-2", "text-left align-middle font-medium", className),
+		className: cn("h-10 px-2 text-start align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pe-0", className),
 		"data-slot": "table-head",
 		...props
 	});
@@ -70,7 +70,7 @@ function TableHead({ className, ...props }) {
 */
 function TableCell({ className, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
-		className: cn("p-2", "align-middle", className),
+		className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0", className),
 		"data-slot": "table-cell",
 		...props
 	});
@@ -80,7 +80,7 @@ function TableCell({ className, ...props }) {
 */
 function TableCaption({ className, ...props }) {
 	return /* @__PURE__ */ jsx("caption", {
-		className: cn("mt-4", "text-sm text-muted-foreground", className),
+		className: cn("mt-4 text-sm text-muted-foreground", className),
 		"data-slot": "table-caption",
 		...props
 	});

package/dist/components/tabs.d.mts

@@ -1,33 +1,36 @@
+import { TabsListVariants } from "../variants/tabs.mjs";
+import { Tabs as Tabs$1 } from "radix-ui";
 import { ComponentProps, JSX } from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
 
 //#region src/components/tabs.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-type TabsProps = ComponentProps<typeof TabsPrimitive.Root>;
+type TabsProps = ComponentProps<typeof Tabs$1.Root>;
 /**
  * @since 0.3.16-canary.0
  */
 declare function Tabs({
   className,
+  orientation,
   ...props
 }: TabsProps): JSX.Element;
 /**
  * @since 0.3.16-canary.0
  */
-type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
+type TabsListProps = ComponentProps<typeof Tabs$1.List> & TabsListVariants;
 /**
  * @since 0.3.16-canary.0
  */
 declare function TabsList({
   className,
+  variant,
   ...props
 }: TabsListProps): JSX.Element;
 /**
  * @since 0.3.16-canary.0
  */
-type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;
+type TabsTriggerProps = ComponentProps<typeof Tabs$1.Trigger>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -38,7 +41,7 @@ declare function TabsTrigger({
 /**
  * @since 0.3.16-canary.0
  */
-type TabsContentProps = ComponentProps<typeof TabsPrimitive.Content>;
+type TabsContentProps = ComponentProps<typeof Tabs$1.Content>;
 /**
  * @since 0.3.16-canary.0
  */