@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/input/SpinButton.mjs

@@ -2,21 +2,24 @@
 import { cn as e } from "../../lib/cn.mjs";
 import { warnDeprecated as t, warnOnce as n } from "../../lib/dev.mjs";
 import { composeEventHandlers as r } from "../../lib/composeEventHandlers.mjs";
+import { spinButtonClassNames as i } from "../../lib/classNames.mjs";
+import { useEventCallback as a } from "../../hooks/useEventCallback.mjs";
 import { useControllable as ee } from "../../hooks/useControllable.mjs";
 import { useMergedRefs as te } from "../../hooks/useMergedRefs.mjs";
-import { useFieldControl as ne } from "../../hooks/useFieldControl.mjs";
-import { inputFocusWithin as i } from "../../lib/styles.mjs";
-import { AddIcon as re, SubtractIcon as ie } from "../../lib/icons.mjs";
-import { isInvalidLook as ae } from "./Input.mjs";
-import { useFormReset as oe } from "../../hooks/useFormReset.mjs";
-import { HiddenInput as se } from "../internal/HiddenInput.mjs";
-import * as a from "react";
-import { jsx as o, jsxs as ce } from "react/jsx-runtime";
+import { useFieldContext as ne, useFieldControl as re } from "../../hooks/useFieldControl.mjs";
+import { inputAppearanceClasses as ie, inputFocusWithin as ae, inputHeightClasses as oe, inputTextClasses as se } from "../../lib/styles.mjs";
+import { AddIcon as ce, SubtractIcon as le } from "../../lib/icons.mjs";
+import { useInputLook as ue } from "./inputLook.mjs";
+import { isInvalidLook as de } from "./Input.mjs";
+import { useFormReset as fe } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as pe } from "../internal/HiddenInput.mjs";
+import * as o from "react";
+import { jsx as s, jsxs as me } from "react/jsx-runtime";
 //#region src/components/input/SpinButton.tsx
