@codefast/ui 0.3.16-canary.2 → 0.3.16-canary.3

package/dist/components/sheet.mjs

@@ -1,6 +1,7 @@
 "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 { jsx, jsxs } from "react/jsx-runtime";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
@@ -8,50 +9,6 @@ import * as SheetPrimitive from "@radix-ui/react-dialog";
 /**
 * @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, {
 		"data-slot": "sheet",
@@ -73,7 +30,7 @@ function SheetTrigger({ ...props }) {
 */
 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),
+		className: cn("fixed inset-0 z-50", "bg-black/40 backdrop-blur-sm", "ease-gentle data-open:animate-in data-open:animation-duration-380 data-open:fade-in-0", "data-closed:animate-out data-closed:animation-duration-280 data-closed:fade-out-0", "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0", classNames?.overlay),
 		"data-slot": "sheet-overlay"
 	}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
 		className: sheetContentVariants({
@@ -149,7 +106,7 @@ function SheetDescription({ className, ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
-function SheetClose({ className, size, variant = "outline", ...props }) {
+function SheetClose({ className, size, variant, ...props }) {
 	return /* @__PURE__ */ jsx(SheetPrimitive.Close, {
 		className: buttonVariants({
 			className,
@@ -161,4 +118,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 { Button } from "./button.mjs";
 import { Input } from "./input.mjs";
+import { SidebarMenuButtonVariants } from "../variants/sidebar.mjs";
 import { TooltipContent } from "./tooltip.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
 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;
@@ -234,7 +219,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 +318,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,9 +1,10 @@
 "use client";
-import { cn, tv } from "../lib/utils.mjs";
-import { Button } from "./button.mjs";
+import { cn } from "../lib/utils.mjs";
 import { Separator } from "./separator.mjs";
+import { Button } from "./button.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 { useIsMobile } from "../hooks/use-is-mobile.mjs";
@@ -13,43 +14,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { createContext } from "@radix-ui/react-context";
 //#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";
@@ -151,10 +115,10 @@ function Sidebar({ children, className, collapsible = "offcanvas", side = "left"
 		"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-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)"),
 			"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-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),
 			"data-slot": "sidebar-container",
 			...props,
 			children: /* @__PURE__ */ jsx("div", {
@@ -196,7 +160,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 -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),
 		"data-sidebar": "rail",
 		"data-slot": "sidebar-rail",
 		title: "Toggle Sidebar",
@@ -286,7 +250,7 @@ function SidebarGroup({ className, ...props }) {
 */
 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),
+		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),
 		"data-sidebar": "group-label",
 		"data-slot": "sidebar-group-label",
 		...props
@@ -297,7 +261,7 @@ function SidebarGroupLabel({ asChild = false, className, ...props }) {
 */
 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),
+		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),
 		"data-sidebar": "group-action",
 		"data-slot": "sidebar-group-action",
 		...props
@@ -371,7 +335,7 @@ function SidebarMenuButton({ asChild = false, className, isActive = false, size
 */
 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),
+		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),
 		"data-sidebar": "menu-action",
 		"data-slot": "sidebar-menu-action",
 		...props
@@ -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("rounded-lg", "bg-gradient-to-r from-muted via-white/15 to-muted bg-[length:400%_100%]", "animate-shimmer motion-reduce:animate-none", className),
 		"data-slot": "skeleton",
 		...props
 	});

package/dist/components/slider.mjs

@@ -34,7 +34,7 @@ function Slider({ className, defaultValue, max = 100, min = 0, value, ...props }
 			})
 		}), 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]", "focus-visible:ring-4 focus-visible:ring-primary/20", "active:not-data-disabled:after:size-1", "dark:focus-visible:ring-primary/40"),
+			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"),
 			"data-slot": "slider-thumb"
 		}, index))]
 	});

package/dist/components/spinner.mjs

@@ -13,7 +13,7 @@ function Spinner({ children, className, loading = true, ...props }) {
 		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"),
+			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"),
 			style: {
 				"--spinner-delay": `-${((SPINNER_COUNT - index) * 100).toString()}ms`,
 				"--spinner-duration": `${(SPINNER_COUNT * 100).toString()}ms`,

package/dist/components/switch.mjs

@@ -8,11 +8,11 @@ import * as SwitchPrimitives from "@radix-ui/react-switch";
 */
 function Switch({ className, ...props }) {
 	return /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
-		className: cn("peer inline-flex h-5 w-9 shrink-0 items-center p-0.75", "rounded-full border border-transparent shadow-xs outline-hidden", "transition-all", "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),
+		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),
 		"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", "dark:not-data-checked:bg-foreground", "data-checked:translate-x-3.5", "data-unchecked:translate-x-0"),
+			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"),
 			"data-slot": "switch-thumb"
 		})
 	});

