beez-ui 0.5.3 → 0.5.5

package/dist/components/hover-card.js

@@ -2,10 +2,12 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { HoverCard as HoverCardPrimitive } 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 HoverCard(t0) {
-	const $ = _c(4);
+	const $ = _c(9);
 	let props;
 	if ($[0] !== t0) {
 		({...props} = t0);
@@ -14,18 +16,36 @@ function HoverCard(t0) {
 	} else {
 		props = $[1];
 	}
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
 	let t1;
-	if ($[2] !== props) {
+	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
 		t1 = /* @__PURE__ */ _jsx(HoverCardPrimitive.Root, {
 			"data-slot": "hover-card",
-			...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: "hover-card",
+			open: motionOpen,
+			children: t1
+		});
+		$[6] = motionOpen;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	return t2;
 }
 function HoverCardTrigger(t0) {
 	const $ = _c(4);
@@ -51,7 +71,7 @@ function HoverCardTrigger(t0) {
 	return t1;
 }
 function HoverCardContent(t0) {
-	const $ = _c(12);
+	const $ = _c(15);
 	let className;
 	let props;
 	let t1;
@@ -71,34 +91,53 @@ function HoverCardContent(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 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 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 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 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(HoverCardPrimitive.Portal, {
-			"data-slot": "hover-card-portal",
+	let t5;
+	if ($[7] !== align || $[8] !== props || $[9] !== sideOffset || $[10] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "surface",
 			children: /* @__PURE__ */ _jsx(HoverCardPrimitive.Content, {
+				forceMount: true,
 				"data-slot": "hover-card-content",
 				align,
 				sideOffset,
-				className: t3,
+				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(HoverCardPrimitive.Portal, {
+			"data-slot": "hover-card-portal",
+			forceMount: true,
+			children: /* @__PURE__ */ _jsx(MotionPresence, {
+				scope: "hover-card",
+				forceMount: t3,
+				children: t5
+			})
+		});
+		$[12] = props.forceMount;
+		$[13] = t5;
+		$[14] = t6;
 	} else {
-		t4 = $[11];
+		t6 = $[14];
 	}
-	return t4;
+	return t6;
 }
 export { HoverCard, HoverCardTrigger, HoverCardContent };

package/dist/components/input-group.js

@@ -2,6 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
@@ -30,11 +31,14 @@ function InputGroup(t0) {
 	}
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "input-group",
-			role: "group",
-			className: t1,
-			...props
+		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "field",
+			children: /* @__PURE__ */ _jsx("div", {
+				"data-slot": "input-group",
+				role: "group",
+				className: t1,
+				...props
+			})
 		});
 		$[5] = props;
 		$[6] = t1;

package/dist/components/input.js

@@ -1,13 +1,17 @@
 import * as React from "react";
 import { Input as InputPrimitive } from "@base-ui/react/input";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function Input({ className, type, ...props }) {
-	return /* @__PURE__ */ _jsx(InputPrimitive, {
-		type,
-		"data-slot": "input",
-		className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
-		...props
+	return /* @__PURE__ */ _jsx(MotionSlot, {
+		kind: "field",
+		children: /* @__PURE__ */ _jsx(InputPrimitive, {
+			type,
+			"data-slot": "input",
+			className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+			...props
+		})
 	});
 }
 export { Input };

package/dist/components/label.js

@@ -2,6 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Label as LabelPrimitive } 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 Label(t0) {
@@ -27,10 +28,13 @@ function Label(t0) {
 	}
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(LabelPrimitive.Root, {
-			"data-slot": "label",
-			className: t1,
-			...props
+		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "field",
+			children: /* @__PURE__ */ _jsx(LabelPrimitive.Root, {
+				"data-slot": "label",
+				className: t1,
+				...props
+			})
 		});
 		$[5] = props;
 		$[6] = t1;

package/dist/components/link.d.ts

@@ -1,4 +1,3 @@
-/** Selects the configured routing adapter while keeping a native anchor fallback. */
 import type { ComponentType } from "react";
 import { type BeezLinkProps } from "../providers/beez-ui-provider.js";
 /** Shares native link props and explicit per-link navigation overrides. */

package/dist/components/link.js

@@ -1,10 +1,12 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
+/** Selects the configured routing adapter while keeping a native anchor fallback. */
+import { MotionSlot } from "../motion/motion-slot.js";
 import { useBeezUIComponents } from "../providers/beez-ui-provider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Uses the provider's adapter and excludes framework hints from native DOM attributes. */
 export function Link(t0) {
-	const $ = _c(10);
+	const $ = _c(11);
 	let component;
 	let prefetch;
 	let props;
@@ -21,29 +23,35 @@ export function Link(t0) {
 	}
 	const adapters = useBeezUIComponents();
 	const Component = component ?? adapters.Link;
-	if (!Component || Component === "a") {
-		let t1;
-		if ($[4] !== props) {
-			t1 = /* @__PURE__ */ _jsx("a", { ...props });
-			$[4] = props;
-			$[5] = t1;
-		} else {
-			t1 = $[5];
-		}
-		return t1;
-	}
 	let t1;
-	if ($[6] !== Component || $[7] !== prefetch || $[8] !== props) {
-		t1 = /* @__PURE__ */ _jsx(Component, {
+	if ($[4] !== Component || $[5] !== prefetch || $[6] !== props) {
+		t1 = !Component || Component === "a" ? /* @__PURE__ */ _jsx("a", {
+			"data-slot": "link",
+			...props
+		}) : /* @__PURE__ */ _jsx(Component, {
+			"data-slot": "link",
 			...props,
 			prefetch
 		});
-		$[6] = Component;
-		$[7] = prefetch;
-		$[8] = props;
-		$[9] = t1;
+		$[4] = Component;
+		$[5] = prefetch;
+		$[6] = props;
+		$[7] = t1;
+	} else {
+		t1 = $[7];
+	}
+	const link = t1;
+	let t2;
+	if ($[8] !== link || $[9] !== props) {
+		t2 = "data-slot" in props ? link : /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "link",
+			children: link
+		});
+		$[8] = link;
+		$[9] = props;
+		$[10] = t2;
 	} else {
-		t1 = $[9];
+		t2 = $[10];
 	}
-	return t1;
+	return t2;
 }

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;