beez-ui 2.5.0 → 2.6.1

package/dist/components/skeleton.js

@@ -1,20 +1,440 @@
-import { MotionSlot } from "../motion/motion-slot.js";
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Skeleton (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): placeholders that reserve space while
+* content loads, with a calm, finite pulse that ripples down the blocks and rests after about 20 seconds. Besides the
+* bare block it renders Arc's composed placeholder (`lines`, `avatar`) and its reveal, which crossfades into the
+* content while the height springs to its new size (`loading` with children).
+*/
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { AnimatePresence, animate, motion, useIsPresent } from "motion/react";
+import { SKELETON_DEFAULT_LABEL, SKELETON_DEFAULT_LINES, SKELETON_LINE_LIMITS, SKELETON_MORPH_WINDOW_MS, SKELETON_REVEAL_OFFSET_PX } from "../constants/skeleton.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { ARC_DURATION, ARC_EASE, ARC_SPRING_SMOOTH } from "../motion/arc-tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Arc's block: a soft fill mixed from the strong border, and a 1.8s pulse that starts a beat later for each
+* `--index` and stops after 11 rounds. Reduced motion shows a still block.
+*/
+const blockClassName = "block rounded-(--radius-control) bg-[color-mix(in_oklab,var(--border-strong)_38%,var(--surface))] animate-pulse [animation-delay:calc(var(--index,0)*90ms)] [animation-duration:1.8s] [animation-fill-mode:both] [animation-iteration-count:11] [animation-timing-function:var(--ease-in-out)] motion-reduce:animate-none";
+/**
+* Follows the content height. After `busy` flips, the frame springs from its old height to its new one, owning its
+* inline height and overflow only while it moves and restoring the consumer's values afterwards, so a fixed height
+* from `className` or `style` keeps applying at rest. It clips only while moving, so focus rings stay visible at rest.
+* @param contentRef - The measured content; its parent is the frame that springs.
+* @param busy - Whether the placeholder is showing; a change opens the window in which resizes spring.
+* @param reduceMotion - Whether every resize should jump.
+*/
+function useMorphHeight(contentRef, busy, reduceMotion) {
+	const changedAt = useRef(0);
+	useLayoutEffect(() => {
+		changedAt.current = performance.now();
+	}, [busy]);
+	useEffect(() => {
+		const content = contentRef.current;
+		const frame = content?.parentElement;
+		if (!content || !frame || typeof ResizeObserver === "undefined") return;
+		let lastFrameHeight;
+		let controls;
+		let restingStyle;
+		const readFrameHeight = () => frame.getBoundingClientRect().height;
+		const settle = () => {
+			if (restingStyle) Object.assign(frame.style, restingStyle);
+			restingStyle = undefined;
+		};
+		const observer = new ResizeObserver(() => {
+			controls?.stop();
+			const fromHeight = restingStyle ? readFrameHeight() : lastFrameHeight;
+			if (restingStyle) frame.style.height = restingStyle.height;
+			const nextHeight = readFrameHeight();
+			lastFrameHeight = nextHeight;
+			const isOutsideWindow = performance.now() - changedAt.current > SKELETON_MORPH_WINDOW_MS;
+			if (reduceMotion || fromHeight === undefined || fromHeight === nextHeight || isOutsideWindow) return settle();
+			restingStyle ??= {
+				height: frame.style.height,
+				overflow: frame.style.overflow
+			};
+			frame.style.overflow = "hidden";
+			frame.style.height = `${fromHeight}px`;
+			controls = animate(fromHeight, nextHeight, {
+				...ARC_SPRING_SMOOTH,
+				onUpdate: (animatedHeight) => {
+					frame.style.height = `${animatedHeight}px`;
+				},
+				onComplete: settle
+			});
+		});
+		observer.observe(content);
+		return () => {
+			observer.disconnect();
+			controls?.stop();
+			settle();
+		};
+	}, [contentRef, reduceMotion]);
+}
+/** Arc's composed placeholder: an optional avatar and a column of lines, announced once as a busy status. */
+function SkeletonPlaceholder(t0) {
+	const $ = _c(21);
+	let avatar;
+	let className;
+	let label;
+	let lines;
+	let props;
+	if ($[0] !== t0) {
+		({lines, avatar, label, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = avatar;
+		$[2] = className;
+		$[3] = label;
+		$[4] = lines;
+		$[5] = props;
+	} else {
+		avatar = $[1];
+		className = $[2];
+		label = $[3];
+		lines = $[4];
+		props = $[5];
+	}
+	const lineCount = Math.min(Math.max(Math.floor(lines), SKELETON_LINE_LIMITS.min), SKELETON_LINE_LIMITS.max);
+	const firstLineIndex = avatar ? 1 : 0;
+	let t1;
+	if ($[6] !== className) {
+		t1 = cn("flex w-full min-w-0 items-start gap-(--space-4)", className);
+		$[6] = className;
+		$[7] = t1;
+	} else {
+		t1 = $[7];
+	}
+	let t2;
+	if ($[8] !== avatar) {
+		t2 = avatar ? /* @__PURE__ */ _jsx("span", {
+			"data-slot": "skeleton",
+			"aria-hidden": "true",
+			className: cn(blockClassName, "size-(--control-height-md) flex-none rounded-(--radius-pill)")
+		}) : null;
+		$[8] = avatar;
+		$[9] = t2;
+	} else {
+		t2 = $[9];
+	}
+	let t3;
+	if ($[10] !== firstLineIndex || $[11] !== lineCount) {
+		let t4;
+		if ($[13] !== firstLineIndex) {
+			t4 = (_, lineIndex) => /* @__PURE__ */ _jsx("span", {
+				"data-slot": "skeleton",
+				className: cn(blockClassName, "h-(--space-3) w-full first:h-(--space-4) first:w-[48%] last:not-first:w-[72%]"),
+				style: { "--index": lineIndex + firstLineIndex }
+			}, lineIndex);
+			$[13] = firstLineIndex;
+			$[14] = t4;
+		} else {
+			t4 = $[14];
+		}
+		t3 = /* @__PURE__ */ _jsx("span", {
+			"aria-hidden": "true",
+			className: "grid flex-1 gap-(--space-3) pt-(--space-1)",
+			children: Array.from({ length: lineCount }, t4)
+		});
+		$[10] = firstLineIndex;
+		$[11] = lineCount;
+		$[12] = t3;
+	} else {
+		t3 = $[12];
+	}
+	let t4;
+	if ($[15] !== label || $[16] !== props || $[17] !== t1 || $[18] !== t2 || $[19] !== t3) {
+		t4 = /* @__PURE__ */ _jsxs("div", {
+			"data-slot": "skeleton-placeholder",
+			role: "status",
+			"aria-label": label,
+			"aria-busy": "true",
+			className: t1,
+			...props,
+			children: [t2, t3]
+		});
+		$[15] = label;
+		$[16] = props;
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t3;
+		$[20] = t4;
+	} else {
+		t4 = $[20];
+	}
+	return t4;
+}
+/**
+* One side of the reveal. While it fades out it turns inert and hidden from assistive technology, so stale content
+* under the new branch cannot be clicked, focused or announced.
+*/
+function SkeletonBranch(t0) {
+	const $ = _c(8);
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = ref;
+	} else {
+		props = $[1];
+		ref = $[2];
+	}
+	const isPresent = useIsPresent();
+	const t1 = isPresent ? undefined : true;
+	const t2 = !isPresent || undefined;
+	let t3;
+	if ($[3] !== props || $[4] !== ref || $[5] !== t1 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(motion.div, {
+			ref,
+			...props,
+			"aria-hidden": t1,
+			inert: t2
+		});
+		$[3] = props;
+		$[4] = ref;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t3 = $[7];
+	}
+	return t3;
+}
+/** Arc's reveal: the placeholder crossfades into the content while the frame springs to the new height. */
+function SkeletonReveal(t0) {
+	const $ = _c(21);
+	let children;
+	let className;
+	let loading;
+	let placeholder;
+	let props;
+	let style;
+	if ($[0] !== t0) {
+		({loading, placeholder, children, className, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = loading;
+		$[4] = placeholder;
+		$[5] = props;
+		$[6] = style;
+	} else {
+		children = $[1];
+		className = $[2];
+		loading = $[3];
+		placeholder = $[4];
+		props = $[5];
+		style = $[6];
+	}
+	const reduceMotion = usePrefersReducedMotion();
+	const contentRef = useRef(null);
+	useMorphHeight(contentRef, loading, reduceMotion);
+	const t1 = reduceMotion ? ARC_DURATION.instant : ARC_DURATION.fast;
+	let t2;
+	if ($[7] !== t1) {
+		t2 = { duration: t1 };
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	const exitTransition = t2;
+	const t3 = props;
+	let t4;
+	if ($[9] !== children || $[10] !== exitTransition || $[11] !== loading || $[12] !== placeholder || $[13] !== reduceMotion) {
+		t4 = /* @__PURE__ */ _jsx("div", {
+			ref: contentRef,
+			className: "relative flow-root",
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				mode: "popLayout",
+				initial: false,
+				children: loading ? /* @__PURE__ */ _jsx(SkeletonBranch, {
+					initial: { opacity: 0 },
+					animate: { opacity: 1 },
+					exit: {
+						opacity: 0,
+						transition: exitTransition
+					},
+					transition: {
+						duration: reduceMotion ? ARC_DURATION.instant : ARC_DURATION.fast,
+						ease: [...ARC_EASE.standard]
+					},
+					children: placeholder
+				}, "placeholder") : /* @__PURE__ */ _jsx(SkeletonBranch, {
+					initial: reduceMotion ? { opacity: 0 } : {
+						opacity: 0,
+						y: SKELETON_REVEAL_OFFSET_PX
+					},
+					animate: {
+						opacity: 1,
+						y: 0
+					},
+					exit: {
+						opacity: 0,
+						transition: exitTransition
+					},
+					transition: {
+						duration: reduceMotion ? ARC_DURATION.instant : ARC_DURATION.standard,
+						ease: [...ARC_EASE.enter]
+					},
+					children
+				}, "content")
+			})
+		});
+		$[9] = children;
+		$[10] = exitTransition;
+		$[11] = loading;
+		$[12] = placeholder;
+		$[13] = reduceMotion;
+		$[14] = t4;
+	} else {
+		t4 = $[14];
+	}
+	let t5;
+	if ($[15] !== className || $[16] !== loading || $[17] !== style || $[18] !== t3 || $[19] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(motion.div, {
+			"data-slot": "skeleton-reveal",
+			"aria-busy": loading,
+			className,
+			...t3,
+			style,
+			children: t4
+		});
+		$[15] = className;
+		$[16] = loading;
+		$[17] = style;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = t5;
+	} else {
+		t5 = $[20];
+	}
+	return t5;
+}
 /**
-* Placeholder with a soft shine that sweeps across it while content loads.
-* The shine rests outside the box, so reduced motion shows a plain muted block.
-* @param props - Native div properties and optional consumer overrides.
-* @returns The placeholder element with its loading animation.
+* Reserves space while content loads. Without Arc's props it is a bare block sized by `className`; with `lines` or
+* `avatar` it draws Arc's composed placeholder; with `loading` it reveals `children` once loading finishes.
+* @param props - Optional placeholder shape, label and loading state, plus native div attributes.
+* @returns The placeholder, or the reveal frame when `loading` is set.
 */
-function Skeleton({ className, ...props }) {
-	return /* @__PURE__ */ _jsx(MotionSlot, {
-		kind: "skeleton",
-		children: /* @__PURE__ */ _jsx("div", {
+function Skeleton(t0) {
+	const $ = _c(30);
+	let avatar;
+	let children;
+	let className;
+	let lines;
+	let loading;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({lines, avatar, label: t1, loading, className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = avatar;
+		$[2] = children;
+		$[3] = className;
+		$[4] = lines;
+		$[5] = loading;
+		$[6] = props;
+		$[7] = t1;
+	} else {
+		avatar = $[1];
+		children = $[2];
+		className = $[3];
+		lines = $[4];
+		loading = $[5];
+		props = $[6];
+		t1 = $[7];
+	}
+	const label = t1 === undefined ? SKELETON_DEFAULT_LABEL : t1;
+	const t2 = lines ?? SKELETON_DEFAULT_LINES;
+	const t3 = avatar ?? false;
+	let t4;
+	if ($[8] !== label || $[9] !== t2 || $[10] !== t3) {
+		t4 = {
+			lines: t2,
+			avatar: t3,
+			label
+		};
+		$[8] = label;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else {
+		t4 = $[11];
+	}
+	const shape = t4;
+	if (loading !== undefined) {
+		let t5;
+		if ($[12] !== shape) {
+			t5 = /* @__PURE__ */ _jsx(SkeletonPlaceholder, { ...shape });
+			$[12] = shape;
+			$[13] = t5;
+		} else {
+			t5 = $[13];
+		}
+		let t6;
+		if ($[14] !== children || $[15] !== className || $[16] !== loading || $[17] !== props || $[18] !== t5) {
+			t6 = /* @__PURE__ */ _jsx(SkeletonReveal, {
+				loading,
+				placeholder: t5,
+				className,
+				...props,
+				children
+			});
+			$[14] = children;
+			$[15] = className;
+			$[16] = loading;
+			$[17] = props;
+			$[18] = t5;
+			$[19] = t6;
+		} else {
+			t6 = $[19];
+		}
+		return t6;
+	}
+	if (lines !== undefined || avatar) {
+		let t5;
+		if ($[20] !== className || $[21] !== props || $[22] !== shape) {
+			t5 = /* @__PURE__ */ _jsx(SkeletonPlaceholder, {
+				...shape,
+				className,
+				...props
+			});
+			$[20] = className;
+			$[21] = props;
+			$[22] = shape;
+			$[23] = t5;
+		} else {
+			t5 = $[23];
+		}
+		return t5;
+	}
+	let t5;
+	if ($[24] !== className) {
+		t5 = cn(blockClassName, className);
+		$[24] = className;
+		$[25] = t5;
+	} else {
+		t5 = $[25];
+	}
+	let t6;
+	if ($[26] !== children || $[27] !== props || $[28] !== t5) {
+		t6 = /* @__PURE__ */ _jsx("div", {
 			"data-slot": "skeleton",
-			className: cn("relative overflow-hidden rounded-md bg-muted after:pointer-events-none after:absolute after:inset-0 after:-translate-x-full after:bg-linear-to-r after:from-transparent after:via-foreground/6 after:to-transparent", className),
-			...props
-		})
-	});
+			className: t5,
+			...props,
+			children
+		});
+		$[26] = children;
+		$[27] = props;
+		$[28] = t5;
+		$[29] = t6;
+	} else {
+		t6 = $[29];
+	}
+	return t6;
 }
 export { Skeleton };

package/dist/components/switch.d.ts

@@ -1,6 +1,16 @@
-import * as React from "react";
+import type { ComponentProps } from "react";
 import { Switch as SwitchPrimitive } from "radix-ui";
-declare function Switch({ className, size, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
-    size?: "sm" | "default";
-}): React.JSX.Element;
+import type { SwitchSize } from "../constants/switch.js";
+export type SwitchProps = ComponentProps<typeof SwitchPrimitive.Root> & {
+    /** Track size: Arc's 42 by 24 track (`default`) or a compact one for dense rows (`sm`). */
+    size?: SwitchSize;
+    /** Visible text rendered inside the control, after the track; it also names the switch. */
+    label?: string;
+};
+/**
+ * A binary setting that applies at once, controlled or uncontrolled like Radix's switch.
+ * @param switchProps - Every Radix switch prop, including `ref`, plus the Arc `size` and `label`.
+ * @returns The switch button, with its label inside when one is passed.
+ */
+declare function Switch({ className, size, label, checked, defaultChecked, onCheckedChange, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onKeyDown, onKeyUp, onBlur, disabled, "aria-label": ariaLabel, ...props }: SwitchProps): import("react").JSX.Element;
 export { Switch };