beez-ui 2.3.1 → 2.5.0

package/dist/motion/arc-swap.js

@@ -0,0 +1,49 @@
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_SNAPPY } from "./arc-tokens.js";
+/** Resting pose every swapped element settles into. */
+export const ARC_SWAP_REST = {
+	opacity: 1,
+	x: 0,
+	y: 0,
+	scale: 1,
+	filter: "blur(0px)"
+};
+/** Outgoing elements leave faster than incoming ones arrive. */
+export const ARC_SWAP_EXIT_TRANSITION = {
+	duration: ARC_DURATION.fast,
+	ease: [...ARC_EASE.standard]
+};
+/** An incoming icon grows out of a slight blur. */
+export const ARC_ICON_ENTER = {
+	opacity: 0,
+	scale: .6,
+	filter: `blur(${ARC_BLUR.subtle}px)`
+};
+/** An outgoing icon shrinks back into the same blur. */
+export const ARC_ICON_EXIT = {
+	...ARC_ICON_ENTER,
+	transition: ARC_SWAP_EXIT_TRANSITION
+};
+/** Scale rides the spring; opacity and blur tween so blur never overshoots below zero. */
+export const ARC_ICON_TRANSITION = {
+	...ARC_SPRING_SNAPPY,
+	opacity: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.enter]
+	},
+	filter: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.enter]
+	}
+};
+/** With reduced motion, every swap is an instant fade. */
+export const ARC_REDUCED_TRANSITION = { duration: ARC_DURATION.instant };
+/** Reduced-motion entrance: the resting pose, only faded out. */
+export const ARC_REDUCED_ENTER = {
+	...ARC_SWAP_REST,
+	opacity: 0
+};
+/** Reduced-motion exit: an instant fade. */
+export const ARC_REDUCED_EXIT = {
+	opacity: 0,
+	transition: ARC_REDUCED_TRANSITION
+};

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

@@ -6,6 +6,7 @@
 export declare const ARC_DURATION: {
     readonly instant: 0.12;
     readonly fast: 0.16;
+    readonly exit: 0.18;
     readonly standard: 0.24;
 };
 /** Cubic-bezier curves for entrances and color or opacity tweens. */
@@ -19,12 +20,22 @@ export declare const ARC_SPRING_SNAPPY: {
     readonly visualDuration: 0.26;
     readonly bounce: 0.12;
 };
+/** Panels, height changes and layout shifts: critically damped, never overshoots. */
+export declare const ARC_SPRING_SMOOTH: {
+    readonly type: "spring";
+    readonly visualDuration: 0.4;
+    readonly bounce: 0;
+};
 /** Shape morphs and width changes that follow new content. */
 export declare const ARC_SPRING_MORPH: {
     readonly type: "spring";
     readonly visualDuration: 0.42;
     readonly bounce: 0.16;
 };
