@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/input/Checkbox.mjs

@@ -1,96 +1,113 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
-import { warnDeprecated as t, warnOnce as n } from "../../lib/dev.mjs";
-import { materialiseSlotContent as ee, slotRendersContent as r } from "../../lib/slot.mjs";
-import { composeEventHandlers as te } from "../../lib/composeEventHandlers.mjs";
-import { useControllable as ne } from "../../hooks/useControllable.mjs";
-import { useId as i } from "../../hooks/useId.mjs";
-import { useMergedRefs as a } from "../../hooks/useMergedRefs.mjs";
+import { warnDeprecated as t, warnOnce as ee } from "../../lib/dev.mjs";
+import { materialiseSlotContent as n, slotRendersContent as r } from "../../lib/slot.mjs";
+import { composeEventHandlers as i } from "../../lib/composeEventHandlers.mjs";
+import { checkboxClassNames as a } from "../../lib/classNames.mjs";
+import { useControllable as te } from "../../hooks/useControllable.mjs";
+import { useId as o } from "../../hooks/useId.mjs";
+import { useMergedRefs as ne } from "../../hooks/useMergedRefs.mjs";
 import { focusableDisabledProps as re, joinIds as ie } from "../../lib/aria.mjs";
 import { useFieldContext as ae, useFieldControl as oe } from "../../hooks/useFieldControl.mjs";
-import { focusRing as se, forcedColors as o } from "../../lib/styles.mjs";
-import { CheckIcon as s, SubtractIcon as c } from "../../lib/icons.mjs";
-import { useFormReset as l } from "../../hooks/useFormReset.mjs";
-import { HiddenInput as ce } from "../internal/HiddenInput.mjs";
+import { focusRing as se, forcedColors as s } from "../../lib/styles.mjs";
+import { CheckIcon as ce, SubtractIcon as le } from "../../lib/icons.mjs";
+import { useFormReset as c } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as l } from "../internal/HiddenInput.mjs";
 import * as u from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { jsx as d, jsxs as ue } from "react/jsx-runtime";
 //#region src/components/input/Checkbox.tsx
