@mortenbrudvik/waveui 0.8.0 → 0.10.0

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","names":["useFieldContext","useId","_jsx","cn","inputClassNames","useFieldControl","joinIds","slotRendersContent","inputFocusWithin","renderSlot","inputFocus","_Fragment","require_runtime","require_cn","require_slot","require_classNames","require_useId","require_aria","require_useFieldControl","require_styles","react","react_jsx_runtime","isAriaValid","ariaInvalid","useControlErrorMessage","field","generatedId","invalid","consumerAriaInvalid","error","ownId","messageClassName","messageRest","errorMessageProps","messageId","partClassName","isInvalidLook","ownError","Input","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaRequired","ariaErrorMessage","props","fieldProps","invalidLook","handleChange","onChange","onValueChange","event","controlProps","hasBefore","contentBefore","hasAfter","contentAfter","control","inputProps","className","message"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { inputClassNames } from '../../lib/classNames';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport { inputFocus, inputFocusWithin, inputInvalid, inputInvalidWithin } from '../../lib/styles';\nimport type { Slot } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\n\n/**\n * Props of the error message element that {@link Input}, `Select` and `Textarea` render after the\n * control for a string `error` (`id`, `className`, `role`, data attributes, …).\n */\nexport interface InputErrorMessageProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Ref to the message `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n  /** Any `data-*` attribute. */\n  [dataAttribute: `data-${string}`]: unknown;\n}\n\n/**\n * Result of {@link useControlErrorMessage}.\n *\n * @internal Not exported from the package.\n */\nexport interface ControlErrorMessage {\n  /**\n   * Whether `error` marks the control invalid (a non-empty string or `true`), unless the consumer\n   * set `aria-invalid` to `false`/`\"false\"`.\n   */\n  invalid: boolean;\n  /** The id of the rendered message, joined into `aria-describedby`/`aria-errormessage`. */\n  messageId: string | undefined;\n  /** The message element to render after the control, or `null`. */\n  message: React.ReactElement | null;\n}\n\n/** Whether an `aria-invalid` value explicitly reports the control as valid. */\nfunction isAriaValid(ariaInvalid: React.AriaAttributes['aria-invalid']): boolean {\n  return ariaInvalid === false || ariaInvalid === 'false';\n}\n\n/**\n * Shared by Input, Select and Textarea (internal): a non-empty string `error` renders a sibling\n * `<span role=\"alert\">` message, unless the surrounding `Field` already renders its own error\n * (`FieldContext.hasErrorMessage`); `true` only marks the control invalid. The consumer's\n * `aria-invalid` of `false`/`\"false\"` wins over `error`: the control is valid, so nothing is\n * marked invalid and no message is rendered or referenced (ARIA: an error message of a valid\n * control is hidden).\n *\n * `partClassName` is the host's stable `errorMessage` class, first in the message's classes\n * (Input, Select and Textarea each pass their own).\n *\n * @internal Not exported from the package.\n */\nexport function useControlErrorMessage(\n  error: string | boolean | undefined,\n  errorMessageProps: InputErrorMessageProps | undefined,\n  consumerAriaInvalid?: React.AriaAttributes['aria-invalid'],\n  partClassName?: string,\n): ControlErrorMessage {\n  const field = useFieldContext();\n  const generatedId = useId('error');\n  const invalid =\n    !isAriaValid(consumerAriaInvalid) &&\n    (error === true || (typeof error === 'string' && error !== ''));\n  const showMessage = invalid && typeof error === 'string' && !field?.hasErrorMessage;\n  if (!showMessage) return { invalid, messageId: undefined, message: null };\n\n  const { id: ownId, className: messageClassName, ...messageRest } = errorMessageProps ?? {};\n  const messageId = ownId ?? generatedId;\n  const message = (\n    <span\n      role=\"alert\"\n      {...messageRest}\n      id={messageId}\n      className={cn(partClassName, 'mt-1 block text-caption-1 text-error', messageClassName)}\n    >\n      {error}\n    </span>\n  );\n  return { invalid, messageId, message };\n}\n\n/**\n * Whether a text control shows the invalid look (error border), shared by Input, Select, Textarea\n * and SearchBox (internal): its own `error`, or a resolved `aria-invalid` of `true`/`\"true\"` —\n * from the consumer or from the surrounding `Field` (`useFieldControl`) — so the look always\n * matches the state assistive technology reports. A resolved `false`/`\"false\"` (the consumer's\n * override) never shows it, even with an own `error`. `\"grammar\"`/`\"spelling\"` alone do not\n * count; with an own `error` they keep the look (the control is reported invalid).\n *\n * @internal Not exported from the package.\n */\nexport function isInvalidLook(\n  ownError: boolean,\n  ariaInvalid: React.AriaAttributes['aria-invalid'],\n): boolean {\n  if (isAriaValid(ariaInvalid)) return false;\n  return ownError || ariaInvalid === true || ariaInvalid === 'true';\n}\n\n/** Properties for the Input component. */\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Validation error.\n   * - A non-empty string renders the message in a `role=\"alert\"` element **after** the field (a\n   *   sibling, so it does not change which element receives `ref`, `className` or `style`) and\n   *   links it through `aria-describedby` and `aria-errormessage`. Inside a `Field` that renders\n   *   its own `error`, the message is not repeated.\n   * - `true` only marks the input invalid (`aria-invalid` and the error border), as in 0.4.\n   *\n   * The error border also shows whenever the input ends up `aria-invalid=\"true\"` without this\n   * prop (an `error` on the surrounding `Field`, or your own `aria-invalid`).\n   * Your own `aria-invalid={false}` (or `\"false\"`) wins over this prop: the input is reported\n   * valid and shows neither the error border nor the message.\n   * Use `Field` (`label`, `hint`, `error`) for a complete field layout.\n   */\n  error?: string | boolean;\n  /** Props of the error message element (`id`, `className`, …) rendered for a string `error`. */\n  errorMessageProps?: InputErrorMessageProps;\n  /**\n   * Slot rendered before the input text (e.g., an icon). With content in either slot, a bordered\n   * `<span>` around the input draws the field: it receives `className`, `style` and `hidden`,\n   * while `ref`, `id`, `aria-*`, `data-*`, handlers and native attributes stay on the `<input>`.\n   * A value that renders nothing (`false`, `''`, `[]`) is no slot.\n   */\n  contentBefore?: Slot<'span'>;\n  /** Slot rendered after the input text (e.g., a suffix). Same wrapper as `contentBefore`. */\n  contentAfter?: Slot<'span'>;\n  /**\n   * Called with the new string value on every change, next to the native `onChange` event\n   * handler (`onValueChange={setName}` instead of `onChange={(e) => setName(e.target.value)}`).\n   */\n  onValueChange?: (value: string) => void;\n  /** Ref to the `<input>` element (also with `contentBefore`/`contentAfter`). */\n  ref?: React.Ref<HTMLInputElement>;\n}\n\n/**\n * A single-line text input with Fluent styling: a 1px border with an accessible bottom stroke, a\n * primary bottom border while focused, optional `contentBefore`/`contentAfter` slots and an\n * optional error message. Inside a `Field` it picks up the label, hint, error, `required` (native\n * attribute) and invalid state automatically.\n *\n * Every prop reaches the `<input>`, except with slot content: then a bordered `<span>` wrapper\n * draws the field and receives `className`, `style` and `hidden` (`ref` stays on the input).\n *\n * @example\n * <Field label=\"Email\" hint=\"We never share it\" required>\n *   <Input type=\"email\" value={email} onValueChange={setEmail} />\n * </Field>\n */\nexport const Input = ({\n  error,\n  errorMessageProps,\n  contentBefore,\n  contentAfter,\n  onChange,\n  onValueChange,\n  className,\n  ref,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-errormessage': ariaErrorMessage,\n  required,\n  ...props\n}: InputProps) => {\n  const { invalid, messageId, message } = useControlErrorMessage(\n    error,\n    errorMessageProps,\n    ariaInvalid,\n    inputClassNames.errorMessage,\n  );\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': joinIds(ariaDescribedBy, messageId),\n      'aria-invalid': ariaInvalid ?? (invalid || undefined),\n      'aria-required': ariaRequired,\n      required,\n    },\n    { nativeRequired: true },\n  );\n  const invalidLook = isInvalidLook(invalid, fieldProps['aria-invalid']);\n\n  const handleChange =\n    onChange || onValueChange\n      ? (event: React.ChangeEvent<HTMLInputElement>) => {\n          onChange?.(event);\n          onValueChange?.(event.currentTarget.value);\n        }\n      : undefined;\n\n  const controlProps = {\n    ...props,\n    ...fieldProps,\n    'aria-errormessage': joinIds(ariaErrorMessage, messageId),\n    onChange: handleChange,\n  };\n\n  const hasBefore = slotRendersContent(contentBefore);\n  const hasAfter = slotRendersContent(contentAfter);\n\n  let control: React.ReactElement;\n  if (hasBefore || hasAfter) {\n    // The bordered wrapper is the visible field: `className`, `style` and `hidden` size, style and\n    // hide it; `ref`, `id`, `aria-*`, `data-*`, handlers and native attributes go to the input.\n    const { style, hidden, ...inputProps } = controlProps;\n    control = (\n      <span\n        hidden={hidden}\n        style={style}\n        className={cn(\n          inputClassNames.root,\n          'inline-flex h-8 w-full items-center rounded border border-input border-b-stroke-accessible bg-background text-body-1 text-foreground',\n          inputFocusWithin,\n          invalidLook && inputInvalidWithin,\n          // The dimmed look lifts while a focus ring shows inside the wrapper (focusable slot\n          // content; the disabled input never takes focus): opacity would dim the ring below 3:1.\n          props.disabled && 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100',\n          className,\n        )}\n      >\n        {hasBefore &&\n          renderSlot(contentBefore, 'span', cn(inputClassNames.contentBefore, 'shrink-0 ps-2'))}\n        <input\n          ref={ref}\n          className={cn(\n            inputClassNames.input,\n            'h-full w-full min-w-0 bg-transparent px-2 text-body-1 text-foreground',\n            'placeholder:text-muted-foreground',\n            'focus:outline-hidden',\n            'disabled:cursor-not-allowed',\n          )}\n          {...inputProps}\n        />\n        {hasAfter &&\n          renderSlot(contentAfter, 'span', cn(inputClassNames.contentAfter, 'shrink-0 pe-2'))}\n      </span>\n    );\n  } else {\n    control = (\n      <input\n        ref={ref}\n        className={cn(\n          inputClassNames.root,\n          inputClassNames.input,\n          'h-8 w-full rounded border border-input border-b-stroke-accessible bg-background px-3 text-body-1 text-foreground',\n          'placeholder:text-muted-foreground',\n          inputFocus,\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          invalidLook && inputInvalid,\n          className,\n        )}\n        {...controlProps}\n      />\n    );\n  }\n\n  if (!message) return control;\n  return (\n    <>\n      {control}\n      {message}\n    </>\n  );\n};\n\nInput.displayName = 'Input';\n"],"mappings":"sYAuCA,SAASsB,EAAY,EAA4D,CAC/E,OAAOC,IAAgB,IAASA,IAAgB,OAClD,CAeA,SAAgBC,EACd,EACA,EACA,EACA,EACqB,CACrB,IAAMC,EAAQzB,EAAAA,gBAAgB,EACxB0B,EAAczB,EAAAA,MAAM,OAAO,EAC3B0B,EACJ,CAACL,EAAYM,CAAmB,IAC/BC,IAAU,IAAS,OAAOA,GAAU,UAAYA,IAAU,IAE7D,GADoB,IAAW,OAAOA,GAAU,UAAaJ,GAAO,gBAClD,MAAO,CAAE,UAAS,UAAW,IAAA,GAAW,QAAS,IAAK,EAExE,GAAM,CAAE,GAAIK,EAAO,UAAWC,EAAkB,GAAGC,GAAgBC,GAAqB,CAAC,EACnFC,EAAYJ,GAASJ,EAW3B,MAAO,CAAE,UAAS,YAAW,SAAA,EAT3BxB,EAAAA,IAAAA,CAAC,OAAD,CACE,KAAK,QACL,GAAI8B,EACJ,GAAIE,EACJ,UAAW/B,EAAAA,GAAGgC,EAAe,uCAAwCJ,CAAgB,EAEpF,SAAAF,CACG,CAEqB,CAAQ,CACvC,CAYA,SAAgBO,EACd,EACA,EACS,CAET,OADId,EAAYC,CAAW,EAAU,GAC9Bc,GAAYd,IAAgB,IAAQA,IAAgB,MAC7D,CAqDA,IAAae,GAAS,CACpB,QACA,oBACA,gBACA,eACA,WACA,gBACA,YACA,MACA,KACA,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBlB,EAChB,gBAAiBmB,EACjB,oBAAqBC,EACrB,WACA,GAAGC,KACa,CAChB,GAAM,CAAE,UAAS,YAAW,WAAYpB,EACtCK,EACAI,EACAV,EACAnB,EAAAA,gBAAgB,YAClB,EACMyC,EAAaxC,EAAAA,gBACjB,CACE,KACA,aAAckC,EACd,kBAAmBC,EACnB,mBAAoBlC,EAAAA,QAAQmC,EAAiBP,CAAS,EACtD,eAAgBX,IAAgBI,GAAW,IAAA,IAC3C,gBAAiBe,EACjB,UACF,EACA,CAAE,eAAgB,EAAK,CACzB,EACMI,EAAcV,EAAcT,EAASkB,EAAW,eAAe,EAE/DE,EACJC,GAAYC,EACP,GAA+C,CAC9CD,IAAWE,CAAK,EAChBD,IAAgBC,EAAM,cAAc,KAAK,CAC3C,EACA,IAAA,GAEAC,EAAe,CACnB,GAAGP,EACH,GAAGC,EACH,oBAAqBvC,EAAAA,QAAQqC,EAAkBT,CAAS,EACxD,SAAUa,CACZ,EAEMK,EAAY7C,EAAAA,mBAAmB8C,CAAa,EAC5CC,EAAW/C,EAAAA,mBAAmBgD,CAAY,EAE5CC,EACJ,GAAIJ,GAAaE,EAAU,CAGzB,GAAM,CAAE,QAAO,SAAQ,GAAGG,GAAeN,EACzC,GACE,EAAA9B,EAAA,KAAA,CAAC,OAAD,CACU,SACD,QACP,UAAWlB,EAAAA,GACTC,EAAAA,gBAAgB,KAChB,uIACAI,EAAAA,iBACAsC,GAAA,uDAGAF,EAAM,UAAY,8DAClBc,CACF,EAZF,SAAA,CAcGN,GACC3C,EAAAA,WAAW4C,EAAe,OAAQlD,EAAAA,GAAGC,EAAAA,gBAAgB,cAAe,eAAe,CAAC,GACtF,EAAAiB,EAAA,IAAA,CAAC,QAAD,CACO,MACL,UAAWlB,EAAAA,GACTC,EAAAA,gBAAgB,MAChB,wEACA,oCACA,uBACA,6BACF,EACA,GAAIqD,CACL,CAAA,EACAH,GACC7C,EAAAA,WAAW8C,EAAc,OAAQpD,EAAAA,GAAGC,EAAAA,gBAAgB,aAAc,eAAe,CAAC,CAChF,GAEV,KACE,IACE,EAAAiB,EAAA,IAAA,CAAC,QAAD,CACO,MACL,UAAWlB,EAAAA,GACTC,EAAAA,gBAAgB,KAChBA,EAAAA,gBAAgB,MAChB,mHACA,oCACAM,EAAAA,WACA,kDACAoC,GAAA,gDACAY,CACF,EACA,GAAIP,CACL,CAAA,EAKL,OADKQ,GAEH,EAAAtC,EAAA,KAAA,CAAAV,EAAAA,SAAA,CAAA,SAAA,CACG6C,EACAG,CACD,CAAA,CAAA,EALiBH,CAOvB,EAEA,EAAM,YAAc"}
+{"version":3,"file":"Input.cjs","names":["useFieldContext","useId","_jsx","cn","inputClassNames","useFieldControl","joinIds","legacyNativeSize","resolveDeprecatedProp","useInputLook","slotRendersContent","inputHeightClasses","inputTextClasses","inputAppearanceClasses","inputFocusWithin","renderSlot","inputPaddingClasses","inputFocus","_Fragment","require_runtime","require_cn","require_dev","require_slot","require_classNames","require_useId","require_aria","require_useFieldControl","require_styles","require_inputLook","react","react_jsx_runtime","isAriaValid","ariaInvalid","useControlErrorMessage","field","generatedId","invalid","consumerAriaInvalid","error","ownId","messageClassName","messageRest","errorMessageProps","messageId","partClassName","isInvalidLook","ownError","SLOT_PADDING","Input","sizeProp","appearanceProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaRequired","ariaErrorMessage","props","fieldProps","invalidLook","numericSize","nativeSize","htmlSize","handleChange","onChange","onValueChange","event","controlProps","hasBefore","contentBefore","hasAfter","contentAfter","control","inputProps","size","appearance","className","message"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { inputClassNames } from '../../lib/classNames';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport {\n  inputAppearanceClasses,\n  inputFocus,\n  inputFocusWithin,\n  inputHeightClasses,\n  inputInvalid,\n  inputInvalidWithin,\n  inputPaddingClasses,\n  inputTextClasses,\n} from '../../lib/styles';\nimport type { CoreSize, InputAppearance, Slot } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { legacyNativeSize, useInputLook } from './inputLook';\n\n/**\n * Props of the error message element that {@link Input}, `Select` and `Textarea` render after the\n * control for a string `error` (`id`, `className`, `role`, data attributes, …).\n */\nexport interface InputErrorMessageProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Ref to the message `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n  /** Any `data-*` attribute. */\n  [dataAttribute: `data-${string}`]: unknown;\n}\n\n/**\n * Result of {@link useControlErrorMessage}.\n *\n * @internal Not exported from the package.\n */\nexport interface ControlErrorMessage {\n  /**\n   * Whether `error` marks the control invalid (a non-empty string or `true`), unless the consumer\n   * set `aria-invalid` to `false`/`\"false\"`.\n   */\n  invalid: boolean;\n  /** The id of the rendered message, joined into `aria-describedby`/`aria-errormessage`. */\n  messageId: string | undefined;\n  /** The message element to render after the control, or `null`. */\n  message: React.ReactElement | null;\n}\n\n/** Whether an `aria-invalid` value explicitly reports the control as valid. */\nfunction isAriaValid(ariaInvalid: React.AriaAttributes['aria-invalid']): boolean {\n  return ariaInvalid === false || ariaInvalid === 'false';\n}\n\n/**\n * Shared by Input, Select and Textarea (internal): a non-empty string `error` renders a sibling\n * `<span role=\"alert\">` message, unless the surrounding `Field` already renders its own error\n * (`FieldContext.hasErrorMessage`); `true` only marks the control invalid. The consumer's\n * `aria-invalid` of `false`/`\"false\"` wins over `error`: the control is valid, so nothing is\n * marked invalid and no message is rendered or referenced (ARIA: an error message of a valid\n * control is hidden).\n *\n * `partClassName` is the host's stable `errorMessage` class, first in the message's classes\n * (Input, Select and Textarea each pass their own).\n *\n * @internal Not exported from the package.\n */\nexport function useControlErrorMessage(\n  error: string | boolean | undefined,\n  errorMessageProps: InputErrorMessageProps | undefined,\n  consumerAriaInvalid?: React.AriaAttributes['aria-invalid'],\n  partClassName?: string,\n): ControlErrorMessage {\n  const field = useFieldContext();\n  const generatedId = useId('error');\n  const invalid =\n    !isAriaValid(consumerAriaInvalid) &&\n    (error === true || (typeof error === 'string' && error !== ''));\n  const showMessage = invalid && typeof error === 'string' && !field?.hasErrorMessage;\n  if (!showMessage) return { invalid, messageId: undefined, message: null };\n\n  const { id: ownId, className: messageClassName, ...messageRest } = errorMessageProps ?? {};\n  const messageId = ownId ?? generatedId;\n  const message = (\n    <span\n      role=\"alert\"\n      {...messageRest}\n      id={messageId}\n      className={cn(partClassName, 'mt-1 block text-caption-1 text-error', messageClassName)}\n    >\n      {error}\n    </span>\n  );\n  return { invalid, messageId, message };\n}\n\n/**\n * Whether a text control shows the invalid look (error border), shared by Input, Select, Textarea\n * and SearchBox (internal): its own `error`, or a resolved `aria-invalid` of `true`/`\"true\"` —\n * from the consumer or from the surrounding `Field` (`useFieldControl`) — so the look always\n * matches the state assistive technology reports. A resolved `false`/`\"false\"` (the consumer's\n * override) never shows it, even with an own `error`. `\"grammar\"`/`\"spelling\"` alone do not\n * count; with an own `error` they keep the look (the control is reported invalid).\n *\n * @internal Not exported from the package.\n */\nexport function isInvalidLook(\n  ownError: boolean,\n  ariaInvalid: React.AriaAttributes['aria-invalid'],\n): boolean {\n  if (isAriaValid(ariaInvalid)) return false;\n  return ownError || ariaInvalid === true || ariaInvalid === 'true';\n}\n\n/** Padding of the slot spans and the inner input of the slot wrapper, per size. */\nconst SLOT_PADDING: Readonly<Record<CoreSize, { before: string; after: string; input: string }>> = {\n  small: { before: 'ps-1.5', after: 'pe-1.5', input: 'px-1.5' },\n  medium: { before: 'ps-2', after: 'pe-2', input: 'px-2' },\n  large: { before: 'ps-3', after: 'pe-3', input: 'px-3' },\n};\n\n/** Properties for the Input component. */\nexport interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {\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   * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the\n   * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`.\n   *\n   * A number is the native `size` attribute (the visible width in characters), as in 0.8: it\n   * still renders, warns once in development and is removed in 1.0. Use `htmlSize` for it.\n   * A string of digits only (`size=\"20\"` from untyped code) counts as that number. Any other value\n   * outside the three sizes renders as if `size` were not set.\n   */\n  size?: CoreSize | number;\n  /** The native `size` attribute: the visible width of the field in characters. */\n  htmlSize?: number;\n  /**\n   * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),\n   * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible\n   * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.\n   */\n  appearance?: InputAppearance;\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 * `size` resolves from its own prop, then the surrounding `Field`'s `size`, then\n * `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own prop, then\n * `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as `data-size` and\n * `data-appearance` on the element that draws the field (the `<input>`, or the wrapper with slot\n * content).\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  size: sizeProp,\n  htmlSize,\n  appearance: appearanceProp,\n  contentBefore,\n  contentAfter,\n  onChange,\n  onValueChange,\n  className,\n  ref,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-errormessage': ariaErrorMessage,\n  required,\n  ...props\n}: InputProps) => {\n  const { invalid, messageId, message } = useControlErrorMessage(\n    error,\n    errorMessageProps,\n    ariaInvalid,\n    inputClassNames.errorMessage,\n  );\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': joinIds(ariaDescribedBy, messageId),\n      'aria-invalid': ariaInvalid ?? (invalid || undefined),\n      'aria-required': ariaRequired,\n      required,\n    },\n    { nativeRequired: true },\n  );\n  const invalidLook = isInvalidLook(invalid, fieldProps['aria-invalid']);\n  const numericSize = legacyNativeSize(sizeProp);\n  const nativeSize = resolveDeprecatedProp(\n    'Input',\n    htmlSize,\n    numericSize,\n    'size={number}',\n    'htmlSize',\n  );\n  const { size, appearance } = useInputLook(\n    numericSize === undefined && typeof sizeProp !== 'number' ? sizeProp : undefined,\n    appearanceProp,\n  );\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        data-size={size}\n        data-appearance={appearance}\n        className={cn(\n          inputClassNames.root,\n          'inline-flex w-full items-center',\n          inputHeightClasses[size],\n          inputTextClasses[size],\n          inputAppearanceClasses[appearance],\n          'text-foreground',\n          inputFocusWithin,\n          invalidLook && inputInvalidWithin,\n          // The dimmed look lifts while a focus ring shows inside the wrapper (focusable slot\n          // content; the disabled input never takes focus): opacity would dim the ring below 3:1.\n          props.disabled && 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100',\n          className,\n        )}\n      >\n        {hasBefore &&\n          renderSlot(\n            contentBefore,\n            'span',\n            cn(inputClassNames.contentBefore, 'shrink-0', SLOT_PADDING[size].before),\n          )}\n        <input\n          ref={ref}\n          className={cn(\n            inputClassNames.input,\n            'h-full w-full min-w-0 bg-transparent',\n            SLOT_PADDING[size].input,\n            inputTextClasses[size],\n            'text-foreground',\n            'placeholder:text-muted-foreground',\n            'focus:outline-hidden',\n            'disabled:cursor-not-allowed',\n          )}\n          {...inputProps}\n          size={nativeSize}\n        />\n        {hasAfter &&\n          renderSlot(\n            contentAfter,\n            'span',\n            cn(inputClassNames.contentAfter, 'shrink-0', SLOT_PADDING[size].after),\n          )}\n      </span>\n    );\n  } else {\n    control = (\n      <input\n        ref={ref}\n        data-size={size}\n        data-appearance={appearance}\n        className={cn(\n          inputClassNames.root,\n          inputClassNames.input,\n          inputHeightClasses[size],\n          'w-full',\n          inputPaddingClasses[size],\n          inputTextClasses[size],\n          inputAppearanceClasses[appearance],\n          'text-foreground placeholder:text-muted-foreground',\n          inputFocus,\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          invalidLook && inputInvalid,\n          className,\n        )}\n        {...controlProps}\n        size={nativeSize}\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":"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"}

package/dist/components/input/Input.mjs

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

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

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

package/dist/components/input/Label.cjs

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

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

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