@mortenbrudvik/waveui 0.4.0 → 0.7.0

package/dist/components/input/Dropdown.mjs

@@ -0,0 +1,128 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { warnDeprecated as t } from "../../lib/dev.mjs";
+import { composeEventHandlers as n } from "../../lib/composeEventHandlers.mjs";
+import { useControllable as r } from "../../hooks/useControllable.mjs";
+import { useMergedRefs as i } from "../../hooks/useMergedRefs.mjs";
+import { useFieldContext as ee, useFieldControl as te } from "../../hooks/useFieldControl.mjs";
+import { disabledStyles as a, inputFocus as o } from "../../lib/styles.mjs";
+import { ChevronDownIcon as ne, DismissIcon as re } from "../../lib/icons.mjs";
+import { isInvalidLook as s } from "./Input.mjs";
+import { useFormReset as ie } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as ae } from "../internal/HiddenInput.mjs";
+import { collectOptionLabels as oe, useListbox as se } from "../../hooks/useListbox.mjs";
+import { pickerEndPadding as ce } from "./pickerStyles.mjs";
+import { ListboxSurface as le, Option as c, OptionGroup as l, useListboxPopup as ue } from "./Option.mjs";
+import * as u from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/input/Dropdown.tsx
+var p = (c) => {
+	let { value: l, defaultValue: p, onValueChange: m, onOptionSelect: h, open: g, defaultOpen: de, onOpenChange: fe, placeholder: pe = "Select an option", disabled: _ = !1, name: me, form: v, required: y, clearable: b = !1, labels: x, autoFocus: S, tabIndex: C, id: w, "aria-label": T, "aria-labelledby": E, "aria-describedby": D, "aria-invalid": O, "aria-required": k, "aria-errormessage": A, "aria-details": j, onFocus: M, onBlur: N, onKeyDown: P, onKeyUp: F, controlRef: I, className: L, children: R, ref: z, ...he } = c;
+	h !== void 0 && t("Dropdown", "onOptionSelect", "onValueChange");
+	let B = ee(), ge = y ?? B?.required ?? !1, V = te({
+		id: w,
+		"aria-label": T,
+		"aria-labelledby": E,
+		"aria-describedby": D,
+		"aria-invalid": O,
+		"aria-required": k ?? y
+	}), _e = s(!1, V["aria-invalid"]), [H, U] = r(l, p ?? "", m), [W, G] = r(g, (de ?? !1) && !_, fe), K = W && !_, q = _ && W;
+	u.useEffect(() => {
+		q && G(!1);
+	}, [q, G]);
+	let J = u.useRef(null), Y = u.useRef(null), ve = u.useMemo(() => oe(R), [R]), X = se({
+		open: K,
+		onOpenChange: (e) => G(e),
+		mode: "select-only",
+		selectedValues: H ? [H] : [],
+		onSelect: (e) => {
+			U(e), h?.(e);
+		},
+		idPrefix: "dropdown-listbox"
+	}), Z = K && X.items.length > 0, { layerId: ye, setReference: be, surfaceRef: xe, floatingProps: Se } = ue({
+		open: K,
+		surfaceOpen: Z,
+		onDismiss: () => G(!1),
+		rootRef: J,
+		anchorRef: Y
+	}), Ce = i(J, z), we = i(Y, I, be);
+	ie(Y, () => U(p ?? ""), v);
+	let Q = H ? X.getItem(H)?.label ?? ve.get(H) ?? "" : "", Te = (e) => {
+		if (e.key === "Escape" && K && !Z && !e.nativeEvent.isComposing) {
+			G(!1);
+			return;
+		}
+		X.onKeyDown(e);
+	}, Ee = () => {
+		U(""), G(!1), Y.current?.focus();
+	}, $ = b && H !== "", De = V["aria-label"] === void 0 ? V["aria-labelledby"] ?? B?.labelId : V["aria-labelledby"];
+	return /* @__PURE__ */ f("div", {
+		...he,
+		ref: Ce,
+		className: e("relative inline-flex flex-col", L),
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "relative flex items-center",
+				children: [/* @__PURE__ */ f("button", {
+					type: "button",
+					...V,
+					...X.getComboboxProps(),
+					"aria-expanded": Z,
+					"aria-errormessage": A,
+					"aria-details": j,
+					ref: we,
+					disabled: _,
+					autoFocus: S,
+					tabIndex: C,
+					onClick: () => G((e) => !e),
+					onKeyDown: n(P, Te),
+					onKeyUp: n(F, X.onKeyUp),
+					onFocus: M,
+					onBlur: N,
+					className: e("relative flex h-8 w-full items-center justify-between rounded border border-input border-b-stroke-accessible bg-background px-3 py-0 text-start text-body-1 text-foreground", ce($ ? 2 : 1), o, a, _e && "border-destructive focus:border-b-destructive"),
+					children: [/* @__PURE__ */ d("span", {
+						className: e("truncate", !Q && "text-muted-foreground"),
+						children: Q || pe
+					}), /* @__PURE__ */ d(ne, { className: e("absolute end-3 transition-transform motion-reduce:transition-none", Z && "rotate-180") })]
+				}), $ && /* @__PURE__ */ d("button", {
+					type: "button",
+					"aria-label": x?.clear ?? "Clear selection",
+					disabled: _,
+					onMouseDown: (e) => e.preventDefault(),
+					onClick: Ee,
+					className: e("absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground", "end-7", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100"),
+					children: /* @__PURE__ */ d(re, {})
+				})]
+			}),
+			/* @__PURE__ */ d(le, {
+				listbox: X,
+				layerId: ye,
+				surfaceRef: xe,
+				floatingProps: Se,
+				open: K,
+				expanded: Z,
+				"aria-label": V["aria-label"],
+				"aria-labelledby": De,
+				children: R
+			}),
+			/* @__PURE__ */ d(ae, {
+				name: me,
+				form: v,
+				disabled: _,
+				value: H,
+				type: "text",
+				required: ge,
+				onInvalid: () => Y.current?.focus()
+			})
+		]
+	});
+};
+p.displayName = "Dropdown";
+var m = c, h = l, g = /* @__PURE__ */ Object.assign(p, {
+	Option: c,
+	OptionGroup: l
+});
+//#endregion
+export { g as Dropdown, m as DropdownOption, h as DropdownOptionGroup };
+
+//# sourceMappingURL=Dropdown.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.mjs","names":["React","DropdownRoot","valueProp","openProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onOptionSelect","warnDeprecated","field","useFieldContext","isRequired","required","fieldProps","useFieldControl","invalidLook","isInvalidLook","value","setValue","useControllable","defaultValue","onValueChange","openState","setOpen","defaultOpen","disabled","onOpenChange","open","lockedOpen","rootRef","buttonRef","optionLabels","collectOptionLabels","children","listbox","useListbox","next","expanded","useListboxPopup","rootMergedRef","useMergedRefs","ref","buttonMergedRef","controlRef","setReference","form","displayText","handleKeyDown","event","handleClear","showClear","clearable","listLabelledBy","cn","className","current","composeEventHandlers","onKeyDown","onKeyUp","pickerEndPadding","inputFocus","disabledStyles","placeholder","ChevronDownIcon","labels","DismissIcon","ListboxSurface","HiddenInput","DropdownOption","Option","DropdownOptionGroup","OptionGroup","Dropdown"],"sources":["../../../src/components/input/Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated } from '../../lib/dev';\nimport { ChevronDownIcon, DismissIcon } from '../../lib/icons';\nimport { disabledStyles, focusRing, inputFocus, inputInvalid } from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { collectOptionLabels, useListbox } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { isInvalidLook } from './Input';\nimport { ListboxSurface, Option, OptionGroup, useListboxPopup } from './Option';\nimport { PICKER_ICON_BUTTON_CLASSES, pickerEndPadding } from './pickerStyles';\nimport type { RoutedHandlers } from './routedHandlers';\n\n/* ------------------------------------------------------------------ */\n/*  Dropdown                                                          */\n/* ------------------------------------------------------------------ */\n\n/**\n * The Dropdown's built-in texts, for localization. Each member is optional and falls back to its\n * English default.\n */\nexport interface DropdownLabels {\n  /** Name of the clear button (`clearable`).\n   * @default 'Clear selection'\n   */\n  clear?: string;\n}\n\n/** Properties for the Dropdown component. */\nexport interface DropdownProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | RoutedHandlers\n> {\n  /** Controlled selected value (`''` for none). */\n  value?: string;\n  /**\n   * Initial selected value for uncontrolled usage.\n   * @default ''\n   */\n  defaultValue?: string;\n  /** Called with the new value when a different option is selected. */\n  onValueChange?: (value: string) => void;\n  /**\n   * Called on every option activation, also when the current option is selected again.\n   * @deprecated Use `onValueChange`.\n   */\n  onOptionSelect?: (value: string) => void;\n  /**\n   * Controlled open state of the listbox. The list renders only in the browser: an open dropdown\n   * is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Initial open state for uncontrolled usage. A dropdown that starts disabled starts closed. The\n   * list renders only in the browser: it is closed in the server HTML and opens once the dropdown\n   * has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Called when the listbox opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Placeholder text shown when no value is selected. It is not an accessible name: label the\n   * Dropdown with a `Field`, `aria-label` or `aria-labelledby`.\n   * @default 'Select an option'\n   */\n  placeholder?: string;\n  /**\n   * Whether the dropdown is disabled and non-interactive. Turning it on while the listbox is open\n   * closes it (`onOpenChange(false)`).\n   * @default false\n   */\n  disabled?: boolean;\n  /** Name of the value in form submissions (renders a hidden input). */\n  name?: string;\n  /** Id of the form the value belongs to, when the Dropdown is outside it. */\n  form?: string;\n  /** A value is required to submit the form (native constraint validation). */\n  required?: boolean;\n  /**\n   * Shows a clear button while a value is selected (shown disabled while `disabled`). It clears\n   * the value, closes the list and moves focus to the combobox button. It is a tab stop after it.\n   * @default false\n   */\n  clearable?: boolean;\n  /** The name of the clear button, for localization. Unset members keep their English defaults. */\n  labels?: DropdownLabels;\n  /** Called when the `<button role=\"combobox\">` receives focus (the root keeps other handlers). */\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Called when the `<button role=\"combobox\">` loses focus. */\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n  /**\n   * Called on a key press on the `<button role=\"combobox\">`, before the built-in listbox keys;\n   * `event.preventDefault()` skips them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Called when a key is released on the `<button role=\"combobox\">`. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Ref to the `<button role=\"combobox\">` (the focusable element). */\n  controlRef?: React.Ref<HTMLButtonElement>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst DropdownRoot = (props: DropdownProps) => {\n  const {\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onOptionSelect,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    placeholder = 'Select an option',\n    disabled = false,\n    name,\n    form,\n    required,\n    clearable = false,\n    labels,\n    autoFocus,\n    tabIndex,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-errormessage': ariaErrorMessage,\n    'aria-details': ariaDetails,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    controlRef,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  if (onOptionSelect !== undefined) warnDeprecated('Dropdown', 'onOptionSelect', 'onValueChange');\n\n  const field = useFieldContext();\n  const isRequired = required ?? field?.required ?? false;\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required matches\n    // `isRequired`.\n    'aria-required': ariaRequired ?? required,\n  });\n  // The error look follows the resolved state: the consumer's `aria-invalid` or the Field's.\n  const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n\n  const [value, setValue] = useControllable(valueProp, defaultValue ?? '', onValueChange);\n  // A dropdown that starts disabled never shows its list, so it starts closed (no close to report\n  // later).\n  const [openState, setOpen] = useControllable(\n    openProp,\n    (defaultOpen ?? false) && !disabled,\n    onOpenChange,\n  );\n  const open = openState && !disabled;\n  // Disabling also closes the list itself, not only the derived `open`, so enabling it again does\n  // not reopen it without a user action. The close is reported through onOpenChange (a consumer\n  // callback from an effect, C-HOOKS); a controlled `open` that stays true is not shown meanwhile.\n  const lockedOpen = disabled && openState;\n  React.useEffect(() => {\n    if (lockedOpen) setOpen(false);\n  }, [lockedOpen, setOpen]);\n\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const buttonRef = React.useRef<HTMLButtonElement | null>(null);\n\n  const optionLabels = React.useMemo(() => collectOptionLabels(children), [children]);\n\n  const listbox = useListbox({\n    open,\n    onOpenChange: (next) => setOpen(next),\n    mode: 'select-only',\n    selectedValues: value ? [value] : [],\n    onSelect: (next) => {\n      setValue(next);\n      onOptionSelect?.(next);\n    },\n    idPrefix: 'dropdown-listbox',\n  });\n\n  const expanded = open && listbox.items.length > 0;\n  const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n    open,\n    surfaceOpen: expanded,\n    onDismiss: () => setOpen(false),\n    rootRef,\n    anchorRef: buttonRef,\n  });\n\n  const rootMergedRef = useMergedRefs<HTMLDivElement>(rootRef, ref);\n  const buttonMergedRef = useMergedRefs<HTMLButtonElement>(buttonRef, controlRef, setReference);\n\n  useFormReset(buttonRef, () => setValue(defaultValue ?? ''), form);\n\n  const displayText = value ? (listbox.getItem(value)?.label ?? optionLabels.get(value) ?? '') : '';\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Escape' && open && !expanded && !event.nativeEvent.isComposing) {\n      // Open with nothing shown (no options): close, but leave Escape to an enclosing layer\n      // (overlays#1) instead of consuming it for an invisible list.\n      setOpen(false);\n      return;\n    }\n    listbox.onKeyDown(event);\n  };\n\n  // The button disappears with the value, so focus moves to the combobox explicitly (C-DISABLED).\n  const handleClear = () => {\n    setValue('');\n    setOpen(false);\n    buttonRef.current?.focus();\n  };\n\n  const showClear = clearable && value !== '';\n\n  const listLabelledBy =\n    fieldProps['aria-label'] === undefined\n      ? (fieldProps['aria-labelledby'] ?? field?.labelId)\n      : fieldProps['aria-labelledby'];\n\n  return (\n    <div {...rest} ref={rootMergedRef} className={cn('relative inline-flex flex-col', className)}>\n      <div className=\"relative flex items-center\">\n        <button\n          type=\"button\"\n          {...fieldProps}\n          {...listbox.getComboboxProps()}\n          aria-expanded={expanded}\n          aria-errormessage={ariaErrorMessage}\n          aria-details={ariaDetails}\n          ref={buttonMergedRef}\n          disabled={disabled}\n          autoFocus={autoFocus}\n          tabIndex={tabIndex}\n          onClick={() => setOpen((current) => !current)}\n          onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n          onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          className={cn(\n            // Every padding is set here (C-NATIVE), not left to an app-wide `button` rule. The end\n            // padding keeps the text clear of the chevron (and of the clear button while it shows).\n            'relative flex h-8 w-full items-center justify-between rounded border border-input border-b-stroke-accessible bg-background px-3 py-0 text-start text-body-1 text-foreground',\n            pickerEndPadding(showClear ? 2 : 1),\n            inputFocus,\n            disabledStyles,\n            invalidLook && inputInvalid,\n          )}\n        >\n          <span className={cn('truncate', !displayText && 'text-muted-foreground')}>\n            {displayText || placeholder}\n          </span>\n          <ChevronDownIcon\n            className={cn(\n              'absolute end-3 transition-transform motion-reduce:transition-none',\n              expanded && 'rotate-180',\n            )}\n          />\n        </button>\n        {showClear && (\n          <button\n            type=\"button\"\n            aria-label={labels?.clear ?? 'Clear selection'}\n            disabled={disabled}\n            // Keeps focus on the combobox while the pointer clears it.\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={handleClear}\n            className={cn(PICKER_ICON_BUTTON_CLASSES, 'end-7', focusRing, disabledStyles)}\n          >\n            <DismissIcon />\n          </button>\n        )}\n      </div>\n      <ListboxSurface\n        listbox={listbox}\n        layerId={layerId}\n        surfaceRef={surfaceRef}\n        floatingProps={floatingProps}\n        open={open}\n        expanded={expanded}\n        aria-label={fieldProps['aria-label']}\n        aria-labelledby={listLabelledBy}\n      >\n        {children}\n      </ListboxSurface>\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={value}\n        type=\"text\"\n        required={isRequired}\n        onInvalid={() => buttonRef.current?.focus()}\n      />\n    </div>\n  );\n};\nDropdownRoot.displayName = 'Dropdown';\n\n/** Flat name of `Dropdown.Option` for React Server Components. */\nexport const DropdownOption = Option;\n/** Flat name of `Dropdown.OptionGroup` for React Server Components. */\nexport const DropdownOptionGroup = OptionGroup;\n\n/**\n * A select-only combobox (APG): a button that opens a listbox of `Option`s. Enter, Space,\n * ArrowDown/ArrowUp, Home/End and typing a character open it and move the highlight\n * (`aria-activedescendant`); Enter/Space select, Tab selects the highlighted option and moves on,\n * Escape closes. `clearable` adds a clear button, a tab stop after the combobox button; both sit\n * in a wrapper `<div>` inside the root.\n *\n * The `<button>` receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,\n * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`, `autoFocus`\n * and `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp`. `ref`, `className`, `style`, other `aria-*`\n * attributes and the remaining props stay on the root `<div>`. Inside a `Field` the button is\n * labelled and described by it — otherwise give it an `aria-label`. It shows the error look\n * whenever it ends up `aria-invalid` (its own `aria-invalid` or a `Field` error). With\n * `name`/`required` the value takes part in form submission, validation and reset. The open\n * listbox renders in a portal; while closed it stays in the DOM, hidden.\n *\n * Sub-components: `Dropdown.Option`, `Dropdown.OptionGroup`. React Server Components import the\n * flat names `DropdownOption` / `DropdownOptionGroup` (dotted access needs a client file).\n */\nexport const Dropdown = /* @__PURE__ */ Object.assign(DropdownRoot, {\n  Option,\n  OptionGroup,\n});\n"],"mappings":"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"}

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

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

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

