@mortenbrudvik/waveui 0.4.0 → 0.7.0

package/dist/components/input/Switch.mjs

@@ -0,0 +1,92 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { warnDeprecated as t, warnOnce as ee } from "../../lib/dev.mjs";
+import { materialiseSlotContent as te, slotRendersContent as n } from "../../lib/slot.mjs";
+import { composeEventHandlers as ne } from "../../lib/composeEventHandlers.mjs";
+import { useControllable as r } from "../../hooks/useControllable.mjs";
+import { useId as i } from "../../hooks/useId.mjs";
+import { useMergedRefs as re } from "../../hooks/useMergedRefs.mjs";
+import { focusableDisabledProps as ie, joinIds as ae } from "../../lib/aria.mjs";
+import { useFieldContext as oe, useFieldControl as a } from "../../hooks/useFieldControl.mjs";
+import { focusRing as se, forcedColors as o } from "../../lib/styles.mjs";
+import { useFormReset as ce } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as le } from "../internal/HiddenInput.mjs";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/input/Switch.tsx
+var u = "forced-colors:border-[Highlight] forced-colors:bg-[Highlight]", d = "forced-colors:border-[GrayText] forced-colors:bg-[Canvas]", f = ({ checked: f, defaultChecked: p = !1, onCheckedChange: ue, onChange: m, disabled: h = !1, disabledFocusable: g = !1, label: _, labelPosition: v = "after", name: y, value: b, required: x, form: S, id: C, "aria-label": w, "aria-labelledby": T, "aria-describedby": E, "aria-invalid": D, "aria-required": O, "aria-errormessage": k, "aria-details": A, "aria-disabled": j, autoFocus: M, tabIndex: N, onClick: P, onFocus: F, onBlur: de, onKeyDown: I, onKeyUp: L, controlRef: R, className: z, children: B, ref: V, ...H }) => {
+	m !== void 0 && t("Switch", "onChange", "onCheckedChange");
+	let U = n(B);
+	s.useEffect(() => {
+		U && ee("Switch:children", "Switch: children are not rendered. Pass the label in `label`.");
+	}, [U]);
+	let [W, G] = r(f, p, (e) => {
+		ue?.(e), m?.(e);
+	}), fe = i("switch"), K = i("switch-label"), q = oe(), J = a({
+		id: C,
+		"aria-label": w,
+		"aria-labelledby": T,
+		"aria-describedby": E,
+		"aria-invalid": D,
+		"aria-required": O ?? x
+	}), pe = x ?? q?.required ?? !1, Y = n(_), me = Y && J["aria-label"] === void 0 ? ae(J["aria-labelledby"], q && J.id === q.controlId ? q.labelId : void 0, K) : J["aria-labelledby"], X = s.useRef(null), he = re(X, R);
+	ce(X, () => G(p), S);
+	let Z = Y ? /* @__PURE__ */ c("span", {
+		id: K,
+		className: "text-body-1 text-foreground",
+		children: te(_)
+	}) : null, Q = v === "before" || v === "above", $ = h || g;
+	return /* @__PURE__ */ l("label", {
+		ref: V,
+		"data-label-position": v,
+		className: e("relative inline-flex items-start gap-2 select-none", v === "above" && "flex-col gap-1", $ ? "cursor-not-allowed opacity-50 has-focus-visible:opacity-100" : "cursor-pointer", z),
+		...H,
+		children: [
+			Q && Z,
+			/* @__PURE__ */ c("button", {
+				id: fe,
+				type: "button",
+				...J,
+				"aria-labelledby": me,
+				"aria-errormessage": k,
+				"aria-details": A,
+				"aria-disabled": j,
+				autoFocus: M,
+				tabIndex: N,
+				onFocus: F,
+				onBlur: de,
+				onKeyDown: I,
+				onKeyUp: L,
+				ref: he,
+				role: "switch",
+				"aria-checked": W,
+				disabled: h && !g,
+				...ie(g, { reachable: !0 }),
+				onClick: g ? (e) => {
+					e.preventDefault(), e.stopPropagation();
+				} : ne(P, () => G((e) => !e)),
+				className: e("relative inline-flex h-[20px] w-[40px] shrink-0 items-center rounded-full border p-0 transition-colors duration-200 motion-reduce:transition-none", se, W ? e("border-primary bg-primary", $ ? d : u) : e("border-stroke-accessible bg-transparent", $ ? o.disabled : o.control)),
+				children: /* @__PURE__ */ c("span", {
+					"aria-hidden": "true",
+					className: e("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__ */ c(le, {
+				type: "checkbox",
+				name: y,
+				form: S,
+				disabled: $,
+				value: b,
+				checked: W,
+				required: pe,
+				onInvalid: () => X.current?.focus()
+			})
+		]
+	});
+};
+f.displayName = "Switch";
+//#endregion
+export { f 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","materialiseSlotContent","labelFirst","labelPosition","unavailable","disabled","disabledFocusable","cn","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 { 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=\"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        // 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          // 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            '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/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("../../hooks/useControllable.cjs"),a=require("../../hooks/useId.cjs"),o=require("../../lib/direction.cjs"),s=require("../../hooks/useMergedRefs.cjs"),ee=require("../../hooks/useIsClient.cjs"),te=require("../../lib/aria.cjs"),c=require("../../hooks/useFieldControl.cjs"),ne=require("../../hooks/useAnnounce.cjs"),l=require("../../lib/styles.cjs"),u=require("../../lib/icons.cjs"),re=require("./Input.cjs"),ie=require("../../hooks/useFormReset.cjs"),ae=require("../internal/HiddenInput.cjs"),oe=require("../../hooks/useListbox.cjs"),d=require("./Option.cjs"),f=require("../../hooks/usePreserveFocus.cjs");let p=require("react");p=e.__toESM(p,1);let m=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`,h=[];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:i,getFallback:a}){let o=p.useRef(null);return f.usePreserveFocus(o,a),(0,m.jsx)(`button`,{ref:o,type:`button`,"data-wave-tagpicker-remove":``,disabled:n,"aria-label":e,className:t.cn(`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`,l.focusRing),onClick:r,onKeyDown:i,children:(0,m.jsx)(u.DismissIcon,{size:12})})}var g=e=>{let{options:u,value:f,defaultValue:g,onValueChange:pe,onChange:_,open:me,defaultOpen:he,onOpenChange:ge,placeholder:_e=`Select...`,disabled:v=!1,name:ve,form:y,required:b,autoComplete:ye=`off`,autoCapitalize:be,autoCorrect:xe,maxLength:Se,readOnly:x,labels:S,inputMode:Ce,spellCheck:we,enterKeyHint:Te,autoFocus:Ee,tabIndex:C,id:w,"aria-label":T,"aria-labelledby":E,"aria-describedby":D,"aria-invalid":De,"aria-required":Oe,"aria-errormessage":ke,"aria-details":Ae,onFocus:je,onBlur:Me,onKeyDown:Ne,onKeyUp:Pe,controlRef:Fe,className:Ie,ref:Le,...Re}=e;_!==void 0&&n.warnDeprecated(`TagPicker`,`onChange`,`onValueChange`);let O=c.useFieldContext(),ze=(b??O?.required??!1)&&!x,k=c.useFieldControl({id:w,"aria-label":T,"aria-labelledby":E,"aria-describedby":D,"aria-invalid":De,"aria-required":Oe??b}),Be=re.isInvalidLook(!1,k[`aria-invalid`]),[A,j]=i.useControllable(f,g??h,e=>{let t=[...e];pe?.(t),_?.(t)}),M=!v&&!x,[N,P]=i.useControllable(me,(he??!1)&&M,ge),Ve=ee.useIsClient(),F=N&&M&&Ve,[I,L]=p.useState(``),[He,Ue]=p.useState(M);He!==M&&(Ue(M),M||L(``));let R=!M&&N;p.useEffect(()=>{R&&P(!1)},[R,P]);let z=ne.useAnnounce(),B=p.useRef(null),V=p.useRef(null),H=a.useId(`tagpicker-summary`),U=p.useMemo(()=>{let e=new Map;for(let t of u)e.has(t.value)||e.set(t.value,t.label);return e},[u]),W=e=>U.get(e)??e,We=p.useMemo(()=>{let e=new Set(A);return u.filter(t=>!e.has(t.value)).map(e=>({value:e.value,label:e.label}))},[u,A]),Ge=p.useMemo(()=>I?e=>e.label.toLowerCase().includes(I.toLowerCase()):void 0,[I]),G=A.filter(e=>!U.has(e)).join(`\0`);p.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 Ke=()=>V.current,K=()=>V.current?.focus(),qe=e=>{if(!M||A.includes(e))return;let t=[...A,e];j(t),L(``),z((S?.added??le)(W(e),t.length))},q=e=>{if(!M)return;let t=A.filter(t=>t!==e);j(t),z((S?.removed??ue)(W(e),t.length)),K()},J=oe.useListbox({open:F,onOpenChange:e=>P(e),mode:`editable`,multiple:!0,selectedValues:A,onSelect:e=>qe(e),items:We,filter:Ge,autoHighlight:I?`first`:!1,idPrefix:`tagpicker-listbox`,onClearDraft:I?()=>L(``):void 0}),Y=F&&J.items.length>0,X=S?.noMatches??`No matches`,Z=F&&(Y||I!==``),Je=Z&&!Y,{layerId:Ye,setReference:Xe,surfaceRef:Ze,floatingProps:Q}=d.useListboxPopup({open:F,surfaceOpen:Z,onDismiss:()=>P(!1),rootRef:B,anchorRef:V}),Qe=s.useMergedRefs(B,Le),$e=s.useMergedRefs(V,Fe);ie.useFormReset(V,()=>{let e=g??h;j(t=>de(t,e)?t:[...e]),L(``)},y);let $=e=>Array.from(e.closest(`[data-wave-tagpicker-control]`)?.querySelectorAll(`[data-wave-tagpicker-remove]`)??[]),et=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)}},tt=(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=o.getArrowIntent(e.key,{orientation:`horizontal`,dir:o.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())},nt=k[`aria-label`]===void 0?k[`aria-labelledby`]??O?.labelId:k[`aria-labelledby`];return(0,m.jsxs)(`div`,{...Re,ref:Qe,className:t.cn(`relative`,Ie),children:[(0,m.jsxs)(`div`,{ref:Xe,"data-wave-tagpicker-control":``,role:`group`,"aria-disabled":v||void 0,className:t.cn(`flex flex-wrap items-center gap-1 rounded border border-input border-b-stroke-accessible bg-background px-2 py-1.5`,l.inputFocusWithin,Be&&`border-destructive focus-within:border-b-destructive`,v&&`cursor-not-allowed opacity-50`),onClick:e=>{v||e.target.closest(`button`)||(K(),!F&&M&&P(!0))},children:[A.length>0&&(0,m.jsx)(`div`,{role:`list`,"aria-label":S?.selected??`Selected`,className:`flex flex-wrap items-center gap-1`,children:A.map(e=>{let t=W(e);return(0,m.jsxs)(`div`,{role:`listitem`,className:`inline-flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-body-1 text-foreground`,children:[t,!x&&(0,m.jsx)(fe,{label:(S?.remove??se)(t),disabled:v,onClick:()=>q(e),onKeyDown:t=>tt(t,e),getFallback:Ke})]},e)})}),A.length>0&&(0,m.jsx)(`span`,{id:H,hidden:!0,children:(S?.summary??ce)(A.map(W))}),(0,m.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":ke,"aria-details":Ae,ref:$e,disabled:v,readOnly:x,placeholder:A.length===0?_e:``,autoCapitalize:be,autoCorrect:xe,maxLength:Se,inputMode:Ce,spellCheck:we,enterKeyHint:Te,autoFocus:Ee,tabIndex:C,value:I,onChange:e=>{M&&(L(e.target.value),F||P(!0))},onKeyDown:r.composeEventHandlers(Ne,et),onKeyUp:r.composeEventHandlers(Pe,J.onKeyUp),onFocus:je,onBlur:Me,className:`min-w-15 flex-1 bg-transparent py-0.5 text-body-1 text-foreground placeholder:text-muted-foreground focus:outline-hidden`})]}),(0,m.jsx)(`span`,{role:`status`,className:`sr-only`,children:Je&&X}),(0,m.jsx)(d.ListboxSurface,{listbox:J,layerId:Ye,surfaceRef:Ze,floatingProps:Q,open:F,expanded:Y,showCheck:!1,emptyContent:I===``?void 0:(0,m.jsx)(`div`,{"aria-hidden":`true`,className:`px-3 py-1.5 text-body-1 text-muted-foreground`,children:X}),"aria-label":k[`aria-label`],"aria-labelledby":nt,children:Y&&J.items.map(e=>(0,m.jsx)(d.Option,{value:e.value,label:e.label,children:e.label},e.value))}),(0,m.jsx)(ae.HiddenInput,{name:ve,form:y,disabled:v,value:A,type:`text`,required:ze,onInvalid:K})]})};g.displayName=`TagPicker`,exports.TagPicker=g;
+//# sourceMappingURL=TagPicker.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagPicker.cjs","names":["React","cn","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_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 { 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        // 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 {...rest} ref={rootMergedRef} className={cn('relative', className)}>\n      <div\n        ref={setReference}\n        data-wave-tagpicker-control=\"\"\n        role=\"group\"\n        aria-disabled={disabled || undefined}\n        className={cn(\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=\"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=\"inline-flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-body-1 text-foreground\"\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=\"min-w-15 flex-1 bg-transparent py-0.5 text-body-1 text-foreground placeholder:text-muted-foreground focus:outline-hidden\"\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        emptyContent={\n          query !== '' ? (\n            <div aria-hidden=\"true\" className=\"px-3 py-1.5 text-body-1 text-muted-foreground\">\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 key={item.value} value={item.value} label={item.label}>\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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"}

