@mortenbrudvik/waveui 0.4.0 → 0.8.0

package/dist/components/input/SwatchPicker.cjs

@@ -0,0 +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("../../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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchPicker.cjs","names":["getCheckColors","CheckIcon","useControllable","useRovingTabIndex","React","useMergedRefs","useFieldContext","useFieldControl","cn","swatchPickerClassNames","composeEventHandlers","motionSafeTransition","forcedColors","focusRing","HiddenInput","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_classNames","require_useControllable","require_useRovingTabIndex","require_useMergedRefs","require_useFieldControl","require_styles","require_icons","require_useFormReset","require_HiddenInput","require_colorUtils","react","react_jsx_runtime","sizeMap","checkSizeMap","shapeMap","SwatchCheck","color","halo","glyph","SwatchPicker","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","onChange","initialValue","defaultValue","value","setValue","onValueChange","next","rootRef","mergedRef","ref","containerProps","field","fieldProps","required","isRequired","unnamed","unlabelledItem","items","item","form","focusTabStop","className","onKeyDown","onFocus","isSelected","getTabIndex","size","shape"],"sources":["../../../src/components/input/SwatchPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { swatchPickerClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { CheckIcon } from '../../lib/icons';\nimport { focusRing, forcedColors, motionSafeTransition } from '../../lib/styles';\nimport type { Shape, Size } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { getCheckColors } from './colorUtils';\n\n/** Represents a single color swatch option. */\nexport interface SwatchItem {\n  /** Unique identifier for the swatch (the value `onValueChange` reports and a form submits). */\n  value: string;\n  /** CSS color value (e.g., hex, rgb) used as the swatch background. */\n  color: string;\n  /**\n   * Accessible name of the swatch, e.g. `'Cranberry'`. **Required for accessibility**: without it\n   * the swatch is announced by its raw color value (`'#d13438'`) and a development warning is\n   * logged.\n   */\n  label?: string;\n}\n\n/** Size of the swatches. */\nexport type SwatchPickerSize = Extract<Size, 'small' | 'medium' | 'large'>;\n\n/** Properties for the SwatchPicker component. */\nexport interface SwatchPickerProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** The swatches to display, in order (a readonly array is accepted; it is never modified). */\n  items: readonly SwatchItem[];\n  /** Controlled selected swatch value (`''` = nothing selected). */\n  value?: string;\n  /** Initial selected value for uncontrolled usage (also what a form reset restores).\n   * @default ''\n   */\n  defaultValue?: string;\n  /** Called with the new value when the selection changes (not when the selected swatch is chosen again). */\n  onValueChange?: (value: string) => void;\n  /**\n   * Called with the new value when the selection changes.\n   * @deprecated Use `onValueChange`.\n   */\n  onChange?: (value: string) => void;\n  /** Size of each swatch button (24, 32 or 40px).\n   * @default 'medium'\n   */\n  size?: SwatchPickerSize;\n  /** Shape of each swatch button.\n   * @default 'circular'\n   */\n  shape?: Shape;\n  /**\n   * Form field name. With a name, the selected swatch's `value` is submitted with the form\n   * (nothing while no swatch is selected).\n   */\n  name?: string;\n  /** A swatch must be selected before the form can be submitted (native validation). */\n  required?: boolean;\n  /** Id of the form the picker belongs to, when it is rendered outside that form. */\n  form?: string;\n  /** Ref to the `role=\"radiogroup\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst sizeMap: Record<SwatchPickerSize, string> = {\n  small: 'w-6 h-6',\n  medium: 'w-8 h-8',\n  large: 'w-10 h-10',\n};\n\nconst checkSizeMap: Record<SwatchPickerSize, number> = {\n  small: 12,\n  medium: 16,\n  large: 20,\n};\n\nconst shapeMap: Record<Shape, string> = {\n  circular: 'rounded-full',\n  square: 'rounded-none',\n  rounded: 'rounded',\n};\n\n/**\n * The check glyph of the selected swatch: black or white by the swatch's luminance, drawn over a\n * halo in the other color so it stays visible on any swatch (C-TOKENS exception for\n * user-supplied colors, `input-pickers#16`).\n */\nfunction SwatchCheck({ color, size }: { color: string; size: number }) {\n  const { glyph, halo } = getCheckColors(color);\n  return (\n    <span aria-hidden=\"true\" className=\"pointer-events-none grid\">\n      <CheckIcon\n        size={size}\n        strokeWidth={4}\n        className=\"col-start-1 row-start-1\"\n        style={{ color: halo }}\n      />\n      <CheckIcon\n        size={size}\n        strokeWidth={2}\n        className=\"col-start-1 row-start-1\"\n        style={{ color: glyph }}\n      />\n    </span>\n  );\n}\n\n/**\n * A single-select grid of color swatches (`role=\"radiogroup\"` of `role=\"radio\"` buttons).\n *\n * - **Keyboard** (APG radio group): one tab stop — the selected swatch, else the first. All four\n *   arrow keys move focus and select (Left/Right mirrored under `dir=\"rtl\"`), wrapping at the\n *   ends; Home/End jump to the first/last swatch.\n * - **Selected indicator**: an offset ring in the foreground color (drawn on the page background,\n *   not on the swatch) plus a check glyph whose color is picked by the swatch's luminance, so the\n *   selection never relies on color alone.\n * - **Naming**: give the group a name with `aria-label`/`aria-labelledby` or render it inside a\n *   `Field`, and give every item a `label`; both are reported in development when missing.\n * - **Forms**: with `name` (or `required`) it takes part in native forms; a form reset restores\n *   `defaultValue`.\n *\n * @example\n * <SwatchPicker aria-label=\"Accent color\" items={[{ value: 'red', color: '#d13438', label: 'Red' }]} />\n */\nexport const SwatchPicker = ({\n  items,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onChange,\n  size = 'medium',\n  shape = 'circular',\n  name,\n  required,\n  form,\n  className,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  onKeyDown,\n  onFocus,\n  ref,\n  ...rest\n}: SwatchPickerProps) => {\n  if (onChange !== undefined) warnDeprecated('SwatchPicker', 'onChange', 'onValueChange');\n  const initialValue = defaultValue ?? '';\n  const [value, setValue] = useControllable(valueProp, initialValue, (next: string) => {\n    onValueChange?.(next);\n    onChange?.(next);\n  });\n\n  const { containerProps, getTabIndex } = useRovingTabIndex({\n    activeValue: value || null,\n    orientation: 'both',\n    // APG radio group: moving focus also selects.\n    onFocusMove: (next) => setValue(next),\n  });\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, containerProps.ref, rootRef);\n\n  const field = useFieldContext();\n  const fieldProps = useFieldControl(\n    {\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 matches\n      // `isRequired`.\n      'aria-required': ariaRequired ?? required,\n    },\n    { labelable: false },\n  );\n  const isRequired = required ?? field?.required ?? false;\n\n  const unnamed =\n    fieldProps['aria-label'] === undefined && fieldProps['aria-labelledby'] === undefined;\n  const unlabelledItem = items.find((item) => !item.label)?.value;\n  React.useEffect(() => {\n    if (unnamed) {\n      warnOnce(\n        'SwatchPicker:unnamed',\n        'SwatchPicker: the radiogroup has no accessible name. Pass `aria-label` or `aria-labelledby`, or render it inside a Field.',\n      );\n    }\n  }, [unnamed]);\n  React.useEffect(() => {\n    if (unlabelledItem !== undefined) {\n      warnOnce(\n        'SwatchPicker:item-label',\n        `SwatchPicker: swatch \"${unlabelledItem}\" has no \\`label\\`, so it is announced by its color value. Give every item a \\`label\\`.`,\n      );\n    }\n  }, [unlabelledItem]);\n\n  useFormReset(rootRef, () => setValue(initialValue), form);\n\n  const focusTabStop = () => {\n    rootRef.current?.querySelector<HTMLElement>('[data-roving-value][tabindex=\"0\"]')?.focus();\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      {...fieldProps}\n      className={cn(swatchPickerClassNames.root, 'relative flex flex-wrap gap-2', className)}\n      {...rest}\n      ref={mergedRef}\n      data-roving-container=\"\"\n      onKeyDown={composeEventHandlers(onKeyDown, containerProps.onKeyDown)}\n      onFocus={composeEventHandlers(onFocus, containerProps.onFocus, {\n        checkDefaultPrevented: false,\n      })}\n    >\n      {items.map((item) => {\n        const isSelected = value === item.value;\n        return (\n          <button\n            key={item.value}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isSelected}\n            aria-label={item.label || item.color}\n            data-roving-value={item.value}\n            data-selected={isSelected ? '' : undefined}\n            tabIndex={getTabIndex(item.value)}\n            onClick={() => setValue(item.value)}\n            className={cn(\n              swatchPickerClassNames.swatch,\n              sizeMap[size],\n              shapeMap[shape],\n              // The padding is set here (C-NATIVE); the swatch color is its background.\n              'relative flex shrink-0 items-center justify-center border-2 border-transparent p-0',\n              motionSafeTransition,\n              // User colors are the content: keep them (and the check glyph) in forced colors.\n              'forced-colors:forced-color-adjust-none',\n              forcedColors.border,\n              focusRing,\n              // Outside the selection ring, so both stay visible together.\n              'focus-visible:outline-offset-4',\n              isSelected\n                ? 'ring-2 ring-foreground ring-offset-2 ring-offset-background'\n                : 'hover:border-stroke-hover',\n            )}\n            style={{ backgroundColor: item.color }}\n          >\n            {isSelected && <SwatchCheck color={item.color} size={checkSizeMap[size]} />}\n          </button>\n        );\n      })}\n      <HiddenInput\n        type=\"radio\"\n        name={name}\n        form={form}\n        value={value}\n        required={isRequired}\n        onInvalid={focusTabStop}\n      />\n    </div>\n  );\n};\n\nSwatchPicker.displayName = 'SwatchPicker';\n"],"mappings":"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"}

