@mortenbrudvik/waveui 0.4.0 → 0.7.0

package/dist/components/input/Input.mjs

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

package/dist/components/input/Label.cjs

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

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

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

package/dist/components/input/Label.mjs

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

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

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

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

package/dist/components/input/Option.mjs

@@ -0,0 +1,169 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { composeEventHandlers as t } from "../../lib/composeEventHandlers.mjs";
+import { useId as n } from "../../hooks/useId.mjs";
+import { useMergedRefs as r } from "../../hooks/useMergedRefs.mjs";
+import { useDismiss as i } from "../../hooks/useDismiss.mjs";
+import { Portal as a } from "../portal/Portal.mjs";
+import { forcedColors as o } from "../../lib/styles.mjs";
+import { CheckIcon as s } from "../../lib/icons.mjs";
+import { ListboxContext as c, markListboxElement as l, useListboxOption as u } from "../../hooks/useListbox.mjs";
+import { usePopupPosition as d } from "../../hooks/usePopupPosition.mjs";
+import * as f from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/input/Option.tsx
+var g = f.createContext(!0);
+g.displayName = "OptionCheckContext";
+var _ = e("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"), v = class {
+	counts = /* @__PURE__ */ new Map();
+	listeners = /* @__PURE__ */ 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();
+	}
+}, y = f.createContext([]);
+y.displayName = "OptionGroupContext";
+var b = f.createContext(!1);
+b.displayName = "OptionGroupHiddenContext";
+function x(e) {
+	let t = f.useContext(y);
+	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 S(n) {
+	let { value: r, label: i, textValue: a, disabled: c = !1, hidden: l = !1, className: d, children: p, onClick: v, onPointerMove: y, ref: S, ...C } = n, w = f.useContext(g), T = f.useContext(b), { selected: E, optionProps: D } = u({
+		value: r,
+		label: i,
+		textValue: a,
+		disabled: c,
+		hidden: l || T
+	}, S);
+	x(r);
+	let { ref: O, onClick: k, onPointerMove: A, ...j } = D;
+	return /* @__PURE__ */ h("li", {
+		"data-value": r,
+		...C,
+		...j,
+		ref: O,
+		onClick: t(v, k),
+		onPointerMove: t(y, A),
+		className: e(_, E && o.selectedContainer, d),
+		children: [w && /* @__PURE__ */ m(s, { className: e("shrink-0", !E && "invisible") }), /* @__PURE__ */ m("span", {
+			className: "min-w-0 flex-1",
+			children: p ?? r
+		})]
+	});
+}
+S.displayName = "Option";
+var C = /* @__PURE__ */ f.memo(S);
+C.displayName = "Option";
+var w = /* @__PURE__ */ l(C, "option");
+function T({ label: e, className: t, children: r, hidden: i, ref: a, ...o }) {
+	let s = n("option-group"), l = f.useContext(c)?.store, u = f.useContext(y), d = f.useContext(b) || !!i, [p] = f.useState(() => new v()), g = f.useMemo(() => [...u, p], [u, p]), _ = f.useCallback((e) => {
+		let t = p.subscribe(e), n = l?.subscribe(e);
+		return () => {
+			t(), n?.();
+		};
+	}, [p, l]), x = f.useSyncExternalStore(_, () => p.allHidden(l), () => !1);
+	return /* @__PURE__ */ h("li", {
+		...o,
+		ref: a,
+		role: "presentation",
+		hidden: i || x || void 0,
+		className: t,
+		children: [/* @__PURE__ */ m("div", {
+			id: s,
+			role: "presentation",
+			className: "px-3 py-1 text-caption-1 font-semibold text-muted-foreground",
+			children: e
+		}), /* @__PURE__ */ m("ul", {
+			role: "group",
+			"aria-labelledby": s,
+			children: /* @__PURE__ */ m(b.Provider, {
+				value: d,
+				children: /* @__PURE__ */ m(y.Provider, {
+					value: g,
+					children: r
+				})
+			})
+		})]
+	});
+}
+T.displayName = "OptionGroup";
+var E = /* @__PURE__ */ l(T, "group");
+function D(e) {
+	let { open: t, surfaceOpen: n, onDismiss: a, rootRef: o, anchorRef: s } = e, c = f.useRef(null), { setReference: l, setFloating: u, floatingProps: p } = d({
+		open: n,
+		side: "bottom",
+		align: "start",
+		matchReferenceWidth: !0,
+		fitViewport: !0
+	}), { layerId: m } = i({
+		open: t,
+		onDismiss: (e) => a(e),
+		refs: [o, c],
+		anchorRef: s,
+		kind: "listbox",
+		escape: n,
+		focusOutside: !0
+	});
+	return {
+		layerId: m,
+		setReference: l,
+		surfaceRef: r(c, u),
+		floatingProps: p
+	};
+}
+function O(e) {
+	e.preventDefault();
+}
+function k(e) {
+	let { listbox: t, layerId: n, surfaceRef: r, floatingProps: i, open: o, expanded: s, emptyContent: l, "aria-label": u, "aria-labelledby": d, showCheck: f = !0, children: _ } = e, v = /* @__PURE__ */ m(g.Provider, {
+		value: f,
+		children: /* @__PURE__ */ m(c.Provider, {
+			value: t.context,
+			children: /* @__PURE__ */ m("ul", {
+				...t.getListboxProps(),
+				"aria-label": u,
+				"aria-labelledby": d,
+				hidden: !s || void 0,
+				className: "min-h-0 max-h-60 overflow-auto",
+				children: _
+			})
+		})
+	});
+	return !s && (!o || s || l == null) ? v : /* @__PURE__ */ h(p, { children: [!s && v, /* @__PURE__ */ m(a, {
+		layerId: n,
+		children: /* @__PURE__ */ m("div", {
+			ref: r,
+			...i,
+			"data-wave-listbox-surface": "",
+			onMouseDown: O,
+			className: "flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4",
+			children: s ? v : l
+		})
+	})] });
+}
+k.displayName = "ListboxSurface";
+//#endregion
+export { k as ListboxSurface, w as Option, E as OptionGroup, D as useListboxPopup };
+
+//# sourceMappingURL=Option.mjs.map

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

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

package/dist/components/input/RadioGroup.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../hooks/useControllable.cjs"),o=require("../../hooks/useId.cjs"),s=require("../../hooks/useRovingTabIndex.cjs"),c=require("../../hooks/useMergedRefs.cjs"),l=require("../../lib/aria.cjs"),u=require("../../hooks/useFieldControl.cjs"),d=require("../../lib/styles.cjs"),f=require("../../hooks/useFormReset.cjs"),p=require("../internal/HiddenInput.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g=m.createContext(null);g.displayName=`RadioGroupContext`;var _={value:``,disabled:!1,select:()=>{},getTabIndex:()=>-1};function v(e){return m.useContext(g)||(n.reportMissingContext(e,`a RadioGroup`),_)}function y(e){n.warnOnce(`RadioGroup:duplicate:${e}`,`RadioGroup: several items share the value "${e}". Item values must be unique within a RadioGroup; items that share a value are checked together.`)}var b=({value:e,defaultValue:r,onValueChange:o,onChange:l,orientation:d=`vertical`,disabled:_=!1,name:v,required:b,form:x,children:S,className:C,id:w,"aria-label":T,"aria-labelledby":E,"aria-describedby":D,"aria-invalid":O,"aria-required":k,onKeyDown:A,onFocus:j,ref:M,...N})=>{l!==void 0&&n.warnDeprecated(`RadioGroup`,`onChange`,`onValueChange`);let P=r??``,[F,I]=a.useControllable(e,P,e=>{o?.(e),l?.(e)}),{containerProps:L,getTabIndex:R}=s.useRovingTabIndex({activeValue:F,orientation:`both`,loop:!0,onFocusMove:e=>I(e)}),z=m.useRef(null),B=c.useMergedRefs(M,L.ref,z),V=u.useFieldContext(),H=u.useFieldControl({id:w,"aria-label":T,"aria-labelledby":E,"aria-describedby":D,"aria-invalid":O,"aria-required":k??b},{labelable:!1}),U=b??V?.required??!1;f.useFormReset(z,()=>I(P),x),m.useEffect(()=>{let e=z.current;if(!n.isDev||!e)return;let t=new Set;for(let n of e.querySelectorAll(`[role="radio"][data-roving-value]`)){if(n.closest(`[data-roving-container]`)!==e)continue;let r=n.getAttribute(`data-roving-value`)??``;t.has(r)&&y(r),t.add(r)}});let W=()=>{z.current?.querySelector(`[data-roving-value][tabindex="0"]`)?.focus()},G=e=>{let t=e.target,n=t.closest(`[data-roving-value]`),r=n!==null&&n.closest(`[data-roving-container]`)===e.currentTarget;(t===e.currentTarget||r)&&L.onKeyDown(e)},K=m.useMemo(()=>({value:F,disabled:_,select:I,getTabIndex:R}),[F,_,I,R]);return(0,h.jsx)(g.Provider,{value:K,children:(0,h.jsxs)(`div`,{role:`radiogroup`,...H,"aria-orientation":d,"aria-disabled":_||void 0,className:t.cn(`relative flex`,d===`vertical`?`flex-col gap-2`:`flex-row gap-4`,C),...N,ref:B,"data-roving-container":``,onKeyDown:i.composeEventHandlers(A,G),onFocus:i.composeEventHandlers(j,L.onFocus,{checkDefaultPrevented:!1}),children:[S,(0,h.jsx)(p.HiddenInput,{type:`radio`,name:v,form:x,disabled:_,value:F,required:U,onInvalid:W})]})})};b.displayName=`RadioGroup`;var x=`forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none`;function S({value:e,label:a,disabled:s,className:c,labelClassName:u,onClick:f,"aria-labelledby":p,children:g,ref:_,...y}){let b=v(`RadioItem`),S=r.slotRendersContent(g);m.useEffect(()=>{S&&n.warnOnce(`RadioItem:children`,"RadioItem: children are not rendered. Pass the label in `label`.")},[S]);let C=o.useId(`radio-item`),w=o.useId(`radio-item-label`),T=!!(s||b.disabled),E=b.value===e,D=r.slotRendersContent(a),O=D&&y[`aria-label`]===void 0?l.joinIds(p,w):p;return(0,h.jsxs)(`label`,{className:t.cn(`inline-flex items-start gap-2 select-none`,T?`cursor-not-allowed opacity-50 has-focus-visible:opacity-100`:`cursor-pointer`,c),children:[(0,h.jsx)(`button`,{id:C,type:`button`,role:`radio`,...y,ref:_,"aria-labelledby":O,"aria-checked":E,disabled:T,tabIndex:T?-1:b.getTabIndex(e),"data-roving-value":e,onClick:i.composeEventHandlers(f,()=>b.select(e)),className:t.cn(`flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full border bg-transparent p-0 transition-colors motion-reduce:transition-none`,D&&`mt-px`,d.focusRing,E?`border-2 border-primary`:`border-stroke-accessible`,T?d.forcedColors.disabled:E?`forced-colors:border-[Highlight]`:d.forcedColors.control),children:E&&(0,h.jsx)(`span`,{"aria-hidden":`true`,className:t.cn(`block h-2 w-2 rounded-full bg-primary`,T?x:d.forcedColors.selectedLeaf)})}),D&&(0,h.jsx)(`span`,{id:w,className:t.cn(`text-body-1 text-foreground`,u),children:r.materialiseSlotContent(a)})]})}S.displayName=`RadioItem`;var C=S,w=Object.assign(b,{Item:S});exports.RadioGroup=w,exports.RadioGroupItem=C,exports.RadioItem=S;
+//# sourceMappingURL=RadioGroup.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.cjs","names":["React","useControllable","useRovingTabIndex","useMergedRefs","useFieldContext","useFieldControl","isDev","cn","composeEventHandlers","HiddenInput","slotRendersContent","useId","joinIds","focusRing","forcedColors","materialiseSlotContent","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_useControllable","require_useId","require_useRovingTabIndex","require_useMergedRefs","require_aria","require_useFieldControl","require_styles","require_useFormReset","require_HiddenInput","react","react_jsx_runtime","RadioGroupContext","INERT_CONTEXT","useRadioGroupContext","componentName","warnDuplicateValue","value","RadioGroupRoot","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","onChange","initialValue","defaultValue","setValue","onValueChange","next","rootRef","mergedRef","ref","containerProps","field","fieldProps","required","isRequired","form","root","seen","item","itemValue","focusTabStop","handleKeyDown","target","event","fromOwnItem","contextValue","disabled","getTabIndex","orientation","className","onKeyDown","onFocus","children","disabledDot","RadioItem","ctx","hasChildren","generatedId","labelTextId","isDisabled","selected","hasLabel","label","labelledBy","onClick","labelClassName","RadioGroupItem","RadioGroup"],"sources":["../../../src/components/input/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { joinIds } from '../../lib/aria';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { isDev, reportMissingContext, warnDeprecated, warnOnce } from '../../lib/dev';\nimport { materialiseSlotContent, slotRendersContent } from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { Orientation } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { HiddenInput } from '../internal/HiddenInput';\n\n/* ---- Context ---- */\ninterface RadioGroupContextValue {\n  /** The selected value (`''` when nothing is selected). */\n  value: string;\n  /** Group-level disabled state. */\n  disabled: boolean;\n  /**\n   * Selects a value when an item is activated (click, Space, Enter). Arrow keys select through\n   * the roving hook's `onFocusMove` instead. Both paths use the same `setValue`, so\n   * `onValueChange` and the deprecated `onChange` alias fire only when the value changes\n   * (C-NAMING).\n   */\n  select: (value: string) => void;\n  /** Roving tab index of an item. */\n  getTabIndex: (value: string) => 0 | -1;\n}\n\nconst RadioGroupContext = React.createContext<RadioGroupContextValue | null>(null);\nRadioGroupContext.displayName = 'RadioGroupContext';\n\nconst INERT_CONTEXT: RadioGroupContextValue = {\n  value: '',\n  disabled: false,\n  select: () => {},\n  getTabIndex: () => -1,\n};\n\n/**\n * The surrounding RadioGroup's context; throws in development outside one, logs once and returns\n * an inert value in production (C-CONTEXT).\n */\nfunction useRadioGroupContext(componentName: string): RadioGroupContextValue {\n  const context = React.useContext(RadioGroupContext);\n  if (context) return context;\n  reportMissingContext(componentName, 'a RadioGroup');\n  return INERT_CONTEXT;\n}\n\nfunction warnDuplicateValue(value: string): void {\n  warnOnce(\n    `RadioGroup:duplicate:${value}`,\n    `RadioGroup: several items share the value \"${value}\". Item values must be unique within a ` +\n      'RadioGroup; items that share a value are checked together.',\n  );\n}\n\n/* ---- RadioGroup ---- */\n/** Properties for the RadioGroup component. */\nexport interface RadioGroupProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** Controlled selected value (`''` for no selection). */\n  value?: string;\n  /** Initial selected value for uncontrolled usage (also the value a form reset restores).\n   * @default ''\n   */\n  defaultValue?: string;\n  /** Called with the newly selected value when the selection changes (not when re-selecting). */\n  onValueChange?: (value: string) => void;\n  /**\n   * Called with the newly selected value, exactly like `onValueChange`: only when the selection\n   * changes (0.4 also called it when the selected item was chosen again).\n   * @deprecated Use `onValueChange`.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Layout of the radio items (also `aria-orientation`). Arrow keys follow the APG radio pattern\n   * in both layouts: Down/Right select the next item, Up/Left the previous one (Left/Right\n   * mirrored under `dir=\"rtl\"`).\n   * @default 'vertical'\n   */\n  orientation?: Orientation;\n  /** Disables every item of the group. */\n  disabled?: boolean;\n  /**\n   * Form field name. With a name, the selected value is submitted with the form. No name is\n   * generated: without one the group adds nothing to `FormData`.\n   */\n  name?: string;\n  /** A value must be selected before the form can be submitted (native validation). */\n  required?: boolean;\n  /** Id of the form the group belongs to, when it is rendered outside that form. */\n  form?: string;\n  /** Ref to the `role=\"radiogroup\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// The `role=\"radiogroup\"` root, documented on the exported `RadioGroup` const.\nconst RadioGroupRoot = ({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onChange,\n  orientation = 'vertical',\n  disabled = false,\n  name,\n  required,\n  form,\n  children,\n  className,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  onKeyDown,\n  onFocus,\n  ref,\n  ...rest\n}: RadioGroupProps) => {\n  if (onChange !== undefined) warnDeprecated('RadioGroup', 'onChange', 'onValueChange');\n  const initialValue = defaultValue ?? '';\n  const [value, setValue] = useControllable(valueProp, initialValue, (next: string) => {\n    onValueChange?.(next);\n    onChange?.(next);\n  });\n\n  const { containerProps, getTabIndex } = useRovingTabIndex({\n    activeValue: value,\n    orientation: 'both',\n    loop: true,\n    // APG radio group: moving focus also selects the item.\n    onFocusMove: (next) => setValue(next),\n  });\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, containerProps.ref, rootRef);\n\n  const field = useFieldContext();\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      // An explicit `required={false}` wins over a required Field, so aria-required always\n      // matches the native validation below (`isRequired`).\n      'aria-required': ariaRequired ?? required,\n    },\n    { labelable: false },\n  );\n  const isRequired = required ?? field?.required ?? false;\n\n  useFormReset(rootRef, () => setValue(initialValue), form);\n\n  // Development diagnostic (C-DEV): the items may sit anywhere inside the group (Fragments, wrapper\n  // elements), so they are read from the DOM after each commit.\n  React.useEffect(() => {\n    const root = rootRef.current;\n    if (!isDev || !root) return;\n    const seen = new Set<string>();\n    for (const item of root.querySelectorAll<HTMLElement>('[role=\"radio\"][data-roving-value]')) {\n      // Its own items only: the roving marker cannot be overridden by the consumer (`role` can).\n      if (item.closest('[data-roving-container]') !== root) continue;\n      const itemValue = item.getAttribute('data-roving-value') ?? '';\n      if (seen.has(itemValue)) warnDuplicateValue(itemValue);\n      seen.add(itemValue);\n    }\n  });\n\n  const focusTabStop = () => {\n    rootRef.current?.querySelector<HTMLElement>('[data-roving-value][tabindex=\"0\"]')?.focus();\n  };\n\n  // Arrow keys, Home and End move between the radios (and select) only when they are pressed on a\n  // radio or on the group itself. A key pressed on other focusable content inside the group (a\n  // link in an item's label) keeps its own meaning, such as scrolling the page.\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const target = event.target as Element;\n    const item = target.closest('[data-roving-value]');\n    const fromOwnItem =\n      item !== null && item.closest('[data-roving-container]') === event.currentTarget;\n    if (target === event.currentTarget || fromOwnItem) containerProps.onKeyDown(event);\n  };\n\n  const contextValue = React.useMemo<RadioGroupContextValue>(\n    () => ({ value, disabled, select: setValue, getTabIndex }),\n    [value, disabled, setValue, getTabIndex],\n  );\n\n  return (\n    <RadioGroupContext.Provider value={contextValue}>\n      <div\n        role=\"radiogroup\"\n        {...fieldProps}\n        aria-orientation={orientation}\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'relative flex',\n          orientation === 'vertical' ? 'flex-col gap-2' : 'flex-row gap-4',\n          className,\n        )}\n        {...rest}\n        ref={mergedRef}\n        data-roving-container=\"\"\n        onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n        onFocus={composeEventHandlers(onFocus, containerProps.onFocus, {\n          checkDefaultPrevented: false,\n        })}\n      >\n        {children}\n        <HiddenInput\n          type=\"radio\"\n          name={name}\n          form={form}\n          disabled={disabled}\n          value={value}\n          required={isRequired}\n          onInvalid={focusTabStop}\n        />\n      </div>\n    </RadioGroupContext.Provider>\n  );\n};\n\nRadioGroupRoot.displayName = 'RadioGroup';\n\n/* ---- RadioItem ---- */\n/** Forced-colors look of the dot of a disabled selected radio: GrayText, no Highlight fill. */\nconst disabledDot = 'forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** Properties for the RadioItem component. */\nexport interface RadioItemProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'value' | 'onChange'\n> {\n  /** Value associated with this radio option. */\n  value: string;\n  /**\n   * Label next to the radio indicator (any phrasing content, links included, but no other form\n   * controls). It names the radio through `aria-labelledby`, after a consumer `aria-labelledby`;\n   * a consumer `aria-label` names it instead. Clicking its text selects the radio; clicking a link\n   * inside it follows the link, and arrow keys on that link do not move between the radios. The\n   * radio lines up with the first line of the label. `children` are not rendered: pass the label\n   * here.\n   */\n  label?: React.ReactNode;\n  /** Whether the radio item is disabled and non-interactive (also when the group is disabled). */\n  disabled?: boolean;\n  /** Class name of the item's root `<label>` element. */\n  className?: string;\n  /** Class name of the element that renders the `label` text. */\n  labelClassName?: string;\n  /** Ref to the `role=\"radio\"` button. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * One option of a {@link RadioGroup}: a `role=\"radio\"` button inside a `<label>`.\n *\n * Native button props (`id`, `aria-*`, `data-*`, handlers, `style`) and `ref` go to the radio\n * button; `className` stays on the root `<label>` and `labelClassName` styles the label text. A\n * consumer `onClick` runs before the selection; `preventDefault()` in it cancels the selection.\n * Must be rendered inside a RadioGroup (also inside Fragments or wrapper elements). `label` takes\n * rich content (a second line of subtext, a link); `children` are not rendered (a development\n * warning says so).\n */\nexport function RadioItem({\n  value,\n  label,\n  disabled,\n  className,\n  labelClassName,\n  onClick,\n  'aria-labelledby': ariaLabelledBy,\n  children,\n  ref,\n  ...rest\n}: RadioItemProps) {\n  const ctx = useRadioGroupContext('RadioItem');\n  const hasChildren = slotRendersContent(children);\n  React.useEffect(() => {\n    if (hasChildren) {\n      warnOnce(\n        'RadioItem:children',\n        'RadioItem: children are not rendered. Pass the label in `label`.',\n      );\n    }\n  }, [hasChildren]);\n  const generatedId = useId('radio-item');\n  const labelTextId = useId('radio-item-label');\n\n  const isDisabled = Boolean(disabled || ctx.disabled);\n  const selected = ctx.value === value;\n  // `0` is a label; `null`, `false`, `''` and empty collections are not (C-SLOTS).\n  const hasLabel = slotRendersContent(label);\n  // The label text names the radio through aria-labelledby, disabled or not: axe exempts the dimmed\n  // text of a disabled radio only when the radio references it this way (its <label> exemption\n  // covers native inputs only). A consumer aria-label still names the radio alone; a consumer\n  // aria-labelledby comes first.\n  const labelledBy =\n    hasLabel && rest['aria-label'] === undefined\n      ? joinIds(ariaLabelledBy, labelTextId)\n      : ariaLabelledBy;\n\n  return (\n    <label\n      className={cn(\n        // items-start: the radio lines up with the first line of a label that wraps or has a\n        // second line, not with its middle.\n        'inline-flex items-start gap-2 select-none',\n        // The dimmed look lifts while a focus ring shows inside the root (a link's in the label; a\n        // disabled radio never takes focus): opacity would dim the ring below 3:1.\n        isDisabled\n          ? 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100'\n          : 'cursor-pointer',\n        className,\n      )}\n    >\n      <button\n        id={generatedId}\n        type=\"button\"\n        role=\"radio\"\n        {...rest}\n        ref={ref}\n        aria-labelledby={labelledBy}\n        aria-checked={selected}\n        disabled={isDisabled}\n        tabIndex={isDisabled ? -1 : ctx.getTabIndex(value)}\n        data-roving-value={value}\n        onClick={composeEventHandlers(onClick, () => ctx.select(value))}\n        className={cn(\n          // p-0 and bg-transparent are set here, not left to the native reset, which any app button\n          // style overrides (C-NATIVE).\n          'flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full border bg-transparent p-0 transition-colors motion-reduce:transition-none',\n          // Centred on the 20px first line of the label text.\n          hasLabel && 'mt-px',\n          focusRing,\n          selected ? 'border-2 border-primary' : 'border-stroke-accessible',\n          // Forced colors: the focusable circle keeps system colors (its focus outline stays\n          // forced); only the dot opts out. A disabled radio draws GrayText, never Highlight.\n          isDisabled\n            ? forcedColors.disabled\n            : selected\n              ? 'forced-colors:border-[Highlight]'\n              : forcedColors.control,\n        )}\n      >\n        {selected && (\n          <span\n            aria-hidden=\"true\"\n            className={cn(\n              'block h-2 w-2 rounded-full bg-primary',\n              isDisabled ? disabledDot : forcedColors.selectedLeaf,\n            )}\n          />\n        )}\n      </button>\n      {hasLabel && (\n        <span id={labelTextId} className={cn('text-body-1 text-foreground', labelClassName)}>\n          {materialiseSlotContent(label)}\n        </span>\n      )}\n    </label>\n  );\n}\n\nRadioItem.displayName = 'RadioItem';\n\n/**\n * Flat name of `RadioGroup.Item` (C-COMPOUND), for React Server Components, which cannot access\n * the dotted form. Same component as {@link RadioItem}.\n */\nexport const RadioGroupItem = RadioItem;\n\n/** Props of {@link RadioGroupItem} (same as {@link RadioItemProps}). */\nexport type RadioGroupItemProps = RadioItemProps;\n\n/**\n * A single-choice group of {@link RadioItem}s (`role=\"radiogroup\"`).\n *\n * - One tab stop (the selected item, else the first enabled one); arrow keys move focus and select\n *   (APG radio group), Home/End jump to the ends, disabled items are skipped. A key pressed on a\n *   link inside an item's label stays the link's: it neither moves focus nor selects. Items may\n *   sit inside Fragments or wrapper elements. Every item needs its own `value` (a development\n *   warning names a value that several items share).\n * - Inside a `Field` it is named by the Field label (`aria-labelledby`) and described by its hint\n *   and error.\n * - With `name` (or `required`) it takes part in native forms; a form reset restores\n *   `defaultValue`.\n *\n * Use `RadioGroup.Item` (or the flat `RadioGroupItem`/`RadioItem` names) for the items. React\n * Server Components cannot access the dotted form, so they import the flat names; dotted access\n * needs a client file.\n */\nexport const RadioGroup = /* @__PURE__ */ Object.assign(RadioGroupRoot, { Item: RadioItem });\n"],"mappings":"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"}