beez-ui 0.5.2 → 0.5.4

package/dist/components/dropdown-menu.js

@@ -2,11 +2,13 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { DropdownMenu as DropdownMenuPrimitive } 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 { CheckIcon, ChevronRightIcon } from "lucide-react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DropdownMenu(t0) {
-	const $ = _c(4);
+	const $ = _c(9);
 	let props;
 	if ($[0] !== t0) {
 		({...props} = t0);
@@ -15,18 +17,36 @@ function DropdownMenu(t0) {
 	} else {
 		props = $[1];
 	}
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
 	let t1;
-	if ($[2] !== props) {
+	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
 		t1 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Root, {
 			"data-slot": "dropdown-menu",
-			...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: "dropdown-menu",
+			open: motionOpen,
+			children: t1
+		});
+		$[6] = motionOpen;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	return t2;
 }
 function DropdownMenuPortal(t0) {
 	const $ = _c(4);
@@ -76,7 +96,7 @@ function DropdownMenuTrigger(t0) {
 }
 /** Sizes action menus by their content instead of narrowing them to an icon trigger. */
 function DropdownMenuContent(t0) {
-	const $ = _c(12);
+	const $ = _c(15);
 	let className;
 	let props;
 	let t1;
@@ -96,32 +116,53 @@ function DropdownMenuContent(t0) {
 	}
 	const align = t1 === undefined ? "start" : t1;
 	const sideOffset = t2 === undefined ? 4 : t2;
-	let t3;
+	const t3 = props.forceMount;
+	let t4;
 	if ($[5] !== className) {
-		t3 = cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-48 max-w-(--radix-dropdown-menu-content-available-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 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-[state=closed]:overflow-hidden 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-destructive/10!", className);
+		t4 = cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-48 max-w-(--radix-dropdown-menu-content-available-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[state=closed]:overflow-hidden 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-destructive/10!", className);
 		$[5] = className;
-		$[6] = t3;
-	} else {
-		t3 = $[6];
-	}
-	let t4;
-	if ($[7] !== align || $[8] !== props || $[9] !== sideOffset || $[10] !== t3) {
-		t4 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Content, {
-			"data-slot": "dropdown-menu-content",
-			sideOffset,
-			align,
-			className: t3,
-			...props
-		}) });
+		$[6] = t4;
+	} else {
+		t4 = $[6];
+	}
+	let t5;
+	if ($[7] !== align || $[8] !== props || $[9] !== sideOffset || $[10] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "surface",
+			children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Content, {
+				forceMount: true,
+				"data-slot": "dropdown-menu-content",
+				sideOffset,
+				align,
+				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(DropdownMenuPrimitive.Portal, {
+			forceMount: true,
+			children: /* @__PURE__ */ _jsx(MotionPresence, {
+				scope: "dropdown-menu",
+				forceMount: t3,
+				children: t5
+			})
+		});
+		$[12] = props.forceMount;
+		$[13] = t5;
+		$[14] = t6;
 	} else {
-		t4 = $[11];
+		t6 = $[14];
 	}
-	return t4;
+	return t6;
 }
 function DropdownMenuGroup(t0) {
 	const $ = _c(4);
@@ -469,7 +510,7 @@ function DropdownMenuShortcut(t0) {
 	return t2;
 }
 function DropdownMenuSub(t0) {
-	const $ = _c(4);
+	const $ = _c(9);
 	let props;
 	if ($[0] !== t0) {
 		({...props} = t0);
@@ -478,18 +519,36 @@ function DropdownMenuSub(t0) {
 	} else {
 		props = $[1];
 	}
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
 	let t1;
-	if ($[2] !== props) {
+	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
 		t1 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Sub, {
 			"data-slot": "dropdown-menu-sub",
-			...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: "dropdown-sub",
+			open: motionOpen,
+			children: t1
+		});
+		$[6] = motionOpen;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	return t2;
 }
 /**
 * Renders a compact trigger for a nested menu.
@@ -555,7 +614,7 @@ function DropdownMenuSubTrigger(t0) {
 * @returns The styled primitive with its original interaction contract.
 */
 function DropdownMenuSubContent(t0) {
-	const $ = _c(8);
+	const $ = _c(11);
 	let className;
 	let props;
 	if ($[0] !== t0) {
@@ -567,27 +626,45 @@ function DropdownMenuSubContent(t0) {
 		className = $[1];
 		props = $[2];
 	}
-	let t1;
+	const t1 = props.forceMount;
+	let t2;
 	if ($[3] !== className) {
-		t1 = cn("z-50 min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 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 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-destructive/10!", className);
+		t2 = cn("z-50 min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg p-1 text-popover-foreground shadow-lg 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-destructive/10!", className);
 		$[3] = className;
-		$[4] = t1;
+		$[4] = t2;
 	} else {
-		t1 = $[4];
+		t2 = $[4];
 	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.SubContent, {
-			"data-slot": "dropdown-menu-sub-content",
-			className: t1,
-			...props
+	let t3;
+	if ($[5] !== props || $[6] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "surface",
+			children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.SubContent, {
+				forceMount: true,
+				"data-slot": "dropdown-menu-sub-content",
+				className: t2,
+				...props
+			})
 		});
 		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+		$[6] = t2;
+		$[7] = t3;
 	} else {
-		t2 = $[7];
+		t3 = $[7];
 	}
-	return t2;
+	let t4;
+	if ($[8] !== props.forceMount || $[9] !== t3) {
+		t4 = /* @__PURE__ */ _jsx(MotionPresence, {
+			scope: "dropdown-sub",
+			forceMount: t1,
+			children: t3
+		});
+		$[8] = props.forceMount;
+		$[9] = t3;
+		$[10] = t4;
+	} else {
+		t4 = $[10];
+	}
+	return t4;
 }
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent };

package/dist/components/form.js

@@ -3,6 +3,7 @@ import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Slot } from "radix-ui";
 import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { Label } from "./label.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -148,9 +149,12 @@ function FormItem(t0) {
 	}
 	let t4;
 	if ($[10] !== t1 || $[11] !== t3) {
-		t4 = /* @__PURE__ */ _jsx(FormItemContext.Provider, {
-			value: t1,
-			children: t3
+		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "field",
+			children: /* @__PURE__ */ _jsx(FormItemContext.Provider, {
+				value: t1,
+				children: t3
+			})
 		});
 		$[10] = t1;
 		$[11] = t3;
@@ -301,12 +305,15 @@ function FormMessage(t0) {
 	}
 	let t2;
 	if ($[5] !== body || $[6] !== formMessageId || $[7] !== props || $[8] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("p", {
-			"data-slot": "form-message",
-			id: formMessageId,
-			className: t1,
-			...props,
-			children: body
+		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "fade",
+			children: /* @__PURE__ */ _jsx("p", {
+				"data-slot": "form-message",
+				id: formMessageId,
+				className: t1,
+				...props,
+				children: body
+			})
 		});
 		$[5] = body;
 		$[6] = formMessageId;

package/dist/components/highlighter.js

@@ -1,10 +1,11 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { annotate } from "rough-notation";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function Highlighter(t0) {
-	const $ = _c(17);
+	const $ = _c(18);
 	const { children, action: t1, color: t2, strokeWidth: t3, animationDuration: t4, iterations: t5, padding: t6, multiline: t7, isView: t8 } = t0;
 	const action = t1 === undefined ? "highlight" : t1;
 	const color = t2 === undefined ? "#ffd1dc" : t2;
@@ -14,6 +15,7 @@ export function Highlighter(t0) {
 	const padding = t6 === undefined ? 2 : t6;
 	const multiline = t7 === undefined ? true : t7;
 	const isView = t8 === undefined ? false : t8;
+	const shouldReduceMotion = usePrefersReducedMotion();
 	const elementRef = useRef(null);
 	const annotationRef = useRef(null);
 	let t9;
@@ -60,7 +62,7 @@ export function Highlighter(t0) {
 	const shouldShow = !isView || isInView;
 	let t12;
 	let t13;
-	if ($[5] !== action || $[6] !== animationDuration || $[7] !== color || $[8] !== iterations || $[9] !== multiline || $[10] !== padding || $[11] !== shouldShow || $[12] !== strokeWidth) {
+	if ($[5] !== action || $[6] !== animationDuration || $[7] !== color || $[8] !== iterations || $[9] !== multiline || $[10] !== padding || $[11] !== shouldReduceMotion || $[12] !== shouldShow || $[13] !== strokeWidth) {
 		t12 = () => {
 			const element_0 = elementRef.current;
 			let resizeObserver = null;
@@ -71,6 +73,7 @@ export function Highlighter(t0) {
 					color,
 					strokeWidth,
 					animationDuration,
+					animate: !shouldReduceMotion,
 					iterations,
 					padding,
 					multiline
@@ -107,6 +110,7 @@ export function Highlighter(t0) {
 		};
 		t13 = [
 			shouldShow,
+			shouldReduceMotion,
 			action,
 			color,
 			strokeWidth,
@@ -121,26 +125,28 @@ export function Highlighter(t0) {
 		$[8] = iterations;
 		$[9] = multiline;
 		$[10] = padding;
-		$[11] = shouldShow;
-		$[12] = strokeWidth;
-		$[13] = t12;
-		$[14] = t13;
+		$[11] = shouldReduceMotion;
+		$[12] = shouldShow;
+		$[13] = strokeWidth;
+		$[14] = t12;
+		$[15] = t13;
 	} else {
-		t12 = $[13];
-		t13 = $[14];
+		t12 = $[14];
+		t13 = $[15];
 	}
 	useEffect(t12, t13);
 	let t14;
-	if ($[15] !== children) {
+	if ($[16] !== children) {
 		t14 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "highlighter",
 			ref: elementRef,
 			className: "relative inline-block bg-transparent",
 			children
 		});
-		$[15] = children;
-		$[16] = t14;
+		$[16] = children;
+		$[17] = t14;
 	} else {
-		t14 = $[16];
+		t14 = $[17];
 	}
 	return t14;
 }

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;
 }