@mortenbrudvik/waveui 0.7.0 → 0.8.0

package/dist/components/input/Input.mjs

@@ -1,81 +1,82 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
 import { renderSlot as t, slotRendersContent as n } from "../../lib/slot.mjs";
-import { useId as r } from "../../hooks/useId.mjs";
-import { joinIds as i } from "../../lib/aria.mjs";
-import { useFieldContext as a, useFieldControl as o } from "../../hooks/useFieldControl.mjs";
-import { inputFocus as s, inputFocusWithin as c } from "../../lib/styles.mjs";
+import { inputClassNames as r } from "../../lib/classNames.mjs";
+import { useId as i } from "../../hooks/useId.mjs";
+import { joinIds as a } from "../../lib/aria.mjs";
+import { useFieldContext as o, useFieldControl as s } from "../../hooks/useFieldControl.mjs";
+import { inputFocus as c, inputFocusWithin as l } from "../../lib/styles.mjs";
 import "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/input/Input.tsx
-function f(e) {
+function p(e) {
 	return e === !1 || e === "false";
 }
-function p(t, n, i) {
-	let o = a(), s = r("error"), c = !f(i) && (t === !0 || typeof t == "string" && t !== "");
-	if (!c || typeof t != "string" || o?.hasErrorMessage) return {
-		invalid: c,
+function m(t, n, r, a) {
+	let s = o(), c = i("error"), l = !p(r) && (t === !0 || typeof t == "string" && t !== "");
+	if (!l || typeof t != "string" || s?.hasErrorMessage) return {
+		invalid: l,
 		messageId: void 0,
 		message: null
 	};
-	let { id: l, className: d, ...p } = n ?? {}, m = l ?? s;
+	let { id: u, className: f, ...m } = n ?? {}, h = u ?? c;
 	return {
-		invalid: c,
-		messageId: m,
-		message: /* @__PURE__ */ u("span", {
+		invalid: l,
+		messageId: h,
+		message: /* @__PURE__ */ d("span", {
 			role: "alert",
-			...p,
-			id: m,
-			className: e("mt-1 block text-caption-1 text-error", d),
+			...m,
+			id: h,
+			className: e(a, "mt-1 block text-caption-1 text-error", f),
 			children: t
 		})
 	};
 }
-function m(e, t) {
-	return f(t) ? !1 : e || t === !0 || t === "true";
+function h(e, t) {
+	return p(t) ? !1 : e || t === !0 || t === "true";
 }
-var h = ({ error: r, errorMessageProps: a, contentBefore: f, contentAfter: h, onChange: g, onValueChange: _, className: v, ref: y, id: b, "aria-label": x, "aria-labelledby": S, "aria-describedby": C, "aria-invalid": w, "aria-required": T, "aria-errormessage": E, required: D, ...O }) => {
-	let { invalid: k, messageId: A, message: j } = p(r, a, w), M = o({
-		id: b,
-		"aria-label": x,
-		"aria-labelledby": S,
-		"aria-describedby": i(C, A),
-		"aria-invalid": w ?? (k || void 0),
-		"aria-required": T,
-		required: D
-	}, { nativeRequired: !0 }), N = m(k, M["aria-invalid"]), P = g || _ ? (e) => {
-		g?.(e), _?.(e.currentTarget.value);
-	} : void 0, F = {
-		...O,
-		...M,
-		"aria-errormessage": i(E, A),
-		onChange: P
-	}, I = n(f), L = n(h), R;
-	if (I || L) {
-		let { style: n, hidden: r, ...i } = F;
-		R = /* @__PURE__ */ d("span", {
-			hidden: r,
+var g = ({ error: i, errorMessageProps: o, contentBefore: p, contentAfter: g, onChange: _, onValueChange: v, className: y, ref: b, id: x, "aria-label": S, "aria-labelledby": C, "aria-describedby": w, "aria-invalid": T, "aria-required": E, "aria-errormessage": D, required: O, ...k }) => {
+	let { invalid: A, messageId: j, message: M } = m(i, o, T, r.errorMessage), N = s({
+		id: x,
+		"aria-label": S,
+		"aria-labelledby": C,
+		"aria-describedby": a(w, j),
+		"aria-invalid": T ?? (A || void 0),
+		"aria-required": E,
+		required: O
+	}, { nativeRequired: !0 }), P = h(A, N["aria-invalid"]), F = _ || v ? (e) => {
+		_?.(e), v?.(e.currentTarget.value);
+	} : void 0, I = {
+		...k,
+		...N,
+		"aria-errormessage": a(D, j),
+		onChange: F
+	}, L = n(p), R = n(g), z;
+	if (L || R) {
+		let { style: n, hidden: i, ...a } = I;
+		z = /* @__PURE__ */ f("span", {
+			hidden: i,
 			style: n,
-			className: e("inline-flex h-8 w-full items-center rounded border border-input border-b-stroke-accessible bg-background text-body-1 text-foreground", c, N && "border-destructive focus-within:border-b-destructive", O.disabled && "cursor-not-allowed opacity-50 has-focus-visible:opacity-100", v),
+			className: e(r.root, "inline-flex h-8 w-full items-center rounded border border-input border-b-stroke-accessible bg-background text-body-1 text-foreground", l, P && "border-destructive focus-within:border-b-destructive", k.disabled && "cursor-not-allowed opacity-50 has-focus-visible:opacity-100", y),
 			children: [
-				I && t(f, "span", "shrink-0 ps-2"),
-				/* @__PURE__ */ u("input", {
-					ref: y,
-					className: e("h-full w-full min-w-0 bg-transparent px-2 text-body-1 text-foreground", "placeholder:text-muted-foreground", "focus:outline-hidden", "disabled:cursor-not-allowed"),
-					...i
+				L && t(p, "span", e(r.contentBefore, "shrink-0 ps-2")),
+				/* @__PURE__ */ d("input", {
+					ref: b,
+					className: e(r.input, "h-full w-full min-w-0 bg-transparent px-2 text-body-1 text-foreground", "placeholder:text-muted-foreground", "focus:outline-hidden", "disabled:cursor-not-allowed"),
+					...a
 				}),
-				L && t(h, "span", "shrink-0 pe-2")
+				R && t(g, "span", e(r.contentAfter, "shrink-0 pe-2"))
 			]
 		});
-	} else R = /* @__PURE__ */ u("input", {
-		ref: y,
-		className: e("h-8 w-full rounded border border-input border-b-stroke-accessible bg-background px-3 text-body-1 text-foreground", "placeholder:text-muted-foreground", s, "disabled:cursor-not-allowed disabled:opacity-50", N && "border-destructive focus:border-b-destructive", v),
-		...F
+	} else z = /* @__PURE__ */ d("input", {
+		ref: b,
+		className: e(r.root, r.input, "h-8 w-full rounded border border-input border-b-stroke-accessible bg-background px-3 text-body-1 text-foreground", "placeholder:text-muted-foreground", c, "disabled:cursor-not-allowed disabled:opacity-50", P && "border-destructive focus:border-b-destructive", y),
+		...I
 	});
-	return j ? /* @__PURE__ */ d(l, { children: [R, j] }) : R;
+	return M ? /* @__PURE__ */ f(u, { children: [z, M] }) : z;
 };
-h.displayName = "Input";
+g.displayName = "Input";
 //#endregion
-export { h as Input, m as isInvalidLook, p as useControlErrorMessage };
+export { g as Input, h as isInvalidLook, m as useControlErrorMessage };
 
 //# sourceMappingURL=Input.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":["useId","_jsx","_Fragment","useId$1","isAriaValid","ariaInvalid","useControlErrorMessage","field","useFieldContext","generatedId","invalid","consumerAriaInvalid","error","ownId","messageClassName","messageRest","errorMessageProps","messageId","cn","isInvalidLook","ownError","Input","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaRequired","ariaErrorMessage","props","fieldProps","useFieldControl","joinIds","invalidLook","handleChange","onChange","onValueChange","event","controlProps","hasBefore","slotRendersContent","contentBefore","hasAfter","contentAfter","control","inputProps","inputFocusWithin","className","renderSlot","inputFocus","message","Fragment"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport { inputFocus, inputFocusWithin, inputInvalid, inputInvalidWithin } from '../../lib/styles';\nimport type { Slot } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\n\n/**\n * Props of the error message element that {@link Input}, `Select` and `Textarea` render after the\n * control for a string `error` (`id`, `className`, `role`, data attributes, …).\n */\nexport interface InputErrorMessageProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Ref to the message `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n  /** Any `data-*` attribute. */\n  [dataAttribute: `data-${string}`]: unknown;\n}\n\n/**\n * Result of {@link useControlErrorMessage}.\n *\n * @internal Not exported from the package.\n */\nexport interface ControlErrorMessage {\n  /**\n   * Whether `error` marks the control invalid (a non-empty string or `true`), unless the consumer\n   * set `aria-invalid` to `false`/`\"false\"`.\n   */\n  invalid: boolean;\n  /** The id of the rendered message, joined into `aria-describedby`/`aria-errormessage`. */\n  messageId: string | undefined;\n  /** The message element to render after the control, or `null`. */\n  message: React.ReactElement | null;\n}\n\n/** Whether an `aria-invalid` value explicitly reports the control as valid. */\nfunction isAriaValid(ariaInvalid: React.AriaAttributes['aria-invalid']): boolean {\n  return ariaInvalid === false || ariaInvalid === 'false';\n}\n\n/**\n * Shared by Input, Select and Textarea (internal): a non-empty string `error` renders a sibling\n * `<span role=\"alert\">` message, unless the surrounding `Field` already renders its own error\n * (`FieldContext.hasErrorMessage`); `true` only marks the control invalid. The consumer's\n * `aria-invalid` of `false`/`\"false\"` wins over `error`: the control is valid, so nothing is\n * marked invalid and no message is rendered or referenced (ARIA: an error message of a valid\n * control is hidden).\n *\n * @internal Not exported from the package.\n */\nexport function useControlErrorMessage(\n  error: string | boolean | undefined,\n  errorMessageProps: InputErrorMessageProps | undefined,\n  consumerAriaInvalid?: React.AriaAttributes['aria-invalid'],\n): ControlErrorMessage {\n  const field = useFieldContext();\n  const generatedId = useId('error');\n  const invalid =\n    !isAriaValid(consumerAriaInvalid) &&\n    (error === true || (typeof error === 'string' && error !== ''));\n  const showMessage = invalid && typeof error === 'string' && !field?.hasErrorMessage;\n  if (!showMessage) return { invalid, messageId: undefined, message: null };\n\n  const { id: ownId, className: messageClassName, ...messageRest } = errorMessageProps ?? {};\n  const messageId = ownId ?? generatedId;\n  const message = (\n    <span\n      role=\"alert\"\n      {...messageRest}\n      id={messageId}\n      className={cn('mt-1 block text-caption-1 text-error', messageClassName)}\n    >\n      {error}\n    </span>\n  );\n  return { invalid, messageId, message };\n}\n\n/**\n * Whether a text control shows the invalid look (error border), shared by Input, Select, Textarea\n * and SearchBox (internal): its own `error`, or a resolved `aria-invalid` of `true`/`\"true\"` —\n * from the consumer or from the surrounding `Field` (`useFieldControl`) — so the look always\n * matches the state assistive technology reports. A resolved `false`/`\"false\"` (the consumer's\n * override) never shows it, even with an own `error`. `\"grammar\"`/`\"spelling\"` alone do not\n * count; with an own `error` they keep the look (the control is reported invalid).\n *\n * @internal Not exported from the package.\n */\nexport function isInvalidLook(\n  ownError: boolean,\n  ariaInvalid: React.AriaAttributes['aria-invalid'],\n): boolean {\n  if (isAriaValid(ariaInvalid)) return false;\n  return ownError || ariaInvalid === true || ariaInvalid === 'true';\n}\n\n/** Properties for the Input component. */\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Validation error.\n   * - A non-empty string renders the message in a `role=\"alert\"` element **after** the field (a\n   *   sibling, so it does not change which element receives `ref`, `className` or `style`) and\n   *   links it through `aria-describedby` and `aria-errormessage`. Inside a `Field` that renders\n   *   its own `error`, the message is not repeated.\n   * - `true` only marks the input invalid (`aria-invalid` and the error border), as in 0.4.\n   *\n   * The error border also shows whenever the input 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 input is reported\n   * valid and shows neither the error border nor the message.\n   * Use `Field` (`label`, `hint`, `error`) for a complete field layout.\n   */\n  error?: string | boolean;\n  /** Props of the error message element (`id`, `className`, …) rendered for a string `error`. */\n  errorMessageProps?: InputErrorMessageProps;\n  /**\n   * Slot rendered before the input text (e.g., an icon). With content in either slot, a bordered\n   * `<span>` around the input draws the field: it receives `className`, `style` and `hidden`,\n   * while `ref`, `id`, `aria-*`, `data-*`, handlers and native attributes stay on the `<input>`.\n   * A value that renders nothing (`false`, `''`, `[]`) is no slot.\n   */\n  contentBefore?: Slot<'span'>;\n  /** Slot rendered after the input text (e.g., a suffix). Same wrapper as `contentBefore`. */\n  contentAfter?: Slot<'span'>;\n  /**\n   * Called with the new string value on every change, next to the native `onChange` event\n   * handler (`onValueChange={setName}` instead of `onChange={(e) => setName(e.target.value)}`).\n   */\n  onValueChange?: (value: string) => void;\n  /** Ref to the `<input>` element (also with `contentBefore`/`contentAfter`). */\n  ref?: React.Ref<HTMLInputElement>;\n}\n\n/**\n * A single-line text input with Fluent styling: a 1px border with an accessible bottom stroke, a\n * primary bottom border while focused, optional `contentBefore`/`contentAfter` slots and an\n * optional error message. Inside a `Field` it picks up the label, hint, error, `required` (native\n * attribute) and invalid state automatically.\n *\n * Every prop reaches the `<input>`, except with slot content: then a bordered `<span>` wrapper\n * draws the field and receives `className`, `style` and `hidden` (`ref` stays on the input).\n *\n * @example\n * <Field label=\"Email\" hint=\"We never share it\" required>\n *   <Input type=\"email\" value={email} onValueChange={setEmail} />\n * </Field>\n */\nexport const Input = ({\n  error,\n  errorMessageProps,\n  contentBefore,\n  contentAfter,\n  onChange,\n  onValueChange,\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}: InputProps) => {\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 handleChange =\n    onChange || onValueChange\n      ? (event: React.ChangeEvent<HTMLInputElement>) => {\n          onChange?.(event);\n          onValueChange?.(event.currentTarget.value);\n        }\n      : undefined;\n\n  const controlProps = {\n    ...props,\n    ...fieldProps,\n    'aria-errormessage': joinIds(ariaErrorMessage, messageId),\n    onChange: handleChange,\n  };\n\n  const hasBefore = slotRendersContent(contentBefore);\n  const hasAfter = slotRendersContent(contentAfter);\n\n  let control: React.ReactElement;\n  if (hasBefore || hasAfter) {\n    // The bordered wrapper is the visible field: `className`, `style` and `hidden` size, style and\n    // hide it; `ref`, `id`, `aria-*`, `data-*`, handlers and native attributes go to the input.\n    const { style, hidden, ...inputProps } = controlProps;\n    control = (\n      <span\n        hidden={hidden}\n        style={style}\n        className={cn(\n          'inline-flex h-8 w-full items-center rounded border border-input border-b-stroke-accessible bg-background text-body-1 text-foreground',\n          inputFocusWithin,\n          invalidLook && inputInvalidWithin,\n          // The dimmed look lifts while a focus ring shows inside the wrapper (focusable slot\n          // content; the disabled input never takes focus): opacity would dim the ring below 3:1.\n          props.disabled && 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100',\n          className,\n        )}\n      >\n        {hasBefore && renderSlot(contentBefore, 'span', 'shrink-0 ps-2')}\n        <input\n          ref={ref}\n          className={cn(\n            'h-full w-full min-w-0 bg-transparent px-2 text-body-1 text-foreground',\n            'placeholder:text-muted-foreground',\n            'focus:outline-hidden',\n            'disabled:cursor-not-allowed',\n          )}\n          {...inputProps}\n        />\n        {hasAfter && renderSlot(contentAfter, 'span', 'shrink-0 pe-2')}\n      </span>\n    );\n  } else {\n    control = (\n      <input\n        ref={ref}\n        className={cn(\n          'h-8 w-full rounded border border-input border-b-stroke-accessible bg-background px-3 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        {...controlProps}\n      />\n    );\n  }\n\n  if (!message) return control;\n  return (\n    <>\n      {control}\n      {message}\n    </>\n  );\n};\n\nInput.displayName = 'Input';\n"],"mappings":";;;;;;;;;;AAsCA,SAASI,EAAY,GAA4D;CAC/E,OAAOC,MAAgB,MAASA,MAAgB;AAClD;AAYA,SAAgBC,EACd,GACA,GACA,GACqB;CACrB,IAAMC,IAAQC,EAAgB,GACxBC,IAAcT,EAAM,OAAO,GAC3BU,IACJ,CAACN,EAAYO,CAAmB,MAC/BC,MAAU,MAAS,OAAOA,KAAU,YAAYA,MAAU;CAE7D,IADoB,MAAW,OAAOA,KAAU,YAAaL,GAAO,iBAClD,OAAO;EAAE;EAAS,WAAW,KAAA;EAAW,SAAS;CAAK;CAExE,IAAM,EAAE,IAAIM,GAAO,WAAWC,GAAkB,GAAGC,MAAgBC,KAAqB,CAAC,GACnFC,IAAYJ,KAASJ;CAW3B,OAAO;EAAE;EAAS;EAAW,SAT3BR,kBAAC,QAAD;GACE,MAAK;GACL,GAAIc;GACJ,IAAIE;GACJ,WAAWC,EAAG,wCAAwCJ,CAAgB;GAErE,UAAAF;EACG,CAEqB;CAAQ;AACvC;AAYA,SAAgBO,EACd,GACA,GACS;CAET,OADIf,EAAYC,CAAW,IAAU,KAC9Be,KAAYf,MAAgB,MAAQA,MAAgB;AAC7D;AAqDA,IAAagB,KAAS,EACpB,UACA,sBACA,kBACA,iBACA,aACA,kBACA,cACA,QACA,OACA,cAAcC,GACd,mBAAmBC,GACnB,oBAAoBC,GACpB,gBAAgBnB,GAChB,iBAAiBoB,GACjB,qBAAqBC,GACrB,aACA,GAAGC,QACa;CAChB,IAAM,EAAE,YAAS,cAAW,eAAYrB,EACtCM,GACAI,GACAX,CACF,GACMuB,IAAaC,EACjB;EACE;EACA,cAAcP;EACd,mBAAmBC;EACnB,oBAAoBO,EAAQN,GAAiBP,CAAS;EACtD,gBAAgBZ,MAAgBK,KAAW,KAAA;EAC3C,iBAAiBe;EACjB;CACF,GACA,EAAE,gBAAgB,GAAK,CACzB,GACMM,IAAcZ,EAAcT,GAASkB,EAAW,eAAe,GAE/DI,IACJC,KAAYC,KACP,MAA+C;EAE9C,AADAD,IAAWE,CAAK,GAChBD,IAAgBC,EAAM,cAAc,KAAK;CAC3C,IACA,KAAA,GAEAC,IAAe;EACnB,GAAGT;EACH,GAAGC;EACH,qBAAqBE,EAAQJ,GAAkBT,CAAS;EACxD,UAAUe;CACZ,GAEMK,IAAYC,EAAmBC,CAAa,GAC5CC,IAAWF,EAAmBG,CAAY,GAE5CC;CACJ,IAAIL,KAAaG,GAAU;EAGzB,IAAM,EAAE,UAAO,WAAQ,GAAGG,MAAeP;EACzC,IACE,kBAAC,QAAD;GACU;GACD;GACP,WAAWlB,EACT,wIACA0B,GACAb,KAAA,wDAGAJ,EAAM,YAAY,+DAClBkB,CACF;GAXF,UAAA;IAaGR,KAAaS,EAAWP,GAAe,QAAQ,eAAe;IAC/D,kBAAC,SAAD;KACO;KACL,WAAWrB,EACT,yEACA,qCACA,wBACA,6BACF;KACA,GAAIyB;IACL,CAAA;IACAH,KAAYM,EAAWL,GAAc,QAAQ,eAAe;GACzD;;CAEV,OACE,IACE,kBAAC,SAAD;EACO;EACL,WAAWvB,EACT,oHACA,qCACA6B,GACA,mDACAhB,KAAA,iDACAc,CACF;EACA,GAAIT;CACL,CAAA;CAKL,OADKY,IAEH,kBAAA9C,GAAA,EAAA,UAAA,CACGwC,GACAM,CACD,EAAA,CAAA,IALiBN;AAOvB;AAEA,EAAM,cAAc"}
+{"version":3,"file":"Input.mjs","names":["useId","_jsx","_Fragment","useId$1","isAriaValid","ariaInvalid","useControlErrorMessage","field","useFieldContext","generatedId","invalid","consumerAriaInvalid","error","ownId","messageClassName","messageRest","errorMessageProps","messageId","cn","partClassName","isInvalidLook","ownError","Input","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaRequired","ariaErrorMessage","props","inputClassNames","fieldProps","useFieldControl","joinIds","invalidLook","handleChange","onChange","onValueChange","event","controlProps","hasBefore","slotRendersContent","contentBefore","hasAfter","contentAfter","control","inputProps","inputFocusWithin","className","renderSlot","inputFocus","message","Fragment"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { inputClassNames } from '../../lib/classNames';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport { inputFocus, inputFocusWithin, inputInvalid, inputInvalidWithin } from '../../lib/styles';\nimport type { Slot } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\n\n/**\n * Props of the error message element that {@link Input}, `Select` and `Textarea` render after the\n * control for a string `error` (`id`, `className`, `role`, data attributes, …).\n */\nexport interface InputErrorMessageProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Ref to the message `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n  /** Any `data-*` attribute. */\n  [dataAttribute: `data-${string}`]: unknown;\n}\n\n/**\n * Result of {@link useControlErrorMessage}.\n *\n * @internal Not exported from the package.\n */\nexport interface ControlErrorMessage {\n  /**\n   * Whether `error` marks the control invalid (a non-empty string or `true`), unless the consumer\n   * set `aria-invalid` to `false`/`\"false\"`.\n   */\n  invalid: boolean;\n  /** The id of the rendered message, joined into `aria-describedby`/`aria-errormessage`. */\n  messageId: string | undefined;\n  /** The message element to render after the control, or `null`. */\n  message: React.ReactElement | null;\n}\n\n/** Whether an `aria-invalid` value explicitly reports the control as valid. */\nfunction isAriaValid(ariaInvalid: React.AriaAttributes['aria-invalid']): boolean {\n  return ariaInvalid === false || ariaInvalid === 'false';\n}\n\n/**\n * Shared by Input, Select and Textarea (internal): a non-empty string `error` renders a sibling\n * `<span role=\"alert\">` message, unless the surrounding `Field` already renders its own error\n * (`FieldContext.hasErrorMessage`); `true` only marks the control invalid. The consumer's\n * `aria-invalid` of `false`/`\"false\"` wins over `error`: the control is valid, so nothing is\n * marked invalid and no message is rendered or referenced (ARIA: an error message of a valid\n * control is hidden).\n *\n * `partClassName` is the host's stable `errorMessage` class, first in the message's classes\n * (Input, Select and Textarea each pass their own).\n *\n * @internal Not exported from the package.\n */\nexport function useControlErrorMessage(\n  error: string | boolean | undefined,\n  errorMessageProps: InputErrorMessageProps | undefined,\n  consumerAriaInvalid?: React.AriaAttributes['aria-invalid'],\n  partClassName?: string,\n): ControlErrorMessage {\n  const field = useFieldContext();\n  const generatedId = useId('error');\n  const invalid =\n    !isAriaValid(consumerAriaInvalid) &&\n    (error === true || (typeof error === 'string' && error !== ''));\n  const showMessage = invalid && typeof error === 'string' && !field?.hasErrorMessage;\n  if (!showMessage) return { invalid, messageId: undefined, message: null };\n\n  const { id: ownId, className: messageClassName, ...messageRest } = errorMessageProps ?? {};\n  const messageId = ownId ?? generatedId;\n  const message = (\n    <span\n      role=\"alert\"\n      {...messageRest}\n      id={messageId}\n      className={cn(partClassName, 'mt-1 block text-caption-1 text-error', messageClassName)}\n    >\n      {error}\n    </span>\n  );\n  return { invalid, messageId, message };\n}\n\n/**\n * Whether a text control shows the invalid look (error border), shared by Input, Select, Textarea\n * and SearchBox (internal): its own `error`, or a resolved `aria-invalid` of `true`/`\"true\"` —\n * from the consumer or from the surrounding `Field` (`useFieldControl`) — so the look always\n * matches the state assistive technology reports. A resolved `false`/`\"false\"` (the consumer's\n * override) never shows it, even with an own `error`. `\"grammar\"`/`\"spelling\"` alone do not\n * count; with an own `error` they keep the look (the control is reported invalid).\n *\n * @internal Not exported from the package.\n */\nexport function isInvalidLook(\n  ownError: boolean,\n  ariaInvalid: React.AriaAttributes['aria-invalid'],\n): boolean {\n  if (isAriaValid(ariaInvalid)) return false;\n  return ownError || ariaInvalid === true || ariaInvalid === 'true';\n}\n\n/** Properties for the Input component. */\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Validation error.\n   * - A non-empty string renders the message in a `role=\"alert\"` element **after** the field (a\n   *   sibling, so it does not change which element receives `ref`, `className` or `style`) and\n   *   links it through `aria-describedby` and `aria-errormessage`. Inside a `Field` that renders\n   *   its own `error`, the message is not repeated.\n   * - `true` only marks the input invalid (`aria-invalid` and the error border), as in 0.4.\n   *\n   * The error border also shows whenever the input 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 input is reported\n   * valid and shows neither the error border nor the message.\n   * Use `Field` (`label`, `hint`, `error`) for a complete field layout.\n   */\n  error?: string | boolean;\n  /** Props of the error message element (`id`, `className`, …) rendered for a string `error`. */\n  errorMessageProps?: InputErrorMessageProps;\n  /**\n   * Slot rendered before the input text (e.g., an icon). With content in either slot, a bordered\n   * `<span>` around the input draws the field: it receives `className`, `style` and `hidden`,\n   * while `ref`, `id`, `aria-*`, `data-*`, handlers and native attributes stay on the `<input>`.\n   * A value that renders nothing (`false`, `''`, `[]`) is no slot.\n   */\n  contentBefore?: Slot<'span'>;\n  /** Slot rendered after the input text (e.g., a suffix). Same wrapper as `contentBefore`. */\n  contentAfter?: Slot<'span'>;\n  /**\n   * Called with the new string value on every change, next to the native `onChange` event\n   * handler (`onValueChange={setName}` instead of `onChange={(e) => setName(e.target.value)}`).\n   */\n  onValueChange?: (value: string) => void;\n  /** Ref to the `<input>` element (also with `contentBefore`/`contentAfter`). */\n  ref?: React.Ref<HTMLInputElement>;\n}\n\n/**\n * A single-line text input with Fluent styling: a 1px border with an accessible bottom stroke, a\n * primary bottom border while focused, optional `contentBefore`/`contentAfter` slots and an\n * optional error message. Inside a `Field` it picks up the label, hint, error, `required` (native\n * attribute) and invalid state automatically.\n *\n * Every prop reaches the `<input>`, except with slot content: then a bordered `<span>` wrapper\n * draws the field and receives `className`, `style` and `hidden` (`ref` stays on the input).\n *\n * @example\n * <Field label=\"Email\" hint=\"We never share it\" required>\n *   <Input type=\"email\" value={email} onValueChange={setEmail} />\n * </Field>\n */\nexport const Input = ({\n  error,\n  errorMessageProps,\n  contentBefore,\n  contentAfter,\n  onChange,\n  onValueChange,\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}: InputProps) => {\n  const { invalid, messageId, message } = useControlErrorMessage(\n    error,\n    errorMessageProps,\n    ariaInvalid,\n    inputClassNames.errorMessage,\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 handleChange =\n    onChange || onValueChange\n      ? (event: React.ChangeEvent<HTMLInputElement>) => {\n          onChange?.(event);\n          onValueChange?.(event.currentTarget.value);\n        }\n      : undefined;\n\n  const controlProps = {\n    ...props,\n    ...fieldProps,\n    'aria-errormessage': joinIds(ariaErrorMessage, messageId),\n    onChange: handleChange,\n  };\n\n  const hasBefore = slotRendersContent(contentBefore);\n  const hasAfter = slotRendersContent(contentAfter);\n\n  let control: React.ReactElement;\n  if (hasBefore || hasAfter) {\n    // The bordered wrapper is the visible field: `className`, `style` and `hidden` size, style and\n    // hide it; `ref`, `id`, `aria-*`, `data-*`, handlers and native attributes go to the input.\n    const { style, hidden, ...inputProps } = controlProps;\n    control = (\n      <span\n        hidden={hidden}\n        style={style}\n        className={cn(\n          inputClassNames.root,\n          'inline-flex h-8 w-full items-center rounded border border-input border-b-stroke-accessible bg-background text-body-1 text-foreground',\n          inputFocusWithin,\n          invalidLook && inputInvalidWithin,\n          // The dimmed look lifts while a focus ring shows inside the wrapper (focusable slot\n          // content; the disabled input never takes focus): opacity would dim the ring below 3:1.\n          props.disabled && 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100',\n          className,\n        )}\n      >\n        {hasBefore &&\n          renderSlot(contentBefore, 'span', cn(inputClassNames.contentBefore, 'shrink-0 ps-2'))}\n        <input\n          ref={ref}\n          className={cn(\n            inputClassNames.input,\n            'h-full w-full min-w-0 bg-transparent px-2 text-body-1 text-foreground',\n            'placeholder:text-muted-foreground',\n            'focus:outline-hidden',\n            'disabled:cursor-not-allowed',\n          )}\n          {...inputProps}\n        />\n        {hasAfter &&\n          renderSlot(contentAfter, 'span', cn(inputClassNames.contentAfter, 'shrink-0 pe-2'))}\n      </span>\n    );\n  } else {\n    control = (\n      <input\n        ref={ref}\n        className={cn(\n          inputClassNames.root,\n          inputClassNames.input,\n          'h-8 w-full rounded border border-input border-b-stroke-accessible bg-background px-3 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        {...controlProps}\n      />\n    );\n  }\n\n  if (!message) return control;\n  return (\n    <>\n      {control}\n      {message}\n    </>\n  );\n};\n\nInput.displayName = 'Input';\n"],"mappings":";;;;;;;;;;;AAuCA,SAASI,EAAY,GAA4D;CAC/E,OAAOC,MAAgB,MAASA,MAAgB;AAClD;AAeA,SAAgBC,EACd,GACA,GACA,GACA,GACqB;CACrB,IAAMC,IAAQC,EAAgB,GACxBC,IAAcT,EAAM,OAAO,GAC3BU,IACJ,CAACN,EAAYO,CAAmB,MAC/BC,MAAU,MAAS,OAAOA,KAAU,YAAYA,MAAU;CAE7D,IADoB,MAAW,OAAOA,KAAU,YAAaL,GAAO,iBAClD,OAAO;EAAE;EAAS,WAAW,KAAA;EAAW,SAAS;CAAK;CAExE,IAAM,EAAE,IAAIM,GAAO,WAAWC,GAAkB,GAAGC,MAAgBC,KAAqB,CAAC,GACnFC,IAAYJ,KAASJ;CAW3B,OAAO;EAAE;EAAS;EAAW,SAT3BR,kBAAC,QAAD;GACE,MAAK;GACL,GAAIc;GACJ,IAAIE;GACJ,WAAWC,EAAGC,GAAe,wCAAwCL,CAAgB;GAEpF,UAAAF;EACG,CAEqB;CAAQ;AACvC;AAYA,SAAgBQ,EACd,GACA,GACS;CAET,OADIhB,EAAYC,CAAW,IAAU,KAC9BgB,KAAYhB,MAAgB,MAAQA,MAAgB;AAC7D;AAqDA,IAAaiB,KAAS,EACpB,UACA,sBACA,kBACA,iBACA,aACA,kBACA,cACA,QACA,OACA,cAAcC,GACd,mBAAmBC,GACnB,oBAAoBC,GACpB,gBAAgBpB,GAChB,iBAAiBqB,GACjB,qBAAqBC,GACrB,aACA,GAAGC,QACa;CAChB,IAAM,EAAE,YAAS,cAAW,eAAYtB,EACtCM,GACAI,GACAX,GACAwB,EAAgB,YAClB,GACMC,IAAaC,EACjB;EACE;EACA,cAAcR;EACd,mBAAmBC;EACnB,oBAAoBQ,EAAQP,GAAiBR,CAAS;EACtD,gBAAgBZ,MAAgBK,KAAW,KAAA;EAC3C,iBAAiBgB;EACjB;CACF,GACA,EAAE,gBAAgB,GAAK,CACzB,GACMO,IAAcb,EAAcV,GAASoB,EAAW,eAAe,GAE/DI,IACJC,KAAYC,KACP,MAA+C;EAE9C,AADAD,IAAWE,CAAK,GAChBD,IAAgBC,EAAM,cAAc,KAAK;CAC3C,IACA,KAAA,GAEAC,IAAe;EACnB,GAAGV;EACH,GAAGE;EACH,qBAAqBE,EAAQL,GAAkBV,CAAS;EACxD,UAAUiB;CACZ,GAEMK,IAAYC,EAAmBC,CAAa,GAC5CC,IAAWF,EAAmBG,CAAY,GAE5CC;CACJ,IAAIL,KAAaG,GAAU;EAGzB,IAAM,EAAE,UAAO,WAAQ,GAAGG,MAAeP;EACzC,IACE,kBAAC,QAAD;GACU;GACD;GACP,WAAWpB,EACTW,EAAgB,MAChB,wIACAiB,GACAb,KAAA,wDAGAL,EAAM,YAAY,+DAClBmB,CACF;GAZF,UAAA;IAcGR,KACCS,EAAWP,GAAe,QAAQvB,EAAGW,EAAgB,eAAe,eAAe,CAAC;IACtF,kBAAC,SAAD;KACO;KACL,WAAWX,EACTW,EAAgB,OAChB,yEACA,qCACA,wBACA,6BACF;KACA,GAAIgB;IACL,CAAA;IACAH,KACCM,EAAWL,GAAc,QAAQzB,EAAGW,EAAgB,cAAc,eAAe,CAAC;GAChF;;CAEV,OACE,IACE,kBAAC,SAAD;EACO;EACL,WAAWX,EACTW,EAAgB,MAChBA,EAAgB,OAChB,oHACA,qCACAoB,GACA,mDACAhB,KAAA,iDACAc,CACF;EACA,GAAIT;CACL,CAAA;CAKL,OADKY,IAEH,kBAAAhD,GAAA,EAAA,UAAA,CACG0C,GACAM,CACD,EAAA,CAAA,IALiBN;AAOvB;AAEA,EAAM,cAAc"}

package/dist/components/input/Label.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");var i={small:`text-caption-1`,medium:`text-body-1`,large:`text-body-2`},a={regular:void 0,semibold:`font-semibold`,bold:`font-bold`},o=({required:e=!1,disabled:n=!1,size:o=`medium`,weight:s=`regular`,className:c,children:l,ref:u,...d})=>(0,r.jsxs)(`label`,{ref:u,className:t.cn(n?`text-muted-foreground`:`text-foreground`,i[o],a[s],c),...d,children:[l,e&&(0,r.jsx)(`span`,{className:`ms-1 text-error`,"aria-hidden":`true`,children:`*`})]});o.displayName=`Label`,exports.Label=o;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/classNames.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a={small:`text-caption-1`,medium:`text-body-1`,large:`text-body-2`},o={regular:void 0,semibold:`font-semibold`,bold:`font-bold`},s=({required:e=!1,disabled:r=!1,size:s=`medium`,weight:c=`regular`,className:l,children:u,ref:d,...f})=>(0,i.jsxs)(`label`,{ref:d,className:t.cn(n.labelClassNames.root,r?`text-muted-foreground`:`text-foreground`,a[s],o[c],l),...f,children:[u,e&&(0,i.jsx)(`span`,{className:t.cn(n.labelClassNames.required,`ms-1 text-error`),"aria-hidden":`true`,children:`*`})]});s.displayName=`Label`,exports.Label=s;
 //# sourceMappingURL=Label.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.cjs","names":["cn","require_runtime","require_cn","react","react_jsx_runtime","sizeMap","weightMap","Label","rest","disabled","size","weight","className","children","required"],"sources":["../../../src/components/input/Label.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport type { Size, TextWeight } from '../../lib/types';\n\n/** Properties for the Label component. */\nexport interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  /** Whether to show a required indicator asterisk (hidden from assistive technology; mark the\n   * control itself `required`).\n   * @default false\n   */\n  required?: boolean;\n  /** Whether the label is visually dimmed.\n   * @default false\n   */\n  disabled?: boolean;\n  /** Text size of the label: `small` = caption-1, `medium` = body-1, `large` = body-2.\n   * @default 'medium'\n   */\n  size?: Extract<Size, 'small' | 'medium' | 'large'>;\n  /** Font weight of the label (the shared `TextWeight` vocabulary).\n   * @default 'regular'\n   */\n  weight?: TextWeight;\n  /** Ref to the `<label>` element. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\nconst sizeMap: Record<'small' | 'medium' | 'large', string> = {\n  small: 'text-caption-1',\n  medium: 'text-body-1',\n  large: 'text-body-2',\n};\n\nconst weightMap: Record<TextWeight, string | undefined> = {\n  regular: undefined,\n  semibold: 'font-semibold',\n  bold: 'font-bold',\n};\n\n/**\n * A text label for a form control (`htmlFor`), on the Fluent type ramp. The optional required\n * asterisk is decorative (`aria-hidden`). `Field` renders its own label; use `Label` for custom\n * layouts.\n *\n * @example\n * <Label htmlFor=\"email\" required>Email</Label>\n * <Input id=\"email\" required />\n */\nexport const Label = ({\n  required = false,\n  disabled = false,\n  size = 'medium',\n  weight = 'regular',\n  className,\n  children,\n  ref,\n  ...rest\n}: LabelProps) => {\n  return (\n    <label\n      ref={ref}\n      className={cn(\n        disabled ? 'text-muted-foreground' : 'text-foreground',\n        sizeMap[size],\n        weightMap[weight],\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n      {required && (\n        <span className=\"ms-1 text-error\" aria-hidden=\"true\">\n          *\n        </span>\n      )}\n    </label>\n  );\n};\n\nLabel.displayName = 'Label';\n"],"mappings":"8KA2BA,IAAMK,EAAwD,CAC5D,MAAO,iBACP,OAAQ,cACR,MAAO,aACT,EAEMC,EAAoD,CACxD,QAAS,IAAA,GACT,SAAU,gBACV,KAAM,WACR,EAWaC,GAAS,CACpB,WAAW,GACX,WAAW,GACX,OAAO,SACP,SAAS,UACT,YACA,WACA,MACA,GAAGC,MAGD,EAAAJ,EAAA,KAAA,CAAC,QAAD,CACO,MACL,UAAWJ,EAAAA,GACTS,EAAW,wBAA0B,kBACrCJ,EAAQK,GACRJ,EAAUK,GACVC,CACF,EACA,GAAIJ,EARN,SAAA,CAUGK,EACAC,IACC,EAAAV,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,kBAAkB,cAAY,OAAO,SAAA,GAE/C,CAAA,CAEH,IAIX,EAAM,YAAc"}
+{"version":3,"file":"Label.cjs","names":["cn","labelClassNames","require_runtime","require_cn","require_classNames","react","react_jsx_runtime","sizeMap","weightMap","Label","rest","disabled","size","weight","className","children","required"],"sources":["../../../src/components/input/Label.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { labelClassNames } from '../../lib/classNames';\nimport type { Size, TextWeight } from '../../lib/types';\n\n/** Properties for the Label component. */\nexport interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  /** Whether to show a required indicator asterisk (hidden from assistive technology; mark the\n   * control itself `required`).\n   * @default false\n   */\n  required?: boolean;\n  /** Whether the label is visually dimmed.\n   * @default false\n   */\n  disabled?: boolean;\n  /** Text size of the label: `small` = caption-1, `medium` = body-1, `large` = body-2.\n   * @default 'medium'\n   */\n  size?: Extract<Size, 'small' | 'medium' | 'large'>;\n  /** Font weight of the label (the shared `TextWeight` vocabulary).\n   * @default 'regular'\n   */\n  weight?: TextWeight;\n  /** Ref to the `<label>` element. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\nconst sizeMap: Record<'small' | 'medium' | 'large', string> = {\n  small: 'text-caption-1',\n  medium: 'text-body-1',\n  large: 'text-body-2',\n};\n\nconst weightMap: Record<TextWeight, string | undefined> = {\n  regular: undefined,\n  semibold: 'font-semibold',\n  bold: 'font-bold',\n};\n\n/**\n * A text label for a form control (`htmlFor`), on the Fluent type ramp. The optional required\n * asterisk is decorative (`aria-hidden`). `Field` renders its own label; use `Label` for custom\n * layouts.\n *\n * @example\n * <Label htmlFor=\"email\" required>Email</Label>\n * <Input id=\"email\" required />\n */\nexport const Label = ({\n  required = false,\n  disabled = false,\n  size = 'medium',\n  weight = 'regular',\n  className,\n  children,\n  ref,\n  ...rest\n}: LabelProps) => {\n  return (\n    <label\n      ref={ref}\n      className={cn(\n        labelClassNames.root,\n        disabled ? 'text-muted-foreground' : 'text-foreground',\n        sizeMap[size],\n        weightMap[weight],\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n      {required && (\n        <span className={cn(labelClassNames.required, 'ms-1 text-error')} aria-hidden=\"true\">\n          *\n        </span>\n      )}\n    </label>\n  );\n};\n\nLabel.displayName = 'Label';\n"],"mappings":"oNA4BA,IAAMO,EAAwD,CAC5D,MAAO,iBACP,OAAQ,cACR,MAAO,aACT,EAEMC,EAAoD,CACxD,QAAS,IAAA,GACT,SAAU,gBACV,KAAM,WACR,EAWaC,GAAS,CACpB,WAAW,GACX,WAAW,GACX,OAAO,SACP,SAAS,UACT,YACA,WACA,MACA,GAAGC,MAGD,EAAAJ,EAAA,KAAA,CAAC,QAAD,CACO,MACL,UAAWN,EAAAA,GACTC,EAAAA,gBAAgB,KAChBU,EAAW,wBAA0B,kBACrCJ,EAAQK,GACRJ,EAAUK,GACVC,CACF,EACA,GAAIJ,EATN,SAAA,CAWGK,EACAC,IACC,EAAAV,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWN,EAAAA,GAAGC,EAAAA,gBAAgB,SAAU,iBAAiB,EAAG,cAAY,OAAO,SAAA,GAE/E,CAAA,CAEH,IAIX,EAAM,YAAc"}

package/dist/components/input/Label.mjs

@@ -1,28 +1,29 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
+import { labelClassNames as t } from "../../lib/classNames.mjs";
 import "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/input/Label.tsx
-var r = {
+var i = {
 	small: "text-caption-1",
 	medium: "text-body-1",
 	large: "text-body-2"
-}, i = {
+}, a = {
 	regular: void 0,
 	semibold: "font-semibold",
 	bold: "font-bold"
-}, a = ({ required: a = !1, disabled: o = !1, size: s = "medium", weight: c = "regular", className: l, children: u, ref: d, ...f }) => /* @__PURE__ */ n("label", {
-	ref: d,
-	className: e(o ? "text-muted-foreground" : "text-foreground", r[s], i[c], l),
-	...f,
-	children: [u, a && /* @__PURE__ */ t("span", {
-		className: "ms-1 text-error",
+}, o = ({ required: o = !1, disabled: s = !1, size: c = "medium", weight: l = "regular", className: u, children: d, ref: f, ...p }) => /* @__PURE__ */ r("label", {
+	ref: f,
+	className: e(t.root, s ? "text-muted-foreground" : "text-foreground", i[c], a[l], u),
+	...p,
+	children: [d, o && /* @__PURE__ */ n("span", {
+		className: e(t.required, "ms-1 text-error"),
 		"aria-hidden": "true",
 		children: "*"
 	})]
 });
-a.displayName = "Label";
+o.displayName = "Label";
 //#endregion
-export { a as Label };
+export { o as Label };
 
 //# sourceMappingURL=Label.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.mjs","names":["sizeMap","weightMap","Label","rest","cn","disabled","size","weight","className","children","required"],"sources":["../../../src/components/input/Label.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport type { Size, TextWeight } from '../../lib/types';\n\n/** Properties for the Label component. */\nexport interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  /** Whether to show a required indicator asterisk (hidden from assistive technology; mark the\n   * control itself `required`).\n   * @default false\n   */\n  required?: boolean;\n  /** Whether the label is visually dimmed.\n   * @default false\n   */\n  disabled?: boolean;\n  /** Text size of the label: `small` = caption-1, `medium` = body-1, `large` = body-2.\n   * @default 'medium'\n   */\n  size?: Extract<Size, 'small' | 'medium' | 'large'>;\n  /** Font weight of the label (the shared `TextWeight` vocabulary).\n   * @default 'regular'\n   */\n  weight?: TextWeight;\n  /** Ref to the `<label>` element. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\nconst sizeMap: Record<'small' | 'medium' | 'large', string> = {\n  small: 'text-caption-1',\n  medium: 'text-body-1',\n  large: 'text-body-2',\n};\n\nconst weightMap: Record<TextWeight, string | undefined> = {\n  regular: undefined,\n  semibold: 'font-semibold',\n  bold: 'font-bold',\n};\n\n/**\n * A text label for a form control (`htmlFor`), on the Fluent type ramp. The optional required\n * asterisk is decorative (`aria-hidden`). `Field` renders its own label; use `Label` for custom\n * layouts.\n *\n * @example\n * <Label htmlFor=\"email\" required>Email</Label>\n * <Input id=\"email\" required />\n */\nexport const Label = ({\n  required = false,\n  disabled = false,\n  size = 'medium',\n  weight = 'regular',\n  className,\n  children,\n  ref,\n  ...rest\n}: LabelProps) => {\n  return (\n    <label\n      ref={ref}\n      className={cn(\n        disabled ? 'text-muted-foreground' : 'text-foreground',\n        sizeMap[size],\n        weightMap[weight],\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n      {required && (\n        <span className=\"ms-1 text-error\" aria-hidden=\"true\">\n          *\n        </span>\n      )}\n    </label>\n  );\n};\n\nLabel.displayName = 'Label';\n"],"mappings":";;;;;AA2BA,IAAMA,IAAwD;CAC5D,OAAO;CACP,QAAQ;CACR,OAAO;AACT,GAEMC,IAAoD;CACxD,SAAS,KAAA;CACT,UAAU;CACV,MAAM;AACR,GAWaC,KAAS,EACpB,cAAW,IACX,cAAW,IACX,UAAO,UACP,YAAS,WACT,cACA,aACA,QACA,GAAGC,QAGD,kBAAC,SAAD;CACO;CACL,WAAWC,EACTC,IAAW,0BAA0B,mBACrCL,EAAQM,IACRL,EAAUM,IACVC,CACF;CACA,GAAIL;CARN,UAAA,CAUGM,GACAC,KACC,kBAAC,QAAD;EAAM,WAAU;EAAkB,eAAY;EAAO,UAAA;CAE/C,CAAA,CAEH;;AAIX,EAAM,cAAc"}
+{"version":3,"file":"Label.mjs","names":["sizeMap","weightMap","Label","rest","cn","labelClassNames","disabled","size","weight","className","children","required"],"sources":["../../../src/components/input/Label.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { labelClassNames } from '../../lib/classNames';\nimport type { Size, TextWeight } from '../../lib/types';\n\n/** Properties for the Label component. */\nexport interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  /** Whether to show a required indicator asterisk (hidden from assistive technology; mark the\n   * control itself `required`).\n   * @default false\n   */\n  required?: boolean;\n  /** Whether the label is visually dimmed.\n   * @default false\n   */\n  disabled?: boolean;\n  /** Text size of the label: `small` = caption-1, `medium` = body-1, `large` = body-2.\n   * @default 'medium'\n   */\n  size?: Extract<Size, 'small' | 'medium' | 'large'>;\n  /** Font weight of the label (the shared `TextWeight` vocabulary).\n   * @default 'regular'\n   */\n  weight?: TextWeight;\n  /** Ref to the `<label>` element. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\nconst sizeMap: Record<'small' | 'medium' | 'large', string> = {\n  small: 'text-caption-1',\n  medium: 'text-body-1',\n  large: 'text-body-2',\n};\n\nconst weightMap: Record<TextWeight, string | undefined> = {\n  regular: undefined,\n  semibold: 'font-semibold',\n  bold: 'font-bold',\n};\n\n/**\n * A text label for a form control (`htmlFor`), on the Fluent type ramp. The optional required\n * asterisk is decorative (`aria-hidden`). `Field` renders its own label; use `Label` for custom\n * layouts.\n *\n * @example\n * <Label htmlFor=\"email\" required>Email</Label>\n * <Input id=\"email\" required />\n */\nexport const Label = ({\n  required = false,\n  disabled = false,\n  size = 'medium',\n  weight = 'regular',\n  className,\n  children,\n  ref,\n  ...rest\n}: LabelProps) => {\n  return (\n    <label\n      ref={ref}\n      className={cn(\n        labelClassNames.root,\n        disabled ? 'text-muted-foreground' : 'text-foreground',\n        sizeMap[size],\n        weightMap[weight],\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n      {required && (\n        <span className={cn(labelClassNames.required, 'ms-1 text-error')} aria-hidden=\"true\">\n          *\n        </span>\n      )}\n    </label>\n  );\n};\n\nLabel.displayName = 'Label';\n"],"mappings":";;;;;;AA4BA,IAAMA,IAAwD;CAC5D,OAAO;CACP,QAAQ;CACR,OAAO;AACT,GAEMC,IAAoD;CACxD,SAAS,KAAA;CACT,UAAU;CACV,MAAM;AACR,GAWaC,KAAS,EACpB,cAAW,IACX,cAAW,IACX,UAAO,UACP,YAAS,WACT,cACA,aACA,QACA,GAAGC,QAGD,kBAAC,SAAD;CACO;CACL,WAAWC,EACTC,EAAgB,MAChBC,IAAW,0BAA0B,mBACrCN,EAAQO,IACRN,EAAUO,IACVC,CACF;CACA,GAAIN;CATN,UAAA,CAWGO,GACAC,KACC,kBAAC,QAAD;EAAM,WAAWP,EAAGC,EAAgB,UAAU,iBAAiB;EAAG,eAAY;EAAO,UAAA;CAE/E,CAAA,CAEH;;AAIX,EAAM,cAAc"}

package/dist/components/input/Option.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../hooks/useId.cjs"),i=require("../../hooks/useMergedRefs.cjs"),a=require("../../hooks/useDismiss.cjs"),o=require("../portal/Portal.cjs"),s=require("../../lib/styles.cjs"),c=require("../../lib/icons.cjs"),l=require("../../hooks/useListbox.cjs"),u=require("../../hooks/usePopupPosition.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=d.createContext(!0);p.displayName=`OptionCheckContext`;var m=t.cn(`flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground`,`bg-(--option-bg) [--option-bg:transparent]`,`not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]`,`data-[selected]:[--option-bg:var(--wave-subtle-selected)]`,`data-[active]:[--option-bg:var(--wave-subtle-hover)]`,`data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring`,`aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground`),h=class{counts=new Map;listeners=new Set;subscribe=e=>(this.listeners.add(e),()=>{this.listeners.delete(e)});add(e){return this.counts.set(e,(this.counts.get(e)??0)+1),this.notify(),()=>{let t=(this.counts.get(e)??1)-1;t>0?this.counts.set(e,t):this.counts.delete(e),this.notify()}}allHidden(e){if(e===void 0||this.counts.size===0)return!1;for(let t of this.counts.keys())if(!e.isHidden(t))return!1;return!0}notify(){for(let e of[...this.listeners])e()}},g=d.createContext([]);g.displayName=`OptionGroupContext`;var _=d.createContext(!1);_.displayName=`OptionGroupHiddenContext`;function v(e){let t=d.useContext(g);d.useLayoutEffect(()=>{if(t.length===0)return;let n=t.map(t=>t.add(e));return()=>{for(let e of n)e()}},[t,e])}function y(e){let{value:r,label:i,textValue:a,disabled:o=!1,hidden:u=!1,className:h,children:g,onClick:y,onPointerMove:b,ref:x,...S}=e,C=d.useContext(p),w=d.useContext(_),{selected:T,optionProps:E}=l.useListboxOption({value:r,label:i,textValue:a,disabled:o,hidden:u||w},x);v(r);let{ref:D,onClick:O,onPointerMove:k,...A}=E;return(0,f.jsxs)(`li`,{"data-value":r,...S,...A,ref:D,onClick:n.composeEventHandlers(y,O),onPointerMove:n.composeEventHandlers(b,k),className:t.cn(m,T&&s.forcedColors.selectedContainer,h),children:[C&&(0,f.jsx)(c.CheckIcon,{className:t.cn(`shrink-0`,!T&&`invisible`)}),(0,f.jsx)(`span`,{className:`min-w-0 flex-1`,children:g??r})]})}y.displayName=`Option`;var b=d.memo(y);b.displayName=`Option`;var x=l.markListboxElement(b,`option`);function S({label:e,className:t,children:n,hidden:i,ref:a,...o}){let s=r.useId(`option-group`),c=d.useContext(l.ListboxContext)?.store,u=d.useContext(g),p=d.useContext(_)||!!i,[m]=d.useState(()=>new h),v=d.useMemo(()=>[...u,m],[u,m]),y=d.useCallback(e=>{let t=m.subscribe(e),n=c?.subscribe(e);return()=>{t(),n?.()}},[m,c]),b=d.useSyncExternalStore(y,()=>m.allHidden(c),()=>!1);return(0,f.jsxs)(`li`,{...o,ref:a,role:`presentation`,hidden:i||b||void 0,className:t,children:[(0,f.jsx)(`div`,{id:s,role:`presentation`,className:`px-3 py-1 text-caption-1 font-semibold text-muted-foreground`,children:e}),(0,f.jsx)(`ul`,{role:`group`,"aria-labelledby":s,children:(0,f.jsx)(_.Provider,{value:p,children:(0,f.jsx)(g.Provider,{value:v,children:n})})})]})}S.displayName=`OptionGroup`;var C=l.markListboxElement(S,`group`);function w(e){let{open:t,surfaceOpen:n,onDismiss:r,rootRef:o,anchorRef:s}=e,c=d.useRef(null),{setReference:l,setFloating:f,floatingProps:p}=u.usePopupPosition({open:n,side:`bottom`,align:`start`,matchReferenceWidth:!0,fitViewport:!0}),{layerId:m}=a.useDismiss({open:t,onDismiss:e=>r(e),refs:[o,c],anchorRef:s,kind:`listbox`,escape:n,focusOutside:!0});return{layerId:m,setReference:l,surfaceRef:i.useMergedRefs(c,f),floatingProps:p}}function T(e){e.preventDefault()}function E(e){let{listbox:t,layerId:n,surfaceRef:r,floatingProps:i,open:a,expanded:s,emptyContent:c,"aria-label":u,"aria-labelledby":d,showCheck:m=!0,children:h}=e,g=(0,f.jsx)(p.Provider,{value:m,children:(0,f.jsx)(l.ListboxContext.Provider,{value:t.context,children:(0,f.jsx)(`ul`,{...t.getListboxProps(),"aria-label":u,"aria-labelledby":d,hidden:!s||void 0,className:`min-h-0 max-h-60 overflow-auto`,children:h})})});return!s&&(!a||s||c==null)?g:(0,f.jsxs)(f.Fragment,{children:[!s&&g,(0,f.jsx)(o.Portal,{layerId:n,children:(0,f.jsx)(`div`,{ref:r,...i,"data-wave-listbox-surface":``,onMouseDown:T,className:`flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4`,children:s?g:c})})]})}E.displayName=`ListboxSurface`,exports.ListboxSurface=E,exports.Option=x,exports.OptionGroup=C,exports.useListboxPopup=w;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../hooks/useId.cjs"),a=require("../../hooks/useMergedRefs.cjs"),o=require("../../hooks/useDismiss.cjs"),s=require("../portal/Portal.cjs"),c=require("../../lib/styles.cjs"),l=require("../../lib/icons.cjs"),u=require("../../hooks/useListbox.cjs"),d=require("../../hooks/usePopupPosition.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=f.createContext(!0);m.displayName=`OptionCheckContext`;var h=t.cn(`flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground`,`bg-(--option-bg) [--option-bg:transparent]`,`not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]`,`data-[selected]:[--option-bg:var(--wave-subtle-selected)]`,`data-[active]:[--option-bg:var(--wave-subtle-hover)]`,`data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring`,`aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground`),g=class{counts=new Map;listeners=new Set;subscribe=e=>(this.listeners.add(e),()=>{this.listeners.delete(e)});add(e){return this.counts.set(e,(this.counts.get(e)??0)+1),this.notify(),()=>{let t=(this.counts.get(e)??1)-1;t>0?this.counts.set(e,t):this.counts.delete(e),this.notify()}}allHidden(e){if(e===void 0||this.counts.size===0)return!1;for(let t of this.counts.keys())if(!e.isHidden(t))return!1;return!0}notify(){for(let e of[...this.listeners])e()}},_=f.createContext([]);_.displayName=`OptionGroupContext`;var v=f.createContext(!1);v.displayName=`OptionGroupHiddenContext`;function y(e){let t=f.useContext(_);f.useLayoutEffect(()=>{if(t.length===0)return;let n=t.map(t=>t.add(e));return()=>{for(let e of n)e()}},[t,e])}function b(e){let{value:i,label:a,textValue:o,disabled:s=!1,hidden:d=!1,className:g,children:_,onClick:b,onPointerMove:x,ref:S,...C}=e,w=f.useContext(m),T=f.useContext(v),{selected:E,optionProps:D}=u.useListboxOption({value:i,label:a,textValue:o,disabled:s,hidden:d||T},S);y(i);let{ref:O,onClick:k,onPointerMove:A,...j}=D;return(0,p.jsxs)(`li`,{"data-value":i,...C,...j,ref:O,onClick:n.composeEventHandlers(b,k),onPointerMove:n.composeEventHandlers(x,A),className:t.cn(r.optionClassNames.root,h,E&&c.forcedColors.selectedContainer,g),children:[w&&(0,p.jsx)(l.CheckIcon,{className:t.cn(r.optionClassNames.checkIcon,`shrink-0`,!E&&`invisible`)}),(0,p.jsx)(`span`,{className:t.cn(r.optionClassNames.content,`min-w-0 flex-1`),children:_??i})]})}b.displayName=`Option`;var x=f.memo(b);x.displayName=`Option`;var S=u.markListboxElement(x,`option`);function C({label:e,className:n,children:a,hidden:o,ref:s,...c}){let l=i.useId(`option-group`),d=f.useContext(u.ListboxContext)?.store,m=f.useContext(_),h=f.useContext(v)||!!o,[y]=f.useState(()=>new g),b=f.useMemo(()=>[...m,y],[m,y]),x=f.useCallback(e=>{let t=y.subscribe(e),n=d?.subscribe(e);return()=>{t(),n?.()}},[y,d]),S=f.useSyncExternalStore(x,()=>y.allHidden(d),()=>!1);return(0,p.jsxs)(`li`,{...c,ref:s,role:`presentation`,hidden:o||S||void 0,className:t.cn(r.optionGroupClassNames.root,n),children:[(0,p.jsx)(`div`,{id:l,role:`presentation`,className:t.cn(r.optionGroupClassNames.label,`px-3 py-1 text-caption-1 font-semibold text-muted-foreground`),children:e}),(0,p.jsx)(`ul`,{role:`group`,"aria-labelledby":l,className:r.optionGroupClassNames.list,children:(0,p.jsx)(v.Provider,{value:h,children:(0,p.jsx)(_.Provider,{value:b,children:a})})})]})}C.displayName=`OptionGroup`;var w=u.markListboxElement(C,`group`);function T(e){let{open:t,surfaceOpen:n,onDismiss:r,rootRef:i,anchorRef:s}=e,c=f.useRef(null),{setReference:l,setFloating:u,floatingProps:p}=d.usePopupPosition({open:n,side:`bottom`,align:`start`,matchReferenceWidth:!0,fitViewport:!0}),{layerId:m}=o.useDismiss({open:t,onDismiss:e=>r(e),refs:[i,c],anchorRef:s,kind:`listbox`,escape:n,focusOutside:!0});return{layerId:m,setReference:l,surfaceRef:a.useMergedRefs(c,u),floatingProps:p}}function E(e){e.preventDefault()}function D(e){let{listbox:n,layerId:r,surfaceRef:i,floatingProps:a,open:o,expanded:c,emptyContent:l,"aria-label":d,"aria-labelledby":f,showCheck:h=!0,listboxClassName:g,surfaceClassName:_,children:v}=e,y=(0,p.jsx)(m.Provider,{value:h,children:(0,p.jsx)(u.ListboxContext.Provider,{value:n.context,children:(0,p.jsx)(`ul`,{...n.getListboxProps(),"aria-label":d,"aria-labelledby":f,hidden:!c||void 0,className:t.cn(g,`min-h-0 max-h-60 overflow-auto`),children:v})})});return!c&&(!o||c||l==null)?y:(0,p.jsxs)(p.Fragment,{children:[!c&&y,(0,p.jsx)(s.Portal,{layerId:r,children:(0,p.jsx)(`div`,{ref:i,...a,"data-wave-listbox-surface":``,onMouseDown:E,className:t.cn(_,`flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4`),children:c?y:l})})]})}D.displayName=`ListboxSurface`,exports.ListboxSurface=D,exports.Option=S,exports.OptionGroup=w,exports.useListboxPopup=T;
 //# sourceMappingURL=Option.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Option.cjs","names":["React","cn","useListboxOption","composeEventHandlers","forcedColors","CheckIcon","useId","ListboxContext","usePopupPosition","useDismiss","useMergedRefs","_Fragment","Portal","require_runtime","require_cn","require_composeEventHandlers","require_useId","require_useMergedRefs","require_useDismiss","require_Portal","require_styles","require_icons","require_useListbox","require_usePopupPosition","react","react_jsx_runtime","OptionCheckContext","OPTION_CLASSES","OptionGroupMembers","listener","value","count","store","OptionGroupContext","OptionGroupHiddenContext","useOptionGroupMembership","groups","removes","group","remove","OptionImpl","rest","props","showCheck","groupHidden","hidden","ref","optionRef","selectOption","highlightOption","optionAttributes","optionProps","onClick","onPointerMove","selected","className","children","MemoOption","Option","OptionGroupImpl","labelId","parentGroups","hiddenByConsumer","members","subscribe","unsubscribeMembers","unsubscribeStore","empty","label","OptionGroup","useListboxPopup","options","surfaceElementRef","surfaceOpen","onDismiss","reason","rootRef","setFloating","preventMouseDown","event","ListboxSurface","ariaLabel","ariaLabelledBy","list","listbox","expanded","emptyContent","surfaceRef","floatingProps"],"sources":["../../../src/components/input/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { CheckIcon } from '../../lib/icons';\nimport { forcedColors } from '../../lib/styles';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport type { DismissReason } from '../../hooks/useDismiss';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport {\n  ListboxContext,\n  markListboxElement,\n  useListboxOption,\n  type ListboxStore,\n  type UseListboxResult,\n} from '../../hooks/useListbox';\nimport { Portal } from '../portal/Portal';\n\n/* ------------------------------------------------------------------ */\n/*  Option                                                             */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the Option component used within Combobox and Dropdown. */\nexport interface OptionProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'value'> {\n  /** Value associated with this option. Unique within its listbox. */\n  value: string;\n  /**\n   * Text shown in the combobox (Combobox input, Dropdown trigger) when this option is selected.\n   * Defaults to `textValue`, then the option's text content, then `value`. Pass it when the\n   * children are not plain text (icons, custom components).\n   */\n  label?: string;\n  /** Text matched by typeahead and filtering instead of the label. */\n  textValue?: string;\n  /**\n   * Whether the option is disabled: it stays visible but is skipped by keyboard navigation and\n   * cannot be selected.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Hides the option, like a native `<option hidden>`: it is not shown, keyboard navigation and\n   * typeahead skip it, and it never becomes the active option. Its label stays known, so a\n   * selected hidden option (a placeholder) still shows in the combobox. The options of a hidden\n   * `OptionGroup` are hidden the same way.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the option `<li>` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\n/** Whether options draw the selected check mark (P05-internal; TagPicker lists no selected options). */\nconst OptionCheckContext = React.createContext(true);\nOptionCheckContext.displayName = 'OptionCheckContext';\n\n/*\n * State is exposed as data attributes (C-CLASS): `data-active` (keyboard/pointer highlight),\n * `data-selected`, `data-disabled`. State classes come before the consumer's `className` in `cn()`.\n *\n * Backgrounds (input-pickers#20): one unconditional `bg-(--option-bg)` paints the option, and the\n * hover/selected/active variants only set `--option-bg`. A variant that set `background-color`\n * itself (class + attribute or pseudo-class) would out-specify a consumer's plain `bg-*` class in\n * the cascade even though `cn()` keeps it; instead tailwind-merge replaces `bg-(--option-bg)` with\n * the consumer's class, which is then the only background declaration on the option. A consumer\n * `data-[active]:bg-…` / `data-[selected]:bg-…` restyles a single state (it out-specifies the\n * unconditional reader). The active outline is the focus indicator and stays a state variant.\n *\n * A filtered-out option carries the `hidden` attribute; base.css's scoped `[hidden]` rule hides\n * it over `flex` and over a consumer's display class.\n */\nconst OPTION_CLASSES = cn(\n  'flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground',\n  'bg-(--option-bg) [--option-bg:transparent]',\n  'not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[selected]:[--option-bg:var(--wave-subtle-selected)]',\n  'data-[active]:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring',\n  'aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground',\n);\n\n/**\n * The values of the options rendered inside an `OptionGroup`, whatever wraps them (custom\n * components, Fragments, nested groups): each option adds its value from a layout effect.\n */\nclass OptionGroupMembers {\n  private readonly counts = new Map<string, number>();\n  private readonly listeners = new Set<() => void>();\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  add(value: string): () => void {\n    this.counts.set(value, (this.counts.get(value) ?? 0) + 1);\n    this.notify();\n    return () => {\n      const count = (this.counts.get(value) ?? 1) - 1;\n      if (count > 0) this.counts.set(value, count);\n      else this.counts.delete(value);\n      this.notify();\n    };\n  }\n\n  /** At least one option, and every one of them is hidden (filtered out, or by the consumer). */\n  allHidden(store: ListboxStore | undefined): boolean {\n    if (store === undefined || this.counts.size === 0) return false;\n    for (const value of this.counts.keys()) if (!store.isHidden(value)) return false;\n    return true;\n  }\n\n  private notify(): void {\n    for (const listener of [...this.listeners]) listener();\n  }\n}\n\n/** The groups around an option, outermost first (P05-internal). */\nconst OptionGroupContext = React.createContext<readonly OptionGroupMembers[]>([]);\nOptionGroupContext.displayName = 'OptionGroupContext';\n\n/** A group around the option has the consumer's `hidden` attribute (P05-internal). */\nconst OptionGroupHiddenContext = React.createContext(false);\nOptionGroupHiddenContext.displayName = 'OptionGroupHiddenContext';\n\n/** Adds an option's value to every group around it while the option is mounted. */\nfunction useOptionGroupMembership(value: string): void {\n  const groups = React.useContext(OptionGroupContext);\n  React.useLayoutEffect(() => {\n    if (groups.length === 0) return;\n    const removes = groups.map((group) => group.add(value));\n    return () => {\n      for (const remove of removes) remove();\n    };\n  }, [groups, value]);\n}\n\nfunction OptionImpl(props: OptionProps) {\n  const {\n    value,\n    label,\n    textValue,\n    disabled = false,\n    hidden = false,\n    className,\n    children,\n    onClick,\n    onPointerMove,\n    ref,\n    ...rest\n  } = props;\n  const showCheck = React.useContext(OptionCheckContext);\n  const groupHidden = React.useContext(OptionGroupHiddenContext);\n  // A consumer-hidden option is not navigable; optionProps renders `hidden`.\n  const { selected, optionProps } = useListboxOption<HTMLLIElement>(\n    { value, label, textValue, disabled, hidden: hidden || groupHidden },\n    ref,\n  );\n  useOptionGroupMembership(value);\n  const {\n    ref: optionRef,\n    onClick: selectOption,\n    onPointerMove: highlightOption,\n    ...optionAttributes\n  } = optionProps;\n\n  return (\n    <li\n      data-value={value}\n      {...rest}\n      {...optionAttributes}\n      ref={optionRef}\n      onClick={composeEventHandlers(onClick, selectOption)}\n      onPointerMove={composeEventHandlers(onPointerMove, highlightOption)}\n      className={cn(OPTION_CLASSES, selected && forcedColors.selectedContainer, className)}\n    >\n      {showCheck && <CheckIcon className={cn('shrink-0', !selected && 'invisible')} />}\n      <span className=\"min-w-0 flex-1\">{children ?? value}</span>\n    </li>\n  );\n}\nOptionImpl.displayName = 'Option';\n\nconst MemoOption = /* @__PURE__ */ React.memo(OptionImpl);\nMemoOption.displayName = 'Option';\n\n/**\n * An option of a `Combobox`, `Dropdown` (and `TagPicker`'s generated list). Renders\n * `<li role=\"option\">` with a stable id (`aria-activedescendant` target), `aria-selected`, a check\n * mark while selected and `data-active`/`data-selected`/`data-disabled` attributes for styling.\n *\n * Options register with the surrounding listbox (in DOM order, groups included), so they can be\n * wrapped, grouped or rendered conditionally. The option is memoized: moving the highlight\n * re-renders only the previously and the newly active option.\n *\n * Styling: `className` comes last. A plain background class (`className=\"bg-primary\"`) replaces\n * the built-in hover, selected and active backgrounds in every state. To restyle one state only,\n * use its data variant (`data-[active]:bg-…`, `data-[selected]:bg-…`). The active option keeps\n * its focus outline.\n *\n * Use it inside a `Combobox` or `Dropdown` only; it throws in development elsewhere.\n */\nexport const Option: React.NamedExoticComponent<OptionProps> = /* @__PURE__ */ markListboxElement(\n  MemoOption,\n  'option',\n);\n\n/* ------------------------------------------------------------------ */\n/*  OptionGroup                                                        */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the OptionGroup component used to group options. */\nexport interface OptionGroupProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  /** Heading label for the option group (names the group). */\n  label: string;\n  /**\n   * Hides the group and every option in it (see `Option`'s `hidden`): keyboard navigation and\n   * typeahead skip its options.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the group's `<li role=\"presentation\">` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\nfunction OptionGroupImpl({ label, className, children, hidden, ref, ...rest }: OptionGroupProps) {\n  const labelId = useId('option-group');\n  const store = React.useContext(ListboxContext)?.store;\n  const parentGroups = React.useContext(OptionGroupContext);\n  const hiddenByConsumer = React.useContext(OptionGroupHiddenContext) || !!hidden;\n  const [members] = React.useState(() => new OptionGroupMembers());\n  const groups = React.useMemo(() => [...parentGroups, members], [parentGroups, members]);\n  const subscribe = React.useCallback(\n    (listener: () => void) => {\n      const unsubscribeMembers = members.subscribe(listener);\n      const unsubscribeStore = store?.subscribe(listener);\n      return () => {\n        unsubscribeMembers();\n        unsubscribeStore?.();\n      };\n    },\n    [members, store],\n  );\n  // Hidden while every option inside it is filtered out or hidden, also options wrapped in a\n  // component (the options register with the group; re-read when they do and when the listbox\n  // state changes).\n  // The server render and the first client render show the group: no option has registered yet.\n  const empty = React.useSyncExternalStore(\n    subscribe,\n    () => members.allHidden(store),\n    () => false,\n  );\n\n  return (\n    <li\n      {...rest}\n      ref={ref}\n      role=\"presentation\"\n      hidden={hidden || empty || undefined}\n      className={className}\n    >\n      <div\n        id={labelId}\n        role=\"presentation\"\n        className=\"px-3 py-1 text-caption-1 font-semibold text-muted-foreground\"\n      >\n        {label}\n      </div>\n      <ul role=\"group\" aria-labelledby={labelId}>\n        <OptionGroupHiddenContext.Provider value={hiddenByConsumer}>\n          <OptionGroupContext.Provider value={groups}>{children}</OptionGroupContext.Provider>\n        </OptionGroupHiddenContext.Provider>\n      </ul>\n    </li>\n  );\n}\nOptionGroupImpl.displayName = 'OptionGroup';\n\n/**\n * Groups options under a heading: `<li role=\"presentation\">` with the heading and a\n * `<ul role=\"group\" aria-labelledby>` of the options. Hidden while a filter (or their own `hidden`)\n * hides all its options, also options wrapped in a component or in nested groups.\n */\nexport const OptionGroup: React.FC<OptionGroupProps> = /* @__PURE__ */ markListboxElement(\n  OptionGroupImpl,\n  'group',\n);\n\n/* ------------------------------------------------------------------ */\n/*  Listbox popup (P05-internal, shared by Combobox, Dropdown, TagPicker) */\n/* ------------------------------------------------------------------ */\n\n/** Options of {@link useListboxPopup}. */\nexport interface UseListboxPopupOptions {\n  /** The listbox is open (dismiss layer registered: outside press, focus outside). */\n  open: boolean;\n  /**\n   * The portaled surface is shown: positioning runs and the layer takes Escape. While the listbox\n   * is open with nothing shown (no options), Escape is left to an enclosing layer (overlays#1).\n   */\n  surfaceOpen: boolean;\n  /** Close the listbox. */\n  onDismiss: (reason: DismissReason) => void;\n  /** The component root: presses and focus inside it are not \"outside\". */\n  rootRef: React.RefObject<HTMLElement | null>;\n  /** The combobox element (the layer's anchor). */\n  anchorRef: React.RefObject<HTMLElement | null>;\n}\n\n/** Result of {@link useListboxPopup}. Destructure it (react-hooks/refs). */\nexport interface ListboxPopup {\n  /** The dismiss layer id (pass to {@link ListboxSurface}). */\n  layerId: string;\n  /** Ref callback for the element the surface is positioned against. */\n  setReference: (el: HTMLElement | null) => void;\n  /** Ref callback for the surface. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** `data-side`, `data-align` and the position style for the surface. */\n  floatingProps: { 'data-side': string; 'data-align': string; style: React.CSSProperties };\n}\n\n/**\n * Dismissal and positioning of a listbox surface (C-POPUPS, spec §5.4): `useDismiss` (Escape,\n * outside press, focus outside; `kind: 'listbox'`) and `usePopupPosition` (bottom-start, flip,\n * shift, the anchor's width, limited to the available space).\n */\nexport function useListboxPopup(options: UseListboxPopupOptions): ListboxPopup {\n  const { open, surfaceOpen, onDismiss, rootRef, anchorRef } = options;\n  const surfaceElementRef = React.useRef<HTMLElement | null>(null);\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: surfaceOpen,\n    side: 'bottom',\n    align: 'start',\n    matchReferenceWidth: true,\n    fitViewport: true,\n  });\n  const { layerId } = useDismiss({\n    open,\n    onDismiss: (reason) => onDismiss(reason),\n    refs: [rootRef, surfaceElementRef],\n    anchorRef,\n    kind: 'listbox',\n    escape: surfaceOpen,\n    focusOutside: true,\n  });\n  const surfaceRef = useMergedRefs<HTMLElement>(surfaceElementRef, setFloating);\n  return { layerId, setReference, surfaceRef, floatingProps };\n}\n\n/** Props of {@link ListboxSurface}. */\nexport interface ListboxSurfaceProps {\n  /** The listbox (from `useListbox`). */\n  listbox: UseListboxResult;\n  /** From {@link useListboxPopup}. */\n  layerId: string;\n  surfaceRef: React.RefCallback<HTMLElement>;\n  floatingProps: ListboxPopup['floatingProps'];\n  /** The listbox is open: `emptyContent` is shown only while it is (input-pickers#21). */\n  open: boolean;\n  /** The listbox is displayed: the list renders in the portaled surface. */\n  expanded: boolean;\n  /** While open but not expanded, show the surface with this content (e.g. \"No matches\"). */\n  emptyContent?: React.ReactNode;\n  /** Accessible name of the listbox. */\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  /** Options draw a check mark while selected. @default true */\n  showCheck?: boolean;\n  children?: React.ReactNode;\n}\n\nfunction preventMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n}\n\n/**\n * Renders the option list in a single container at a time (spec §2.5, §5.5): inline and `hidden`\n * inside the component root while closed (registration and ids exist from the first client\n * commit), and in a `Portal` surface while expanded — never both.\n */\nexport function ListboxSurface(props: ListboxSurfaceProps) {\n  const {\n    listbox,\n    layerId,\n    surfaceRef,\n    floatingProps,\n    open,\n    expanded,\n    emptyContent,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    showCheck = true,\n    children,\n  } = props;\n\n  const list = (\n    <OptionCheckContext.Provider value={showCheck}>\n      <ListboxContext.Provider value={listbox.context}>\n        <ul\n          {...listbox.getListboxProps()}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          hidden={!expanded || undefined}\n          className=\"min-h-0 max-h-60 overflow-auto\"\n        >\n          {children}\n        </ul>\n      </ListboxContext.Provider>\n    </OptionCheckContext.Provider>\n  );\n\n  // A closed listbox never leaves a surface behind: the text typed before closing survives it.\n  const showEmpty = open && !expanded && emptyContent !== undefined && emptyContent !== null;\n  if (!expanded && !showEmpty) return list;\n\n  return (\n    <>\n      {!expanded && list}\n      <Portal layerId={layerId}>\n        <div\n          ref={surfaceRef}\n          {...floatingProps}\n          data-wave-listbox-surface=\"\"\n          onMouseDown={preventMouseDown}\n          className=\"flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4\"\n        >\n          {expanded ? list : emptyContent}\n        </div>\n      </Portal>\n    </>\n  );\n}\nListboxSurface.displayName = 'ListboxSurface';\n"],"mappings":"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"}
+{"version":3,"file":"Option.cjs","names":["React","cn","useListboxOption","composeEventHandlers","optionClassNames","forcedColors","CheckIcon","useId","ListboxContext","optionGroupClassNames","usePopupPosition","useDismiss","useMergedRefs","_Fragment","Portal","require_runtime","require_cn","require_composeEventHandlers","require_classNames","require_useId","require_useMergedRefs","require_useDismiss","require_Portal","require_styles","require_icons","require_useListbox","require_usePopupPosition","react","react_jsx_runtime","OptionCheckContext","OPTION_CLASSES","OptionGroupMembers","listener","value","count","store","OptionGroupContext","OptionGroupHiddenContext","useOptionGroupMembership","groups","removes","group","remove","OptionImpl","rest","props","showCheck","groupHidden","hidden","ref","optionRef","selectOption","highlightOption","optionAttributes","optionProps","onClick","onPointerMove","selected","className","children","MemoOption","Option","OptionGroupImpl","labelId","parentGroups","hiddenByConsumer","members","subscribe","unsubscribeMembers","unsubscribeStore","empty","label","OptionGroup","useListboxPopup","options","surfaceElementRef","surfaceOpen","onDismiss","reason","rootRef","setFloating","preventMouseDown","event","ListboxSurface","ariaLabel","ariaLabelledBy","list","listbox","expanded","listboxClassName","emptyContent","surfaceRef","floatingProps","surfaceClassName"],"sources":["../../../src/components/input/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport { optionClassNames, optionGroupClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { CheckIcon } from '../../lib/icons';\nimport { forcedColors } from '../../lib/styles';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport type { DismissReason } from '../../hooks/useDismiss';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport {\n  ListboxContext,\n  markListboxElement,\n  useListboxOption,\n  type ListboxStore,\n  type UseListboxResult,\n} from '../../hooks/useListbox';\nimport { Portal } from '../portal/Portal';\n\n/* ------------------------------------------------------------------ */\n/*  Option                                                             */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the Option component used within Combobox and Dropdown. */\nexport interface OptionProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'value'> {\n  /** Value associated with this option. Unique within its listbox. */\n  value: string;\n  /**\n   * Text shown in the combobox (Combobox input, Dropdown trigger) when this option is selected.\n   * Defaults to `textValue`, then the option's text content, then `value`. Pass it when the\n   * children are not plain text (icons, custom components).\n   */\n  label?: string;\n  /** Text matched by typeahead and filtering instead of the label. */\n  textValue?: string;\n  /**\n   * Whether the option is disabled: it stays visible but is skipped by keyboard navigation and\n   * cannot be selected.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Hides the option, like a native `<option hidden>`: it is not shown, keyboard navigation and\n   * typeahead skip it, and it never becomes the active option. Its label stays known, so a\n   * selected hidden option (a placeholder) still shows in the combobox. The options of a hidden\n   * `OptionGroup` are hidden the same way.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the option `<li>` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\n/** Whether options draw the selected check mark (P05-internal; TagPicker lists no selected options). */\nconst OptionCheckContext = React.createContext(true);\nOptionCheckContext.displayName = 'OptionCheckContext';\n\n/*\n * State is exposed as data attributes (C-CLASS): `data-active` (keyboard/pointer highlight),\n * `data-selected`, `data-disabled`. State classes come before the consumer's `className` in `cn()`.\n *\n * Backgrounds (input-pickers#20): one unconditional `bg-(--option-bg)` paints the option, and the\n * hover/selected/active variants only set `--option-bg`. A variant that set `background-color`\n * itself (class + attribute or pseudo-class) would out-specify a consumer's plain `bg-*` class in\n * the cascade even though `cn()` keeps it; instead tailwind-merge replaces `bg-(--option-bg)` with\n * the consumer's class, which is then the only background declaration on the option. A consumer\n * `data-[active]:bg-…` / `data-[selected]:bg-…` restyles a single state (it out-specifies the\n * unconditional reader). The active outline is the focus indicator and stays a state variant.\n *\n * A filtered-out option carries the `hidden` attribute; base.css's scoped `[hidden]` rule hides\n * it over `flex` and over a consumer's display class.\n */\nconst OPTION_CLASSES = cn(\n  'flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground',\n  'bg-(--option-bg) [--option-bg:transparent]',\n  'not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[selected]:[--option-bg:var(--wave-subtle-selected)]',\n  'data-[active]:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring',\n  'aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground',\n);\n\n/**\n * The values of the options rendered inside an `OptionGroup`, whatever wraps them (custom\n * components, Fragments, nested groups): each option adds its value from a layout effect.\n */\nclass OptionGroupMembers {\n  private readonly counts = new Map<string, number>();\n  private readonly listeners = new Set<() => void>();\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  add(value: string): () => void {\n    this.counts.set(value, (this.counts.get(value) ?? 0) + 1);\n    this.notify();\n    return () => {\n      const count = (this.counts.get(value) ?? 1) - 1;\n      if (count > 0) this.counts.set(value, count);\n      else this.counts.delete(value);\n      this.notify();\n    };\n  }\n\n  /** At least one option, and every one of them is hidden (filtered out, or by the consumer). */\n  allHidden(store: ListboxStore | undefined): boolean {\n    if (store === undefined || this.counts.size === 0) return false;\n    for (const value of this.counts.keys()) if (!store.isHidden(value)) return false;\n    return true;\n  }\n\n  private notify(): void {\n    for (const listener of [...this.listeners]) listener();\n  }\n}\n\n/** The groups around an option, outermost first (P05-internal). */\nconst OptionGroupContext = React.createContext<readonly OptionGroupMembers[]>([]);\nOptionGroupContext.displayName = 'OptionGroupContext';\n\n/** A group around the option has the consumer's `hidden` attribute (P05-internal). */\nconst OptionGroupHiddenContext = React.createContext(false);\nOptionGroupHiddenContext.displayName = 'OptionGroupHiddenContext';\n\n/** Adds an option's value to every group around it while the option is mounted. */\nfunction useOptionGroupMembership(value: string): void {\n  const groups = React.useContext(OptionGroupContext);\n  React.useLayoutEffect(() => {\n    if (groups.length === 0) return;\n    const removes = groups.map((group) => group.add(value));\n    return () => {\n      for (const remove of removes) remove();\n    };\n  }, [groups, value]);\n}\n\nfunction OptionImpl(props: OptionProps) {\n  const {\n    value,\n    label,\n    textValue,\n    disabled = false,\n    hidden = false,\n    className,\n    children,\n    onClick,\n    onPointerMove,\n    ref,\n    ...rest\n  } = props;\n  const showCheck = React.useContext(OptionCheckContext);\n  const groupHidden = React.useContext(OptionGroupHiddenContext);\n  // A consumer-hidden option is not navigable; optionProps renders `hidden`.\n  const { selected, optionProps } = useListboxOption<HTMLLIElement>(\n    { value, label, textValue, disabled, hidden: hidden || groupHidden },\n    ref,\n  );\n  useOptionGroupMembership(value);\n  const {\n    ref: optionRef,\n    onClick: selectOption,\n    onPointerMove: highlightOption,\n    ...optionAttributes\n  } = optionProps;\n\n  return (\n    <li\n      data-value={value}\n      {...rest}\n      {...optionAttributes}\n      ref={optionRef}\n      onClick={composeEventHandlers(onClick, selectOption)}\n      onPointerMove={composeEventHandlers(onPointerMove, highlightOption)}\n      className={cn(\n        optionClassNames.root,\n        OPTION_CLASSES,\n        selected && forcedColors.selectedContainer,\n        className,\n      )}\n    >\n      {showCheck && (\n        <CheckIcon\n          className={cn(optionClassNames.checkIcon, 'shrink-0', !selected && 'invisible')}\n        />\n      )}\n      <span className={cn(optionClassNames.content, 'min-w-0 flex-1')}>{children ?? value}</span>\n    </li>\n  );\n}\nOptionImpl.displayName = 'Option';\n\nconst MemoOption = /* @__PURE__ */ React.memo(OptionImpl);\nMemoOption.displayName = 'Option';\n\n/**\n * An option of a `Combobox`, `Dropdown` (and `TagPicker`'s generated list). Renders\n * `<li role=\"option\">` with a stable id (`aria-activedescendant` target), `aria-selected`, a check\n * mark while selected and `data-active`/`data-selected`/`data-disabled` attributes for styling.\n *\n * Options register with the surrounding listbox (in DOM order, groups included), so they can be\n * wrapped, grouped or rendered conditionally. The option is memoized: moving the highlight\n * re-renders only the previously and the newly active option.\n *\n * Styling: `className` comes last. A plain background class (`className=\"bg-primary\"`) replaces\n * the built-in hover, selected and active backgrounds in every state. To restyle one state only,\n * use its data variant (`data-[active]:bg-…`, `data-[selected]:bg-…`). The active option keeps\n * its focus outline.\n *\n * Use it inside a `Combobox` or `Dropdown` only; it throws in development elsewhere.\n */\nexport const Option: React.NamedExoticComponent<OptionProps> = /* @__PURE__ */ markListboxElement(\n  MemoOption,\n  'option',\n);\n\n/* ------------------------------------------------------------------ */\n/*  OptionGroup                                                        */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the OptionGroup component used to group options. */\nexport interface OptionGroupProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  /** Heading label for the option group (names the group). */\n  label: string;\n  /**\n   * Hides the group and every option in it (see `Option`'s `hidden`): keyboard navigation and\n   * typeahead skip its options.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the group's `<li role=\"presentation\">` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\nfunction OptionGroupImpl({ label, className, children, hidden, ref, ...rest }: OptionGroupProps) {\n  const labelId = useId('option-group');\n  const store = React.useContext(ListboxContext)?.store;\n  const parentGroups = React.useContext(OptionGroupContext);\n  const hiddenByConsumer = React.useContext(OptionGroupHiddenContext) || !!hidden;\n  const [members] = React.useState(() => new OptionGroupMembers());\n  const groups = React.useMemo(() => [...parentGroups, members], [parentGroups, members]);\n  const subscribe = React.useCallback(\n    (listener: () => void) => {\n      const unsubscribeMembers = members.subscribe(listener);\n      const unsubscribeStore = store?.subscribe(listener);\n      return () => {\n        unsubscribeMembers();\n        unsubscribeStore?.();\n      };\n    },\n    [members, store],\n  );\n  // Hidden while every option inside it is filtered out or hidden, also options wrapped in a\n  // component (the options register with the group; re-read when they do and when the listbox\n  // state changes).\n  // The server render and the first client render show the group: no option has registered yet.\n  const empty = React.useSyncExternalStore(\n    subscribe,\n    () => members.allHidden(store),\n    () => false,\n  );\n\n  return (\n    <li\n      {...rest}\n      ref={ref}\n      role=\"presentation\"\n      hidden={hidden || empty || undefined}\n      className={cn(optionGroupClassNames.root, className)}\n    >\n      <div\n        id={labelId}\n        role=\"presentation\"\n        className={cn(\n          optionGroupClassNames.label,\n          'px-3 py-1 text-caption-1 font-semibold text-muted-foreground',\n        )}\n      >\n        {label}\n      </div>\n      <ul role=\"group\" aria-labelledby={labelId} className={optionGroupClassNames.list}>\n        <OptionGroupHiddenContext.Provider value={hiddenByConsumer}>\n          <OptionGroupContext.Provider value={groups}>{children}</OptionGroupContext.Provider>\n        </OptionGroupHiddenContext.Provider>\n      </ul>\n    </li>\n  );\n}\nOptionGroupImpl.displayName = 'OptionGroup';\n\n/**\n * Groups options under a heading: `<li role=\"presentation\">` with the heading and a\n * `<ul role=\"group\" aria-labelledby>` of the options. Hidden while a filter (or their own `hidden`)\n * hides all its options, also options wrapped in a component or in nested groups.\n */\nexport const OptionGroup: React.FC<OptionGroupProps> = /* @__PURE__ */ markListboxElement(\n  OptionGroupImpl,\n  'group',\n);\n\n/* ------------------------------------------------------------------ */\n/*  Listbox popup (P05-internal, shared by Combobox, Dropdown, TagPicker) */\n/* ------------------------------------------------------------------ */\n\n/** Options of {@link useListboxPopup}. */\nexport interface UseListboxPopupOptions {\n  /** The listbox is open (dismiss layer registered: outside press, focus outside). */\n  open: boolean;\n  /**\n   * The portaled surface is shown: positioning runs and the layer takes Escape. While the listbox\n   * is open with nothing shown (no options), Escape is left to an enclosing layer (overlays#1).\n   */\n  surfaceOpen: boolean;\n  /** Close the listbox. */\n  onDismiss: (reason: DismissReason) => void;\n  /** The component root: presses and focus inside it are not \"outside\". */\n  rootRef: React.RefObject<HTMLElement | null>;\n  /** The combobox element (the layer's anchor). */\n  anchorRef: React.RefObject<HTMLElement | null>;\n}\n\n/** Result of {@link useListboxPopup}. Destructure it (react-hooks/refs). */\nexport interface ListboxPopup {\n  /** The dismiss layer id (pass to {@link ListboxSurface}). */\n  layerId: string;\n  /** Ref callback for the element the surface is positioned against. */\n  setReference: (el: HTMLElement | null) => void;\n  /** Ref callback for the surface. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** `data-side`, `data-align` and the position style for the surface. */\n  floatingProps: { 'data-side': string; 'data-align': string; style: React.CSSProperties };\n}\n\n/**\n * Dismissal and positioning of a listbox surface (C-POPUPS, spec §5.4): `useDismiss` (Escape,\n * outside press, focus outside; `kind: 'listbox'`) and `usePopupPosition` (bottom-start, flip,\n * shift, the anchor's width, limited to the available space).\n */\nexport function useListboxPopup(options: UseListboxPopupOptions): ListboxPopup {\n  const { open, surfaceOpen, onDismiss, rootRef, anchorRef } = options;\n  const surfaceElementRef = React.useRef<HTMLElement | null>(null);\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: surfaceOpen,\n    side: 'bottom',\n    align: 'start',\n    matchReferenceWidth: true,\n    fitViewport: true,\n  });\n  const { layerId } = useDismiss({\n    open,\n    onDismiss: (reason) => onDismiss(reason),\n    refs: [rootRef, surfaceElementRef],\n    anchorRef,\n    kind: 'listbox',\n    escape: surfaceOpen,\n    focusOutside: true,\n  });\n  const surfaceRef = useMergedRefs<HTMLElement>(surfaceElementRef, setFloating);\n  return { layerId, setReference, surfaceRef, floatingProps };\n}\n\n/** Props of {@link ListboxSurface}. */\nexport interface ListboxSurfaceProps {\n  /** The listbox (from `useListbox`). */\n  listbox: UseListboxResult;\n  /** From {@link useListboxPopup}. */\n  layerId: string;\n  surfaceRef: React.RefCallback<HTMLElement>;\n  floatingProps: ListboxPopup['floatingProps'];\n  /** The listbox is open: `emptyContent` is shown only while it is (input-pickers#21). */\n  open: boolean;\n  /** The listbox is displayed: the list renders in the portaled surface. */\n  expanded: boolean;\n  /** While open but not expanded, show the surface with this content (e.g. \"No matches\"). */\n  emptyContent?: React.ReactNode;\n  /** Accessible name of the listbox. */\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  /** Options draw a check mark while selected. @default true */\n  showCheck?: boolean;\n  /** The host's stable class for the listbox element (its `listbox` part). */\n  listboxClassName?: string;\n  /** The host's stable class for the portaled surface (its `surface` part). */\n  surfaceClassName?: string;\n  children?: React.ReactNode;\n}\n\nfunction preventMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n}\n\n/**\n * Renders the option list in a single container at a time (spec §2.5, §5.5): inline and `hidden`\n * inside the component root while closed (registration and ids exist from the first client\n * commit), and in a `Portal` surface while expanded — never both.\n */\nexport function ListboxSurface(props: ListboxSurfaceProps) {\n  const {\n    listbox,\n    layerId,\n    surfaceRef,\n    floatingProps,\n    open,\n    expanded,\n    emptyContent,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    showCheck = true,\n    listboxClassName,\n    surfaceClassName,\n    children,\n  } = props;\n\n  const list = (\n    <OptionCheckContext.Provider value={showCheck}>\n      <ListboxContext.Provider value={listbox.context}>\n        <ul\n          {...listbox.getListboxProps()}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          hidden={!expanded || undefined}\n          className={cn(listboxClassName, 'min-h-0 max-h-60 overflow-auto')}\n        >\n          {children}\n        </ul>\n      </ListboxContext.Provider>\n    </OptionCheckContext.Provider>\n  );\n\n  // A closed listbox never leaves a surface behind: the text typed before closing survives it.\n  const showEmpty = open && !expanded && emptyContent !== undefined && emptyContent !== null;\n  if (!expanded && !showEmpty) return list;\n\n  return (\n    <>\n      {!expanded && list}\n      <Portal layerId={layerId}>\n        <div\n          ref={surfaceRef}\n          {...floatingProps}\n          data-wave-listbox-surface=\"\"\n          onMouseDown={preventMouseDown}\n          className={cn(\n            surfaceClassName,\n            'flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4',\n          )}\n        >\n          {expanded ? list : emptyContent}\n        </div>\n      </Portal>\n    </>\n  );\n}\nListboxSurface.displayName = 'ListboxSurface';\n"],"mappings":"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"}