beez-ui 3.0.1 → 4.0.0

package/dist/components/textarea.js

@@ -1,6 +1,5 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { Field, usesFieldCopy, useFieldAria } from "./field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -68,16 +67,13 @@ function Textarea(textareaProps) {
 	const t4 = aria["aria-invalid"];
 	let t5;
 	if ($[14] !== props || $[15] !== t1 || $[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
-		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "field",
-			children: /* @__PURE__ */ _jsx("textarea", {
-				"data-slot": "textarea",
-				className: t1,
-				...props,
-				id: t2,
-				"aria-describedby": t3,
-				"aria-invalid": t4
-			})
+		t5 = /* @__PURE__ */ _jsx("textarea", {
+			"data-slot": "textarea",
+			className: t1,
+			...props,
+			id: t2,
+			"aria-describedby": t3,
+			"aria-invalid": t4
 		});
 		$[14] = props;
 		$[15] = t1;

package/dist/components/themed-toaster.js

@@ -1,6 +1,5 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { Toaster } from "./toaster.js";
 import { useTheme } from "next-themes";
@@ -11,7 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 * toasts stay usable from an open `Dialog` (also in `alert` mode) or `Sheet`.
 */
 const ThemedToaster = (t0) => {
-	const $ = _c(16);
+	const $ = _c(13);
 	let className;
 	let props;
 	let theme;
@@ -37,84 +36,51 @@ const ThemedToaster = (t0) => {
 		t1 = $[5];
 	}
 	let t2;
+	let t3;
 	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "selection",
-			children: /* @__PURE__ */ _jsx(CircleCheck, { className: "size-4" })
-		});
+		t2 = {
+			success: /* @__PURE__ */ _jsx(CircleCheck, { className: "size-4" }),
+			info: /* @__PURE__ */ _jsx(Info, { className: "size-4" }),
+			warning: /* @__PURE__ */ _jsx(TriangleAlert, { className: "size-4" }),
+			error: /* @__PURE__ */ _jsx(OctagonAlert, { className: "size-4" }),
+			loading: /* @__PURE__ */ _jsx(Loader, { className: "size-4 animate-spin" })
+		};
+		t3 = {
+			"--normal-bg": "var(--popover)",
+			"--normal-text": "var(--popover-foreground)",
+			"--normal-border": "var(--border)",
+			"--border-radius": "var(--radius)"
+		};
 		$[6] = t2;
-	} else {
-		t2 = $[6];
-	}
-	let t3;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "selection",
-			children: /* @__PURE__ */ _jsx(Info, { className: "size-4" })
-		});
 		$[7] = t3;
 	} else {
+		t2 = $[6];
 		t3 = $[7];
 	}
 	let t4;
 	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "selection",
-			children: /* @__PURE__ */ _jsx(TriangleAlert, { className: "size-4" })
-		});
+		t4 = { classNames: { toast: "cn-toast" } };
 		$[8] = t4;
 	} else {
 		t4 = $[8];
 	}
 	let t5;
