beez-ui 0.5.2 → 0.5.4

package/dist/components/popover.js

@@ -2,10 +2,12 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Popover as PopoverPrimitive } 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 { jsx as _jsx } from "react/jsx-runtime";
 function Popover(t0) {
-	const $ = _c(4);
+	const $ = _c(9);
 	let props;
 	if ($[0] !== t0) {
 		({...props} = t0);
@@ -14,18 +16,36 @@ function Popover(t0) {
 	} else {
 		props = $[1];
 	}
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
 	let t1;
-	if ($[2] !== props) {
+	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
 		t1 = /* @__PURE__ */ _jsx(PopoverPrimitive.Root, {
 			"data-slot": "popover",
-			...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: "popover",
+			open: motionOpen,
+			children: t1
+		});
+		$[6] = motionOpen;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	return t2;
 }
 function PopoverTrigger(t0) {
 	const $ = _c(4);
@@ -56,7 +76,7 @@ function PopoverTrigger(t0) {
 * @returns The styled primitive with its original interaction contract.
 */
 function PopoverContent(t0) {
-	const $ = _c(12);
+	const $ = _c(15);
 	let className;
 	let props;
 	let t1;
@@ -76,32 +96,53 @@ function PopoverContent(t0) {
 	}
 	const align = t1 === undefined ? "center" : t1;
 	const sideOffset = t2 === undefined ? 4 : t2;
-	let t3;
+	const t3 = props.forceMount;
+	let t4;
 	if ($[5] !== className) {
-		t3 = cn("z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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("z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden ", className);
 		$[5] = className;
-		$[6] = t3;
+		$[6] = t4;
 	} else {
-		t3 = $[6];
+		t4 = $[6];
 	}
-	let t4;
-	if ($[7] !== align || $[8] !== props || $[9] !== sideOffset || $[10] !== t3) {
-		t4 = /* @__PURE__ */ _jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ _jsx(PopoverPrimitive.Content, {
-			"data-slot": "popover-content",
-			align,
-			sideOffset,
-			className: t3,
-			...props
-		}) });
+	let t5;
+	if ($[7] !== align || $[8] !== props || $[9] !== sideOffset || $[10] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "surface",
+			children: /* @__PURE__ */ _jsx(PopoverPrimitive.Content, {
+				forceMount: true,
+				"data-slot": "popover-content",
+				align,
+				sideOffset,
+				className: t4,
+				...props
+			})
+		});
 		$[7] = align;
 		$[8] = props;
 		$[9] = sideOffset;
-		$[10] = t3;
-		$[11] = t4;
+		$[10] = t4;
+		$[11] = t5;
+	} else {
+		t5 = $[11];
+	}
+	let t6;
+	if ($[12] !== props.forceMount || $[13] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(PopoverPrimitive.Portal, {
+			forceMount: true,
+			children: /* @__PURE__ */ _jsx(MotionPresence, {
+				scope: "popover",
+				forceMount: t3,
+				children: t5
+			})
+		});
+		$[12] = props.forceMount;
+		$[13] = t5;
+		$[14] = t6;
 	} else {
-		t4 = $[11];
+		t6 = $[14];
 	}
-	return t4;
+	return t6;
 }
 function PopoverAnchor(t0) {
 	const $ = _c(4);

package/dist/components/radio-group.js

@@ -2,6 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function RadioGroup(t0) {
@@ -63,10 +64,13 @@ function RadioGroupItem(t0) {
 	}
 	let t2;
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Indicator, {
-			"data-slot": "radio-group-indicator",
-			className: "flex size-4 items-center justify-center",
-			children: /* @__PURE__ */ _jsx("span", { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" })
+		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "selection",
+			children: /* @__PURE__ */ _jsx(RadioGroupPrimitive.Indicator, {
+				"data-slot": "radio-group-indicator",
+				className: "flex size-4 items-center justify-center",
+				children: /* @__PURE__ */ _jsx("span", { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" })
+			})
 		});
 		$[5] = t2;
 	} else {
@@ -74,11 +78,14 @@ function RadioGroupItem(t0) {
 	}
 	let t3;
 	if ($[6] !== props || $[7] !== t1) {
-		t3 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Item, {
-			"data-slot": "radio-group-item",
-			className: t1,
-			...props,
-			children: t2
+		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "field",
+			children: /* @__PURE__ */ _jsx(RadioGroupPrimitive.Item, {
+				"data-slot": "radio-group-item",
+				className: t1,
+				...props,
+				children: t2
+			})
 		});
 		$[6] = props;
 		$[7] = t1;

package/dist/components/select.js

@@ -2,6 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Select as SelectPrimitive } from "radix-ui";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -132,12 +133,15 @@ function SelectTrigger(t0) {
 	}
 	let t4;
 	if ($[8] !== children || $[9] !== props || $[10] !== size || $[11] !== t2) {
-		t4 = /* @__PURE__ */ _jsxs(SelectPrimitive.Trigger, {
-			"data-slot": "select-trigger",
-			"data-size": size,
-			className: t2,
-			...props,
-			children: [children, t3]
+		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "field",
+			children: /* @__PURE__ */ _jsxs(SelectPrimitive.Trigger, {
+				"data-slot": "select-trigger",
+				"data-size": size,
+				className: t2,
+				...props,
+				children: [children, t3]
+			})
 		});
 		$[8] = children;
 		$[9] = props;
@@ -182,7 +186,7 @@ function SelectContent(t0) {
 	const t4 = position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1";
 	let t5;
 	if ($[6] !== className || $[7] !== t4) {
-		t5 = cn("z-50 max-h-(--radix-select-content-available-height) min-w-48 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!", t4, className);
+		t5 = cn("z-50 max-h-(--radix-select-content-available-height) min-w-48 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg text-popover-foreground shadow-md ring-1 ring-foreground/10 relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!", t4, className);
 		$[6] = className;
 		$[7] = t4;
 		$[8] = t5;
@@ -228,18 +232,21 @@ function SelectContent(t0) {
 	}
 	let t11;
 	if ($[17] !== align || $[18] !== position || $[19] !== props || $[20] !== t3 || $[21] !== t5 || $[22] !== t9) {
-		t11 = /* @__PURE__ */ _jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ _jsxs(SelectPrimitive.Content, {
-			"data-slot": "select-content",
-			"data-align-trigger": t3,
-			className: t5,
-			position,
-			align,
-			...props,
-			children: [
-				t6,
-				t9,
-				t10
-			]
+		t11 = /* @__PURE__ */ _jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "surface",
+			children: /* @__PURE__ */ _jsxs(SelectPrimitive.Content, {
+				"data-slot": "select-content",
+				"data-align-trigger": t3,
+				className: t5,
+				position,
+				align,
+				...props,
+				children: [
+					t6,
+					t9,
+					t10
+				]
+			})
 		}) });
 		$[17] = align;
 		$[18] = position;
@@ -343,11 +350,14 @@ function SelectItem(t0) {
 	}
 	let t4;
 	if ($[9] !== props || $[10] !== t1 || $[11] !== t3) {
-		t4 = /* @__PURE__ */ _jsxs(SelectPrimitive.Item, {
-			"data-slot": "select-item",
-			className: t1,
-			...props,
-			children: [t2, t3]
+		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "field",
+			children: /* @__PURE__ */ _jsxs(SelectPrimitive.Item, {
+				"data-slot": "select-item",
+				className: t1,
+				...props,
+				children: [t2, t3]
+			})
 		});
 		$[9] = props;
 		$[10] = t1;

package/dist/components/separator.js

@@ -1,6 +1,7 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function Separator(t0) {
@@ -30,11 +31,14 @@ function Separator(t0) {
 	}
 	let t3;
 	if ($[6] !== orientation || $[7] !== props || $[8] !== t2) {
-		t3 = /* @__PURE__ */ _jsx(SeparatorPrimitive, {
-			"data-slot": "separator",
-			orientation,
-			className: t2,
-			...props
+		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "fade",
+			children: /* @__PURE__ */ _jsx(SeparatorPrimitive, {
+				"data-slot": "separator",
+				orientation,
+				className: t2,
+				...props
+			})
 		});
 		$[6] = orientation;
 		$[7] = props;

package/dist/components/sheet.js

@@ -2,12 +2,14 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Dialog as SheetPrimitive } 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 Sheet(t0) {
-	const $ = _c(4);
+	const $ = _c(9);
 	let props;
 	if ($[0] !== t0) {
 		({...props} = t0);
@@ -16,18 +18,36 @@ function Sheet(t0) {
 	} else {
 		props = $[1];
 	}
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
 	let t1;
-	if ($[2] !== props) {
+	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
 		t1 = /* @__PURE__ */ _jsx(SheetPrimitive.Root, {
 			"data-slot": "sheet",
-			...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: "sheet",
+			open: motionOpen,
+			children: t1
+		});
+		$[6] = motionOpen;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	return t2;
 }
 function SheetTrigger(t0) {
 	const $ = _c(4);
@@ -113,7 +133,7 @@ function SheetOverlay(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("fixed inset-0 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 z-50 bg-black/30 supports-backdrop-filter:backdrop-blur-md ", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -140,7 +160,7 @@ function SheetOverlay(t0) {
 * @returns The styled primitive with its original interaction contract.
 */
 function SheetContent(t0) {
-	const $ = _c(17);
+	const $ = _c(20);
 	let children;
 	let className;
 	let props;
@@ -163,24 +183,28 @@ function SheetContent(t0) {
 	}
 	const side = t1 === undefined ? "right" : t1;
 	const showCloseButton = t2 === undefined ? true : t2;
-	let t3;
+	const t3 = props.forceMount;
+	let t4;
 	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ _jsx(SheetOverlay, {});
-		$[6] = t3;
+		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "overlay",
+			children: /* @__PURE__ */ _jsx(SheetOverlay, { forceMount: true })
+		});
+		$[6] = t4;
 	} else {
-		t3 = $[6];
+		t4 = $[6];
 	}
-	let t4;
+	let t5;
 	if ($[7] !== className) {
-		t4 = cn("fixed z-50 flex flex-col gap-4 overflow-y-auto overscroll-contain data-[side=bottom]:max-h-dvh data-[side=top]:max-h-dvh bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10", className);
+		t5 = cn("fixed z-50 flex flex-col gap-4 overflow-y-auto overscroll-contain data-[side=bottom]:max-h-dvh data-[side=top]:max-h-dvh bg-background bg-clip-padding text-sm shadow-lg transition ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm ", className);
 		$[7] = className;
-		$[8] = t4;
+		$[8] = t5;
 	} else {
-		t4 = $[8];
+		t5 = $[8];
 	}
-	let t5;
+	let t6;
 	if ($[9] !== showCloseButton) {
-		t5 = showCloseButton && /* @__PURE__ */ _jsx(SheetPrimitive.Close, {
+		t6 = showCloseButton && /* @__PURE__ */ _jsx(SheetPrimitive.Close, {
 			"data-slot": "sheet-close",
 			asChild: true,
 			children: /* @__PURE__ */ _jsxs(Button, {
@@ -194,29 +218,49 @@ function SheetContent(t0) {
 			})
 		});
 		$[9] = showCloseButton;
-		$[10] = t5;
+		$[10] = t6;
 	} else {
-		t5 = $[10];
+		t6 = $[10];
 	}
-	let t6;
-	if ($[11] !== children || $[12] !== props || $[13] !== side || $[14] !== t4 || $[15] !== t5) {
-		t6 = /* @__PURE__ */ _jsxs(SheetPortal, { children: [t3, /* @__PURE__ */ _jsxs(SheetPrimitive.Content, {
-			"data-slot": "sheet-content",
-			"data-side": side,
-			className: t4,
-			...props,
-			children: [children, t5]
+	let t7;
+	if ($[11] !== children || $[12] !== props || $[13] !== side || $[14] !== t5 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t4, /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "sheet",
+			children: /* @__PURE__ */ _jsxs(SheetPrimitive.Content, {
+				forceMount: true,
+				"data-slot": "sheet-content",
+				"data-side": side,
+				className: t5,
+				...props,
+				children: [children, t6]
+			})
 		})] });
 		$[11] = children;
 		$[12] = props;
 		$[13] = side;
-		$[14] = t4;
-		$[15] = t5;
-		$[16] = t6;
+		$[14] = t5;
+		$[15] = t6;
+		$[16] = t7;
+	} else {
+		t7 = $[16];
+	}
+	let t8;
+	if ($[17] !== props.forceMount || $[18] !== t7) {
+		t8 = /* @__PURE__ */ _jsx(SheetPortal, {
+			forceMount: true,
+			children: /* @__PURE__ */ _jsx(MotionPresence, {
+				scope: "sheet",
+				forceMount: t3,
+				children: t7
+			})
+		});
+		$[17] = props.forceMount;
+		$[18] = t7;
+		$[19] = t8;
 	} else {
-		t6 = $[16];
+		t8 = $[19];
 	}
-	return t6;
+	return t8;
 }
 function SheetHeader(t0) {
 	const $ = _c(8);

package/dist/components/sidebar.js

@@ -5,6 +5,7 @@ import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { useIsMobile } from "../hooks/use-mobile.js";
 import { useSidebarPersistence, saveSidebarPreference } from "../hooks/use-sidebar-persistence.js";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME } from "../constants/sidebar.js";
 import { Button } from "./button.js";
@@ -1054,13 +1055,16 @@ function SidebarMenuButton(t0) {
 	}
 	let t6;
 	if ($[12] !== Comp || $[13] !== isActive || $[14] !== props || $[15] !== size || $[16] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(Comp, {
-			"data-slot": "sidebar-menu-button",
-			"data-sidebar": "menu-button",
-			"data-size": size,
-			"data-active": isActive,
-			className: t5,
-			...props
+		t6 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "press",
+			children: /* @__PURE__ */ _jsx(Comp, {
+				"data-slot": "sidebar-menu-button",
+				"data-sidebar": "menu-button",
+				"data-size": size,
+				"data-active": isActive,
+				className: t5,
+				...props
+			})
 		});
 		$[12] = Comp;
 		$[13] = isActive;
@@ -1391,13 +1395,16 @@ function SidebarMenuSubButton(t0) {
 	}
 	let t5;
 	if ($[8] !== Comp || $[9] !== isActive || $[10] !== props || $[11] !== size || $[12] !== t4) {
-		t5 = /* @__PURE__ */ _jsx(Comp, {
-			"data-slot": "sidebar-menu-sub-button",
-			"data-sidebar": "menu-sub-button",
-			"data-size": size,
-			"data-active": isActive,
-			className: t4,
-			...props
+		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "press",
+			children: /* @__PURE__ */ _jsx(Comp, {
+				"data-slot": "sidebar-menu-sub-button",
+				"data-sidebar": "menu-sub-button",
+				"data-size": size,
+				"data-active": isActive,
+				className: t4,
+				...props
+			})
 		});
 		$[8] = Comp;
 		$[9] = isActive;

package/dist/components/skeleton.js

@@ -1,10 +1,14 @@
+import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
-	return /* @__PURE__ */ _jsx("div", {
-		"data-slot": "skeleton",
-		className: cn("animate-pulse rounded-md bg-muted", className),
-		...props
+	return /* @__PURE__ */ _jsx(MotionSlot, {
+		kind: "skeleton",
+		children: /* @__PURE__ */ _jsx("div", {
+			"data-slot": "skeleton",
+			className: cn("rounded-md bg-muted", className),
+			...props
+		})
 	});
 }
 export { Skeleton };

package/dist/components/svgs/whatsappIcon.js

@@ -1,13 +1,18 @@
+import { MotionSlot } from "../../motion/motion-slot.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const WhatsappIcon = (props) => /* @__PURE__ */ _jsx("svg", {
-	...props,
-	fill: "none",
-	viewBox: "0 0 360 362",
-	children: /* @__PURE__ */ _jsx("path", {
-		fill: "#25D366",
-		fillRule: "evenodd",
-		d: "M307.546 52.566C273.709 18.684 228.706.017 180.756 0 81.951 0 1.538 80.404 1.504 179.235c-.017 31.594 8.242 62.432 23.928 89.609L0 361.736l95.024-24.925c26.179 14.285 55.659 21.805 85.655 21.814h.077c98.788 0 179.21-80.413 179.244-179.244.017-47.898-18.608-92.926-52.454-126.807v-.008Zm-126.79 275.788h-.06c-26.73-.008-52.952-7.194-75.831-20.765l-5.44-3.231-56.391 14.791 15.05-54.981-3.542-5.638c-14.912-23.721-22.793-51.139-22.776-79.286.035-82.14 66.867-148.973 149.051-148.973 39.793.017 77.198 15.53 105.328 43.695 28.131 28.157 43.61 65.596 43.593 105.398-.035 82.149-66.867 148.982-148.982 148.982v.008Zm81.719-111.577c-4.478-2.243-26.497-13.073-30.606-14.568-4.108-1.496-7.09-2.243-10.073 2.243-2.982 4.487-11.568 14.577-14.181 17.559-2.613 2.991-5.226 3.361-9.704 1.117-4.477-2.243-18.908-6.97-36.02-22.226-13.313-11.878-22.304-26.54-24.916-31.027-2.613-4.486-.275-6.91 1.959-9.136 2.011-2.011 4.478-5.234 6.721-7.847 2.244-2.613 2.983-4.486 4.478-7.469 1.496-2.991.748-5.603-.369-7.847-1.118-2.243-10.073-24.289-13.812-33.253-3.636-8.732-7.331-7.546-10.073-7.692-2.613-.13-5.595-.155-8.586-.155-2.991 0-7.839 1.118-11.947 5.604-4.108 4.486-15.677 15.324-15.677 37.361s16.047 43.344 18.29 46.335c2.243 2.991 31.585 48.225 76.51 67.632 10.684 4.615 19.029 7.374 25.535 9.437 10.727 3.412 20.49 2.931 28.208 1.779 8.604-1.289 26.498-10.838 30.228-21.298 3.73-10.46 3.73-19.433 2.613-21.298-1.117-1.865-4.108-2.991-8.586-5.234l.008-.017Z",
-		clipRule: "evenodd"
+const WhatsappIcon = (props) => /* @__PURE__ */ _jsx(MotionSlot, {
+	kind: "icon",
+	children: /* @__PURE__ */ _jsx("svg", {
+		"data-slot": "whatsapp-icon",
+		...props,
+		fill: "none",
+		viewBox: "0 0 360 362",
+		children: /* @__PURE__ */ _jsx("path", {
+			fill: "#25D366",
+			fillRule: "evenodd",
+			d: "M307.546 52.566C273.709 18.684 228.706.017 180.756 0 81.951 0 1.538 80.404 1.504 179.235c-.017 31.594 8.242 62.432 23.928 89.609L0 361.736l95.024-24.925c26.179 14.285 55.659 21.805 85.655 21.814h.077c98.788 0 179.21-80.413 179.244-179.244.017-47.898-18.608-92.926-52.454-126.807v-.008Zm-126.79 275.788h-.06c-26.73-.008-52.952-7.194-75.831-20.765l-5.44-3.231-56.391 14.791 15.05-54.981-3.542-5.638c-14.912-23.721-22.793-51.139-22.776-79.286.035-82.14 66.867-148.973 149.051-148.973 39.793.017 77.198 15.53 105.328 43.695 28.131 28.157 43.61 65.596 43.593 105.398-.035 82.149-66.867 148.982-148.982 148.982v.008Zm81.719-111.577c-4.478-2.243-26.497-13.073-30.606-14.568-4.108-1.496-7.09-2.243-10.073 2.243-2.982 4.487-11.568 14.577-14.181 17.559-2.613 2.991-5.226 3.361-9.704 1.117-4.477-2.243-18.908-6.97-36.02-22.226-13.313-11.878-22.304-26.54-24.916-31.027-2.613-4.486-.275-6.91 1.959-9.136 2.011-2.011 4.478-5.234 6.721-7.847 2.244-2.613 2.983-4.486 4.478-7.469 1.496-2.991.748-5.603-.369-7.847-1.118-2.243-10.073-24.289-13.812-33.253-3.636-8.732-7.331-7.546-10.073-7.692-2.613-.13-5.595-.155-8.586-.155-2.991 0-7.839 1.118-11.947 5.604-4.108 4.486-15.677 15.324-15.677 37.361s16.047 43.344 18.29 46.335c2.243 2.991 31.585 48.225 76.51 67.632 10.684 4.615 19.029 7.374 25.535 9.437 10.727 3.412 20.49 2.931 28.208 1.779 8.604-1.289 26.498-10.838 30.228-21.298 3.73-10.46 3.73-19.433 2.613-21.298-1.117-1.865-4.108-2.991-8.586-5.234l.008-.017Z",
+			clipRule: "evenodd"
+		})
 	})
 });
 export { WhatsappIcon };

package/dist/components/switch.js

@@ -2,6 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Switch as SwitchPrimitive } from "radix-ui";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function Switch(t0) {
@@ -31,9 +32,12 @@ function Switch(t0) {
 	}
 	let t3;
 	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ _jsx(SwitchPrimitive.Thumb, {
-			"data-slot": "switch-thumb",
-			className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "thumb",
+			children: /* @__PURE__ */ _jsx(SwitchPrimitive.Thumb, {
+				"data-slot": "switch-thumb",
+				className: "pointer-events-none block rounded-full bg-background ring-0  group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+			})
 		});
 		$[6] = t3;
 	} else {
@@ -41,12 +45,15 @@ function Switch(t0) {
 	}
 	let t4;
 	if ($[7] !== props || $[8] !== size || $[9] !== t2) {
-		t4 = /* @__PURE__ */ _jsx(SwitchPrimitive.Root, {
-			"data-slot": "switch",
-			"data-size": size,
-			className: t2,
-			...props,
-			children: t3
+		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "field",
+			children: /* @__PURE__ */ _jsx(SwitchPrimitive.Root, {
+				"data-slot": "switch",
+				"data-size": size,
+				className: t2,
+				...props,
+				children: t3
+			})
 		});
 		$[7] = props;
 		$[8] = size;