beez-ui 0.11.0 → 2.0.0

package/dist/components/alert-dialog.js

@@ -408,121 +408,133 @@ function AlertDialogDescription(t0) {
 	}
 	return t2;
 }
+/** Confirms the dialog with an Arc `Button`; Radix merges its behavior onto the button through `asChild`. */
 function AlertDialogAction(t0) {
-	const $ = _c(14);
+	const $ = _c(16);
+	let children;
 	let className;
 	let props;
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		({className, variant: t1, size: t2, ...props} = t0);
+		({className, variant: t1, size: t2, children, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-		$[4] = t2;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = t1;
+		$[5] = t2;
 	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-		t2 = $[4];
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		t1 = $[4];
+		t2 = $[5];
 	}
-	const variant = t1 === undefined ? "default" : t1;
-	const size = t2 === undefined ? "default" : t2;
+	const variant = t1 === undefined ? "primary" : t1;
+	const size = t2 === undefined ? "md" : t2;
 	let t3;
-	if ($[5] !== className) {
+	if ($[6] !== className) {
 		t3 = cn(className);
-		$[5] = className;
-		$[6] = t3;
+		$[6] = className;
+		$[7] = t3;
 	} else {
-		t3 = $[6];
+		t3 = $[7];
 	}
 	let t4;
-	if ($[7] !== props || $[8] !== t3) {
-		t4 = /* @__PURE__ */ _jsx(AlertDialogPrimitive.Action, {
-			"data-slot": "alert-dialog-action",
+	if ($[8] !== children || $[9] !== size || $[10] !== t3 || $[11] !== variant) {
+		t4 = /* @__PURE__ */ _jsx(Button, {
+			variant,
+			size,
 			className: t3,
-			...props
+			children
 		});
-		$[7] = props;
-		$[8] = t3;
-		$[9] = t4;
+		$[8] = children;
+		$[9] = size;
+		$[10] = t3;
+		$[11] = variant;
+		$[12] = t4;
 	} else {
-		t4 = $[9];
+		t4 = $[12];
 	}
 	let t5;
-	if ($[10] !== size || $[11] !== t4 || $[12] !== variant) {
-		t5 = /* @__PURE__ */ _jsx(Button, {
-			variant,
-			size,
+	if ($[13] !== props || $[14] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(AlertDialogPrimitive.Action, {
+			"data-slot": "alert-dialog-action",
 			asChild: true,
+			...props,
 			children: t4
 		});
-		$[10] = size;
-		$[11] = t4;
-		$[12] = variant;
-		$[13] = t5;
+		$[13] = props;
+		$[14] = t4;
+		$[15] = t5;
 	} else {
-		t5 = $[13];
+		t5 = $[15];
 	}
 	return t5;
 }
+/** Dismisses the dialog with an Arc secondary `Button` by default. */
 function AlertDialogCancel(t0) {
-	const $ = _c(14);
+	const $ = _c(16);
+	let children;
 	let className;
 	let props;
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		({className, variant: t1, size: t2, ...props} = t0);
+		({className, variant: t1, size: t2, children, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-		$[4] = t2;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = t1;
+		$[5] = t2;
 	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-		t2 = $[4];
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		t1 = $[4];
+		t2 = $[5];
 	}
-	const variant = t1 === undefined ? "outline" : t1;
-	const size = t2 === undefined ? "default" : t2;
+	const variant = t1 === undefined ? "secondary" : t1;
+	const size = t2 === undefined ? "md" : t2;
 	let t3;
-	if ($[5] !== className) {
+	if ($[6] !== className) {
 		t3 = cn(className);
-		$[5] = className;
-		$[6] = t3;
+		$[6] = className;
+		$[7] = t3;
 	} else {
-		t3 = $[6];
+		t3 = $[7];
 	}
 	let t4;
-	if ($[7] !== props || $[8] !== t3) {
-		t4 = /* @__PURE__ */ _jsx(AlertDialogPrimitive.Cancel, {
-			"data-slot": "alert-dialog-cancel",
+	if ($[8] !== children || $[9] !== size || $[10] !== t3 || $[11] !== variant) {
+		t4 = /* @__PURE__ */ _jsx(Button, {
+			variant,
+			size,
 			className: t3,
-			...props
+			children
 		});
-		$[7] = props;
-		$[8] = t3;
-		$[9] = t4;
+		$[8] = children;
+		$[9] = size;
+		$[10] = t3;
+		$[11] = variant;
+		$[12] = t4;
 	} else {
-		t4 = $[9];
+		t4 = $[12];
 	}
 	let t5;
-	if ($[10] !== size || $[11] !== t4 || $[12] !== variant) {
-		t5 = /* @__PURE__ */ _jsx(Button, {
-			variant,
-			size,
+	if ($[13] !== props || $[14] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(AlertDialogPrimitive.Cancel, {
+			"data-slot": "alert-dialog-cancel",
 			asChild: true,
+			...props,
 			children: t4
 		});
-		$[10] = size;
-		$[11] = t4;
-		$[12] = variant;
-		$[13] = t5;
+		$[13] = props;
+		$[14] = t4;
+		$[15] = t5;
 	} else {
-		t5 = $[13];
+		t5 = $[15];
 	}
 	return t5;
 }

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;