beez-ui 2.5.0 → 2.6.1

package/dist/components/radio-group.js

@@ -1,98 +1,441 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-import * as React from "react";
+/**
+* Arc's RadioGroup (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) on Radix's radio group: the mark dips
+* on press, previews a faint dot while held, and the new dot springs in while the old one shrinks away. Items with a
+* `label` render Arc's option rows, and one highlight travels to the chosen row on the morph spring, so a change reads
+* as a single physical move; arrow keys take the same path. Bare items keep the plain mark for compositions that place
+* their own label.
+*/
+import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
-import { MotionSlot } from "../motion/motion-slot.js";
+import { animate, motion } from "motion/react";
+import { RADIO_GROUP_DOT_HIDDEN_SCALE, RADIO_GROUP_OPTION_ID_SUFFIX, RADIO_GROUP_READY_ATTRIBUTE } from "../constants/radio-group.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_SPRING_MORPH, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Selector of the option row that holds the checked radio. */
+const CHECKED_OPTION_SELECTOR = "[data-slot=\"radio-group-option\"]:has([data-slot=\"radio-group-item\"][data-state=\"checked\"])";
+/** Selector of every option row, observed so the highlight follows rows that resize. */
+const OPTION_SELECTOR = "[data-slot=\"radio-group-option\"]";
+/** The value chosen in the enclosing group, read by each item to spring its dot in or out. */
+const RadioGroupValueContext = createContext(undefined);
+/**
+* Sizes the highlight to the chosen row. A new choice glides on the morph spring; the first paint and resizes place it
+* at once, and a group without a chosen row hides it.
+* @param highlight - The travelling highlight element.
+* @param row - The checked option row, if any.
+* @param placedAt - Geometry the highlight was last placed at; updated in place.
+* @param shouldGlide - Whether this change should travel instead of jumping.
+*/
+function placeHighlight(highlight, row, placedAt, shouldGlide) {
+	const nextGeometry = row ? `${row.offsetLeft} ${row.offsetTop} ${row.offsetWidth} ${row.offsetHeight}` : "";
+	if (!highlight || nextGeometry === placedAt.current) return;
+	const wasVisible = placedAt.current !== "";
+	placedAt.current = nextGeometry;
+	if (!row) {
+		animate(highlight, { opacity: 0 }, { duration: 0 });
+		return;
+	}
+	const target = {
+		x: row.offsetLeft,
+		y: row.offsetTop,
+		width: row.offsetWidth,
+		height: row.offsetHeight,
+		opacity: 1
+	};
+	if (shouldGlide && wasVisible) {
+		animate(highlight, target, {
+			...ARC_SPRING_MORPH,
+			opacity: { duration: 0 }
+		});
+		return;
+	}
+	Object.assign(highlight.style, {
+		transform: `translateX(${target.x}px) translateY(${target.y}px)`,
+		width: `${target.width}px`,
+		height: `${target.height}px`,
+		opacity: "1"
+	});
+	animate(highlight, target, { duration: 0 });
+}
+/**
+* Hosts the radios, controlled or uncontrolled like Radix's radio group, and moves the highlight of option rows.
+* @param radioGroupProps - Every Radix radio group prop, including `ref`.
+* @returns The radio group.
+*/
 function RadioGroup(t0) {
-	const $ = _c(8);
+	const $ = _c(36);
+	let asChild;
+	let children;
 	let className;
+	let defaultValue;
+	let onValueChange;
 	let props;
+	let ref;
+	let value;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({className, children, value, defaultValue, onValueChange, ref, asChild, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
+		$[1] = asChild;
+		$[2] = children;
+		$[3] = className;
+		$[4] = defaultValue;
+		$[5] = onValueChange;
+		$[6] = props;
+		$[7] = ref;
+		$[8] = value;
 	} else {
-		className = $[1];
-		props = $[2];
+		asChild = $[1];
+		children = $[2];
+		className = $[3];
+		defaultValue = $[4];
+		onValueChange = $[5];
+		props = $[6];
+		ref = $[7];
+		value = $[8];
 	}
+	const reduceMotion = usePrefersReducedMotion();
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const selectedValue = value ?? uncontrolledValue;
+	const groupRef = useRef(null);
+	const highlightRef = useRef(null);
+	const shownValue = useRef(null);
+	const placedAt = useRef("");
 	let t1;
-	if ($[3] !== className) {
-		t1 = cn("grid w-full gap-2", className);
-		$[3] = className;
-		$[4] = t1;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => groupRef.current?.querySelector(CHECKED_OPTION_SELECTOR) ?? null;
+		$[9] = t1;
 	} else {
-		t1 = $[4];
+		t1 = $[9];
 	}
+	const findCheckedRow = t1;
 	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Root, {
+	let t3;
+	if ($[10] !== reduceMotion || $[11] !== selectedValue) {
+		t2 = () => {
+			const hasChanged = shownValue.current !== null && shownValue.current !== selectedValue;
+			placeHighlight(highlightRef.current, findCheckedRow(), placedAt, hasChanged && !reduceMotion);
+			shownValue.current = selectedValue;
+			if (highlightRef.current) {
+				groupRef.current?.setAttribute(RADIO_GROUP_READY_ATTRIBUTE, "");
+			}
+		};
+		t3 = [selectedValue, reduceMotion];
+		$[10] = reduceMotion;
+		$[11] = selectedValue;
+		$[12] = t2;
+		$[13] = t3;
+	} else {
+		t2 = $[12];
+		t3 = $[13];
+	}
+	useLayoutEffect(t2, t3);
+	let t4;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => {
+			const group = groupRef.current;
+			if (!group || typeof ResizeObserver === "undefined") {
+				return;
+			}
+			const observer = new ResizeObserver(() => placeHighlight(highlightRef.current, findCheckedRow(), placedAt, false));
+			observer.observe(group);
+			group.querySelectorAll(OPTION_SELECTOR).forEach((row) => observer.observe(row));
+			return () => observer.disconnect();
+		};
+		$[14] = t4;
+	} else {
+		t4 = $[14];
+	}
+	useEffect(t4);
+	let t5;
+	if ($[15] !== className) {
+		t5 = cn("relative grid w-full gap-2", className);
+		$[15] = className;
+		$[16] = t5;
+	} else {
+		t5 = $[16];
+	}
+	let t6;
+	if ($[17] !== ref) {
+		t6 = (node) => {
+			groupRef.current = node;
+			if (typeof ref === "function") {
+				return ref(node);
+			}
+			if (ref) {
+				ref.current = node;
+			}
+		};
+		$[17] = ref;
+		$[18] = t6;
+	} else {
+		t6 = $[18];
+	}
+	let t7;
+	if ($[19] !== onValueChange || $[20] !== value) {
+		t7 = (nextValue) => {
+			if (value === undefined) {
+				setUncontrolledValue(nextValue);
+			}
+			onValueChange?.(nextValue);
+		};
+		$[19] = onValueChange;
+		$[20] = value;
+		$[21] = t7;
+	} else {
+		t7 = $[21];
+	}
+	let t8;
+	if ($[22] !== asChild || $[23] !== children) {
+		t8 = asChild ? children : /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("span", {
+			ref: highlightRef,
+			"data-slot": "radio-group-highlight",
+			"aria-hidden": "true",
+			className: "pointer-events-none absolute top-0 left-0 z-1 box-border rounded-(--radius-control) border border-(--control-on) bg-[color-mix(in_oklab,var(--control-on)_5%,transparent)] opacity-0"
+		}), children] });
+		$[22] = asChild;
+		$[23] = children;
+		$[24] = t8;
+	} else {
+		t8 = $[24];
+	}
+	let t9;
+	if ($[25] !== asChild || $[26] !== props || $[27] !== selectedValue || $[28] !== t5 || $[29] !== t6 || $[30] !== t7 || $[31] !== t8) {
+		t9 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Root, {
 			"data-slot": "radio-group",
-			className: t1,
-			...props
+			className: t5,
+			...props,
+			asChild,
+			ref: t6,
+			value: selectedValue,
+			onValueChange: t7,
+			children: t8
 		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+		$[25] = asChild;
+		$[26] = props;
+		$[27] = selectedValue;
+		$[28] = t5;
+		$[29] = t6;
+		$[30] = t7;
+		$[31] = t8;
+		$[32] = t9;
+	} else {
+		t9 = $[32];
+	}
+	let t10;
+	if ($[33] !== selectedValue || $[34] !== t9) {
+		t10 = /* @__PURE__ */ _jsx(RadioGroupValueContext.Provider, {
+			value: selectedValue,
+			children: t9
+		});
+		$[33] = selectedValue;
+		$[34] = t9;
+		$[35] = t10;
 	} else {
-		t2 = $[7];
+		t10 = $[35];
 	}
-	return t2;
+	return t10;
 }
