@codefast/ui 0.3.16-canary.2 → 0.4.0-canary.4

package/dist/components/sheet.mjs

@@ -1,69 +1,24 @@
-"use client";
-import { cn, tv } from "../lib/utils.mjs";
-import { buttonVariants } from "./button.mjs";
+import { cn } from "../lib/utils.mjs";
+import { buttonVariants } from "../variants/button.mjs";
+import { sheetContentVariants } from "../variants/sheet.mjs";
 import { XIcon } from "lucide-react";
+import { Dialog } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as SheetPrimitive from "@radix-ui/react-dialog";
 //#region src/components/sheet.tsx
 /**
 * @since 0.3.16-canary.0
 */
-const sheetContentVariants = tv({
-	base: [
-		"fixed z-50 flex flex-col overflow-auto",
-		"bg-background shadow-lg",
-		"ease-ui data-open:animate-in data-open:animation-duration-500",
-		"data-closed:animate-out data-closed:animation-duration-500"
-	],
-	defaultVariants: { side: "right" },
-	variants: { side: {
-		bottom: [
-			"max-h-[80vh]",
-			"inset-x-0 bottom-0",
-			"border-t",
-			"data-open:slide-in-from-bottom",
-			"data-closed:slide-out-to-bottom"
-		],
-		left: [
-			"h-full w-3/4",
-			"inset-y-0 left-0",
-			"border-r",
-			"sm:max-w-sm",
-			"data-open:slide-in-from-left",
-			"data-closed:slide-out-to-left"
-		],
-		right: [
-			"h-full w-3/4",
-			"inset-y-0 right-0",
-			"border-l",
-			"sm:max-w-sm",
-			"data-open:slide-in-from-right",
-			"data-closed:slide-out-to-right"
-		],
-		top: [
-			"max-h-[80vh]",
-			"inset-x-0 top-0",
-			"border-b",
-			"data-open:slide-in-from-top",
-			"data-closed:slide-out-to-top"
-		]
-	} }
-});
-/**
-* @since 0.3.16-canary.0
-*/
-function Sheet({ children, ...props }) {
-	return /* @__PURE__ */ jsx(SheetPrimitive.Root, {
+function Sheet({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
 		"data-slot": "sheet",
-		...props,
-		children
+		...props
 	});
 }
 /**
 * @since 0.3.16-canary.0
 */
 function SheetTrigger({ ...props }) {
-	return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
 		"data-slot": "sheet-trigger",
 		...props
 	});
@@ -71,37 +26,41 @@ function SheetTrigger({ ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
-function SheetContent({ children, className, classNames, side = "right", ...props }) {
-	return /* @__PURE__ */ jsxs(SheetPrimitive.Portal, { children: [/* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
-		className: cn("fixed inset-0 z-50", "bg-black/50", "ease-ui data-open:animate-in data-open:animation-duration-500 data-open:fade-in-0", "data-closed:animate-out data-closed:animation-duration-500 data-closed:fade-out-0", classNames?.overlay),
-		"data-slot": "sheet-overlay"
-	}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
-		className: sheetContentVariants({
-			className: [classNames?.content, className],
-			side
-		}),
-		"data-slot": "sheet-content",
-		...props,
-		children: [children, /* @__PURE__ */ jsxs(SheetPrimitive.Close, {
-			className: buttonVariants({
-				className: ["absolute top-4 right-4 size-7", classNames?.close],
-				size: "icon",
-				variant: "ghost"
+function SheetContent({ children, className, showCloseButton = true, side = "right", ...props }) {
+	return /* @__PURE__ */ jsxs(Dialog.Portal, {
+		"data-slot": "sheet-portal",
+		children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
+			className: "fixed inset-0 z-50 bg-black/10 ease-gentle supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:animation-duration-panel-in data-open:fade-in-0 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-panel-out data-closed:fade-out-0",
+			"data-slot": "sheet-overlay"
+		}), /* @__PURE__ */ jsxs(Dialog.Content, {
+			className: sheetContentVariants({
+				className,
+				side
 			}),
-			"data-slot": "sheet-close",
-			children: [/* @__PURE__ */ jsx(XIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: "Close"
-			})]
+			"data-side": side,
+			"data-slot": "sheet-content",
+			...props,
+			children: [children, showCloseButton ? /* @__PURE__ */ jsxs(Dialog.Close, {
+				className: buttonVariants({
+					className: "absolute top-4 right-4",
+					size: "icon-sm",
+					variant: "ghost"
+				}),
+				"data-slot": "sheet-close",
+				children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			}) : null]
 		})]
-	})] });
+	});
 }
 /**
 * @since 0.3.16-canary.0
 */
 function SheetHeader({ className, ...props }) {
-	return /* @__PURE__ */ jsx("header", {
-		className: cn("flex shrink-0 flex-col gap-1.5 px-6 pt-6 pb-4 text-center", "sm:text-left", className),
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex shrink-0 flex-col gap-1.5 p-4", className),
 		"data-slot": "sheet-header",
 		...props
 	});
@@ -110,8 +69,8 @@ function SheetHeader({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function SheetBody({ className, ...props }) {
-	return /* @__PURE__ */ jsx("main", {
-		className: cn("overflow-auto", "px-6 py-2", className),
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("min-h-0 flex-1 overflow-y-auto px-4", className),
 		"data-slot": "sheet-body",
 		...props
 	});
@@ -120,8 +79,8 @@ function SheetBody({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function SheetFooter({ className, ...props }) {
-	return /* @__PURE__ */ jsx("footer", {
-		className: cn("flex shrink-0 flex-col-reverse gap-2 px-6 pt-4 pb-6", "sm:flex-row sm:justify-end", className),
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("mt-auto flex shrink-0 flex-col gap-2 p-4", className),
 		"data-slot": "sheet-footer",
 		...props
 	});
@@ -130,8 +89,8 @@ function SheetFooter({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function SheetTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx(SheetPrimitive.Title, {
-		className: cn("text-lg font-semibold text-foreground", className),
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		className: cn("font-heading font-medium text-foreground", className),
 		"data-slot": "sheet-title",
 		...props
 	});
@@ -140,7 +99,7 @@ function SheetTitle({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function SheetDescription({ className, ...props }) {
-	return /* @__PURE__ */ jsx(SheetPrimitive.Description, {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
 		className: cn("text-sm text-muted-foreground", className),
 		"data-slot": "sheet-description",
 		...props
@@ -149,8 +108,8 @@ function SheetDescription({ className, ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
-function SheetClose({ className, size, variant = "outline", ...props }) {
-	return /* @__PURE__ */ jsx(SheetPrimitive.Close, {
+function SheetClose({ className, size, variant, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
 		className: buttonVariants({
 			className,
 			size,
@@ -161,4 +120,4 @@ function SheetClose({ className, size, variant = "outline", ...props }) {
 	});
 }
 //#endregion
-export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, sheetContentVariants };
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };

package/dist/components/sidebar.d.mts

@@ -1,26 +1,11 @@
-import { VariantProps } from "../lib/utils.mjs";
 import { Button } from "./button.mjs";
 import { Separator } from "./separator.mjs";
 import { Input } from "./input.mjs";
 import { TooltipContent } from "./tooltip.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { SidebarMenuButtonVariants } from "../variants/sidebar.mjs";
 import { ComponentProps, Dispatch, JSX, SetStateAction } from "react";
 
 //#region src/components/sidebar.d.ts
-/**
- * @since 0.3.16-canary.0
- */
-declare const sidebarMenuButtonVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  size: {
-    sm: string[];
-    md: string[];
-    lg: string[];
-  };
-  variant: {
-    default: string;
-    outline: string[];
-  };
-}, Record<string, never>>;
 interface SidebarContextValue {
   isMobile: boolean;
   open: boolean;
@@ -78,7 +63,6 @@ type SidebarTriggerProps = ComponentProps<typeof Button>;
  * @since 0.3.16-canary.0
  */
 declare function SidebarTrigger({
-  className,
   onClick,
   ...props
 }: SidebarTriggerProps): JSX.Element;
@@ -234,7 +218,7 @@ declare function SidebarMenuItem({
 /**
  * @since 0.3.16-canary.0
  */
-interface SidebarMenuButtonProps extends ComponentProps<"button">, VariantProps<typeof sidebarMenuButtonVariants> {
+interface SidebarMenuButtonProps extends ComponentProps<"button">, SidebarMenuButtonVariants {
   asChild?: boolean;
   isActive?: boolean;
   tooltip?: ComponentProps<typeof TooltipContent> | string;
@@ -333,4 +317,4 @@ declare function SidebarMenuSubButton({
   ...props
 }: SidebarMenuSubButtonProps): JSX.Element;
 //#endregion
-export { Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarGroup, SidebarGroupAction, type SidebarGroupActionProps, SidebarGroupContent, type SidebarGroupContentProps, SidebarGroupLabel, type SidebarGroupLabelProps, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarInput, type SidebarInputProps, SidebarInset, type SidebarInsetProps, SidebarMenu, SidebarMenuAction, type SidebarMenuActionProps, SidebarMenuBadge, type SidebarMenuBadgeProps, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, type SidebarMenuItemProps, type SidebarMenuProps, SidebarMenuSkeleton, type SidebarMenuSkeletonProps, SidebarMenuSub, SidebarMenuSubButton, type SidebarMenuSubButtonProps, SidebarMenuSubItem, type SidebarMenuSubItemProps, type SidebarMenuSubProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, type SidebarRailProps, SidebarSeparator, type SidebarSeparatorProps, SidebarTrigger, type SidebarTriggerProps, sidebarMenuButtonVariants, useSidebar };
+export { Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarGroup, SidebarGroupAction, type SidebarGroupActionProps, SidebarGroupContent, type SidebarGroupContentProps, SidebarGroupLabel, type SidebarGroupLabelProps, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarInput, type SidebarInputProps, SidebarInset, type SidebarInsetProps, SidebarMenu, SidebarMenuAction, type SidebarMenuActionProps, SidebarMenuBadge, type SidebarMenuBadgeProps, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, type SidebarMenuItemProps, type SidebarMenuProps, SidebarMenuSkeleton, type SidebarMenuSkeletonProps, SidebarMenuSub, SidebarMenuSubButton, type SidebarMenuSubButtonProps, SidebarMenuSubItem, type SidebarMenuSubItemProps, type SidebarMenuSubProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, type SidebarRailProps, SidebarSeparator, type SidebarSeparatorProps, SidebarTrigger, type SidebarTriggerProps, useSidebar };

package/dist/components/sidebar.mjs

@@ -1,62 +1,25 @@
-"use client";
-import { cn, tv } from "../lib/utils.mjs";
+import { cn } from "../lib/utils.mjs";
 import { Button } from "./button.mjs";
-import { Separator } from "./separator.mjs";
+import { Separator as Separator$1 } from "./separator.mjs";
 import { Input } from "./input.mjs";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.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
-/**
-* @since 0.3.16-canary.0
-*/
-const sidebarMenuButtonVariants = tv({
-	base: [
-		"peer/menu-button flex w-full items-center gap-2 overflow-hidden p-2",
-		"rounded-md ring-sidebar-ring outline-hidden",
-		"text-left text-sm",
-		"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-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-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground",
-		"data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground",
-		"[&>span:last-child]:truncate",
-		"[&>svg]:size-4 [&>svg]:shrink-0"
-	],
-	defaultVariants: {
-		size: "md",
-		variant: "default"
-	},
-	variants: {
-		size: {
-			sm: ["h-7", "text-xs"],
-			md: ["h-8", "text-sm"],
-			lg: ["h-12 text-sm", "group-data-[collapsible=icon]:p-0!"]
-		},
-		variant: {
-			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-			outline: ["bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))]", "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"]
-		}
-	}
-});
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 3600 * 24 * 7;
 const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3.0625rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
-const [SidebarContextProvider, useSidebar] = createContext("SidebarProvider");
+const [SidebarContextProvider, useSidebar] = Context.createContext("SidebarProvider");
 /**
 * @since 0.3.16-canary.0
 */
@@ -98,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,
@@ -118,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
@@ -128,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",
@@ -144,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", "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", "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
@@ -170,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"
 		})]
@@ -196,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", "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 [[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),
 		"data-sidebar": "rail",
 		"data-slot": "sidebar-rail",
 		title: "Toggle Sidebar",
@@ -210,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]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-collapsed:ml-2", className),
 		"data-slot": "sidebar-inset",
 		...props
 	});
@@ -220,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
@@ -231,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
@@ -242,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
@@ -252,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
@@ -264,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
@@ -275,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
@@ -285,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", "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
@@ -296,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", "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 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),
 		"data-sidebar": "group-action",
 		"data-slot": "sidebar-group-action",
 		...props
@@ -308,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
@@ -340,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,
@@ -356,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, {
@@ -370,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", "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 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 aria-expanded:opacity-100 md:opacity-0", className),
 		"data-sidebar": "menu-action",
 		"data-slot": "sidebar-menu-action",
 		...props
@@ -382,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 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-[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
@@ -394,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",
@@ -413,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-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
@@ -434,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 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,
@@ -444,4 +408,4 @@ function SidebarMenuSubButton({ asChild = false, className, isActive = false, si
 	});
 }
 //#endregion
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarMenuButtonVariants, useSidebar };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };

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-muted", "animate-pulse", 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
  */