beez-ui 2.5.0 → 2.6.1

package/dist/components/switch.js

@@ -1,67 +1,451 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-import * as React from "react";
+/**
+* Arc's Switch (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a pill track that crossfades between its
+* two fills while the thumb glides on a critically damped spring. Held down, the thumb widens toward the other side
+* with its far edge anchored, like a finger on it. With a `label` the text sits inside the control; without it the
+* switch renders the bare track, for rows that place their own label.
+*/
+import { useEffect, useRef, useState } from "react";
 import { Switch as SwitchPrimitive } from "radix-ui";
-import { MotionSlot } from "../motion/motion-slot.js";
+import { animate, frameData, motion, useMotionValue } from "motion/react";
+import { SWITCH_CHANGE_STRETCH, SWITCH_PRESS_RELEASE_WINDOW_MS, SWITCH_PRESS_STRETCH_PX, SWITCH_PRIMARY_POINTER_BUTTON, SWITCH_THUMB_GEOMETRY_PX, SWITCH_THUMB_GLIDE_SPRING, SWITCH_TOGGLE_KEY } from "../constants/switch.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_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Arc's control recipe. The bare switch keeps the track's own box and widens its hit area with a pseudo-element, so
+* rows that already lay it out do not grow; with a label it takes Arc's full control height. Hover only answers on
+* hover-capable fine pointers, and keyboard focus uses the theme's focus outline.
+*/
+const switchClassName = "peer group/switch relative inline-flex shrink-0 cursor-pointer items-center gap-(--space-3) rounded-(--radius-pill) border-0 bg-transparent p-0 font-sans text-sm text-foreground [-webkit-tap-highlight-color:transparent] after:absolute after:-inset-x-2 after:-inset-y-2.5 disabled:cursor-not-allowed disabled:opacity-50 data-[labelled]:min-h-(--control-height-md) data-[labelled]:rounded-(--radius-control) data-[labelled]:after:hidden hover-fine:data-[state=unchecked]:not-disabled:[&_[data-slot=switch-track]]:bg-(--control-track-hover)";
+/** Fixed box: the thumb moves inside it with transforms, so nothing around the switch shifts. */
+const trackClassName = "relative isolate box-border flex flex-none items-center rounded-(--radius-pill) bg-(--control-track) transition-[background-color] duration-(--duration-fast) ease-(--ease-standard) before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:bg-(--control-on) before:opacity-0 before:transition-opacity before:duration-(--duration-standard) before:ease-(--ease-standard) group-data-[state=checked]/switch:before:opacity-100 group-aria-invalid/switch:shadow-[0_0_0_1px_var(--danger)] group-data-[size=default]/switch:h-6 group-data-[size=default]/switch:w-[42px] group-data-[size=default]/switch:p-[3px] group-data-[size=sm]/switch:h-[18px] group-data-[size=sm]/switch:w-8 group-data-[size=sm]/switch:p-[2px] motion-reduce:transition-none motion-reduce:before:transition-none";
+const thumbClassName = "pointer-events-none block flex-none rounded-(--radius-pill) bg-(--control-thumb) shadow-(--control-thumb-shadow) will-change-transform transition-[background-color] duration-(--duration-standard) ease-(--ease-standard) group-data-[state=checked]/switch:bg-(--control-thumb-on) group-data-[size=default]/switch:h-[18px] group-data-[size=sm]/switch:h-[14px] motion-reduce:transition-none";
+/**
+* Springs a thumb value to its target from where it was last painted, carrying its velocity. Motion samples a stopped
+* animation at the current time, ahead of the last painted frame, and renders that sample right after the commit, so
+* a reversed glide would otherwise jump by up to a frame of travel, more when frames run long.
+* @param value - The motion value to animate.
+* @param paintedValue - The value last written to the screen.
+* @param target - Where the value should settle.
+* @param transition - Spring to travel on.
+* @returns The running animation, or `undefined` when the value already rests on its target.
+*/
+function glideFromPainted(value, paintedValue, target, transition) {
+	if (!value.isAnimating() && value.get() === target) return undefined;
+	const velocity = value.getVelocity();
+	value.jump(paintedValue);
+	return animate(value, [paintedValue, target], {
+		...transition,
+		velocity
+	});
+}
+/**
+* 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.
+*/
 function Switch(t0) {
-	const $ = _c(11);
+	const $ = _c(85);
+	let ariaLabel;
+	let checked;
 	let className;
+	let defaultChecked;
+	let disabled;
+	let label;
+	let onBlur;
+	let onCheckedChange;
+	let onKeyDown;
+	let onKeyUp;
+	let onPointerCancel;
+	let onPointerDown;
+	let onPointerLeave;
+	let onPointerUp;
 	let props;
 	let t1;
 	if ($[0] !== t0) {
-		({className, size: t1, ...props} = t0);
+		({className, size: t1, label, checked, defaultChecked, onCheckedChange, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onKeyDown, onKeyUp, onBlur, disabled, "aria-label": ariaLabel, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
+		$[1] = ariaLabel;
+		$[2] = checked;
+		$[3] = className;
+		$[4] = defaultChecked;
+		$[5] = disabled;
+		$[6] = label;
+		$[7] = onBlur;
+		$[8] = onCheckedChange;
+		$[9] = onKeyDown;
+		$[10] = onKeyUp;
+		$[11] = onPointerCancel;
+		$[12] = onPointerDown;
+		$[13] = onPointerLeave;
+		$[14] = onPointerUp;
+		$[15] = props;
+		$[16] = t1;
 	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
+		ariaLabel = $[1];
+		checked = $[2];
+		className = $[3];
+		defaultChecked = $[4];
+		disabled = $[5];
+		label = $[6];
+		onBlur = $[7];
+		onCheckedChange = $[8];
+		onKeyDown = $[9];
+		onKeyUp = $[10];
+		onPointerCancel = $[11];
+		onPointerDown = $[12];
+		onPointerLeave = $[13];
+		onPointerUp = $[14];
+		props = $[15];
+		t1 = $[16];
 	}
 	const size = t1 === undefined ? "default" : t1;
+	const reduceMotion = usePrefersReducedMotion();
+	const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked ?? false);
+	const [isPressed, setIsPressed] = useState(false);
+	const isChecked = checked ?? uncontrolledChecked;
+	const geometry = SWITCH_THUMB_GEOMETRY_PX[size];
+	const stretch = isPressed && !reduceMotion && !disabled ? SWITCH_PRESS_STRETCH_PX[size] : 0;
+	const targetX = isChecked ? geometry.travel - stretch : 0;
+	const targetWidth = geometry.size + stretch;
+	const x = useMotionValue(targetX);
+	const width = useMotionValue(targetWidth);
+	const scaleX = useMotionValue(1);
 	let t2;
-	if ($[4] !== className) {
-		t2 = cn("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className);
-		$[4] = className;
-		$[5] = t2;
+	if ($[17] !== targetWidth || $[18] !== targetX) {
+		t2 = {
+			x: targetX,
+			width: targetWidth,
+			scaleX: 1
+		};
+		$[17] = targetWidth;
+		$[18] = targetX;
+		$[19] = t2;
 	} else {
-		t2 = $[5];
+		t2 = $[19];
 	}
+	const painted = useRef(t2);
+	const shownChecked = useRef(isChecked);
+	const releasedAt = useRef(-Infinity);
 	let t3;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "thumb",
+	let t4;
+	if ($[20] !== scaleX || $[21] !== width || $[22] !== x) {
+		t3 = () => {
+			const trackPainted = (key) => (value) => {
+				if (frameData.isProcessing) {
+					painted.current[key] = value;
+				}
+			};
+			const unsubscribes = [
+				x.on("change", trackPainted("x")),
+				width.on("change", trackPainted("width")),
+				scaleX.on("change", trackPainted("scaleX"))
+			];
+			return () => unsubscribes.forEach(_temp);
+		};
+		t4 = [
+			x,
+			width,
+			scaleX
+		];
+		$[20] = scaleX;
+		$[21] = width;
+		$[22] = x;
+		$[23] = t3;
+		$[24] = t4;
+	} else {
+		t3 = $[23];
+		t4 = $[24];
+	}
+	useEffect(t3, t4);
+	let t5;
+	let t6;
+	if ($[25] !== reduceMotion || $[26] !== targetWidth || $[27] !== targetX || $[28] !== width || $[29] !== x) {
+		t5 = () => {
+			if (reduceMotion) {
+				x.jump(targetX);
+				width.jump(targetWidth);
+				painted.current = {
+					...painted.current,
+					x: targetX,
+					width: targetWidth
+				};
+				return;
+			}
+			const xControls = glideFromPainted(x, painted.current.x, targetX, SWITCH_THUMB_GLIDE_SPRING);
+			const widthControls = glideFromPainted(width, painted.current.width, targetWidth, ARC_SPRING_SNAPPY);
+			return () => {
+				xControls?.stop();
+				widthControls?.stop();
+			};
+		};
+		t6 = [
+			targetX,
+			targetWidth,
+			reduceMotion,
+			x,
+			width
+		];
+		$[25] = reduceMotion;
+		$[26] = targetWidth;
+		$[27] = targetX;
+		$[28] = width;
+		$[29] = x;
+		$[30] = t5;
+		$[31] = t6;
+	} else {
+		t5 = $[30];
+		t6 = $[31];
+	}
+	useEffect(t5, t6);
+	let t7;
+	let t8;
+	if ($[32] !== isChecked || $[33] !== reduceMotion || $[34] !== scaleX) {
+		t7 = () => {
+			if (shownChecked.current === isChecked) {
+				return;
+			}
+			shownChecked.current = isChecked;
+			const isFromPress = performance.now() - releasedAt.current < SWITCH_PRESS_RELEASE_WINDOW_MS;
+			if (reduceMotion || isFromPress) {
+				return;
+			}
+			const { scaleX: keyframes, ...transition } = SWITCH_CHANGE_STRETCH;
+			const [, peakScale, restingScale] = keyframes;
+			scaleX.jump(painted.current.scaleX);
+			const controls = animate(scaleX, [
+				painted.current.scaleX,
+				peakScale,
+				restingScale
+			], {
+				...transition,
+				times: [...transition.times],
+				ease: [...transition.ease]
+			});
+			return () => controls.stop();
+		};
+		t8 = [
+			isChecked,
+			reduceMotion,
+			scaleX
+		];
+		$[32] = isChecked;
+		$[33] = reduceMotion;
+		$[34] = scaleX;
+		$[35] = t7;
+		$[36] = t8;
+	} else {
+		t7 = $[35];
+		t8 = $[36];
+	}
+	useEffect(t7, t8);
+	let t9;
+	if ($[37] !== disabled || $[38] !== isPressed) {
+		t9 = () => {
+			if (isPressed && !disabled) {
+				releasedAt.current = performance.now();
+			}
+			setIsPressed(false);
+		};
+		$[37] = disabled;
+		$[38] = isPressed;
+		$[39] = t9;
+	} else {
+		t9 = $[39];
+	}
+	const release = t9;
+	const t10 = label ? "" : undefined;
+	let t11;
+	if ($[40] !== className) {
+		t11 = cn(switchClassName, className);
+		$[40] = className;
+		$[41] = t11;
+	} else {
+		t11 = $[41];
+	}
+	const t12 = ariaLabel ?? label;
+	let t13;
+	if ($[42] !== checked || $[43] !== onCheckedChange) {
+		t13 = (nextChecked) => {
+			if (checked === undefined) {
+				setUncontrolledChecked(nextChecked);
+			}
+			onCheckedChange?.(nextChecked);
+		};
+		$[42] = checked;
+		$[43] = onCheckedChange;
+		$[44] = t13;
+	} else {
+		t13 = $[44];
+	}
+	let t14;
+	if ($[45] !== onPointerDown) {
+		t14 = (event) => {
+			onPointerDown?.(event);
+			if (event.button === SWITCH_PRIMARY_POINTER_BUTTON) {
+				setIsPressed(true);
+			}
+		};
+		$[45] = onPointerDown;
+		$[46] = t14;
+	} else {
+		t14 = $[46];
+	}
+	let t15;
+	if ($[47] !== onPointerUp || $[48] !== release) {
+		t15 = (event_0) => {
+			onPointerUp?.(event_0);
+			release();
+		};
+		$[47] = onPointerUp;
+		$[48] = release;
+		$[49] = t15;
+	} else {
+		t15 = $[49];
+	}
+	let t16;
+	if ($[50] !== onPointerLeave) {
+		t16 = (event_1) => {
+			onPointerLeave?.(event_1);
+			setIsPressed(false);
+		};
+		$[50] = onPointerLeave;
+		$[51] = t16;
+	} else {
+		t16 = $[51];
+	}
+	let t17;
+	if ($[52] !== onPointerCancel) {
+		t17 = (event_2) => {
+			onPointerCancel?.(event_2);
+			setIsPressed(false);
+		};
+		$[52] = onPointerCancel;
+		$[53] = t17;
+	} else {
+		t17 = $[53];
+	}
+	let t18;
+	if ($[54] !== onKeyDown) {
+		t18 = (event_3) => {
+			onKeyDown?.(event_3);
+			if (event_3.key === SWITCH_TOGGLE_KEY) {
+				setIsPressed(true);
+			}
+		};
+		$[54] = onKeyDown;
+		$[55] = t18;
+	} else {
+		t18 = $[55];
+	}
+	let t19;
+	if ($[56] !== onKeyUp || $[57] !== release) {
+		t19 = (event_4) => {
+			onKeyUp?.(event_4);
+			release();
+		};
+		$[56] = onKeyUp;
+		$[57] = release;
+		$[58] = t19;
+	} else {
+		t19 = $[58];
+	}
+	let t20;
+	if ($[59] !== onBlur) {
+		t20 = (event_5) => {
+			onBlur?.(event_5);
+			setIsPressed(false);
+		};
+		$[59] = onBlur;
+		$[60] = t20;
+	} else {
+		t20 = $[60];
+	}
+	let t21;
+	if ($[61] !== scaleX || $[62] !== width || $[63] !== x) {
+		t21 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "switch-track",
+			className: trackClassName,
 			children: /* @__PURE__ */ _jsx(SwitchPrimitive.Thumb, {
-				"data-slot": "switch-thumb",
-				className: "pointer-events-none block rounded-full bg-background shadow-sm ring-0 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+				asChild: true,
+				children: /* @__PURE__ */ _jsx(motion.span, {
+					"data-slot": "switch-thumb",
+					className: thumbClassName,
+					style: {
+						x,
+						width,
+						scaleX
+					}
+				})
 			})
 		});
-		$[6] = t3;
+		$[61] = scaleX;
+		$[62] = width;
+		$[63] = x;
+		$[64] = t21;
 	} else {
-		t3 = $[6];
+		t21 = $[64];
 	}
-	let t4;
-	if ($[7] !== props || $[8] !== size || $[9] !== t2) {
-		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "field",
-			children: /* @__PURE__ */ _jsx(SwitchPrimitive.Root, {
-				"data-slot": "switch",
-				"data-size": size,
-				className: t2,
-				...props,
-				children: t3
-			})
+	let t22;
+	if ($[65] !== label) {
+		t22 = label ? /* @__PURE__ */ _jsx("span", {
+			"data-slot": "switch-label",
+			className: "leading-(--leading-body)",
+			children: label
+		}) : null;
+		$[65] = label;
+		$[66] = t22;
+	} else {
+		t22 = $[66];
+	}
+	let t23;
+	if ($[67] !== disabled || $[68] !== isChecked || $[69] !== props || $[70] !== size || $[71] !== t10 || $[72] !== t11 || $[73] !== t12 || $[74] !== t13 || $[75] !== t14 || $[76] !== t15 || $[77] !== t16 || $[78] !== t17 || $[79] !== t18 || $[80] !== t19 || $[81] !== t20 || $[82] !== t21 || $[83] !== t22) {
+		t23 = /* @__PURE__ */ _jsxs(SwitchPrimitive.Root, {
+			"data-slot": "switch",
+			"data-size": size,
+			"data-labelled": t10,
+			className: t11,
+			...props,
+			disabled,
+			checked: isChecked,
+			"aria-label": t12,
+			onCheckedChange: t13,
+			onPointerDown: t14,
+			onPointerUp: t15,
+			onPointerLeave: t16,
+			onPointerCancel: t17,
+			onKeyDown: t18,
+			onKeyUp: t19,
+			onBlur: t20,
+			children: [t21, t22]
 		});
-		$[7] = props;
-		$[8] = size;
-		$[9] = t2;
-		$[10] = t4;
+		$[67] = disabled;
+		$[68] = isChecked;
+		$[69] = props;
+		$[70] = size;
+		$[71] = t10;
+		$[72] = t11;
+		$[73] = t12;
+		$[74] = t13;
+		$[75] = t14;
+		$[76] = t15;
+		$[77] = t16;
+		$[78] = t17;
+		$[79] = t18;
+		$[80] = t19;
+		$[81] = t20;
+		$[82] = t21;
+		$[83] = t22;
+		$[84] = t23;
 	} else {
-		t4 = $[10];
+		t23 = $[84];
 	}
-	return t4;
+	return t23;
+}
+function _temp(unsubscribe) {
+	return unsubscribe();
 }
 export { Switch };

package/dist/components/tabs.d.ts

@@ -1,11 +1,44 @@
-import * as React from "react";
+/**
+ * Arc's Tabs (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): its segmented list on Arc's tokens, a
+ * highlight that glides between triggers with Arc's morph spring, a list that scrolls sideways and keeps the active
+ * tab in view, and panels that slide in from the side of the chosen tab while their height morphs from the previous
+ * panel. Radix keeps the roles, keyboard navigation and controlled or uncontrolled value.
+ */
+import { type ComponentProps } from "react";
 import { type VariantProps } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
-declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
+/**
+ * Groups a tab list with its panels. Accepts Radix's `value`/`defaultValue`/`onValueChange` contract unchanged.
+ * @param props - Radix root props, including `orientation` and `ref`.
+ * @returns The tabs root.
+ */
+declare function Tabs({ className, orientation, value, defaultValue, onValueChange, ref, ...props }: ComponentProps<typeof TabsPrimitive.Root>): import("react").JSX.Element;
+/**
+ * Arc's segmented list (`default`): a muted track whose active trigger is a raised surface. `line` keeps the
+ * underline variant on the same tokens. Horizontal lists scroll sideways without a visible scrollbar.
+ */
 declare const tabsListVariants: (props?: ({
     variant?: "default" | "line" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): React.JSX.Element;
-declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
-declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
+/**
+ * Holds the triggers. The active highlight glides to the newly selected trigger and the list scrolls to keep the
+ * active or focused trigger visible.
+ * @param props - Radix list props, the `variant` and `ref`.
+ * @returns The tab list.
+ */
+declare function TabsList({ className, variant, ref, onFocusCapture, ...props }: ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): import("react").JSX.Element;
+/**
+ * Selects a panel. Arc's trigger: muted label, accent label once active, hover only on fine pointers and the
+ * shared keyboard focus outline.
+ * @param props - Radix trigger props, including `value`.
+ * @returns The tab.
+ */
+declare function TabsTrigger({ className, value, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>): import("react").JSX.Element;
+/**
+ * Content of one tab. Inside `Tabs` it animates between panels; with `forceMount` it stays mounted and switches
+ * without motion, as Radix renders it. With `asChild` the consumer's element is the panel in both cases.
+ * @param props - Radix content props, including `value` and `forceMount`.
+ * @returns The tab panel, or nothing while another tab is active.
+ */
+declare function TabsContent({ className, value, forceMount, asChild, children, ...props }: ComponentProps<typeof TabsPrimitive.Content>): import("react").JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };