@mortenbrudvik/waveui 0.4.0 → 0.8.0

package/dist/components/input/Field.mjs

@@ -0,0 +1,201 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { warnOnce as t } from "../../lib/dev.mjs";
+import { materialiseSlotContent as n, renderSlot as r, slotRendersContent as i } from "../../lib/slot.mjs";
+import { fieldClassNames as a } from "../../lib/classNames.mjs";
+import { useId as o } from "../../hooks/useId.mjs";
+import { joinIds as s } from "../../lib/aria.mjs";
+import { FieldContext as c, createFieldControlIdClaim as l } from "../../hooks/useFieldControl.mjs";
+import { ErrorIcon as u, SuccessIcon as d, WarningIcon as f } from "../../lib/icons.mjs";
+import * as p from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/input/Field.tsx
+var _ = /* @__PURE__ */ new Set([
+	"button",
+	"input",
+	"meter",
+	"output",
+	"progress",
+	"select",
+	"textarea"
+]), v = /* @__PURE__ */ new Set([
+	"button",
+	"image",
+	"reset",
+	"submit"
+]), y = /* @__PURE__ */ new Set([
+	"caption",
+	"code",
+	"deletion",
+	"emphasis",
+	"generic",
+	"insertion",
+	"none",
+	"paragraph",
+	"presentation",
+	"strong",
+	"subscript",
+	"superscript"
+]), b = /* @__PURE__ */ new Set([
+	"checkbox",
+	"columnheader",
+	"combobox",
+	"gridcell",
+	"listbox",
+	"radiogroup",
+	"rowheader",
+	"searchbox",
+	"spinbutton",
+	"switch",
+	"textbox",
+	"tree",
+	"treegrid"
+]);
+function x(e) {
+	if (typeof e == "string") return e.trim().split(/\s+/)[0]?.toLowerCase() || void 0;
+}
+function S(e) {
+	return typeof e == "string" && e.includes("-");
+}
+function C(e, t) {
+	return e === "select" || e === "textarea" ? !0 : e === "input" ? typeof t != "string" || !v.has(t.trim().toLowerCase()) : !1;
+}
+function w(e) {
+	if (typeof e.type != "string") return !0;
+	let t = x(e.props.role);
+	return t === void 0 ? C(e.type, e.props.type) : b.has(t);
+}
+function T(e) {
+	if (e.type === p.Fragment) return;
+	if (typeof e.type != "string" || _.has(e.type)) return "label-for";
+	let t = x(e.props.role);
+	return t === void 0 ? S(e.type) ? "label-for" : void 0 : y.has(t) ? void 0 : "labelledby";
+}
+function E(e) {
+	let t, n = 0;
+	p.Children.forEach(e, (e) => {
+		p.isValidElement(e) && (n += 1, t === void 0 && (t = e));
+	});
+	let r = t ? T(t) : void 0;
+	return {
+		target: r ? t : void 0,
+		mode: r,
+		elementCount: n
+	};
+}
+function D(e, t) {
+	let { target: n, mode: r } = E(e);
+	if (!n || !r) return p.Children.map(e, (e) => e);
+	let i = n.props, a = !S(n.type) || "true", o = {};
+	return r === "label-for" ? i.id === void 0 && (o.id = t.controlId) : t.labelId !== void 0 && i["aria-label"] === void 0 && (o["aria-labelledby"] = s(i["aria-labelledby"], t.labelId)), (t.messageId || t.hintId) && (o["aria-describedby"] = s(i["aria-describedby"], t.messageId, t.hintId)), t.invalid && i["aria-invalid"] === void 0 && (o["aria-invalid"] = a), t.required && i.required !== !1 && (i["aria-required"] === void 0 && w(n) && (o["aria-required"] = a), typeof n.type == "string" && C(n.type, i.type) && i.required === void 0 && (o.required = !0)), p.Children.map(e, (e) => e === n ? p.cloneElement(n, o) : e);
+}
+function O(e) {
+	let { target: t, mode: n, elementCount: r } = E(e), i = n === "label-for";
+	return {
+		elementCount: r,
+		targetId: i ? t?.props.id : void 0,
+		controlIdAssigned: i
+	};
+}
+var k = {
+	error: u,
+	warning: f,
+	success: d,
+	none: null
+}, A = {
+	error: "text-error",
+	warning: "text-warning-tint-foreground",
+	success: "text-success-tint-foreground",
+	none: "text-muted-foreground"
+}, j = "[&>:first-child:has([role=checkbox],[role=switch],label>[role=radio])]:py-1.5", M = "mt-0.5 inline-flex shrink-0";
+function N(t, n) {
+	if (n !== void 0) return i(n) ? r(n, "span", e(a.validationMessageIcon, M), { "aria-hidden": !0 }) : null;
+	let o = k[t];
+	return o ? /* @__PURE__ */ h("span", {
+		"aria-hidden": "true",
+		className: e(a.validationMessageIcon, M),
+		children: /* @__PURE__ */ h(o, { size: 12 })
+	}) : null;
+}
+var P = ({ label: r, hint: s, error: u, validationState: d, validationMessage: f, validationMessageIcon: _, orientation: v = "vertical", required: y = !1, htmlFor: b, className: x, children: S, ref: C, ...w }) => {
+	let T = o("field"), [E] = p.useState(l), { elementCount: k, targetId: M, controlIdAssigned: P } = O(S), F = i(u), I = u === !0 || F, L = i(f), R = I ? "error" : d ?? (L ? "error" : "none"), z = I ? F ? u : void 0 : f, B = I ? F : L, V = R === "error", H = i(s), U = I && (L || d !== void 0 && d !== "error"), W = M ?? b ?? T, G = i(r), K = G ? `${T}-label` : void 0, q = B ? `${T}-${V ? "error" : "message"}` : void 0, J = V ? q : void 0, Y = V && B, X = H ? `${T}-hint` : void 0;
+	p.useEffect(() => {
+		k > 1 && t("Field:multiple-children", `Field: only the first element child receives the Field's id and ARIA attributes; the other ${k - 1} element child(ren) are rendered unchanged. Wrap each control in its own Field.`);
+	}, [k]), p.useEffect(() => {
+		U && t("Field:error-and-validation", "Field: `error` and `validationMessage`/`validationState` are both set; `error` wins. Use one of them.");
+	}, [U]);
+	let Z = p.useMemo(() => ({
+		controlId: W,
+		labelId: K,
+		hintId: X,
+		errorId: J,
+		invalid: V,
+		required: y,
+		hasErrorMessage: Y,
+		controlIdAssigned: P,
+		controlIdClaim: E,
+		validationState: R,
+		validationMessageId: q
+	}), [
+		W,
+		K,
+		X,
+		J,
+		V,
+		y,
+		Y,
+		P,
+		E,
+		R,
+		q
+	]), ee = D(S, {
+		controlId: W,
+		labelId: K,
+		messageId: q,
+		hintId: X,
+		invalid: V,
+		required: y
+	}), Q = v === "horizontal", $ = /* @__PURE__ */ g(m, { children: [
+		/* @__PURE__ */ h(c.Provider, {
+			value: Z,
+			children: ee
+		}),
+		B ? /* @__PURE__ */ g("p", {
+			id: q,
+			role: R === "error" || R === "warning" ? "alert" : void 0,
+			"data-validation-state": R,
+			className: e(a.validationMessage, "mt-1 flex items-start gap-1 text-caption-1", A[R]),
+			children: [N(R, _), /* @__PURE__ */ h("span", { children: n(z) })]
+		}, `message-${R}`) : null,
+		H ? /* @__PURE__ */ h("p", {
+			id: X,
+			className: e(a.hint, "mt-1 text-caption-1 text-muted-foreground"),
+			children: n(s)
+		}, "hint") : null
+	] });
+	return /* @__PURE__ */ g("div", {
+		ref: C,
+		"data-orientation": v,
+		"data-validation-state": R,
+		className: e(a.root, "flex", Q ? "flex-row items-start gap-x-3" : "flex-col", x),
+		...w,
+		children: [G ? /* @__PURE__ */ g("label", {
+			id: K,
+			htmlFor: W,
+			className: e(a.label, "mb-1 text-body-1 font-semibold text-foreground", Q && "mb-0 shrink-0 basis-1/3 pt-1.5"),
+			children: [n(r), y && /* @__PURE__ */ h("span", {
+				"aria-hidden": "true",
+				className: e(a.required, "ms-0.5 text-error"),
+				children: "*"
+			})]
+		}) : null, Q ? /* @__PURE__ */ h("div", {
+			className: e("flex min-w-0 flex-1 flex-col", j),
+			children: $
+		}) : $]
+	});
+};
+P.displayName = "Field";
+//#endregion
+export { P as Field };
+
+//# sourceMappingURL=Field.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.mjs","names":["useId","_Fragment","useId$1","React","LABELABLE_ELEMENTS","BUTTON_INPUT_TYPES","UNNAMED_ROLES","ARIA_REQUIRED_ROLES","explicitRole","role","isCustomElement","type","isNativeValueControl","tag","inputType","supportsAriaRequired","child","getMergeMode","inspectChildren","first","elementCount","children","mode","mergeIntoFirstChild","target","childProps","ariaTrue","injected","state","joinIds","getChildInfo","assigned","MESSAGE_ICONS","ErrorIcon","WarningIcon","SuccessIcon","MESSAGE_COLORS","SHORT_ROW_FIRST_CHILD","MESSAGE_ICON_CLASSES","renderMessageIcon","icon","slotRendersContent","renderSlot","cn","fieldClassNames","Icon","Field","rest","fieldId","controlIdClaim","createFieldControlIdClaim","errorRendersContent","error","usesError","validationMessageRendersContent","validationMessage","validationState","message","hasMessage","invalid","hasHint","hint","errorAndValidation","controlId","targetId","htmlFor","hasLabel","label","labelId","messageId","errorId","hasErrorMessage","hintId","warnOnce","context","required","controlIdAssigned","content","horizontal","orientation","control","Fragment","FieldContext","validationMessageIcon","materialiseSlotContent","className"],"sources":["../../../src/components/input/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { fieldClassNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport { ErrorIcon, SuccessIcon, WarningIcon, type IconComponent } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent, type Slot } from '../../lib/slot';\nimport type { Orientation, ValidationState } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport {\n  FieldContext,\n  createFieldControlIdClaim,\n  type FieldContextValue,\n} from '../../hooks/useFieldControl';\n\n/** Props Field reads from and merges into its first element child. */\ninterface InjectedFieldProps {\n  id?: string;\n  role?: string;\n  type?: string;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  'aria-invalid'?: React.AriaAttributes['aria-invalid'];\n  'aria-required'?: React.AriaAttributes['aria-required'];\n  required?: boolean;\n}\n\n/** Properties for the Field component. */\nexport interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Label displayed above the control (beside it with `orientation=\"horizontal\"`); names the\n   * control.\n   */\n  label?: React.ReactNode;\n  /** Hint shown below the control, after any validation message; describes the control. */\n  hint?: React.ReactNode;\n  /**\n   * Validation error. Content is rendered below the control in a `role=\"alert\"` element that\n   * describes the control, and the control is marked `aria-invalid`. `true` marks the control\n   * invalid without a message. A value that renders nothing (`null`, `false`, `''`, or an array of\n   * only those, such as an empty `errors.map(…)`) is no error; `0` is content.\n   *\n   * Shorthand for `validationState=\"error\"` with this message; wins over `validationMessage` and\n   * `validationState` (development warning when both are set).\n   */\n  error?: React.ReactNode;\n  /**\n   * Validation state of `validationMessage`: `error` marks the control invalid (`aria-invalid`) and\n   * announces the message (`role=\"alert\"`); `warning` announces it without marking the control\n   * invalid; `success` and `none` show it without announcing. Default: `'error'` when\n   * `validationMessage` renders content, else `'none'`. Ignored while `error` is set.\n   */\n  validationState?: ValidationState;\n  /**\n   * Message below the control, styled and announced by `validationState`; it describes the control\n   * (`aria-describedby`). `error` is the shorthand for an error message and wins over this prop.\n   */\n  validationMessage?: React.ReactNode;\n  /**\n   * Icon before the message. Default: an error, warning or success glyph per state; none for\n   * `'none'`. `null` (or content that renders nothing) shows no icon. Decorative (`aria-hidden`).\n   */\n  validationMessageIcon?: Slot<'span'>;\n  /**\n   * `vertical`: the label above the control. `horizontal`: the label in a start column (a third\n   * of the width) beside the control; the message and the hint stay below the control. The\n   * label's first line lines up with a 32px control (Input, Select, …) and with the first line of\n   * a Checkbox, Switch or RadioGroup, which gets 6px of padding above and below for it. The\n   * horizontal layout wraps the control in a column, so changing `orientation` on a mounted Field\n   * remounts the control: an uncontrolled control loses its state and focus (control it, or keep\n   * one orientation while the Field is mounted).\n   * @default 'vertical'\n   */\n  orientation?: Orientation;\n  /**\n   * Whether the field is required: shows a decorative asterisk next to the label, sets\n   * `aria-required`, and turns on native constraint validation. `<input>`, `<select>`,\n   * `<textarea>` and Input, Select, Textarea, Slider, SearchBox and SpinButton get the native\n   * `required` attribute. Checkbox, Switch, RadioGroup, Rating, ColorPicker, SwatchPicker,\n   * Combobox, Dropdown, TagPicker, DatePicker and TimePicker render a hidden required input (with\n   * or without `name`), so submit is blocked until they are checked, switched on or have a value.\n   * An explicit `required={false}` on the control wins, including for `aria-required`.\n   */\n  required?: boolean;\n  /**\n   * The id of the control the label points at, when the control has no `id` of its own\n   * (default: a generated id).\n   */\n  htmlFor?: string;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Intrinsic elements a `<label htmlFor>` can name (HTML \"labelable elements\"). */\nconst LABELABLE_ELEMENTS: ReadonlySet<string> = new Set([\n  'button',\n  'input',\n  'meter',\n  'output',\n  'progress',\n  'select',\n  'textarea',\n]);\n\n/** `<input>` types whose implicit role is `button`: they take neither `aria-required` nor `required`. */\nconst BUTTON_INPUT_TYPES: ReadonlySet<string> = new Set(['button', 'image', 'reset', 'submit']);\n\n/**\n * Roles that cannot be named (ARIA 1.2 \"name prohibited\") or that remove semantics: an element\n * with one of them is a layout wrapper, not a widget, and Field leaves it alone.\n */\nconst UNNAMED_ROLES: ReadonlySet<string> = new Set([\n  'caption',\n  'code',\n  'deletion',\n  'emphasis',\n  'generic',\n  'insertion',\n  'none',\n  'paragraph',\n  'presentation',\n  'strong',\n  'subscript',\n  'superscript',\n]);\n\n/** Roles that support `aria-required` (ARIA 1.2, including the roles that inherit it). */\nconst ARIA_REQUIRED_ROLES: ReadonlySet<string> = new Set([\n  'checkbox',\n  'columnheader',\n  'combobox',\n  'gridcell',\n  'listbox',\n  'radiogroup',\n  'rowheader',\n  'searchbox',\n  'spinbutton',\n  'switch',\n  'textbox',\n  'tree',\n  'treegrid',\n]);\n\n/**\n * How Field merges into its first element child:\n * - `label-for`: components (library controls, consumer inputs, wrappers such as Tooltip),\n *   labelable intrinsic elements (`<input>`, `<select>`, `<button>`, …) and role-less custom\n *   elements (`<my-text-field>`, possibly form-associated). The child receives the `id` the\n *   `<label htmlFor>` points at (unless it has its own id, which the label then uses).\n * - `labelledby`: an intrinsic element with an explicit widget `role` (a consumer's own\n *   `<div role=\"radiogroup\">`). A `<label htmlFor>` cannot name it, so it is named through\n *   `aria-labelledby` and receives no `id` (a library control inside it keeps the control id).\n */\ntype MergeMode = 'label-for' | 'labelledby';\n\n/** The first token of an explicit `role` attribute (lower case), or `undefined`. */\nfunction explicitRole(role: unknown): string | undefined {\n  if (typeof role !== 'string') return undefined;\n  return role.trim().split(/\\s+/)[0]?.toLowerCase() || undefined;\n}\n\n/** Whether `type` is an autonomous custom element (`<my-text-field>`): its tag name has a hyphen. */\nfunction isCustomElement(type: unknown): type is string {\n  return typeof type === 'string' && type.includes('-');\n}\n\n/**\n * Whether an intrinsic element is a native form control that takes a value (`<select>`,\n * `<textarea>`, or an `<input>` that is not a button): it takes the native `required` attribute\n * and, without an explicit role, `aria-required`.\n */\nfunction isNativeValueControl(tag: string, inputType: unknown): boolean {\n  if (tag === 'select' || tag === 'textarea') return true;\n  if (tag !== 'input') return false;\n  return typeof inputType !== 'string' || !BUTTON_INPUT_TYPES.has(inputType.trim().toLowerCase());\n}\n\n/**\n * Whether Field may add `aria-required` to `child`: a component (it may render any control and\n * decides where the attribute goes), an element whose explicit role supports it, or a native form\n * control that takes a value. Never a `<button>`, `<meter>`, `<output>`, `<progress>`, button-type\n * `<input>` or role-less custom element, where axe reports `aria-allowed-attr`.\n */\nfunction supportsAriaRequired(child: React.ReactElement<InjectedFieldProps>): boolean {\n  if (typeof child.type !== 'string') return true;\n  const role = explicitRole(child.props.role);\n  if (role !== undefined) return ARIA_REQUIRED_ROLES.has(role);\n  return isNativeValueControl(child.type, child.props.type);\n}\n\n/**\n * Whether and how Field merges its props into `child` (see {@link MergeMode}). A Fragment and a\n * role-less (or presentational) non-labelable intrinsic wrapper (`<div>`, `<span>`) are left\n * alone; the library control inside them reads `FieldContext`. A role-less custom element\n * (`<my-text-field>`) is treated like a component: it may be a form-associated element, which a\n * `<label htmlFor>` names.\n */\nfunction getMergeMode(child: React.ReactElement<InjectedFieldProps>): MergeMode | undefined {\n  if (child.type === React.Fragment) return undefined;\n  if (typeof child.type !== 'string' || LABELABLE_ELEMENTS.has(child.type)) return 'label-for';\n  const role = explicitRole(child.props.role);\n  if (role !== undefined) return UNNAMED_ROLES.has(role) ? undefined : 'labelledby';\n  return isCustomElement(child.type) ? 'label-for' : undefined;\n}\n\ninterface FieldChildren {\n  /** The element child Field merges into, or `undefined`. */\n  target: React.ReactElement<InjectedFieldProps> | undefined;\n  /** How Field merges into `target` (`undefined` when there is no target). */\n  mode: MergeMode | undefined;\n  /** How many element children there are (only the first one is merged). */\n  elementCount: number;\n}\n\nfunction inspectChildren(children: React.ReactNode): FieldChildren {\n  let first: React.ReactElement<InjectedFieldProps> | undefined;\n  let elementCount = 0;\n  React.Children.forEach(children, (child) => {\n    if (!React.isValidElement<InjectedFieldProps>(child)) return;\n    elementCount += 1;\n    if (first === undefined) first = child;\n  });\n  const mode = first ? getMergeMode(first) : undefined;\n  return { target: mode ? first : undefined, mode, elementCount };\n}\n\n/** What Field merges into its first element child. */\ninterface FieldMergeState {\n  controlId: string;\n  labelId: string | undefined;\n  /** The id of the rendered validation message, in any state. */\n  messageId: string | undefined;\n  hintId: string | undefined;\n  /** Only the `error` validation state is invalid. */\n  invalid: boolean;\n  required: boolean;\n}\n\n/**\n * Returns `children` with Field's props merged into the merge target (only defined keys; the\n * child's own `id`, `aria-label`, `aria-invalid`, `aria-required` and `required` are kept, its\n * `aria-labelledby` and `aria-describedby` are joined with the message and the hint).\n */\nfunction mergeIntoFirstChild(children: React.ReactNode, state: FieldMergeState): React.ReactNode {\n  const { target, mode } = inspectChildren(children);\n  // Always map, so the children keep the same keys whether or not one of them is merged.\n  if (!target || !mode) return React.Children.map(children, (child) => child);\n\n  const childProps = target.props;\n  // React renders a boolean `true` on a custom element as an empty attribute (`aria-invalid=\"\"`).\n  const ariaTrue = isCustomElement(target.type) ? 'true' : true;\n  const injected: InjectedFieldProps = {};\n  if (mode === 'label-for') {\n    if (childProps.id === undefined) injected.id = state.controlId;\n  } else if (state.labelId !== undefined && childProps['aria-label'] === undefined) {\n    injected['aria-labelledby'] = joinIds(childProps['aria-labelledby'], state.labelId);\n  }\n  if (state.messageId || state.hintId) {\n    injected['aria-describedby'] = joinIds(\n      childProps['aria-describedby'],\n      state.messageId,\n      state.hintId,\n    );\n  }\n  // The child's own `aria-invalid` wins, as `useFieldControl` lets it win for a nested control.\n  if (state.invalid && childProps['aria-invalid'] === undefined) {\n    injected['aria-invalid'] = ariaTrue;\n  }\n  // A child's own `required={false}` wins: it gets neither `aria-required` nor `required`, so what\n  // is announced matches what is validated.\n  if (state.required && childProps.required !== false) {\n    if (childProps['aria-required'] === undefined && supportsAriaRequired(target)) {\n      injected['aria-required'] = ariaTrue;\n    }\n    if (\n      typeof target.type === 'string' &&\n      isNativeValueControl(target.type, childProps.type) &&\n      childProps.required === undefined\n    ) {\n      injected.required = true;\n    }\n  }\n  return React.Children.map(children, (child) =>\n    child === target ? React.cloneElement(target, injected) : child,\n  );\n}\n\n/** Primitive facts about the children, read during render (no element objects escape). */\nfunction getChildInfo(children: React.ReactNode): {\n  elementCount: number;\n  targetId: string | undefined;\n  controlIdAssigned: boolean;\n} {\n  const { target, mode, elementCount } = inspectChildren(children);\n  // Only a label-for target holds the control id (Field merges it, or the target's own id becomes\n  // the control id). A <label htmlFor> cannot name a role widget, so the library control inside\n  // one keeps the control id. With `controlIdAssigned`, a library control that receives no id is\n  // nested in the target or is a later sibling: useFieldControl gives it an id of its own and\n  // names it through aria-labelledby.\n  const assigned = mode === 'label-for';\n  return {\n    elementCount,\n    targetId: assigned ? target?.props.id : undefined,\n    controlIdAssigned: assigned,\n  };\n}\n\n/** The default glyph of each message state (`none` has none). */\nconst MESSAGE_ICONS: Readonly<Record<ValidationState, IconComponent | null>> = {\n  error: ErrorIcon,\n  warning: WarningIcon,\n  success: SuccessIcon,\n  none: null,\n};\n\n/** Text color of each message state (the `*-tint-foreground` tokens keep 4.5:1 on page and card). */\nconst MESSAGE_COLORS: Readonly<Record<ValidationState, string>> = {\n  error: 'text-error',\n  warning: 'text-warning-tint-foreground',\n  success: 'text-success-tint-foreground',\n  none: 'text-muted-foreground',\n};\n\n/**\n * Horizontal layout: the label's first line is centred on a 32px row, the height of an Input, a\n * Select and the other text controls. Checkbox, Switch and RadioGroup rows are one 20px line, so a\n * first child that holds one (also a wrapper of several) gets 6px above and below: its first line\n * then lines up with the label's, also when its label wraps or a group lists its items one below\n * the other.\n */\nconst SHORT_ROW_FIRST_CHILD =\n  '[&>:first-child:has([role=checkbox],[role=switch],label>[role=radio])]:py-1.5';\n\n/** The icon box before a message: 12px glyphs line up with the first line of caption text. */\nconst MESSAGE_ICON_CLASSES = 'mt-0.5 inline-flex shrink-0';\n\n/**\n * The icon before a message: the state's glyph while `icon` is `undefined`, else the consumer's\n * slot (`null` or content that renders nothing shows none).\n */\nfunction renderMessageIcon(state: ValidationState, icon: Slot<'span'> | undefined) {\n  if (icon !== undefined) {\n    return slotRendersContent(icon)\n      ? renderSlot(icon, 'span', cn(fieldClassNames.validationMessageIcon, MESSAGE_ICON_CLASSES), {\n          'aria-hidden': true,\n        })\n      : null;\n  }\n  const Icon = MESSAGE_ICONS[state];\n  return Icon ? (\n    <span\n      aria-hidden=\"true\"\n      className={cn(fieldClassNames.validationMessageIcon, MESSAGE_ICON_CLASSES)}\n    >\n      <Icon size={12} />\n    </span>\n  ) : null;\n}\n\n/**\n * Lays out a form control with a label, a validation message, a hint and a required indicator,\n * and wires them to the control.\n *\n * - Validation: `validationMessage` with a `validationState` (`error`, `warning`, `success`,\n *   `none`), or `error`, the shorthand for an error message. The message renders below the\n *   control with the state's icon and color, followed by the hint (which stays visible); both\n *   describe the control. Only the `error` state marks the control `aria-invalid`; `error` and\n *   `warning` messages are announced (`role=\"alert\"`). The root carries `data-validation-state`\n *   and `data-orientation`.\n * - `orientation=\"horizontal\"` puts the label in a start column beside the control, with the\n *   message and the hint below the control. The label lines up with the first line of the\n *   control (a Checkbox, Switch or RadioGroup gets 6px of padding above and below for it).\n * - Provides `FieldContext`: the library's inputs (Input, Select, Textarea, Slider, SearchBox,\n *   Checkbox, Switch, RadioGroup, Rating, SpinButton, pickers, …) read it wherever they are inside\n *   the Field and are named by the label, described by the message and the hint and marked\n *   invalid/required.\n * - Merges into its **first** element child (a native `<input>`/`<select>`/`<textarea>`, a\n *   library control or your own component): `id` (unless the child has one — the label then\n *   points at the child's id), `aria-describedby` (joined with the child's own ids),\n *   `aria-invalid` (in the error state), `aria-required` and, for native form controls that take a\n *   value, `required`. Only defined values are merged; the child's own values are kept, so a\n *   child's `aria-invalid={false}` stays valid while the Field error still describes it (as for a\n *   library control nested deeper). Further element children are rendered as they are.\n * - `aria-required` is added only where it is allowed: components (Field cannot see what they\n *   render, so they decide where it goes — see the wrapper note below), `<input>` (not\n *   `type=\"button\"`/`\"submit\"`/`\"reset\"`/`\"image\"`), `<select>`, `<textarea>`, and elements\n *   whose explicit `role` supports it (`checkbox`, `combobox`, `switch`, `textbox`, …). A\n *   `<button>`, `<meter>`, `<output>` or `<progress>` is labelled and described but not marked\n *   required.\n * - Your own widget built on an element with an explicit `role` (`<div role=\"radiogroup\">`) is\n *   named through `aria-labelledby` (joined with its own; not added when it has an\n *   `aria-label`), described, marked invalid, and gets `aria-required` when its role supports\n *   it. It receives no `id`, because a `<label htmlFor>` cannot name it. A role-less `<div>` or\n *   `<span>` wrapper (or a `role=\"presentation\"`/`\"none\"` one) is left alone: the library\n *   control inside it reads `FieldContext`.\n * - A custom element (`<my-text-field>`) without a role is treated like a component: it receives\n *   the `id`, the description and `aria-invalid` (a form-associated custom element is named by\n *   the label). Field does not guess its semantics: pass `required`/`aria-required` or an\n *   explicit `role` yourself.\n * - **One control per Field.** A Field labels and describes a single control; wrap each control\n *   in its own Field (a development warning is logged when a Field has more than one element\n *   child). Further element children are rendered as they are. A library control among them\n *   still reads `FieldContext`, so it shares the Field's name and description (when the first\n *   child holds the control id, it gets an id of its own and is named through\n *   `aria-labelledby`). Several library controls inside one plain wrapper element (`<div>`) are\n *   all named and described too: the first one takes the control id the label points at, the\n *   others get ids of their own and are named through `aria-labelledby` (when the first one is\n *   removed, the next one takes the control id over).\n * - **Wrapper and layout components around a library control** (a `Tooltip`, your own `Row`):\n *   put them inside a plain element (`<div>`, `<div className=\"flex\">`), which Field leaves\n *   alone; the library control inside then holds the control id and is labelled, described and\n *   marked invalid/required through `FieldContext`. Field cannot see inside a component, so a\n *   component **first child** is treated as the control (it may be your own input): it receives\n *   the control `id`, `aria-describedby`, `aria-invalid` and, with `required`, `aria-required`,\n *   and a wrapper puts them on its own element (Tooltip's `<span>`, the layout `<div>`). The\n *   library control inside still gets an id of its own and is named by the label through\n *   `aria-labelledby`, but clicking the label does not focus it, and with `required`,\n *   `aria-required` on the wrapper's non-widget element is an ARIA error (axe\n *   `aria-allowed-attr`), even though the control inside is correctly marked required.\n *\n * @example\n * <Field label=\"Email\" hint=\"We never share it\" error={errors.email} required>\n *   <Input type=\"email\" value={email} onValueChange={setEmail} />\n * </Field>\n *\n * @example\n * <Field label=\"Password\" hint=\"At least 12 characters\" validationState=\"warning\"\n *   validationMessage=\"This password is common\">\n *   <Input type=\"password\" />\n * </Field>\n *\n * @example\n * // A wrapper component goes inside a plain element.\n * <Field label=\"Name\" required>\n *   <div>\n *     <Tooltip content=\"As on your passport\">\n *       <Input />\n *     </Tooltip>\n *   </div>\n * </Field>\n */\nexport const Field = ({\n  label,\n  hint,\n  error,\n  validationState,\n  validationMessage,\n  validationMessageIcon,\n  orientation = 'vertical',\n  required = false,\n  htmlFor,\n  className,\n  children,\n  ref,\n  ...rest\n}: FieldProps) => {\n  const fieldId = useId('field');\n  // Hands the control id to one library control when Field leaves its first child alone.\n  const [controlIdClaim] = React.useState(createFieldControlIdClaim);\n  const { elementCount, targetId, controlIdAssigned } = getChildInfo(children);\n\n  // The library's \"renders nothing\" rule: nullish, booleans, '' and collections of only those (an\n  // empty `errors.map(…)`) are no label, hint or message; `0` is content.\n  const errorRendersContent = slotRendersContent(error);\n  const usesError = error === true || errorRendersContent;\n  const validationMessageRendersContent = slotRendersContent(validationMessage);\n  // `error` is the shorthand for an error message and wins over the validation props.\n  const state: ValidationState = usesError\n    ? 'error'\n    : (validationState ?? (validationMessageRendersContent ? 'error' : 'none'));\n  const message = usesError ? (errorRendersContent ? error : undefined) : validationMessage;\n  const hasMessage = usesError ? errorRendersContent : validationMessageRendersContent;\n  const invalid = state === 'error';\n  const hasHint = slotRendersContent(hint);\n  const errorAndValidation =\n    usesError &&\n    (validationMessageRendersContent ||\n      (validationState !== undefined && validationState !== 'error'));\n\n  const controlId = targetId ?? htmlFor ?? fieldId;\n  const hasLabel = slotRendersContent(label);\n  const labelId = hasLabel ? `${fieldId}-label` : undefined;\n  // The error message keeps its 0.5 id; the other states get their own.\n  const messageId = hasMessage ? `${fieldId}-${invalid ? 'error' : 'message'}` : undefined;\n  const errorId = invalid ? messageId : undefined;\n  const hasErrorMessage = invalid && hasMessage;\n  const hintId = hasHint ? `${fieldId}-hint` : undefined;\n\n  React.useEffect(() => {\n    if (elementCount > 1) {\n      warnOnce(\n        'Field:multiple-children',\n        \"Field: only the first element child receives the Field's id and ARIA attributes; the other \" +\n          `${elementCount - 1} element child(ren) are rendered unchanged. Wrap each control in its own Field.`,\n      );\n    }\n  }, [elementCount]);\n\n  React.useEffect(() => {\n    if (errorAndValidation) {\n      warnOnce(\n        'Field:error-and-validation',\n        'Field: `error` and `validationMessage`/`validationState` are both set; `error` wins. Use one of them.',\n      );\n    }\n  }, [errorAndValidation]);\n\n  const context = React.useMemo<FieldContextValue>(\n    () => ({\n      controlId,\n      labelId,\n      hintId,\n      errorId,\n      invalid,\n      required,\n      hasErrorMessage,\n      controlIdAssigned,\n      controlIdClaim,\n      validationState: state,\n      validationMessageId: messageId,\n    }),\n    [\n      controlId,\n      labelId,\n      hintId,\n      errorId,\n      invalid,\n      required,\n      hasErrorMessage,\n      controlIdAssigned,\n      controlIdClaim,\n      state,\n      messageId,\n    ],\n  );\n\n  const content = mergeIntoFirstChild(children, {\n    controlId,\n    labelId,\n    messageId,\n    hintId,\n    invalid,\n    required,\n  });\n\n  const horizontal = orientation === 'horizontal';\n  const control = (\n    <>\n      <FieldContext.Provider value={context}>{content}</FieldContext.Provider>\n      {/* Keyed by state: a message whose state changes (a hint-only Field that gets an error, a\n          warning that becomes an error) is a newly inserted element, which screen readers\n          announce reliably as an alert, not an existing node with a new role. */}\n      {hasMessage ? (\n        <p\n          key={`message-${state}`}\n          id={messageId}\n          role={state === 'error' || state === 'warning' ? 'alert' : undefined}\n          data-validation-state={state}\n          className={cn(\n            fieldClassNames.validationMessage,\n            'mt-1 flex items-start gap-1 text-caption-1',\n            MESSAGE_COLORS[state],\n          )}\n        >\n          {renderMessageIcon(state, validationMessageIcon)}\n          <span>{materialiseSlotContent(message)}</span>\n        </p>\n      ) : null}\n      {hasHint ? (\n        <p\n          key=\"hint\"\n          id={hintId}\n          className={cn(fieldClassNames.hint, 'mt-1 text-caption-1 text-muted-foreground')}\n        >\n          {materialiseSlotContent(hint)}\n        </p>\n      ) : null}\n    </>\n  );\n\n  return (\n    <div\n      ref={ref}\n      data-orientation={orientation}\n      data-validation-state={state}\n      className={cn(\n        fieldClassNames.root,\n        'flex',\n        horizontal ? 'flex-row items-start gap-x-3' : 'flex-col',\n        className,\n      )}\n      {...rest}\n    >\n      {hasLabel ? (\n        <label\n          id={labelId}\n          htmlFor={controlId}\n          className={cn(\n            fieldClassNames.label,\n            'mb-1 text-body-1 font-semibold text-foreground',\n            // Beside the control: a third of the width, its first line centred on a 32px row.\n            horizontal && 'mb-0 shrink-0 basis-1/3 pt-1.5',\n          )}\n        >\n          {materialiseSlotContent(label)}\n          {required && (\n            <span aria-hidden=\"true\" className={cn(fieldClassNames.required, 'ms-0.5 text-error')}>\n              *\n            </span>\n          )}\n        </label>\n      ) : null}\n      {horizontal ? (\n        <div className={cn('flex min-w-0 flex-1 flex-col', SHORT_ROW_FIRST_CHILD)}>{control}</div>\n      ) : (\n        control\n      )}\n    </div>\n  );\n};\n\nField.displayName = 'Field';\n"],"mappings":"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"}

package/dist/components/input/Input.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.cjs","names":["useFieldContext","useId","_jsx","cn","inputClassNames","useFieldControl","joinIds","slotRendersContent","inputFocusWithin","renderSlot","inputFocus","_Fragment","require_runtime","require_cn","require_slot","require_classNames","require_useId","require_aria","require_useFieldControl","require_styles","react","react_jsx_runtime","isAriaValid","ariaInvalid","useControlErrorMessage","field","generatedId","invalid","consumerAriaInvalid","error","ownId","messageClassName","messageRest","errorMessageProps","messageId","partClassName","isInvalidLook","ownError","Input","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaRequired","ariaErrorMessage","props","fieldProps","invalidLook","handleChange","onChange","onValueChange","event","controlProps","hasBefore","contentBefore","hasAfter","contentAfter","control","inputProps","className","message"],"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":"sYAuCA,SAASsB,EAAY,EAA4D,CAC/E,OAAOC,IAAgB,IAASA,IAAgB,OAClD,CAeA,SAAgBC,EACd,EACA,EACA,EACA,EACqB,CACrB,IAAMC,EAAQzB,EAAAA,gBAAgB,EACxB0B,EAAczB,EAAAA,MAAM,OAAO,EAC3B0B,EACJ,CAACL,EAAYM,CAAmB,IAC/BC,IAAU,IAAS,OAAOA,GAAU,UAAYA,IAAU,IAE7D,GADoB,IAAW,OAAOA,GAAU,UAAaJ,GAAO,gBAClD,MAAO,CAAE,UAAS,UAAW,IAAA,GAAW,QAAS,IAAK,EAExE,GAAM,CAAE,GAAIK,EAAO,UAAWC,EAAkB,GAAGC,GAAgBC,GAAqB,CAAC,EACnFC,EAAYJ,GAASJ,EAW3B,MAAO,CAAE,UAAS,YAAW,SAAA,EAT3BxB,EAAAA,IAAAA,CAAC,OAAD,CACE,KAAK,QACL,GAAI8B,EACJ,GAAIE,EACJ,UAAW/B,EAAAA,GAAGgC,EAAe,uCAAwCJ,CAAgB,EAEpF,SAAAF,CACG,CAEqB,CAAQ,CACvC,CAYA,SAAgBO,EACd,EACA,EACS,CAET,OADId,EAAYC,CAAW,EAAU,GAC9Bc,GAAYd,IAAgB,IAAQA,IAAgB,MAC7D,CAqDA,IAAae,GAAS,CACpB,QACA,oBACA,gBACA,eACA,WACA,gBACA,YACA,MACA,KACA,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBlB,EAChB,gBAAiBmB,EACjB,oBAAqBC,EACrB,WACA,GAAGC,KACa,CAChB,GAAM,CAAE,UAAS,YAAW,WAAYpB,EACtCK,EACAI,EACAV,EACAnB,EAAAA,gBAAgB,YAClB,EACMyC,EAAaxC,EAAAA,gBACjB,CACE,KACA,aAAckC,EACd,kBAAmBC,EACnB,mBAAoBlC,EAAAA,QAAQmC,EAAiBP,CAAS,EACtD,eAAgBX,IAAgBI,GAAW,IAAA,IAC3C,gBAAiBe,EACjB,UACF,EACA,CAAE,eAAgB,EAAK,CACzB,EACMI,EAAcV,EAAcT,EAASkB,EAAW,eAAe,EAE/DE,EACJC,GAAYC,EACP,GAA+C,CAC9CD,IAAWE,CAAK,EAChBD,IAAgBC,EAAM,cAAc,KAAK,CAC3C,EACA,IAAA,GAEAC,EAAe,CACnB,GAAGP,EACH,GAAGC,EACH,oBAAqBvC,EAAAA,QAAQqC,EAAkBT,CAAS,EACxD,SAAUa,CACZ,EAEMK,EAAY7C,EAAAA,mBAAmB8C,CAAa,EAC5CC,EAAW/C,EAAAA,mBAAmBgD,CAAY,EAE5CC,EACJ,GAAIJ,GAAaE,EAAU,CAGzB,GAAM,CAAE,QAAO,SAAQ,GAAGG,GAAeN,EACzC,GACE,EAAA9B,EAAA,KAAA,CAAC,OAAD,CACU,SACD,QACP,UAAWlB,EAAAA,GACTC,EAAAA,gBAAgB,KAChB,uIACAI,EAAAA,iBACAsC,GAAA,uDAGAF,EAAM,UAAY,8DAClBc,CACF,EAZF,SAAA,CAcGN,GACC3C,EAAAA,WAAW4C,EAAe,OAAQlD,EAAAA,GAAGC,EAAAA,gBAAgB,cAAe,eAAe,CAAC,GACtF,EAAAiB,EAAA,IAAA,CAAC,QAAD,CACO,MACL,UAAWlB,EAAAA,GACTC,EAAAA,gBAAgB,MAChB,wEACA,oCACA,uBACA,6BACF,EACA,GAAIqD,CACL,CAAA,EACAH,GACC7C,EAAAA,WAAW8C,EAAc,OAAQpD,EAAAA,GAAGC,EAAAA,gBAAgB,aAAc,eAAe,CAAC,CAChF,GAEV,KACE,IACE,EAAAiB,EAAA,IAAA,CAAC,QAAD,CACO,MACL,UAAWlB,EAAAA,GACTC,EAAAA,gBAAgB,KAChBA,EAAAA,gBAAgB,MAChB,mHACA,oCACAM,EAAAA,WACA,kDACAoC,GAAA,gDACAY,CACF,EACA,GAAIP,CACL,CAAA,EAKL,OADKQ,GAEH,EAAAtC,EAAA,KAAA,CAAAV,EAAAA,SAAA,CAAA,SAAA,CACG6C,EACAG,CACD,CAAA,CAAA,EALiBH,CAOvB,EAEA,EAAM,YAAc"}

package/dist/components/input/Input.mjs

@@ -0,0 +1,82 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { renderSlot as t, slotRendersContent as n } from "../../lib/slot.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 u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/input/Input.tsx
+function p(e) {
+	return e === !1 || e === "false";
+}
+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: u, className: f, ...m } = n ?? {}, h = u ?? c;
+	return {
+		invalid: l,
+		messageId: h,
+		message: /* @__PURE__ */ d("span", {
+			role: "alert",
+			...m,
+			id: h,
+			className: e(a, "mt-1 block text-caption-1 text-error", f),
+			children: t
+		})
+	};
+}
+function h(e, t) {
+	return p(t) ? !1 : e || t === !0 || t === "true";
+}
+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(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: [
+				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
+				}),
+				R && t(g, "span", e(r.contentAfter, "shrink-0 pe-2"))
+			]
+		});
+	} 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 M ? /* @__PURE__ */ f(u, { children: [z, M] }) : z;
+};
+g.displayName = "Input";
+//#endregion
+export { g as Input, h as isInvalidLook, m as useControlErrorMessage };
+
+//# sourceMappingURL=Input.mjs.map

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

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

@@ -0,0 +1,2 @@
+"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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +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 n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/input/Label.tsx
+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: 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: "*"
+	})]
+});
+o.displayName = "Label";
+//#endregion
+export { o as Label };
+
+//# sourceMappingURL=Label.mjs.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../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

@@ -0,0 +1 @@
+{"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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"}