beez-ui 0.5.3 → 0.5.4

package/dist/components/button.js

@@ -3,9 +3,10 @@ import { c as _c } from "react/compiler-runtime";
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none 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-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground hover:bg-primary/80",
@@ -73,12 +74,15 @@ function Button(t0) {
 	}
 	let t5;
 	if ($[10] !== Comp || $[11] !== props || $[12] !== size || $[13] !== t4 || $[14] !== variant) {
-		t5 = /* @__PURE__ */ _jsx(Comp, {
-			"data-slot": "button",
-			"data-variant": variant,
-			"data-size": size,
-			className: t4,
-			...props
+		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "press",
+			children: /* @__PURE__ */ _jsx(Comp, {
+				"data-slot": "button",
+				"data-variant": variant,
+				"data-size": size,
+				className: t4,
+				...props
+			})
 		});
 		$[10] = Comp;
 		$[11] = props;

package/dist/components/card.js

@@ -1,12 +1,16 @@
 import * as React from "react";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function Card({ className, size = "default", ...props }) {
-	return /* @__PURE__ */ _jsx("div", {
-		"data-slot": "card",
-		"data-size": size,
-		className: cn("group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
-		...props
+	return /* @__PURE__ */ _jsx(MotionSlot, {
+		kind: "card",
+		children: /* @__PURE__ */ _jsx("div", {
+			"data-slot": "card",
+			"data-size": size,
+			className: cn("group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
+			...props
+		})
 	});
 }
 function CardHeader({ className, ...props }) {

package/dist/components/carousel.js

@@ -2,6 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import useEmblaCarousel from "embla-carousel-react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
@@ -15,7 +16,7 @@ function useCarousel() {
 	return context;
 }
 function Carousel(t0) {
-	const $ = _c(45);
+	const $ = _c(47);
 	let children;
 	let className;
 	let opts;
@@ -43,6 +44,7 @@ function Carousel(t0) {
 		t1 = $[7];
 	}
 	const orientation = t1 === undefined ? "horizontal" : t1;
+	const shouldReduceMotion = usePrefersReducedMotion();
 	const t2 = orientation === "horizontal" ? "x" : "y";
 	let t3;
 	if ($[8] !== opts || $[9] !== t2) {
@@ -74,29 +76,31 @@ function Carousel(t0) {
 	}
 	const onSelect = t4;
 	let t5;
-	if ($[12] !== api) {
+	if ($[12] !== api || $[13] !== shouldReduceMotion) {
 		t5 = () => {
-			api?.scrollPrev();
+			api?.scrollPrev(shouldReduceMotion);
 		};
 		$[12] = api;
-		$[13] = t5;
+		$[13] = shouldReduceMotion;
+		$[14] = t5;
 	} else {
-		t5 = $[13];
+		t5 = $[14];
 	}
 	const scrollPrev = t5;
 	let t6;
-	if ($[14] !== api) {
+	if ($[15] !== api || $[16] !== shouldReduceMotion) {
 		t6 = () => {
-			api?.scrollNext();
+			api?.scrollNext(shouldReduceMotion);
 		};
-		$[14] = api;
-		$[15] = t6;
+		$[15] = api;
+		$[16] = shouldReduceMotion;
+		$[17] = t6;
 	} else {
-		t6 = $[15];
+		t6 = $[17];
 	}
 	const scrollNext = t6;
 	let t7;
-	if ($[16] !== scrollNext || $[17] !== scrollPrev) {
+	if ($[18] !== scrollNext || $[19] !== scrollPrev) {
 		t7 = (event) => {
 			if (event.key === "ArrowLeft") {
 				event.preventDefault();
@@ -108,16 +112,16 @@ function Carousel(t0) {
 				}
 			}
 		};
-		$[16] = scrollNext;
-		$[17] = scrollPrev;
-		$[18] = t7;
+		$[18] = scrollNext;
+		$[19] = scrollPrev;
+		$[20] = t7;
 	} else {
-		t7 = $[18];
+		t7 = $[20];
 	}
 	const handleKeyDown = t7;
 	let t8;
 	let t9;
-	if ($[19] !== api || $[20] !== setApi) {
+	if ($[21] !== api || $[22] !== setApi) {
 		t8 = () => {
 			if (!api || !setApi) {
 				return;
@@ -125,18 +129,18 @@ function Carousel(t0) {
 			setApi(api);
 		};
 		t9 = [api, setApi];
-		$[19] = api;
-		$[20] = setApi;
-		$[21] = t8;
-		$[22] = t9;
+		$[21] = api;
+		$[22] = setApi;
+		$[23] = t8;
+		$[24] = t9;
 	} else {
-		t8 = $[21];
-		t9 = $[22];
+		t8 = $[23];
+		t9 = $[24];
 	}
 	React.useEffect(t8, t9);
 	let t10;
 	let t11;
-	if ($[23] !== api) {
+	if ($[25] !== api) {
 		t10 = () => {
 			if (!api) {
 				return;
@@ -156,17 +160,17 @@ function Carousel(t0) {
 			};
 		};
 		t11 = [api, onSelect];
-		$[23] = api;
-		$[24] = t10;
-		$[25] = t11;
+		$[25] = api;
+		$[26] = t10;
+		$[27] = t11;
 	} else {
-		t10 = $[24];
-		t11 = $[25];
+		t10 = $[26];
+		t11 = $[27];
 	}
 	React.useEffect(t10, t11);
 	const t12 = orientation || (opts?.axis === "y" ? "vertical" : "horizontal");
 	let t13;
-	if ($[26] !== api || $[27] !== canScrollNext || $[28] !== canScrollPrev || $[29] !== carouselRef || $[30] !== opts || $[31] !== scrollNext || $[32] !== scrollPrev || $[33] !== t12) {
+	if ($[28] !== api || $[29] !== canScrollNext || $[30] !== canScrollPrev || $[31] !== carouselRef || $[32] !== opts || $[33] !== scrollNext || $[34] !== scrollPrev || $[35] !== t12) {
 		t13 = {
 			carouselRef,
 			api,
@@ -177,28 +181,28 @@ function Carousel(t0) {
 			canScrollPrev,
 			canScrollNext
 		};
-		$[26] = api;
-		$[27] = canScrollNext;
-		$[28] = canScrollPrev;
-		$[29] = carouselRef;
-		$[30] = opts;
-		$[31] = scrollNext;
-		$[32] = scrollPrev;
-		$[33] = t12;
-		$[34] = t13;
+		$[28] = api;
+		$[29] = canScrollNext;
+		$[30] = canScrollPrev;
+		$[31] = carouselRef;
+		$[32] = opts;
+		$[33] = scrollNext;
+		$[34] = scrollPrev;
+		$[35] = t12;
+		$[36] = t13;
 	} else {
-		t13 = $[34];
+		t13 = $[36];
 	}
 	let t14;
-	if ($[35] !== className) {
+	if ($[37] !== className) {
 		t14 = cn("relative", className);
-		$[35] = className;
-		$[36] = t14;
+		$[37] = className;
+		$[38] = t14;
 	} else {
-		t14 = $[36];
+		t14 = $[38];
 	}
 	let t15;
-	if ($[37] !== children || $[38] !== handleKeyDown || $[39] !== props || $[40] !== t14) {
+	if ($[39] !== children || $[40] !== handleKeyDown || $[41] !== props || $[42] !== t14) {
 		t15 = /* @__PURE__ */ _jsx("div", {
 			onKeyDownCapture: handleKeyDown,
 			className: t14,
@@ -208,25 +212,25 @@ function Carousel(t0) {
 			...props,
 			children
 		});
-		$[37] = children;
-		$[38] = handleKeyDown;
-		$[39] = props;
-		$[40] = t14;
-		$[41] = t15;
+		$[39] = children;
+		$[40] = handleKeyDown;
+		$[41] = props;
+		$[42] = t14;
+		$[43] = t15;
 	} else {
-		t15 = $[41];
+		t15 = $[43];
 	}
 	let t16;
-	if ($[42] !== t13 || $[43] !== t15) {
+	if ($[44] !== t13 || $[45] !== t15) {
 		t16 = /* @__PURE__ */ _jsx(CarouselContext.Provider, {
 			value: t13,
 			children: t15
 		});
-		$[42] = t13;
-		$[43] = t15;
-		$[44] = t16;
+		$[44] = t13;
+		$[45] = t15;
+		$[46] = t16;
 	} else {
-		t16 = $[44];
+		t16 = $[46];
 	}
 	return t16;
 }

package/dist/components/checkbox.js

@@ -3,6 +3,7 @@ import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import { CheckIcon } from "lucide-react";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function Checkbox(t0) {
@@ -28,10 +29,13 @@ function Checkbox(t0) {
 	}
 	let t2;
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx(CheckboxPrimitive.Indicator, {
-			"data-slot": "checkbox-indicator",
-			className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
-			children: /* @__PURE__ */ _jsx(CheckIcon, {})
+		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "selection",
+			children: /* @__PURE__ */ _jsx(CheckboxPrimitive.Indicator, {
+				"data-slot": "checkbox-indicator",
+				className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+				children: /* @__PURE__ */ _jsx(CheckIcon, {})
+			})
 		});
 		$[5] = t2;
 	} else {
@@ -39,11 +43,14 @@ function Checkbox(t0) {
 	}
 	let t3;
 	if ($[6] !== props || $[7] !== t1) {
-		t3 = /* @__PURE__ */ _jsx(CheckboxPrimitive.Root, {
-			"data-slot": "checkbox",
-			className: t1,
-			...props,
-			children: t2
+		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "field",
+			children: /* @__PURE__ */ _jsx(CheckboxPrimitive.Root, {
+				"data-slot": "checkbox",
+				className: t1,
+				...props,
+				children: t2
+			})
 		});
 		$[6] = props;
 		$[7] = t1;

package/dist/components/dialog.js

@@ -2,12 +2,14 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
+import { MotionSlot } from "../motion/motion-slot.js";
+import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { XIcon } from "lucide-react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Dialog(t0) {
-	const $ = _c(4);
+	const $ = _c(9);
 	let props;
 	if ($[0] !== t0) {
 		({...props} = t0);
@@ -16,18 +18,36 @@ function Dialog(t0) {
 	} else {
 		props = $[1];
 	}
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
 	let t1;
-	if ($[2] !== props) {
+	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
 		t1 = /* @__PURE__ */ _jsx(DialogPrimitive.Root, {
 			"data-slot": "dialog",
-			...props
+			...props,
+			open: motionOpen,
+			onOpenChange: setMotionOpen
 		});
-		$[2] = props;
-		$[3] = t1;
+		$[2] = motionOpen;
+		$[3] = props;
+		$[4] = setMotionOpen;
+		$[5] = t1;
 	} else {
-		t1 = $[3];
+		t1 = $[5];
 	}
-	return t1;
+	let t2;
+	if ($[6] !== motionOpen || $[7] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
+			scope: "dialog",
+			open: motionOpen,
+			children: t1
+		});
+		$[6] = motionOpen;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	return t2;
 }
 function DialogTrigger(t0) {
 	const $ = _c(4);
@@ -113,7 +133,7 @@ function DialogOverlay(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("fixed inset-0 isolate z-50 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-md data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className);
+		t1 = cn("fixed inset-0 isolate z-50 bg-black/30 supports-backdrop-filter:backdrop-blur-md ", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -140,7 +160,7 @@ function DialogOverlay(t0) {
 * @returns The styled primitive with its original interaction contract.
 */
 function DialogContent(t0) {
-	const $ = _c(15);
+	const $ = _c(18);
 	let children;
 	let className;
 	let props;
@@ -159,24 +179,28 @@ function DialogContent(t0) {
 		t1 = $[4];
 	}
 	const showCloseButton = t1 === undefined ? true : t1;
-	let t2;
+	const t2 = props.forceMount;
+	let t3;
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx(DialogOverlay, {});
-		$[5] = t2;
+		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "overlay",
+			children: /* @__PURE__ */ _jsx(DialogOverlay, { forceMount: true })
+		});
+		$[5] = t3;
 	} else {
-		t2 = $[5];
+		t3 = $[5];
 	}
-	let t3;
+	let t4;
 	if ($[6] !== className) {
-		t3 = cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100svh-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm 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", className);
+		t4 = cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100svh-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 outline-none sm:max-w-sm ", className);
 		$[6] = className;
-		$[7] = t3;
+		$[7] = t4;
 	} else {
-		t3 = $[7];
+		t4 = $[7];
 	}
-	let t4;
+	let t5;
 	if ($[8] !== showCloseButton) {
-		t4 = showCloseButton && /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
+		t5 = showCloseButton && /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
 			"data-slot": "dialog-close",
 			asChild: true,
 			children: /* @__PURE__ */ _jsxs(Button, {
@@ -190,27 +214,47 @@ function DialogContent(t0) {
 			})
 		});
 		$[8] = showCloseButton;
-		$[9] = t4;
+		$[9] = t5;
 	} else {
-		t4 = $[9];
+		t5 = $[9];
 	}
-	let t5;
-	if ($[10] !== children || $[11] !== props || $[12] !== t3 || $[13] !== t4) {
-		t5 = /* @__PURE__ */ _jsxs(DialogPortal, { children: [t2, /* @__PURE__ */ _jsxs(DialogPrimitive.Content, {
-			"data-slot": "dialog-content",
-			className: t3,
-			...props,
-			children: [children, t4]
+	let t6;
+	if ($[10] !== children || $[11] !== props || $[12] !== t4 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t3, /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "dialog",
+			children: /* @__PURE__ */ _jsxs(DialogPrimitive.Content, {
+				forceMount: true,
+				"data-slot": "dialog-content",
+				className: t4,
+				...props,
+				children: [children, t5]
+			})
 		})] });
 		$[10] = children;
 		$[11] = props;
-		$[12] = t3;
-		$[13] = t4;
-		$[14] = t5;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+	} else {
+		t6 = $[14];
+	}
+	let t7;
+	if ($[15] !== props.forceMount || $[16] !== t6) {
+		t7 = /* @__PURE__ */ _jsx(DialogPortal, {
+			forceMount: true,
+			children: /* @__PURE__ */ _jsx(MotionPresence, {
+				scope: "dialog",
+				forceMount: t2,
+				children: t6
+			})
+		});
+		$[15] = props.forceMount;
+		$[16] = t6;
+		$[17] = t7;
 	} else {
-		t5 = $[14];
+		t7 = $[17];
 	}
-	return t5;
+	return t7;
 }
 function DialogHeader(t0) {
 	const $ = _c(8);