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

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @codefast/ui
 
+## 0.3.16-canary.3
+
+### Patch Changes
+
+- [`6f61b94`](https://github.com/codefastlabs/codefast/commit/6f61b9477d3a8af78084502aa7d8e39c8623b861) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): extract component variants into separate files
+
+- [`2a82188`](https://github.com/codefastlabs/codefast/commit/2a82188264c204b0b519b3324402ae962594d29b) Thanks [@thevuong](https://github.com/thevuong)! - feat(dev): enable source condition for zero-rebuild HMR in apps/docs
+
+- [`9b94464`](https://github.com/codefastlabs/codefast/commit/9b94464be2247bd5ead32dc3d5c921ae3a52070c) Thanks [@thevuong](https://github.com/thevuong)! - Use minimum `>=` ranges in peerDependencies instead of `^` caret ranges.
+
+- [`0701beb`](https://github.com/codefastlabs/codefast/commit/0701beb99330b5ff60f2523c71e4d7b10bfb41b1) Thanks [@thevuong](https://github.com/thevuong)! - Migrate reduced-motion handling to Tailwind `motion-reduce` utilities across UI components.
+
+- [`bb82c44`](https://github.com/codefastlabs/codefast/commit/bb82c44ea5033de18a1d2403c0f3396f3aac0e39) Thanks [@thevuong](https://github.com/thevuong)! - Refine component motion with spring, snappy, and gentle easing tokens, shimmer skeleton loading, consistent theme token ordering, polished transitions on overlay and form controls, and subtler checkbox, radio, and switch press feedback.
+
+- [`4d859cd`](https://github.com/codefastlabs/codefast/commit/4d859cda4c87407710ccf0a99b89c2a2d3676bf9) Thanks [@thevuong](https://github.com/thevuong)! - Support system dark mode via prefers-color-scheme, soften dialog and sheet overlays with backdrop blur, and polish bottom sheet layout for mobile safe areas.
+
+- [`08bd9ad`](https://github.com/codefastlabs/codefast/commit/08bd9ad3900cba6af1ab30b25f9c7c8b39bb2063) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): simplify `utils.ts` imports and cleanup
+
+- Updated dependencies [[`2a82188`](https://github.com/codefastlabs/codefast/commit/2a82188264c204b0b519b3324402ae962594d29b)]:
+  - @codefast/tailwind-variants@0.3.16-canary.3
+
 ## 0.3.16-canary.2
 
 ### Patch Changes

package/README.md

@@ -48,7 +48,7 @@ Accessible, typed React components built on Radix UI primitives and styled with
 
 ## Requirements
 
-- React `^19` and `react-dom` (peer; `@types/*` are optional peers)
+- React `>=19.0.0` and `react-dom` (peer; `@types/*` are optional peers)
 - Tailwind CSS `4.x` at build time (only if you use one of the theme CSS imports)
 - TypeScript `>= 5.9` (recommended)
 

package/dist/components/accordion.mjs

@@ -30,7 +30,7 @@ function AccordionItem({ className, ...props }) {
 function AccordionIcon({ asChild, className, ...props }) {
 	return /* @__PURE__ */ jsx(asChild ? Slot : ChevronDownIcon, {
 		"aria-hidden": true,
-		className: cn("size-4 shrink-0 text-muted-foreground", "translate-y-0.5 transition-transform duration-200", className),
+		className: cn("size-4 shrink-0 text-muted-foreground", "translate-y-0.5 transition-transform duration-300 ease-spring", "motion-reduce:transition-none motion-reduce:duration-0", className),
 		"data-slot": "accordion-icon",
 		...props
 	});
@@ -55,7 +55,7 @@ function AccordionTrigger({ children, className, ...props }) {
 */
 function AccordionContent({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
-		className: cn("overflow-hidden", "data-open:animate-collapsible-down", "data-closed:animate-collapsible-up"),
+		className: cn("overflow-hidden", "data-open:animate-collapsible-down data-open:ease-snappy", "data-closed:animate-collapsible-up data-closed:ease-snappy", "motion-reduce:animate-none motion-reduce:transition-none"),
 		"data-slot": "accordion-content",
 		...props,
 		children: /* @__PURE__ */ jsx("div", {

package/dist/components/alert-dialog.d.mts

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

package/dist/components/alert-dialog.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 { jsx, jsxs } from "react/jsx-runtime";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 //#region src/components/alert-dialog.tsx
@@ -27,10 +27,10 @@ function AlertDialogTrigger({ ...props }) {
 */
 function AlertDialogContent({ children, className, classNames, ...props }) {
 	return /* @__PURE__ */ jsxs(AlertDialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
-		className: cn("fixed inset-0 z-50", "bg-black/50", "ease-ui data-open:animate-in data-open:fade-in-0", "data-closed:animate-out data-closed:fade-out-0", classNames?.overlay),
+		className: cn("fixed inset-0 z-50", "bg-black/50", "ease-ui data-open:animate-in data-open:fade-in-0", "data-closed:animate-out data-closed:fade-out-0", "motion-reduce:animate-none motion-reduce:transition-none", classNames?.overlay),
 		"data-slot": "alert-dialog-overlay"
 	}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
-		className: cn("fixed inset-0 z-50 grid grid-rows-[1fr_auto_1fr] justify-items-center overflow-auto p-8", "sm:grid-rows-[1fr_auto_3fr] sm:p-4", "ease-ui data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", classNames?.wrapper),
+		className: cn("fixed inset-0 z-50 grid grid-rows-[1fr_auto_1fr] justify-items-center overflow-auto p-8", "sm:grid-rows-[1fr_auto_3fr] sm:p-4", "ease-ui data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "motion-reduce:animate-none motion-reduce:transition-none", classNames?.wrapper),
 		"data-slot": "alert-dialog-content-wrapper",
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
@@ -107,7 +107,7 @@ function AlertDialogAction({ className, size, variant, ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
-function AlertDialogCancel({ className, size, variant = "outline", ...props }) {
+function AlertDialogCancel({ className, size, variant, ...props }) {
 	return /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
 		className: buttonVariants({
 			className,

package/dist/components/alert.d.mts

@@ -1,21 +1,11 @@
-import { VariantProps } from "../lib/utils.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { AlertVariants } from "../variants/alert.mjs";
 import { ComponentProps, JSX } from "react";
 
 //#region src/components/alert.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-declare const alertVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  variant: {
-    default: string;
-    destructive: string[];
-  };
-}, Record<string, never>>;
-/**
- * @since 0.3.16-canary.0
- */
-interface AlertProps extends ComponentProps<"div">, VariantProps<typeof alertVariants> {}
+interface AlertProps extends ComponentProps<"div">, AlertVariants {}
 /**
  * @since 0.3.16-canary.0
  */
@@ -48,4 +38,4 @@ declare function AlertDescription({
   ...props
 }: AlertDescriptionProps): JSX.Element;
 //#endregion
-export { Alert, AlertDescription, type AlertDescriptionProps, type AlertProps, AlertTitle, type AlertTitleProps, alertVariants };
+export { Alert, AlertDescription, type AlertDescriptionProps, type AlertProps, AlertTitle, type AlertTitleProps };

package/dist/components/alert.mjs

@@ -1,30 +1,10 @@
-import { cn, tv } from "../lib/utils.mjs";
+import { cn } from "../lib/utils.mjs";
+import { alertVariants } from "../variants/alert.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/alert.tsx
 /**
 * @since 0.3.16-canary.0
 */
-const alertVariants = tv({
-	base: [
-		"relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 px-4 py-3",
-		"rounded-xl border",
-		"bg-card text-sm",
-		"has-[>svg]:grid-cols-[--spacing(4)_1fr] has-[>svg]:gap-x-3",
-		"[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
-	],
-	defaultVariants: { variant: "default" },
-	variants: { variant: {
-		default: "text-card-foreground",
-		destructive: [
-			"text-destructive",
-			"*:data-[slot=alert-description]:text-destructive/90",
-			"[&>svg]:text-current"
-		]
-	} }
-});
-/**
-* @since 0.3.16-canary.0
-*/
 function Alert({ className, variant, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: alertVariants({
@@ -58,4 +38,4 @@ function AlertDescription({ className, ...props }) {
 	});
 }
 //#endregion
-export { Alert, AlertDescription, AlertTitle, alertVariants };
+export { Alert, AlertDescription, AlertTitle };

package/dist/components/badge.d.mts

@@ -1,23 +1,11 @@
-import { VariantProps } from "../lib/utils.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { BadgeVariants } from "../variants/badge.mjs";
 import { ComponentProps, JSX } from "react";
 
 //#region src/components/badge.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-declare const badgeVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  variant: {
-    default: string[];
-    destructive: string[];
-    outline: string[];
-    secondary: string[];
-  };
-}, Record<string, never>>;
-/**
- * @since 0.3.16-canary.0
- */
-interface BadgeProps extends ComponentProps<"span">, VariantProps<typeof badgeVariants> {
+interface BadgeProps extends ComponentProps<"span">, BadgeVariants {
   asChild?: boolean;
 }
 /**
@@ -30,4 +18,4 @@ declare function Badge({
   ...props
 }: BadgeProps): JSX.Element;
 //#endregion
-export { Badge, type BadgeProps, badgeVariants };
+export { Badge, type BadgeProps };

package/dist/components/badge.mjs

@@ -1,53 +1,11 @@
 "use client";
-import { tv } from "../lib/utils.mjs";
+import { badgeVariants } from "../variants/badge.mjs";
 import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/badge.tsx
 /**
 * @since 0.3.16-canary.0
 */
-const badgeVariants = tv({
-	base: [
-		"inline-flex w-fit shrink-0 items-center justify-center gap-2 px-1.5 py-0.5",
-		"rounded-md border outline-hidden",
-		"text-xs font-medium whitespace-nowrap",
-		"transition",
-		"focus-visible:ring-3 focus-visible:ring-ring/50",
-		"[&>svg]:size-3 [&>svg]:shrink-0"
-	],
-	defaultVariants: { variant: "default" },
-	variants: { variant: {
-		default: [
-			"border-transparent",
-			"bg-primary text-primary-foreground",
-			"focus-visible:ring-primary/20",
-			"dark:focus-visible:ring-primary/40",
-			"[a&]:hover:bg-primary/80"
-		],
-		destructive: [
-			"border-transparent",
-			"bg-destructive text-white",
-			"focus-visible:ring-destructive/20",
-			"dark:bg-destructive/60",
-			"dark:focus-visible:ring-destructive/40",
-			"[a&]:hover:bg-destructive/90"
-		],
-		outline: [
-			"border-input",
-			"bg-background",
-			"focus-visible:border-ring",
-			"[a&]:hover:border-ring/60 [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
-		],
-		secondary: [
-			"border-transparent",
-			"bg-secondary text-secondary-foreground",
-			"[a&]:hover:bg-secondary/80"
-		]
-	} }
-});
-/**
-* @since 0.3.16-canary.0
-*/
 function Badge({ asChild, className, variant, ...props }) {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
 		className: badgeVariants({
@@ -59,4 +17,4 @@ function Badge({ asChild, className, variant, ...props }) {
 	});
 }
 //#endregion
-export { Badge, badgeVariants };
+export { Badge };

package/dist/components/breadcrumb.mjs

@@ -39,7 +39,7 @@ function BreadcrumbItem({ className, ...props }) {
 */
 function BreadcrumbLink({ asChild, className, ...props }) {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
-		className: cn("transition-colors", "hover:text-foreground", className),
+		className: cn("transition-colors motion-reduce:transition-none", "hover:text-foreground", className),
 		"data-slot": "breadcrumb-link",
 		...props
 	});

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

@@ -1,22 +1,12 @@
-import { VariantProps } from "../lib/utils.mjs";
+import { ButtonGroupVariants } from "../variants/button-group.mjs";
 import { Separator } from "./separator.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
 import { ComponentProps, JSX } from "react";
 
 //#region src/components/button-group.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-declare const buttonGroupVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  orientation: {
-    horizontal: string[];
-    vertical: string[];
-  };
-}, Record<string, never>>;
-/**
- * @since 0.3.16-canary.0
- */
-type ButtonGroupProps = ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>;
+type ButtonGroupProps = ComponentProps<"div"> & ButtonGroupVariants;
 /**
  * @since 0.3.16-canary.0
  */
@@ -52,4 +42,4 @@ declare function ButtonGroupSeparator({
   ...props
 }: ButtonGroupSeparatorProps): JSX.Element;
 //#endregion
-export { ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonGroupTextProps, buttonGroupVariants };
+export { ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonGroupTextProps };

package/dist/components/button-group.mjs

@@ -1,5 +1,6 @@
 "use client";
-import { cn, tv } from "../lib/utils.mjs";
+import { cn } from "../lib/utils.mjs";
+import { buttonGroupVariants } from "../variants/button-group.mjs";
 import { Separator } from "./separator.mjs";
 import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
@@ -7,28 +8,6 @@ import { jsx } from "react/jsx-runtime";
 /**
 * @since 0.3.16-canary.0
 */
-const buttonGroupVariants = tv({
-	base: [
-		"flex w-fit items-stretch",
-		"has-[>[data-slot=button-group]]:gap-2",
-		"[&>*]:focus-visible:relative [&>*]:focus-visible:z-10",
-		"has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg",
-		"[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit",
-		"[&>input]:flex-1"
-	],
-	defaultVariants: { orientation: "horizontal" },
-	variants: { orientation: {
-		horizontal: ["[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0", "[&>*:not(:last-child)]:rounded-r-none"],
-		vertical: [
-			"flex-col",
-			"[&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0",
-			"[&>*:not(:last-child)]:rounded-b-none"
-		]
-	} }
-});
-/**
-* @since 0.3.16-canary.0
-*/
 function ButtonGroup({ className, orientation, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: buttonGroupVariants({
@@ -62,4 +41,4 @@ function ButtonGroupSeparator({ className, orientation = "vertical", ...props })
 	});
 }
 //#endregion
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };

package/dist/components/button.d.mts

@@ -1,33 +1,11 @@
-import { VariantProps } from "../lib/utils.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ButtonVariants } from "../variants/button.mjs";
 import { ComponentProps, JSX } from "react";
 
 //#region src/components/button.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-declare const buttonVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  size: {
-    "icon-sm": string;
-    icon: string;
-    "icon-lg": string;
-    sm: string[];
-    md: string[];
-    lg: string[];
-  };
-  variant: {
-    default: string[];
-    destructive: string[];
-    ghost: string[];
-    link: string[];
-    outline: string[];
-    secondary: string[];
-  };
-}, Record<string, never>>;
-/**
- * @since 0.3.16-canary.0
- */
-type ButtonProps = ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
   asChild?: boolean;
   type?: ComponentProps<"button">["type"];
 };
@@ -44,4 +22,4 @@ declare function Button({
   ...props
 }: ButtonProps): JSX.Element;
 //#endregion
-export { Button, type ButtonProps, buttonVariants };
+export { Button, type ButtonProps };

package/dist/components/button.mjs

@@ -1,80 +1,10 @@
-import { tv } from "../lib/utils.mjs";
+import { buttonVariants } from "../variants/button.mjs";
 import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/button.tsx
 /**
 * @since 0.3.16-canary.0
 */
-const buttonVariants = tv({
-	base: [
-		"inline-flex shrink-0 items-center justify-center gap-2",
-		"rounded-lg outline-hidden",
-		"text-sm font-medium whitespace-nowrap",
-		"transition select-none",
-		"focus-visible:ring-3",
-		"disabled:opacity-50",
-		"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-	],
-	defaultVariants: {
-		size: "md",
-		variant: "default"
-	},
-	variants: {
-		size: {
-			"icon-sm": "size-8",
-			icon: "size-9",
-			"icon-lg": "size-10",
-			sm: ["h-8 px-3", "has-[>svg]:px-2.5"],
-			md: ["h-9 px-4", "has-[>svg]:px-3"],
-			lg: ["h-10 px-6", "has-[>svg]:px-4"]
-		},
-		variant: {
-			default: [
-				"bg-primary text-primary-foreground",
-				"hover:not-disabled:bg-primary/80",
-				"focus-visible:ring-primary/20",
-				"dark:focus-visible:ring-primary/40"
-			],
-			destructive: [
-				"bg-destructive text-white",
-				"hover:not-disabled:bg-destructive/90",
-				"focus-visible:ring-destructive/20",
-				"dark:bg-destructive/60",
-				"dark:focus-visible:ring-destructive/40"
-			],
-			ghost: [
-				"hover:not-disabled:bg-secondary hover:not-disabled:text-secondary-foreground",
-				"focus-visible:ring-ring/50",
-				"dark:hover:not-disabled:bg-secondary/50"
-			],
-			link: [
-				"text-primary underline-offset-4",
-				"hover:not-disabled:underline",
-				"focus-visible:ring-ring/50"
-			],
-			outline: [
-				"border border-input shadow-xs",
-				"hover:not-disabled:border-ring/60 hover:not-disabled:bg-secondary hover:not-disabled:text-secondary-foreground",
-				"focus-visible:border-ring focus-visible:ring-ring/50",
-				"aria-invalid:border-destructive",
-				"focus-within:aria-invalid:ring-destructive/20",
-				"hover:not-disabled:aria-invalid:border-destructive/60",
-				"dark:bg-input/30",
-				"dark:hover:not-disabled:bg-input/50",
-				"dark:aria-invalid:border-destructive/70",
-				"dark:focus-within:aria-invalid:ring-destructive/40"
-			],
-			secondary: [
-				"bg-secondary text-secondary-foreground",
-				"hover:not-disabled:bg-secondary/80",
-				"focus-visible:ring-ring/50"
-			]
-		}
-	}
-});
-/**
-* @since 0.3.16-canary.0
-*/
 function Button({ asChild = false, children, className, size, type = "button", variant, ...props }) {
 	const Comp = asChild ? Slot : "button";
 	if (asChild) return /* @__PURE__ */ jsx(Comp, {
@@ -102,4 +32,4 @@ function Button({ asChild = false, children, className, size, type = "button", v
 	});
 }
 //#endregion
-export { Button, buttonVariants };
+export { Button };

package/dist/components/calendar.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/utils.mjs";
-import { Button, buttonVariants } from "./button.mjs";
+import { buttonVariants } from "../variants/button.mjs";
+import { Button } from "./button.mjs";
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";

package/dist/components/carousel.d.mts

@@ -1,6 +1,5 @@
 import { Button } from "./button.mjs";
 import { ComponentProps, JSX } from "react";
-import * as _$_radix_ui_react_context0 from "@radix-ui/react-context";
 import { Scope } from "@radix-ui/react-context";
 import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
 
@@ -8,7 +7,7 @@ import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
 type ScopedProps<P> = P & {
   __scopeCarousel?: Scope;
 };
-declare const createCarouselScope: _$_radix_ui_react_context0.CreateScope;
+declare const createCarouselScope: import("@radix-ui/react-context").CreateScope;
 /**
  * @since 0.3.16-canary.0
  */

package/dist/components/chart.d.mts

@@ -1,6 +1,4 @@
-import * as _$react from "react";
 import { ComponentProps, ComponentType, JSX, ReactNode } from "react";
-import * as _$_radix_ui_react_context0 from "@radix-ui/react-context";
 import { Scope } from "@radix-ui/react-context";
 import * as RechartsPrimitive from "recharts";
 import { TooltipContentProps, TooltipProps } from "recharts";
@@ -29,7 +27,7 @@ type ChartConfig = Record<string, {
 type ScopedProps<P> = P & {
   __scopeChart?: Scope;
 };
-declare const createChartScope: _$_radix_ui_react_context0.CreateScope;
+declare const createChartScope: import("@radix-ui/react-context").CreateScope;
 /**
  * @since 0.3.16-canary.0
  */
@@ -109,7 +107,7 @@ type ChartLegendProps = ComponentProps<typeof RechartsPrimitive.Legend>;
 /**
  * @since 0.3.16-canary.0
  */
-declare const ChartLegend: _$react.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
 /**
  * @since 0.3.16-canary.0
  */

package/dist/components/checkbox.mjs

@@ -9,11 +9,11 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 */
 function Checkbox({ className, ...props }) {
 	return /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
-		className: cn("peer flex size-4 shrink-0 items-center justify-center", "rounded-sm border border-input shadow-xs outline-hidden", "text-primary-foreground", "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", "aria-checked:focus-visible: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:aria-checked:focus-visible:ring-primary/40", "dark:aria-invalid:ring-destructive/40", className),
+		className: cn("peer flex size-4 shrink-0 items-center justify-center", "rounded-sm border border-input shadow-xs outline-hidden", "text-primary-foreground", "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", "aria-checked:focus-visible: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:aria-checked:focus-visible:ring-primary/40", "dark:aria-invalid:ring-destructive/40", className),
 		"data-slot": "checkbox",
 		...props,
 		children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
-			className: cn("flex items-center justify-center text-current", "transition-none"),
+			className: cn("flex items-center justify-center text-current", "animate-in duration-150 ease-spring zoom-in-50", "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0"),
 			"data-slot": "checkbox-indicator",
 			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
 		})

package/dist/components/context-menu.mjs

@@ -66,7 +66,7 @@ function ContextMenuSubTrigger({ children, className, inset, ...props }) {
 */
 function ContextMenuSubContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
-		className: cn("z-50", "min-w-32 overflow-hidden p-1", "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-context-menu-content-transform-origin)", className),
+		className: cn("z-50", "min-w-32 overflow-hidden p-1", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "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-context-menu-content-transform-origin)", className),
 		"data-slot": "context-menu-sub-content",
 		...props
 	}) });
@@ -76,7 +76,7 @@ function ContextMenuSubContent({ className, ...props }) {
 */
 function ContextMenuContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
-		className: cn("z-50", "max-h-(--radix-context-menu-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto p-1", "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", "origin-(--radix-context-menu-content-transform-origin)", className),
+		className: cn("z-50", "max-h-(--radix-context-menu-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto p-1", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "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", "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0", "origin-(--radix-context-menu-content-transform-origin)", className),
 		"data-slot": "context-menu-content",
 		...props
 	}) });

package/dist/components/dialog.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 DialogPrimitive from "@radix-ui/react-dialog";
 

package/dist/components/dialog.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 { XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -28,10 +28,10 @@ function DialogTrigger({ ...props }) {
 */
 function DialogContent({ children, className, classNames, ...props }) {
 	return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
-		className: cn("fixed inset-0 z-50", "bg-black/50", "ease-ui data-open:animate-in data-open:fade-in-0", "data-closed:animate-out 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:duration-300 data-open:fade-in-0", "data-closed:animate-out data-closed:duration-200 data-closed:fade-out-0", "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0", classNames?.overlay),
 		"data-slot": "dialog-overlay"
 	}), /* @__PURE__ */ jsx(DialogPrimitive.Content, {
-		className: cn("fixed inset-0 z-50 grid grid-rows-[1fr_auto] justify-items-center overflow-auto", "sm:grid-rows-[1fr_auto_3fr] sm:p-4", "ease-ui data-open:animate-in", "max-sm:data-open:animation-duration-500 max-sm:data-open:slide-in-from-bottom", "sm:data-open:fade-in-0 sm:data-open:zoom-in-95", "data-closed:animate-out", "max-sm:data-closed:animation-duration-500 max-sm:data-closed:slide-out-to-bottom", "sm:data-closed:fade-out-0 sm:data-closed:zoom-out-95", classNames?.wrapper),
+		className: cn("fixed inset-0 z-50 grid grid-rows-[1fr_auto] justify-items-center overflow-auto", "sm:grid-rows-[1fr_auto_3fr] sm:p-4", "ease-gentle data-open:animate-in data-open:duration-300", "max-sm:data-open:animation-duration-380 max-sm:data-open:slide-in-from-bottom", "sm:data-open:fade-in-0 sm:data-open:zoom-in-95", "data-closed:animate-out data-closed:duration-200", "max-sm:data-closed:animation-duration-280 max-sm:data-closed:slide-out-to-bottom", "sm:data-closed:fade-out-0 sm:data-closed:zoom-out-95", "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0", classNames?.wrapper),
 		"data-slot": "dialog-content-wrapper",
 		...props,
 		children: /* @__PURE__ */ jsxs("div", {
@@ -105,7 +105,7 @@ function DialogDescription({ className, ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
-function DialogClose({ className, size, variant = "outline", ...props }) {
+function DialogClose({ className, size, variant, ...props }) {
 	return /* @__PURE__ */ jsx(DialogPrimitive.Close, {
 		className: buttonVariants({
 			className,

package/dist/components/drawer.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 { Drawer as Drawer$1 } from "vaul";
 

package/dist/components/drawer.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 { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer as Drawer$1 } from "vaul";
 //#region src/components/drawer.tsx
@@ -90,7 +90,7 @@ function DrawerDescription({ className, ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
-function DrawerClose({ className, size, variant = "outline", ...props }) {
+function DrawerClose({ className, size, variant, ...props }) {
 	return /* @__PURE__ */ jsx(Drawer$1.Close, {
 		className: buttonVariants({
 			className,