package/dist/components/input/SwatchPicker.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchPicker.mjs","names":["React","sizeMap","checkSizeMap","shapeMap","SwatchCheck","getCheckColors","color","CheckIcon","halo","glyph","SwatchPicker","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","onChange","warnDeprecated","initialValue","defaultValue","value","setValue","useControllable","onValueChange","next","useRovingTabIndex","rootRef","mergedRef","useMergedRefs","ref","containerProps","field","useFieldContext","fieldProps","useFieldControl","required","isRequired","unnamed","unlabelledItem","items","item","warnOnce","useFormReset","form","focusTabStop","cn","swatchPickerClassNames","className","composeEventHandlers","onKeyDown","onFocus","isSelected","getTabIndex","size","shape","motionSafeTransition","forcedColors","focusRing","HiddenInput"],"sources":["../../../src/components/input/SwatchPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { swatchPickerClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { CheckIcon } from '../../lib/icons';\nimport { focusRing, forcedColors, motionSafeTransition } from '../../lib/styles';\nimport type { Shape, Size } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { getCheckColors } from './colorUtils';\n\n/** Represents a single color swatch option. */\nexport interface SwatchItem {\n  /** Unique identifier for the swatch (the value `onValueChange` reports and a form submits). */\n  value: string;\n  /** CSS color value (e.g., hex, rgb) used as the swatch background. */\n  color: string;\n  /**\n   * Accessible name of the swatch, e.g. `'Cranberry'`. **Required for accessibility**: without it\n   * the swatch is announced by its raw color value (`'#d13438'`) and a development warning is\n   * logged.\n   */\n  label?: string;\n}\n\n/** Size of the swatches. */\nexport type SwatchPickerSize = Extract<Size, 'small' | 'medium' | 'large'>;\n\n/** Properties for the SwatchPicker component. */\nexport interface SwatchPickerProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** The swatches to display, in order (a readonly array is accepted; it is never modified). */\n  items: readonly SwatchItem[];\n  /** Controlled selected swatch value (`''` = nothing selected). */\n  value?: string;\n  /** Initial selected value for uncontrolled usage (also what a form reset restores).\n   * @default ''\n   */\n  defaultValue?: string;\n  /** Called with the new value when the selection changes (not when the selected swatch is chosen again). */\n  onValueChange?: (value: string) => void;\n  /**\n   * Called with the new value when the selection changes.\n   * @deprecated Use `onValueChange`.\n   */\n  onChange?: (value: string) => void;\n  /** Size of each swatch button (24, 32 or 40px).\n   * @default 'medium'\n   */\n  size?: SwatchPickerSize;\n  /** Shape of each swatch button.\n   * @default 'circular'\n   */\n  shape?: Shape;\n  /**\n   * Form field name. With a name, the selected swatch's `value` is submitted with the form\n   * (nothing while no swatch is selected).\n   */\n  name?: string;\n  /** A swatch must be selected before the form can be submitted (native validation). */\n  required?: boolean;\n  /** Id of the form the picker belongs to, when it is rendered outside that form. */\n  form?: string;\n  /** Ref to the `role=\"radiogroup\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst sizeMap: Record<SwatchPickerSize, string> = {\n  small: 'w-6 h-6',\n  medium: 'w-8 h-8',\n  large: 'w-10 h-10',\n};\n\nconst checkSizeMap: Record<SwatchPickerSize, number> = {\n  small: 12,\n  medium: 16,\n  large: 20,\n};\n\nconst shapeMap: Record<Shape, string> = {\n  circular: 'rounded-full',\n  square: 'rounded-none',\n  rounded: 'rounded',\n};\n\n/**\n * The check glyph of the selected swatch: black or white by the swatch's luminance, drawn over a\n * halo in the other color so it stays visible on any swatch (C-TOKENS exception for\n * user-supplied colors, `input-pickers#16`).\n */\nfunction SwatchCheck({ color, size }: { color: string; size: number }) {\n  const { glyph, halo } = getCheckColors(color);\n  return (\n    <span aria-hidden=\"true\" className=\"pointer-events-none grid\">\n      <CheckIcon\n        size={size}\n        strokeWidth={4}\n        className=\"col-start-1 row-start-1\"\n        style={{ color: halo }}\n      />\n      <CheckIcon\n        size={size}\n        strokeWidth={2}\n        className=\"col-start-1 row-start-1\"\n        style={{ color: glyph }}\n      />\n    </span>\n  );\n}\n\n/**\n * A single-select grid of color swatches (`role=\"radiogroup\"` of `role=\"radio\"` buttons).\n *\n * - **Keyboard** (APG radio group): one tab stop — the selected swatch, else the first. All four\n *   arrow keys move focus and select (Left/Right mirrored under `dir=\"rtl\"`), wrapping at the\n *   ends; Home/End jump to the first/last swatch.\n * - **Selected indicator**: an offset ring in the foreground color (drawn on the page background,\n *   not on the swatch) plus a check glyph whose color is picked by the swatch's luminance, so the\n *   selection never relies on color alone.\n * - **Naming**: give the group a name with `aria-label`/`aria-labelledby` or render it inside a\n *   `Field`, and give every item a `label`; both are reported in development when missing.\n * - **Forms**: with `name` (or `required`) it takes part in native forms; a form reset restores\n *   `defaultValue`.\n *\n * @example\n * <SwatchPicker aria-label=\"Accent color\" items={[{ value: 'red', color: '#d13438', label: 'Red' }]} />\n */\nexport const SwatchPicker = ({\n  items,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onChange,\n  size = 'medium',\n  shape = 'circular',\n  name,\n  required,\n  form,\n  className,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  onKeyDown,\n  onFocus,\n  ref,\n  ...rest\n}: SwatchPickerProps) => {\n  if (onChange !== undefined) warnDeprecated('SwatchPicker', 'onChange', 'onValueChange');\n  const initialValue = defaultValue ?? '';\n  const [value, setValue] = useControllable(valueProp, initialValue, (next: string) => {\n    onValueChange?.(next);\n    onChange?.(next);\n  });\n\n  const { containerProps, getTabIndex } = useRovingTabIndex({\n    activeValue: value || null,\n    orientation: 'both',\n    // APG radio group: moving focus also selects.\n    onFocusMove: (next) => setValue(next),\n  });\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, containerProps.ref, rootRef);\n\n  const field = useFieldContext();\n  const fieldProps = useFieldControl(\n    {\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 matches\n      // `isRequired`.\n      'aria-required': ariaRequired ?? required,\n    },\n    { labelable: false },\n  );\n  const isRequired = required ?? field?.required ?? false;\n\n  const unnamed =\n    fieldProps['aria-label'] === undefined && fieldProps['aria-labelledby'] === undefined;\n  const unlabelledItem = items.find((item) => !item.label)?.value;\n  React.useEffect(() => {\n    if (unnamed) {\n      warnOnce(\n        'SwatchPicker:unnamed',\n        'SwatchPicker: the radiogroup has no accessible name. Pass `aria-label` or `aria-labelledby`, or render it inside a Field.',\n      );\n    }\n  }, [unnamed]);\n  React.useEffect(() => {\n    if (unlabelledItem !== undefined) {\n      warnOnce(\n        'SwatchPicker:item-label',\n        `SwatchPicker: swatch \"${unlabelledItem}\" has no \\`label\\`, so it is announced by its color value. Give every item a \\`label\\`.`,\n      );\n    }\n  }, [unlabelledItem]);\n\n  useFormReset(rootRef, () => setValue(initialValue), form);\n\n  const focusTabStop = () => {\n    rootRef.current?.querySelector<HTMLElement>('[data-roving-value][tabindex=\"0\"]')?.focus();\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      {...fieldProps}\n      className={cn(swatchPickerClassNames.root, 'relative flex flex-wrap gap-2', className)}\n      {...rest}\n      ref={mergedRef}\n      data-roving-container=\"\"\n      onKeyDown={composeEventHandlers(onKeyDown, containerProps.onKeyDown)}\n      onFocus={composeEventHandlers(onFocus, containerProps.onFocus, {\n        checkDefaultPrevented: false,\n      })}\n    >\n      {items.map((item) => {\n        const isSelected = value === item.value;\n        return (\n          <button\n            key={item.value}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isSelected}\n            aria-label={item.label || item.color}\n            data-roving-value={item.value}\n            data-selected={isSelected ? '' : undefined}\n            tabIndex={getTabIndex(item.value)}\n            onClick={() => setValue(item.value)}\n            className={cn(\n              swatchPickerClassNames.swatch,\n              sizeMap[size],\n              shapeMap[shape],\n              // The padding is set here (C-NATIVE); the swatch color is its background.\n              'relative flex shrink-0 items-center justify-center border-2 border-transparent p-0',\n              motionSafeTransition,\n              // User colors are the content: keep them (and the check glyph) in forced colors.\n              'forced-colors:forced-color-adjust-none',\n              forcedColors.border,\n              focusRing,\n              // Outside the selection ring, so both stay visible together.\n              'focus-visible:outline-offset-4',\n              isSelected\n                ? 'ring-2 ring-foreground ring-offset-2 ring-offset-background'\n                : 'hover:border-stroke-hover',\n            )}\n            style={{ backgroundColor: item.color }}\n          >\n            {isSelected && <SwatchCheck color={item.color} size={checkSizeMap[size]} />}\n          </button>\n        );\n      })}\n      <HiddenInput\n        type=\"radio\"\n        name={name}\n        form={form}\n        value={value}\n        required={isRequired}\n        onInvalid={focusTabStop}\n      />\n    </div>\n  );\n};\n\nSwatchPicker.displayName = 'SwatchPicker';\n"],"mappings":"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"}

package/dist/components/input/Switch.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),ee=require("../../lib/composeEventHandlers.cjs"),i=require("../../lib/classNames.cjs"),te=require("../../hooks/useControllable.cjs"),a=require("../../hooks/useId.cjs"),o=require("../../hooks/useMergedRefs.cjs"),s=require("../../lib/aria.cjs"),c=require("../../hooks/useFieldControl.cjs"),l=require("../../lib/styles.cjs"),ne=require("../../hooks/useFormReset.cjs"),re=require("../internal/HiddenInput.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=`forced-colors:border-[Highlight] forced-colors:bg-[Highlight]`,p=`forced-colors:border-[GrayText] forced-colors:bg-[Canvas]`,m=({checked:e,defaultChecked:m=!1,onCheckedChange:h,onChange:g,disabled:_=!1,disabledFocusable:v=!1,label:y,labelPosition:b=`after`,name:x,value:S,required:C,form:w,id:ie,"aria-label":ae,"aria-labelledby":oe,"aria-describedby":T,"aria-invalid":E,"aria-required":D,"aria-errormessage":O,"aria-details":k,"aria-disabled":A,autoFocus:j,tabIndex:M,onClick:N,onFocus:P,onBlur:F,onKeyDown:I,onKeyUp:L,controlRef:R,className:z,children:se,ref:B,...V})=>{g!==void 0&&n.warnDeprecated(`Switch`,`onChange`,`onCheckedChange`);let H=r.slotRendersContent(se);u.useEffect(()=>{H&&n.warnOnce(`Switch:children`,"Switch: children are not rendered. Pass the label in `label`.")},[H]);let[U,W]=te.useControllable(e,m,e=>{h?.(e),g?.(e)}),G=a.useId(`switch`),K=a.useId(`switch-label`),q=c.useFieldContext(),J=c.useFieldControl({id:ie,"aria-label":ae,"aria-labelledby":oe,"aria-describedby":T,"aria-invalid":E,"aria-required":D??C}),ce=C??q?.required??!1,Y=r.slotRendersContent(y),le=Y&&J[`aria-label`]===void 0?s.joinIds(J[`aria-labelledby`],q&&J.id===q.controlId?q.labelId:void 0,K):J[`aria-labelledby`],X=u.useRef(null),ue=o.useMergedRefs(X,R);ne.useFormReset(X,()=>W(m),w);let Z=Y?(0,d.jsx)(`span`,{id:K,className:t.cn(i.switchClassNames.label,`text-body-1 text-foreground`),children:r.materialiseSlotContent(y)}):null,Q=b===`before`||b===`above`,$=_||v;return(0,d.jsxs)(`label`,{ref:B,"data-label-position":b,className:t.cn(i.switchClassNames.root,`relative inline-flex items-start gap-2 select-none`,b===`above`&&`flex-col gap-1`,$?`cursor-not-allowed opacity-50 has-focus-visible:opacity-100`:`cursor-pointer`,z),...V,children:[Q&&Z,(0,d.jsx)(`button`,{id:G,type:`button`,...J,"aria-labelledby":le,"aria-errormessage":O,"aria-details":k,"aria-disabled":A,autoFocus:j,tabIndex:M,onFocus:P,onBlur:F,onKeyDown:I,onKeyUp:L,ref:ue,role:`switch`,"aria-checked":U,disabled:_&&!v,...s.focusableDisabledProps(v,{reachable:!0}),onClick:v?e=>{e.preventDefault(),e.stopPropagation()}:ee.composeEventHandlers(N,()=>W(e=>!e)),className:t.cn(i.switchClassNames.track,`relative inline-flex h-[20px] w-[40px] shrink-0 items-center rounded-full border p-0 transition-colors duration-200 motion-reduce:transition-none`,l.focusRing,U?t.cn(`border-primary bg-primary`,$?p:f):t.cn(`border-stroke-accessible bg-transparent`,$?l.forcedColors.disabled:l.forcedColors.control)),children:(0,d.jsx)(`span`,{"aria-hidden":`true`,className:t.cn(i.switchClassNames.thumb,`block h-[14px] w-[14px] rounded-full transition-transform duration-200 motion-reduce:transition-none forced-colors:forced-color-adjust-none`,U?`translate-x-[22px] wave-rtl:-translate-x-[22px] bg-primary-foreground`:`translate-x-[2px] wave-rtl:-translate-x-[2px] bg-stroke-accessible`,$?`forced-colors:bg-[GrayText]`:U?`forced-colors:bg-[HighlightText]`:`forced-colors:bg-[ButtonText]`)})}),!Q&&Z,(0,d.jsx)(re.HiddenInput,{type:`checkbox`,name:x,form:w,disabled:$,value:S,checked:U,required:ce,onInvalid:()=>X.current?.focus()})]})};m.displayName=`Switch`,exports.Switch=m;
+//# sourceMappingURL=Switch.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.cjs","names":["slotRendersContent","useControllable","useId","useFieldContext","useFieldControl","joinIds","React","useMergedRefs","cn","switchClassNames","materialiseSlotContent","focusableDisabledProps","composeEventHandlers","focusRing","forcedColors","HiddenInput","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useControllable","require_useId","require_useMergedRefs","require_aria","require_useFieldControl","require_styles","require_useFormReset","require_HiddenInput","react","react_jsx_runtime","onTrack","disabledOnTrack","Switch","checkedProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","ariaDisabled","rest","onChange","hasChildren","children","checked","setChecked","defaultChecked","onCheckedChange","next","generatedId","labelTextId","field","fieldProps","required","isRequired","hasLabel","label","labelledBy","buttonRef","mergedControlRef","controlRef","form","labelText","labelFirst","labelPosition","unavailable","disabled","disabledFocusable","className","event","onClick","prev"],"sources":["../../../src/components/input/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { focusableDisabledProps, joinIds } from '../../lib/aria';\nimport { switchClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\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 track keeps system-color utilities, so the browser still forces its\n * focus outline; only the thumb (the leaf indicator) opts out of forced colors. A disabled switch\n * draws a GrayText thumb and border on Canvas, without the Highlight fill.\n */\nconst onTrack = 'forced-colors:border-[Highlight] forced-colors:bg-[Highlight]';\nconst disabledOnTrack = 'forced-colors:border-[GrayText] forced-colors:bg-[Canvas]';\n\n/** Handlers that run on the `role=\"switch\"` button instead of the root label (C-ROUTING). */\ntype SwitchControlHandlers = 'onClick' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';\n\n/** Where a Switch renders its label: after the track (default), before it or above it. */\nexport type SwitchLabelPosition = Extract<LabelPosition, 'before' | 'after' | 'above'>;\n\n/** Properties for the Switch component. */\nexport interface SwitchProps extends Omit<\n  React.HTMLAttributes<HTMLLabelElement>,\n  'onChange' | 'defaultChecked' | SwitchControlHandlers\n> {\n  /** Controlled checked (on/off) 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  /** Called with the new checked state when the switch is toggled (not for no-op updates). */\n  onCheckedChange?: (checked: boolean) => void;\n  /**\n   * Called with the new checked state when the switch is toggled.\n   * @deprecated Use `onCheckedChange`.\n   */\n  onChange?: (checked: boolean) => void;\n  /** Whether the switch is disabled and non-interactive. */\n  disabled?: boolean;\n  /**\n   * Marks the switch unavailable but keeps it focusable and in the tab order: for a disabled\n   * switch that needs a Tooltip, or one in a toolbar. Renders `aria-disabled=\"true\"`,\n   * `data-disabled` and `data-disabled-focusable` on the switch instead of the native `disabled`\n   * attribute. The switch cannot be toggled and is not submitted with its form; your `onClick` is\n   * not called, and a click on the switch (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), before it, or above it. The DOM order\n   * follows the visual order.\n   * @default 'after'\n   */\n  labelPosition?: SwitchLabelPosition;\n  /**\n   * Form field name. With a name, the switch takes part in native form submission: it submits\n   * `name=value` while on.\n   */\n  name?: string;\n  /** Value submitted while on.\n   * @default 'on'\n   */\n  value?: string;\n  /** The form must not be submitted while the switch is off (native validation). */\n  required?: boolean;\n  /** Id of the form the switch belongs to, when it is rendered outside that form. */\n  form?: string;\n  /** Click handler of the switch control (the `role=\"switch\"` button). */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Focus handler of the switch control. */\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Blur handler of the switch control. */\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Keydown handler of the switch control. */\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Keyup handler of the switch control. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Ref to the focusable `role=\"switch\"` button. */\n  controlRef?: React.Ref<HTMLButtonElement>;\n  /** Ref to the root `<label>` element. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\n/**\n * An on/off toggle drawn as a `role=\"switch\"` button inside a `<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 * - The thumb position mirrors when the switch itself is right-to-left (its nearest `dir`), so a\n *   switch in an LTR subtree of an RTL page keeps the LTR layout.\n * - `label` takes rich content (a link) and renders after the switch, or before or above it with\n *   `labelPosition` (the root carries `data-label-position`). Beside the label, the switch lines\n *   up with the first line of a label that wraps or has a second line. `children` are not\n *   rendered (a development warning says so).\n */\nexport const Switch = ({\n  checked: checkedProp,\n  defaultChecked = 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}: SwitchProps) => {\n  if (onChange !== undefined) warnDeprecated('Switch', 'onChange', 'onCheckedChange');\n  const hasChildren = slotRendersContent(children);\n  React.useEffect(() => {\n    if (hasChildren) {\n      warnOnce('Switch:children', 'Switch: children are not rendered. Pass the label in `label`.');\n    }\n  }, [hasChildren]);\n  const [checked, setChecked] = useControllable(checkedProp, defaultChecked, (next: boolean) => {\n    onCheckedChange?.(next);\n    onChange?.(next);\n  });\n\n  const generatedId = useId('switch');\n  const labelTextId = useId('switch-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 labelText = hasLabel ? (\n    <span id={labelTextId} className={cn(switchClassNames.label, 'text-body-1 text-foreground')}>\n      {materialiseSlotContent(label)}\n    </span>\n  ) : null;\n  const labelFirst = labelPosition === 'before' || labelPosition === 'above';\n  // Focusable-disabled wins over `disabled`: the switch stays focusable but looks and acts disabled.\n  const unavailable = disabled || disabledFocusable;\n\n  return (\n    <label\n      ref={ref}\n      data-label-position={labelPosition}\n      className={cn(\n        switchClassNames.root,\n        // items-start: the 20px track lines up with the 20px first line of a label that wraps or\n        // has a second line, not with its middle.\n        'relative inline-flex items-start gap-2 select-none',\n        labelPosition === 'above' && 'flex-col gap-1',\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      {labelFirst && 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=\"switch\"\n        aria-checked={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          switchClassNames.track,\n          // The whole control is sized in px, like the Checkbox box and the radio circle: the thumb\n          // and its offsets are px, so a track in rem would stop fitting them at any root font size\n          // other than 16px. The 40x20 track (1px border) leaves a 2px inset around the 14px thumb.\n          // p-0 is set here, not left to the native reset, which any app button style overrides\n          // (C-NATIVE): the thumb offsets assume no padding.\n          'relative inline-flex h-[20px] w-[40px] shrink-0 items-center rounded-full border p-0 transition-colors duration-200 motion-reduce:transition-none',\n          focusRing,\n          checked\n            ? cn('border-primary bg-primary', unavailable ? disabledOnTrack : onTrack)\n            : cn(\n                'border-stroke-accessible bg-transparent',\n                unavailable ? forcedColors.disabled : forcedColors.control,\n              ),\n        )}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            switchClassNames.thumb,\n            'block h-[14px] w-[14px] rounded-full transition-transform duration-200 motion-reduce:transition-none forced-colors:forced-color-adjust-none',\n            checked\n              ? 'translate-x-[22px] wave-rtl:-translate-x-[22px] bg-primary-foreground'\n              : 'translate-x-[2px] wave-rtl:-translate-x-[2px] bg-stroke-accessible',\n            unavailable\n              ? 'forced-colors:bg-[GrayText]'\n              : checked\n                ? 'forced-colors:bg-[HighlightText]'\n                : 'forced-colors:bg-[ButtonText]',\n          )}\n        />\n      </button>\n      {!labelFirst && 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\nSwitch.displayName = 'Switch';\n"],"mappings":"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"}

package/dist/components/input/Switch.mjs

@@ -0,0 +1,93 @@
+"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 { switchClassNames as i } from "../../lib/classNames.mjs";
+import { useControllable as a } 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 s } from "../../hooks/useFieldControl.mjs";
+import { focusRing as oe, forcedColors as c } from "../../lib/styles.mjs";
+import { useFormReset as se } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as ce } from "../internal/HiddenInput.mjs";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/input/Switch.tsx
+var f = "forced-colors:border-[Highlight] forced-colors:bg-[Highlight]", le = "forced-colors:border-[GrayText] forced-colors:bg-[Canvas]", p = ({ checked: p, defaultChecked: m = !1, onCheckedChange: ue, onChange: h, disabled: g = !1, disabledFocusable: _ = !1, label: v, labelPosition: y = "after", name: b, value: x, required: S, form: C, id: w, "aria-label": T, "aria-labelledby": E, "aria-describedby": D, "aria-invalid": O, "aria-required": k, "aria-errormessage": A, "aria-details": j, "aria-disabled": M, autoFocus: N, tabIndex: P, onClick: F, onFocus: I, onBlur: de, onKeyDown: L, onKeyUp: R, controlRef: z, className: B, children: V, ref: H, ...fe }) => {
+	h !== void 0 && t("Switch", "onChange", "onCheckedChange");
+	let U = r(V);
+	l.useEffect(() => {
+		U && n("Switch:children", "Switch: children are not rendered. Pass the label in `label`.");
+	}, [U]);
+	let [W, G] = a(p, m, (e) => {
+		ue?.(e), h?.(e);
+	}), pe = o("switch"), K = o("switch-label"), q = ae(), J = s({
+		id: w,
+		"aria-label": T,
+		"aria-labelledby": E,
+		"aria-describedby": D,
+		"aria-invalid": O,
+		"aria-required": k ?? S
+	}), me = S ?? q?.required ?? !1, Y = r(v), he = Y && J["aria-label"] === void 0 ? ie(J["aria-labelledby"], q && J.id === q.controlId ? q.labelId : void 0, K) : J["aria-labelledby"], X = l.useRef(null), ge = ne(X, z);
+	se(X, () => G(m), C);
+	let Z = Y ? /* @__PURE__ */ u("span", {
+		id: K,
+		className: e(i.label, "text-body-1 text-foreground"),
+		children: ee(v)
+	}) : null, Q = y === "before" || y === "above", $ = g || _;
+	return /* @__PURE__ */ d("label", {
+		ref: H,
+		"data-label-position": y,
+		className: e(i.root, "relative inline-flex items-start gap-2 select-none", y === "above" && "flex-col gap-1", $ ? "cursor-not-allowed opacity-50 has-focus-visible:opacity-100" : "cursor-pointer", B),
+		...fe,
+		children: [
+			Q && Z,
+			/* @__PURE__ */ u("button", {
+				id: pe,
+				type: "button",
+				...J,
+				"aria-labelledby": he,
+				"aria-errormessage": A,
+				"aria-details": j,
+				"aria-disabled": M,
+				autoFocus: N,
+				tabIndex: P,
+				onFocus: I,
+				onBlur: de,
+				onKeyDown: L,
+				onKeyUp: R,
+				ref: ge,
+				role: "switch",
+				"aria-checked": W,
+				disabled: g && !_,
+				...re(_, { reachable: !0 }),
+				onClick: _ ? (e) => {
+					e.preventDefault(), e.stopPropagation();
+				} : te(F, () => G((e) => !e)),
+				className: e(i.track, "relative inline-flex h-[20px] w-[40px] shrink-0 items-center rounded-full border p-0 transition-colors duration-200 motion-reduce:transition-none", oe, W ? e("border-primary bg-primary", $ ? le : f) : e("border-stroke-accessible bg-transparent", $ ? c.disabled : c.control)),
+				children: /* @__PURE__ */ u("span", {
+					"aria-hidden": "true",
+					className: e(i.thumb, "block h-[14px] w-[14px] rounded-full transition-transform duration-200 motion-reduce:transition-none forced-colors:forced-color-adjust-none", W ? "translate-x-[22px] wave-rtl:-translate-x-[22px] bg-primary-foreground" : "translate-x-[2px] wave-rtl:-translate-x-[2px] bg-stroke-accessible", $ ? "forced-colors:bg-[GrayText]" : W ? "forced-colors:bg-[HighlightText]" : "forced-colors:bg-[ButtonText]")
+				})
+			}),
+			!Q && Z,
+			/* @__PURE__ */ u(ce, {
+				type: "checkbox",
+				name: b,
+				form: C,
+				disabled: $,
+				value: x,
+				checked: W,
+				required: me,
+				onInvalid: () => X.current?.focus()
+			})
+		]
+	});
+};
+p.displayName = "Switch";
+//#endregion
+export { p as Switch };
+
+//# sourceMappingURL=Switch.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.mjs","names":["useId","useId$1","React","onTrack","disabledOnTrack","Switch","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","labelText","cn","switchClassNames","materialiseSlotContent","labelFirst","labelPosition","unavailable","disabled","disabledFocusable","className","focusableDisabledProps","event","composeEventHandlers","onClick","prev","focusRing","forcedColors","HiddenInput"],"sources":["../../../src/components/input/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { focusableDisabledProps, joinIds } from '../../lib/aria';\nimport { switchClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\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 track keeps system-color utilities, so the browser still forces its\n * focus outline; only the thumb (the leaf indicator) opts out of forced colors. A disabled switch\n * draws a GrayText thumb and border on Canvas, without the Highlight fill.\n */\nconst onTrack = 'forced-colors:border-[Highlight] forced-colors:bg-[Highlight]';\nconst disabledOnTrack = 'forced-colors:border-[GrayText] forced-colors:bg-[Canvas]';\n\n/** Handlers that run on the `role=\"switch\"` button instead of the root label (C-ROUTING). */\ntype SwitchControlHandlers = 'onClick' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';\n\n/** Where a Switch renders its label: after the track (default), before it or above it. */\nexport type SwitchLabelPosition = Extract<LabelPosition, 'before' | 'after' | 'above'>;\n\n/** Properties for the Switch component. */\nexport interface SwitchProps extends Omit<\n  React.HTMLAttributes<HTMLLabelElement>,\n  'onChange' | 'defaultChecked' | SwitchControlHandlers\n> {\n  /** Controlled checked (on/off) 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  /** Called with the new checked state when the switch is toggled (not for no-op updates). */\n  onCheckedChange?: (checked: boolean) => void;\n  /**\n   * Called with the new checked state when the switch is toggled.\n   * @deprecated Use `onCheckedChange`.\n   */\n  onChange?: (checked: boolean) => void;\n  /** Whether the switch is disabled and non-interactive. */\n  disabled?: boolean;\n  /**\n   * Marks the switch unavailable but keeps it focusable and in the tab order: for a disabled\n   * switch that needs a Tooltip, or one in a toolbar. Renders `aria-disabled=\"true\"`,\n   * `data-disabled` and `data-disabled-focusable` on the switch instead of the native `disabled`\n   * attribute. The switch cannot be toggled and is not submitted with its form; your `onClick` is\n   * not called, and a click on the switch (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), before it, or above it. The DOM order\n   * follows the visual order.\n   * @default 'after'\n   */\n  labelPosition?: SwitchLabelPosition;\n  /**\n   * Form field name. With a name, the switch takes part in native form submission: it submits\n   * `name=value` while on.\n   */\n  name?: string;\n  /** Value submitted while on.\n   * @default 'on'\n   */\n  value?: string;\n  /** The form must not be submitted while the switch is off (native validation). */\n  required?: boolean;\n  /** Id of the form the switch belongs to, when it is rendered outside that form. */\n  form?: string;\n  /** Click handler of the switch control (the `role=\"switch\"` button). */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Focus handler of the switch control. */\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Blur handler of the switch control. */\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Keydown handler of the switch control. */\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Keyup handler of the switch control. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Ref to the focusable `role=\"switch\"` button. */\n  controlRef?: React.Ref<HTMLButtonElement>;\n  /** Ref to the root `<label>` element. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\n/**\n * An on/off toggle drawn as a `role=\"switch\"` button inside a `<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 * - The thumb position mirrors when the switch itself is right-to-left (its nearest `dir`), so a\n *   switch in an LTR subtree of an RTL page keeps the LTR layout.\n * - `label` takes rich content (a link) and renders after the switch, or before or above it with\n *   `labelPosition` (the root carries `data-label-position`). Beside the label, the switch lines\n *   up with the first line of a label that wraps or has a second line. `children` are not\n *   rendered (a development warning says so).\n */\nexport const Switch = ({\n  checked: checkedProp,\n  defaultChecked = 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}: SwitchProps) => {\n  if (onChange !== undefined) warnDeprecated('Switch', 'onChange', 'onCheckedChange');\n  const hasChildren = slotRendersContent(children);\n  React.useEffect(() => {\n    if (hasChildren) {\n      warnOnce('Switch:children', 'Switch: children are not rendered. Pass the label in `label`.');\n    }\n  }, [hasChildren]);\n  const [checked, setChecked] = useControllable(checkedProp, defaultChecked, (next: boolean) => {\n    onCheckedChange?.(next);\n    onChange?.(next);\n  });\n\n  const generatedId = useId('switch');\n  const labelTextId = useId('switch-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 labelText = hasLabel ? (\n    <span id={labelTextId} className={cn(switchClassNames.label, 'text-body-1 text-foreground')}>\n      {materialiseSlotContent(label)}\n    </span>\n  ) : null;\n  const labelFirst = labelPosition === 'before' || labelPosition === 'above';\n  // Focusable-disabled wins over `disabled`: the switch stays focusable but looks and acts disabled.\n  const unavailable = disabled || disabledFocusable;\n\n  return (\n    <label\n      ref={ref}\n      data-label-position={labelPosition}\n      className={cn(\n        switchClassNames.root,\n        // items-start: the 20px track lines up with the 20px first line of a label that wraps or\n        // has a second line, not with its middle.\n        'relative inline-flex items-start gap-2 select-none',\n        labelPosition === 'above' && 'flex-col gap-1',\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      {labelFirst && 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=\"switch\"\n        aria-checked={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          switchClassNames.track,\n          // The whole control is sized in px, like the Checkbox box and the radio circle: the thumb\n          // and its offsets are px, so a track in rem would stop fitting them at any root font size\n          // other than 16px. The 40x20 track (1px border) leaves a 2px inset around the 14px thumb.\n          // p-0 is set here, not left to the native reset, which any app button style overrides\n          // (C-NATIVE): the thumb offsets assume no padding.\n          'relative inline-flex h-[20px] w-[40px] shrink-0 items-center rounded-full border p-0 transition-colors duration-200 motion-reduce:transition-none',\n          focusRing,\n          checked\n            ? cn('border-primary bg-primary', unavailable ? disabledOnTrack : onTrack)\n            : cn(\n                'border-stroke-accessible bg-transparent',\n                unavailable ? forcedColors.disabled : forcedColors.control,\n              ),\n        )}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            switchClassNames.thumb,\n            'block h-[14px] w-[14px] rounded-full transition-transform duration-200 motion-reduce:transition-none forced-colors:forced-color-adjust-none',\n            checked\n              ? 'translate-x-[22px] wave-rtl:-translate-x-[22px] bg-primary-foreground'\n              : 'translate-x-[2px] wave-rtl:-translate-x-[2px] bg-stroke-accessible',\n            unavailable\n              ? 'forced-colors:bg-[GrayText]'\n              : checked\n                ? 'forced-colors:bg-[HighlightText]'\n                : 'forced-colors:bg-[ButtonText]',\n          )}\n        />\n      </button>\n      {!labelFirst && 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\nSwitch.displayName = 'Switch';\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,IAAMG,IAAU,iEACVC,KAAkB,6DAqGXC,KAAU,EACrB,SAASC,GACT,oBAAiB,IACjB,qBACA,aACA,cAAW,IACX,uBAAoB,IACpB,UACA,mBAAgB,SAChB,SACA,UACA,aACA,SACA,OACA,cAAcC,GACd,mBAAmBC,GACnB,oBAAoBC,GACpB,gBAAgBC,GAChB,iBAAiBC,GACjB,qBAAqBC,GACrB,gBAAgBC,GAChB,iBAAiBC,GACjB,cACA,aACA,YACA,YACA,YACA,cACA,YACA,eACA,cACA,aACA,QACA,GAAGC,SACc;CACjB,AAAIC,MAAa,KAAA,KAAWC,EAAe,UAAU,YAAY,iBAAiB;CAClF,IAAMC,IAAcC,EAAmBC,CAAQ;CAC/C,EAAM,gBAAgB;EACpB,AAAIF,KACFG,EAAS,mBAAmB,+DAA+D;CAE/F,GAAG,CAACH,CAAW,CAAC;CAChB,IAAM,CAACI,GAASC,KAAcC,EAAgBlB,GAAamB,IAAiB,MAAkB;EAE5F,AADAC,KAAkBC,CAAI,GACtBX,IAAWW,CAAI;CACjB,CAAC,GAEKC,KAAc5B,EAAM,QAAQ,GAC5B6B,IAAc7B,EAAM,cAAc,GAClC8B,IAAQC,GAAgB,GACxBC,IAAaC,EAAgB;EACjC;EACA,cAAc1B;EACd,mBAAmBC;EACnB,oBAAoBC;EACpB,gBAAgBC;EAGhB,iBAAiBC,KAAgBuB;CACnC,CAAC,GACKC,KAAaD,KAAYJ,GAAO,YAAY,IAE5CM,IAAWjB,EAAmBkB,CAAK,GAOnCC,KACJF,KAAYJ,EAAW,kBAAkB,KAAA,IACrCO,GACEP,EAAW,oBACXF,KAASE,EAAW,OAAOF,EAAM,YAAYA,EAAM,UAAU,KAAA,GAC7DD,CACF,IACAG,EAAW,oBAEXQ,IAAYtC,EAAM,OAA0B,IAAI,GAChDuC,KAAmBC,GAAcF,GAAWG,CAAU;CAC5D,GAAaH,SAAiBjB,EAAWE,CAAc,GAAGmB,CAAI;CAE9D,IAAMC,IAAYT,IAChB,kBAAC,QAAD;EAAM,IAAIP;EAAa,WAAWiB,EAAGC,EAAiB,OAAO,6BAA6B;EACvF,UAAAC,GAAuBX,CAAK;CACzB,CAAA,IACJ,MACEY,IAAaC,MAAkB,YAAYA,MAAkB,SAE7DC,IAAcC,KAAYC;CAEhC,OACE,kBAAC,SAAD;EACO;EACL,uBAAqBH;EACrB,WAAWJ,EACTC,EAAiB,MAGjB,sDACAG,MAAkB,WAAW,kBAG7BC,IACI,gEACA,kBACJG,CACF;EACA,GAAIvC;EAhBN,UAAA;GAkBGkC,KAAcJ;GACf,kBAAC,UAAD;IACE,IAAIjB;IACJ,MAAK;IACL,GAAII;IACJ,mBAAiBM;IACjB,qBAAmB1B;IACnB,gBAAcC;IACd,iBAAeC;IACJ;IACD;IACD;IACD;IACG;IACF;IACT,KAAK2B;IACL,MAAK;IACL,gBAAcnB;IACd,UAAU8B,KAAY,CAACC;IACvB,GAAIE,GAAuBF,GAAmB,EAAE,WAAW,GAAK,CAAC;IACjE,SACEA,KAGK,MAA+C;KAE9C,AADAG,EAAM,eAAe,GACrBA,EAAM,gBAAgB;IACxB,IACAC,GAAqBC,SAAenC,GAAY,MAAS,CAACoC,CAAI,CAAC;IAErE,WAAWb,EACTC,EAAiB,OAMjB,qJACAa,IACAtC,IACIwB,EAAG,6BAA6BK,IAAc/C,KAAkBD,CAAO,IACvE2C,EACE,2CACAK,IAAcU,EAAa,WAAWA,EAAa,OACrD,CACN;IAEA,UAAA,kBAAC,QAAD;KACE,eAAY;KACZ,WAAWf,EACTC,EAAiB,OACjB,+IACAzB,IACI,0EACA,sEACJ6B,IACI,gCACA7B,IACE,qCACA,+BACR;IACD,CAAA;GACK,CAAA;GACP,CAAC2B,KAAcJ;GAChB,kBAACiB,IAAD;IACE,MAAK;IACC;IACA;IACN,UAAUX;IACH;IACE;IACT,UAAUhB;IACV,iBAAiBK,EAAU,SAAS,MAAM;GAC3C,CAAA;EACI;;AAEX;AAEA,EAAO,cAAc"}

