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

package/dist/components/navigation-menu.d.mts

@@ -1,12 +1,7 @@
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
 import { ComponentProps, JSX } from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 
 //#region src/components/navigation-menu.d.ts
-/**
- * @since 0.3.16-canary.0
- */
-declare const navigationMenuTriggerVariants: _$_codefast_tailwind_variants0.VariantResolver<_$_codefast_tailwind_variants0.VariantSchema, Record<string, never>>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -80,4 +75,4 @@ declare function NavigationMenuLink({
   ...props
 }: NavigationMenuLinkProps): JSX.Element;
 //#endregion
-export { NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, NavigationMenuTrigger, type NavigationMenuTriggerProps, navigationMenuTriggerVariants };
+export { NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, NavigationMenuTrigger, type NavigationMenuTriggerProps };

package/dist/components/navigation-menu.mjs

@@ -1,5 +1,5 @@
-import { cn, tv } from "../lib/utils.mjs";
-import { buttonVariants } from "./button.mjs";
+import { cn } from "../lib/utils.mjs";
+import { navigationMenuTriggerVariants } from "../variants/navigation-menu.mjs";
 import { ChevronDownIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
@@ -7,13 +7,6 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 /**
 * @since 0.3.16-canary.0
 */
-const navigationMenuTriggerVariants = tv({ base: buttonVariants({
-	className: "data-open:bg-secondary/50 data-open:text-secondary-foreground group/navigation-menu-trigger focus-visible:bg-secondary dark:hover:not-disabled:bg-secondary",
-	variant: "ghost"
-}) });
-/**
-* @since 0.3.16-canary.0
-*/
 function NavigationMenu({ children, className, viewport = true, ...props }) {
 	return /* @__PURE__ */ jsxs(NavigationMenuPrimitive.Root, {
 		className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className),
@@ -54,7 +47,7 @@ function NavigationMenuTrigger({ children, className, ...props }) {
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, {
 			"aria-hidden": "true",
-			className: cn("relative top-px", "ml-1 size-3", "transition duration-300", "group-data-open/navigation-menu-trigger:rotate-180")
+			className: cn("relative top-px", "ml-1 size-3", "transition-transform duration-300 ease-spring", "motion-reduce:transition-none motion-reduce:duration-0", "group-data-open/navigation-menu-trigger:rotate-180")
 		})]
 	});
 }
@@ -63,7 +56,7 @@ function NavigationMenuTrigger({ children, className, ...props }) {
 */
 function NavigationMenuContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Content, {
-		className: cn("top-0 left-0", "w-full", "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-2 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:p-1 group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow", "group-data-[viewport=true]/navigation-menu:p-2", "data-[motion=from-end]:slide-in-from-right-52", "data-[motion=from-start]:slide-in-from-left-52", "data-[motion=to-end]:slide-out-to-right-52", "data-[motion=to-start]:slide-out-to-left-52", "ease-ui data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in-0", "data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out-0", "md:absolute md:w-auto", "group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95", "group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95", className),
+		className: cn("top-0 left-0", "w-full", "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-2 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:p-1 group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow", "group-data-[viewport=true]/navigation-menu:p-2", "data-[motion=from-end]:slide-in-from-right-52", "data-[motion=from-start]:slide-in-from-left-52", "data-[motion=to-end]:slide-out-to-right-52", "data-[motion=to-start]:slide-out-to-left-52", "ease-snappy data-[motion^=from-]:animate-in data-[motion^=from-]:duration-200 data-[motion^=from-]:fade-in-0", "data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out-0", "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0", "md:absolute md:w-auto", "group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95", "group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95", className),
 		"data-slot": "navigation-menu-content",
 		...props
 	});
