beez-ui 0.10.0 → 2.0.0

package/dist/components/animated-collapse.js

@@ -2,7 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 /** Expands and collapses a region by animating its height, then releases overflow. */
 import { useState } from "react";
-import { AnimatePresence, motion } from "motion/react";
+import { AnimatePresence, motion, useIsPresent } from "motion/react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
 import { MOTION_EASE, MOTION_EASE_IN_OUT, MOTION_TIMING } from "../motion/tokens.js";
@@ -26,6 +26,94 @@ const REDUCED_MOTION_COLLAPSE_TRANSITION = {
 	}
 };
 /**
+* The animated region. While it collapses out it turns inert and hidden from assistive
+* technology, so stale controls cannot be clicked, focused or announced during the fade.
+* @param props - Content, optional wrapper attributes and whether it mounts with an entrance.
+* @returns The animated region.
+*/
+function AnimatedCollapseRegion(t0) {
+	const $ = _c(15);
+	const { children, className, id, isEntering } = t0;
+	const [isSettled, setIsSettled] = useState(!isEntering);
+	const isPresent = useIsPresent();
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const t1 = isPresent ? undefined : true;
+	const t2 = !isPresent || undefined;
+	const t3 = isSettled ? "overflow-visible" : "overflow-hidden";
+	let t4;
+	if ($[0] !== className || $[1] !== t3) {
+		t4 = cn(t3, className);
+		$[0] = className;
+		$[1] = t3;
+		$[2] = t4;
+	} else {
+		t4 = $[2];
+	}
+	let t5;
+	let t6;
+	let t7;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = {
+			height: 0,
+			opacity: 0
+		};
+		t6 = {
+			height: "auto",
+			opacity: 1
+		};
+		t7 = {
+			height: 0,
+			opacity: 0
+		};
+		$[3] = t5;
+		$[4] = t6;
+		$[5] = t7;
+	} else {
+		t5 = $[3];
+		t6 = $[4];
+		t7 = $[5];
+	}
+	const t8 = shouldReduceMotion ? REDUCED_MOTION_COLLAPSE_TRANSITION : COLLAPSE_TRANSITION;
+	let t10;
+	let t9;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = () => setIsSettled(false);
+		t10 = () => setIsSettled(true);
+		$[6] = t10;
+		$[7] = t9;
+	} else {
+		t10 = $[6];
+		t9 = $[7];
+	}
+	let t11;
+	if ($[8] !== children || $[9] !== id || $[10] !== t1 || $[11] !== t2 || $[12] !== t4 || $[13] !== t8) {
+		t11 = /* @__PURE__ */ _jsx(motion.div, {
+			"data-slot": "animated-collapse",
+			id,
+			"aria-hidden": t1,
+			inert: t2,
+			className: t4,
+			initial: t5,
+			animate: t6,
+			exit: t7,
+			transition: t8,
+			onAnimationStart: t9,
+			onAnimationComplete: t10,
+			children
+		});
+		$[8] = children;
+		$[9] = id;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t4;
+		$[13] = t8;
+		$[14] = t11;
+	} else {
+		t11 = $[14];
+	}
+	return t11;
+}
+/**
 * Renders `children` only while `isOpen`, animating height and opacity.
 * Keep padding inside `children`: the animated wrapper collapses to zero height.
 * Overflow is clipped only while animating, so focus rings and popovers are not cut once settled.
@@ -33,55 +121,37 @@ const REDUCED_MOTION_COLLAPSE_TRANSITION = {
 * @returns The animated region, or nothing when closed.
 */
 export function AnimatedCollapse(t0) {
-	const $ = _c(10);
+	const $ = _c(9);
 	const { isOpen, children, className, id, animateOnMount: t1 } = t0;
 	const animateOnMount = t1 === undefined ? false : t1;
-	const [isSettled, setIsSettled] = useState(!animateOnMount);
-	const shouldReduceMotion = usePrefersReducedMotion();
 	let t2;
-	if ($[0] !== children || $[1] !== className || $[2] !== id || $[3] !== isOpen || $[4] !== isSettled || $[5] !== shouldReduceMotion) {
-		t2 = isOpen ? /* @__PURE__ */ _jsx(motion.div, {
-			"data-slot": "animated-collapse",
+	if ($[0] !== animateOnMount || $[1] !== children || $[2] !== className || $[3] !== id || $[4] !== isOpen) {
+		t2 = isOpen ? /* @__PURE__ */ _jsx(AnimatedCollapseRegion, {
+			className,
 			id,
-			className: cn(isSettled ? "overflow-visible" : "overflow-hidden", className),
-			initial: {
-				height: 0,
-				opacity: 0
-			},
-			animate: {
-				height: "auto",
-				opacity: 1
-			},
-			exit: {
-				height: 0,
-				opacity: 0
-			},
-			transition: shouldReduceMotion ? REDUCED_MOTION_COLLAPSE_TRANSITION : COLLAPSE_TRANSITION,
-			onAnimationStart: () => setIsSettled(false),
-			onAnimationComplete: () => setIsSettled(true),
+			isEntering: animateOnMount,
 			children
 		}, "animated-collapse") : null;
-		$[0] = children;
-		$[1] = className;
-		$[2] = id;
-		$[3] = isOpen;
-		$[4] = isSettled;
-		$[5] = shouldReduceMotion;
-		$[6] = t2;
+		$[0] = animateOnMount;
+		$[1] = children;
+		$[2] = className;
+		$[3] = id;
+		$[4] = isOpen;
+		$[5] = t2;
 	} else {
-		t2 = $[6];
+		t2 = $[5];
 	}
 	let t3;
-	if ($[7] !== animateOnMount || $[8] !== t2) {
+	if ($[6] !== animateOnMount || $[7] !== t2) {
 		t3 = /* @__PURE__ */ _jsx(AnimatePresence, {
 			initial: animateOnMount,
 			children: t2
 		});
-		$[7] = animateOnMount;
-		$[8] = t2;
-		$[9] = t3;
+		$[6] = animateOnMount;
+		$[7] = t2;
+		$[8] = t3;
 	} else {
-		t3 = $[9];
+		t3 = $[8];
 	}
 	return t3;
 }

package/dist/components/button-interaction.d.ts

@@ -0,0 +1,23 @@
+/** Interaction states shared by `Button` and the internal `ControlButton`. */
+import type { MouseEvent } from "react";
+/** Swallows activation while loading, keeping the button focusable instead of disabling it. */
+declare function preventActivation(event: MouseEvent<HTMLElement>): void;
+/**
+ * While loading, these handlers are dropped: Radix triggers open their layer from pointer and key handlers they
+ * inject through `asChild`, so swallowing only the click would leave a busy trigger able to open it. Keyboard focus
+ * stays, since nothing here touches focusability.
+ */
+export declare const LOADING_INERT_HANDLERS: {
+    readonly onClick: typeof preventActivation;
+    readonly onPointerDown: undefined;
+    readonly onKeyDown: undefined;
+};
+/**
+ * Applied while a parent `AnimatePresence` removes the button, so a stale control can be neither clicked, focused
+ * nor announced during the exit animation.
+ */
+export declare const LEAVING_ATTRIBUTES: {
+    readonly inert: true;
+    readonly "aria-hidden": true;
+};
+export {};

package/dist/components/button-interaction.js

@@ -0,0 +1,22 @@
+/** Swallows activation while loading, keeping the button focusable instead of disabling it. */
+function preventActivation(event) {
+	event.preventDefault();
+}
+/**
+* While loading, these handlers are dropped: Radix triggers open their layer from pointer and key handlers they
+* inject through `asChild`, so swallowing only the click would leave a busy trigger able to open it. Keyboard focus
+* stays, since nothing here touches focusability.
+*/
+export const LOADING_INERT_HANDLERS = {
+	onClick: preventActivation,
+	onPointerDown: undefined,
+	onKeyDown: undefined
+};
+/**
+* Applied while a parent `AnimatePresence` removes the button, so a stale control can be neither clicked, focused
+* nor announced during the exit animation.
+*/
+export const LEAVING_ATTRIBUTES = {
+	inert: true,
+	"aria-hidden": true
+};

package/dist/components/button-label.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export type ButtonLabelProps = {
+    children: ReactNode;
+    loading: boolean;
+    reduceMotion: boolean;
+};
+/** Button content: a spinner while loading and a label whose width springs when it changes. */
+export declare function ButtonLabel({ children, loading, reduceMotion }: ButtonLabelProps): import("react").JSX.Element;

package/dist/components/button-label.js

@@ -0,0 +1,322 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Label morph and loading spinner adapted from Arc (https://uiarc.dev), Copyright (c) 2026 Elia Kuratli,
+* MIT License. The full license text ships in THIRD_PARTY_NOTICES.md. Internal to Button.
+*/
+import { isValidElement, useEffect, useLayoutEffect, useRef } from "react";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue } from "motion/react";
+import { BUTTON_MORPH_WINDOW_MS } from "../constants/button.js";
+import { cn } from "../lib/utils.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_MORPH, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const restState = {
+	opacity: 1,
+	y: 0,
+	scale: 1,
+	filter: "blur(0px)"
+};
+/** Outgoing labels and icons leave faster than they enter. */
+const exitTransition = {
+	duration: ARC_DURATION.fast,
+	ease: [...ARC_EASE.standard]
+};
+/** Text rises out of a soft blur; the outgoing label lifts away a little faster. */
+const textEnter = {
+	opacity: 0,
+	y: 4,
+	filter: `blur(${ARC_BLUR.soft}px)`
+};
+const textExit = {
+	opacity: 0,
+	y: -3,
+	filter: `blur(${ARC_BLUR.soft}px)`,
+	transition: exitTransition
+};
+const iconEnter = {
+	opacity: 0,
+	scale: .6,
+	filter: `blur(${ARC_BLUR.subtle}px)`
+};
+const iconExit = {
+	...iconEnter,
+	transition: exitTransition
+};
+const reducedTransition = { duration: ARC_DURATION.instant };
+const reducedEnter = {
+	...restState,
+	opacity: 0
+};
+const reducedExit = {
+	opacity: 0,
+	transition: reducedTransition
+};
+/** Scale rides the spring; opacity and blur tween so blur never overshoots below zero. */
+const iconTransition = {
+	...ARC_SPRING_SNAPPY,
+	opacity: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.enter]
+	},
+	filter: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.enter]
+	}
+};
+const textTransition = {
+	duration: ARC_DURATION.standard,
+	ease: [...ARC_EASE.enter]
+};
+/** Matches markup tags inside a label key so icon-only labels can be detected. */
+const LABEL_KEY_TAG_PATTERN = /<[^>]*>/g;
+/** Detects visible text left in a label key. */
+const VISIBLE_TEXT_PATTERN = /\S/;
+/** Builds a key from text and element names, so a new label crossfades while prop-only updates stay in place. */
+function getLabelKey(node) {
+	if (node == null || typeof node === "boolean") return "";
+	if (typeof node === "string" || typeof node === "number" || typeof node === "bigint") return String(node);
+	if (Array.isArray(node)) return node.map(getLabelKey).join("");
+	if (!isValidElement(node)) return "";
+	const elementType = node.type;
+	const elementName = typeof elementType === "string" ? elementType : elementType?.displayName ?? elementType?.name ?? "";
+	return `<${elementName}>${getLabelKey(node.props.children)}`;
+}
+/**
+* Springs the label slot to the natural width of an incoming label, so a new label never snaps the
+* button's size. Other resizes jump straight to the new width.
+*/
+function useMorphWidth(contentRef, labelKey, reduceMotion) {
+	const $ = _c(8);
+	const width = useMotionValue("auto");
+	const lastLabelKey = useRef(labelKey);
+	const morphDeadline = useRef(0);
+	let t0;
+	let t1;
+	if ($[0] !== labelKey) {
+		t0 = () => {
+			if (lastLabelKey.current === labelKey) {
+				return;
+			}
+			lastLabelKey.current = labelKey;
+			morphDeadline.current = performance.now() + BUTTON_MORPH_WINDOW_MS;
+		};
+		t1 = [labelKey];
+		$[0] = labelKey;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useLayoutEffect(t0, t1);
+	let t2;
+	let t3;
+	if ($[3] !== contentRef || $[4] !== reduceMotion || $[5] !== width) {
+		t2 = () => {
+			const content = contentRef.current;
+			const slot = content?.parentElement;
+			if (!content || !slot || typeof ResizeObserver === "undefined") {
+				return;
+			}
+			let hasMeasured = false;
+			const observer = new ResizeObserver((t4) => {
+				const [entry] = t4;
+				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();
+		};
+		t3 = [
+			contentRef,
+			reduceMotion,
+			width
+		];
+		$[3] = contentRef;
+		$[4] = reduceMotion;
+		$[5] = width;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t2 = $[6];
+		t3 = $[7];
+	}
+	useEffect(t2, t3);
+	return width;
+}
+/** One generation of the label; the outgoing one is hidden from assistive tech while it leaves. */
+function LabelPhase(t0) {
+	const $ = _c(7);
+	const { children, isIcon, reduceMotion, ref } = t0;
+	const isPresent = useIsPresent();
+	const t1 = isPresent ? undefined : true;
+	const t2 = reduceMotion ? reducedEnter : isIcon ? iconEnter : textEnter;
+	const t3 = reduceMotion ? reducedExit : isIcon ? iconExit : textExit;
+	const t4 = reduceMotion ? reducedTransition : isIcon ? iconTransition : textTransition;
+	let t5;
+	if ($[0] !== children || $[1] !== ref || $[2] !== t1 || $[3] !== t2 || $[4] !== t3 || $[5] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(motion.span, {
+			ref,
+			className: "inline-flex items-center justify-center gap-[inherit] whitespace-nowrap",
+			"aria-hidden": t1,
+			initial: t2,
+			animate: restState,
+			exit: t3,
+			transition: t4,
+			children
+		});
+		$[0] = children;
+		$[1] = ref;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+		$[6] = t5;
+	} else {
+		t5 = $[6];
+	}
+	return t5;
+}
+/** Button content: a spinner while loading and a label whose width springs when it changes. */
+export function ButtonLabel(t0) {
+	const $ = _c(25);
+	const { children, loading, reduceMotion } = t0;
+	const contentRef = useRef(null);
+	let t1;
+	if ($[0] !== children) {
+		t1 = getLabelKey(children);
+		$[0] = children;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	const labelKey = t1;
+	const width = useMorphWidth(contentRef, labelKey, reduceMotion);
+	let t2;
+	if ($[2] !== loading || $[3] !== reduceMotion) {
+		t2 = loading ? /* @__PURE__ */ _jsx(motion.span, {
+			className: "absolute top-1/2 left-1/2 -m-2 grid size-4",
+			"aria-hidden": "true",
+			initial: reduceMotion ? { opacity: 0 } : {
+				opacity: 0,
+				scale: .6
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: reduceMotion ? reducedExit : {
+				...iconExit,
+				scale: .8
+			},
+			transition: reduceMotion ? reducedTransition : iconTransition,
+			children: /* @__PURE__ */ _jsx("span", { className: "animate-spin rounded-full border-[1.5px] border-current border-r-transparent motion-reduce:animate-none" })
+		}, "loader") : null;
+		$[2] = loading;
+		$[3] = reduceMotion;
+		$[4] = t2;
+	} else {
+		t2 = $[4];
+	}
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children: t2
+		});
+		$[5] = t2;
+		$[6] = t3;
+	} else {
+		t3 = $[6];
+	}
+	const t4 = loading && "opacity-0";
+	let t5;
+	if ($[7] !== t4) {
+		t5 = cn("inline-flex min-w-0 items-center justify-center gap-[inherit] transition-opacity duration-150 data-morphing:[clip-path:inset(-50%_calc(var(--spacing)*-3))]", t4);
+		$[7] = t4;
+		$[8] = t5;
+	} else {
+		t5 = $[8];
+	}
+	let t6;
+	if ($[9] !== width) {
+		t6 = { width };
+		$[9] = width;
+		$[10] = t6;
+	} else {
+		t6 = $[10];
+	}
+	let t7;
+	if ($[11] !== labelKey) {
+		t7 = VISIBLE_TEXT_PATTERN.test(labelKey.replace(LABEL_KEY_TAG_PATTERN, ""));
+		$[11] = labelKey;
+		$[12] = t7;
+	} else {
+		t7 = $[12];
+	}
+	const t8 = !t7;
+	let t9;
+	if ($[13] !== children || $[14] !== labelKey || $[15] !== reduceMotion || $[16] !== t8) {
+		t9 = /* @__PURE__ */ _jsx("span", {
+			ref: contentRef,
+			className: "inline-flex flex-none items-center gap-[inherit]",
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				mode: "popLayout",
+				initial: false,
+				children: /* @__PURE__ */ _jsx(LabelPhase, {
+					isIcon: t8,
+					reduceMotion,
+					children
+				}, labelKey)
+			})
+		});
+		$[13] = children;
+		$[14] = labelKey;
+		$[15] = reduceMotion;
+		$[16] = t8;
+		$[17] = t9;
+	} else {
+		t9 = $[17];
+	}
+	let t10;
+	if ($[18] !== t5 || $[19] !== t6 || $[20] !== t9) {
+		t10 = /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "button-label",
+			className: t5,
+			style: t6,
+			children: t9
+		});
+		$[18] = t5;
+		$[19] = t6;
+		$[20] = t9;
+		$[21] = t10;
+	} else {
+		t10 = $[21];
+	}
+	let t11;
+	if ($[22] !== t10 || $[23] !== t3) {
+		t11 = /* @__PURE__ */ _jsxs(_Fragment, { children: [t3, t10] });
+		$[22] = t10;
+		$[23] = t3;
+		$[24] = t11;
+	} else {
+		t11 = $[24];
+	}
+	return t11;
+}

package/dist/components/button.d.ts

@@ -1,10 +1,23 @@
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
-import { type VariantProps } from "class-variance-authority";
-declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
-    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, asChild, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-}): import("react").JSX.Element;
-export { Button, buttonVariants };
+/**
+ * Arc's Button (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): its variants, sizes, tokens and motion,
+ * with width-aware press feedback, a label that springs to its new width and a loading spinner. It renders a native
+ * button; style links as links instead. Composite components that need icon sizes use the internal `ControlButton`.
+ */
+import type { ComponentProps } from "react";
+/** Visual weight, as in Arc: one primary action per surface. */
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+/** Height and padding, from Arc's control heights. */
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonProps = ComponentProps<"button"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Shows a spinner, sets `aria-busy` and swallows clicks while keeping keyboard focus. */
+    loading?: boolean;
+};
+/**
+ * A single action on a page, form or dialog. Defaults to `type="button"`, so it only submits a form when asked to.
+ * @param props - Variant, size, loading state and native button attributes, including `ref`.
+ * @returns The native button.
+ */
+declare function Button({ className, variant, size, loading, type, children, ref, ...props }: ButtonProps): import("react").JSX.Element;
+export { Button };