beez-ui 2.7.1 → 3.0.0

package/dist/components/switch.js

@@ -21,8 +21,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 */
 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";
+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)] h-6 w-[42px] p-[3px] 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) h-[18px] 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
@@ -44,11 +44,11 @@ function glideFromPainted(value, paintedValue, target, transition) {
 }
 /**
 * 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`.
+* @param switchProps - Every Radix switch prop, including `ref`, plus Arc's `label`.
 * @returns The switch button, with its label inside when one is passed.
 */
 function Switch(t0) {
-	const $ = _c(85);
+	const $ = _c(83);
 	let ariaLabel;
 	let checked;
 	let className;
@@ -64,9 +64,8 @@ function Switch(t0) {
 	let onPointerLeave;
 	let onPointerUp;
 	let props;
-	let t1;
 	if ($[0] !== t0) {
-		({className, size: t1, label, checked, defaultChecked, onCheckedChange, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onKeyDown, onKeyUp, onBlur, disabled, "aria-label": ariaLabel, ...props} = t0);
+		({className, label, checked, defaultChecked, onCheckedChange, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onKeyDown, onKeyUp, onBlur, disabled, "aria-label": ariaLabel, ...props} = t0);
 		$[0] = t0;
 		$[1] = ariaLabel;
 		$[2] = checked;
@@ -83,7 +82,6 @@ function Switch(t0) {
 		$[13] = onPointerLeave;
 		$[14] = onPointerUp;
 		$[15] = props;
-		$[16] = t1;
 	} else {
 		ariaLabel = $[1];
 		checked = $[2];
@@ -100,40 +98,37 @@ function Switch(t0) {
 		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 stretch = isPressed && !reduceMotion && !disabled ? SWITCH_PRESS_STRETCH_PX : 0;
+	const targetX = isChecked ? SWITCH_THUMB_GEOMETRY_PX.travel - stretch : 0;
+	const targetWidth = SWITCH_THUMB_GEOMETRY_PX.size + stretch;
 	const x = useMotionValue(targetX);
 	const width = useMotionValue(targetWidth);
 	const scaleX = useMotionValue(1);
-	let t2;
-	if ($[17] !== targetWidth || $[18] !== targetX) {
-		t2 = {
+	let t1;
+	if ($[16] !== targetWidth || $[17] !== targetX) {
+		t1 = {
 			x: targetX,
 			width: targetWidth,
 			scaleX: 1
 		};
-		$[17] = targetWidth;
-		$[18] = targetX;
-		$[19] = t2;
+		$[16] = targetWidth;
+		$[17] = targetX;
+		$[18] = t1;
 	} else {
-		t2 = $[19];
+		t1 = $[18];
 	}
-	const painted = useRef(t2);
+	const painted = useRef(t1);
 	const shownChecked = useRef(isChecked);
 	const releasedAt = useRef(-Infinity);
+	let t2;
 	let t3;
-	let t4;
-	if ($[20] !== scaleX || $[21] !== width || $[22] !== x) {
-		t3 = () => {
+	if ($[19] !== scaleX || $[20] !== width || $[21] !== x) {
+		t2 = () => {
 			const trackPainted = (key) => (value) => {
 				if (frameData.isProcessing) {
 					painted.current[key] = value;
@@ -146,25 +141,25 @@ function Switch(t0) {
 			];
 			return () => unsubscribes.forEach(_temp);
 		};
-		t4 = [
+		t3 = [
 			x,
 			width,
 			scaleX
 		];
-		$[20] = scaleX;
-		$[21] = width;
-		$[22] = x;
+		$[19] = scaleX;
+		$[20] = width;
+		$[21] = x;
+		$[22] = t2;
 		$[23] = t3;
-		$[24] = t4;
 	} else {
+		t2 = $[22];
 		t3 = $[23];
-		t4 = $[24];
 	}
-	useEffect(t3, t4);
+	useEffect(t2, t3);
+	let t4;
 	let t5;
-	let t6;
-	if ($[25] !== reduceMotion || $[26] !== targetWidth || $[27] !== targetX || $[28] !== width || $[29] !== x) {
-		t5 = () => {
+	if ($[24] !== reduceMotion || $[25] !== targetWidth || $[26] !== targetX || $[27] !== width || $[28] !== x) {
+		t4 = () => {
 			if (reduceMotion) {
 				x.jump(targetX);
 				width.jump(targetWidth);
@@ -182,29 +177,29 @@ function Switch(t0) {
 				widthControls?.stop();
 			};
 		};
-		t6 = [
+		t5 = [
 			targetX,
 			targetWidth,
 			reduceMotion,
 			x,
 			width
 		];
-		$[25] = reduceMotion;
-		$[26] = targetWidth;
-		$[27] = targetX;
-		$[28] = width;
-		$[29] = x;
+		$[24] = reduceMotion;
+		$[25] = targetWidth;
+		$[26] = targetX;
+		$[27] = width;
+		$[28] = x;
+		$[29] = t4;
 		$[30] = t5;
-		$[31] = t6;
 	} else {
+		t4 = $[29];
 		t5 = $[30];
-		t6 = $[31];
 	}
-	useEffect(t5, t6);
+	useEffect(t4, t5);
+	let t6;
 	let t7;
-	let t8;
-	if ($[32] !== isChecked || $[33] !== reduceMotion || $[34] !== scaleX) {
-		t7 = () => {
+	if ($[31] !== isChecked || $[32] !== reduceMotion || $[33] !== scaleX) {
+		t6 = () => {
 			if (shownChecked.current === isChecked) {
 				return;
 			}
@@ -227,146 +222,146 @@ function Switch(t0) {
 			});
 			return () => controls.stop();
 		};
-		t8 = [
+		t7 = [
 			isChecked,
 			reduceMotion,
 			scaleX
 		];
-		$[32] = isChecked;
-		$[33] = reduceMotion;
-		$[34] = scaleX;
+		$[31] = isChecked;
+		$[32] = reduceMotion;
+		$[33] = scaleX;
+		$[34] = t6;
 		$[35] = t7;
-		$[36] = t8;
 	} else {
+		t6 = $[34];
 		t7 = $[35];
-		t8 = $[36];
 	}
-	useEffect(t7, t8);
-	let t9;
-	if ($[37] !== disabled || $[38] !== isPressed) {
-		t9 = () => {
+	useEffect(t6, t7);
+	let t8;
+	if ($[36] !== disabled || $[37] !== isPressed) {
+		t8 = () => {
 			if (isPressed && !disabled) {
 				releasedAt.current = performance.now();
 			}
 			setIsPressed(false);
 		};
-		$[37] = disabled;
-		$[38] = isPressed;
-		$[39] = t9;
+		$[36] = disabled;
+		$[37] = isPressed;
+		$[38] = t8;
 	} else {
-		t9 = $[39];
+		t8 = $[38];
 	}
-	const release = t9;
-	const t10 = label ? "" : undefined;
-	let t11;
-	if ($[40] !== className) {
-		t11 = cn(switchClassName, className);
-		$[40] = className;
-		$[41] = t11;
+	const release = t8;
+	const t9 = label ? "" : undefined;
+	let t10;
+	if ($[39] !== className) {
+		t10 = cn(switchClassName, className);
+		$[39] = className;
+		$[40] = t10;
 	} else {
-		t11 = $[41];
+		t10 = $[40];
 	}
-	const t12 = ariaLabel ?? label;
-	let t13;
-	if ($[42] !== checked || $[43] !== onCheckedChange) {
-		t13 = (nextChecked) => {
+	const t11 = ariaLabel ?? label;
+	let t12;
+	if ($[41] !== checked || $[42] !== onCheckedChange) {
+		t12 = (nextChecked) => {
 			if (checked === undefined) {
 				setUncontrolledChecked(nextChecked);
 			}
 			onCheckedChange?.(nextChecked);
 		};
-		$[42] = checked;
-		$[43] = onCheckedChange;
-		$[44] = t13;
+		$[41] = checked;
+		$[42] = onCheckedChange;
+		$[43] = t12;
 	} else {
-		t13 = $[44];
+		t12 = $[43];
 	}
-	let t14;
-	if ($[45] !== onPointerDown) {
-		t14 = (event) => {
+	let t13;
+	if ($[44] !== onPointerDown) {
+		t13 = (event) => {
 			onPointerDown?.(event);
 			if (event.button === SWITCH_PRIMARY_POINTER_BUTTON) {
 				setIsPressed(true);
 			}
 		};
-		$[45] = onPointerDown;
-		$[46] = t14;
+		$[44] = onPointerDown;
+		$[45] = t13;
 	} else {
-		t14 = $[46];
+		t13 = $[45];
 	}
-	let t15;
-	if ($[47] !== onPointerUp || $[48] !== release) {
-		t15 = (event_0) => {
+	let t14;
+	if ($[46] !== onPointerUp || $[47] !== release) {
+		t14 = (event_0) => {
 			onPointerUp?.(event_0);
 			release();
 		};
-		$[47] = onPointerUp;
-		$[48] = release;
-		$[49] = t15;
+		$[46] = onPointerUp;
+		$[47] = release;
+		$[48] = t14;
 	} else {
-		t15 = $[49];
+		t14 = $[48];
 	}
-	let t16;
-	if ($[50] !== onPointerLeave) {
-		t16 = (event_1) => {
+	let t15;
+	if ($[49] !== onPointerLeave) {
+		t15 = (event_1) => {
 			onPointerLeave?.(event_1);
 			setIsPressed(false);
 		};
-		$[50] = onPointerLeave;
-		$[51] = t16;
+		$[49] = onPointerLeave;
+		$[50] = t15;
 	} else {
-		t16 = $[51];
+		t15 = $[50];
 	}
-	let t17;
-	if ($[52] !== onPointerCancel) {
-		t17 = (event_2) => {
+	let t16;
+	if ($[51] !== onPointerCancel) {
+		t16 = (event_2) => {
 			onPointerCancel?.(event_2);
 			setIsPressed(false);
 		};
-		$[52] = onPointerCancel;
-		$[53] = t17;
+		$[51] = onPointerCancel;
+		$[52] = t16;
 	} else {
-		t17 = $[53];
+		t16 = $[52];
 	}
-	let t18;
-	if ($[54] !== onKeyDown) {
-		t18 = (event_3) => {
+	let t17;
+	if ($[53] !== onKeyDown) {
+		t17 = (event_3) => {
 			onKeyDown?.(event_3);
 			if (event_3.key === SWITCH_TOGGLE_KEY) {
 				setIsPressed(true);
 			}
 		};
-		$[54] = onKeyDown;
-		$[55] = t18;
+		$[53] = onKeyDown;
+		$[54] = t17;
 	} else {
-		t18 = $[55];
+		t17 = $[54];
 	}
-	let t19;
-	if ($[56] !== onKeyUp || $[57] !== release) {
-		t19 = (event_4) => {
+	let t18;
+	if ($[55] !== onKeyUp || $[56] !== release) {
+		t18 = (event_4) => {
 			onKeyUp?.(event_4);
 			release();
 		};
-		$[56] = onKeyUp;
-		$[57] = release;
-		$[58] = t19;
+		$[55] = onKeyUp;
+		$[56] = release;
+		$[57] = t18;
 	} else {
-		t19 = $[58];
+		t18 = $[57];
 	}
-	let t20;
-	if ($[59] !== onBlur) {
-		t20 = (event_5) => {
+	let t19;
+	if ($[58] !== onBlur) {
+		t19 = (event_5) => {
 			onBlur?.(event_5);
 			setIsPressed(false);
 		};
-		$[59] = onBlur;
-		$[60] = t20;
+		$[58] = onBlur;
+		$[59] = t19;
 	} else {
-		t20 = $[60];
+		t19 = $[59];
 	}
-	let t21;
-	if ($[61] !== scaleX || $[62] !== width || $[63] !== x) {
-		t21 = /* @__PURE__ */ _jsx("span", {
+	let t20;
+	if ($[60] !== scaleX || $[61] !== width || $[62] !== x) {
+		t20 = /* @__PURE__ */ _jsx("span", {
 			"data-slot": "switch-track",
 			className: trackClassName,
 			children: /* @__PURE__ */ _jsx(SwitchPrimitive.Thumb, {
@@ -382,68 +377,66 @@ function Switch(t0) {
 				})
 			})
 		});
-		$[61] = scaleX;
-		$[62] = width;
-		$[63] = x;
-		$[64] = t21;
+		$[60] = scaleX;
+		$[61] = width;
+		$[62] = x;
+		$[63] = t20;
 	} else {
-		t21 = $[64];
+		t20 = $[63];
 	}
-	let t22;
-	if ($[65] !== label) {
-		t22 = label ? /* @__PURE__ */ _jsx("span", {
+	let t21;
+	if ($[64] !== label) {
+		t21 = label ? /* @__PURE__ */ _jsx("span", {
 			"data-slot": "switch-label",
 			className: "leading-(--leading-body)",
 			children: label
 		}) : null;
-		$[65] = label;
-		$[66] = t22;
+		$[64] = label;
+		$[65] = t21;
 	} else {
-		t22 = $[66];
+		t21 = $[65];
 	}
-	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, {
+	let t22;
+	if ($[66] !== disabled || $[67] !== isChecked || $[68] !== props || $[69] !== t10 || $[70] !== t11 || $[71] !== t12 || $[72] !== t13 || $[73] !== t14 || $[74] !== t15 || $[75] !== t16 || $[76] !== t17 || $[77] !== t18 || $[78] !== t19 || $[79] !== t20 || $[80] !== t21 || $[81] !== t9) {
+		t22 = /* @__PURE__ */ _jsxs(SwitchPrimitive.Root, {
 			"data-slot": "switch",
-			"data-size": size,
-			"data-labelled": t10,
-			className: t11,
+			"data-labelled": t9,
+			className: t10,
 			...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]
+			"aria-label": t11,
+			onCheckedChange: t12,
+			onPointerDown: t13,
+			onPointerUp: t14,
+			onPointerLeave: t15,
+			onPointerCancel: t16,
+			onKeyDown: t17,
+			onKeyUp: t18,
+			onBlur: t19,
+			children: [t20, t21]
 		});
-		$[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;
+		$[66] = disabled;
+		$[67] = isChecked;
+		$[68] = props;
+		$[69] = t10;
+		$[70] = t11;
+		$[71] = t12;
+		$[72] = t13;
+		$[73] = t14;
+		$[74] = t15;
+		$[75] = t16;
+		$[76] = t17;
+		$[77] = t18;
+		$[78] = t19;
+		$[79] = t20;
+		$[80] = t21;
+		$[81] = t9;
+		$[82] = t22;
 	} else {
-		t23 = $[84];
+		t22 = $[82];
 	}
-	return t23;
+	return t22;
 }
 function _temp(unsubscribe) {
 	return unsubscribe();

package/dist/components/tabs.d.ts

@@ -5,7 +5,6 @@
  * 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";
 /**
  * Groups a tab list with its panels. Accepts Radix's `value`/`defaultValue`/`onValueChange` contract unchanged.
@@ -13,20 +12,13 @@ import { Tabs as TabsPrimitive } from "radix-ui";
  * @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;
 /**
  * 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`.
+ * @param props - Radix list props, including `aria-label`, `loop` 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;
+declare function TabsList({ className, ref, onFocusCapture, ...props }: ComponentProps<typeof TabsPrimitive.List>): 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.
@@ -41,4 +33,4 @@ declare function TabsTrigger({ className, value, ...props }: ComponentProps<type
  * @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 };
+export { Tabs, TabsList, TabsTrigger, TabsContent };