package/dist/components/input/TagPicker.cjs

@@ -0,0 +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("../../lib/classNames.cjs"),a=require("../../hooks/useControllable.cjs"),o=require("../../hooks/useId.cjs"),s=require("../../lib/direction.cjs"),c=require("../../hooks/useMergedRefs.cjs"),ee=require("../../hooks/useIsClient.cjs"),te=require("../../lib/aria.cjs"),l=require("../../hooks/useFieldControl.cjs"),ne=require("../../hooks/useAnnounce.cjs"),u=require("../../lib/styles.cjs"),d=require("../../lib/icons.cjs"),re=require("./Input.cjs"),ie=require("../../hooks/useFormReset.cjs"),ae=require("../internal/HiddenInput.cjs"),oe=require("../../hooks/useListbox.cjs"),f=require("./Option.cjs"),p=require("../../hooks/usePreserveFocus.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var se=e=>`Remove ${e}`,ce=e=>`Selected: ${e.join(`, `)}`,le=(e,t)=>`${e} added, ${t} selected`,ue=(e,t)=>`${e} removed, ${t} selected`,g=[];function de(e,t){return e.length===t.length&&e.every((e,n)=>e===t[n])}function fe({label:e,disabled:n,onClick:r,onKeyDown:a,getFallback:o}){let s=m.useRef(null);return p.usePreserveFocus(s,o),(0,h.jsx)(`button`,{ref:s,type:`button`,"data-wave-tagpicker-remove":``,disabled:n,"aria-label":e,className:t.cn(i.tagPickerClassNames.removeButton,`ms-0.5 inline-flex rounded-sm bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground disabled:cursor-not-allowed`,u.focusRing),onClick:r,onKeyDown:a,children:(0,h.jsx)(d.DismissIcon,{size:12})})}var _=e=>{let{options:d,value:p,defaultValue:_,onValueChange:pe,onChange:v,open:me,defaultOpen:he,onOpenChange:ge,placeholder:_e=`Select...`,disabled:y=!1,name:ve,form:b,required:x,autoComplete:ye=`off`,autoCapitalize:be,autoCorrect:xe,maxLength:Se,readOnly:S,labels:C,inputMode:Ce,spellCheck:we,enterKeyHint:Te,autoFocus:Ee,tabIndex:w,id:T,"aria-label":E,"aria-labelledby":D,"aria-describedby":De,"aria-invalid":Oe,"aria-required":ke,"aria-errormessage":Ae,"aria-details":je,onFocus:Me,onBlur:Ne,onKeyDown:Pe,onKeyUp:Fe,controlRef:Ie,className:Le,ref:Re,...ze}=e;v!==void 0&&n.warnDeprecated(`TagPicker`,`onChange`,`onValueChange`);let O=l.useFieldContext(),Be=(x??O?.required??!1)&&!S,k=l.useFieldControl({id:T,"aria-label":E,"aria-labelledby":D,"aria-describedby":De,"aria-invalid":Oe,"aria-required":ke??x}),Ve=re.isInvalidLook(!1,k[`aria-invalid`]),[A,j]=a.useControllable(p,_??g,e=>{let t=[...e];pe?.(t),v?.(t)}),M=!y&&!S,[N,P]=a.useControllable(me,(he??!1)&&M,ge),He=ee.useIsClient(),F=N&&M&&He,[I,L]=m.useState(``),[Ue,We]=m.useState(M);Ue!==M&&(We(M),M||L(``));let R=!M&&N;m.useEffect(()=>{R&&P(!1)},[R,P]);let z=ne.useAnnounce(),B=m.useRef(null),V=m.useRef(null),H=o.useId(`tagpicker-summary`),U=m.useMemo(()=>{let e=new Map;for(let t of d)e.has(t.value)||e.set(t.value,t.label);return e},[d]),W=e=>U.get(e)??e,Ge=m.useMemo(()=>{let e=new Set(A);return d.filter(t=>!e.has(t.value)).map(e=>({value:e.value,label:e.label}))},[d,A]),Ke=m.useMemo(()=>I?e=>e.label.toLowerCase().includes(I.toLowerCase()):void 0,[I]),G=A.filter(e=>!U.has(e)).join(`\0`);m.useEffect(()=>{G&&n.warnOnce(`TagPicker:unknown-value`,`TagPicker: the selected value(s) ${G.split(`\0`).map(e=>`"${e}"`).join(`, `)} match no option; the raw value is shown as the tag label.`)},[G]);let qe=()=>V.current,K=()=>V.current?.focus(),Je=e=>{if(!M||A.includes(e))return;let t=[...A,e];j(t),L(``),z((C?.added??le)(W(e),t.length))},q=e=>{if(!M)return;let t=A.filter(t=>t!==e);j(t),z((C?.removed??ue)(W(e),t.length)),K()},J=oe.useListbox({open:F,onOpenChange:e=>P(e),mode:`editable`,multiple:!0,selectedValues:A,onSelect:e=>Je(e),items:Ge,filter:Ke,autoHighlight:I?`first`:!1,idPrefix:`tagpicker-listbox`,onClearDraft:I?()=>L(``):void 0}),Y=F&&J.items.length>0,X=C?.noMatches??`No matches`,Z=F&&(Y||I!==``),Ye=Z&&!Y,{layerId:Xe,setReference:Ze,surfaceRef:Qe,floatingProps:Q}=f.useListboxPopup({open:F,surfaceOpen:Z,onDismiss:()=>P(!1),rootRef:B,anchorRef:V}),$e=c.useMergedRefs(B,Re),et=c.useMergedRefs(V,Ie);ie.useFormReset(V,()=>{let e=_??g;j(t=>de(t,e)?t:[...e]),L(``)},b);let $=e=>Array.from(e.closest(`[data-wave-tagpicker-control]`)?.querySelectorAll(`[data-wave-tagpicker-remove]`)??[]),tt=e=>{if(M){if(e.key===`Escape`&&F&&!Z&&!e.nativeEvent.isComposing){P(!1);return}if(e.key===`Backspace`&&I===``&&A.length>0){e.preventDefault(),$(e.currentTarget).at(-1)?.focus();return}J.onKeyDown(e)}},nt=(e,t)=>{if(!M)return;let n=$(e.currentTarget),r=n.indexOf(e.currentTarget);if(e.key===`Backspace`||e.key===`Delete`){e.preventDefault(),q(t);return}if(e.key===`Escape`){e.preventDefault(),K();return}let i=s.getArrowIntent(e.key,{orientation:`horizontal`,dir:s.getDirection(e.currentTarget)});i===`prev`&&r>0?(e.preventDefault(),n[r-1].focus()):i===`next`&&(e.preventDefault(),r<n.length-1?n[r+1].focus():K())},rt=k[`aria-label`]===void 0?k[`aria-labelledby`]??O?.labelId:k[`aria-labelledby`];return(0,h.jsxs)(`div`,{...ze,ref:$e,className:t.cn(i.tagPickerClassNames.root,`relative`,Le),children:[(0,h.jsxs)(`div`,{ref:Ze,"data-wave-tagpicker-control":``,role:`group`,"aria-disabled":y||void 0,className:t.cn(i.tagPickerClassNames.control,`flex flex-wrap items-center gap-1 rounded border border-input border-b-stroke-accessible bg-background px-2 py-1.5`,u.inputFocusWithin,Ve&&`border-destructive focus-within:border-b-destructive`,y&&`cursor-not-allowed opacity-50`),onClick:e=>{y||e.target.closest(`button`)||(K(),!F&&M&&P(!0))},children:[A.length>0&&(0,h.jsx)(`div`,{role:`list`,"aria-label":C?.selected??`Selected`,className:t.cn(i.tagPickerClassNames.group,`flex flex-wrap items-center gap-1`),children:A.map(e=>{let n=W(e);return(0,h.jsxs)(`div`,{role:`listitem`,className:t.cn(i.tagPickerClassNames.tag,`inline-flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-body-1 text-foreground`),children:[n,!S&&(0,h.jsx)(fe,{label:(C?.remove??se)(n),disabled:y,onClick:()=>q(e),onKeyDown:t=>nt(t,e),getFallback:qe})]},e)})}),A.length>0&&(0,h.jsx)(`span`,{id:H,hidden:!0,children:(C?.summary??ce)(A.map(W))}),(0,h.jsx)(`input`,{type:`text`,autoComplete:ye,...k,...J.getComboboxProps(),"aria-expanded":Y,"aria-describedby":te.joinIds(k[`aria-describedby`],A.length>0?H:void 0),"aria-errormessage":Ae,"aria-details":je,ref:et,disabled:y,readOnly:S,placeholder:A.length===0?_e:``,autoCapitalize:be,autoCorrect:xe,maxLength:Se,inputMode:Ce,spellCheck:we,enterKeyHint:Te,autoFocus:Ee,tabIndex:w,value:I,onChange:e=>{M&&(L(e.target.value),F||P(!0))},onKeyDown:r.composeEventHandlers(Pe,tt),onKeyUp:r.composeEventHandlers(Fe,J.onKeyUp),onFocus:Me,onBlur:Ne,className:t.cn(i.tagPickerClassNames.input,`min-w-15 flex-1 bg-transparent py-0.5 text-body-1 text-foreground placeholder:text-muted-foreground focus:outline-hidden`)})]}),(0,h.jsx)(`span`,{role:`status`,className:`sr-only`,children:Ye&&X}),(0,h.jsx)(f.ListboxSurface,{listbox:J,layerId:Xe,surfaceRef:Qe,floatingProps:Q,open:F,expanded:Y,showCheck:!1,listboxClassName:i.tagPickerClassNames.listbox,surfaceClassName:i.tagPickerClassNames.surface,emptyContent:I===``?void 0:(0,h.jsx)(`div`,{"aria-hidden":`true`,className:t.cn(i.tagPickerClassNames.emptyMessage,`px-3 py-1.5 text-body-1 text-muted-foreground`),children:X}),"aria-label":k[`aria-label`],"aria-labelledby":rt,children:Y&&J.items.map(e=>(0,h.jsx)(f.Option,{value:e.value,label:e.label,className:i.tagPickerClassNames.option,children:e.label},e.value))}),(0,h.jsx)(ae.HiddenInput,{name:ve,form:b,disabled:y,value:A,type:`text`,required:Be,onInvalid:K})]})};_.displayName=`TagPicker`,exports.TagPicker=_;
+//# sourceMappingURL=TagPicker.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagPicker.cjs","names":["React","cn","tagPickerClassNames","focusRing","DismissIcon","useFieldContext","useFieldControl","isInvalidLook","useControllable","useIsClient","useAnnounce","useId","useListbox","useListboxPopup","useMergedRefs","getArrowIntent","getDirection","inputFocusWithin","joinIds","composeEventHandlers","ListboxSurface","Option","HiddenInput","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_classNames","require_useControllable","require_useId","require_direction","require_useMergedRefs","require_useIsClient","require_aria","require_useFieldControl","require_useAnnounce","require_styles","require_icons","require_Input","require_useFormReset","require_HiddenInput","require_useListbox","require_Option","require_usePreserveFocus","react","react_jsx_runtime","defaultRemoveLabel","label","defaultSummaryLabel","labels","defaultAddedLabel","count","defaultRemovedLabel","EMPTY","sameTags","a","b","value","index","TagRemoveButton","ref","getFallback","TagPicker","valueProp","openProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onChange","field","validates","required","readOnly","fieldProps","invalidLook","selected","setSelected","defaultValue","list","next","onValueChange","interactive","disabled","openState","setOpen","defaultOpen","onOpenChange","isClient","open","query","setQuery","wasInteractive","setWasInteractive","lockedOpen","announce","rootRef","inputRef","summaryId","labelByValue","map","option","options","labelOf","available","chosen","filter","item","unknownValues","v","getInput","focusInput","addTag","removeTag","listbox","expanded","noMatchesText","surfaceOpen","noMatches","rootMergedRef","inputMergedRef","controlRef","initial","current","form","removeButtons","from","handleInputKeyDown","event","handleTagKeyDown","buttons","intent","listLabelledBy","className","setReference","placeholder","onKeyDown","onKeyUp"],"sources":["../../../src/components/input/TagPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { tagPickerClassNames } from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { getArrowIntent, getDirection } from '../../lib/direction';\nimport { DismissIcon } from '../../lib/icons';\nimport { focusRing, inputFocusWithin, inputInvalidWithin } from '../../lib/styles';\nimport { useAnnounce } from '../../hooks/useAnnounce';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useListbox, type ListboxItem } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePreserveFocus } from '../../hooks/usePreserveFocus';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { isInvalidLook } from './Input';\nimport { ListboxSurface, Option, useListboxPopup } from './Option';\nimport type { RoutedHandlers } from './routedHandlers';\n\n/** Represents a single selectable tag option. */\nexport interface TagPickerOption {\n  /** Unique identifier for the option. */\n  value: string;\n  /** Display label for the option. */\n  label: string;\n}\n\n/**\n * The TagPicker's built-in names, descriptions and announcements, for localization. Each member is\n * optional and falls back to its English default.\n */\nexport interface TagPickerLabels {\n  /** Name of a tag's remove button.\n   * @default (label) => `Remove ${label}`\n   */\n  remove?: (label: string) => string;\n  /** Name of the list of selected tags.\n   * @default 'Selected'\n   */\n  selected?: string;\n  /** Description of the input that sums up the selected tags (their labels, in order).\n   * @default (labels) => `Selected: ${labels.join(', ')}`\n   */\n  summary?: (labels: string[]) => string;\n  /** Announcement when a tag is added; `count` is the number of tags after the change.\n   * @default (label, count) => `${label} added, ${count} selected`\n   */\n  added?: (label: string, count: number) => string;\n  /** Announcement when a tag is removed; `count` is the number of tags after the change.\n   * @default (label, count) => `${label} removed, ${count} selected`\n   */\n  removed?: (label: string, count: number) => string;\n  /** Status text (announced, and shown in the popup) when the typed text matches no option.\n   * @default 'No matches'\n   */\n  noMatches?: string;\n}\n\nconst defaultRemoveLabel = (label: string) => `Remove ${label}`;\nconst defaultSummaryLabel = (labels: string[]) => `Selected: ${labels.join(', ')}`;\nconst defaultAddedLabel = (label: string, count: number) => `${label} added, ${count} selected`;\nconst defaultRemovedLabel = (label: string, count: number) => `${label} removed, ${count} selected`;\n\n/** Properties for the TagPicker component. */\nexport interface TagPickerProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | RoutedHandlers\n> {\n  /** Available options to choose from. */\n  options: readonly TagPickerOption[];\n  /** Controlled array of selected option values (`[]` for none). */\n  value?: readonly string[];\n  /**\n   * Initial selected values for uncontrolled usage; a form reset restores them.\n   * @default []\n   */\n  defaultValue?: readonly string[];\n  /**\n   * Called with the new selection when it changes: a tag is added or removed, or a form reset\n   * restores different tags.\n   */\n  onValueChange?: (value: string[]) => void;\n  /**\n   * Called with the new selection when it changes: a tag is added or removed, or a form reset\n   * restores different tags.\n   * @deprecated Use `onValueChange`.\n   */\n  onChange?: (value: string[]) => void;\n  /**\n   * Controlled open state of the option list. The list renders only in the browser: an open\n   * picker is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Initial open state for uncontrolled usage. A picker that starts disabled or read-only starts\n   * closed. The list renders only in the browser: it is closed in the server HTML and opens once\n   * the picker has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Called when the option list opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Placeholder text shown when no tags are selected.\n   * @default 'Select...'\n   */\n  placeholder?: string;\n  /**\n   * Whether the tag picker is disabled: nothing can be added or removed, and the remove buttons\n   * leave the tab order.\n   * @default false\n   */\n  disabled?: boolean;\n  /** Name of the values in form submissions (one hidden input per value). */\n  name?: string;\n  /** Id of the form the values belong to, when the TagPicker is outside it. */\n  form?: string;\n  /**\n   * At least one tag is required to submit the form (native constraint validation). Like a native\n   * readonly input, a `readOnly` TagPicker does not block submission.\n   */\n  required?: boolean;\n  /**\n   * The `autocomplete` attribute of the `<input role=\"combobox\">`. Browser autofill is off unless\n   * you set it (for example `'on'`).\n   * @default 'off'\n   */\n  autoComplete?: string;\n  /** The maximum length of the typed text (`maxlength` of the `<input role=\"combobox\">`). */\n  maxLength?: number;\n  /**\n   * The selection cannot be changed: the input is read-only, the tags have no remove buttons, and\n   * the option list neither opens (click, keyboard, a controlled `open`) nor adds tags; Escape is\n   * left to the page. Turning it (or `disabled`) on while the list is open closes it\n   * (`onOpenChange(false)`); a focused remove button hands focus to the input.\n   */\n  readOnly?: boolean;\n  /**\n   * Names of the remove buttons and the tag list, the summary that describes the input, the\n   * announcements and the \"No matches\" text, for localization. Unset members keep their English\n   * defaults.\n   */\n  labels?: TagPickerLabels;\n  /** Called when the `<input role=\"combobox\">` receives focus (the root keeps other handlers). */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /** Called when the `<input role=\"combobox\">` loses focus. */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * Called on a key press in the `<input role=\"combobox\">`, before the built-in listbox and tag\n   * keys; `event.preventDefault()` skips them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Called when a key is released in the `<input role=\"combobox\">`. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Ref to the `<input role=\"combobox\">` (the focusable element). */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst EMPTY: readonly string[] = [];\n\n/** Whether two selections hold the same values in the same order. */\nfunction sameTags(a: readonly string[], b: readonly string[]): boolean {\n  return a.length === b.length && a.every((value, index) => value === b[index]);\n}\n\ninterface TagRemoveButtonProps {\n  /** The accessible name of the button. */\n  label: string;\n  disabled: boolean;\n  onClick: () => void;\n  onKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** The element that receives focus when this button unmounts while focused (the input). */\n  getFallback: () => HTMLElement | null;\n}\n\n/**\n * A tag's remove button. When it unmounts while focused (`readOnly` turned on, or a controlled\n * value dropped its tag), focus moves to the input instead of falling to `<body>` (C-DISABLED).\n */\nfunction TagRemoveButton({\n  label,\n  disabled,\n  onClick,\n  onKeyDown,\n  getFallback,\n}: TagRemoveButtonProps) {\n  const ref = React.useRef<HTMLButtonElement | null>(null);\n  usePreserveFocus(ref, getFallback);\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-wave-tagpicker-remove=\"\"\n      disabled={disabled}\n      aria-label={label}\n      className={cn(\n        tagPickerClassNames.removeButton,\n        // Padding and background set here (C-NATIVE), not left to an app-wide rule.\n        'ms-0.5 inline-flex rounded-sm bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground disabled:cursor-not-allowed',\n        focusRing,\n      )}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n    >\n      <DismissIcon size={12} />\n    </button>\n  );\n}\n\n/**\n * A multi-select combobox that shows the selected values as removable tags. Typing filters the\n * options and makes the first match active; ArrowDown/ArrowUp move the highlight\n * (`aria-activedescendant`), Enter adds the highlighted option and keeps the list open (with\n * nothing highlighted — no typed text, or text that matches no option — Enter is left to the\n * surrounding form), Escape closes the list (and then clears the typed text). Backspace in the\n * empty input moves focus to the last tag; Backspace or Delete there removes it. Additions and\n * removals are announced (\"Cherry removed, 2 selected\"), and so is \"No matches\" for text that\n * matches no option.\n *\n * The tags form a list named \"Selected\"; the input is described by a summary of the selected\n * labels (\"Selected: Apple, Banana\"). These built-in texts are English; `labels` localizes them.\n * The `<input>` receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,\n * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`, `autoFocus`,\n * `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp` and the text input attributes `autoComplete`,\n * `autoCapitalize`, `autoCorrect`, `maxLength`, `inputMode`, `spellCheck` and `enterKeyHint`.\n * `ref`, `className`, `style`, other `aria-*` attributes and the remaining props stay on the root\n * `<div>`. Inside a `Field` the input is labelled and described by it. The tag area shows the\n * error look whenever the input ends up `aria-invalid` (its own `aria-invalid` or a `Field`\n * error). With `name`/`required` the values take part in form submission, validation and reset.\n * Selected values without a matching option are shown with their raw value. The open list renders\n * only in the browser: an open list (`defaultOpen`, `open`) is closed in the server HTML and opens\n * once the picker has hydrated.\n */\nexport const TagPicker = (props: TagPickerProps) => {\n  const {\n    options,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onChange,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    placeholder = 'Select...',\n    disabled = false,\n    name,\n    form,\n    required,\n    autoComplete = 'off',\n    autoCapitalize,\n    autoCorrect,\n    maxLength,\n    readOnly,\n    labels,\n    inputMode,\n    spellCheck,\n    enterKeyHint,\n    autoFocus,\n    tabIndex,\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    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    controlRef,\n    className,\n    ref,\n    ...rest\n  } = props;\n\n  if (onChange !== undefined) warnDeprecated('TagPicker', 'onChange', 'onValueChange');\n\n  const field = useFieldContext();\n  const isRequired = required ?? field?.required ?? false;\n  // Like a native readonly input, a read-only TagPicker is barred from constraint validation (the\n  // user could not fix it); its values are still submitted.\n  const validates = isRequired && !readOnly;\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 matches\n    // `isRequired`.\n    'aria-required': ariaRequired ?? required,\n  });\n  // The error look follows the resolved state: the consumer's `aria-invalid` or the Field's.\n  const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n\n  const [selected, setSelected] = useControllable<readonly string[]>(\n    valueProp,\n    defaultValue ?? EMPTY,\n    (next) => {\n      // The props are read only; the callbacks receive an array of their own.\n      const list = [...next];\n      onValueChange?.(list);\n      onChange?.(list);\n    },\n  );\n  const interactive = !disabled && !readOnly;\n  // A picker that starts disabled or read-only never shows its list, so it starts closed (no close\n  // to report later).\n  const [openState, setOpen] = useControllable(\n    openProp,\n    (defaultOpen ?? false) && interactive,\n    onOpenChange,\n  );\n  // The open list lives in a portal, which renders only in the browser: until then (the server\n  // HTML, hydration) the picker shows the closed inline list and reports it closed, so\n  // aria-controls and aria-activedescendant never name a missing element.\n  const isClient = useIsClient();\n  const open = openState && interactive && isClient;\n  const [query, setQuery] = React.useState('');\n  // Locking the control (readOnly/disabled) while typing drops the typed text (adjust-during-render\n  // pattern, C-HOOKS).\n  const [wasInteractive, setWasInteractive] = React.useState(interactive);\n  if (wasInteractive !== interactive) {\n    setWasInteractive(interactive);\n    if (!interactive) setQuery('');\n  }\n  // Locking also closes the list itself, not only the derived `open`, so unlocking does not reopen\n  // it without a user action. The close is reported through onOpenChange (a consumer callback from\n  // an effect, C-HOOKS); a controlled `open` that stays true is still not shown while locked.\n  const lockedOpen = !interactive && openState;\n  React.useEffect(() => {\n    if (lockedOpen) setOpen(false);\n  }, [lockedOpen, setOpen]);\n  const announce = useAnnounce();\n\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\n  const summaryId = useId('tagpicker-summary');\n\n  const labelByValue = React.useMemo(() => {\n    const map = new Map<string, string>();\n    for (const option of options) if (!map.has(option.value)) map.set(option.value, option.label);\n    return map;\n  }, [options]);\n  const labelOf = (value: string) => labelByValue.get(value) ?? value;\n\n  const available = React.useMemo<ListboxItem[]>(() => {\n    const chosen = new Set(selected);\n    return options\n      .filter((option) => !chosen.has(option.value))\n      .map((option) => ({ value: option.value, label: option.label }));\n  }, [options, selected]);\n  const filter = React.useMemo(\n    () =>\n      query\n        ? (item: ListboxItem) => item.label.toLowerCase().includes(query.toLowerCase())\n        : undefined,\n    [query],\n  );\n\n  // Unknown values render as tags labelled by the raw value (input-pickers#22).\n  const unknownValues = selected.filter((value) => !labelByValue.has(value)).join('\\u0000');\n  React.useEffect(() => {\n    if (!unknownValues) return;\n    warnOnce(\n      'TagPicker:unknown-value',\n      `TagPicker: the selected value(s) ${unknownValues\n        .split('\\u0000')\n        .map((v) => `\"${v}\"`)\n        .join(', ')} match no option; the raw value is shown as the tag label.`,\n    );\n  }, [unknownValues]);\n\n  const getInput = () => inputRef.current;\n  const focusInput = () => inputRef.current?.focus();\n\n  const addTag = (value: string) => {\n    if (!interactive || selected.includes(value)) return;\n    const next = [...selected, value];\n    setSelected(next);\n    setQuery('');\n    announce((labels?.added ?? defaultAddedLabel)(labelOf(value), next.length));\n  };\n\n  const removeTag = (value: string) => {\n    if (!interactive) return;\n    const next = selected.filter((v) => v !== value);\n    setSelected(next);\n    announce((labels?.removed ?? defaultRemovedLabel)(labelOf(value), next.length));\n    focusInput();\n  };\n\n  const listbox = useListbox({\n    open,\n    onOpenChange: (next) => setOpen(next),\n    mode: 'editable',\n    multiple: true,\n    selectedValues: selected,\n    onSelect: (value) => addTag(value),\n    items: available,\n    filter,\n    // Typing a filter makes its first match active (as in Combobox), so Enter adds what the list\n    // shows instead of submitting the form. Nothing is active on open or with the text cleared.\n    autoHighlight: query ? 'first' : false,\n    idPrefix: 'tagpicker-listbox',\n    onClearDraft: query ? () => setQuery('') : undefined,\n  });\n\n  // aria-expanded only while a listbox with options is shown (input-pickers#21).\n  const expanded = open && listbox.items.length > 0;\n  const noMatchesText = labels?.noMatches ?? 'No matches';\n  // The popup shows the options, or \"No matches\" for a query.\n  const surfaceOpen = open && (expanded || query !== '');\n  const noMatches = surfaceOpen && !expanded;\n  const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n    open,\n    surfaceOpen,\n    onDismiss: () => setOpen(false),\n    rootRef,\n    anchorRef: inputRef,\n  });\n\n  const rootMergedRef = useMergedRefs<HTMLDivElement>(rootRef, ref);\n  const inputMergedRef = useMergedRefs<HTMLInputElement>(inputRef, controlRef);\n\n  useFormReset(\n    inputRef,\n    () => {\n      // Compared by content (C-FORMS): an inline default is a new array on every render, and a\n      // reset that keeps the same tags reports nothing.\n      const initial = defaultValue ?? EMPTY;\n      setSelected((current) => (sameTags(current, initial) ? current : [...initial]));\n      setQuery('');\n    },\n    form,\n  );\n\n  /** The tags' remove buttons, found from an element inside the component (no ref read). */\n  const removeButtons = (from: Element) =>\n    Array.from(\n      from\n        .closest('[data-wave-tagpicker-control]')\n        ?.querySelectorAll<HTMLButtonElement>('[data-wave-tagpicker-remove]') ?? [],\n    );\n\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    // Read-only: no listbox keys at all (they would open the list, add or remove tags).\n    if (!interactive) return;\n    if (event.key === 'Escape' && open && !surfaceOpen && !event.nativeEvent.isComposing) {\n      // Open with nothing shown (every option selected, no query): close, but leave Escape to an\n      // enclosing layer (overlays#1) instead of consuming it for an invisible list.\n      setOpen(false);\n      return;\n    }\n    if (event.key === 'Backspace' && query === '' && selected.length > 0) {\n      // First Backspace moves to the last tag; Backspace/Delete there removes it (input-pickers#14).\n      event.preventDefault();\n      removeButtons(event.currentTarget).at(-1)?.focus();\n      return;\n    }\n    listbox.onKeyDown(event);\n  };\n\n  const handleTagKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, value: string) => {\n    if (!interactive) return;\n    const buttons = removeButtons(event.currentTarget);\n    const index = buttons.indexOf(event.currentTarget);\n    if (event.key === 'Backspace' || event.key === 'Delete') {\n      event.preventDefault();\n      removeTag(value);\n      return;\n    }\n    if (event.key === 'Escape') {\n      // Consumed here, so an enclosing layer ignores it (spec §5.4).\n      event.preventDefault();\n      focusInput();\n      return;\n    }\n    const intent = getArrowIntent(event.key, {\n      orientation: 'horizontal',\n      dir: getDirection(event.currentTarget),\n    });\n    if (intent === 'prev' && index > 0) {\n      event.preventDefault();\n      buttons[index - 1].focus();\n    } else if (intent === 'next') {\n      event.preventDefault();\n      if (index < buttons.length - 1) buttons[index + 1].focus();\n      else focusInput();\n    }\n  };\n\n  const listLabelledBy =\n    fieldProps['aria-label'] === undefined\n      ? (fieldProps['aria-labelledby'] ?? field?.labelId)\n      : fieldProps['aria-labelledby'];\n\n  return (\n    <div\n      {...rest}\n      ref={rootMergedRef}\n      className={cn(tagPickerClassNames.root, 'relative', className)}\n    >\n      <div\n        ref={setReference}\n        data-wave-tagpicker-control=\"\"\n        role=\"group\"\n        aria-disabled={disabled || undefined}\n        className={cn(\n          tagPickerClassNames.control,\n          'flex flex-wrap items-center gap-1 rounded border border-input border-b-stroke-accessible bg-background px-2 py-1.5',\n          inputFocusWithin,\n          invalidLook && inputInvalidWithin,\n          disabled && 'cursor-not-allowed opacity-50',\n        )}\n        onClick={(event) => {\n          if (disabled || (event.target as Element).closest('button')) return;\n          focusInput();\n          if (!open && interactive) setOpen(true);\n        }}\n      >\n        {selected.length > 0 && (\n          <div\n            role=\"list\"\n            aria-label={labels?.selected ?? 'Selected'}\n            className={cn(tagPickerClassNames.group, 'flex flex-wrap items-center gap-1')}\n          >\n            {selected.map((value) => {\n              const label = labelOf(value);\n              return (\n                <div\n                  key={value}\n                  role=\"listitem\"\n                  className={cn(\n                    tagPickerClassNames.tag,\n                    'inline-flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-body-1 text-foreground',\n                  )}\n                >\n                  {label}\n                  {!readOnly && (\n                    <TagRemoveButton\n                      label={(labels?.remove ?? defaultRemoveLabel)(label)}\n                      disabled={disabled}\n                      onClick={() => removeTag(value)}\n                      onKeyDown={(event) => handleTagKeyDown(event, value)}\n                      getFallback={getInput}\n                    />\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        )}\n        {selected.length > 0 && (\n          // Describes the input. The list itself would read every \"Remove …\" button name too.\n          <span id={summaryId} hidden>\n            {(labels?.summary ?? defaultSummaryLabel)(selected.map(labelOf))}\n          </span>\n        )}\n        <input\n          type=\"text\"\n          autoComplete={autoComplete}\n          {...fieldProps}\n          {...listbox.getComboboxProps()}\n          aria-expanded={expanded}\n          aria-describedby={joinIds(\n            fieldProps['aria-describedby'],\n            selected.length > 0 ? summaryId : undefined,\n          )}\n          aria-errormessage={ariaErrorMessage}\n          aria-details={ariaDetails}\n          ref={inputMergedRef}\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={selected.length === 0 ? placeholder : ''}\n          autoCapitalize={autoCapitalize}\n          autoCorrect={autoCorrect}\n          maxLength={maxLength}\n          inputMode={inputMode}\n          spellCheck={spellCheck}\n          enterKeyHint={enterKeyHint}\n          autoFocus={autoFocus}\n          tabIndex={tabIndex}\n          value={query}\n          onChange={(event) => {\n            if (!interactive) return;\n            setQuery(event.target.value);\n            if (!open) setOpen(true);\n          }}\n          onKeyDown={composeEventHandlers(onKeyDown, handleInputKeyDown)}\n          onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          className={cn(\n            tagPickerClassNames.input,\n            'min-w-15 flex-1 bg-transparent py-0.5 text-body-1 text-foreground placeholder:text-muted-foreground focus:outline-hidden',\n          )}\n        />\n      </div>\n      {/* Mounted before its text: a live region added together with its text is not announced by\n          every screen reader. The row in the popup is the visible copy. */}\n      <span role=\"status\" className=\"sr-only\">\n        {noMatches && noMatchesText}\n      </span>\n      <ListboxSurface\n        listbox={listbox}\n        layerId={layerId}\n        surfaceRef={surfaceRef}\n        floatingProps={floatingProps}\n        open={open}\n        expanded={expanded}\n        showCheck={false}\n        listboxClassName={tagPickerClassNames.listbox}\n        surfaceClassName={tagPickerClassNames.surface}\n        emptyContent={\n          query !== '' ? (\n            <div\n              aria-hidden=\"true\"\n              className={cn(\n                tagPickerClassNames.emptyMessage,\n                'px-3 py-1.5 text-body-1 text-muted-foreground',\n              )}\n            >\n              {noMatchesText}\n            </div>\n          ) : undefined\n        }\n        aria-label={fieldProps['aria-label']}\n        aria-labelledby={listLabelledBy}\n      >\n        {expanded &&\n          listbox.items.map((item) => (\n            <Option\n              key={item.value}\n              value={item.value}\n              label={item.label}\n              className={tagPickerClassNames.option}\n            >\n              {item.label}\n            </Option>\n          ))}\n      </ListboxSurface>\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={selected}\n        type=\"text\"\n        required={validates}\n        onInvalid={focusInput}\n      />\n    </div>\n  );\n};\nTagPicker.displayName = 'TagPicker';\n"],"mappings":"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"}