-var p = "forced-colors:border-[Highlight] forced-colors:bg-[Highlight]", m = "forced-colors:border-[GrayText] forced-colors:bg-[Canvas]", le = "forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none", h = ({ checked: h, defaultChecked: g = !1, indeterminate: _ = !1, onCheckedChange: ue, onChange: v, disabled: y = !1, disabledFocusable: b = !1, label: x, labelPosition: S = "after", name: C, value: w, required: T, form: E, id: D, "aria-label": O, "aria-labelledby": k, "aria-describedby": A, "aria-invalid": j, "aria-required": M, "aria-errormessage": N, "aria-details": P, "aria-disabled": F, autoFocus: I, tabIndex: de, onClick: L, onFocus: R, onBlur: z, onKeyDown: B, onKeyUp: V, controlRef: H, className: fe, children: pe, ref: me, ...he }) => {
-	v !== void 0 && t("Checkbox", "onChange", "onCheckedChange");
-	let U = r(pe);
+var de = "forced-colors:border-[Highlight] forced-colors:bg-[Highlight]", fe = "forced-colors:border-[GrayText] forced-colors:bg-[Canvas]", pe = "forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none", f = {
+	medium: {
+		box: "h-[18px] w-[18px]",
+		glyph: 12,
+		offset: "mt-px"
+	},
+	large: {
+		box: "h-[22px] w-[22px]",
+		glyph: 16,
+		offset: "-mt-px"
+	}
+}, p = {
+	square: "rounded-xs",
+	circular: "rounded-full"
+}, m = ({ checked: m, defaultChecked: h = !1, indeterminate: g = !1, onCheckedChange: me, onChange: _, disabled: v = !1, disabledFocusable: y = !1, label: b, labelPosition: x = "after", size: S = "medium", shape: C = "square", name: w, value: T, required: E, form: D, id: O, "aria-label": k, "aria-labelledby": A, "aria-describedby": j, "aria-invalid": M, "aria-required": N, "aria-errormessage": P, "aria-details": F, "aria-disabled": I, autoFocus: L, tabIndex: R, onClick: z, onFocus: he, onBlur: ge, onKeyDown: _e, onKeyUp: ve, controlRef: ye, className: be, children: xe, ref: Se, ...Ce }) => {
+	_ !== void 0 && t("Checkbox", "onChange", "onCheckedChange");
+	let B = r(xe);
 	u.useEffect(() => {
-		U && n("Checkbox:children", "Checkbox: children are not rendered. Pass the label in `label`.");
-	}, [U]);
-	let [W, G] = ne(h, g, (e) => {
-		ue?.(e), v?.(e);
-	}), ge = i("checkbox"), K = i("checkbox-label"), q = ae(), J = oe({
-		id: D,
-		"aria-label": O,
-		"aria-labelledby": k,
-		"aria-describedby": A,
-		"aria-invalid": j,
-		"aria-required": M ?? T
-	}), _e = T ?? q?.required ?? !1, Y = r(x), ve = Y && J["aria-label"] === void 0 ? ie(J["aria-labelledby"], q && J.id === q.controlId ? q.labelId : void 0, K) : J["aria-labelledby"], X = u.useRef(null), ye = a(X, H);
-	l(X, () => G(g), E);
-	let be = W || _, Z = y || b, Q = Z ? le : o.selectedLeaf, $ = Y ? /* @__PURE__ */ d("span", {
-		id: K,
-		className: "text-body-1 text-foreground",
-		children: ee(x)
+		B && ee("Checkbox:children", "Checkbox: children are not rendered. Pass the label in `label`.");
+	}, [B]);
+	let [V, H] = te(m, h, (e) => {
+		me?.(e), _?.(e);
+	}), we = o("checkbox"), U = o("checkbox-label"), W = ae(), G = oe({
+		id: O,
+		"aria-label": k,
+		"aria-labelledby": A,
+		"aria-describedby": j,
+		"aria-invalid": M,
+		"aria-required": N ?? E
+	}), Te = E ?? W?.required ?? !1, K = r(b), Ee = K && G["aria-label"] === void 0 ? ie(G["aria-labelledby"], W && G.id === W.controlId ? W.labelId : void 0, U) : G["aria-labelledby"], q = u.useRef(null), De = ne(q, ye);
+	c(q, () => H(h), D);
+	let Oe = V || g, J = Object.hasOwn(f, S) ? S : "medium", Y = Object.hasOwn(p, C) ? C : "square", X = f[J], ke = p[Y], Z = v || y, Q = Z ? pe : s.selectedLeaf, $ = K ? /* @__PURE__ */ d("span", {
+		id: U,
+		className: e(a.label, "text-body-1 text-foreground"),
+		children: n(b)
 	}) : null;
-	return /* @__PURE__ */ f("label", {
-		ref: me,
-		"data-label-position": S,
-		className: e("relative inline-flex items-start gap-2 select-none", Z ? "cursor-not-allowed opacity-50 has-focus-visible:opacity-100" : "cursor-pointer", fe),
-		...he,
+	return /* @__PURE__ */ ue("label", {
+		ref: Se,
+		"data-label-position": x,
+		"data-size": J,
+		"data-shape": Y,
+		className: e(a.root, "relative inline-flex items-start gap-2 select-none", Z ? "cursor-not-allowed opacity-50 has-focus-visible:opacity-100" : "cursor-pointer", be),
+		...Ce,
 		children: [
-			S === "before" && $,
+			x === "before" && $,
 			/* @__PURE__ */ d("button", {
-				id: ge,
+				id: we,
 				type: "button",
-				...J,
-				"aria-labelledby": ve,
-				"aria-errormessage": N,
-				"aria-details": P,
-				"aria-disabled": F,
-				autoFocus: I,
-				tabIndex: de,
-				onFocus: R,
-				onBlur: z,
-				onKeyDown: B,
-				onKeyUp: V,
-				ref: ye,
+				...G,
+				"aria-labelledby": Ee,
+				"aria-errormessage": P,
+				"aria-details": F,
+				"aria-disabled": I,
+				autoFocus: L,
+				tabIndex: R,
+				onFocus: he,
+				onBlur: ge,
+				onKeyDown: _e,
+				onKeyUp: ve,
+				ref: De,
 				role: "checkbox",
-				"aria-checked": _ ? "mixed" : W,
-				disabled: y && !b,
-				...re(b, { reachable: !0 }),
-				onClick: b ? (e) => {
+				"aria-checked": g ? "mixed" : V,
+				disabled: v && !y,
+				...re(y, { reachable: !0 }),
+				onClick: y ? (e) => {
 					e.preventDefault(), e.stopPropagation();
-				} : te(L, () => G((e) => !e)),
-				className: e("flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-xs border p-0 transition-colors motion-reduce:transition-none", Y && "mt-px", se, be ? e("border-primary bg-primary text-primary-foreground", Z ? m : p) : e("border-stroke-accessible bg-transparent", Z ? o.disabled : o.control)),
-				children: _ ? /* @__PURE__ */ d(c, {
-					size: 12,
+				} : i(z, () => H((e) => !e)),
+				className: e(a.indicator, e("flex shrink-0 items-center justify-center border p-0 transition-colors motion-reduce:transition-none", X.box, ke), K && X.offset, se, Oe ? e("border-primary bg-primary text-primary-foreground", Z ? fe : de) : e("border-stroke-accessible bg-transparent", Z ? s.disabled : s.control)),
+				children: g ? /* @__PURE__ */ d(le, {
+					size: X.glyph,
 					className: Q
-				}) : W ? /* @__PURE__ */ d(s, {
-					size: 12,
+				}) : V ? /* @__PURE__ */ d(ce, {
+					size: X.glyph,
 					className: Q
 				}) : null
 			}),
-			S !== "before" && $,
-			/* @__PURE__ */ d(ce, {
+			x !== "before" && $,
+			/* @__PURE__ */ d(l, {
 				type: "checkbox",
-				name: C,
-				form: E,
+				name: w,
+				form: D,
 				disabled: Z,
-				value: w,
-				checked: W,
-				required: _e,
-				onInvalid: () => X.current?.focus()
+				value: T,
+				checked: V,
+				required: Te,
+				onInvalid: () => q.current?.focus()
 			})
 		]
 	});
 };
-h.displayName = "Checkbox";
+m.displayName = "Checkbox";
 //#endregion
-export { h as Checkbox };
+export { m as Checkbox };
 
 //# sourceMappingURL=Checkbox.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["useId","useId$1","React","checkedBox","disabledCheckedBox","disabledGlyph","Checkbox","checkedProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","ariaDisabled","rest","onChange","warnDeprecated","hasChildren","slotRendersContent","children","warnOnce","checked","setChecked","useControllable","defaultChecked","onCheckedChange","next","generatedId","labelTextId","field","useFieldContext","fieldProps","useFieldControl","required","isRequired","hasLabel","label","labelledBy","joinIds","buttonRef","mergedControlRef","useMergedRefs","controlRef","form","on","indeterminate","unavailable","disabled","disabledFocusable","glyphClassName","forcedColors","labelText","materialiseSlotContent","labelPosition","cn","className","focusableDisabledProps","event","composeEventHandlers","onClick","prev","focusRing","SubtractIcon","CheckIcon","HiddenInput"],"sources":["../../../src/components/input/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { focusableDisabledProps, joinIds } from '../../lib/aria';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { CheckIcon, SubtractIcon } from '../../lib/icons';\nimport { materialiseSlotContent, slotRendersContent } from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { LabelPosition } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\n\n/*\n * Forced colors: the focusable box keeps system-color utilities, so the browser still forces its\n * focus outline and border; only the glyph (the leaf indicator) opts out of forced colors. A\n * disabled box draws a GrayText glyph and border on Canvas, without the Highlight fill.\n */\nconst checkedBox = 'forced-colors:border-[Highlight] forced-colors:bg-[Highlight]';\nconst disabledCheckedBox = 'forced-colors:border-[GrayText] forced-colors:bg-[Canvas]';\nconst disabledGlyph = 'forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** Handlers that run on the `role=\"checkbox\"` button instead of the root label (C-ROUTING). */\ntype CheckboxControlHandlers = 'onClick' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';\n\n/** Where a Checkbox renders its label: after the box (default) or before it. */\nexport type CheckboxLabelPosition = Extract<LabelPosition, 'before' | 'after'>;\n\n/** Properties for the Checkbox component. */\nexport interface CheckboxProps extends Omit<\n  React.HTMLAttributes<HTMLLabelElement>,\n  'onChange' | 'defaultChecked' | CheckboxControlHandlers\n> {\n  /** Controlled checked state. */\n  checked?: boolean;\n  /** Initial checked state for uncontrolled usage (also the value a form reset restores).\n   * @default false\n   */\n  defaultChecked?: boolean;\n  /**\n   * Shows the mixed state: the dash glyph and `aria-checked=\"mixed\"`, whatever `checked` is. A\n   * click still toggles `checked` and calls `onCheckedChange`, but the checkbox keeps showing and\n   * announcing \"mixed\" until you clear `indeterminate`. For a tri-state \"select all\", derive\n   * `checked` and `indeterminate` from the items and set every item in `onCheckedChange`.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /** Called with the new checked state when it changes (not for no-op updates). */\n  onCheckedChange?: (checked: boolean) => void;\n  /**\n   * Called with the new checked state when it changes.\n   * @deprecated Use `onCheckedChange`.\n   */\n  onChange?: (checked: boolean) => void;\n  /** Whether the checkbox is disabled and non-interactive. */\n  disabled?: boolean;\n  /**\n   * Marks the checkbox unavailable but keeps it focusable and in the tab order: for a disabled\n   * checkbox that needs a Tooltip, or one in a toolbar. Renders `aria-disabled=\"true\"`,\n   * `data-disabled` and `data-disabled-focusable` on the checkbox instead of the native `disabled`\n   * attribute. The checkbox cannot be toggled and is not submitted with its form; your `onClick`\n   * is not called, and a click on the checkbox (or Space and Enter) does not reach ancestor click\n   * handlers, as for a natively disabled control. Wins over `disabled` when both are set. In a\n   * roving container (a `Toolbar`) it stays in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Label next to the control (any phrasing content, links included, but no other form\n   * controls). It names the control through `aria-labelledby`, after a consumer or Field\n   * `aria-labelledby`; a consumer `aria-label` names it instead. Clicking its text toggles the\n   * control; clicking a link inside it follows the link. `children` are not rendered: pass the\n   * label here.\n   */\n  label?: React.ReactNode;\n  /**\n   * Where the label renders: after the control (default) or before it. The DOM order follows the\n   * visual order.\n   * @default 'after'\n   */\n  labelPosition?: CheckboxLabelPosition;\n  /**\n   * Form field name. With a name, the checkbox takes part in native form submission: it submits\n   * `name=value` while checked.\n   */\n  name?: string;\n  /** Value submitted while checked.\n   * @default 'on'\n   */\n  value?: string;\n  /** The form must not be submitted while the checkbox is unchecked (native validation). */\n  required?: boolean;\n  /** Id of the form the checkbox belongs to, when it is rendered outside that form. */\n  form?: string;\n  /** Click handler of the checkbox control (the `role=\"checkbox\"` button). */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Focus handler of the checkbox control. */\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Blur handler of the checkbox control. */\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Keydown handler of the checkbox control. */\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Keyup handler of the checkbox control. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Ref to the focusable `role=\"checkbox\"` button. */\n  controlRef?: React.Ref<HTMLButtonElement>;\n  /** Ref to the root `<label>` element. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\n/**\n * A checkbox for a boolean (or mixed) choice, drawn as a `role=\"checkbox\"` button inside a\n * `<label>`.\n *\n * - The root `<label>` receives `ref`, `className`, `style` and `data-*`; the control receives\n *   `id`, `aria-label`/`-labelledby`/`-describedby`/`-invalid`/`-required`/`-errormessage`/\n *   `-details`/`-disabled`, `tabIndex`, `autoFocus` and the click, focus and key handlers\n *   (`controlRef` exposes it). A consumer `onClick` runs once per activation, before the toggle;\n *   `preventDefault()` in it cancels the toggle.\n * - Inside a `Field` it is named by the Field label (followed by its own `label` text) and described\n *   by the Field message and hint.\n * - With `name` (or `required`) it takes part in native forms like `<input type=\"checkbox\">`, and\n *   a form reset restores `defaultChecked`.\n * - `label` takes rich content (a link to the terms) and renders after the box, or before it with\n *   `labelPosition=\"before\"` (the root carries `data-label-position`). The box lines up with the\n *   first line of a label that wraps or has a second line. `children` are not rendered (a\n *   development warning says so).\n */\nexport const Checkbox = ({\n  checked: checkedProp,\n  defaultChecked = false,\n  indeterminate = false,\n  onCheckedChange,\n  onChange,\n  disabled = false,\n  disabledFocusable = false,\n  label,\n  labelPosition = 'after',\n  name,\n  value,\n  required,\n  form,\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-disabled': ariaDisabled,\n  autoFocus,\n  tabIndex,\n  onClick,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  controlRef,\n  className,\n  children,\n  ref,\n  ...rest\n}: CheckboxProps) => {\n  if (onChange !== undefined) warnDeprecated('Checkbox', 'onChange', 'onCheckedChange');\n  const hasChildren = slotRendersContent(children);\n  React.useEffect(() => {\n    if (hasChildren) {\n      warnOnce(\n        'Checkbox:children',\n        'Checkbox: children are not rendered. Pass the label in `label`.',\n      );\n    }\n  }, [hasChildren]);\n  const [checked, setChecked] = useControllable(checkedProp, defaultChecked, (next: boolean) => {\n    onCheckedChange?.(next);\n    onChange?.(next);\n  });\n\n  const generatedId = useId('checkbox');\n  const labelTextId = useId('checkbox-label');\n  const field = useFieldContext();\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required always matches\n    // the native validation below (`isRequired`).\n    'aria-required': ariaRequired ?? required,\n  });\n  const isRequired = required ?? field?.required ?? false;\n  // `0` is a label; `null`, `false`, `''` and empty collections are not (C-SLOTS).\n  const hasLabel = slotRendersContent(label);\n  // The label text names the control through aria-labelledby, disabled or not: axe exempts the\n  // dimmed text of a disabled control only when the control references it this way (its <label>\n  // exemption covers native inputs only). A consumer aria-label still names the control alone.\n  // The ids already there (the consumer's, the Field label from useFieldControl) come first, then\n  // the Field label whose <label htmlFor> targets this control (aria-labelledby would hide it), so\n  // the name keeps every label.\n  const labelledBy =\n    hasLabel && fieldProps['aria-label'] === undefined\n      ? joinIds(\n          fieldProps['aria-labelledby'],\n          field && fieldProps.id === field.controlId ? field.labelId : undefined,\n          labelTextId,\n        )\n      : fieldProps['aria-labelledby'];\n\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const mergedControlRef = useMergedRefs(buttonRef, controlRef);\n  useFormReset(buttonRef, () => setChecked(defaultChecked), form);\n\n  const on = checked || indeterminate;\n  // Focusable-disabled wins over `disabled`: the box stays focusable but looks and acts disabled.\n  const unavailable = disabled || disabledFocusable;\n  // The glyph is the forced-colors leaf; the box stays on system colors (see `checkedBox`).\n  const glyphClassName = unavailable ? disabledGlyph : forcedColors.selectedLeaf;\n  const labelText = hasLabel ? (\n    <span id={labelTextId} className=\"text-body-1 text-foreground\">\n      {materialiseSlotContent(label)}\n    </span>\n  ) : null;\n\n  return (\n    <label\n      ref={ref}\n      data-label-position={labelPosition}\n      className={cn(\n        // items-start: the box lines up with the first line of a label that wraps or has a second\n        // line, not with its middle.\n        'relative inline-flex items-start gap-2 select-none',\n        // The dimmed look lifts while a focus ring shows inside the root (the control's, under\n        // disabledFocusable, or a link's in the label): opacity would dim the ring below 3:1.\n        unavailable\n          ? 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100'\n          : 'cursor-pointer',\n        className,\n      )}\n      {...rest}\n    >\n      {labelPosition === 'before' && labelText}\n      <button\n        id={generatedId}\n        type=\"button\"\n        {...fieldProps}\n        aria-labelledby={labelledBy}\n        aria-errormessage={ariaErrorMessage}\n        aria-details={ariaDetails}\n        aria-disabled={ariaDisabled}\n        autoFocus={autoFocus}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        ref={mergedControlRef}\n        role=\"checkbox\"\n        aria-checked={indeterminate ? 'mixed' : checked}\n        disabled={disabled && !disabledFocusable}\n        {...focusableDisabledProps(disabledFocusable, { reachable: true })}\n        onClick={\n          disabledFocusable\n            ? // Clicks, Space and Enter (which click a button) neither toggle nor reach `onClick`,\n              // and, as a natively disabled control dispatches no click, no ancestor sees them.\n              (event: React.MouseEvent<HTMLButtonElement>) => {\n                event.preventDefault();\n                event.stopPropagation();\n              }\n            : composeEventHandlers(onClick, () => setChecked((prev) => !prev))\n        }\n        className={cn(\n          // p-0 and the unchecked bg-transparent are set here, not left to the native reset, which\n          // any app button style overrides (C-NATIVE).\n          'flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-xs border p-0 transition-colors motion-reduce:transition-none',\n          // Centred on the 20px first line of the label text.\n          hasLabel && 'mt-px',\n          focusRing,\n          on\n            ? cn(\n                'border-primary bg-primary text-primary-foreground',\n                unavailable ? disabledCheckedBox : checkedBox,\n              )\n            : cn(\n                'border-stroke-accessible bg-transparent',\n                unavailable ? forcedColors.disabled : forcedColors.control,\n              ),\n        )}\n      >\n        {indeterminate ? (\n          <SubtractIcon size={12} className={glyphClassName} />\n        ) : checked ? (\n          <CheckIcon size={12} className={glyphClassName} />\n        ) : null}\n      </button>\n      {labelPosition !== 'before' && labelText}\n      <HiddenInput\n        type=\"checkbox\"\n        name={name}\n        form={form}\n        disabled={unavailable}\n        value={value}\n        checked={checked}\n        required={isRequired}\n        onInvalid={() => buttonRef.current?.focus()}\n      />\n    </label>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.mjs","names":["useId","useId$1","React","checkedBox","disabledCheckedBox","disabledGlyph","CHECKBOX_SIZE","CHECKBOX_SHAPE","Checkbox","checkedProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","ariaDisabled","rest","onChange","warnDeprecated","hasChildren","slotRendersContent","children","warnOnce","checked","setChecked","useControllable","defaultChecked","onCheckedChange","next","generatedId","labelTextId","field","useFieldContext","fieldProps","useFieldControl","required","isRequired","hasLabel","label","labelledBy","joinIds","buttonRef","mergedControlRef","useMergedRefs","controlRef","form","on","indeterminate","resolvedSize","size","resolvedShape","shape","sizeMetrics","shapeClass","unavailable","disabled","disabledFocusable","glyphClassName","forcedColors","labelText","cn","checkboxClassNames","materialiseSlotContent","labelPosition","className","focusableDisabledProps","event","composeEventHandlers","onClick","prev","focusRing","SubtractIcon","CheckIcon","HiddenInput"],"sources":["../../../src/components/input/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { focusableDisabledProps, joinIds } from '../../lib/aria';\nimport { checkboxClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { CheckIcon, SubtractIcon } from '../../lib/icons';\nimport { materialiseSlotContent, slotRendersContent } from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { LabelPosition, Shape, Size } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\n\n/*\n * Forced colors: the focusable box keeps system-color utilities, so the browser still forces its\n * focus outline and border; only the glyph (the leaf indicator) opts out of forced colors. A\n * disabled box draws a GrayText glyph and border on Canvas, without the Highlight fill.\n */\nconst checkedBox = 'forced-colors:border-[Highlight] forced-colors:bg-[Highlight]';\nconst disabledCheckedBox = 'forced-colors:border-[GrayText] forced-colors:bg-[Canvas]';\nconst disabledGlyph = 'forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** Handlers that run on the `role=\"checkbox\"` button instead of the root label (C-ROUTING). */\ntype CheckboxControlHandlers = 'onClick' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';\n\n/** Where a Checkbox renders its label: after the box (default) or before it. */\nexport type CheckboxLabelPosition = Extract<LabelPosition, 'before' | 'after'>;\n\n/** Size of the box: an 18px box (the 0.7 look) or a 22px box with a bigger glyph. */\nexport type CheckboxSize = Extract<Size, 'medium' | 'large'>;\n\n/** Shape of the box: square corners (the 0.7 look) or a circular, round box. */\nexport type CheckboxShape = Extract<Shape, 'square' | 'circular'>;\n\n/** Per-size box, glyph and label-offset classes. */\nconst CHECKBOX_SIZE: Readonly<\n  Record<CheckboxSize, { box: string; glyph: number; offset: string }>\n> = {\n  medium: { box: 'h-[18px] w-[18px]', glyph: 12, offset: 'mt-px' },\n  large: { box: 'h-[22px] w-[22px]', glyph: 16, offset: '-mt-px' },\n};\n\n/** Per-shape corner classes. */\nconst CHECKBOX_SHAPE: Readonly<Record<CheckboxShape, string>> = {\n  square: 'rounded-xs',\n  circular: 'rounded-full',\n};\n\n/** Properties for the Checkbox component. */\nexport interface CheckboxProps extends Omit<\n  React.HTMLAttributes<HTMLLabelElement>,\n  'onChange' | 'defaultChecked' | CheckboxControlHandlers\n> {\n  /** Controlled checked state. */\n  checked?: boolean;\n  /** Initial checked state for uncontrolled usage (also the value a form reset restores).\n   * @default false\n   */\n  defaultChecked?: boolean;\n  /**\n   * Shows the mixed state: the dash glyph and `aria-checked=\"mixed\"`, whatever `checked` is. A\n   * click still toggles `checked` and calls `onCheckedChange`, but the checkbox keeps showing and\n   * announcing \"mixed\" until you clear `indeterminate`. For a tri-state \"select all\", derive\n   * `checked` and `indeterminate` from the items and set every item in `onCheckedChange`.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /** Called with the new checked state when it changes (not for no-op updates). */\n  onCheckedChange?: (checked: boolean) => void;\n  /**\n   * Called with the new checked state when it changes.\n   * @deprecated Use `onCheckedChange`.\n   */\n  onChange?: (checked: boolean) => void;\n  /** Whether the checkbox is disabled and non-interactive. */\n  disabled?: boolean;\n  /**\n   * Marks the checkbox unavailable but keeps it focusable and in the tab order: for a disabled\n   * checkbox that needs a Tooltip, or one in a toolbar. Renders `aria-disabled=\"true\"`,\n   * `data-disabled` and `data-disabled-focusable` on the checkbox instead of the native `disabled`\n   * attribute. The checkbox cannot be toggled and is not submitted with its form; your `onClick`\n   * is not called, and a click on the checkbox (or Space and Enter) does not reach ancestor click\n   * handlers, as for a natively disabled control. Wins over `disabled` when both are set. In a\n   * roving container (a `Toolbar`) it stays in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Label next to the control (any phrasing content, links included, but no other form\n   * controls). It names the control through `aria-labelledby`, after a consumer or Field\n   * `aria-labelledby`; a consumer `aria-label` names it instead. Clicking its text toggles the\n   * control; clicking a link inside it follows the link. `children` are not rendered: pass the\n   * label here.\n   */\n  label?: React.ReactNode;\n  /**\n   * Where the label renders: after the control (default) or before it. The DOM order follows the\n   * visual order.\n   * @default 'after'\n   */\n  labelPosition?: CheckboxLabelPosition;\n  /**\n   * Size of the box: an 18px box (the 0.7 look) or a 22px box with a bigger glyph. Unlike the\n   * text controls and pickers, Checkbox does not read a surrounding Field's size or a\n   * WaveProvider's input defaults: this prop is the only source of its size.\n   * @default 'medium'\n   */\n  size?: CheckboxSize;\n  /**\n   * Shape of the box: square corners (the 0.7 look) or a circular, round box.\n   * @default 'square'\n   */\n  shape?: CheckboxShape;\n  /**\n   * Form field name. With a name, the checkbox takes part in native form submission: it submits\n   * `name=value` while checked.\n   */\n  name?: string;\n  /** Value submitted while checked.\n   * @default 'on'\n   */\n  value?: string;\n  /** The form must not be submitted while the checkbox is unchecked (native validation). */\n  required?: boolean;\n  /** Id of the form the checkbox belongs to, when it is rendered outside that form. */\n  form?: string;\n  /** Click handler of the checkbox control (the `role=\"checkbox\"` button). */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Focus handler of the checkbox control. */\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Blur handler of the checkbox control. */\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Keydown handler of the checkbox control. */\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Keyup handler of the checkbox control. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Ref to the focusable `role=\"checkbox\"` button. */\n  controlRef?: React.Ref<HTMLButtonElement>;\n  /** Ref to the root `<label>` element. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\n/**\n * A checkbox for a boolean (or mixed) choice, drawn as a `role=\"checkbox\"` button inside a\n * `<label>`.\n *\n * - The root `<label>` receives `ref`, `className`, `style` and `data-*`; the control receives\n *   `id`, `aria-label`/`-labelledby`/`-describedby`/`-invalid`/`-required`/`-errormessage`/\n *   `-details`/`-disabled`, `tabIndex`, `autoFocus` and the click, focus and key handlers\n *   (`controlRef` exposes it). A consumer `onClick` runs once per activation, before the toggle;\n *   `preventDefault()` in it cancels the toggle.\n * - Inside a `Field` it is named by the Field label (followed by its own `label` text) and described\n *   by the Field message and hint.\n * - With `name` (or `required`) it takes part in native forms like `<input type=\"checkbox\">`, and\n *   a form reset restores `defaultChecked`.\n * - `label` takes rich content (a link to the terms) and renders after the box, or before it with\n *   `labelPosition=\"before\"` (the root carries `data-label-position`). The box lines up with the\n *   first line of a label that wraps or has a second line. `children` are not rendered (a\n *   development warning says so).\n * - `size` (`medium`, `large`) and `shape` (`square`, `circular`) set the box's dimensions and\n *   corners; the root carries `data-size` and `data-shape`. Checkbox does not read a surrounding\n *   `Field`'s size or a `WaveProvider`'s input defaults.\n */\nexport const Checkbox = ({\n  checked: checkedProp,\n  defaultChecked = false,\n  indeterminate = false,\n  onCheckedChange,\n  onChange,\n  disabled = false,\n  disabledFocusable = false,\n  label,\n  labelPosition = 'after',\n  size = 'medium',\n  shape = 'square',\n  name,\n  value,\n  required,\n  form,\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-disabled': ariaDisabled,\n  autoFocus,\n  tabIndex,\n  onClick,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  controlRef,\n  className,\n  children,\n  ref,\n  ...rest\n}: CheckboxProps) => {\n  if (onChange !== undefined) warnDeprecated('Checkbox', 'onChange', 'onCheckedChange');\n  const hasChildren = slotRendersContent(children);\n  React.useEffect(() => {\n    if (hasChildren) {\n      warnOnce(\n        'Checkbox:children',\n        'Checkbox: children are not rendered. Pass the label in `label`.',\n      );\n    }\n  }, [hasChildren]);\n  const [checked, setChecked] = useControllable(checkedProp, defaultChecked, (next: boolean) => {\n    onCheckedChange?.(next);\n    onChange?.(next);\n  });\n\n  const generatedId = useId('checkbox');\n  const labelTextId = useId('checkbox-label');\n  const field = useFieldContext();\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required always matches\n    // the native validation below (`isRequired`).\n    'aria-required': ariaRequired ?? required,\n  });\n  const isRequired = required ?? field?.required ?? false;\n  // `0` is a label; `null`, `false`, `''` and empty collections are not (C-SLOTS).\n  const hasLabel = slotRendersContent(label);\n  // The label text names the control through aria-labelledby, disabled or not: axe exempts the\n  // dimmed text of a disabled control only when the control references it this way (its <label>\n  // exemption covers native inputs only). A consumer aria-label still names the control alone.\n  // The ids already there (the consumer's, the Field label from useFieldControl) come first, then\n  // the Field label whose <label htmlFor> targets this control (aria-labelledby would hide it), so\n  // the name keeps every label.\n  const labelledBy =\n    hasLabel && fieldProps['aria-label'] === undefined\n      ? joinIds(\n          fieldProps['aria-labelledby'],\n          field && fieldProps.id === field.controlId ? field.labelId : undefined,\n          labelTextId,\n        )\n      : fieldProps['aria-labelledby'];\n\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const mergedControlRef = useMergedRefs(buttonRef, controlRef);\n  useFormReset(buttonRef, () => setChecked(defaultChecked), form);\n\n  const on = checked || indeterminate;\n  // A size or shape outside the unions (from untyped code) renders, and is reported in the data\n  // attributes, as the default: TypeScript rejects one, but the value still reaches this render.\n  const resolvedSize: CheckboxSize = Object.hasOwn(CHECKBOX_SIZE, size) ? size : 'medium';\n  const resolvedShape: CheckboxShape = Object.hasOwn(CHECKBOX_SHAPE, shape) ? shape : 'square';\n  const sizeMetrics = CHECKBOX_SIZE[resolvedSize];\n  const shapeClass = CHECKBOX_SHAPE[resolvedShape];\n  // Focusable-disabled wins over `disabled`: the box stays focusable but looks and acts disabled.\n  const unavailable = disabled || disabledFocusable;\n  // The glyph is the forced-colors leaf; the box stays on system colors (see `checkedBox`).\n  const glyphClassName = unavailable ? disabledGlyph : forcedColors.selectedLeaf;\n  const labelText = hasLabel ? (\n    <span id={labelTextId} className={cn(checkboxClassNames.label, 'text-body-1 text-foreground')}>\n      {materialiseSlotContent(label)}\n    </span>\n  ) : null;\n\n  return (\n    <label\n      ref={ref}\n      data-label-position={labelPosition}\n      data-size={resolvedSize}\n      data-shape={resolvedShape}\n      className={cn(\n        checkboxClassNames.root,\n        // items-start: the box lines up with the first line of a label that wraps or has a second\n        // line, not with its middle.\n        'relative inline-flex items-start gap-2 select-none',\n        // The dimmed look lifts while a focus ring shows inside the root (the control's, under\n        // disabledFocusable, or a link's in the label): opacity would dim the ring below 3:1.\n        unavailable\n          ? 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100'\n          : 'cursor-pointer',\n        className,\n      )}\n      {...rest}\n    >\n      {labelPosition === 'before' && labelText}\n      <button\n        id={generatedId}\n        type=\"button\"\n        {...fieldProps}\n        aria-labelledby={labelledBy}\n        aria-errormessage={ariaErrorMessage}\n        aria-details={ariaDetails}\n        aria-disabled={ariaDisabled}\n        autoFocus={autoFocus}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        ref={mergedControlRef}\n        role=\"checkbox\"\n        aria-checked={indeterminate ? 'mixed' : checked}\n        disabled={disabled && !disabledFocusable}\n        {...focusableDisabledProps(disabledFocusable, { reachable: true })}\n        onClick={\n          disabledFocusable\n            ? // Clicks, Space and Enter (which click a button) neither toggle nor reach `onClick`,\n              // and, as a natively disabled control dispatches no click, no ancestor sees them.\n              (event: React.MouseEvent<HTMLButtonElement>) => {\n                event.preventDefault();\n                event.stopPropagation();\n              }\n            : composeEventHandlers(onClick, () => setChecked((prev) => !prev))\n        }\n        className={cn(\n          checkboxClassNames.indicator,\n          // p-0 and the unchecked bg-transparent are set here, not left to the native reset, which\n          // any app button style overrides (C-NATIVE).\n          cn(\n            'flex shrink-0 items-center justify-center border p-0 transition-colors motion-reduce:transition-none',\n            sizeMetrics.box,\n            shapeClass,\n          ),\n          // Centred on the label's 20px first line: nudged down at medium, up at large.\n          hasLabel && sizeMetrics.offset,\n          focusRing,\n          on\n            ? cn(\n                'border-primary bg-primary text-primary-foreground',\n                unavailable ? disabledCheckedBox : checkedBox,\n              )\n            : cn(\n                'border-stroke-accessible bg-transparent',\n                unavailable ? forcedColors.disabled : forcedColors.control,\n              ),\n        )}\n      >\n        {indeterminate ? (\n          <SubtractIcon size={sizeMetrics.glyph} className={glyphClassName} />\n        ) : checked ? (\n          <CheckIcon size={sizeMetrics.glyph} className={glyphClassName} />\n        ) : null}\n      </button>\n      {labelPosition !== 'before' && labelText}\n      <HiddenInput\n        type=\"checkbox\"\n        name={name}\n        form={form}\n        disabled={unavailable}\n        value={value}\n        checked={checked}\n        required={isRequired}\n        onInvalid={() => buttonRef.current?.focus()}\n      />\n    </label>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\n"],"mappings":"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"}

package/dist/components/input/ColorArea.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../lib/color.cjs"),a=require("../../hooks/useEventCallback.cjs"),o=require("../../lib/direction.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/useFieldControl.cjs"),ee=require("../../hooks/useMediaQuery.cjs"),l=require("../../hooks/useFormReset.cjs"),u=require("../internal/HiddenInput.cjs"),d=require("./colorUtils.cjs"),f=require("./ColorPicker.parts.cjs"),p=require("../../lib/events.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var te={saturation:`Saturation`,brightness:`Brightness`,roleDescription:`2D slider`};function g(e){return Math.min(100,Math.max(0,e))}var _=`(pointer: coarse)`,v=({value:e,defaultValue:v,onValueChange:y,shape:b,labels:x,disabled:S=!1,name:C,form:w,required:ne,controlRef:re,className:ie,style:ae,id:oe,"aria-label":se,"aria-labelledby":T,"aria-describedby":ce,"aria-invalid":le,"aria-required":E,"aria-errormessage":ue,autoFocus:de,tabIndex:fe,onKeyDown:D,onPointerDown:O,onPointerMove:k,ref:A,...j})=>{let M=f.useColorPartState({value:e,defaultValue:v,onValueChange:y,disabled:S}),{picker:N}=M,P={...te,...N&&{saturation:N.labels.saturation,brightness:N.labels.brightness,roleDescription:N.labels.roleDescription,colorName:N.labels.colorName,valueText:N.labels.valueText},...x},F=b??N?.shape??`rounded`,I=M.color,L=d.displayColor(I),R=d.toPercent(L.s),z=d.toPercent(L.v),[B,V]=m.useState(`saturation`),pe=ee.useMediaQuery(_),H=m.useRef(null),[U,me]=m.useState(0),W=m.useRef(null),G=m.useRef(null),K=m.useRef(null),he=s.useMergedRefs(A,W),ge=s.useMergedRefs(G,re),q=m.useRef(0);m.useLayoutEffect(()=>{q.current!==U&&(q.current=U,(B===`saturation`?G:K).current?.focus({preventScroll:!0}))},[B,U]);let _e=c.useFieldContext(),{"aria-invalid":J,"aria-required":ve,required:ye,...be}=c.useFieldControl({id:oe,"aria-label":se??(N&&T===void 0?N.labels.area:void 0),"aria-labelledby":T,"aria-describedby":ce,"aria-invalid":le},{labelable:!1}),xe=J!==void 0&&J!==!1&&J!==`false`&&ue||void 0,Se=ne??(E===!0||E===`true`||(_e?.required??!1));l.useFormReset(W,M.reset,w);let Y=(e,t)=>{t!==(e===`saturation`?R:z)&&M.setColor(e===`saturation`?{...I,s:t/100}:{...I,v:t/100})},Ce=n.composeEventHandlers(D,e=>{if(M.disabled||!p.isOwnEvent(e)||e.nativeEvent.isComposing||e.altKey||e.ctrlKey||e.metaKey)return;let t=e.shiftKey?10:1,n,r;switch(e.key){case`ArrowLeft`:case`ArrowRight`:{let i=o.getArrowIntent(e.key,{orientation:`horizontal`,dir:o.getDirection(e.currentTarget)});n=`saturation`,r=R+(i===`next`?t:-t);break}case`ArrowUp`:n=`value`,r=z+t;break;case`ArrowDown`:n=`value`,r=z-t;break;case`PageUp`:n=`value`,r=z+10;break;case`PageDown`:n=`value`,r=z-10;break;case`Home`:n=`saturation`,r=0;break;case`End`:n=`saturation`,r=100;break;default:return}e.preventDefault(),n!==B&&V(n),me(e=>e+1),Y(n,g(r))}),X=e=>t=>{M.disabled||(e!==B&&V(e),Y(e,g(Math.round(Number(t.currentTarget.value)))))},we=e=>()=>{e!==B&&V(e)},Z=a.useEventCallback(e=>{let t=H.current;if(!t)return;let n=t.getBoundingClientRect();if(n.width<=0||n.height<=0)return;let r=Math.min(1,Math.max(0,(e.clientX-n.left)/n.width)),i=o.getDirection(e.currentTarget)===`rtl`?1-r:r,a=Math.min(1,Math.max(0,1-(e.clientY-n.top)/n.height));(i!==L.s||a!==L.v)&&M.setColor({...I,s:i,v:a})}),Te=a.useEventCallback(()=>{(B===`saturation`?G:K).current?.focus({preventScroll:!0,focusVisible:!1})}),Ee=n.composeEventHandlers(O,e=>{!M.disabled&&e.button===0&&e.isPrimary&&p.isOwnEvent(e)&&(e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId),Z(e),Te())}),De=n.composeEventHandlers(k,e=>{!M.disabled&&e.currentTarget.hasPointerCapture(e.pointerId)&&Z(e)}),Q={saturation:P.saturation,brightness:P.brightness,colorName:P.colorName,valueText:P.valueText},Oe={...ae,"--wave-color-area-gradient":d.colorAreaGradient(L.h),"--wave-color-area-x":d.toPosition(L.s),"--wave-color-area-y":d.toPosition(L.v),"--wave-color-thumb":i.hsvToHex({h:L.h,s:L.s,v:L.v})},$=e=>({type:`range`,min:0,max:100,step:1,disabled:M.disabled,"aria-roledescription":P.roleDescription,"aria-invalid":J,"aria-errormessage":xe,tabIndex:e===B?fe??0:-1,"aria-hidden":e!==B&&!pe||void 0,onChange:X(e),onFocus:we(e),className:`sr-only`});return(0,h.jsxs)(`div`,{role:`group`,"data-disabled":M.disabled?``:void 0,...be,className:t.cn(r.colorAreaClassNames.root,`group/color-area relative h-40 w-full min-w-40 touch-none select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`,F===`square`?`rounded-none`:`rounded`,ie),style:Oe,...j,ref:he,onKeyDown:Ce,onPointerDown:Ee,onPointerMove:De,children:[(0,h.jsx)(`div`,{ref:H,"aria-hidden":`true`,className:t.cn(r.colorAreaClassNames.field,`absolute inset-0 rounded-[inherit] bg-(image:--wave-color-area-gradient) wave-rtl:-scale-x-100 forced-colors:forced-color-adjust-none`)}),(0,h.jsx)(`span`,{"aria-hidden":`true`,className:t.cn(r.colorAreaClassNames.thumb,d.COLOR_THUMB_CLASSES,`start-(--wave-color-area-x) bottom-(--wave-color-area-y) -translate-x-1/2 wave-rtl:translate-x-1/2 translate-y-1/2`,`group-has-[:focus-visible]/color-area:ring-2 group-has-[:focus-visible]/color-area:ring-background forced-colors:group-has-[:focus-visible]/color-area:ring-[Canvas] group-has-[:focus-visible]/color-area:outline-2 group-has-[:focus-visible]/color-area:outline-offset-2 group-has-[:focus-visible]/color-area:outline-ring forced-colors:group-has-[:focus-visible]/color-area:outline-[Highlight]`)}),(0,h.jsx)(`input`,{...$(`saturation`),ref:ge,value:R,"aria-label":P.saturation,"aria-valuetext":d.areaValueText(L,`saturation`,Q),autoFocus:de}),(0,h.jsx)(`input`,{...$(`value`),ref:K,value:z,"aria-label":P.brightness,"aria-orientation":`vertical`,"aria-valuetext":d.areaValueText(L,`value`,Q)}),!N&&(0,h.jsx)(u.HiddenInput,{type:`text`,name:C,form:w,disabled:M.disabled,value:i.hsvToHex(I),required:Se,onInvalid:()=>(B===`saturation`?G:K).current?.focus()})]})};v.displayName=`ColorArea`,exports.ColorArea=v;
+//# sourceMappingURL=ColorArea.cjs.map

package/dist/components/input/ColorArea.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorArea.cjs","names":["useColorPartState","displayColor","toPercent","React","useMediaQuery","useMergedRefs","useFieldContext","useFieldControl","composeEventHandlers","isOwnEvent","getArrowIntent","getDirection","useEventCallback","colorAreaGradient","toPosition","hsvToHex","cn","colorAreaClassNames","COLOR_THUMB_CLASSES","areaValueText","HiddenInput","require_runtime","require_cn","require_composeEventHandlers","require_classNames","require_color","require_useEventCallback","require_direction","require_useMergedRefs","require_useFieldControl","require_useMediaQuery","require_useFormReset","require_HiddenInput","require_colorUtils","require_ColorPicker_parts","require_events","react","react_jsx_runtime","DEFAULT_LABELS","clampPercent","value","COARSE_POINTER","ColorArea","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","rest","part","strings","picker","labels","resolvedShape","shape","color","shown","saturation","brightness","activeAxis","setActiveAxis","coarsePointer","fieldRef","focusToken","setFocusToken","rootRef","saturationRef","brightnessRef","mergedRootRef","ref","mergedSaturationRef","controlRef","handledFocusTokenRef","field","invalid","_ariaRequired","_required","groupProps","errorMessageId","isRequired","required","form","applyAxis","percent","axis","handleKeyDown","onKeyDown","event","step","next","intent","token","handleInputChange","handleInputFocus","moveToPointer","fieldElement","rect","x","s","v","focusActiveAxis","handlePointerDown","onPointerDown","handlePointerMove","onPointerMove","textLabels","areaStyle","style","inputProps","tabIndex","className"],"sources":["../../../src/components/input/ColorArea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { colorAreaClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { hsvToHex } from '../../lib/color';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { getArrowIntent, getDirection } from '../../lib/direction';\nimport { isOwnEvent } from '../../lib/events';\nimport type { ColorPickerShape, HsvColor } from '../../lib/types';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { useColorPartState } from './ColorPicker.parts';\nimport {\n  COLOR_THUMB_CLASSES,\n  areaValueText,\n  colorAreaGradient,\n  displayColor,\n  toPercent,\n  toPosition,\n} from './colorUtils';\n\n/** Texts of a ColorArea, for localisation. Every key is optional. */\nexport interface ColorAreaLabels {\n  /** Name of the horizontal slider.\n   * @default 'Saturation'\n   */\n  saturation?: string;\n  /** Name of the vertical slider (the `value` channel).\n   * @default 'Brightness'\n   */\n  brightness?: string;\n  /** Role description of both sliders.\n   * @default '2D slider'\n   */\n  roleDescription?: string;\n  /** Names the color at the end of each value text; return `''` to leave it out.\n   * @default an English namer (\"dark blue\")\n   */\n  colorName?: (color: HsvColor) => string;\n  /** Replaces a whole value text, for languages whose order differs. */\n  valueText?: (color: HsvColor, channel: 'saturation' | 'value') => string;\n}\n\n/** Properties for the ColorArea component. */\nexport interface ColorAreaProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'defaultValue' | 'onChange'\n> {\n  /**\n   * The color (Fluent's `color`). Inside a ColorPicker, leave `value` and `defaultValue` out to\n   * bind the area to the picker.\n   */\n  value?: HsvColor;\n  /**\n   * Initial color for uncontrolled usage (also what a form reset restores).\n   * @default the brand blue, `{ h: 208, s: 0.92, v: 0.74 }` (`#0f6cbd`)\n   */\n  defaultValue?: HsvColor;\n  /**\n   * Called with the new color on every step (a key, a pointer move or assistive technology) that\n   * changes it (Fluent's `onChange`). A bound area calls it too.\n   */\n  onValueChange?: (value: HsvColor) => void;\n  /**\n   * `'square'` removes the corner radius (the thumb stays round). Bound to a ColorPicker, the\n   * picker's shape unless you pass one.\n   * @default 'rounded'\n   */\n  shape?: ColorPickerShape;\n  /** Texts of the area; bound to a ColorPicker, the picker's `labels` fill the keys you leave out. */\n  labels?: ColorAreaLabels;\n  /**\n   * Unavailable: both inputs are natively disabled, pointer presses are ignored and the area is\n   * dimmed. A bound area is also disabled while the picker's value is not a hex color.\n   * @default false\n   */\n  disabled?: boolean;\n  /** Form field name: the color is submitted as hex (`hsvToHex`). Ignored while bound to a ColorPicker. */\n  name?: string;\n  /** Id of the form the area belongs to, when it is rendered outside that form. */\n  form?: string;\n  /**\n   * Marks the hidden form input required (a color is always set, so it never blocks). A consumer\n   * `aria-required` does the same: a group supports neither, so neither is set on it.\n   */\n  required?: boolean;\n  /** Ref to the saturation `<input type=\"range\">`. */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the root `role=\"group\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** The two axes: saturation (x) and brightness (y, the `value` channel). */\ntype AreaAxis = 'saturation' | 'value';\n\nconst DEFAULT_LABELS = {\n  saturation: 'Saturation',\n  brightness: 'Brightness',\n  roleDescription: '2D slider',\n} as const;\n\n/** A whole percentage clamped to 0–100. */\nfunction clampPercent(value: number): number {\n  return Math.min(100, Math.max(0, value));\n}\n\n/** Touch-primary devices expose both inputs, so a touch screen reader can swipe each (D19). */\nconst COARSE_POINTER = '(pointer: coarse)';\n\n/**\n * A 2-D color field: saturation from left to right (mirrored in right-to-left layouts) and\n * brightness from bottom to top, at the value's hue. ArrowLeft and ArrowRight move saturation by\n * 1 %, ArrowUp and ArrowDown brightness; Shift with an arrow moves by 10, Page Up and Page Down\n * move brightness by 10, and Home and End set saturation to 0 and 100. A press or drag (mouse,\n * touch or pen) moves the thumb to the pointer. It is one Tab stop holding two sliders for\n * assistive technology, \"Saturation\" and \"Brightness\", whose value texts start with their own\n * channel and name the color; focus follows the axis a key moves, and unless the primary pointer\n * is coarse (touch), only the slider with the Tab stop is exposed. Inside a ColorPicker, leave\n * `value` and `defaultValue` out and it binds to the picker. Fluent's\n * `ColorArea`, with `value`/`onValueChange` for its `color`/`onChange`.\n *\n * @example\n * <ColorArea aria-label=\"Accent color\" value={color} onValueChange={setColor} />\n */\nexport const ColorArea = ({\n  value,\n  defaultValue,\n  onValueChange,\n  shape,\n  labels,\n  disabled = false,\n  name,\n  form,\n  required,\n  controlRef,\n  className,\n  style,\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  autoFocus,\n  tabIndex,\n  onKeyDown,\n  onPointerDown,\n  onPointerMove,\n  ref,\n  ...rest\n}: ColorAreaProps) => {\n  const part = useColorPartState({ value, defaultValue, onValueChange, disabled });\n  const { picker } = part;\n  const strings = {\n    ...DEFAULT_LABELS,\n    ...(picker && {\n      saturation: picker.labels.saturation,\n      brightness: picker.labels.brightness,\n      roleDescription: picker.labels.roleDescription,\n      colorName: picker.labels.colorName,\n      valueText: picker.labels.valueText,\n    }),\n    ...labels,\n  };\n  const resolvedShape = shape ?? picker?.shape ?? 'rounded';\n  const color = part.color;\n  const shown = displayColor(color);\n  const saturation = toPercent(shown.s);\n  const brightness = toPercent(shown.v);\n\n  const [activeAxis, setActiveAxis] = React.useState<AreaAxis>('saturation');\n  const coarsePointer = useMediaQuery(COARSE_POINTER);\n  const fieldRef = React.useRef<HTMLDivElement>(null);\n  // Bumped on every handled key (not only an axis change), so the layout effect below moves focus\n  // to the axis's input even when the key's axis is the one an earlier assistive-technology change\n  // already made the Tab stop, without moving focus; focusing an input that already has focus does\n  // nothing. Never bumped for an AT-driven change (`handleInputChange`) or a real focus event. A\n  // plain counter, not a ref: react-hooks/refs only allows a ref's `current` to be touched from an\n  // effect, a ref callback or a function assigned directly to a JSX handler prop, not one passed\n  // through `composeEventHandlers`.\n  const [focusToken, setFocusToken] = React.useState(0);\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const saturationRef = React.useRef<HTMLInputElement>(null);\n  const brightnessRef = React.useRef<HTMLInputElement>(null);\n  const mergedRootRef = useMergedRefs(ref, rootRef);\n  const mergedSaturationRef = useMergedRefs(saturationRef, controlRef);\n  /** The last `focusToken` this component already moved focus for (read/written in the effect only). */\n  const handledFocusTokenRef = React.useRef(0);\n\n  React.useLayoutEffect(() => {\n    if (handledFocusTokenRef.current === focusToken) return;\n    handledFocusTokenRef.current = focusToken;\n    (activeAxis === 'saturation' ? saturationRef : brightnessRef).current?.focus({\n      preventScroll: true,\n    });\n  }, [activeAxis, focusToken]);\n\n  const field = useFieldContext();\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label':\n        ariaLabel ?? (picker && ariaLabelledBy === undefined ? picker.labels.area : undefined),\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n    },\n    { labelable: false },\n  );\n  // A group supports neither aria-invalid, aria-required nor `required` (ARIA 1.2): the invalid\n  // state goes to both inputs and the required state to the hidden input.\n  const {\n    'aria-invalid': invalid,\n    'aria-required': _ariaRequired,\n    required: _required,\n    ...groupProps\n  } = fieldProps;\n  const isInvalid = invalid !== undefined && invalid !== false && invalid !== 'false';\n  const errorMessageId = (isInvalid && ariaErrorMessage) || undefined;\n  const isRequired =\n    required ?? (ariaRequired === true || ariaRequired === 'true' || (field?.required ?? false));\n\n  useFormReset(rootRef, part.reset, form);\n\n  /** Applies a whole percentage to one axis, keeping the other channels as given. */\n  const applyAxis = (axis: AreaAxis, percent: number) => {\n    if (percent === (axis === 'saturation' ? saturation : brightness)) return;\n    part.setColor(\n      axis === 'saturation' ? { ...color, s: percent / 100 } : { ...color, v: percent / 100 },\n    );\n  };\n\n  const handleKeyDown = composeEventHandlers(\n    onKeyDown,\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (part.disabled || !isOwnEvent(event) || event.nativeEvent.isComposing) return;\n      // A key with Alt, Ctrl or Meta belongs to the browser (Alt+Left is \"back\").\n      if (event.altKey || event.ctrlKey || event.metaKey) return;\n      const step = event.shiftKey ? 10 : 1;\n      let axis: AreaAxis;\n      let next: number;\n      switch (event.key) {\n        case 'ArrowLeft':\n        case 'ArrowRight': {\n          const intent = getArrowIntent(event.key, {\n            orientation: 'horizontal',\n            dir: getDirection(event.currentTarget),\n          });\n          axis = 'saturation';\n          next = saturation + (intent === 'next' ? step : -step);\n          break;\n        }\n        case 'ArrowUp':\n          axis = 'value';\n          next = brightness + step;\n          break;\n        case 'ArrowDown':\n          axis = 'value';\n          next = brightness - step;\n          break;\n        case 'PageUp':\n          axis = 'value';\n          next = brightness + 10;\n          break;\n        case 'PageDown':\n          axis = 'value';\n          next = brightness - 10;\n          break;\n        case 'Home':\n          axis = 'saturation';\n          next = 0;\n          break;\n        case 'End':\n          axis = 'saturation';\n          next = 100;\n          break;\n        default:\n          return;\n      }\n      // Prevented, so the native range input never moves on its own.\n      event.preventDefault();\n      if (axis !== activeAxis) setActiveAxis(axis);\n      // Every handled key moves focus to its axis's input, even when an earlier\n      // assistive-technology change already made that axis the Tab stop.\n      setFocusToken((token) => token + 1);\n      applyAxis(axis, clampPercent(next));\n    },\n  );\n\n  /** A change event from assistive technology (a swipe): that input becomes the Tab stop. */\n  const handleInputChange = (axis: AreaAxis) => (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (part.disabled) return;\n    if (axis !== activeAxis) setActiveAxis(axis);\n    applyAxis(axis, clampPercent(Math.round(Number(event.currentTarget.value))));\n  };\n\n  const handleInputFocus = (axis: AreaAxis) => () => {\n    if (axis !== activeAxis) setActiveAxis(axis);\n  };\n\n  // Both read a ref (`fieldRef`, or `saturationRef`/`brightnessRef`): `useEventCallback` (a custom\n  // hook, opaque to react-hooks/refs) keeps that safe to call from the handler below, unlike a\n  // plain function or `React.useCallback` passed into the generic `composeEventHandlers`.\n  /** Moves the thumb to the pointer: saturation along x (mirrored in RTL), brightness along y. */\n  const moveToPointer = useEventCallback((event: React.PointerEvent<HTMLDivElement>) => {\n    const fieldElement = fieldRef.current;\n    if (!fieldElement) return;\n    const rect = fieldElement.getBoundingClientRect();\n    if (rect.width <= 0 || rect.height <= 0) return;\n    const x = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));\n    const s = getDirection(event.currentTarget) === 'rtl' ? 1 - x : x;\n    const v = Math.min(1, Math.max(0, 1 - (event.clientY - rect.top) / rect.height));\n    if (s === shown.s && v === shown.v) return;\n    part.setColor({ ...color, s, v });\n  });\n  /**\n   * Focuses the input of the active axis (the press moves focus there instead of the point),\n   * without the focus ring: Chromium treats this script focus as keyboard focus, where the\n   * browser's own focus of a pressed control shows none. Browsers without the `focusVisible`\n   * option ignore it.\n   */\n  const focusActiveAxis = useEventCallback(() => {\n    const options: FocusOptions = { preventScroll: true, focusVisible: false };\n    (activeAxis === 'saturation' ? saturationRef : brightnessRef).current?.focus(options);\n  });\n\n  const handlePointerDown = composeEventHandlers(\n    onPointerDown,\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      if (part.disabled || event.button !== 0 || !event.isPrimary || !isOwnEvent(event)) return;\n      // No text selection and no focus move of the press: focus goes to the Tab stop instead.\n      event.preventDefault();\n      event.currentTarget.setPointerCapture(event.pointerId);\n      moveToPointer(event);\n      focusActiveAxis();\n    },\n  );\n\n  // The drag lasts while the root holds the pointer; losing the capture (pointerup,\n  // lostpointercapture) ends it.\n  const handlePointerMove = composeEventHandlers(\n    onPointerMove,\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      if (part.disabled || !event.currentTarget.hasPointerCapture(event.pointerId)) return;\n      moveToPointer(event);\n    },\n  );\n\n  const textLabels = {\n    saturation: strings.saturation,\n    brightness: strings.brightness,\n    colorName: strings.colorName,\n    valueText: strings.valueText,\n  };\n\n  const areaStyle = {\n    ...style,\n    '--wave-color-area-gradient': colorAreaGradient(shown.h),\n    '--wave-color-area-x': toPosition(shown.s),\n    '--wave-color-area-y': toPosition(shown.v),\n    '--wave-color-thumb': hsvToHex({ h: shown.h, s: shown.s, v: shown.v }),\n  } as React.CSSProperties;\n\n  const inputProps = (axis: AreaAxis) => ({\n    type: 'range' as const,\n    min: 0,\n    max: 100,\n    step: 1,\n    disabled: part.disabled,\n    'aria-roledescription': strings.roleDescription,\n    'aria-invalid': invalid,\n    'aria-errormessage': errorMessageId,\n    // One Tab stop: the input used last (C-ROUTING: a consumer tabIndex applies to it).\n    tabIndex: axis === activeAxis ? (tabIndex ?? 0) : -1,\n    // Where the primary pointer is not coarse, desktop screen readers meet one 2-D slider: the\n    // input without the Tab stop is hidden (it stays focusable by script, never by Tab).\n    'aria-hidden': axis !== activeAxis && !coarsePointer ? true : undefined,\n    onChange: handleInputChange(axis),\n    onFocus: handleInputFocus(axis),\n    className: 'sr-only',\n  });\n\n  return (\n    <div\n      role=\"group\"\n      data-disabled={part.disabled ? '' : undefined}\n      {...groupProps}\n      className={cn(\n        colorAreaClassNames.root,\n        'group/color-area relative h-40 w-full min-w-40 touch-none select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n        resolvedShape === 'square' ? 'rounded-none' : 'rounded',\n        className,\n      )}\n      style={areaStyle}\n      {...rest}\n      ref={mergedRootRef}\n      onKeyDown={handleKeyDown}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n    >\n      <div\n        ref={fieldRef}\n        aria-hidden=\"true\"\n        className={cn(\n          colorAreaClassNames.field,\n          'absolute inset-0 rounded-[inherit] bg-(image:--wave-color-area-gradient) wave-rtl:-scale-x-100 forced-colors:forced-color-adjust-none',\n        )}\n      />\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          colorAreaClassNames.thumb,\n          COLOR_THUMB_CLASSES,\n          'start-(--wave-color-area-x) bottom-(--wave-color-area-y) -translate-x-1/2 wave-rtl:translate-x-1/2 translate-y-1/2',\n          'group-has-[:focus-visible]/color-area:ring-2 group-has-[:focus-visible]/color-area:ring-background forced-colors:group-has-[:focus-visible]/color-area:ring-[Canvas] group-has-[:focus-visible]/color-area:outline-2 group-has-[:focus-visible]/color-area:outline-offset-2 group-has-[:focus-visible]/color-area:outline-ring forced-colors:group-has-[:focus-visible]/color-area:outline-[Highlight]',\n        )}\n      />\n      <input\n        {...inputProps('saturation')}\n        ref={mergedSaturationRef}\n        value={saturation}\n        aria-label={strings.saturation}\n        aria-valuetext={areaValueText(shown, 'saturation', textLabels)}\n        autoFocus={autoFocus}\n      />\n      <input\n        {...inputProps('value')}\n        ref={brightnessRef}\n        value={brightness}\n        aria-label={strings.brightness}\n        aria-orientation=\"vertical\"\n        aria-valuetext={areaValueText(shown, 'value', textLabels)}\n      />\n      {!picker && (\n        <HiddenInput\n          type=\"text\"\n          name={name}\n          form={form}\n          disabled={part.disabled}\n          value={hsvToHex(color)}\n          required={isRequired}\n          onInvalid={() =>\n            (activeAxis === 'saturation' ? saturationRef : brightnessRef).current?.focus()\n          }\n        />\n      )}\n    </div>\n  );\n};\n\nColorArea.displayName = 'ColorArea';\n"],"mappings":"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"}

package/dist/components/input/ColorArea.mjs

@@ -0,0 +1,204 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { composeEventHandlers as t } from "../../lib/composeEventHandlers.mjs";
+import { colorAreaClassNames as n } from "../../lib/classNames.mjs";
+import { hsvToHex as r } from "../../lib/color.mjs";
+import { useEventCallback as i } from "../../hooks/useEventCallback.mjs";
+import { getArrowIntent as a, getDirection as o } from "../../lib/direction.mjs";
+import { useMergedRefs as s } from "../../hooks/useMergedRefs.mjs";
+import { useFieldContext as ee, useFieldControl as c } from "../../hooks/useFieldControl.mjs";
+import { useMediaQuery as l } from "../../hooks/useMediaQuery.mjs";
+import { useFormReset as u } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as te } from "../internal/HiddenInput.mjs";
+import { COLOR_THUMB_CLASSES as ne, areaValueText as d, colorAreaGradient as re, displayColor as ie, toPercent as f, toPosition as p } from "./colorUtils.mjs";
+import { useColorPartState as m } from "./ColorPicker.parts.mjs";
+import { isOwnEvent as h } from "../../lib/events.mjs";
+import * as g from "react";
+import { jsx as _, jsxs as ae } from "react/jsx-runtime";
+//#region src/components/input/ColorArea.tsx
+var oe = {
+	saturation: "Saturation",
+	brightness: "Brightness",
+	roleDescription: "2D slider"
+};
+function v(e) {
+	return Math.min(100, Math.max(0, e));
+}
+var se = "(pointer: coarse)", y = ({ value: y, defaultValue: ce, onValueChange: le, shape: ue, labels: de, disabled: fe = !1, name: pe, form: b, required: me, controlRef: he, className: ge, style: _e, id: ve, "aria-label": ye, "aria-labelledby": x, "aria-describedby": S, "aria-invalid": C, "aria-required": w, "aria-errormessage": T, autoFocus: E, tabIndex: D, onKeyDown: O, onPointerDown: k, onPointerMove: A, ref: j, ...M }) => {
+	let N = m({
+		value: y,
+		defaultValue: ce,
+		onValueChange: le,
+		disabled: fe
+	}), { picker: P } = N, F = {
+		...oe,
+		...P && {
+			saturation: P.labels.saturation,
+			brightness: P.labels.brightness,
+			roleDescription: P.labels.roleDescription,
+			colorName: P.labels.colorName,
+			valueText: P.labels.valueText
+		},
+		...de
+	}, be = ue ?? P?.shape ?? "rounded", I = N.color, L = ie(I), R = f(L.s), z = f(L.v), [B, V] = g.useState("saturation"), xe = l(se), H = g.useRef(null), [U, Se] = g.useState(0), W = g.useRef(null), G = g.useRef(null), K = g.useRef(null), Ce = s(j, W), we = s(G, he), q = g.useRef(0);
+	g.useLayoutEffect(() => {
+		q.current !== U && (q.current = U, (B === "saturation" ? G : K).current?.focus({ preventScroll: !0 }));
+	}, [B, U]);
+	let Te = ee(), { "aria-invalid": J, "aria-required": Ee, required: De, ...Oe } = c({
+		id: ve,
+		"aria-label": ye ?? (P && x === void 0 ? P.labels.area : void 0),
+		"aria-labelledby": x,
+		"aria-describedby": S,
+		"aria-invalid": C
+	}, { labelable: !1 }), ke = J !== void 0 && J !== !1 && J !== "false" && T || void 0, Ae = me ?? (w === !0 || w === "true" || (Te?.required ?? !1));
+	u(W, N.reset, b);
+	let Y = (e, t) => {
+		t !== (e === "saturation" ? R : z) && N.setColor(e === "saturation" ? {
+			...I,
+			s: t / 100
+		} : {
+			...I,
+			v: t / 100
+		});
+	}, X = t(O, (e) => {
+		if (N.disabled || !h(e) || e.nativeEvent.isComposing || e.altKey || e.ctrlKey || e.metaKey) return;
+		let t = e.shiftKey ? 10 : 1, n, r;
+		switch (e.key) {
+			case "ArrowLeft":
+			case "ArrowRight": {
+				let i = a(e.key, {
+					orientation: "horizontal",
+					dir: o(e.currentTarget)
+				});
+				n = "saturation", r = R + (i === "next" ? t : -t);
+				break;
+			}
+			case "ArrowUp":
+				n = "value", r = z + t;
+				break;
+			case "ArrowDown":
+				n = "value", r = z - t;
+				break;
+			case "PageUp":
+				n = "value", r = z + 10;
+				break;
+			case "PageDown":
+				n = "value", r = z - 10;
+				break;
+			case "Home":
+				n = "saturation", r = 0;
+				break;
+			case "End":
+				n = "saturation", r = 100;
+				break;
+			default: return;
+		}
+		e.preventDefault(), n !== B && V(n), Se((e) => e + 1), Y(n, v(r));
+	}), je = (e) => (t) => {
+		N.disabled || (e !== B && V(e), Y(e, v(Math.round(Number(t.currentTarget.value)))));
+	}, Me = (e) => () => {
+		e !== B && V(e);
+	}, Z = i((e) => {
+		let t = H.current;
+		if (!t) return;
+		let n = t.getBoundingClientRect();
+		if (n.width <= 0 || n.height <= 0) return;
+		let r = Math.min(1, Math.max(0, (e.clientX - n.left) / n.width)), i = o(e.currentTarget) === "rtl" ? 1 - r : r, a = Math.min(1, Math.max(0, 1 - (e.clientY - n.top) / n.height));
+		(i !== L.s || a !== L.v) && N.setColor({
+			...I,
+			s: i,
+			v: a
+		});
+	}), Ne = i(() => {
+		(B === "saturation" ? G : K).current?.focus({
+			preventScroll: !0,
+			focusVisible: !1
+		});
+	}), Pe = t(k, (e) => {
+		!N.disabled && e.button === 0 && e.isPrimary && h(e) && (e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), Z(e), Ne());
+	}), Fe = t(A, (e) => {
+		!N.disabled && e.currentTarget.hasPointerCapture(e.pointerId) && Z(e);
+	}), Q = {
+		saturation: F.saturation,
+		brightness: F.brightness,
+		colorName: F.colorName,
+		valueText: F.valueText
+	}, Ie = {
+		..._e,
+		"--wave-color-area-gradient": re(L.h),
+		"--wave-color-area-x": p(L.s),
+		"--wave-color-area-y": p(L.v),
+		"--wave-color-thumb": r({
+			h: L.h,
+			s: L.s,
+			v: L.v
+		})
+	}, $ = (e) => ({
+		type: "range",
+		min: 0,
+		max: 100,
+		step: 1,
+		disabled: N.disabled,
+		"aria-roledescription": F.roleDescription,
+		"aria-invalid": J,
+		"aria-errormessage": ke,
+		tabIndex: e === B ? D ?? 0 : -1,
+		"aria-hidden": e !== B && !xe || void 0,
+		onChange: je(e),
+		onFocus: Me(e),
+		className: "sr-only"
+	});
+	return /* @__PURE__ */ ae("div", {
+		role: "group",
+		"data-disabled": N.disabled ? "" : void 0,
+		...Oe,
+		className: e(n.root, "group/color-area relative h-40 w-full min-w-40 touch-none select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", be === "square" ? "rounded-none" : "rounded", ge),
+		style: Ie,
+		...M,
+		ref: Ce,
+		onKeyDown: X,
+		onPointerDown: Pe,
+		onPointerMove: Fe,
+		children: [
+			/* @__PURE__ */ _("div", {
+				ref: H,
+				"aria-hidden": "true",
+				className: e(n.field, "absolute inset-0 rounded-[inherit] bg-(image:--wave-color-area-gradient) wave-rtl:-scale-x-100 forced-colors:forced-color-adjust-none")
+			}),
+			/* @__PURE__ */ _("span", {
+				"aria-hidden": "true",
+				className: e(n.thumb, ne, "start-(--wave-color-area-x) bottom-(--wave-color-area-y) -translate-x-1/2 wave-rtl:translate-x-1/2 translate-y-1/2", "group-has-[:focus-visible]/color-area:ring-2 group-has-[:focus-visible]/color-area:ring-background forced-colors:group-has-[:focus-visible]/color-area:ring-[Canvas] group-has-[:focus-visible]/color-area:outline-2 group-has-[:focus-visible]/color-area:outline-offset-2 group-has-[:focus-visible]/color-area:outline-ring forced-colors:group-has-[:focus-visible]/color-area:outline-[Highlight]")
+			}),
+			/* @__PURE__ */ _("input", {
+				...$("saturation"),
+				ref: we,
+				value: R,
+				"aria-label": F.saturation,
+				"aria-valuetext": d(L, "saturation", Q),
+				autoFocus: E
+			}),
+			/* @__PURE__ */ _("input", {
+				...$("value"),
+				ref: K,
+				value: z,
+				"aria-label": F.brightness,
+				"aria-orientation": "vertical",
+				"aria-valuetext": d(L, "value", Q)
+			}),
+			!P && /* @__PURE__ */ _(te, {
+				type: "text",
+				name: pe,
+				form: b,
+				disabled: N.disabled,
+				value: r(I),
+				required: Ae,
+				onInvalid: () => (B === "saturation" ? G : K).current?.focus()
+			})
+		]
+	});
+};
+y.displayName = "ColorArea";
+//#endregion
+export { y as ColorArea };
+
+//# sourceMappingURL=ColorArea.mjs.map