package/dist/components/input/TagPicker.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagPicker.mjs","names":["useId","useId$1","React","defaultRemoveLabel","label","defaultSummaryLabel","labels","defaultAddedLabel","count","defaultRemovedLabel","EMPTY","sameTags","a","b","value","index","TagRemoveButton","ref","usePreserveFocus","getFallback","cn","focusRing","DismissIcon","TagPicker","valueProp","openProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onChange","warnDeprecated","field","useFieldContext","validates","required","readOnly","fieldProps","useFieldControl","invalidLook","isInvalidLook","selected","setSelected","useControllable","defaultValue","list","next","onValueChange","interactive","disabled","openState","setOpen","defaultOpen","onOpenChange","isClient","useIsClient","open","query","setQuery","wasInteractive","setWasInteractive","lockedOpen","announce","useAnnounce","rootRef","inputRef","summaryId","labelByValue","map","option","options","labelOf","available","chosen","filter","item","unknownValues","warnOnce","v","getInput","focusInput","addTag","removeTag","listbox","useListbox","expanded","noMatchesText","surfaceOpen","noMatches","useListboxPopup","rootMergedRef","useMergedRefs","inputMergedRef","controlRef","initial","current","form","removeButtons","from","handleInputKeyDown","event","handleTagKeyDown","buttons","intent","getArrowIntent","getDirection","listLabelledBy","className","setReference","inputFocusWithin","joinIds","placeholder","composeEventHandlers","onKeyDown","onKeyUp","ListboxSurface","Option","HiddenInput"],"sources":["../../../src/components/input/TagPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\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        // 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 {...rest} ref={rootMergedRef} className={cn('relative', className)}>\n      <div\n        ref={setReference}\n        data-wave-tagpicker-control=\"\"\n        role=\"group\"\n        aria-disabled={disabled || undefined}\n        className={cn(\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=\"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=\"inline-flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-body-1 text-foreground\"\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=\"min-w-15 flex-1 bg-transparent py-0.5 text-body-1 text-foreground placeholder:text-muted-foreground focus:outline-hidden\"\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        emptyContent={\n          query !== '' ? (\n            <div aria-hidden=\"true\" className=\"px-3 py-1.5 text-body-1 text-muted-foreground\">\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 key={item.value} value={item.value} label={item.label}>\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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"}