+/**
+* Arc's mark recipe. The bare mark keeps its 17px box and widens its hit area with a pseudo-element; the faint preview
+* dot and the press dip answer the mark itself, or its whole row when it has a label.
+*/
+const radioGroupItemClassName = "peer group/radio-group-item relative grid aspect-square size-[17px] shrink-0 cursor-pointer place-items-center rounded-full border border-border-strong bg-transparent p-0 [-webkit-tap-highlight-color:transparent] [transition:border-color_var(--duration-fast)_var(--ease-standard),background-color_var(--duration-fast)_var(--ease-standard),scale_var(--duration-spring)_var(--ease-spring)] before:size-[7px] before:rounded-full before:bg-foreground before:opacity-0 before:transition-opacity before:duration-(--duration-instant) before:ease-(--ease-standard) before:[grid-area:1/1] before:content-[''] after:absolute after:-inset-[13px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-(--control-on) data-[state=checked]:bg-(--control-on) aria-invalid:data-[state=unchecked]:border-danger hover-fine:data-[state=unchecked]:not-disabled:border-text-muted active:not-disabled:scale-[.88] active:not-disabled:[transition:border-color_var(--duration-fast)_var(--ease-standard),background-color_var(--duration-fast)_var(--ease-standard),scale_100ms_var(--ease-standard)] active:not-disabled:data-[state=unchecked]:before:opacity-[.22] group-active/radio-group-option:not-disabled:scale-[.88] group-active/radio-group-option:not-disabled:data-[state=unchecked]:before:opacity-[.22] motion-reduce:scale-100 motion-reduce:transition-none motion-reduce:before:transition-none";
+/** Arc's option row: answers a press with color only, while the mark is what moves. */
+const optionClassName = "group/radio-group-option relative flex cursor-pointer items-center gap-(--space-3) rounded-(--radius-control) border border-border p-(--space-3) [-webkit-tap-highlight-color:transparent] transition-[background-color,border-color] duration-(--duration-fast) ease-(--ease-standard) hover-fine:bg-surface-muted active:bg-surface-muted has-disabled:cursor-not-allowed has-disabled:opacity-50 [[data-slot=radio-group]:not([data-ready])_&]:has-data-[state=checked]:border-(--control-on) [[data-slot=radio-group]:not([data-ready])_&]:has-data-[state=checked]:bg-[color-mix(in_oklab,var(--control-on)_5%,transparent)] motion-reduce:transition-none";
+/**
+* One radio of the group: a bare mark, or Arc's option row when it receives a `label`.
+* @param radioGroupItemProps - Every Radix radio item prop, including `ref`, plus optional Arc `label` and `description`.
+* @returns The radio, wrapped in its option row when it has a label.
+*/
 function RadioGroupItem(t0) {
-	const $ = _c(9);
+	const $ = _c(43);
 	let className;
+	let description;
+	let id;
+	let label;
 	let props;
+	let value;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({className, label, description, id, value, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
-		$[2] = props;
+		$[2] = description;
+		$[3] = id;
+		$[4] = label;
+		$[5] = props;
+		$[6] = value;
 	} else {
 		className = $[1];
-		props = $[2];
+		description = $[2];
+		id = $[3];
+		label = $[4];
+		props = $[5];
+		value = $[6];
 	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input transition-[color,background-color,border-color,box-shadow] 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 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className);
-		$[3] = className;
-		$[4] = t1;
+	const generatedId = useId();
+	const rowId = id ?? generatedId;
+	const labelId = `${rowId}-${RADIO_GROUP_OPTION_ID_SUFFIX.label}`;
+	const descriptionId = `${rowId}-${RADIO_GROUP_OPTION_ID_SUFFIX.description}`;
+	const reduceMotion = usePrefersReducedMotion();
+	const isChecked = useContext(RadioGroupValueContext) === value;
+	const hasRow = Boolean(label);
+	const t1 = hasRow && "z-2 after:hidden";
+	let t2;
+	if ($[7] !== className || $[8] !== t1) {
+		t2 = cn(radioGroupItemClassName, t1, className);
+		$[7] = className;
+		$[8] = t1;
+		$[9] = t2;
 	} else {
-		t1 = $[4];
+		t2 = $[9];
 	}
-	let t2;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "selection",
-			children: /* @__PURE__ */ _jsx(RadioGroupPrimitive.Indicator, {
+	const t3 = hasRow ? props["aria-labelledby"] ?? labelId : props["aria-labelledby"];
+	let t4;
+	if ($[10] !== description || $[11] !== descriptionId || $[12] !== hasRow || $[13] !== props) {
+		t4 = [props["aria-describedby"], hasRow && description ? descriptionId : undefined].filter(Boolean).join(" ") || undefined;
+		$[10] = description;
+		$[11] = descriptionId;
+		$[12] = hasRow;
+		$[13] = props;
+		$[14] = t4;
+	} else {
+		t4 = $[14];
+	}
+	let t5;
+	if ($[15] !== isChecked) {
+		t5 = isChecked ? {
+			scale: 1,
+			opacity: 1
+		} : {
+			scale: RADIO_GROUP_DOT_HIDDEN_SCALE,
+			opacity: 0
+		};
+		$[15] = isChecked;
+		$[16] = t5;
+	} else {
+		t5 = $[16];
+	}
+	let t6;
+	if ($[17] !== isChecked || $[18] !== reduceMotion) {
+		t6 = reduceMotion ? { duration: 0 } : {
+			...ARC_SPRING_SNAPPY,
+			opacity: { duration: isChecked ? ARC_DURATION.fast : ARC_DURATION.instant }
+		};
+		$[17] = isChecked;
+		$[18] = reduceMotion;
+		$[19] = t6;
+	} else {
+		t6 = $[19];
+	}
+	let t7;
+	if ($[20] !== t5 || $[21] !== t6) {
+		t7 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Indicator, {
+			forceMount: true,
+			asChild: true,
+			children: /* @__PURE__ */ _jsx(motion.span, {
 				"data-slot": "radio-group-indicator",
-				className: "flex size-4 items-center justify-center",
-				children: /* @__PURE__ */ _jsx("span", { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" })
+				className: "pointer-events-none block size-[7px] rounded-full bg-(--control-glyph) [grid-area:1/1]",
+				initial: false,
+				animate: t5,
+				transition: t6
 			})
 		});
-		$[5] = t2;
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = t7;
 	} else {
-		t2 = $[5];
+		t7 = $[22];
 	}
-	let t3;
-	if ($[6] !== props || $[7] !== t1) {
-		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "toggle",
-			children: /* @__PURE__ */ _jsx(RadioGroupPrimitive.Item, {
-				"data-slot": "radio-group-item",
-				className: t1,
-				...props,
-				children: t2
-			})
+	let t8;
+	if ($[23] !== id || $[24] !== props || $[25] !== t2 || $[26] !== t3 || $[27] !== t4 || $[28] !== t7 || $[29] !== value) {
+		t8 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Item, {
+			"data-slot": "radio-group-item",
+			className: t2,
+			...props,
+			id,
+			value,
+			"aria-labelledby": t3,
+			"aria-describedby": t4,
+			children: t7
 		});
-		$[6] = props;
-		$[7] = t1;
-		$[8] = t3;
+		$[23] = id;
+		$[24] = props;
+		$[25] = t2;
+		$[26] = t3;
+		$[27] = t4;
+		$[28] = t7;
+		$[29] = value;
+		$[30] = t8;
 	} else {
-		t3 = $[8];
+		t8 = $[30];
+	}
+	const item = t8;
+	if (!hasRow) {
+		return item;
+	}
+	let t9;
+	if ($[31] !== label || $[32] !== labelId) {
+		t9 = /* @__PURE__ */ _jsx("span", {
+			id: labelId,
+			"data-slot": "radio-group-option-label",
+			className: "block text-sm font-medium text-text-secondary transition-colors duration-(--duration-standard) ease-(--ease-standard) group-has-data-[state=checked]/radio-group-option:text-foreground motion-reduce:transition-none",
+			children: label
+		});
+		$[31] = label;
+		$[32] = labelId;
+		$[33] = t9;
+	} else {
+		t9 = $[33];
+	}
+	let t10;
+	if ($[34] !== description || $[35] !== descriptionId) {
+		t10 = description ? /* @__PURE__ */ _jsx("span", {
+			id: descriptionId,
+			"data-slot": "radio-group-option-description",
+			className: "mt-0.5 block text-xs text-text-muted",
+			children: description
+		}) : null;
+		$[34] = description;
+		$[35] = descriptionId;
+		$[36] = t10;
+	} else {
+		t10 = $[36];
+	}
+	let t11;
+	if ($[37] !== t10 || $[38] !== t9) {
+		t11 = /* @__PURE__ */ _jsxs("span", {
+			className: "relative z-2 min-w-0",
+			children: [t9, t10]
+		});
+		$[37] = t10;
+		$[38] = t9;
+		$[39] = t11;
+	} else {
+		t11 = $[39];
+	}
+	let t12;
+	if ($[40] !== item || $[41] !== t11) {
+		t12 = /* @__PURE__ */ _jsxs("label", {
+			"data-slot": "radio-group-option",
+			className: optionClassName,
+			onClick: _temp,
+			children: [item, t11]
+		});
+		$[40] = item;
+		$[41] = t11;
+		$[42] = t12;
+	} else {
+		t12 = $[42];
+	}
+	return t12;
+}
+function _temp(event) {
+	const radio = event.currentTarget.querySelector("[data-slot=\"radio-group-item\"]");
+	if (radio && !radio.disabled && event.target !== radio) {
+		radio.focus({ preventScroll: true });
 	}
-	return t3;
 }
 export { RadioGroup, RadioGroupItem };

package/dist/components/select.d.ts

@@ -1,30 +1,41 @@
+/**
+ * Arc's Select (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) as beez-ui's composable Radix select:
+ * Arc's trigger, whose hover, press and open states answer in color only so the anchored list never shifts, and its
+ * raised list with option rows and an end check, on Arc's tokens. It keeps every subcomponent, prop and `data-slot`
+ * of the previous API and beez-ui's option entrance, check pop and chevron rotation.
+ */
 import * as React from "react";
 import { Select as SelectPrimitive } from "radix-ui";
 declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): React.JSX.Element;
 declare function SelectGroup({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
 declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
 /**
- * Renders compact default and small selection controls.
- * @param props - Primitive properties and optional consumer overrides.
+ * Renders Arc's selection control: `default` matches the height of `Input` and `Button`, `sm` their small size.
+ * Hover only answers on fine pointers, keyboard focus draws the shared outline, and `aria-invalid` turns the border
+ * to the danger color.
+ * @param props - Primitive properties, the `size` and optional consumer overrides.
  * @returns The styled primitive with its original interaction contract.
  */
 declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
     size?: "sm" | "default";
 }): React.JSX.Element;
 /**
- * Keeps selection options readable with a twelve-rem minimum width.
+ * Renders Arc's raised option list, at least twelve rem wide so options stay readable. With `position="popper"` it
+ * grows from the trigger edge, matches the trigger width, keeps 12px from the viewport edges and caps its height at
+ * 20rem.
  * @param props - Primitive properties and optional consumer overrides.
  * @returns The styled primitive with its original interaction contract.
  */
-declare function SelectContent({ className, children, position, align, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;
+declare function SelectContent({ className, children, position, align, collisionPadding, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;
 /**
- * Renders compact option group labels.
+ * Renders a muted option group label aligned with the option text.
  * @param props - Primitive properties and optional consumer overrides.
  * @returns The styled primitive with its original interaction contract.
  */
 declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): React.JSX.Element;
 /**
- * Renders compact options while retaining selection and disabled semantics.
+ * Renders Arc's option row: 36px tall, a muted fill when highlighted and the check of the chosen option at the end,
+ * while retaining selection and disabled semantics.
  * @param props - Primitive properties and optional consumer overrides.
  * @returns The styled primitive with its original interaction contract.
  */