-	let t6;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = {
-			success: t2,
-			info: t3,
-			warning: t4,
-			error: /* @__PURE__ */ _jsx(MotionSlot, {
-				kind: "selection",
-				children: /* @__PURE__ */ _jsx(OctagonAlert, { className: "size-4" })
-			}),
-			loading: /* @__PURE__ */ _jsx(Loader, { className: "size-4 animate-spin" })
-		};
-		t6 = {
-			"--normal-bg": "var(--popover)",
-			"--normal-text": "var(--popover-foreground)",
-			"--normal-border": "var(--border)",
-			"--border-radius": "var(--radius)"
-		};
-		$[9] = t5;
-		$[10] = t6;
-	} else {
-		t5 = $[9];
-		t6 = $[10];
-	}
-	let t7;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = { classNames: { toast: "cn-toast" } };
-		$[11] = t7;
-	} else {
-		t7 = $[11];
-	}
-	let t8;
-	if ($[12] !== activeTheme || $[13] !== props || $[14] !== t1) {
-		t8 = /* @__PURE__ */ _jsx(Toaster, {
+	if ($[9] !== activeTheme || $[10] !== props || $[11] !== t1) {
+		t5 = /* @__PURE__ */ _jsx(Toaster, {
 			theme: activeTheme,
 			className: t1,
-			icons: t5,
-			style: t6,
-			toastOptions: t7,
+			icons: t2,
+			style: t3,
+			toastOptions: t4,
 			...props
 		});
-		$[12] = activeTheme;
-		$[13] = props;
-		$[14] = t1;
-		$[15] = t8;
+		$[9] = activeTheme;
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t5;
 	} else {
-		t8 = $[15];
+		t5 = $[12];
 	}
-	return t8;
+	return t5;
 };
 export { ThemedToaster };

package/dist/constants/dropdown-menu.d.ts

@@ -1,5 +1,10 @@
-/** Placement defaults of the dropdown menu content, taken from Arc's Dropdown menu. */
+import type { ArcFloatingMotion } from "../motion/arc-floating-slot.js";
 /** Gap, in pixels, between the trigger and the menu. */
 export declare const DROPDOWN_MENU_SIDE_OFFSET_PX = 6;
 /** Minimum distance, in pixels, a menu keeps from the viewport edges. */
 export declare const DROPDOWN_MENU_COLLISION_PADDING_PX = 12;
+/**
+ * Arc's menu: it starts 5px toward its trigger at .97, settles on the CSS spring while it fades in quickly, and
+ * leaves halfway back toward the trigger at .985.
+ */
+export declare const DROPDOWN_MENU_MOTION: ArcFloatingMotion;

package/dist/constants/dropdown-menu.js

@@ -1,5 +1,37 @@
-/** Placement defaults of the dropdown menu content, taken from Arc's Dropdown menu. */
+import { ARC_DURATION, ARC_EASE, ARC_SPRING_CSS } from "../motion/arc-tokens.js";
 /** Gap, in pixels, between the trigger and the menu. */
 export const DROPDOWN_MENU_SIDE_OFFSET_PX = 6;
 /** Minimum distance, in pixels, a menu keeps from the viewport edges. */
 export const DROPDOWN_MENU_COLLISION_PADDING_PX = 12;
+/** Arc closes the menu in 130ms on the standard curve. */
+const DROPDOWN_MENU_EXIT_TWEEN = {
+	duration: .13,
+	ease: [...ARC_EASE.standard]
+};
+/**
+* Arc's menu: it starts 5px toward its trigger at .97, settles on the CSS spring while it fades in quickly, and
+* leaves halfway back toward the trigger at .985.
+*/
+export const DROPDOWN_MENU_MOTION = {
+	enterFrom: {
+		travel: 5,
+		scale: .97,
+		opacity: 0
+	},
+	enter: {
+		transform: ARC_SPRING_CSS,
+		opacity: {
+			duration: ARC_DURATION.fast,
+			ease: [...ARC_EASE.enter]
+		}
+	},
+	exitTo: {
+		travel: 2.5,
+		scale: .985,
+		opacity: 0
+	},
+	exit: {
+		transform: DROPDOWN_MENU_EXIT_TWEEN,
+		opacity: DROPDOWN_MENU_EXIT_TWEEN
+	}
+};

package/dist/constants/popover.js

@@ -1,14 +1,8 @@
-import { ARC_DURATION, ARC_EASE } from "../motion/arc-tokens.js";
+import { ARC_DURATION, ARC_EASE, ARC_SPRING_CSS } from "../motion/arc-tokens.js";
 /** Gap, in px, between the panel and its trigger. */
 export const POPOVER_SIDE_OFFSET_PX = 6;
 /** Distance, in px, the panel keeps from the viewport edges before it flips or shifts. */
 export const POPOVER_COLLISION_PADDING_PX = 10;
-/** Arc's CSS spring (`--ease-spring`, bounce .15) as a Motion spring: the panel settles with a gentle overshoot. */
-const POPOVER_SETTLE_SPRING = {
-	type: "spring",
-	visualDuration: .34,
-	bounce: .15
-};
 const exitTween = {
 	duration: ARC_DURATION.fast,
 	ease: [...ARC_EASE.standard]
@@ -21,7 +15,7 @@ export const POPOVER_MOTION = {
 		opacity: 0
 	},
 	enter: {
-		transform: POPOVER_SETTLE_SPRING,
+		transform: ARC_SPRING_CSS,
 		opacity: {
 			duration: ARC_DURATION.fast,
 			ease: [...ARC_EASE.enter]

package/dist/constants/select.d.ts

@@ -1,5 +1,7 @@
-/** Placement defaults and copy of Arc's Select. */
+import type { ArcFloatingMotion } from "../motion/arc-floating-slot.js";
 /** Minimum distance, in pixels, the option list keeps from the viewport edges. */
 export declare const SELECT_COLLISION_PADDING_PX = 12;
 /** Default Spanish placeholder, shown while no option is chosen. Arc's English default is "Select an option". */
 export declare const SELECT_DEFAULT_PLACEHOLDER = "Seleccion\u00E1 una opci\u00F3n";
+/** Arc's option list: it grows 6px from the trigger edge at .97 and leaves halfway back at .98, both as tweens. */
+export declare const SELECT_MOTION: ArcFloatingMotion;

package/dist/constants/select.js

@@ -1,5 +1,34 @@
-/** Placement defaults and copy of Arc's Select. */
+import { ARC_DURATION, ARC_EASE } from "../motion/arc-tokens.js";
 /** Minimum distance, in pixels, the option list keeps from the viewport edges. */
 export const SELECT_COLLISION_PADDING_PX = 12;
 /** Default Spanish placeholder, shown while no option is chosen. Arc's English default is "Select an option". */
 export const SELECT_DEFAULT_PLACEHOLDER = "Seleccioná una opción";
+const SELECT_ENTER_TWEEN = {
+	duration: ARC_DURATION.standard,
+	ease: [...ARC_EASE.enter]
+};
+const SELECT_EXIT_TWEEN = {
+	duration: ARC_DURATION.instant,
+	ease: [...ARC_EASE.standard]
+};
+/** Arc's option list: it grows 6px from the trigger edge at .97 and leaves halfway back at .98, both as tweens. */
+export const SELECT_MOTION = {
+	enterFrom: {
+		travel: 6,
+		scale: .97,
+		opacity: 0
+	},
+	enter: {
+		transform: SELECT_ENTER_TWEEN,
+		opacity: SELECT_ENTER_TWEEN
+	},
+	exitTo: {
+		travel: 3,
+		scale: .98,
+		opacity: 0
+	},
+	exit: {
+		transform: SELECT_EXIT_TWEEN,
+		opacity: SELECT_EXIT_TWEEN
+	}
+};

package/dist/motion/arc-tokens.d.ts

@@ -35,6 +35,12 @@ export declare const ARC_SPRING_MORPH: {
     readonly visualDuration: 0.42;
     readonly bounce: 0.16;
 };
+/** Arc's CSS spring (`--ease-spring` over `--duration-spring`) as a Motion spring: a gentle overshoot that settles. */
+export declare const ARC_SPRING_CSS: {
+    readonly type: "spring";
+    readonly visualDuration: 0.34;
+    readonly bounce: 0.15;
+};
 /** Stagger steps in seconds; keep a whole staggered entrance under roughly 0.4s. */
 export declare const ARC_STAGGER: {
     readonly char: 0.016;

package/dist/motion/arc-tokens.js

@@ -55,6 +55,12 @@ export const ARC_SPRING_MORPH = {
 	visualDuration: .42,
 	bounce: .16
 };
+/** Arc's CSS spring (`--ease-spring` over `--duration-spring`) as a Motion spring: a gentle overshoot that settles. */
+export const ARC_SPRING_CSS = {
+	type: "spring",
+	visualDuration: .34,
+	bounce: .15
+};
 /** Stagger steps in seconds; keep a whole staggered entrance under roughly 0.4s. */
 export const ARC_STAGGER = {
 	char: .016,

package/dist/motion/glide-indicator.d.ts

@@ -1,5 +1,4 @@
-import { SPRING_HIGHLIGHT, SPRING_LAYOUT, SPRING_TABS } from "./tokens.js";
-import { ARC_SPRING_MORPH } from "./arc-tokens.js";
+import { ARC_SPRING_MORPH, ARC_SPRING_SNAPPY } from "./arc-tokens.js";
 /** Which part of the active item carries the highlight that must travel. */
 type GlideSurface = "background" | "after";
 /** Describes the items of one container and how their active state is exposed. */
@@ -14,13 +13,12 @@ export interface GlidePreset {
     attributes: string[];
     isActive: (item: Element) => boolean;
     surface: (container: HTMLElement) => GlideSurface;
-    spring: typeof SPRING_LAYOUT | typeof SPRING_TABS | typeof SPRING_HIGHLIGHT | typeof ARC_SPRING_MORPH;
+    spring: typeof ARC_SPRING_MORPH | typeof ARC_SPRING_SNAPPY;
     /**
-     * Highlights that follow the pointer (menus, listboxes) jump straight to the hovered item:
-     * the pointer already marks the position, so a travelling copy would only trail behind it.
-     * The glide is kept for keyboard navigation.
+     * Arc's menu highlight glides between items for the pointer and jumps instantly for the
+     * keyboard, so a held arrow key never trails behind the focus.
      */
-    instantOnPointer?: boolean;
+    instantOnKeyboard?: boolean;
 }
 export declare const GLIDE_PRESETS: {
     tabs: {
@@ -47,19 +45,6 @@ export declare const GLIDE_PRESETS: {
             readonly bounce: 0.16;
         };
     };
-    suggestions: {
-        itemSelector: string;
-        containerSelector: string;
-        attributes: string[];
-        isActive: (item: Element) => boolean;
-        surface: () => "background";
-        spring: {
-            readonly type: "spring";
-            readonly visualDuration: 0.26;
-            readonly bounce: 0.12;
-        };
-        instantOnPointer: true;
-    };
     menu: {
         itemSelector: string;
         containerSelector: string;
@@ -71,7 +56,7 @@ export declare const GLIDE_PRESETS: {
             readonly visualDuration: 0.26;
             readonly bounce: 0.12;
         };
-        instantOnPointer: true;
+        instantOnKeyboard: true;
     };
 };
 export type GlidePresetName = keyof typeof GLIDE_PRESETS;

package/dist/motion/glide-indicator.js

@@ -4,8 +4,8 @@
 * previous item and is removed once it lands, leaving the item's own styles in charge again.
 */
 import { animate } from "motion/react";
-import { GLIDE_CONTINUITY_MS, SPRING_HIGHLIGHT } from "./tokens.js";
-import { ARC_SPRING_MORPH } from "./arc-tokens.js";
+import { GLIDE_CONTINUITY_MS } from "./tokens.js";
+import { ARC_SPRING_MORPH, ARC_SPRING_SNAPPY } from "./arc-tokens.js";
 export const GLIDE_PRESETS = {
 	tabs: {
 		itemSelector: "[data-slot=\"tabs-trigger\"]",
@@ -24,23 +24,14 @@ export const GLIDE_PRESETS = {
 		surface: () => "background",
 		spring: ARC_SPRING_MORPH
 	},
-	suggestions: {
-		itemSelector: "[role=\"option\"]",
-		containerSelector: "[role=\"listbox\"]",
-		attributes: ["aria-selected"],
-		isActive: (item) => item.getAttribute("aria-selected") === "true",
-		surface: () => "background",
-		spring: SPRING_HIGHLIGHT,
-		instantOnPointer: true
-	},
 	menu: {
-		itemSelector: "[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"],[role=\"option\"]",
-		containerSelector: "[role=\"menu\"],[role=\"listbox\"]",
+		itemSelector: "[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"]",
+		containerSelector: "[role=\"menu\"]",
 		attributes: ["data-highlighted"],
 		isActive: (item) => item.hasAttribute("data-highlighted"),
 		surface: () => "background",
-		spring: SPRING_HIGHLIGHT,
-		instantOnPointer: true
+		spring: ARC_SPRING_SNAPPY,
+		instantOnKeyboard: true
 	}
 };
 /** Marks the item whose own highlight is hidden while the travelling copy stands in for it. */
@@ -197,7 +188,7 @@ export function attachGlideIndicator(container, preset) {
 	const onKeyDown = () => {
 		isPointerDriven = false;
 	};
-	if (preset.instantOnPointer) {
+	if (preset.instantOnKeyboard) {
 		container.addEventListener("pointermove", onPointerMove);
 		container.ownerDocument.addEventListener("keydown", onKeyDown, true);
 	}
@@ -300,7 +291,7 @@ export function attachGlideIndicator(container, preset) {
 		const isContinuous = previous !== null && previous !== active && previous.isConnected && !preset.isActive(previous) && (lastActiveSeenAt === Number.NEGATIVE_INFINITY || now - lastActiveSeenAt <= GLIDE_CONTINUITY_MS);
 		lastActive = active;
 		lastActiveSeenAt = Number.NEGATIVE_INFINITY;
-		if (isContinuous && !(preset.instantOnPointer && isPointerDriven)) glide(previous, active);
+		if (isContinuous && !(preset.instantOnKeyboard && !isPointerDriven)) glide(previous, active);
 		else settle();
 	});
 	observer.observe(container, {

package/dist/motion/motion-slot.d.ts

@@ -1,9 +1,12 @@
-/** Animates the original primitive node with Motion, without adding DOM wrappers. */
+/**
+ * Animates the original primitive node with Motion, without adding DOM wrappers. Every kind plays Arc's motion
+ * (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) for the component it serves.
+ */
 import { type ReactElement, type ComponentProps } from "react";
 import { Slot } from "radix-ui";
 import { type MotionKind } from "./tokens.js";
-/** Composes refs through Radix Slot and delegates gesture, entry and exit playback to Motion. */
+/** Composes refs through Radix Slot and delegates entry, exit and state playback to Motion. */
 export declare function MotionSlot({ children, kind, ref, ...props }: Omit<ComponentProps<typeof Slot.Root>, "children"> & {
     children: ReactElement;
-    kind?: MotionKind;
+    kind: MotionKind;
 }): import("react").JSX.Element;