@@ -73,7 +66,7 @@ function NavigationMenuContent({ className, ...props }) {
 */
 function NavigationMenuLink({ className, ...props }) {
 	return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Link, {
-		className: cn("flex flex-col gap-1", "p-2", "rounded-sm outline-hidden", "text-sm", "transition", "hover:bg-accent hover:text-accent-foreground", "focus:bg-accent focus:text-accent-foreground", "data-active:bg-accent/50 data-active:text-accent-foreground", "data-active:hover:bg-accent", "data-active:focus:bg-accent", "data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-destructive/80", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "[&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		className: cn("flex flex-col gap-1", "p-2", "rounded-sm outline-hidden", "text-sm", "transition-colors duration-150 ease-snappy", "motion-reduce:transition-none motion-reduce:duration-0", "hover:bg-accent hover:text-accent-foreground", "focus:bg-accent focus:text-accent-foreground", "data-active:bg-accent/50 data-active:text-accent-foreground", "data-active:hover:bg-accent", "data-active:focus:bg-accent", "data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-destructive/80", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "[&_svg:not([class*='text-'])]:text-muted-foreground", className),
 		"data-slot": "navigation-menu-link",
 		...props
 	});
@@ -82,7 +75,7 @@ function NavigationMenuViewport({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("absolute top-full left-0 z-30 flex justify-center", "perspective-distant"),
 		children: /* @__PURE__ */ jsx(NavigationMenuPrimitive.Viewport, {
-			className: cn("relative", "mt-2 min-h-[calc(var(--radix-navigation-menu-viewport-height)+2px)] w-full overflow-hidden", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "transition-[width,height] ease-ui", "sm:min-w-[calc(var(--radix-navigation-menu-viewport-width)+2px)]", "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-90", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "origin-[top_center]", className),
+			className: cn("relative", "mt-2 min-h-[calc(var(--radix-navigation-menu-viewport-height)+2px)] w-full overflow-hidden", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "transition-[width,height] duration-300 ease-snappy", "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0", "sm:min-w-[calc(var(--radix-navigation-menu-viewport-width)+2px)]", "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-90", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "origin-[top_center]", className),
 			"data-slot": "navigation-menu-viewport",
 			...props
 		})
@@ -90,11 +83,11 @@ function NavigationMenuViewport({ className, ...props }) {
 }
 function NavigationMenuIndicator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Indicator, {
-		className: cn("top-full z-10 flex h-2 items-center justify-center overflow-hidden", "ease-ui data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0", "data-[state=visible]:animate-in data-[state=visible]:fade-in-0", className),
+		className: cn("top-full z-10 flex h-2 items-center justify-center overflow-hidden", "ease-snappy data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0", "data-[state=visible]:animate-in data-[state=visible]:fade-in-0", "motion-reduce:animate-none motion-reduce:transition-none", className),
 		"data-slot": "navigation-menu-indicator",
 		...props,
 		children: /* @__PURE__ */ jsx("div", { className: cn("relative top-[60%]", "size-2.5", "rounded-tl-xs", "bg-popover text-popover-foreground", "rotate-45") })
 	});
 }
 //#endregion
-export { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerVariants };
+export { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger };

package/dist/components/pagination.d.mts

@@ -1,5 +1,5 @@
 import { VariantProps } from "../lib/utils.mjs";
-import { buttonVariants } from "./button.mjs";
+import { buttonVariants } from "../variants/button.mjs";
 import { ComponentProps, JSX } from "react";
 
 //#region src/components/pagination.d.ts

package/dist/components/pagination.mjs

@@ -1,5 +1,5 @@
 import { cn } from "../lib/utils.mjs";
-import { buttonVariants } from "./button.mjs";
+import { buttonVariants } from "../variants/button.mjs";
 import { ChevronLeftIcon, ChevronRightIcon, EllipsisIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/pagination.tsx

package/dist/components/popover.mjs

@@ -36,7 +36,7 @@ function PopoverAnchor({ ...props }) {
 function PopoverContent({ align = "center", className, sideOffset = 4, ...props }) {
 	return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
 		align,
-		className: cn("z-50", "min-w-32 p-4", "rounded-lg border", "bg-popover shadow-lg outline-hidden", "text-popover-foreground", "ease-ui data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", "data-open:data-side-top:slide-in-from-bottom-2", "data-open:data-side-right:slide-in-from-left-2", "data-open:data-side-bottom:slide-in-from-top-2", "data-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-popover-content-transform-origin)", className),
+		className: cn("z-50", "min-w-32 p-4", "rounded-lg border", "bg-popover shadow-lg outline-hidden", "text-popover-foreground", "ease-snappy data-open:animate-in data-open:duration-200 data-open:fade-in-0 data-open:zoom-in-95", "data-open:data-side-top:slide-in-from-bottom-2", "data-open:data-side-right:slide-in-from-left-2", "data-open:data-side-bottom:slide-in-from-top-2", "data-open:data-side-left:slide-in-from-right-2", "data-closed:animate-out data-closed:duration-150 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-popover-content-transform-origin)", className),
 		"data-slot": "popover-content",
 		sideOffset,
 		...props

package/dist/components/progress-circle.d.mts

@@ -1,56 +1,12 @@
-import { VariantProps } from "../lib/utils.mjs";
+import { ProgressCircleVariants } from "../variants/progress-circle.mjs";
 import { ProgressCircleProvider } from "../primitives/progress-circle.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
 import { ComponentProps, JSX } from "react";
 
 //#region src/components/progress-circle.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-declare const progressCircleVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  size: {
-    sm: {
-      label: string;
-    };
-    md: {
-      label: string;
-    };
-    lg: {
-      label: string;
-    };
-    xl: {
-      label: string;
-    };
-    "2xl": {
-      label: string;
-    };
-  };
-  thickness: {
-    regular: {};
-    thick: {};
-    thin: {};
-  };
-  variant: {
-    default: {
-      indicator: string;
-      track: string;
-    };
-    destructive: {
-      indicator: string;
-      track: string;
-    };
-  };
-}, {
-  indicator: string;
-  label: string[];
-  root: string;
-  svg: string;
-  track: string;
-}>;
-/**
- * @since 0.3.16-canary.0
- */
-interface ProgressCircleProps extends Omit<ComponentProps<typeof ProgressCircleProvider>, "children" | "size">, VariantProps<typeof progressCircleVariants> {
+interface ProgressCircleProps extends Omit<ComponentProps<typeof ProgressCircleProvider>, "children" | "size">, ProgressCircleVariants {
   /**
    * Enables animation effect when value changes
    */
@@ -130,4 +86,4 @@ declare namespace ProgressCircle {
   var displayName: string;
 }
 //#endregion
-export { ProgressCircle, type ProgressCircleProps, progressCircleVariants };
+export { ProgressCircle, type ProgressCircleProps };

package/dist/components/progress-circle.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { tv } from "../lib/utils.mjs";
+import { progressCircleVariants } from "../variants/progress-circle.mjs";
 import { useAnimatedValue } from "../hooks/use-animated-value.mjs";
 import { Indicator as ProgressCircleIndicator, ProgressCircle as ProgressCircle$1, ProgressCircleProvider, ProgressCircleSVG, ProgressCircleTrack, ProgressCircleValue } from "../primitives/progress-circle.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -8,51 +8,6 @@ import { useCallback, useMemo } from "react";
 /**
 * @since 0.3.16-canary.0
 */
-const progressCircleVariants = tv({
-	defaultVariants: {
-		size: "md",
-		thickness: "regular",
-		variant: "default"
-	},
-	slots: {
-		indicator: "origin-center",
-		label: [
-			"absolute flex items-center justify-center",
-			"inset-0",
-			"text-xs font-medium"
-		],
-		root: "relative inline-flex items-center justify-center",
-		svg: "size-full",
-		track: "origin-center"
-	},
-	variants: {
-		size: {
-			sm: { label: "text-[0.625rem]" },
-			md: { label: "text-xs" },
-			lg: { label: "text-sm" },
-			xl: { label: "text-base" },
-			"2xl": { label: "text-lg" }
-		},
-		thickness: {
-			regular: {},
-			thick: {},
-			thin: {}
-		},
-		variant: {
-			default: {
-				indicator: "text-primary",
-				track: "text-primary/20"
-			},
-			destructive: {
-				indicator: "text-destructive",
-				track: "text-destructive/20"
-			}
-		}
-	}
-});
-/**
-* @since 0.3.16-canary.0
-*/
 function ProgressCircle({ animate = true, animationDuration = 1e3, className, classNames, customLabel, showValue = false, size, sizeInPixels, strokeWidth, thickness = "regular", value = 0, variant = "default", ...props }) {
 	const displayValue = useAnimatedValue(value, animationDuration, animate);
 	const actualSize = useMemo(() => sizeInPixels ?? getActualSize(size), [sizeInPixels, size]);
@@ -123,4 +78,4 @@ const getStrokeWidth = (thickness, size) => {
 	return thickness ? thicknessMap[thickness] : Math.max(3, size * .05);
 };
 //#endregion
-export { ProgressCircle, progressCircleVariants };
+export { ProgressCircle };

package/dist/components/progress.mjs

@@ -12,7 +12,7 @@ function Progress({ className, value, ...props }) {
 		"data-slot": "progress",
 		...props,
 		children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {
-			className: cn("size-full flex-1", "bg-primary", "transition-all"),
+			className: cn("size-full flex-1", "bg-primary", "transition-[transform] duration-500 ease-gentle", "motion-reduce:transition-none motion-reduce:duration-0"),
 			"data-slot": "progress-indicator",
 			style: { transform: `translateX(-${(100 - (value ?? 0)).toString()}%)` }
 		})

package/dist/components/radio-group.mjs

@@ -18,7 +18,7 @@ function RadioGroup({ className, ...props }) {
 */
 function RadioGroupItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
-		className: cn("peer inline-flex size-4 shrink-0 items-center justify-center", "rounded-full border border-input shadow-xs outline-hidden", "transition", "hover:not-disabled:not-aria-checked:border-ring/60", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "aria-checked:border-primary aria-checked:bg-primary", "focus-visible:aria-checked:ring-primary/20", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "hover:not-disabled:not-aria-checked:aria-invalid:border-destructive/60", "aria-checked:aria-invalid:bg-destructive", "dark:bg-input/30", "dark:focus-visible:aria-checked:ring-primary/40", "dark:aria-invalid:ring-destructive/40", className),
+		className: cn("peer inline-flex size-4 shrink-0 items-center justify-center", "rounded-full border border-input shadow-xs outline-hidden", "transition-[border-color,background-color,box-shadow] duration-150 ease-spring", "motion-reduce:transition-none motion-reduce:duration-0", "hover:not-disabled:not-aria-checked:border-ring/60", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "aria-checked:border-primary aria-checked:bg-primary", "focus-visible:aria-checked:ring-primary/20", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "hover:not-disabled:not-aria-checked:aria-invalid:border-destructive/60", "aria-checked:aria-invalid:bg-destructive", "dark:bg-input/30", "dark:focus-visible:aria-checked:ring-primary/40", "dark:aria-invalid:ring-destructive/40", className),
 		"data-slot": "radio-group-item",
 		...props,
 		children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, {

package/dist/components/radio.mjs

@@ -8,7 +8,7 @@ import { composeEventHandlers } from "@radix-ui/primitive";
 */
 function Radio({ className, onChange, onValueChange, ...props }) {
 	return /* @__PURE__ */ jsx("input", {
-		className: cn("peer inline-flex size-4 shrink-0 items-center justify-center", "rounded-full border border-input shadow-xs outline-hidden", "appearance-none", "after:size-full after:rounded-full after:bg-background after:transition-[width,height]", "checked:border-primary checked:bg-primary", "checked:after:size-1", "hover:not-disabled:not-checked:border-ring/60", "focus-visible:ring-3 focus-visible:ring-ring/50", "focus-visible:not-checked:border-ring", "focus-visible:checked:ring-primary/20", "disabled:opacity-50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "checked:aria-invalid:bg-destructive", "hover:not-disabled:not-checked:aria-invalid:border-destructive/60", "dark:not-checked:after:bg-input/30", "dark:focus-visible:checked:ring-primary/40", "dark:aria-invalid:ring-destructive/40", className),
+		className: cn("peer inline-flex size-4 shrink-0 items-center justify-center", "rounded-full border border-input shadow-xs outline-hidden", "appearance-none", "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", "checked:border-primary checked:bg-primary", "checked:after:size-1", "hover:not-disabled:not-checked:border-ring/60", "focus-visible:ring-3 focus-visible:ring-ring/50", "focus-visible:not-checked:border-ring", "focus-visible:checked:ring-primary/20", "disabled:opacity-50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "checked:aria-invalid:bg-destructive", "hover:not-disabled:not-checked:aria-invalid:border-destructive/60", "dark:not-checked:after:bg-input/30", "dark:focus-visible:checked:ring-primary/40", "dark:aria-invalid:ring-destructive/40", className),
 		"data-slot": "radio",
 		type: "radio",
 		onChange: composeEventHandlers(onChange, (event) => onValueChange?.(event.currentTarget.value)),

package/dist/components/scroll-area.d.mts

@@ -1,29 +1,13 @@
-import { VariantProps } from "../lib/utils.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ScrollAreaScrollbarVariants } from "../variants/scroll-area.mjs";
 import { ComponentProps, JSX } from "react";
 import { Scope } from "@radix-ui/react-context";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
 //#region src/components/scroll-area.d.ts
-/**
- * @since 0.3.16-canary.0
- */
-declare const scrollAreaScrollbarVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  orientation: {
-    horizontal: string[];
-    vertical: string[];
-  };
-  size: {
-    none: string;
-    sm: string;
-    md: string;
-    lg: string;
-  };
-}, Record<string, never>>;
 type ScopedProps<P> = P & {
   __scopeScrollArea?: Scope;
 };
-type ScrollAreaContextValue = Pick<VariantProps<typeof scrollAreaScrollbarVariants>, "size">;
+type ScrollAreaContextValue = Pick<ScrollAreaScrollbarVariants, "size">;
 /**
  * @since 0.3.16-canary.0
  */
@@ -52,4 +36,4 @@ declare function ScrollAreaScrollbar({
   ...props
 }: ScrollAreaScrollbarProps): JSX.Element;
 //#endregion
-export { ScrollArea, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, scrollAreaScrollbarVariants };
+export { ScrollArea, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps };

package/dist/components/scroll-area.mjs

@@ -1,67 +1,10 @@
 "use client";
-import { cn, tv } from "../lib/utils.mjs";
+import { cn } from "../lib/utils.mjs";
+import { scrollAreaScrollbarVariants } from "../variants/scroll-area.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContextScope } from "@radix-ui/react-context";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 //#region src/components/scroll-area.tsx
-/**
-* @since 0.3.16-canary.0
-*/
-const scrollAreaScrollbarVariants = tv({
-	base: [
-		"flex",
-		"p-px",
-		"touch-none transition-colors select-none"
-	],
-	compoundVariants: [
-		{
-			className: "w-1.5",
-			orientation: "vertical",
-			size: "sm"
-		},
-		{
-			className: "w-2",
-			orientation: "vertical",
-			size: "md"
-		},
-		{
-			className: "w-2.5",
-			orientation: "vertical",
-			size: "lg"
-		},
-		{
-			className: "h-1.5",
-			orientation: "horizontal",
-			size: "sm"
-		},
-		{
-			className: "h-2",
-			orientation: "horizontal",
-			size: "md"
-		},
-		{
-			className: "h-2.5",
-			orientation: "horizontal",
-			size: "lg"
-		}
-	],
-	defaultVariants: {
-		orientation: "vertical",
-		size: "md"
-	},
-	variants: {
-		orientation: {
-			horizontal: ["w-full flex-col", "border-t border-t-transparent"],
-			vertical: ["h-full flex-row", "border-l border-l-transparent"]
-		},
-		size: {
-			none: "",
-			sm: "",
-			md: "",
-			lg: ""
-		}
-	}
-});
 const SCROLL_AREA_NAME = "ScrollArea";
 const [createScrollAreaContext] = createContextScope(SCROLL_AREA_NAME);
 const [ScrollAreaContextProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
@@ -78,7 +21,7 @@ function ScrollArea({ __scopeScrollArea, children, className, size, ...props })
 			...props,
 			children: [
 				/* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {
-					className: cn("size-full", "rounded-[inherit] ring-ring/50 outline-ring", "transition", "focus-visible:ring-4 focus-visible:outline-1"),
+					className: cn("size-full", "rounded-[inherit] ring-ring/50 outline-ring", "transition-[box-shadow] duration-150 ease-snappy", "motion-reduce:transition-none motion-reduce:duration-0", "focus-visible:ring-4 focus-visible:outline-1"),
 					"data-slot": "scroll-area-viewport",
 					children
 				}),
@@ -107,4 +50,4 @@ function ScrollAreaScrollbar({ __scopeScrollArea, className, orientation, ...pro
 	});
 }
 //#endregion
-export { ScrollArea, ScrollAreaScrollbar, scrollAreaScrollbarVariants };
+export { ScrollArea, ScrollAreaScrollbar };

package/dist/components/select.d.mts

@@ -1,5 +1,5 @@
 import { VariantProps } from "../lib/utils.mjs";
-import { buttonVariants } from "./button.mjs";
+import { buttonVariants } from "../variants/button.mjs";
 import { ComponentProps, JSX } from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 

package/dist/components/select.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../lib/utils.mjs";
-import { buttonVariants } from "./button.mjs";
+import { buttonVariants } from "../variants/button.mjs";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as SelectPrimitive from "@radix-ui/react-select";
@@ -77,9 +77,9 @@ function SelectScrollDownButton({ className, ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
-function SelectContent({ children, className, position = "popper", ...props }) {
+function SelectContent({ children, className, position = "item-aligned", ...props }) {
 	return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
-		className: cn("relative z-50", "max-h-(--radix-select-content-available-height) min-w-32 overflow-hidden", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "ease-ui data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", "data-open:data-side-top:slide-in-from-bottom-2", "data-open:data-side-right:slide-in-from-left-2", "data-open:data-side-bottom:slide-in-from-top-2", "data-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-select-content-transform-origin)", position === "popper" && "data-side-top:-translate-y-1 data-side-right:translate-x-1 data-side-bottom:translate-y-1 data-side-left:-translate-x-1", className),
+		className: cn("relative z-50", "max-h-(--radix-select-content-available-height) min-w-32 overflow-hidden", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "ease-ui data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", "data-open:data-side-top:slide-in-from-bottom-2", "data-open:data-side-right:slide-in-from-left-2", "data-open:data-side-bottom:slide-in-from-top-2", "data-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", "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0", "origin-(--radix-select-content-transform-origin)", position === "popper" && "data-side-top:-translate-y-1 data-side-right:translate-x-1 data-side-bottom:translate-y-1 data-side-left:-translate-x-1", className),
 		"data-slot": "select-content",
 		position,
 		...props,

package/dist/components/separator.d.mts

@@ -1,5 +1,4 @@
-import { VariantProps } from "../lib/utils.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { SeparatorVariants } from "../variants/separator.mjs";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { ComponentProps, JSX } from "react";
 
@@ -7,21 +6,7 @@ import { ComponentProps, JSX } from "react";
 /**
  * @since 0.3.16-canary.0
  */
-declare const separatorVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  align: {
-    center: string;
-    end: string;
-    start: string;
-  };
-  orientation: {
-    horizontal: string;
-    vertical: string;
-  };
-}, Record<string, never>>;
-/**
- * @since 0.3.16-canary.0
- */
-interface SeparatorProps extends ComponentProps<typeof SeparatorPrimitive.Root>, Omit<VariantProps<typeof separatorVariants>, "orientation"> {}
+interface SeparatorProps extends ComponentProps<typeof SeparatorPrimitive.Root>, Omit<SeparatorVariants, "orientation"> {}
 /**
  * @since 0.3.16-canary.0
  */
@@ -44,4 +29,4 @@ declare function SeparatorItem({
   ...props
 }: SeparatorItemProps): JSX.Element;
 //#endregion
-export { Separator, SeparatorItem, type SeparatorItemProps, type SeparatorProps, separatorVariants };
+export { Separator, SeparatorItem, type SeparatorItemProps, type SeparatorProps };

package/dist/components/separator.mjs

@@ -1,32 +1,12 @@
 "use client";
-import { cn, tv } from "../lib/utils.mjs";
+import { cn } from "../lib/utils.mjs";
+import { separatorVariants } from "../variants/separator.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 //#region src/components/separator.tsx
 /**
 * @since 0.3.16-canary.0
 */
-const separatorVariants = tv({
-	base: ["relative flex shrink-0 items-center", "bg-border"],
-	defaultVariants: {
-		align: "center",
-		orientation: "horizontal"
-	},
-	variants: {
-		align: {
-			center: "justify-center",
-			end: "justify-end",
-			start: "justify-start"
-		},
-		orientation: {
-			horizontal: "h-px w-full",
-			vertical: "h-full w-px flex-col"
-		}
-	}
-});
-/**
-* @since 0.3.16-canary.0
-*/
 function Separator({ align, className, decorative = true, orientation, ...props }) {
 	return /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
 		className: separatorVariants({
@@ -51,4 +31,4 @@ function SeparatorItem({ className, ...props }) {
 	});
 }
 //#endregion
-export { Separator, SeparatorItem, separatorVariants };
+export { Separator, SeparatorItem };

package/dist/components/sheet.d.mts

@@ -1,21 +1,9 @@
-import { VariantProps } from "../lib/utils.mjs";
-import { buttonVariants } from "./button.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ButtonVariants } from "../variants/button.mjs";
+import { SheetContentVariants } from "../variants/sheet.mjs";
 import { ComponentProps, JSX } from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 
 //#region src/components/sheet.d.ts
-/**
- * @since 0.3.16-canary.0
- */
-declare const sheetContentVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  side: {
-    bottom: string[];
-    left: string[];
-    right: string[];
-    top: string[];
-  };
-}, Record<string, never>>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -40,7 +28,7 @@ declare function SheetTrigger({
 /**
  * @since 0.3.16-canary.0
  */
-interface SheetContentProps extends ComponentProps<typeof SheetPrimitive.Content>, VariantProps<typeof sheetContentVariants> {
+interface SheetContentProps extends ComponentProps<typeof SheetPrimitive.Content>, SheetContentVariants {
   classNames?: {
     close?: string;
     content?: string;
@@ -116,8 +104,8 @@ declare function SheetDescription({
  * @since 0.3.16-canary.0
  */
 interface SheetCloseProps extends ComponentProps<typeof SheetPrimitive.Close> {
-  size?: VariantProps<typeof buttonVariants>["size"];
-  variant?: VariantProps<typeof buttonVariants>["variant"];
+  size?: ButtonVariants["size"];
+  variant?: ButtonVariants["variant"];
 }
 /**
  * @since 0.3.16-canary.0
@@ -129,4 +117,4 @@ declare function SheetClose({
   ...props
 }: SheetCloseProps): JSX.Element;
 //#endregion
-export { Sheet, SheetBody, type SheetBodyProps, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, type SheetDescriptionProps, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, type SheetProps, SheetTitle, type SheetTitleProps, SheetTrigger, type SheetTriggerProps, sheetContentVariants };
+export { Sheet, SheetBody, type SheetBodyProps, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, type SheetDescriptionProps, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, type SheetProps, SheetTitle, type SheetTitleProps, SheetTrigger, type SheetTriggerProps };