package/dist/components/table.mjs

@@ -50,7 +50,7 @@ function TableFooter({ className, ...props }) {
 */
 function TableRow({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tr", {
-		className: cn("border-b", "transition-colors", "hover:bg-muted/50", "has-aria-expanded:bg-muted/50", "data-selected:bg-muted", className),
+		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),
 		"data-slot": "table-row",
 		...props
 	});

package/dist/components/tabs.mjs

@@ -28,7 +28,7 @@ function TabsList({ className, ...props }) {
 */
 function TabsTrigger({ className, ...props }) {
 	return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
-		className: cn("inline-flex items-center justify-center gap-1.5", "px-2 py-1.5", "rounded-lg", "text-sm font-medium whitespace-nowrap text-muted-foreground", "transition", "not-dark:outline-hidden", "hover:not-disabled:text-foreground", "focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "dark:focus-visible:-outline-offset-1 dark:focus-visible:outline-ring", "data-active:bg-background data-active:text-foreground data-active:shadow-sm", "dark:data-active:bg-input/50", "dark:focus-visible:data-active:outline-1", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("inline-flex items-center justify-center gap-1.5", "px-2 py-1.5", "rounded-lg", "text-sm font-medium whitespace-nowrap text-muted-foreground", "transition-[color,background-color,box-shadow] duration-150 ease-snappy", "motion-reduce:transition-none motion-reduce:duration-0", "not-dark:outline-hidden", "hover:not-disabled:text-foreground", "focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "dark:focus-visible:-outline-offset-1 dark:focus-visible:outline-ring", "data-active:bg-background data-active:text-foreground data-active:shadow-sm", "dark:data-active:bg-input/50", "dark:focus-visible:data-active:outline-1", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		"data-slot": "tabs-trigger",
 		...props
 	});

package/dist/components/textarea.mjs

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function Textarea({ className, ...props }) {
 	return /* @__PURE__ */ jsx("textarea", {
-		className: cn("flex min-h-16 w-full grow px-3 py-2", "rounded-lg border border-input shadow-xs outline-hidden", "text-base", "transition", "placeholder:text-muted-foreground", "hover:not-disabled:not-focus-visible:border-ring/60", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "aria-invalid:border-destructive", "focus-within:aria-invalid:ring-destructive/20", "hover:not-disabled:not-focus-within:aria-invalid:border-destructive/60", "md:text-sm", "dark:bg-input/30", "dark:focus-within:aria-invalid:ring-destructive/40", className),
+		className: cn("flex min-h-16 w-full grow px-3 py-2", "rounded-lg border border-input shadow-xs outline-hidden", "text-base", "transition-[color,box-shadow] duration-150 ease-snappy", "motion-reduce:transition-none motion-reduce:duration-0", "placeholder:text-muted-foreground", "hover:not-disabled:not-focus-visible:border-ring/60", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "aria-invalid:border-destructive", "focus-within:aria-invalid:ring-destructive/20", "hover:not-disabled:not-focus-within:aria-invalid:border-destructive/60", "md:text-sm", "dark:bg-input/30", "dark:focus-within:aria-invalid:ring-destructive/40", className),
 		"data-slot": "textarea",
 		...props
 	});

package/dist/components/toggle-group.d.mts

@@ -1,4 +1,5 @@
-import { ToggleVariants } from "./toggle.mjs";
+import { VariantProps } from "../lib/utils.mjs";
+import { toggleVariants } from "../variants/toggle.mjs";
 import { ComponentProps, JSX } from "react";
 import { Scope } from "@radix-ui/react-context";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
@@ -10,7 +11,7 @@ type ScopedProps<P> = P & {
 /**
  * @since 0.3.16-canary.0
  */
-type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root> & ToggleVariants & {
+type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {
   spacing?: number;
 };
 /**

package/dist/components/toggle-group.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../lib/utils.mjs";
-import { toggleVariants } from "./toggle.mjs";
+import { toggleVariants } from "../variants/toggle.mjs";
 import { jsx } from "react/jsx-runtime";
 import { createContextScope } from "@radix-ui/react-context";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";

package/dist/components/toggle.d.mts

@@ -1,27 +1,8 @@
-import { VariantProps } from "../lib/utils.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ToggleVariants } from "../variants/toggle.mjs";
 import { ComponentProps, JSX } from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 
 //#region src/components/toggle.d.ts
-/**
- * @since 0.3.16-canary.0
- */
-declare const toggleVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  size: {
-    default: string[];
-    lg: string[];
-    sm: string[];
-  };
-  variant: {
-    default: string;
-    outline: string[];
-  };
-}, Record<string, never>>;
-/**
- * @since 0.3.16-canary.0
- */
-type ToggleVariants = VariantProps<typeof toggleVariants>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -37,4 +18,4 @@ declare function Toggle({
   ...props
 }: ToggleProps): JSX.Element;
 //#endregion
-export { Toggle, type ToggleProps, type ToggleVariants, toggleVariants };
+export { Toggle, type ToggleProps };

package/dist/components/toggle.mjs

@@ -1,48 +1,11 @@
 "use client";
-import { tv } from "../lib/utils.mjs";
+import { toggleVariants } from "../variants/toggle.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 //#region src/components/toggle.tsx
 /**
 * @since 0.3.16-canary.0
 */
-const toggleVariants = tv({
-	base: [
-		"inline-flex items-center justify-center gap-2",
-		"rounded-lg outline-none",
-		"text-sm font-medium whitespace-nowrap",
-		"transition-[color,box-shadow]",
-		"hover:bg-muted hover:text-muted-foreground",
-		"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-		"disabled:pointer-events-none disabled:opacity-50",
-		"aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-		"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
-		"dark:aria-invalid:ring-destructive/40",
-		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-	],
-	variants: {
-		size: {
-			default: ["h-9 min-w-9", "px-2"],
-			lg: ["h-10 min-w-10", "px-2.5"],
-			sm: ["h-8 min-w-8", "px-1.5"]
-		},
-		variant: {
-			default: "bg-transparent",
-			outline: [
-				"border border-input",
-				"bg-transparent shadow-xs",
-				"hover:bg-accent hover:text-accent-foreground"
-			]
-		}
-	},
-	defaultVariants: {
-		size: "default",
-		variant: "default"
-	}
-});
-/**
-* @since 0.3.16-canary.0
-*/
 function Toggle({ children, className, size, variant, ...props }) {
 	return /* @__PURE__ */ jsx(TogglePrimitive.Root, {
 		className: toggleVariants({
@@ -56,4 +19,4 @@ function Toggle({ children, className, size, variant, ...props }) {
 	});
 }
 //#endregion
-export { Toggle, toggleVariants };
+export { Toggle };

package/dist/components/tooltip.mjs

@@ -35,7 +35,7 @@ function TooltipTrigger({ ...props }) {
 */
 function TooltipContent({ children, className, sideOffset = 4, ...props }) {
 	return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Content, {
-		className: cn("z-50", "w-fit max-w-(--radix-tooltip-content-available-width) px-3 py-1.5", "rounded-md", "bg-primary text-xs text-balance text-primary-foreground", "ease-ui data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95", "data-[state=delayed-open]:data-side-top:slide-in-from-bottom-2", "data-[state=delayed-open]:data-side-right:slide-in-from-left-2", "data-[state=delayed-open]:data-side-bottom:slide-in-from-top-2", "data-[state=delayed-open]:data-side-left:slide-in-from-right-2", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-closed:data-side-top:slide-out-to-bottom-2", "data-closed:data-side-right:slide-out-to-left-2", "data-closed:data-side-bottom:slide-out-to-top-2", "data-closed:data-side-left:slide-out-to-right-2", "origin-(--radix-tooltip-content-transform-origin)", className),
+		className: cn("z-50", "w-fit max-w-(--radix-tooltip-content-available-width) px-3 py-1.5", "rounded-md", "bg-primary text-xs text-balance text-primary-foreground", "ease-snappy data-[state=delayed-open]:animate-in data-[state=delayed-open]:duration-150 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95", "data-[state=delayed-open]:data-side-top:slide-in-from-bottom-2", "data-[state=delayed-open]:data-side-right:slide-in-from-left-2", "data-[state=delayed-open]:data-side-bottom:slide-in-from-top-2", "data-[state=delayed-open]:data-side-left:slide-in-from-right-2", "data-closed:animate-out data-closed:duration-100 data-closed:fade-out-0 data-closed:zoom-out-95", "data-closed:data-side-top:slide-out-to-bottom-2", "data-closed:data-side-right:slide-out-to-left-2", "data-closed:data-side-bottom:slide-out-to-top-2", "data-closed:data-side-left:slide-out-to-right-2", "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0", "origin-(--radix-tooltip-content-transform-origin)", className),
 		collisionPadding: 8,
 		"data-slot": "tooltip-content",
 		sideOffset,