+/** Stagger steps in seconds; keep a whole staggered entrance under roughly 0.4s. */
+export declare const ARC_STAGGER: {
+    readonly char: 0.016;
+};
 /** Blur radii in pixels for brief content crossfades. */
 export declare const ARC_BLUR: {
     readonly subtle: 2;

package/dist/motion/arc-tokens.js

@@ -6,6 +6,7 @@
 export const ARC_DURATION = {
 	instant: .12,
 	fast: .16,
+	exit: .18,
 	standard: .24
 };
 /** Cubic-bezier curves for entrances and color or opacity tweens. */
@@ -29,12 +30,20 @@ export const ARC_SPRING_SNAPPY = {
 	visualDuration: .26,
 	bounce: .12
 };
+/** Panels, height changes and layout shifts: critically damped, never overshoots. */
+export const ARC_SPRING_SMOOTH = {
+	type: "spring",
+	visualDuration: .4,
+	bounce: 0
+};
 /** Shape morphs and width changes that follow new content. */
 export const ARC_SPRING_MORPH = {
 	type: "spring",
 	visualDuration: .42,
 	bounce: .16
 };
+/** Stagger steps in seconds; keep a whole staggered entrance under roughly 0.4s. */
+export const ARC_STAGGER = { char: .016 };
 /** Blur radii in pixels for brief content crossfades. */
 export const ARC_BLUR = {
 	subtle: 2,

package/dist/motion/use-morph-width.d.ts

@@ -0,0 +1,13 @@
+import type { RefObject } from "react";
+import type { MotionValue } from "motion/react";
+/**
+ * Springs a label slot to the natural width of its content when the label changes, so new text never snaps the
+ * layout. Other resizes (a late web font, a parent reflow) jump straight to the new width, so nothing wobbles on
+ * first paint. While it springs, the slot carries `data-morphing` so it can clip overflowing glyphs.
+ *
+ * @param contentRef - Content measured by a `ResizeObserver`; its parent element is the slot that gets the width.
+ * @param labelKey - Identity of the current label: a change opens the window in which resizes spring.
+ * @param reduceMotion - Whether the user prefers reduced motion, which makes every resize jump.
+ * @returns Width to bind to the slot's `style.width`.
+ */
+export declare function useMorphWidth(contentRef: RefObject<HTMLElement | null>, labelKey: string, reduceMotion: boolean): MotionValue<number | "auto">;

package/dist/motion/use-morph-width.js

@@ -0,0 +1,59 @@
+/**
+* Label width spring adapted from Arc (https://uiarc.dev), Copyright (c) 2026 Elia Kuratli, MIT License.
+* The full license text ships in THIRD_PARTY_NOTICES.md. Internal: shared by `Button` and `ActionButton`.
+*/
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { animate, useMotionValue } from "motion/react";
+import { BUTTON_MORPH_WINDOW_MS } from "../constants/button.js";
+import { ARC_SPRING_MORPH } from "./arc-tokens.js";
+/**
+* Springs a label slot to the natural width of its content when the label changes, so new text never snaps the
+* layout. Other resizes (a late web font, a parent reflow) jump straight to the new width, so nothing wobbles on
+* first paint. While it springs, the slot carries `data-morphing` so it can clip overflowing glyphs.
+*
+* @param contentRef - Content measured by a `ResizeObserver`; its parent element is the slot that gets the width.
+* @param labelKey - Identity of the current label: a change opens the window in which resizes spring.
+* @param reduceMotion - Whether the user prefers reduced motion, which makes every resize jump.
+* @returns Width to bind to the slot's `style.width`.
+*/
+export function useMorphWidth(contentRef, labelKey, reduceMotion) {
+	const width = useMotionValue("auto");
+	const lastLabelKey = useRef(labelKey);
+	const morphDeadline = useRef(0);
+	useLayoutEffect(() => {
+		if (lastLabelKey.current === labelKey) return;
+		lastLabelKey.current = labelKey;
+		morphDeadline.current = performance.now() + BUTTON_MORPH_WINDOW_MS;
+	}, [labelKey]);
+	useEffect(() => {
+		const content = contentRef.current;
+		const slot = content?.parentElement;
+		if (!content || !slot || typeof ResizeObserver === "undefined") return;
+		let hasMeasured = false;
+		const observer = new ResizeObserver(([entry]) => {
+			if (!entry) return;
+			const nextWidth = entry.contentRect.width;
+			const shouldJump = !nextWidth || !hasMeasured || reduceMotion || performance.now() > morphDeadline.current;
+			if (shouldJump) {
+				hasMeasured = nextWidth > 0;
+				width.jump(nextWidth || "auto");
+				delete slot.dataset.morphing;
+				return;
+			}
+			slot.dataset.morphing = "";
+			animate(width, nextWidth, {
+				...ARC_SPRING_MORPH,
+				onComplete: () => {
+					delete slot.dataset.morphing;
+				}
+			});
+		});
+		observer.observe(content);
+		return () => observer.disconnect();
+	}, [
+		contentRef,
+		reduceMotion,
+		width
+	]);
+	return width;
+}