package/dist/components/input/Textarea.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/aria.cjs"),r=require("../../hooks/useFieldControl.cjs"),i=require("../../lib/styles.cjs"),a=require("./Input.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=({error:e,errorMessageProps:o,className:c,ref:l,id:u,"aria-label":d,"aria-labelledby":f,"aria-describedby":p,"aria-invalid":m,"aria-required":h,"aria-errormessage":g,required:_,...v})=>{let{invalid:y,messageId:b,message:x}=a.useControlErrorMessage(e,o,m),S=r.useFieldControl({id:u,"aria-label":d,"aria-labelledby":f,"aria-describedby":n.joinIds(p,b),"aria-invalid":m??(y||void 0),"aria-required":h,required:_},{nativeRequired:!0}),C=a.isInvalidLook(y,S[`aria-invalid`]),w=(0,s.jsx)(`textarea`,{ref:l,className:t.cn(`min-h-20 w-full resize-y rounded border border-input border-b-stroke-accessible bg-background px-3 py-2 text-body-1 text-foreground`,`placeholder:text-muted-foreground`,i.inputFocus,`disabled:cursor-not-allowed disabled:opacity-50`,C&&`border-destructive focus:border-b-destructive`,c),...v,...S,"aria-errormessage":n.joinIds(g,b)});return x?(0,s.jsxs)(s.Fragment,{children:[w,x]}):w};c.displayName=`Textarea`,exports.Textarea=c;
+//# sourceMappingURL=Textarea.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.cjs","names":["useControlErrorMessage","useFieldControl","joinIds","isInvalidLook","cn","inputFocus","_Fragment","require_runtime","require_cn","require_aria","require_useFieldControl","require_styles","require_Input","react","react_jsx_runtime","Textarea","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","props","error","errorMessageProps","fieldProps","messageId","invalid","invalidLook","control","className","message"],"sources":["../../../src/components/input/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { inputFocus, inputInvalid } from '../../lib/styles';\nimport { useFieldControl } from '../../hooks/useFieldControl';\nimport { isInvalidLook, useControlErrorMessage, type InputErrorMessageProps } from './Input';\n\n/** Properties for the Textarea component. */\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /**\n   * Validation error.\n   * - A non-empty string renders the message in a `role=\"alert\"` element **after** the textarea\n   *   (a sibling, so `ref` and `className` stay on the textarea) and links it through\n   *   `aria-describedby` and `aria-errormessage`. Inside a `Field` that renders its own `error`,\n   *   the message is not repeated.\n   * - `true` only marks the textarea invalid (`aria-invalid` and the error border), as in 0.4.\n   *\n   * The error border also shows whenever the textarea ends up `aria-invalid=\"true\"` without this\n   * prop (an `error` on the surrounding `Field`, or your own `aria-invalid`).\n   * Your own `aria-invalid={false}` (or `\"false\"`) wins over this prop: the textarea is reported\n   * valid and shows neither the error border nor the message.\n   */\n  error?: string | boolean;\n  /** Props of the error message element (`id`, `className`, …) rendered for a string `error`. */\n  errorMessageProps?: InputErrorMessageProps;\n  /** Ref to the `<textarea>` element. */\n  ref?: React.Ref<HTMLTextAreaElement>;\n}\n\n/**\n * A multi-line text input with Fluent styling (vertical resize, accessible bottom stroke, primary\n * bottom border while focused). Inside a `Field` it picks up the label, hint, error, `required`\n * (native attribute) and invalid state automatically.\n *\n * @example\n * <Field label=\"Description\" hint=\"Markdown is supported\">\n *   <Textarea rows={4} />\n * </Field>\n */\nexport const Textarea = ({\n  error,\n  errorMessageProps,\n  className,\n  ref,\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  required,\n  ...props\n}: TextareaProps) => {\n  const { invalid, messageId, message } = useControlErrorMessage(\n    error,\n    errorMessageProps,\n    ariaInvalid,\n  );\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': joinIds(ariaDescribedBy, messageId),\n      'aria-invalid': ariaInvalid ?? (invalid || undefined),\n      'aria-required': ariaRequired,\n      required,\n    },\n    { nativeRequired: true },\n  );\n  const invalidLook = isInvalidLook(invalid, fieldProps['aria-invalid']);\n\n  const control = (\n    <textarea\n      ref={ref}\n      className={cn(\n        'min-h-20 w-full resize-y rounded border border-input border-b-stroke-accessible bg-background px-3 py-2 text-body-1 text-foreground',\n        'placeholder:text-muted-foreground',\n        inputFocus,\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        invalidLook && inputInvalid,\n        className,\n      )}\n      {...props}\n      {...fieldProps}\n      aria-errormessage={joinIds(ariaErrorMessage, messageId)}\n    />\n  );\n\n  if (!message) return control;\n  return (\n    <>\n      {control}\n      {message}\n    </>\n  );\n};\n\nTextarea.displayName = 'Textarea';\n"],"mappings":"sTAuCA,IAAae,GAAY,CACvB,QACA,oBACA,YACA,MACA,KACA,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,EAChB,gBAAiBC,EACjB,oBAAqBC,EACrB,WACA,GAAGC,KACgB,CACnB,GAAM,CAAE,UAAS,YAAW,WAAYtB,EAAAA,uBACtCuB,EACAC,EACAL,CACF,EACMM,EAAaxB,EAAAA,gBACjB,CACE,KACA,aAAce,EACd,kBAAmBC,EACnB,mBAAoBf,EAAAA,QAAQgB,EAAiBQ,CAAS,EACtD,eAAgBP,IAAgBQ,GAAW,IAAA,IAC3C,gBAAiBP,EACjB,UACF,EACA,CAAE,eAAgB,EAAK,CACzB,EACMQ,EAAczB,EAAAA,cAAcwB,EAASF,EAAW,eAAe,EAE/DI,GACJ,EAAAf,EAAA,IAAA,CAAC,WAAD,CACO,MACL,UAAWV,EAAAA,GACT,sIACA,oCACAC,EAAAA,WACA,kDACAuB,GAAA,gDACAE,CACF,EACA,GAAIR,EACJ,GAAIG,EACJ,oBAAmBvB,EAAAA,QAAQmB,EAAkBK,CAAS,CACvD,CAAA,EAIH,OADKK,GAEH,EAAAjB,EAAA,KAAA,CAAAR,EAAAA,SAAA,CAAA,SAAA,CACGuB,EACAE,CACD,CAAA,CAAA,EALiBF,CAOvB,EAEA,EAAS,YAAc"}