-var s = /^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?$/i, le = /^[+-]?\.?$/;
-function c(e) {
+var c = /^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?$/i, he = /^[+-]?\.?$/;
+function ge(e) {
 	let t = e.trim();
-	if (!s.test(t)) return null;
+	if (!c.test(t)) return null;
 	let n = Number(t);
 	return Number.isFinite(n) ? n : null;
 }
@@ -28,130 +31,230 @@ function l(e) {
 function u(e, t) {
 	return Number(e.toFixed(Math.min(t, 20)));
 }
-var d = e("flex h-8 w-8 shrink-0 items-center justify-center border-input bg-transparent p-0 text-foreground", "not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed", "disabled:pointer-events-none"), f = ({ value: s, defaultValue: f, onValueChange: ue, onChange: p, min: m = -Infinity, max: h = Infinity, step: g = 1, largeStep: de, disabled: _, name: fe, form: v, labels: y, className: pe, hidden: me, ref: he, controlRef: b, id: x, "aria-label": S, "aria-labelledby": C, "aria-describedby": w, "aria-invalid": T, "aria-required": E, "aria-errormessage": D, "aria-details": O, "aria-valuetext": k, required: A, readOnly: j, placeholder: M, maxLength: N, spellCheck: P, autoComplete: F = "off", autoFocus: I, inputMode: L, enterKeyHint: R, tabIndex: ge, onFocus: _e, onBlur: ve, onKeyDown: ye, onKeyUp: be, ...xe }) => {
-	p !== void 0 && t("SpinButton", "onChange", "onValueChange");
-	let z = f ?? 0, [B, V] = ee(s, z, (e) => {
-		ue?.(e), p?.(e);
-	}), [H, U] = a.useState(null), [Se, Ce] = a.useState(B);
-	Object.is(Se, B) || (Ce(B), U(null));
-	let W = H === null ? null : c(H), G = W ?? B, we = H !== null && W === null && H.trim() !== "" && !le.test(H.trim()), Te = (e) => Math.min(h, Math.max(m, e)), K = !_ && !j, q = (e) => {
-		U(null), V(Te(e));
-	}, J = (e) => {
-		let t = Math.max(l(g), l(e), l(G));
-		q(u(G + e, t));
-	}, Y = () => {
-		H !== null && (W === null ? U(null) : q(W));
-	}, X = a.useRef(null), Ee = te(X, b), Z = ne({
-		id: x,
-		"aria-label": S,
-		"aria-labelledby": C,
-		"aria-describedby": w,
-		"aria-invalid": T,
-		"aria-required": E,
-		required: A
-	}, { nativeRequired: !0 }), Q = we ? !0 : Z["aria-invalid"], De = ae(!1, Q);
-	oe(X, () => {
-		U(null), V(z);
-	}, v), a.useEffect(() => {
+var d = 300, f = 1e3;
+function p(e) {
+	let t = Math.min(1, e / f);
+	return Math.round(d + -220 * t);
+}
+function _e(e) {
+	let t = d, n = setTimeout(function r() {
+		if (!e()) return;
+		let i = p(t);
+		t += i, n = setTimeout(r, i);
+	}, d);
+	return () => clearTimeout(n);
+}
+var m = {
+	small: {
+		button: "w-6",
+		input: "w-10",
+		glyph: 12
+	},
+	medium: {
+		button: "w-8",
+		input: "w-12",
+		glyph: 12
+	},
+	large: {
+		button: "w-10",
+		input: "w-14",
+		glyph: 16
+	}
+}, h = e("flex h-full shrink-0 items-center justify-center bg-transparent p-0 text-foreground", "not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed", "disabled:pointer-events-none", "touch-manipulation select-none [-webkit-touch-callout:none]"), g = (c) => {
+	let { allowEmpty: d = !1, value: f, defaultValue: p, onValueChange: g, onChange: ve, ...ye } = c, { min: _ = -Infinity, max: v = Infinity, step: y = 1, largeStep: be, precision: b, disabled: x, name: xe, form: S, labels: C, displayValue: w, size: Se, appearance: Ce, className: we, hidden: Te, ref: Ee, controlRef: De, id: Oe, "aria-label": ke, "aria-labelledby": Ae, "aria-describedby": je, "aria-invalid": Me, "aria-required": Ne, "aria-errormessage": Pe, "aria-details": Fe, "aria-valuetext": Ie, required: T, readOnly: E, placeholder: Le, maxLength: Re, spellCheck: ze, autoComplete: Be = "off", autoFocus: Ve, inputMode: He, enterKeyHint: Ue, tabIndex: We, onFocus: Ge, onBlur: Ke, onKeyDown: qe, onKeyUp: Je, ...Ye } = ye;
+	ve !== void 0 && t("SpinButton", "onChange", "onValueChange");
+	let D = p === void 0 ? d ? null : 0 : p, [O, k, A] = ee(f, D, (e) => {
+		g?.(e), e !== null && ve?.(e);
+	}), [j, M] = o.useState(null), [Xe, Ze] = o.useState(O);
+	Object.is(Xe, O) || (Ze(O), M(null));
+	let [N, P] = o.useState(!1), F = o.useRef(!1), I = j === null ? null : ge(j), L = I ?? O, Qe = j !== null && I === null && j.trim() !== "" && !he.test(j.trim()), R = (e) => Math.min(v, Math.max(_, e)), z = !x && !E, B = A && w !== void 0, V = b === void 0 || !Number.isFinite(b) ? void 0 : Math.min(20, Math.max(0, Math.trunc(b))), H = (e) => {
+		M(null);
+		let t = V === void 0 ? e : u(e, V);
+		k(R(t));
+	}, U = (e, t) => {
+		let n = e ?? 0, r = V ?? Math.max(l(y), l(t), l(n));
+		return R(u(n + t, r));
+	}, W = (e) => {
+		M(null), k(U(L, e));
+	}, G = o.useRef(null), K = o.useRef(!1), q = o.useCallback(() => {
+		G.current?.stop(), G.current = null;
+	}, []), J = (e) => {
+		e.pointerId === G.current?.pointerId && q();
+	}, $e = (e) => L !== null && (e === 1 ? L >= v : L <= _), et = a(() => {
+		let e = G.current;
+		if (!e) return !1;
+		if (!z || $e(e.direction)) return q(), !1;
+		K.current = !0;
+		let t = e.direction * y;
+		return e.stepped ? (M(null), k((e) => U(e, t))) : (e.stepped = !0, W(t)), !0;
+	}), tt = (e, t) => {
+		if (!e.isPrimary || (K.current = !1, e.button !== 0 || e.pointerType === "mouse" && e.ctrlKey || !z)) return;
+		let n = e.target instanceof Element ? e.target : e.currentTarget;
+		e.pointerType !== "mouse" && n.hasPointerCapture?.(e.pointerId) && n.releasePointerCapture(e.pointerId), q(), G.current = {
+			pointerId: e.pointerId,
+			direction: t,
+			stepped: !1,
+			stop: _e(et)
+		};
+	}, Y = (e, t) => {
+		if (e.detail !== 0 && K.current) {
+			K.current = !1;
+			return;
+		}
+		W(t * y);
+	};
+	o.useEffect(() => {
+		let e = G.current;
+		e && (!z || $e(e.direction)) && q();
+	}), o.useEffect(() => (window.addEventListener("blur", q), () => {
+		window.removeEventListener("blur", q), q();
+	}), [q]);
+	let nt = () => {
+		if (j !== null) {
+			if (d && j.trim() === "") {
+				M(null), k(null);
+				return;
+			}
+			I === null ? M(null) : H(I);
+		}
+	}, X = o.useRef(null), rt = te(X, De), it = ne(), at = T ?? it?.required ?? !1, ot = re({
+		id: Oe,
+		"aria-label": ke,
+		"aria-labelledby": Ae,
+		"aria-describedby": je,
+		"aria-invalid": Me,
+		"aria-required": Ne,
+		required: T
+	}, { nativeRequired: !0 }), st = Qe ? !0 : ot["aria-invalid"], ct = de(!1, st), { size: Z, appearance: Q } = ue(Se, Ce);
+	fe(X, () => {
+		M(null), k(D);
+	}, S), o.useEffect(() => {
 		let e = X.current;
 		e && (e.hasAttribute("aria-label") || e.hasAttribute("aria-labelledby") || (e.labels?.length ?? 0) > 0 || e.hasAttribute("title") || n("SpinButton:unnamed", "SpinButton: the spinbutton has no accessible name. Pass `aria-label` or `aria-labelledby`, use a <label htmlFor>, or render it inside a Field."));
-	});
-	let Oe = (e) => {
-		if (!K || e.altKey || e.ctrlKey || e.metaKey) return;
-		let t = de ?? u(g * 10, l(g));
+	}), o.useEffect(() => {
+		w !== void 0 && !A && n("SpinButton:displayValue-uncontrolled", "SpinButton: `displayValue` is ignored while the value is uncontrolled; pass `value` (and update it in `onValueChange`).");
+	}, [w, A]);
+	let lt = a((e) => {
+		let t = e.target;
+		F.current = t.value.length > 0 && t.selectionStart === 0 && t.selectionEnd === t.value.length, P(!0);
+	}), ut = () => {
+		nt(), P(!1);
+	};
+	o.useLayoutEffect(() => {
+		N && F.current && (F.current = !1, X.current?.select());
+	}, [N]);
+	let dt = (e) => {
+		if (!z || e.altKey || e.ctrlKey || e.metaKey) return;
+		let t = be ?? u(y * 10, l(y));
 		switch (e.key) {
 			case "ArrowUp":
 			case "ArrowDown":
 			case "PageUp":
 			case "PageDown": {
 				e.preventDefault();
-				let n = e.key === "ArrowUp" || e.key === "ArrowDown" ? g : t;
-				J(e.key === "ArrowUp" || e.key === "PageUp" ? n : -n);
+				let n = e.key === "ArrowUp" || e.key === "ArrowDown" ? y : t;
+				W(e.key === "ArrowUp" || e.key === "PageUp" ? n : -n);
 				return;
 			}
 			case "Home":
 			case "End": {
-				let t = e.key === "Home" ? m : h;
+				if (e.shiftKey) return;
+				let t = e.key === "Home" ? _ : v;
 				if (!Number.isFinite(t)) return;
-				e.preventDefault(), q(t);
+				e.preventDefault(), H(t);
 				return;
 			}
 			case "Enter":
-				Y();
+				nt();
 				return;
 			case "Escape":
-				H !== null && (e.preventDefault(), U(null));
+				j !== null && (e.preventDefault(), M(null));
 				return;
 		}
-	}, ke = m < 0 ? "text" : l(g) > 0 || l(m) > 0 ? "decimal" : "numeric", $ = (e) => e.preventDefault();
-	return /* @__PURE__ */ ce("div", {
-		ref: he,
-		className: e("relative inline-flex items-center rounded border border-input border-b-stroke-accessible bg-background", i, De && "border-destructive focus-within:border-b-destructive", _ && "cursor-not-allowed opacity-50", pe),
-		hidden: me,
-		...xe,
+	}, ft = _ < 0 ? "text" : l(y) > 0 || l(_) > 0 ? "decimal" : "numeric", $ = (e) => e.preventDefault();
+	return /* @__PURE__ */ me("div", {
+		ref: Ee,
+		"data-size": Z,
+		"data-appearance": Q,
+		className: e(i.root, "relative inline-flex items-center", oe[Z], se[Z], ie[Q], ae, ct && "border-destructive", x && "cursor-not-allowed opacity-50", we),
+		hidden: Te,
+		...Ye,
 		children: [
-			/* @__PURE__ */ o("button", {
+			/* @__PURE__ */ s("button", {
 				type: "button",
 				tabIndex: -1,
+				onPointerDown: (e) => tt(e, -1),
+				onPointerUp: J,
+				onPointerCancel: J,
+				onPointerLeave: J,
+				onClick: (e) => Y(e, -1),
 				onMouseDown: $,
-				onClick: () => J(-g),
-				disabled: !K || G <= m,
-				"aria-label": y?.decrement ?? "Decrement",
-				className: e(d, "border-e", !_ && "disabled:opacity-50"),
-				children: /* @__PURE__ */ o(ie, { size: 12 })
+				onContextMenu: (e) => e.preventDefault(),
+				disabled: !z || L !== null && L <= _,
+				"aria-label": C?.decrement ?? "Decrement",
+				className: e(i.decrementButton, h, m[Z].button, Q === "outline" && "border-e border-input", Q === "filled-darker" && "not-disabled:not-aria-disabled:hover:bg-subtle-pressed", !x && "disabled:opacity-50"),
+				children: /* @__PURE__ */ s(le, { size: m[Z].glyph })
 			}),
-			/* @__PURE__ */ o("input", {
-				ref: Ee,
+			/* @__PURE__ */ s("input", {
+				ref: rt,
 				type: "text",
 				role: "spinbutton",
-				inputMode: L ?? ke,
-				autoComplete: F,
-				autoFocus: I,
-				enterKeyHint: R,
-				placeholder: M,
-				maxLength: N,
-				spellCheck: P,
-				tabIndex: ge,
-				readOnly: j,
-				form: v,
-				...Z,
-				"aria-invalid": Q,
-				"aria-errormessage": D,
-				"aria-details": O,
-				"aria-valuenow": B,
-				"aria-valuemin": Number.isFinite(m) ? m : void 0,
-				"aria-valuemax": Number.isFinite(h) ? h : void 0,
-				"aria-valuetext": k,
-				value: H ?? String(B),
-				onChange: (e) => U(e.target.value),
-				onFocus: _e,
-				onBlur: r(ve, Y, { checkDefaultPrevented: !1 }),
-				onKeyDown: r(ye, Oe),
-				onKeyUp: be,
-				disabled: _,
-				className: "h-8 w-12 min-w-0 border-none bg-transparent text-center text-body-1 text-foreground focus:outline-hidden disabled:cursor-not-allowed [appearance:textfield]"
+				inputMode: He ?? ft,
+				autoComplete: Be,
+				autoFocus: Ve,
+				enterKeyHint: Ue,
+				placeholder: Le,
+				maxLength: Re,
+				spellCheck: ze,
+				tabIndex: We,
+				readOnly: E,
+				form: S,
+				...ot,
+				"aria-invalid": st,
+				"aria-errormessage": Pe,
+				"aria-details": Fe,
+				"aria-valuenow": O ?? void 0,
+				"aria-valuemin": Number.isFinite(_) ? _ : void 0,
+				"aria-valuemax": Number.isFinite(v) ? v : void 0,
+				"aria-valuetext": Ie ?? (B ? w : void 0),
+				value: j ?? (B && !(N && z) ? w : O === null ? "" : String(O)),
+				onChange: (e) => M(e.target.value),
+				onFocus: r(Ge, lt, { checkDefaultPrevented: !1 }),
+				onBlur: r(Ke, ut, { checkDefaultPrevented: !1 }),
+				onKeyDown: r(qe, dt),
+				onKeyUp: Je,
+				disabled: x,
+				className: e(i.input, "h-full min-w-0 flex-auto border-none bg-transparent text-center text-foreground focus:outline-hidden disabled:cursor-not-allowed [appearance:textfield]", m[Z].input, se[Z])
 			}),
-			/* @__PURE__ */ o("button", {
+			/* @__PURE__ */ s("button", {
 				type: "button",
 				tabIndex: -1,
+				onPointerDown: (e) => tt(e, 1),
+				onPointerUp: J,
+				onPointerCancel: J,
+				onPointerLeave: J,
+				onClick: (e) => Y(e, 1),
 				onMouseDown: $,
-				onClick: () => J(g),
-				disabled: !K || G >= h,
-				"aria-label": y?.increment ?? "Increment",
-				className: e(d, "border-s", !_ && "disabled:opacity-50"),
-				children: /* @__PURE__ */ o(re, { size: 12 })
+				onContextMenu: (e) => e.preventDefault(),
+				disabled: !z || L !== null && L >= v,
+				"aria-label": C?.increment ?? "Increment",
+				className: e(i.incrementButton, h, m[Z].button, Q === "outline" && "border-s border-input", Q === "filled-darker" && "not-disabled:not-aria-disabled:hover:bg-subtle-pressed", !x && "disabled:opacity-50"),
+				children: /* @__PURE__ */ s(ce, { size: m[Z].glyph })
 			}),
-			/* @__PURE__ */ o(se, {
-				name: fe,
-				form: v,
-				disabled: _,
-				value: String(B)
+			/* @__PURE__ */ s(pe, {
+				name: xe,
+				form: S,
+				disabled: x,
+				type: "text",
+				value: O === null ? "" : String(O),
+				required: d ? at : void 0,
+				onInvalid: () => X.current?.focus()
 			})
 		]
 	});
 };
-f.displayName = "SpinButton";
+g.displayName = "SpinButton";
 //#endregion
-export { f as SpinButton };
+export { g as SpinButton };
 
 //# sourceMappingURL=SpinButton.mjs.map

package/dist/components/input/SpinButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SpinButton.mjs","names":["React","NUMBER_TEXT","PARTIAL_NUMBER_TEXT","parseNumberText","trimmed","text","decimalsOf","n","mantissa","exponent","fraction","roundTo","decimals","stepButtonClass","cn","SpinButton","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","ariaValueText","rest","onChange","warnDeprecated","initialValue","defaultValue","value","setValue","useControllable","onValueChange","next","draft","setDraft","prevValue","setPrevValue","draftNumber","current","draftInvalid","clamp","max","min","interactive","disabled","readOnly","commit","stepBy","precision","step","delta","commitDraft","inputRef","mergedInputRef","useMergedRefs","controlRef","fieldProps","useFieldControl","ariaInvalidValue","invalidLook","isInvalidLook","useFormReset","form","input","warnOnce","handleKeyDown","big","largeStep","size","bound","defaultInputMode","keepFocus","inputFocusWithin","className","labels","SubtractIcon","inputMode","composeEventHandlers","onBlur","onKeyDown","AddIcon","HiddenInput"],"sources":["../../../src/components/input/SpinButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { AddIcon, SubtractIcon } from '../../lib/icons';\nimport { inputFocusWithin, inputInvalidWithin } from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { isInvalidLook } from './Input';\n\n/**\n * Props that SpinButton routes to its `<input role=\"spinbutton\">` (C-ROUTING): the id, the ARIA\n * naming/validation attributes, native text-input attributes and the focus/keyboard handlers.\n */\nexport type SpinButtonInputProps = Pick<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  | 'id'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'aria-invalid'\n  | 'aria-required'\n  | 'aria-errormessage'\n  | 'aria-details'\n  | 'aria-valuetext'\n  | 'required'\n  | 'readOnly'\n  | 'placeholder'\n  | 'maxLength'\n  | 'spellCheck'\n  | 'autoComplete'\n  | 'autoFocus'\n  | 'inputMode'\n  | 'enterKeyHint'\n  | 'tabIndex'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onKeyDown'\n  | 'onKeyUp'\n>;\n\n/**\n * Names of the SpinButton's step buttons, for localization. Each member is optional and falls back\n * to its English default.\n */\nexport interface SpinButtonLabels {\n  /** Name of the button that steps up.\n   * @default 'Increment'\n   */\n  increment?: string;\n  /** Name of the button that steps down.\n   * @default 'Decrement'\n   */\n  decrement?: string;\n}\n\n/** Properties for the SpinButton component. */\nexport interface SpinButtonProps\n  extends\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      'onChange' | 'defaultValue' | keyof SpinButtonInputProps\n    >,\n    SpinButtonInputProps {\n  /** Controlled numeric value. */\n  value?: number;\n  /** Initial value for uncontrolled usage (also what a form reset restores).\n   * @default 0\n   */\n  defaultValue?: number;\n  /**\n   * Called with the new value when it changes: a step (buttons, arrow keys, PageUp/PageDown,\n   * Home/End) or a typed value committed on blur or Enter. Not called while the user is typing,\n   * nor when the value stays the same.\n   */\n  onValueChange?: (value: number) => void;\n  /**\n   * Called with the new value when it changes.\n   * @deprecated Use `onValueChange`. (`onChange` is reserved for native change events.)\n   */\n  onChange?: (value: number) => void;\n  /** Minimum allowed value.\n   * @default -Infinity\n   */\n  min?: number;\n  /** Maximum allowed value.\n   * @default Infinity\n   */\n  max?: number;\n  /** Step of the increment/decrement buttons and of ArrowUp/ArrowDown.\n   * @default 1\n   */\n  step?: number;\n  /** Step of PageUp/PageDown.\n   * @default step * 10\n   */\n  largeStep?: number;\n  /** Whether the spin button is disabled and non-interactive. */\n  disabled?: boolean;\n  /** Form field name. With a name, the committed value is submitted with the form. */\n  name?: string;\n  /** Id of the form the spin button belongs to, when it is rendered outside that form. */\n  form?: string;\n  /**\n   * Names of the −/+ step buttons (not tab stops, but in the accessibility tree), for\n   * localization. Unset members keep their English defaults.\n   */\n  labels?: SpinButtonLabels;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n  /** Ref to the `<input role=\"spinbutton\">` (the focusable control). */\n  controlRef?: React.Ref<HTMLInputElement>;\n}\n\n/** Decimal numbers as a user types them: `12`, `-3`, `1.5`, `.5`, `2.`, `1e3`. */\nconst NUMBER_TEXT = /^[+-]?(\\d+\\.?\\d*|\\.\\d+)(e[+-]?\\d+)?$/i;\n/** Text on the way to a number (`-`, `.`, `-.`): not a value yet, but not an error either. */\nconst PARTIAL_NUMBER_TEXT = /^[+-]?\\.?$/;\n\nfunction parseNumberText(text: string): number | null {\n  const trimmed = text.trim();\n  if (!NUMBER_TEXT.test(trimmed)) return null;\n  const n = Number(trimmed);\n  return Number.isFinite(n) ? n : null;\n}\n\n/** Number of decimals of `n` as written by JavaScript (`0.1` → 1, `1e-7` → 7). */\nfunction decimalsOf(n: number): number {\n  if (!Number.isFinite(n)) return 0;\n  const [mantissa, exponent] = String(n).toLowerCase().split('e');\n  const fraction = mantissa.split('.')[1]?.length ?? 0;\n  return Math.max(0, fraction - (exponent ? Number(exponent) : 0));\n}\n\nfunction roundTo(n: number, decimals: number): number {\n  return Number(n.toFixed(Math.min(decimals, 20)));\n}\n\nconst stepButtonClass = cn(\n  // Padding and background set here (C-NATIVE): an app-wide `button` rule cannot fill them.\n  'flex h-8 w-8 shrink-0 items-center justify-center border-input bg-transparent p-0 text-foreground',\n  'not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed',\n  'disabled:pointer-events-none',\n);\n\n/**\n * A numeric input with decrement/increment buttons (APG spinbutton pattern).\n *\n * - **Keyboard** on the input: ArrowUp/ArrowDown step by `step`, PageUp/PageDown by `largeStep`\n *   (default ten steps), Home/End jump to `min`/`max` when they are finite. The −/+ buttons are\n *   not tab stops and never take focus, so focus stays on the spinbutton and screen readers\n *   announce the new value.\n * - **Typing** edits a draft: the value is parsed, clamped and committed on blur or Enter\n *   (Escape reverts). Text that is not a number is flagged with `aria-invalid` and reverted on\n *   blur. Steps (keys and buttons) start from the typed number, and the −/+ buttons are disabled\n *   when that number is at `min`/`max`. Steps are rounded to the precision of `step` and of the\n *   value, so `0.1 + 0.2` is `0.3`.\n * - **Routing**: `id`, ARIA, native input attributes and focus/keyboard handlers go to the\n *   `<input role=\"spinbutton\">`; `className`, `style`, `data-*`, other handlers and `ref` stay on\n *   the root (`controlRef` reaches the input). Inside a `Field` it picks up the label, hint, error\n *   and required state automatically. It has no built-in name: pass `aria-label`/`aria-labelledby`\n *   or use a label (development warning otherwise).\n * - **Forms**: with `name` the committed value is submitted; `required` makes the input natively\n *   required; a form reset restores `defaultValue`.\n * - The −/+ buttons are named \"Decrement\"/\"Increment\"; `labels` localizes the names.\n *\n * @example\n * <SpinButton aria-label=\"Quantity\" min={1} max={10} value={qty} onValueChange={setQty} />\n */\nexport const SpinButton = ({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onChange,\n  min = -Infinity,\n  max = Infinity,\n  step = 1,\n  largeStep,\n  disabled,\n  name,\n  form,\n  labels,\n  className,\n  hidden,\n  ref,\n  controlRef,\n  // Routed to the input (C-ROUTING)\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-errormessage': ariaErrorMessage,\n  'aria-details': ariaDetails,\n  'aria-valuetext': ariaValueText,\n  required,\n  readOnly,\n  placeholder,\n  maxLength,\n  spellCheck,\n  autoComplete = 'off',\n  autoFocus,\n  inputMode,\n  enterKeyHint,\n  tabIndex,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  ...rest\n}: SpinButtonProps) => {\n  if (onChange !== undefined) warnDeprecated('SpinButton', 'onChange', 'onValueChange');\n  const initialValue = defaultValue ?? 0;\n  const [value, setValue] = useControllable(valueProp, initialValue, (next: number) => {\n    onValueChange?.(next);\n    onChange?.(next);\n  });\n\n  // The text is a draft while the user types (null = show the value).\n  const [draft, setDraft] = React.useState<string | null>(null);\n  // A value that changes from outside replaces the draft (adjust state during render, C-HOOKS).\n  const [prevValue, setPrevValue] = React.useState(value);\n  if (!Object.is(prevValue, value)) {\n    setPrevValue(value);\n    setDraft(null);\n  }\n\n  const draftNumber = draft === null ? null : parseNumberText(draft);\n  // What stepping starts from: the typed draft when it is a number, else the value. The −/+\n  // buttons are enabled by it too, so they agree with ArrowUp/ArrowDown while the user types.\n  const current = draftNumber ?? value;\n  const draftInvalid =\n    draft !== null &&\n    draftNumber === null &&\n    draft.trim() !== '' &&\n    !PARTIAL_NUMBER_TEXT.test(draft.trim());\n\n  const clamp = (n: number) => Math.min(max, Math.max(min, n));\n  const interactive = !disabled && !readOnly;\n\n  const commit = (next: number) => {\n    setDraft(null);\n    setValue(clamp(next));\n  };\n\n  /** Steps from the typed draft when it is a number, else from the value. */\n  const stepBy = (delta: number) => {\n    const precision = Math.max(decimalsOf(step), decimalsOf(delta), decimalsOf(current));\n    commit(roundTo(current + delta, precision));\n  };\n\n  const commitDraft = () => {\n    if (draft === null) return;\n    if (draftNumber === null) setDraft(null);\n    else commit(draftNumber);\n  };\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedInputRef = useMergedRefs(inputRef, controlRef);\n\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      'aria-required': ariaRequired,\n      required,\n    },\n    { nativeRequired: true },\n  );\n  // Typed text that is not a number is invalid whatever the consumer says; otherwise the\n  // consumer's or the Field's `aria-invalid` is passed through as is (`grammar` included), and the\n  // error look follows the shared rule of the text controls.\n  const ariaInvalidValue = draftInvalid ? true : fieldProps['aria-invalid'];\n  const invalidLook = isInvalidLook(false, ariaInvalidValue);\n\n  useFormReset(\n    inputRef,\n    () => {\n      setDraft(null);\n      setValue(initialValue);\n    },\n    form,\n  );\n\n  // No built-in name any more (\"Value\" named every instance the same): report unnamed inputs.\n  React.useEffect(() => {\n    const input = inputRef.current;\n    if (!input) return;\n    const named =\n      input.hasAttribute('aria-label') ||\n      input.hasAttribute('aria-labelledby') ||\n      (input.labels?.length ?? 0) > 0 ||\n      input.hasAttribute('title');\n    if (!named) {\n      warnOnce(\n        'SpinButton:unnamed',\n        'SpinButton: the spinbutton has no accessible name. Pass `aria-label` or `aria-labelledby`, use a <label htmlFor>, or render it inside a Field.',\n      );\n    }\n  });\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    // Read-only: the keys keep their native caret behaviour and never change the value.\n    if (!interactive || e.altKey || e.ctrlKey || e.metaKey) return;\n    // Ten steps, rounded: step * 10 carries float error (0.07 * 10 = 0.7000000000000001) that\n    // stepBy would otherwise keep, since it rounds to the precision of the delta too.\n    const big = largeStep ?? roundTo(step * 10, decimalsOf(step));\n    switch (e.key) {\n      case 'ArrowUp':\n      case 'ArrowDown':\n      case 'PageUp':\n      case 'PageDown': {\n        e.preventDefault();\n        const size = e.key === 'ArrowUp' || e.key === 'ArrowDown' ? step : big;\n        stepBy(e.key === 'ArrowUp' || e.key === 'PageUp' ? size : -size);\n        return;\n      }\n      case 'Home':\n      case 'End': {\n        const bound = e.key === 'Home' ? min : max;\n        if (!Number.isFinite(bound)) return; // no bound: Home/End move the caret\n        e.preventDefault();\n        commit(bound);\n        return;\n      }\n      case 'Enter':\n        // Not prevented: Enter still submits the surrounding form, with the committed value.\n        commitDraft();\n        return;\n      case 'Escape':\n        if (draft !== null) {\n          e.preventDefault(); // enclosing layers (a Dialog) ignore this Escape\n          setDraft(null);\n        }\n        return;\n      default:\n    }\n  };\n\n  const defaultInputMode: React.HTMLAttributes<HTMLInputElement>['inputMode'] =\n    min < 0 ? 'text' : decimalsOf(step) > 0 || decimalsOf(min) > 0 ? 'decimal' : 'numeric';\n\n  // The step buttons never take focus: a pointer press leaves it where it is (on the input while\n  // editing), so a button that becomes disabled at a bound cannot drop focus to <body>.\n  const keepFocus = (e: React.MouseEvent) => e.preventDefault();\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'relative inline-flex items-center rounded border border-input border-b-stroke-accessible bg-background',\n        inputFocusWithin,\n        invalidLook && inputInvalidWithin,\n        disabled && 'cursor-not-allowed opacity-50',\n        className,\n      )}\n      hidden={hidden}\n      {...rest}\n    >\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        onMouseDown={keepFocus}\n        onClick={() => stepBy(-step)}\n        disabled={!interactive || current <= min}\n        aria-label={labels?.decrement ?? 'Decrement'}\n        className={cn(stepButtonClass, 'border-e', !disabled && 'disabled:opacity-50')}\n      >\n        <SubtractIcon size={12} />\n      </button>\n\n      <input\n        ref={mergedInputRef}\n        type=\"text\"\n        role=\"spinbutton\"\n        inputMode={inputMode ?? defaultInputMode}\n        autoComplete={autoComplete}\n        autoFocus={autoFocus}\n        enterKeyHint={enterKeyHint}\n        placeholder={placeholder}\n        maxLength={maxLength}\n        spellCheck={spellCheck}\n        tabIndex={tabIndex}\n        readOnly={readOnly}\n        form={form}\n        {...fieldProps}\n        aria-invalid={ariaInvalidValue}\n        aria-errormessage={ariaErrorMessage}\n        aria-details={ariaDetails}\n        aria-valuenow={value}\n        aria-valuemin={Number.isFinite(min) ? min : undefined}\n        aria-valuemax={Number.isFinite(max) ? max : undefined}\n        aria-valuetext={ariaValueText}\n        value={draft ?? String(value)}\n        onChange={(e) => setDraft(e.target.value)}\n        onFocus={onFocus}\n        onBlur={composeEventHandlers(onBlur, commitDraft, { checkDefaultPrevented: false })}\n        onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n        onKeyUp={onKeyUp}\n        disabled={disabled}\n        className=\"h-8 w-12 min-w-0 border-none bg-transparent text-center text-body-1 text-foreground focus:outline-hidden disabled:cursor-not-allowed [appearance:textfield]\"\n      />\n\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        onMouseDown={keepFocus}\n        onClick={() => stepBy(step)}\n        disabled={!interactive || current >= max}\n        aria-label={labels?.increment ?? 'Increment'}\n        className={cn(stepButtonClass, 'border-s', !disabled && 'disabled:opacity-50')}\n      >\n        <AddIcon size={12} />\n      </button>\n\n      <HiddenInput name={name} form={form} disabled={disabled} value={String(value)} />\n    </div>\n  );\n};\n\nSpinButton.displayName = 'SpinButton';\n"],"mappings":"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"}
+{"version":3,"file":"SpinButton.mjs","names":["React","NUMBER_TEXT","PARTIAL_NUMBER_TEXT","parseNumberText","trimmed","text","decimalsOf","n","mantissa","exponent","fraction","roundTo","decimals","SPIN_DELAY","SPIN_RAMP","spinDelay","elapsed","startSpin","timer","tick","step","delay","SPIN_SIZE","stepButtonClass","cn","SpinButton","valueProp","baseProps","props","sizeProp","appearanceProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","ariaValueText","rest","onChange","warnDeprecated","initialValue","defaultValue","allowEmpty","value","setValue","isControlled","useControllable","onValueChange","next","draft","setDraft","prevValue","setPrevValue","focused","setFocused","reselectRef","draftNumber","current","draftInvalid","clamp","max","min","interactive","disabled","readOnly","showsDisplay","displayValue","places","precision","commit","rounded","stepFrom","base","from","delta","stepBy","holdRef","repeatedRef","stopHold","endHold","event","atBound","direction","holdStep","useEventCallback","hold","prev","startHold","holder","clickStep","commitDraft","inputRef","mergedInputRef","useMergedRefs","controlRef","field","useFieldContext","isRequired","required","fieldProps","useFieldControl","ariaInvalidValue","invalidLook","isInvalidLook","useInputLook","useFormReset","form","input","warnOnce","handleFocus","handleBlur","handleKeyDown","big","largeStep","amount","bound","defaultInputMode","keepFocus","size","appearance","spinButtonClassNames","inputHeightClasses","inputTextClasses","inputAppearanceClasses","inputFocusWithin","className","labels","SubtractIcon","inputMode","composeEventHandlers","onFocus","onBlur","onKeyDown","AddIcon","HiddenInput"],"sources":["../../../src/components/input/SpinButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { spinButtonClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { AddIcon, SubtractIcon } from '../../lib/icons';\nimport {\n  inputAppearanceClasses,\n  inputFocusWithin,\n  inputHeightClasses,\n  inputInvalidWithin,\n  inputTextClasses,\n} from '../../lib/styles';\nimport type { CoreSize, InputAppearance } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { isInvalidLook } from './Input';\nimport { useInputLook } from './inputLook';\n\n/**\n * Props that SpinButton routes to its `<input role=\"spinbutton\">` (C-ROUTING): the id, the ARIA\n * naming/validation attributes, native text-input attributes and the focus/keyboard handlers.\n */\nexport type SpinButtonInputProps = Pick<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  | 'id'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'aria-invalid'\n  | 'aria-required'\n  | 'aria-errormessage'\n  | 'aria-details'\n  | 'aria-valuetext'\n  | 'required'\n  | 'readOnly'\n  | 'placeholder'\n  | 'maxLength'\n  | 'spellCheck'\n  | 'autoComplete'\n  | 'autoFocus'\n  | 'inputMode'\n  | 'enterKeyHint'\n  | 'tabIndex'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onKeyDown'\n  | 'onKeyUp'\n>;\n\n/**\n * Names of the SpinButton's step buttons, for localization. Each member is optional and falls back\n * to its English default.\n */\nexport interface SpinButtonLabels {\n  /** Name of the button that steps up.\n   * @default 'Increment'\n   */\n  increment?: string;\n  /** Name of the button that steps down.\n   * @default 'Decrement'\n   */\n  decrement?: string;\n}\n\n/**\n * Properties every SpinButton mode shares (every member of {@link SpinButtonProps} and\n * {@link SpinButtonAllowEmptyProps} except the value members, which differ between them).\n */\nexport interface SpinButtonBaseProps\n  extends\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      'onChange' | 'defaultValue' | keyof SpinButtonInputProps\n    >,\n    SpinButtonInputProps {\n  /** Minimum allowed value.\n   * @default -Infinity\n   */\n  min?: number;\n  /** Maximum allowed value.\n   * @default Infinity\n   */\n  max?: number;\n  /** Step of the increment/decrement buttons and of ArrowUp/ArrowDown.\n   * @default 1\n   */\n  step?: number;\n  /** Step of PageUp/PageDown.\n   * @default step * 10\n   */\n  largeStep?: number;\n  /**\n   * Decimals every committed value is rounded to, typed or stepped (0–20); the number is not\n   * padded (use `displayValue` for `1.00`). Default: steps round to the decimals of `step` and\n   * the value, typed values are kept as typed.\n   */\n  precision?: number;\n  /** Whether the spin button is disabled and non-interactive. */\n  disabled?: boolean;\n  /** Form field name. With a name, the committed value is submitted with the form. */\n  name?: string;\n  /** Id of the form the spin button belongs to, when it is rendered outside that form. */\n  form?: string;\n  /**\n   * Names of the −/+ step buttons (not tab stops, but in the accessibility tree), for\n   * localization. Unset members keep their English defaults.\n   */\n  labels?: SpinButtonLabels;\n  /**\n   * Text shown for the value while the field is not being edited, and its `aria-valuetext` (a\n   * `$1.00` for 1). While the field has focus and can be edited it shows the plain number, so\n   * typing edits the number. Applies only while `value` is controlled (update it with the\n   * value); Fluent's `displayValue`.\n   */\n  displayValue?: string;\n  /**\n   * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the\n   * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`.\n   *\n   * SpinButton is 24, 32 or 40px tall like every field; its buttons are square-ish, 24, 32 or\n   * 40px wide.\n   */\n  size?: CoreSize;\n  /**\n   * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),\n   * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a\n   * visible label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.\n   *\n   * The step buttons keep a 1px separator from the input only in `outline`; the other\n   * appearances have none.\n   */\n  appearance?: InputAppearance;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n  /** Ref to the `<input role=\"spinbutton\">` (the focusable control). */\n  controlRef?: React.Ref<HTMLInputElement>;\n}\n\n/** SpinButton props with a number value (the 0.7 shape). */\nexport interface SpinButtonProps extends SpinButtonBaseProps {\n  /**\n   * Allows an empty value (`null`). Takes the literal `true`: a `boolean` variable fits neither\n   * member of the props, so branch the JSX or spread `{ allowEmpty: true, value }`.\n   * @default false\n   */\n  allowEmpty?: false;\n  /** Controlled numeric value. */\n  value?: number;\n  /** Initial value for uncontrolled usage (also what a form reset restores).\n   * @default 0\n   */\n  defaultValue?: number;\n  /**\n   * Called with the new value when it changes: a step (buttons, arrow keys, PageUp/PageDown,\n   * Home/End) or a typed value committed on blur or Enter. Not called while the user is typing,\n   * nor when the value stays the same.\n   */\n  onValueChange?: (value: number) => void;\n  /**\n   * Called with the new value when it changes.\n   * @deprecated Use `onValueChange`. (`onChange` is reserved for native change events.)\n   */\n  onChange?: (value: number) => void;\n}\n\n/** SpinButton props with `allowEmpty`: the value may be `null` (an empty field). */\nexport interface SpinButtonAllowEmptyProps extends SpinButtonBaseProps {\n  /** The value may be `null`: clearing the text and committing it empties the field. */\n  allowEmpty: true;\n  /** Controlled value; `null` is an empty field. */\n  value?: number | null;\n  /** Initial value for uncontrolled usage (also what a form reset restores).\n   * @default null\n   */\n  defaultValue?: number | null;\n  /** Called with the new value when it changes, `null` when the field is emptied. */\n  onValueChange?: (value: number | null) => void;\n  /** Not available with `allowEmpty` (the deprecated alias of `onValueChange`). */\n  onChange?: never;\n}\n\n/** Decimal numbers as a user types them: `12`, `-3`, `1.5`, `.5`, `2.`, `1e3`. */\nconst NUMBER_TEXT = /^[+-]?(\\d+\\.?\\d*|\\.\\d+)(e[+-]?\\d+)?$/i;\n/** Text on the way to a number (`-`, `.`, `-.`): not a value yet, but not an error either. */\nconst PARTIAL_NUMBER_TEXT = /^[+-]?\\.?$/;\n\nfunction parseNumberText(text: string): number | null {\n  const trimmed = text.trim();\n  if (!NUMBER_TEXT.test(trimmed)) return null;\n  const n = Number(trimmed);\n  return Number.isFinite(n) ? n : null;\n}\n\n/** Number of decimals of `n` as written by JavaScript (`0.1` → 1, `1e-7` → 7). */\nfunction decimalsOf(n: number): number {\n  if (!Number.isFinite(n)) return 0;\n  const [mantissa, exponent] = String(n).toLowerCase().split('e');\n  const fraction = mantissa.split('.')[1]?.length ?? 0;\n  return Math.max(0, fraction - (exponent ? Number(exponent) : 0));\n}\n\nfunction roundTo(n: number, decimals: number): number {\n  return Number(n.toFixed(Math.min(decimals, 20)));\n}\n\n// Phase 4 D18, Fluent's timing (`DEFAULT_SPIN_DELAY_MS`, `MIN_SPIN_DELAY_MS`, `MAX_SPIN_TIME_MS`)\n// without its step on the press itself.\n/** Delay before a press becomes a hold, and the first delay between repeats (ms). */\nconst SPIN_DELAY = 300;\n/** The shortest delay between repeats, reached after SPIN_RAMP ms of holding. */\nconst SPIN_MIN_DELAY = 80;\n/** How long into a hold the delay between repeats takes to ease down to SPIN_MIN_DELAY (ms). */\nconst SPIN_RAMP = 1000;\n\n/** The delay after a step taken `elapsed` ms into a hold: 300ms easing linearly to 80ms. */\nfunction spinDelay(elapsed: number): number {\n  const t = Math.min(1, elapsed / SPIN_RAMP);\n  return Math.round(SPIN_DELAY + (SPIN_MIN_DELAY - SPIN_DELAY) * t);\n}\n\n/**\n * Runs the timers of a hold: calls `step` once SPIN_DELAY has passed, then again after each\n * `spinDelay` (steps at 300, 534, 717, 859, 970 and 1057ms, then every 80ms), until `step` returns\n * false or the returned function is called.\n */\nfunction startSpin(step: () => boolean): () => void {\n  let elapsed = SPIN_DELAY;\n  let timer = setTimeout(function tick() {\n    if (!step()) return;\n    const delay = spinDelay(elapsed);\n    elapsed += delay;\n    timer = setTimeout(tick, delay);\n  }, SPIN_DELAY);\n  return () => clearTimeout(timer);\n}\n\n/** Per-size widths of the step buttons and the input's flex basis, and the glyph size. */\nconst SPIN_SIZE: Readonly<Record<CoreSize, { button: string; input: string; glyph: number }>> = {\n  small: { button: 'w-6', input: 'w-10', glyph: 12 },\n  medium: { button: 'w-8', input: 'w-12', glyph: 12 },\n  large: { button: 'w-10', input: 'w-14', glyph: 16 },\n};\n\nconst stepButtonClass = cn(\n  // Padding and background set here (C-NATIVE): an app-wide `button` rule cannot fill them. The\n  // size and, in `outline`, the separator are added per render (SPIN_SIZE, D13).\n  'flex h-full shrink-0 items-center justify-center bg-transparent p-0 text-foreground',\n  'not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed',\n  'disabled:pointer-events-none',\n  // A finger holding a button (D18): no double-tap zoom, text selection or iOS callout.\n  'touch-manipulation select-none [-webkit-touch-callout:none]',\n);\n\n/**\n * A numeric input with decrement/increment buttons (APG spinbutton pattern).\n *\n * - **Keyboard** on the input: ArrowUp/ArrowDown step by `step`, PageUp/PageDown by `largeStep`\n *   (default ten steps), Home/End jump to `min`/`max` when they are finite (Shift+Home and\n *   Shift+End keep their native text-selection instead). The −/+ buttons are not tab stops and\n *   never take focus, so focus stays on the spinbutton and screen readers announce the new\n *   value.\n * - **Pointer** on the −/+ buttons (mouse, touch or pen): a short press steps once, on release\n *   (its click), never on the press alone, so a finger that starts a scroll on a button changes\n *   nothing. Holding a button repeats the step: the first after 300ms, then faster, every 80ms\n *   after about a second (Fluent's timing). A hold stops when the button is released, the\n *   pointer leaves it or the press turns into a scroll, at the bound, when the window loses\n *   focus, and when the spin button becomes disabled or read-only. Only the primary button of a\n *   primary pointer holds: a second finger, a secondary button or a Ctrl+press with a mouse (the\n *   secondary click on macOS) neither starts a hold nor ends one. A click without a press (a\n *   screen reader, `element.click()`) steps once. The buttons open no context menu (a long press\n *   on touch would), show no iOS callout, and allow no text selection or double-tap zoom.\n * - **Typing** edits a draft: the value is parsed, clamped and committed on blur or Enter\n *   (Escape reverts). Text that is not a number is flagged with `aria-invalid` and reverted on\n *   blur. Steps (keys and buttons) start from the typed number, and the −/+ buttons are disabled\n *   when that number is at `min`/`max`. Steps are rounded to the precision of `step` and of the\n *   value, so `0.1 + 0.2` is `0.3`; `precision` rounds every committed value, typed or stepped,\n *   to a fixed number of decimals instead, without padding it (pad with `displayValue`).\n * - **Routing**: `id`, ARIA, native input attributes and focus/keyboard handlers go to the\n *   `<input role=\"spinbutton\">`; `className`, `style`, `data-*`, other handlers and `ref` stay on\n *   the root (`controlRef` reaches the input). Inside a `Field` it picks up the label, hint, error\n *   and required state automatically. It has no built-in name: pass `aria-label`/`aria-labelledby`\n *   or use a label (development warning otherwise).\n * - **Forms**: with `name` the committed value is submitted; `required` makes the input natively\n *   required; a form reset restores `defaultValue`.\n * - **Empty values**: `allowEmpty` lets the value become `null` (an empty field). Clearing the\n *   text and committing it (blur or Enter) sets the value to `null`, uncontrolled too; stepping\n *   up or down from an empty value starts at 0 and clamps to the nearest bound. `required` (its\n *   own, or a required Field's) still blocks submitting an empty value: the check runs on the\n *   `HiddenInput` that carries the committed value, not on the shown text, so it keeps working\n *   even when the shown text is not empty.\n * - **Display text**: `displayValue` shows formatted text (`$1.00`) for the value while the field\n *   is not being edited, and as its `aria-valuetext`; while the field has focus and can be\n *   edited it shows the plain number instead, so typing still edits the number (a consumer\n *   `aria-valuetext` always wins). It applies only while `value` is controlled: an uncontrolled\n *   spin button ignores it and warns once in development.\n * - **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s\n *   `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own\n *   prop, then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as\n *   `data-size` and `data-appearance` on the root. SpinButton takes every size the other fields\n *   do, and unlike 0.7 its root is now exactly as tall as theirs, with its step buttons and\n *   input taking up that height; sizing the root wider widens the input instead of leaving\n *   empty space inside it. The step buttons keep a 1px separator from the input only in\n *   `outline`; the other appearances have none.\n * - The −/+ buttons are named \"Decrement\"/\"Increment\"; `labels` localizes the names.\n *\n * @example\n * <SpinButton aria-label=\"Quantity\" min={1} max={10} value={qty} onValueChange={setQty} />\n */\nexport const SpinButton = (props: SpinButtonProps | SpinButtonAllowEmptyProps): React.ReactNode => {\n  const {\n    allowEmpty = false,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onChange,\n    ...baseProps\n  } = props as SpinButtonBaseProps & {\n    allowEmpty?: boolean;\n    value?: number | null;\n    defaultValue?: number | null;\n    onValueChange?: (value: number | null) => void;\n    onChange?: (value: number) => void;\n  };\n  const {\n    min = -Infinity,\n    max = Infinity,\n    step = 1,\n    largeStep,\n    precision,\n    disabled,\n    name,\n    form,\n    labels,\n    displayValue,\n    size: sizeProp,\n    appearance: appearanceProp,\n    className,\n    hidden,\n    ref,\n    controlRef,\n    // Routed to the input (C-ROUTING)\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-errormessage': ariaErrorMessage,\n    'aria-details': ariaDetails,\n    'aria-valuetext': ariaValueText,\n    required,\n    readOnly,\n    placeholder,\n    maxLength,\n    spellCheck,\n    autoComplete = 'off',\n    autoFocus,\n    inputMode,\n    enterKeyHint,\n    tabIndex,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    ...rest\n  } = baseProps;\n\n  if (onChange !== undefined) warnDeprecated('SpinButton', 'onChange', 'onValueChange');\n  const initialValue = defaultValue !== undefined ? defaultValue : allowEmpty ? null : 0;\n  const [value, setValue, isControlled] = useControllable<number | null>(\n    valueProp,\n    initialValue,\n    (next) => {\n      onValueChange?.(next);\n      if (next !== null) onChange?.(next);\n    },\n  );\n\n  // The text is a draft while the user types (null = show the value).\n  const [draft, setDraft] = React.useState<string | null>(null);\n  // A value that changes from outside replaces the draft (adjust state during render, C-HOOKS).\n  const [prevValue, setPrevValue] = React.useState(value);\n  if (!Object.is(prevValue, value)) {\n    setPrevValue(value);\n    setDraft(null);\n  }\n  // Phase 4 D15: whether the input currently has focus, tracked from the composed onFocus/onBlur\n  // below (after the consumer's), for the displayValue formula.\n  const [focused, setFocused] = React.useState(false);\n  // Whether the whole text was selected right before the focus that `focused` now reflects, so\n  // the effect below can reselect the whole new text once the shown text switches.\n  const reselectRef = React.useRef(false);\n\n  const draftNumber = draft === null ? null : parseNumberText(draft);\n  // What stepping starts from: the typed draft when it is a number, else the value. The −/+\n  // buttons are enabled by it too, so they agree with ArrowUp/ArrowDown while the user types.\n  const current = draftNumber ?? value;\n  const draftInvalid =\n    draft !== null &&\n    draftNumber === null &&\n    draft.trim() !== '' &&\n    !PARTIAL_NUMBER_TEXT.test(draft.trim());\n\n  const clamp = (n: number) => Math.min(max, Math.max(min, n));\n  const interactive = !disabled && !readOnly;\n  // Phase 4 D15: displayValue applies only while the value is controlled; while the field has\n  // focus and can be edited, the plain number always shows instead (never displayValue).\n  const showsDisplay = isControlled && displayValue !== undefined;\n  // Phase 4 D19: a non-finite precision (NaN, Infinity) behaves as unset instead of reaching\n  // roundTo, since Math.trunc(NaN) is NaN and Math.min/Math.max would otherwise carry it\n  // through to `toFixed`, which treats a NaN argument as 0 (rounding to whole numbers).\n  const places =\n    precision === undefined || !Number.isFinite(precision)\n      ? undefined\n      : Math.min(20, Math.max(0, Math.trunc(precision)));\n\n  const commit = (next: number) => {\n    setDraft(null);\n    const rounded = places === undefined ? next : roundTo(next, places);\n    setValue(clamp(rounded));\n  };\n\n  /** The value one step of `delta` from `from` (0 while empty), rounded and clamped. */\n  const stepFrom = (from: number | null, delta: number) => {\n    const base = from ?? 0;\n    const decimals = places ?? Math.max(decimalsOf(step), decimalsOf(delta), decimalsOf(base));\n    return clamp(roundTo(base + delta, decimals));\n  };\n\n  /** Steps from the typed draft when it is a number, else from the value (0 while empty). */\n  const stepBy = (delta: number) => {\n    setDraft(null);\n    setValue(stepFrom(current, delta));\n  };\n\n  // Phase 4 D18: a press on a step button becomes a hold after SPIN_DELAY and then repeats\n  // (startSpin runs the timers); a shorter press steps on its click (WCAG 2.5.2).\n  const holdRef = React.useRef<{\n    /** The pointer holding the button: only its release, cancel or leave ends the hold. */\n    pointerId: number;\n    direction: 1 | -1;\n    /** Whether the hold has stepped yet. */\n    stepped: boolean;\n    stop: () => void;\n  } | null>(null);\n  // Whether the press that ends in the next pointer click has repeated (reset by every press of\n  // a primary pointer).\n  const repeatedRef = React.useRef(false);\n\n  const stopHold = React.useCallback(() => {\n    holdRef.current?.stop();\n    holdRef.current = null;\n  }, []);\n\n  /** Ends the hold on a pointerup, pointercancel or pointerleave of the pointer holding it. */\n  const endHold = (event: React.PointerEvent<HTMLButtonElement>) => {\n    if (event.pointerId === holdRef.current?.pointerId) stopHold();\n  };\n\n  /** Whether the value the user sees is at the bound a step in `direction` moves towards. */\n  const atBound = (direction: 1 | -1) =>\n    current !== null && (direction === 1 ? current >= max : current <= min);\n\n  // One step of the hold, with the latest render's values; returns false to end the hold.\n  const holdStep = useEventCallback((): boolean => {\n    const hold = holdRef.current;\n    if (!hold) return false;\n    if (!interactive || atBound(hold.direction)) {\n      stopHold();\n      return false;\n    }\n    repeatedRef.current = true;\n    const delta = hold.direction * step;\n    if (hold.stepped) {\n      // Later steps start from what useControllable's updater gets, never from this render's\n      // closure: a value set earlier in the same task (several steps can run before React\n      // renders), else the rendered one, so a controlled parent that ignored a step is stepped\n      // from its own value again.\n      setDraft(null);\n      setValue((prev) => stepFrom(prev, delta));\n    } else {\n      // The first step starts where a click would: from the typed number, else the value.\n      hold.stepped = true;\n      stepBy(delta);\n    }\n    return true;\n  });\n\n  const startHold = (event: React.PointerEvent<HTMLButtonElement>, direction: 1 | -1) => {\n    // Only a primary pointer presses a step button: a second finger (which gets no click) neither\n    // starts a hold nor resets the flag of the press that holds one.\n    if (!event.isPrimary) return;\n    // Every press resets the flag, so a hold that ended without a click (at a bound, or a touch\n    // long press) cannot swallow the click of a later press.\n    repeatedRef.current = false;\n    // A hold needs the primary button: not a secondary one, nor a Ctrl+press with a mouse (the\n    // secondary click on macOS).\n    if (event.button !== 0 || (event.pointerType === 'mouse' && event.ctrlKey) || !interactive) {\n      return;\n    }\n    // Touch and pen capture the pointer implicitly on the element the press landed on (the glyph\n    // when the finger lands on it); release it there, so pointerleave fires when the finger slides\n    // off the button.\n    const holder = event.target instanceof Element ? event.target : event.currentTarget;\n    if (event.pointerType !== 'mouse' && holder.hasPointerCapture?.(event.pointerId)) {\n      holder.releasePointerCapture(event.pointerId);\n    }\n    stopHold();\n    holdRef.current = {\n      pointerId: event.pointerId,\n      direction,\n      stepped: false,\n      stop: startSpin(holdStep),\n    };\n  };\n\n  const clickStep = (event: React.MouseEvent<HTMLButtonElement>, direction: 1 | -1) => {\n    // A click without a press (detail 0: a screen reader, element.click()) steps once; a pointer\n    // click steps unless its press already repeated.\n    if (event.detail !== 0 && repeatedRef.current) {\n      repeatedRef.current = false;\n      return;\n    }\n    stepBy(direction * step);\n  };\n\n  // A hold stops once the control cannot step its way any more: disabled, read-only, or at the\n  // bound it steps towards (where its button is disabled).\n  React.useEffect(() => {\n    const hold = holdRef.current;\n    if (hold && (!interactive || atBound(hold.direction))) stopHold();\n  });\n  // It also stops when the window loses focus (a release outside it never reaches the button),\n  // and on unmount.\n  React.useEffect(() => {\n    window.addEventListener('blur', stopHold);\n    return () => {\n      window.removeEventListener('blur', stopHold);\n      stopHold();\n    };\n  }, [stopHold]);\n\n  const commitDraft = () => {\n    if (draft === null) return;\n    if (allowEmpty && draft.trim() === '') {\n      setDraft(null);\n      setValue(null);\n      return;\n    }\n    if (draftNumber === null) setDraft(null);\n    else commit(draftNumber);\n  };\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedInputRef = useMergedRefs(inputRef, controlRef);\n\n  const field = useFieldContext();\n  const isRequired = required ?? field?.required ?? false;\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      'aria-required': ariaRequired,\n      required,\n    },\n    { nativeRequired: true },\n  );\n  // Typed text that is not a number is invalid whatever the consumer says; otherwise the\n  // consumer's or the Field's `aria-invalid` is passed through as is (`grammar` included), and the\n  // error look follows the shared rule of the text controls.\n  const ariaInvalidValue = draftInvalid ? true : fieldProps['aria-invalid'];\n  const invalidLook = isInvalidLook(false, ariaInvalidValue);\n  const { size, appearance } = useInputLook(sizeProp, appearanceProp);\n\n  useFormReset(\n    inputRef,\n    () => {\n      setDraft(null);\n      setValue(initialValue);\n    },\n    form,\n  );\n\n  // No built-in name any more (\"Value\" named every instance the same): report unnamed inputs.\n  React.useEffect(() => {\n    const input = inputRef.current;\n    if (!input) return;\n    const named =\n      input.hasAttribute('aria-label') ||\n      input.hasAttribute('aria-labelledby') ||\n      (input.labels?.length ?? 0) > 0 ||\n      input.hasAttribute('title');\n    if (!named) {\n      warnOnce(\n        'SpinButton:unnamed',\n        'SpinButton: the spinbutton has no accessible name. Pass `aria-label` or `aria-labelledby`, use a <label htmlFor>, or render it inside a Field.',\n      );\n    }\n  });\n\n  // Phase 4 D15: an uncontrolled SpinButton ignores displayValue (it would make the shown text\n  // lie as soon as the value changes without a matching prop update).\n  React.useEffect(() => {\n    if (displayValue !== undefined && !isControlled) {\n      warnOnce(\n        'SpinButton:displayValue-uncontrolled',\n        'SpinButton: `displayValue` is ignored while the value is uncontrolled; pass `value` (and update it in `onValueChange`).',\n      );\n    }\n  }, [displayValue, isControlled]);\n\n  // A stable callback, so composing it with the consumer's onFocus reads no ref during render.\n  const handleFocus = useEventCallback((e: React.FocusEvent<HTMLInputElement>) => {\n    const input = e.target;\n    reselectRef.current =\n      input.value.length > 0 &&\n      input.selectionStart === 0 &&\n      input.selectionEnd === input.value.length;\n    setFocused(true);\n  });\n\n  const handleBlur = () => {\n    commitDraft();\n    setFocused(false);\n  };\n\n  // Reselects the whole text once the shown text switches (blur shows displayValue, and a\n  // programmatic focus that starts the field's editing mode shows the plain number) after a\n  // focus that started with everything selected (Tab, or a consumer onFocus that calls\n  // select()), so typing right after still replaces the whole value.\n  React.useLayoutEffect(() => {\n    if (!focused || !reselectRef.current) return;\n    reselectRef.current = false;\n    inputRef.current?.select();\n  }, [focused]);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    // Read-only: the keys keep their native caret behaviour and never change the value.\n    if (!interactive || e.altKey || e.ctrlKey || e.metaKey) return;\n    // Ten steps, rounded: step * 10 carries float error (0.07 * 10 = 0.7000000000000001) that\n    // stepBy would otherwise keep, since it rounds to the precision of the delta too.\n    const big = largeStep ?? roundTo(step * 10, decimalsOf(step));\n    switch (e.key) {\n      case 'ArrowUp':\n      case 'ArrowDown':\n      case 'PageUp':\n      case 'PageDown': {\n        e.preventDefault();\n        const amount = e.key === 'ArrowUp' || e.key === 'ArrowDown' ? step : big;\n        stepBy(e.key === 'ArrowUp' || e.key === 'PageUp' ? amount : -amount);\n        return;\n      }\n      case 'Home':\n      case 'End': {\n        if (e.shiftKey) return; // Shift+Home/End select text (Fluent)\n        const bound = e.key === 'Home' ? min : max;\n        if (!Number.isFinite(bound)) return; // no bound: Home/End move the caret\n        e.preventDefault();\n        commit(bound);\n        return;\n      }\n      case 'Enter':\n        // Not prevented: Enter still submits the surrounding form, with the committed value.\n        commitDraft();\n        return;\n      case 'Escape':\n        if (draft !== null) {\n          e.preventDefault(); // enclosing layers (a Dialog) ignore this Escape\n          setDraft(null);\n        }\n        return;\n      default:\n    }\n  };\n\n  const defaultInputMode: React.HTMLAttributes<HTMLInputElement>['inputMode'] =\n    min < 0 ? 'text' : decimalsOf(step) > 0 || decimalsOf(min) > 0 ? 'decimal' : 'numeric';\n\n  // The step buttons never take focus: a pointer press leaves it where it is (on the input while\n  // editing), so a button that becomes disabled at a bound cannot drop focus to <body>.\n  const keepFocus = (e: React.MouseEvent) => e.preventDefault();\n\n  return (\n    <div\n      ref={ref}\n      data-size={size}\n      data-appearance={appearance}\n      className={cn(\n        spinButtonClassNames.root,\n        'relative inline-flex items-center',\n        inputHeightClasses[size],\n        inputTextClasses[size],\n        inputAppearanceClasses[appearance],\n        inputFocusWithin,\n        invalidLook && inputInvalidWithin,\n        disabled && 'cursor-not-allowed opacity-50',\n        className,\n      )}\n      hidden={hidden}\n      {...rest}\n    >\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        onPointerDown={(event) => startHold(event, -1)}\n        onPointerUp={endHold}\n        onPointerCancel={endHold}\n        onPointerLeave={endHold}\n        onClick={(event) => clickStep(event, -1)}\n        onMouseDown={keepFocus}\n        onContextMenu={(event) => event.preventDefault()}\n        disabled={!interactive || (current !== null && current <= min)}\n        aria-label={labels?.decrement ?? 'Decrement'}\n        className={cn(\n          spinButtonClassNames.decrementButton,\n          stepButtonClass,\n          SPIN_SIZE[size].button,\n          appearance === 'outline' && 'border-e border-input',\n          appearance === 'filled-darker' &&\n            'not-disabled:not-aria-disabled:hover:bg-subtle-pressed',\n          !disabled && 'disabled:opacity-50',\n        )}\n      >\n        <SubtractIcon size={SPIN_SIZE[size].glyph} />\n      </button>\n\n      <input\n        ref={mergedInputRef}\n        type=\"text\"\n        role=\"spinbutton\"\n        inputMode={inputMode ?? defaultInputMode}\n        autoComplete={autoComplete}\n        autoFocus={autoFocus}\n        enterKeyHint={enterKeyHint}\n        placeholder={placeholder}\n        maxLength={maxLength}\n        spellCheck={spellCheck}\n        tabIndex={tabIndex}\n        readOnly={readOnly}\n        form={form}\n        {...fieldProps}\n        aria-invalid={ariaInvalidValue}\n        aria-errormessage={ariaErrorMessage}\n        aria-details={ariaDetails}\n        aria-valuenow={value ?? undefined}\n        aria-valuemin={Number.isFinite(min) ? min : undefined}\n        aria-valuemax={Number.isFinite(max) ? max : undefined}\n        aria-valuetext={ariaValueText ?? (showsDisplay ? displayValue : undefined)}\n        value={\n          draft ??\n          (showsDisplay && !(focused && interactive)\n            ? displayValue\n            : value === null\n              ? ''\n              : String(value))\n        }\n        onChange={(e) => setDraft(e.target.value)}\n        onFocus={composeEventHandlers(onFocus, handleFocus, { checkDefaultPrevented: false })}\n        onBlur={composeEventHandlers(onBlur, handleBlur, { checkDefaultPrevented: false })}\n        onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n        onKeyUp={onKeyUp}\n        disabled={disabled}\n        className={cn(\n          spinButtonClassNames.input,\n          'h-full min-w-0 flex-auto border-none bg-transparent text-center text-foreground focus:outline-hidden disabled:cursor-not-allowed [appearance:textfield]',\n          SPIN_SIZE[size].input,\n          inputTextClasses[size],\n        )}\n      />\n\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        onPointerDown={(event) => startHold(event, 1)}\n        onPointerUp={endHold}\n        onPointerCancel={endHold}\n        onPointerLeave={endHold}\n        onClick={(event) => clickStep(event, 1)}\n        onMouseDown={keepFocus}\n        onContextMenu={(event) => event.preventDefault()}\n        disabled={!interactive || (current !== null && current >= max)}\n        aria-label={labels?.increment ?? 'Increment'}\n        className={cn(\n          spinButtonClassNames.incrementButton,\n          stepButtonClass,\n          SPIN_SIZE[size].button,\n          appearance === 'outline' && 'border-s border-input',\n          appearance === 'filled-darker' &&\n            'not-disabled:not-aria-disabled:hover:bg-subtle-pressed',\n          !disabled && 'disabled:opacity-50',\n        )}\n      >\n        <AddIcon size={SPIN_SIZE[size].glyph} />\n      </button>\n\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        type=\"text\"\n        value={value === null ? '' : String(value)}\n        required={allowEmpty ? isRequired : undefined}\n        onInvalid={() => inputRef.current?.focus()}\n      />\n    </div>\n  );\n};\n\nSpinButton.displayName = 'SpinButton';\n"],"mappings":"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"}

package/dist/components/input/SwatchPicker.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../hooks/useControllable.cjs"),a=require("../../hooks/useRovingTabIndex.cjs"),o=require("../../hooks/useMergedRefs.cjs"),s=require("../../hooks/useFieldControl.cjs"),c=require("../../lib/styles.cjs"),l=require("../../lib/icons.cjs"),u=require("../../hooks/useFormReset.cjs"),d=require("../internal/HiddenInput.cjs"),f=require("./colorUtils.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h={small:`w-6 h-6`,medium:`w-8 h-8`,large:`w-10 h-10`},g={small:12,medium:16,large:20},_={circular:`rounded-full`,square:`rounded-none`,rounded:`rounded`};function v({color:e,size:t}){let{glyph:n,halo:r}=f.getCheckColors(e);return(0,m.jsxs)(`span`,{"aria-hidden":`true`,className:`pointer-events-none grid`,children:[(0,m.jsx)(l.CheckIcon,{size:t,strokeWidth:4,className:`col-start-1 row-start-1`,style:{color:r}}),(0,m.jsx)(l.CheckIcon,{size:t,strokeWidth:2,className:`col-start-1 row-start-1`,style:{color:n}})]})}var y=({items:e,value:l,defaultValue:f,onValueChange:y,onChange:b,size:x=`medium`,shape:S=`circular`,name:C,required:w,form:T,className:E,id:D,"aria-label":O,"aria-labelledby":k,"aria-describedby":A,"aria-invalid":j,"aria-required":M,onKeyDown:N,onFocus:P,ref:F,...I})=>{b!==void 0&&n.warnDeprecated(`SwatchPicker`,`onChange`,`onValueChange`);let L=f??``,[R,z]=i.useControllable(l,L,e=>{y?.(e),b?.(e)}),{containerProps:B,getTabIndex:V}=a.useRovingTabIndex({activeValue:R||null,orientation:`both`,onFocusMove:e=>z(e)}),H=p.useRef(null),U=o.useMergedRefs(F,B.ref,H),W=s.useFieldContext(),G=s.useFieldControl({id:D,"aria-label":O,"aria-labelledby":k,"aria-describedby":A,"aria-invalid":j,"aria-required":M??w},{labelable:!1}),K=w??W?.required??!1,q=G[`aria-label`]===void 0&&G[`aria-labelledby`]===void 0,J=e.find(e=>!e.label)?.value;p.useEffect(()=>{q&&n.warnOnce(`SwatchPicker:unnamed`,"SwatchPicker: the radiogroup has no accessible name. Pass `aria-label` or `aria-labelledby`, or render it inside a Field.")},[q]),p.useEffect(()=>{J!==void 0&&n.warnOnce(`SwatchPicker:item-label`,`SwatchPicker: swatch "${J}" has no \`label\`, so it is announced by its color value. Give every item a \`label\`.`)},[J]),u.useFormReset(H,()=>z(L),T);let Y=()=>{H.current?.querySelector(`[data-roving-value][tabindex="0"]`)?.focus()};return(0,m.jsxs)(`div`,{role:`radiogroup`,...G,className:t.cn(`relative flex flex-wrap gap-2`,E),...I,ref:U,"data-roving-container":``,onKeyDown:r.composeEventHandlers(N,B.onKeyDown),onFocus:r.composeEventHandlers(P,B.onFocus,{checkDefaultPrevented:!1}),children:[e.map(e=>{let n=R===e.value;return(0,m.jsx)(`button`,{type:`button`,role:`radio`,"aria-checked":n,"aria-label":e.label||e.color,"data-roving-value":e.value,"data-selected":n?``:void 0,tabIndex:V(e.value),onClick:()=>z(e.value),className:t.cn(h[x],_[S],`relative flex shrink-0 items-center justify-center border-2 border-transparent p-0`,c.motionSafeTransition,`forced-colors:forced-color-adjust-none`,c.forcedColors.border,c.focusRing,`focus-visible:outline-offset-4`,n?`ring-2 ring-foreground ring-offset-2 ring-offset-background`:`hover:border-stroke-hover`),style:{backgroundColor:e.color},children:n&&(0,m.jsx)(v,{color:e.color,size:g[x]})},e.value)}),(0,m.jsx)(d.HiddenInput,{type:`radio`,name:C,form:T,value:R,required:K,onInvalid:Y})]})};y.displayName=`SwatchPicker`,exports.SwatchPicker=y;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../hooks/useControllable.cjs"),o=require("../../hooks/useRovingTabIndex.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/useFieldControl.cjs"),l=require("../../lib/styles.cjs"),u=require("../../lib/icons.cjs"),d=require("../../hooks/useFormReset.cjs"),f=require("../internal/HiddenInput.cjs"),p=require("./colorUtils.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g={small:`w-6 h-6`,medium:`w-8 h-8`,large:`w-10 h-10`},_={small:12,medium:16,large:20},v={circular:`rounded-full`,square:`rounded-none`,rounded:`rounded`};function y({color:e,size:t}){let{glyph:n,halo:r}=p.getCheckColors(e);return(0,h.jsxs)(`span`,{"aria-hidden":`true`,className:`pointer-events-none grid`,children:[(0,h.jsx)(u.CheckIcon,{size:t,strokeWidth:4,className:`col-start-1 row-start-1`,style:{color:r}}),(0,h.jsx)(u.CheckIcon,{size:t,strokeWidth:2,className:`col-start-1 row-start-1`,style:{color:n}})]})}var b=({items:e,value:u,defaultValue:p,onValueChange:b,onChange:x,size:S=`medium`,shape:C=`circular`,name:w,required:T,form:E,className:D,id:O,"aria-label":k,"aria-labelledby":A,"aria-describedby":j,"aria-invalid":M,"aria-required":N,onKeyDown:P,onFocus:F,ref:I,...L})=>{x!==void 0&&n.warnDeprecated(`SwatchPicker`,`onChange`,`onValueChange`);let R=p??``,[z,B]=a.useControllable(u,R,e=>{b?.(e),x?.(e)}),{containerProps:V,getTabIndex:H}=o.useRovingTabIndex({activeValue:z||null,orientation:`both`,onFocusMove:e=>B(e)}),U=m.useRef(null),W=s.useMergedRefs(I,V.ref,U),G=c.useFieldContext(),K=c.useFieldControl({id:O,"aria-label":k,"aria-labelledby":A,"aria-describedby":j,"aria-invalid":M,"aria-required":N??T},{labelable:!1}),q=T??G?.required??!1,J=K[`aria-label`]===void 0&&K[`aria-labelledby`]===void 0,Y=e.find(e=>!e.label)?.value;m.useEffect(()=>{J&&n.warnOnce(`SwatchPicker:unnamed`,"SwatchPicker: the radiogroup has no accessible name. Pass `aria-label` or `aria-labelledby`, or render it inside a Field.")},[J]),m.useEffect(()=>{Y!==void 0&&n.warnOnce(`SwatchPicker:item-label`,`SwatchPicker: swatch "${Y}" has no \`label\`, so it is announced by its color value. Give every item a \`label\`.`)},[Y]),d.useFormReset(U,()=>B(R),E);let X=()=>{U.current?.querySelector(`[data-roving-value][tabindex="0"]`)?.focus()};return(0,h.jsxs)(`div`,{role:`radiogroup`,...K,className:t.cn(i.swatchPickerClassNames.root,`relative flex flex-wrap gap-2`,D),...L,ref:W,"data-roving-container":``,onKeyDown:r.composeEventHandlers(P,V.onKeyDown),onFocus:r.composeEventHandlers(F,V.onFocus,{checkDefaultPrevented:!1}),children:[e.map(e=>{let n=z===e.value;return(0,h.jsx)(`button`,{type:`button`,role:`radio`,"aria-checked":n,"aria-label":e.label||e.color,"data-roving-value":e.value,"data-selected":n?``:void 0,tabIndex:H(e.value),onClick:()=>B(e.value),className:t.cn(i.swatchPickerClassNames.swatch,g[S],v[C],`relative flex shrink-0 items-center justify-center border-2 border-transparent p-0`,l.motionSafeTransition,`forced-colors:forced-color-adjust-none`,l.forcedColors.border,l.focusRing,`focus-visible:outline-offset-4`,n?`ring-2 ring-foreground ring-offset-2 ring-offset-background`:`hover:border-stroke-hover`),style:{backgroundColor:e.color},children:n&&(0,h.jsx)(y,{color:e.color,size:_[S]})},e.value)}),(0,h.jsx)(f.HiddenInput,{type:`radio`,name:w,form:E,value:z,required:q,onInvalid:X})]})};b.displayName=`SwatchPicker`,exports.SwatchPicker=b;
 //# sourceMappingURL=SwatchPicker.cjs.map