package/dist/components/input/Field.mjs

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

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

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

package/dist/components/input/Input.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.cjs","names":["useFieldContext","useId","_jsx","cn","useFieldControl","joinIds","slotRendersContent","inputFocusWithin","renderSlot","inputFocus","_Fragment","require_runtime","require_cn","require_slot","require_useId","require_aria","require_useFieldControl","require_styles","react","react_jsx_runtime","isAriaValid","ariaInvalid","useControlErrorMessage","field","generatedId","invalid","consumerAriaInvalid","error","ownId","messageClassName","messageRest","errorMessageProps","messageId","isInvalidLook","ownError","Input","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaRequired","ariaErrorMessage","props","fieldProps","invalidLook","handleChange","onChange","onValueChange","event","controlProps","hasBefore","contentBefore","hasAfter","contentAfter","control","inputProps","className","message"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { 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":"gWAsCA,SAASoB,EAAY,EAA4D,CAC/E,OAAOC,IAAgB,IAASA,IAAgB,OAClD,CAYA,SAAgBC,EACd,EACA,EACA,EACqB,CACrB,IAAMC,EAAQvB,EAAAA,gBAAgB,EACxBwB,EAAcvB,EAAAA,MAAM,OAAO,EAC3BwB,EACJ,CAACL,EAAYM,CAAmB,IAC/BC,IAAU,IAAS,OAAOA,GAAU,UAAYA,IAAU,IAE7D,GADoB,IAAW,OAAOA,GAAU,UAAaJ,GAAO,gBAClD,MAAO,CAAE,UAAS,UAAW,IAAA,GAAW,QAAS,IAAK,EAExE,GAAM,CAAE,GAAIK,EAAO,UAAWC,EAAkB,GAAGC,GAAgBC,GAAqB,CAAC,EACnFC,EAAYJ,GAASJ,EAW3B,MAAO,CAAE,UAAS,YAAW,SAAA,EAT3BtB,EAAAA,IAAAA,CAAC,OAAD,CACE,KAAK,QACL,GAAI4B,EACJ,GAAIE,EACJ,UAAW7B,EAAAA,GAAG,uCAAwC0B,CAAgB,EAErE,SAAAF,CACG,CAEqB,CAAQ,CACvC,CAYA,SAAgBM,EACd,EACA,EACS,CAET,OADIb,EAAYC,CAAW,EAAU,GAC9Ba,GAAYb,IAAgB,IAAQA,IAAgB,MAC7D,CAqDA,IAAac,GAAS,CACpB,QACA,oBACA,gBACA,eACA,WACA,gBACA,YACA,MACA,KACA,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBjB,EAChB,gBAAiBkB,EACjB,oBAAqBC,EACrB,WACA,GAAGC,KACa,CAChB,GAAM,CAAE,UAAS,YAAW,WAAYnB,EACtCK,EACAI,EACAV,CACF,EACMqB,EAAatC,EAAAA,gBACjB,CACE,KACA,aAAcgC,EACd,kBAAmBC,EACnB,mBAAoBhC,EAAAA,QAAQiC,EAAiBN,CAAS,EACtD,eAAgBX,IAAgBI,GAAW,IAAA,IAC3C,gBAAiBc,EACjB,UACF,EACA,CAAE,eAAgB,EAAK,CACzB,EACMI,EAAcV,EAAcR,EAASiB,EAAW,eAAe,EAE/DE,EACJC,GAAYC,EACP,GAA+C,CAC9CD,IAAWE,CAAK,EAChBD,IAAgBC,EAAM,cAAc,KAAK,CAC3C,EACA,IAAA,GAEAC,EAAe,CACnB,GAAGP,EACH,GAAGC,EACH,oBAAqBrC,EAAAA,QAAQmC,EAAkBR,CAAS,EACxD,SAAUY,CACZ,EAEMK,EAAY3C,EAAAA,mBAAmB4C,CAAa,EAC5CC,EAAW7C,EAAAA,mBAAmB8C,CAAY,EAE5CC,EACJ,GAAIJ,GAAaE,EAAU,CAGzB,GAAM,CAAE,QAAO,SAAQ,GAAGG,GAAeN,EACzC,GACE,EAAA7B,EAAA,KAAA,CAAC,OAAD,CACU,SACD,QACP,UAAWhB,EAAAA,GACT,uIACAI,EAAAA,iBACAoC,GAAA,uDAGAF,EAAM,UAAY,8DAClBc,CACF,EAXF,SAAA,CAaGN,GAAazC,EAAAA,WAAW0C,EAAe,OAAQ,eAAe,GAC/D,EAAA/B,EAAA,IAAA,CAAC,QAAD,CACO,MACL,UAAWhB,EAAAA,GACT,wEACA,oCACA,uBACA,6BACF,EACA,GAAImD,CACL,CAAA,EACAH,GAAY3C,EAAAA,WAAW4C,EAAc,OAAQ,eAAe,CACzD,GAEV,KACE,IACE,EAAAjC,EAAA,IAAA,CAAC,QAAD,CACO,MACL,UAAWhB,EAAAA,GACT,mHACA,oCACAM,EAAAA,WACA,kDACAkC,GAAA,gDACAY,CACF,EACA,GAAIP,CACL,CAAA,EAKL,OADKQ,GAEH,EAAArC,EAAA,KAAA,CAAAT,EAAAA,SAAA,CAAA,SAAA,CACG2C,EACAG,CACD,CAAA,CAAA,EALiBH,CAOvB,EAEA,EAAM,YAAc"}