@eifi1/ui-kit 0.34.0 → 0.36.0

package/dist/components/country-select.js

@@ -55,6 +55,7 @@ function CountrySelect({
   flags = false,
   label,
   hint,
+  help,
   error,
   invalid,
   placeholder,
@@ -135,6 +136,8 @@ function CountrySelect({
   const listboxId = `${generated}-listbox`;
   const field = useFieldMessages({
     hint,
+    help,
+    name: label ?? ariaLabel,
     error,
     invalid,
     describedBy: ariaDescribedBy,

package/dist/components/country-select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/country-select.tsx"],"sourcesContent":["import { useCallback, useId, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { COUNTRY_CODES, countryName, normalizeCountryCode } from \"../lib/countries\";\nimport { rankMatch } from \"../lib/text-match\";\nimport {\n  FieldChevron,\n  FIELD_FLOATING_PAD,\n  FIELD_INVALID,\n  FIELD_TRIGGER,\n  FloatingField,\n} from \"./field-base\";\nimport {\n  assignRef,\n  EndHintRow,\n  LockedReason,\n  mergeDescribedBy,\n  useFieldMessages,\n  useLockReason,\n  type DisabledReasonDisplay,\n} from \"./field-parts\";\nimport { CurrencyFlag } from \"./currency-select\";\nimport { ComboboxPanel, useComboboxCore, type ComboOption } from \"./combobox-core\";\nimport type { CommitScope } from \"./write-lock\";\nimport {\n  DEFAULT_COMBOBOX_LABELS,\n  DEFAULT_COMMON_LABELS,\n  useKitLabels,\n  useKitLocale,\n  type LabelOverride,\n} from \"../i18n/kit-labels\";\nimport { DEFAULT_COUNTRY_SELECT_LABELS } from \"./country-select-labels\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The words {@link CountrySelect} renders on its own behalf. The list's \"no results\",\n *  \"loading\" and result-count announcements are the shared `combobox` namespace's,\n *  as on every other searchable picker. */\nexport interface CountrySelectLabels {\n  /** What the field is, when the caller gives no `label`: the first half of the\n   *  trigger's accessible name, the phone sheet's title, and the empty trigger's\n   *  text. */\n  country: string;\n  /** The search box in the open list. */\n  search: string;\n  /** The heading between the `preferred` countries and all the others. Shown only\n   *  when `preferred` puts something above it. */\n  others: string;\n}\n\n// Defined in ./country-select-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_COUNTRY_SELECT_LABELS };\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\n/**\n * `onChange` is the kit's — \"a country was picked\", carrying its code — rather than\n * the div's form event. `id` and the `aria-*` wiring below go to the TRIGGER, which is\n * the control a reader meets; everything else in `rest` dresses the wrapper.\n *\n * `Clearable` follows `clearable`, the way {@link EntityCombobox}'s `C` follows its\n * `clearValue`: it is inferred from the prop, so `onChange` is `(code: string) => void`\n * for the field as it always was (`onChange={setCountry}` over a `string` state still\n * type-checks), and `(code: string | null) => void` once `clearable` is set — the\n * `null` of a clear cannot reach a handler that was never told about it.\n */\nexport interface CountrySelectProps<Clearable extends boolean = false>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"defaultValue\"> {\n  /** The chosen country as an ISO 3166-1 alpha-2 code (\"CH\"), in either case;\n   *  `null`, `undefined` or `\"\"` when none is. A code outside the list still shows\n   *  its name — the list restricts what can be PICKED, not what can be shown. */\n  value: string | null | undefined;\n  /** A country was picked: its alpha-2 code, always upper-case. With `clearable`,\n   *  also `null`: the \"×\" (or Delete on the trigger) emptied the field. */\n  onChange: (code: Clearable extends true ? string | null : string) => void;\n  /**\n   * Offer a clear \"×\" in place of the chevron while a country is chosen; it hands\n   * `onChange` `null` (the kit's later list: an optional country — a contact's\n   * nationality, a bank filter's \"any country\" — could be set but never unset again).\n   *\n   * The combobox family's clear, as {@link EntityCombobox} draws it: a pointer\n   * shortcut inside the trigger, out of the tab order so it is not a second stop\n   * between this field and the next, named by `clearLabel` (default: the\n   * `combobox.clear` label every picker in the family shares). The keyboard way is\n   * Delete or Backspace on the closed trigger. Not offered while `disabled` or locked\n   * (`commit` / `disabledReason`): a clear is a change like any other.\n   */\n  clearable?: Clearable;\n  /** The clear \"×\"'s accessible name. Wins over `combobox.clear` from the\n   *  {@link UiKitProvider}, as {@link EntityCombobox}'s `clearLabel` does. */\n  clearLabel?: string;\n  /**\n   * The TRIGGER — the focusable `<button>` a reader meets — as a React 19 ref prop,\n   * the way {@link MoneyField} takes its input's (kastlan: react-hook-form's\n   * focus-on-error calls `focus()` on whatever `field.ref` was handed, and without a\n   * ref the first field in error on an address form was never focused). See\n   * `RhfCountrySelect`, which passes it.\n   */\n  ref?: Ref<HTMLButtonElement>;\n  /**\n   * Offer only these codes (any case; duplicates and malformed entries dropped).\n   * Default: every ISO 3166-1 country, {@link COUNTRY_CODES}. Sorted by name either\n   * way — the order given is not kept, because the reader looks a country up by its\n   * name in their own language, and any other order is one they cannot predict.\n   *\n   * keksdose's bank picker offers the fifteen countries its banks are in\n   * (DE AT CH FR IT ES NL BE PT PL SE DK FI GB IE). A code that is not in ISO's list\n   * is allowed here on purpose: `XK` (Kosovo) is the app's decision, not the kit's.\n   */\n  countries?: readonly string[];\n  /**\n   * A short group shown FIRST, in the order given, above the alphabetical rest —\n   * kastlan's CH, LI, DE, AT, FR, IT, the six countries most of its customers live\n   * in, out of a list of 249. Each code appears once: a preferred country is not\n   * repeated in the rest. The rest gets a heading (`labels.others`) so the boundary\n   * is visible. Search keeps the split: matching preferred countries stay on top.\n   * Codes not in `countries` are ignored — `countries` decides what can be picked.\n   */\n  preferred?: readonly string[];\n  /**\n   * Draw each country's flag as a flag-icons span (`fi fi-ch`), in the rows and on\n   * the trigger. Default `false`, because the kit ships no flag stylesheet — the same\n   * convention as `LanguageMenu`'s `country` and `CurrencySelect`: the host imports\n   * `flag-icons/css/flag-icons.min.css`, and without it a flag is an empty box.\n   */\n  flags?: boolean;\n  /** The floating label, as on every field. A string also names the trigger\n   *  (\"Country: Switzerland\"). */\n  label?: ReactNode;\n  /** As {@link Select}'s `hint`: plain TEXT is a caption under the field, attached\n   *  through `aria-describedby`; a {@link FieldHint} rides the label line (or the\n   *  field's end, when there is no label). */\n  hint?: ReactNode;\n  /** As {@link Input}'s `error`: rendered under the field, on the trigger's\n   *  `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}, as on every field. */\n  invalid?: boolean;\n  /** The empty trigger's text. Default: nothing when the field has a `label` or an\n   *  `aria-labelledby` (the label already says what goes here), else `labels.country`. */\n  placeholder?: string;\n  /** As on the other pickers: no focus, no list, the settled look. */\n  disabled?: boolean;\n  /**\n   * Why the country cannot be changed — {@link Button}'s `disabledReason`, for a field\n   * that saves itself. The trigger stays focusable and `aria-disabled`, the list does\n   * not open and `onChange` never fires; the reason is a line under the field at Large\n   * and on a touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`), and\n   * on the trigger's `aria-describedby`. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the\n   *  field at Large and on a touch screen by default, the tooltip otherwise (DUP-3). */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This select SAVES on change (a settings row with no Save button). Under a locked\n   * {@link WriteLockProvider} it is locked the `disabledReason` way, with the lock's\n   * reason. A country field inside a form that has its own Save stays editable under\n   * the lock — leave this off there, and put `commit` on the Save.\n   */\n  commit?: CommitScope;\n  /** The language the names are in. Default: the `<UiKitProvider locale>`, else\n   *  English (see {@link countryName}). */\n  locale?: string;\n  /** Per-instance overrides of {@link CountrySelectLabels}, over the provider's\n   *  `countrySelect` namespace, over English. */\n  labels?: LabelOverride<CountrySelectLabels>;\n  /**\n   * Name the trigger by an element of the caller's — a form's own label above the\n   * field, which is how `RhfCountrySelect` names it. The trigger is then named by\n   * that element AND the chosen country (two references, as {@link DatePicker}'s\n   * trigger is named, so \"Country Switzerland\" needs no punctuation to translate),\n   * instead of the composed \"label: country\". An `aria-label` still wins. Before\n   * 0.23 this landed on the wrapper `<div>`, which has no role to be named.\n   */\n  \"aria-labelledby\"?: string;\n}\n\ninterface Entry {\n  code: string;\n  name: string;\n}\n\n/** Best rank first; a stable sort, so equal ranks keep the collated (or preferred)\n *  order they came in. The rank is the kit's one (`rankMatch`, DUP-5 — written here\n *  first): the code itself (a two-letter query \"ch\" means Switzerland before it means\n *  Chad), then the start of the name, then anywhere in it, with accents and case folded\n *  — \"osterreich\" finds Österreich, \"cote\" Côte d'Ivoire. */\nfunction search(entries: Entry[], q: string, locale: string): Entry[] {\n  return entries\n    .map((e) => ({ e, r: rankMatch(e.name, q, { code: e.code, locale }) }))\n    .filter((x) => x.r >= 0)\n    .sort((a, b) => a.r - b.r)\n    .map((x) => x.e);\n}\n\nfunction toOption(e: Entry, flags: boolean, group?: string): ComboOption<string> {\n  return {\n    value: e.code,\n    label: e.name,\n    icon: flags ? <CurrencyFlag country={e.code.toLowerCase()} /> : undefined,\n    group,\n  };\n}\n\nfunction collator(locale: string): Intl.Collator {\n  try {\n    return new Intl.Collator(locale);\n  } catch {\n    return new Intl.Collator();\n  }\n}\n\n/**\n * A country picker: the value is the ISO 3166-1 alpha-2 code (\"CH\"), the names are the\n * runtime's own (`Intl.DisplayNames`) in the provider's locale, sorted by that\n * locale's collation. Requested by kastlan (customer and handover addresses, with its\n * six neighbours on top) and keksdose (the bank picker's fifteen countries) — both\n * apps carried a hand-written list of names in two languages.\n *\n * ## Built on the kit's searchable combobox\n *\n * 249 countries is not a menu, it is a lookup, and the list has to work on a phone. So\n * this is the entity pickers' machinery — `useComboboxCore` and `ComboboxPanel`, which\n * {@link EntityCombobox} is also made of — not a native `<select>`: the anchored panel\n * with a search box on a pointer device, the full-screen sheet with its own search box\n * on a phone (live #200), the same keyboard (APG listbox), the same announcements, the\n * same group headings. Only the trigger is this component's own, because the trigger\n * is where the write lock lives: `EntityCombobox`'s is a native `disabled` button,\n * and a locked field has to stay focusable to say why.\n *\n * The ranking is this component's own too: it folds accents and case (\"osterreich\"\n * finds Österreich), matches the code (\"ch\" ranks Switzerland first), and ranks\n * name-starts above name-contains — the kit's `rankMatch`, which began here. The panel\n * is handed those rows in place of the core's filter, which does not rank.\n *\n * Field anatomy as on every field: floating `label`, `hint`, `error`, `invalid`; the\n * trigger is named \"label: value\" as the other trigger pickers are.\n *\n * Since 0.23 it takes a `ref` to the trigger (react-hook-form's focus-on-error, kastlan)\n * and `clearable`, which hands `onChange` `null`.\n */\nexport function CountrySelect<Clearable extends boolean = false>({\n  value,\n  onChange,\n  countries,\n  preferred,\n  flags = false,\n  label,\n  hint,\n  error,\n  invalid,\n  placeholder,\n  disabled,\n  disabledReason: ownReason,\n  disabledReasonDisplay,\n  commit,\n  clearable,\n  clearLabel,\n  locale: localeProp,\n  labels: labelsProp,\n  className,\n  id,\n  ref,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-required\": ariaRequired,\n  ...rest\n}: CountrySelectProps<Clearable>) {\n  const text = useKitLabels(\"countrySelect\", DEFAULT_COUNTRY_SELECT_LABELS, labelsProp);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  // The clear's name is the family's (`combobox.clear`), as on EntityCombobox; a prop\n  // left `undefined` falls through to the provider rather than masking it.\n  const comboText = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, { clear: clearLabel });\n  // English without a locale — see `countryName`.\n  const locale = useKitLocale(localeProp) ?? \"en\";\n\n  // ── The list ──────────────────────────────────────────────────────────────\n  // Keyed on the arrays' CONTENTS: `countries={[\"DE\", \"AT\"]}` written inline is a new\n  // array every render, and resorting 249 names on every keystroke elsewhere in the\n  // form is work for nothing.\n  const countriesKey = countries?.join(\",\");\n  const preferredKey = preferred?.join(\",\");\n  const { top, rest: others } = useMemo(() => {\n    const seen = new Set<string>();\n    const pool: string[] = [];\n    for (const raw of countriesKey !== undefined ? countriesKey.split(\",\") : COUNTRY_CODES) {\n      const code = normalizeCountryCode(raw);\n      if (code && !seen.has(code)) {\n        seen.add(code);\n        pool.push(code);\n      }\n    }\n    const entry = (code: string): Entry => ({ code, name: countryName(code, locale) });\n    const firsts: Entry[] = [];\n    const picked = new Set<string>();\n    for (const raw of preferredKey ? preferredKey.split(\",\") : []) {\n      const code = normalizeCountryCode(raw);\n      if (code && seen.has(code) && !picked.has(code)) {\n        picked.add(code);\n        firsts.push(entry(code));\n      }\n    }\n    const compare = collator(locale).compare;\n    const sorted = pool\n      .filter((c) => !picked.has(c))\n      .map(entry)\n      .sort((a, b) => compare(a.name, b.name));\n    return { top: firsts, rest: sorted };\n  }, [countriesKey, preferredKey, locale]);\n\n  // `filter: false` — the panel is handed the rows `search` ranks below instead of\n  // the core's substring filter; the core still owns open, query, the highlighted row,\n  // anchoring and dismissal.\n  const allOptions = useMemo(\n    () => [...top, ...others].map((e) => toOption(e, flags)),\n    [top, others, flags],\n  );\n  const core = useComboboxCore<string>({ options: allOptions, filter: false });\n  const { open, setOpen, query, triggerRef, closeToTrigger } = core;\n  // The core anchors the panel to the trigger and hands focus back to it; the caller's\n  // `ref` wants the same element. One callback feeds both.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n\n  const q = query.trim();\n  const results = useMemo(() => {\n    const firsts = q ? search(top, q, locale) : top;\n    const below = q ? search(others, q, locale) : others;\n    // The heading only where it separates something: with no preferred country in\n    // view it would head the whole list and divide nothing.\n    const heading = firsts.length > 0 ? text.others : undefined;\n    return [...firsts.map((e) => toOption(e, flags)), ...below.map((e) => toOption(e, flags, heading))];\n  }, [top, others, q, text.others, flags, locale]);\n\n  // ── The lock ──────────────────────────────────────────────────────────────\n  const lock = useLockReason(commit, ownReason);\n  const locked = lock.locked;\n  const inert = locked || Boolean(disabled);\n  // A lock (or `disabled`) arriving while the list is up closes it — adjusted while\n  // rendering, as the core adjusts its own query, so no frame shows a list that can\n  // no longer be used.\n  if (inert && open) setOpen(false);\n\n  // ── The field ─────────────────────────────────────────────────────────────\n  const generated = useId();\n  const triggerId = id ?? generated;\n  const listboxId = `${generated}-listbox`;\n  // Text is a caption under the field; a FieldHint rides the label line, and is that\n  // caption at Large and on touch (§4). The caller's ids, the caption, a lock's reason,\n  // the error — Select's order. Through useFieldMessages since 0.34 (DUP-2, DUP-8).\n  const field = useFieldMessages({\n    hint,\n    error,\n    invalid,\n    describedBy: ariaDescribedBy,\n    ariaInvalid,\n    reasonId: locked && lock.reasonId,\n  });\n\n  const code = normalizeCountryCode(value);\n  const selectedName = code ? countryName(code, locale) : undefined;\n  // A field named by a label of the caller's (`aria-labelledby`) is a labelled field too:\n  // the label already says what goes here.\n  const emptyText = placeholder ?? (label === undefined && !ariaLabelledBy ? text.country : \"\");\n  const fieldName = typeof label === \"string\" ? label : text.country;\n  const valueId = `${generated}-value`;\n  // Named by the caller's element (a form's label) — then the shown text is the second\n  // reference, as the composed name below has the value second; but only when it IS a\n  // value or the caller's placeholder, never the `country` fallback word.\n  const labelledBy =\n    ariaLabel === undefined && ariaLabelledBy\n      ? mergeDescribedBy(ariaLabelledBy, (selectedName !== undefined || Boolean(placeholder)) && valueId)\n      : undefined;\n  const name =\n    labelledBy !== undefined\n      ? undefined\n      : (ariaLabel ??\n        (selectedName !== undefined\n          ? common.fieldValue(fieldName, selectedName)\n          : placeholder\n            ? common.fieldValue(fieldName, placeholder)\n            : fieldName));\n\n  const showClear = Boolean(clearable && code && !inert);\n  // `onChange` widened to take the clear's `null` — its type says so once `clearable`\n  // is set, and the clear is only ever offered then.\n  const emit = onChange as (code: string | null) => void;\n  const clear = () => {\n    if (!showClear) return;\n    emit(null);\n  };\n\n  const choose = (o: ComboOption<string>) => {\n    if (inert) return;\n    emit(o.value);\n    // Back to the trigger: the panel holding focus is about to unmount, and a keyboard\n    // user who has answered this field should stand on it, ready to Tab on.\n    closeToTrigger();\n  };\n\n  const trigger = (\n    <button\n      ref={setTrigger}\n      id={triggerId}\n      type=\"button\"\n      // A closed choice that expands into the list below — the role every trigger\n      // picker in the kit wears (see EntityCombobox), and the one that supports\n      // `aria-invalid`.\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      aria-controls={listboxId}\n      aria-expanded={open}\n      aria-label={name}\n      aria-labelledby={labelledBy}\n      aria-invalid={field.isInvalid || undefined}\n      aria-required={ariaRequired}\n      aria-describedby={field.describedBy}\n      // The focusable kind of disabled while locked (Button's rule): native `disabled`\n      // would take the field out of the tab order, and the reason with it.\n      disabled={locked ? undefined : disabled}\n      aria-disabled={locked || undefined}\n      onClick={(e) => {\n        if (inert) {\n          e.preventDefault();\n          return;\n        }\n        setOpen((o) => !o);\n      }}\n      // Down/Up opens the list from the closed trigger, per the APG; Enter and Space\n      // already do through the button's own click.\n      onKeyDown={(e) => {\n        if (inert) return;\n        if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n          e.preventDefault();\n          setOpen(true);\n        } else if (showClear && !open && (e.key === \"Delete\" || e.key === \"Backspace\")) {\n          // The keyboard's clear: the \"×\" is out of the tab order (see `clearable`).\n          e.preventDefault();\n          clear();\n        }\n      }}\n      className={cn(\n        FIELD_TRIGGER,\n        // `peer` dims the floating label with a natively disabled trigger, as Select's.\n        \"peer pe-9\",\n        label !== undefined && FIELD_FLOATING_PAD,\n        inert && \"cursor-not-allowed opacity-50\",\n        field.isInvalid && FIELD_INVALID,\n      )}\n    >\n      <span className=\"flex min-w-0 items-center gap-2\">\n        {flags && code && <CurrencyFlag country={code.toLowerCase()} />}\n        {/* A long name (\"Saint Vincent and the Grenadines\") truncates rather than\n            widening the field: the kit is checked at 390px. From Large up it wraps and\n            the trigger grows instead (text size §10.17, round 0.34 T1). */}\n        <span\n          id={valueId}\n          className={cn(\"truncate-until-large\", selectedName === undefined && \"text-placeholder\")}\n        >\n          {selectedName ?? emptyText}\n        </span>\n      </span>\n      {showClear ? (\n        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside\n            the trigger <button>, so it never holds focus and a key handler here could never\n            fire; the keys go to the trigger, where Delete and Backspace clear. A pointer\n            shortcut, as on EntityCombobox. */\n        <span\n          role=\"button\"\n          tabIndex={-1}\n          aria-label={comboText.clear}\n          onClick={(e) => {\n            e.stopPropagation();\n            clear();\n          }}\n          className=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-placeholder hover:text-secondary\"\n        >\n          <X aria-hidden className=\"size-4\" />\n        </span>\n      ) : (\n        <FieldChevron />\n      )}\n    </button>\n  );\n\n  const control = locked ? (\n    // Button's frame: the line under the trigger, or the Tooltip with a hidden copy for\n    // `aria-describedby`. `items-stretch`: in the line's column the trigger keeps the\n    // field's full width.\n    <LockedReason lock={lock} display={disabledReasonDisplay} className=\"flex w-full items-stretch\">\n      {trigger}\n    </LockedReason>\n  ) : (\n    trigger\n  );\n\n  const box =\n    label !== undefined ? (\n      <FloatingField htmlFor={triggerId} label={label} staticLabel hint={field.labelHint}>\n        {control}\n      </FloatingField>\n    ) : (\n      // No label line to ride: a \"?\" goes at the field's end, outside the box, as on an\n      // unlabelled Select.\n      <EndHintRow hint={field.labelHint}>\n        <div className=\"relative\">{control}</div>\n      </EndHintRow>\n    );\n\n  return (\n    // `rest` dresses the wrapper — a `data-tour` anchor, a test id. The name, the\n    // description and the invalid state are on the trigger above.\n    <div {...rest} className={className}>\n      {box}\n      {field.below}\n      <ComboboxPanel\n        // The core with the rows ranked above in place of its own filter's.\n        core={{ ...core, results }}\n        listboxId={listboxId}\n        // On a phone the list is a full-screen sheet, which needs the field's own\n        // name to say what it is asking for (live #200).\n        sheetTitle={label ?? text.country}\n        searchPlaceholder={text.search}\n        isSelected={(v) => v === code}\n        onChoose={choose}\n        showCreate={false}\n        onCreate={() => {}}\n        createContent={null}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":["code"]}
+{"version":3,"sources":["../../src/components/country-select.tsx"],"sourcesContent":["import { useCallback, useId, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { COUNTRY_CODES, countryName, normalizeCountryCode } from \"../lib/countries\";\nimport { rankMatch } from \"../lib/text-match\";\nimport {\n  FieldChevron,\n  FIELD_FLOATING_PAD,\n  FIELD_INVALID,\n  FIELD_TRIGGER,\n  FloatingField,\n} from \"./field-base\";\nimport {\n  assignRef,\n  EndHintRow,\n  LockedReason,\n  mergeDescribedBy,\n  useFieldMessages,\n  useLockReason,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n} from \"./field-parts\";\nimport { CurrencyFlag } from \"./currency-select\";\nimport { ComboboxPanel, useComboboxCore, type ComboOption } from \"./combobox-core\";\nimport type { CommitScope } from \"./write-lock\";\nimport {\n  DEFAULT_COMBOBOX_LABELS,\n  DEFAULT_COMMON_LABELS,\n  useKitLabels,\n  useKitLocale,\n  type LabelOverride,\n} from \"../i18n/kit-labels\";\nimport { DEFAULT_COUNTRY_SELECT_LABELS } from \"./country-select-labels\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The words {@link CountrySelect} renders on its own behalf. The list's \"no results\",\n *  \"loading\" and result-count announcements are the shared `combobox` namespace's,\n *  as on every other searchable picker. */\nexport interface CountrySelectLabels {\n  /** What the field is, when the caller gives no `label`: the first half of the\n   *  trigger's accessible name, the phone sheet's title, and the empty trigger's\n   *  text. */\n  country: string;\n  /** The search box in the open list. */\n  search: string;\n  /** The heading between the `preferred` countries and all the others. Shown only\n   *  when `preferred` puts something above it. */\n  others: string;\n}\n\n// Defined in ./country-select-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_COUNTRY_SELECT_LABELS };\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\n/**\n * `onChange` is the kit's — \"a country was picked\", carrying its code — rather than\n * the div's form event. `id` and the `aria-*` wiring below go to the TRIGGER, which is\n * the control a reader meets; everything else in `rest` dresses the wrapper.\n *\n * `Clearable` follows `clearable`, the way {@link EntityCombobox}'s `C` follows its\n * `clearValue`: it is inferred from the prop, so `onChange` is `(code: string) => void`\n * for the field as it always was (`onChange={setCountry}` over a `string` state still\n * type-checks), and `(code: string | null) => void` once `clearable` is set — the\n * `null` of a clear cannot reach a handler that was never told about it.\n */\nexport interface CountrySelectProps<Clearable extends boolean = false>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"defaultValue\">,\n    FieldHelpProps {\n  /** The chosen country as an ISO 3166-1 alpha-2 code (\"CH\"), in either case;\n   *  `null`, `undefined` or `\"\"` when none is. A code outside the list still shows\n   *  its name — the list restricts what can be PICKED, not what can be shown. */\n  value: string | null | undefined;\n  /** A country was picked: its alpha-2 code, always upper-case. With `clearable`,\n   *  also `null`: the \"×\" (or Delete on the trigger) emptied the field. */\n  onChange: (code: Clearable extends true ? string | null : string) => void;\n  /**\n   * Offer a clear \"×\" in place of the chevron while a country is chosen; it hands\n   * `onChange` `null` (the kit's later list: an optional country — a contact's\n   * nationality, a bank filter's \"any country\" — could be set but never unset again).\n   *\n   * The combobox family's clear, as {@link EntityCombobox} draws it: a pointer\n   * shortcut inside the trigger, out of the tab order so it is not a second stop\n   * between this field and the next, named by `clearLabel` (default: the\n   * `combobox.clear` label every picker in the family shares). The keyboard way is\n   * Delete or Backspace on the closed trigger. Not offered while `disabled` or locked\n   * (`commit` / `disabledReason`): a clear is a change like any other.\n   */\n  clearable?: Clearable;\n  /** The clear \"×\"'s accessible name. Wins over `combobox.clear` from the\n   *  {@link UiKitProvider}, as {@link EntityCombobox}'s `clearLabel` does. */\n  clearLabel?: string;\n  /**\n   * The TRIGGER — the focusable `<button>` a reader meets — as a React 19 ref prop,\n   * the way {@link MoneyField} takes its input's (kastlan: react-hook-form's\n   * focus-on-error calls `focus()` on whatever `field.ref` was handed, and without a\n   * ref the first field in error on an address form was never focused). See\n   * `RhfCountrySelect`, which passes it.\n   */\n  ref?: Ref<HTMLButtonElement>;\n  /**\n   * Offer only these codes (any case; duplicates and malformed entries dropped).\n   * Default: every ISO 3166-1 country, {@link COUNTRY_CODES}. Sorted by name either\n   * way — the order given is not kept, because the reader looks a country up by its\n   * name in their own language, and any other order is one they cannot predict.\n   *\n   * keksdose's bank picker offers the fifteen countries its banks are in\n   * (DE AT CH FR IT ES NL BE PT PL SE DK FI GB IE). A code that is not in ISO's list\n   * is allowed here on purpose: `XK` (Kosovo) is the app's decision, not the kit's.\n   */\n  countries?: readonly string[];\n  /**\n   * A short group shown FIRST, in the order given, above the alphabetical rest —\n   * kastlan's CH, LI, DE, AT, FR, IT, the six countries most of its customers live\n   * in, out of a list of 249. Each code appears once: a preferred country is not\n   * repeated in the rest. The rest gets a heading (`labels.others`) so the boundary\n   * is visible. Search keeps the split: matching preferred countries stay on top.\n   * Codes not in `countries` are ignored — `countries` decides what can be picked.\n   */\n  preferred?: readonly string[];\n  /**\n   * Draw each country's flag as a flag-icons span (`fi fi-ch`), in the rows and on\n   * the trigger. Default `false`, because the kit ships no flag stylesheet — the same\n   * convention as `LanguageMenu`'s `country` and `CurrencySelect`: the host imports\n   * `flag-icons/css/flag-icons.min.css`, and without it a flag is an empty box.\n   */\n  flags?: boolean;\n  /** The floating label, as on every field. A string also names the trigger\n   *  (\"Country: Switzerland\"). */\n  label?: ReactNode;\n  /** As {@link Select}'s `hint`: plain TEXT is a caption under the field, attached\n   *  through `aria-describedby`; a {@link FieldHint} rides the label line (or the\n   *  field's end, when there is no label). */\n  hint?: ReactNode;\n  /** As {@link Input}'s `error`: rendered under the field, on the trigger's\n   *  `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}, as on every field. */\n  invalid?: boolean;\n  /** The empty trigger's text. Default: nothing when the field has a `label` or an\n   *  `aria-labelledby` (the label already says what goes here), else `labels.country`. */\n  placeholder?: string;\n  /** As on the other pickers: no focus, no list, the settled look. */\n  disabled?: boolean;\n  /**\n   * Why the country cannot be changed — {@link Button}'s `disabledReason`, for a field\n   * that saves itself. The trigger stays focusable and `aria-disabled`, the list does\n   * not open and `onChange` never fires; the reason is a line under the field at Large\n   * and on a touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`), and\n   * on the trigger's `aria-describedby`. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the\n   *  field at Large and on a touch screen by default, the tooltip otherwise (DUP-3). */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This select SAVES on change (a settings row with no Save button). Under a locked\n   * {@link WriteLockProvider} it is locked the `disabledReason` way, with the lock's\n   * reason. A country field inside a form that has its own Save stays editable under\n   * the lock — leave this off there, and put `commit` on the Save.\n   */\n  commit?: CommitScope;\n  /** The language the names are in. Default: the `<UiKitProvider locale>`, else\n   *  English (see {@link countryName}). */\n  locale?: string;\n  /** Per-instance overrides of {@link CountrySelectLabels}, over the provider's\n   *  `countrySelect` namespace, over English. */\n  labels?: LabelOverride<CountrySelectLabels>;\n  /**\n   * Name the trigger by an element of the caller's — a form's own label above the\n   * field, which is how `RhfCountrySelect` names it. The trigger is then named by\n   * that element AND the chosen country (two references, as {@link DatePicker}'s\n   * trigger is named, so \"Country Switzerland\" needs no punctuation to translate),\n   * instead of the composed \"label: country\". An `aria-label` still wins. Before\n   * 0.23 this landed on the wrapper `<div>`, which has no role to be named.\n   */\n  \"aria-labelledby\"?: string;\n}\n\ninterface Entry {\n  code: string;\n  name: string;\n}\n\n/** Best rank first; a stable sort, so equal ranks keep the collated (or preferred)\n *  order they came in. The rank is the kit's one (`rankMatch`, DUP-5 — written here\n *  first): the code itself (a two-letter query \"ch\" means Switzerland before it means\n *  Chad), then the start of the name, then anywhere in it, with accents and case folded\n *  — \"osterreich\" finds Österreich, \"cote\" Côte d'Ivoire. */\nfunction search(entries: Entry[], q: string, locale: string): Entry[] {\n  return entries\n    .map((e) => ({ e, r: rankMatch(e.name, q, { code: e.code, locale }) }))\n    .filter((x) => x.r >= 0)\n    .sort((a, b) => a.r - b.r)\n    .map((x) => x.e);\n}\n\nfunction toOption(e: Entry, flags: boolean, group?: string): ComboOption<string> {\n  return {\n    value: e.code,\n    label: e.name,\n    icon: flags ? <CurrencyFlag country={e.code.toLowerCase()} /> : undefined,\n    group,\n  };\n}\n\nfunction collator(locale: string): Intl.Collator {\n  try {\n    return new Intl.Collator(locale);\n  } catch {\n    return new Intl.Collator();\n  }\n}\n\n/**\n * A country picker: the value is the ISO 3166-1 alpha-2 code (\"CH\"), the names are the\n * runtime's own (`Intl.DisplayNames`) in the provider's locale, sorted by that\n * locale's collation. Requested by kastlan (customer and handover addresses, with its\n * six neighbours on top) and keksdose (the bank picker's fifteen countries) — both\n * apps carried a hand-written list of names in two languages.\n *\n * ## Built on the kit's searchable combobox\n *\n * 249 countries is not a menu, it is a lookup, and the list has to work on a phone. So\n * this is the entity pickers' machinery — `useComboboxCore` and `ComboboxPanel`, which\n * {@link EntityCombobox} is also made of — not a native `<select>`: the anchored panel\n * with a search box on a pointer device, the full-screen sheet with its own search box\n * on a phone (live #200), the same keyboard (APG listbox), the same announcements, the\n * same group headings. Only the trigger is this component's own, because the trigger\n * is where the write lock lives: `EntityCombobox`'s is a native `disabled` button,\n * and a locked field has to stay focusable to say why.\n *\n * The ranking is this component's own too: it folds accents and case (\"osterreich\"\n * finds Österreich), matches the code (\"ch\" ranks Switzerland first), and ranks\n * name-starts above name-contains — the kit's `rankMatch`, which began here. The panel\n * is handed those rows in place of the core's filter, which does not rank.\n *\n * Field anatomy as on every field: floating `label`, `hint`, `error`, `invalid`; the\n * trigger is named \"label: value\" as the other trigger pickers are.\n *\n * Since 0.23 it takes a `ref` to the trigger (react-hook-form's focus-on-error, kastlan)\n * and `clearable`, which hands `onChange` `null`.\n */\nexport function CountrySelect<Clearable extends boolean = false>({\n  value,\n  onChange,\n  countries,\n  preferred,\n  flags = false,\n  label,\n  hint,\n  help,\n  error,\n  invalid,\n  placeholder,\n  disabled,\n  disabledReason: ownReason,\n  disabledReasonDisplay,\n  commit,\n  clearable,\n  clearLabel,\n  locale: localeProp,\n  labels: labelsProp,\n  className,\n  id,\n  ref,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-required\": ariaRequired,\n  ...rest\n}: CountrySelectProps<Clearable>) {\n  const text = useKitLabels(\"countrySelect\", DEFAULT_COUNTRY_SELECT_LABELS, labelsProp);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  // The clear's name is the family's (`combobox.clear`), as on EntityCombobox; a prop\n  // left `undefined` falls through to the provider rather than masking it.\n  const comboText = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, { clear: clearLabel });\n  // English without a locale — see `countryName`.\n  const locale = useKitLocale(localeProp) ?? \"en\";\n\n  // ── The list ──────────────────────────────────────────────────────────────\n  // Keyed on the arrays' CONTENTS: `countries={[\"DE\", \"AT\"]}` written inline is a new\n  // array every render, and resorting 249 names on every keystroke elsewhere in the\n  // form is work for nothing.\n  const countriesKey = countries?.join(\",\");\n  const preferredKey = preferred?.join(\",\");\n  const { top, rest: others } = useMemo(() => {\n    const seen = new Set<string>();\n    const pool: string[] = [];\n    for (const raw of countriesKey !== undefined ? countriesKey.split(\",\") : COUNTRY_CODES) {\n      const code = normalizeCountryCode(raw);\n      if (code && !seen.has(code)) {\n        seen.add(code);\n        pool.push(code);\n      }\n    }\n    const entry = (code: string): Entry => ({ code, name: countryName(code, locale) });\n    const firsts: Entry[] = [];\n    const picked = new Set<string>();\n    for (const raw of preferredKey ? preferredKey.split(\",\") : []) {\n      const code = normalizeCountryCode(raw);\n      if (code && seen.has(code) && !picked.has(code)) {\n        picked.add(code);\n        firsts.push(entry(code));\n      }\n    }\n    const compare = collator(locale).compare;\n    const sorted = pool\n      .filter((c) => !picked.has(c))\n      .map(entry)\n      .sort((a, b) => compare(a.name, b.name));\n    return { top: firsts, rest: sorted };\n  }, [countriesKey, preferredKey, locale]);\n\n  // `filter: false` — the panel is handed the rows `search` ranks below instead of\n  // the core's substring filter; the core still owns open, query, the highlighted row,\n  // anchoring and dismissal.\n  const allOptions = useMemo(\n    () => [...top, ...others].map((e) => toOption(e, flags)),\n    [top, others, flags],\n  );\n  const core = useComboboxCore<string>({ options: allOptions, filter: false });\n  const { open, setOpen, query, triggerRef, closeToTrigger } = core;\n  // The core anchors the panel to the trigger and hands focus back to it; the caller's\n  // `ref` wants the same element. One callback feeds both.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n\n  const q = query.trim();\n  const results = useMemo(() => {\n    const firsts = q ? search(top, q, locale) : top;\n    const below = q ? search(others, q, locale) : others;\n    // The heading only where it separates something: with no preferred country in\n    // view it would head the whole list and divide nothing.\n    const heading = firsts.length > 0 ? text.others : undefined;\n    return [...firsts.map((e) => toOption(e, flags)), ...below.map((e) => toOption(e, flags, heading))];\n  }, [top, others, q, text.others, flags, locale]);\n\n  // ── The lock ──────────────────────────────────────────────────────────────\n  const lock = useLockReason(commit, ownReason);\n  const locked = lock.locked;\n  const inert = locked || Boolean(disabled);\n  // A lock (or `disabled`) arriving while the list is up closes it — adjusted while\n  // rendering, as the core adjusts its own query, so no frame shows a list that can\n  // no longer be used.\n  if (inert && open) setOpen(false);\n\n  // ── The field ─────────────────────────────────────────────────────────────\n  const generated = useId();\n  const triggerId = id ?? generated;\n  const listboxId = `${generated}-listbox`;\n  // Text is a caption under the field; a FieldHint rides the label line, and is that\n  // caption at Large and on touch (§4). The caller's ids, the caption, a lock's reason,\n  // the error — Select's order. Through useFieldMessages since 0.34 (DUP-2, DUP-8).\n  const field = useFieldMessages({\n    hint,\n    help,\n    name: label ?? ariaLabel,\n    error,\n    invalid,\n    describedBy: ariaDescribedBy,\n    ariaInvalid,\n    reasonId: locked && lock.reasonId,\n  });\n\n  const code = normalizeCountryCode(value);\n  const selectedName = code ? countryName(code, locale) : undefined;\n  // A field named by a label of the caller's (`aria-labelledby`) is a labelled field too:\n  // the label already says what goes here.\n  const emptyText = placeholder ?? (label === undefined && !ariaLabelledBy ? text.country : \"\");\n  const fieldName = typeof label === \"string\" ? label : text.country;\n  const valueId = `${generated}-value`;\n  // Named by the caller's element (a form's label) — then the shown text is the second\n  // reference, as the composed name below has the value second; but only when it IS a\n  // value or the caller's placeholder, never the `country` fallback word.\n  const labelledBy =\n    ariaLabel === undefined && ariaLabelledBy\n      ? mergeDescribedBy(ariaLabelledBy, (selectedName !== undefined || Boolean(placeholder)) && valueId)\n      : undefined;\n  const name =\n    labelledBy !== undefined\n      ? undefined\n      : (ariaLabel ??\n        (selectedName !== undefined\n          ? common.fieldValue(fieldName, selectedName)\n          : placeholder\n            ? common.fieldValue(fieldName, placeholder)\n            : fieldName));\n\n  const showClear = Boolean(clearable && code && !inert);\n  // `onChange` widened to take the clear's `null` — its type says so once `clearable`\n  // is set, and the clear is only ever offered then.\n  const emit = onChange as (code: string | null) => void;\n  const clear = () => {\n    if (!showClear) return;\n    emit(null);\n  };\n\n  const choose = (o: ComboOption<string>) => {\n    if (inert) return;\n    emit(o.value);\n    // Back to the trigger: the panel holding focus is about to unmount, and a keyboard\n    // user who has answered this field should stand on it, ready to Tab on.\n    closeToTrigger();\n  };\n\n  const trigger = (\n    <button\n      ref={setTrigger}\n      id={triggerId}\n      type=\"button\"\n      // A closed choice that expands into the list below — the role every trigger\n      // picker in the kit wears (see EntityCombobox), and the one that supports\n      // `aria-invalid`.\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      aria-controls={listboxId}\n      aria-expanded={open}\n      aria-label={name}\n      aria-labelledby={labelledBy}\n      aria-invalid={field.isInvalid || undefined}\n      aria-required={ariaRequired}\n      aria-describedby={field.describedBy}\n      // The focusable kind of disabled while locked (Button's rule): native `disabled`\n      // would take the field out of the tab order, and the reason with it.\n      disabled={locked ? undefined : disabled}\n      aria-disabled={locked || undefined}\n      onClick={(e) => {\n        if (inert) {\n          e.preventDefault();\n          return;\n        }\n        setOpen((o) => !o);\n      }}\n      // Down/Up opens the list from the closed trigger, per the APG; Enter and Space\n      // already do through the button's own click.\n      onKeyDown={(e) => {\n        if (inert) return;\n        if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n          e.preventDefault();\n          setOpen(true);\n        } else if (showClear && !open && (e.key === \"Delete\" || e.key === \"Backspace\")) {\n          // The keyboard's clear: the \"×\" is out of the tab order (see `clearable`).\n          e.preventDefault();\n          clear();\n        }\n      }}\n      className={cn(\n        FIELD_TRIGGER,\n        // `peer` dims the floating label with a natively disabled trigger, as Select's.\n        \"peer pe-9\",\n        label !== undefined && FIELD_FLOATING_PAD,\n        inert && \"cursor-not-allowed opacity-50\",\n        field.isInvalid && FIELD_INVALID,\n      )}\n    >\n      <span className=\"flex min-w-0 items-center gap-2\">\n        {flags && code && <CurrencyFlag country={code.toLowerCase()} />}\n        {/* A long name (\"Saint Vincent and the Grenadines\") truncates rather than\n            widening the field: the kit is checked at 390px. From Large up it wraps and\n            the trigger grows instead (text size §10.17, round 0.34 T1). */}\n        <span\n          id={valueId}\n          className={cn(\"truncate-until-large\", selectedName === undefined && \"text-placeholder\")}\n        >\n          {selectedName ?? emptyText}\n        </span>\n      </span>\n      {showClear ? (\n        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside\n            the trigger <button>, so it never holds focus and a key handler here could never\n            fire; the keys go to the trigger, where Delete and Backspace clear. A pointer\n            shortcut, as on EntityCombobox. */\n        <span\n          role=\"button\"\n          tabIndex={-1}\n          aria-label={comboText.clear}\n          onClick={(e) => {\n            e.stopPropagation();\n            clear();\n          }}\n          className=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-placeholder hover:text-secondary\"\n        >\n          <X aria-hidden className=\"size-4\" />\n        </span>\n      ) : (\n        <FieldChevron />\n      )}\n    </button>\n  );\n\n  const control = locked ? (\n    // Button's frame: the line under the trigger, or the Tooltip with a hidden copy for\n    // `aria-describedby`. `items-stretch`: in the line's column the trigger keeps the\n    // field's full width.\n    <LockedReason lock={lock} display={disabledReasonDisplay} className=\"flex w-full items-stretch\">\n      {trigger}\n    </LockedReason>\n  ) : (\n    trigger\n  );\n\n  const box =\n    label !== undefined ? (\n      <FloatingField htmlFor={triggerId} label={label} staticLabel hint={field.labelHint}>\n        {control}\n      </FloatingField>\n    ) : (\n      // No label line to ride: a \"?\" goes at the field's end, outside the box, as on an\n      // unlabelled Select.\n      <EndHintRow hint={field.labelHint}>\n        <div className=\"relative\">{control}</div>\n      </EndHintRow>\n    );\n\n  return (\n    // `rest` dresses the wrapper — a `data-tour` anchor, a test id. The name, the\n    // description and the invalid state are on the trigger above.\n    <div {...rest} className={className}>\n      {box}\n      {field.below}\n      <ComboboxPanel\n        // The core with the rows ranked above in place of its own filter's.\n        core={{ ...core, results }}\n        listboxId={listboxId}\n        // On a phone the list is a full-screen sheet, which needs the field's own\n        // name to say what it is asking for (live #200).\n        sheetTitle={label ?? text.country}\n        searchPlaceholder={text.search}\n        isSelected={(v) => v === code}\n        onChoose={choose}\n        showCreate={false}\n        onCreate={() => {}}\n        createContent={null}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":["code"]}

package/dist/components/currency-option-list.d.ts

@@ -1,13 +1,8 @@
 import type { ComponentPropsWithRef, ReactNode } from "react";
 import { type ComboboxCore } from "./combobox-core.js";
-export interface CurrencyOption {
-    code: string;
-    name: string;
-    symbol: string;
-    /** ISO 3166-1 alpha-2 country code (lowercase) used by flag-icons. */
-    country: string;
-}
-export declare const CURRENCIES: CurrencyOption[];
+import { CURRENCIES, type CurrencyOption } from "../currencies.js";
+export { CURRENCIES };
+export type { CurrencyOption };
 export interface CurrencyFlagProps extends ComponentPropsWithRef<"span"> {
     /** ISO 3166-1 alpha-2, lowercase — the class flag-icons keys its sprite by. */
     country: string;

package/dist/components/currency-option-list.js

@@ -4,35 +4,7 @@ import { useMemo } from "react";
 import { cn } from "../lib/cn.js";
 import { foldForSearch } from "../lib/text-match.js";
 import { ComboboxPanel } from "./combobox-core.js";
-const CURRENCIES = [
-  { code: "EUR", name: "Euro", symbol: "\u20AC", country: "eu" },
-  { code: "USD", name: "US Dollar", symbol: "$", country: "us" },
-  { code: "GBP", name: "British Pound", symbol: "\xA3", country: "gb" },
-  { code: "CHF", name: "Swiss Franc", symbol: "CHF", country: "ch" },
-  { code: "JPY", name: "Japanese Yen", symbol: "\xA5", country: "jp" },
-  { code: "CAD", name: "Canadian Dollar", symbol: "CA$", country: "ca" },
-  { code: "AUD", name: "Australian Dollar", symbol: "A$", country: "au" },
-  { code: "NZD", name: "New Zealand Dollar", symbol: "NZ$", country: "nz" },
-  { code: "SEK", name: "Swedish Krona", symbol: "kr", country: "se" },
-  { code: "NOK", name: "Norwegian Krone", symbol: "kr", country: "no" },
-  { code: "DKK", name: "Danish Krone", symbol: "kr", country: "dk" },
-  { code: "PLN", name: "Polish Zloty", symbol: "z\u0142", country: "pl" },
-  { code: "CZK", name: "Czech Koruna", symbol: "K\u010D", country: "cz" },
-  { code: "HUF", name: "Hungarian Forint", symbol: "Ft", country: "hu" },
-  { code: "RON", name: "Romanian Leu", symbol: "lei", country: "ro" },
-  { code: "BGN", name: "Bulgarian Lev", symbol: "\u043B\u0432", country: "bg" },
-  { code: "TRY", name: "Turkish Lira", symbol: "\u20BA", country: "tr" },
-  { code: "RUB", name: "Russian Ruble", symbol: "\u20BD", country: "ru" },
-  { code: "CNY", name: "Chinese Yuan", symbol: "\xA5", country: "cn" },
-  { code: "HKD", name: "Hong Kong Dollar", symbol: "HK$", country: "hk" },
-  { code: "SGD", name: "Singapore Dollar", symbol: "S$", country: "sg" },
-  { code: "INR", name: "Indian Rupee", symbol: "\u20B9", country: "in" },
-  { code: "BRL", name: "Brazilian Real", symbol: "R$", country: "br" },
-  { code: "MXN", name: "Mexican Peso", symbol: "MX$", country: "mx" },
-  { code: "ZAR", name: "South African Rand", symbol: "R", country: "za" },
-  { code: "ILS", name: "Israeli Shekel", symbol: "\u20AA", country: "il" },
-  { code: "AED", name: "UAE Dirham", symbol: "\u062F.\u0625", country: "ae" }
-];
+import { CURRENCIES } from "../currencies.js";
 function CurrencyFlag({ country, className, ...rest }) {
   return /* @__PURE__ */ jsx(
     "span",

package/dist/components/currency-option-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/currency-option-list.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { foldForSearch } from \"../lib/text-match\";\nimport { ComboboxPanel, type ComboboxCore, type ComboOption } from \"./combobox-core\";\n\n// The currency data and the one list both currency pickers render (round 0.34 Wave 2,\n// DUP-4). CurrencySelect re-exports the data under its own name, as it always has; the\n// list is package-private. Its own module, so AmountInput can render the list without a\n// cycle through currency-select.\n\nexport interface CurrencyOption {\n  code: string;\n  name: string;\n  symbol: string;\n  /** ISO 3166-1 alpha-2 country code (lowercase) used by flag-icons. */\n  country: string;\n}\n\nexport const CURRENCIES: CurrencyOption[] = [\n  { code: \"EUR\", name: \"Euro\", symbol: \"€\", country: \"eu\" },\n  { code: \"USD\", name: \"US Dollar\", symbol: \"$\", country: \"us\" },\n  { code: \"GBP\", name: \"British Pound\", symbol: \"£\", country: \"gb\" },\n  { code: \"CHF\", name: \"Swiss Franc\", symbol: \"CHF\", country: \"ch\" },\n  { code: \"JPY\", name: \"Japanese Yen\", symbol: \"¥\", country: \"jp\" },\n  { code: \"CAD\", name: \"Canadian Dollar\", symbol: \"CA$\", country: \"ca\" },\n  { code: \"AUD\", name: \"Australian Dollar\", symbol: \"A$\", country: \"au\" },\n  { code: \"NZD\", name: \"New Zealand Dollar\", symbol: \"NZ$\", country: \"nz\" },\n  { code: \"SEK\", name: \"Swedish Krona\", symbol: \"kr\", country: \"se\" },\n  { code: \"NOK\", name: \"Norwegian Krone\", symbol: \"kr\", country: \"no\" },\n  { code: \"DKK\", name: \"Danish Krone\", symbol: \"kr\", country: \"dk\" },\n  { code: \"PLN\", name: \"Polish Zloty\", symbol: \"zł\", country: \"pl\" },\n  { code: \"CZK\", name: \"Czech Koruna\", symbol: \"Kč\", country: \"cz\" },\n  { code: \"HUF\", name: \"Hungarian Forint\", symbol: \"Ft\", country: \"hu\" },\n  { code: \"RON\", name: \"Romanian Leu\", symbol: \"lei\", country: \"ro\" },\n  { code: \"BGN\", name: \"Bulgarian Lev\", symbol: \"лв\", country: \"bg\" },\n  { code: \"TRY\", name: \"Turkish Lira\", symbol: \"₺\", country: \"tr\" },\n  { code: \"RUB\", name: \"Russian Ruble\", symbol: \"₽\", country: \"ru\" },\n  { code: \"CNY\", name: \"Chinese Yuan\", symbol: \"¥\", country: \"cn\" },\n  { code: \"HKD\", name: \"Hong Kong Dollar\", symbol: \"HK$\", country: \"hk\" },\n  { code: \"SGD\", name: \"Singapore Dollar\", symbol: \"S$\", country: \"sg\" },\n  { code: \"INR\", name: \"Indian Rupee\", symbol: \"₹\", country: \"in\" },\n  { code: \"BRL\", name: \"Brazilian Real\", symbol: \"R$\", country: \"br\" },\n  { code: \"MXN\", name: \"Mexican Peso\", symbol: \"MX$\", country: \"mx\" },\n  { code: \"ZAR\", name: \"South African Rand\", symbol: \"R\", country: \"za\" },\n  { code: \"ILS\", name: \"Israeli Shekel\", symbol: \"₪\", country: \"il\" },\n  { code: \"AED\", name: \"UAE Dirham\", symbol: \"د.إ\", country: \"ae\" },\n];\n\nexport interface CurrencyFlagProps extends ComponentPropsWithRef<\"span\"> {\n  /** ISO 3166-1 alpha-2, lowercase — the class flag-icons keys its sprite by. */\n  country: string;\n}\n\nexport function CurrencyFlag({ country, className, ...rest }: CurrencyFlagProps) {\n  return (\n    <span\n      {...rest}\n      // Stays `aria-hidden` whatever a caller passes: the flag is a picture of the\n      // code printed next to it, and a reader that met both would hear the currency\n      // twice.\n      aria-hidden\n      className={cn(\"fi inline-block w-5 h-[0.9375rem] rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)] shrink-0\", `fi-${country}`, className)}\n    />\n  );\n}\n\nconst CURRENCY_BY_CODE = new Map(CURRENCIES.map((c) => [c.code, c]));\n\nexport function getCurrency(code: string | null | undefined): CurrencyOption | undefined {\n  return code ? CURRENCY_BY_CODE.get(code.toUpperCase()) : undefined;\n}\n\n/** The name to SHOW for a currency: the caller's translation if they have one for\n *  that code; else, when a `locale` is known, the name `Intl.DisplayNames` has for\n *  it in that locale; else the English name {@link CURRENCIES} carries. Shared with\n *  AmountInput, which renders the same list from the same data.\n *\n *  `Intl` only when a locale was actually GIVEN (by prop or `<UiKitProvider>`): an\n *  app that never set one keeps the shipped English names it has always shown,\n *  rather than whatever language the test runner or the browser happens to be in. */\nexport function currencyName(\n  c: CurrencyOption,\n  names?: Record<string, string>,\n  locale?: string,\n): string {\n  const own = names?.[c.code];\n  if (own !== undefined) return own;\n  if (locale) {\n    try {\n      const shown = new Intl.DisplayNames([locale], { type: \"currency\" }).of(c.code);\n      if (shown && shown !== c.code) return shown;\n    } catch {\n      // A malformed tag, or a runtime without `DisplayNames`: the shipped name.\n    }\n  }\n  return c.name;\n}\n\nexport interface CurrencyOptionListProps {\n  /** The host's `useComboboxCore`: its trigger, its open state, its query. */\n  core: ComboboxCore<string>;\n  /** What the host's trigger names in `aria-controls`. */\n  listboxId: string;\n  /** The chosen code, if any — selected and checked in the list. */\n  value: string | null | undefined;\n  /** A currency was picked. The host closes the list. */\n  onChoose: (code: string) => void;\n  /** Only these ISO codes, in this order; codes the kit has no definition for are\n   *  dropped. Default every one of {@link CURRENCIES}. */\n  codes?: readonly string[];\n  /** Translated names by code — see {@link currencyName}. */\n  currencyNames?: Record<string, string>;\n  locale?: string;\n  searchPlaceholder: string;\n  /** The phone sheet's title — the field's name. */\n  sheetTitle: ReactNode;\n}\n\n/**\n * The currency list — its filter and its rows — that CurrencySelect and AmountInput's\n * currency chip both render, on the picker family's `ComboboxPanel` (round 0.34 Wave 2,\n * DUP-4 + BUG-12).\n *\n * The chip's list was a hand copy of CurrencySelect's, and it had drifted: the name kept a\n * plain `truncate` where T1 made CurrencySelect's wrap from Large up, it took no `options`\n * subset, it had no check mark and no listbox id, and it was a fixed 16rem where #308 had\n * given CurrencySelect a panel that grows to the full names. And both were lists of plain\n * buttons under a trigger that promised a listbox. On the shared panel they are a listbox\n * of options, the chosen one selected, with the arrow keys, the live result count, the\n * phone sheet (live #200) and portal anchoring (dev#548: an `overflow` ancestor clipped\n * the absolute panel's first third away).\n *\n * The panel hangs from the trigger's END edge and grows toward the start, as wide as the\n * names need up to 20rem and the glass (feedback #308: a field with content after it is\n * not pushed past the page).\n */\nexport function CurrencyOptionList({\n  core,\n  listboxId,\n  value,\n  onChoose,\n  codes,\n  currencyNames,\n  locale,\n  searchPlaceholder,\n  sheetTitle,\n}: CurrencyOptionListProps) {\n  // Keyed on the codes' CONTENTS: an inline `options={[\"EUR\", \"CHF\"]}` is a new array\n  // every render.\n  const codesKey = codes?.join(\",\");\n  const pool = useMemo(\n    () =>\n      codesKey === undefined\n        ? CURRENCIES\n        : // The caller's order; codes the kit has no definition for are dropped.\n          codesKey\n            .split(\",\")\n            .map((code) => getCurrency(code))\n            .filter((c): c is CurrencyOption => c !== undefined),\n    [codesKey],\n  );\n  const named = useMemo(\n    () => pool.map((c) => ({ c, name: currencyName(c, currencyNames, locale) })),\n    [pool, currencyNames, locale],\n  );\n  const byCode = useMemo(() => new Map(named.map((n) => [n.c.code, n])), [named]);\n\n  // The code, the name the row SHOWS (so a translated list is searchable in the language\n  // it is written in) and the symbol — folded as every kit list folds (DUP-5).\n  const query = core.query;\n  const results = useMemo(() => {\n    const q = foldForSearch(query.trim(), locale);\n    const hits = q\n      ? named.filter(({ c, name }) => [c.code, name, c.symbol].some((s) => foldForSearch(s, locale).includes(q)))\n      : named;\n    return hits.map(\n      ({ c, name }): ComboOption<string> => ({\n        value: c.code,\n        label: name,\n        icon: <CurrencyFlag country={c.country} />,\n      }),\n    );\n  }, [named, query, locale]);\n\n  const chosen = getCurrency(value)?.code;\n  return (\n    <ComboboxPanel\n      // The core with the currency filter's rows in place of its own.\n      core={{ ...core, results }}\n      listboxId={listboxId}\n      searchPlaceholder={searchPlaceholder}\n      sheetTitle={sheetTitle}\n      isSelected={(code) => code === chosen}\n      onChoose={(o) => onChoose(o.value)}\n      showCreate={false}\n      onCreate={() => {}}\n      createContent={null}\n      width={{ fit: true, maxRem: 20 }}\n      align=\"end\"\n      renderOption={(o) => {\n        const row = byCode.get(o.value);\n        if (!row) return o.label;\n        return (\n          <>\n            <span className=\"w-8 shrink-0 font-mono text-muted\">{row.c.symbol}</span>{\" \"}\n            <span className=\"shrink-0 font-medium text-primary\">{row.c.code}</span>{\" \"}\n            {/* The name wraps from Large up (round 0.34 T1); the code beside it is what a\n                reader scans for, and it never shrinks. */}\n            <span className=\"min-w-0 truncate-until-large text-muted\">{row.name}</span>\n          </>\n        );\n      }}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/currency-option-list.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { foldForSearch } from \"../lib/text-match\";\nimport { ComboboxPanel, type ComboboxCore, type ComboOption } from \"./combobox-core\";\nimport { CURRENCIES, type CurrencyOption } from \"../currencies\";\n\n// The one list both currency pickers render (round 0.34 Wave 2, DUP-4). CurrencySelect\n// re-exports the data under its own name, as it always has; the list is package-private.\n// Its own module, so AmountInput can render the list without a cycle through\n// currency-select. The data itself is ../currencies since 0.35: an entry of its own that\n// imports nothing, which an app's build can read in Node (keksdose's flag subset).\nexport { CURRENCIES };\nexport type { CurrencyOption };\n\nexport interface CurrencyFlagProps extends ComponentPropsWithRef<\"span\"> {\n  /** ISO 3166-1 alpha-2, lowercase — the class flag-icons keys its sprite by. */\n  country: string;\n}\n\nexport function CurrencyFlag({ country, className, ...rest }: CurrencyFlagProps) {\n  return (\n    <span\n      {...rest}\n      // Stays `aria-hidden` whatever a caller passes: the flag is a picture of the\n      // code printed next to it, and a reader that met both would hear the currency\n      // twice.\n      aria-hidden\n      className={cn(\"fi inline-block w-5 h-[0.9375rem] rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)] shrink-0\", `fi-${country}`, className)}\n    />\n  );\n}\n\nconst CURRENCY_BY_CODE = new Map(CURRENCIES.map((c) => [c.code, c]));\n\nexport function getCurrency(code: string | null | undefined): CurrencyOption | undefined {\n  return code ? CURRENCY_BY_CODE.get(code.toUpperCase()) : undefined;\n}\n\n/** The name to SHOW for a currency: the caller's translation if they have one for\n *  that code; else, when a `locale` is known, the name `Intl.DisplayNames` has for\n *  it in that locale; else the English name {@link CURRENCIES} carries. Shared with\n *  AmountInput, which renders the same list from the same data.\n *\n *  `Intl` only when a locale was actually GIVEN (by prop or `<UiKitProvider>`): an\n *  app that never set one keeps the shipped English names it has always shown,\n *  rather than whatever language the test runner or the browser happens to be in. */\nexport function currencyName(\n  c: CurrencyOption,\n  names?: Record<string, string>,\n  locale?: string,\n): string {\n  const own = names?.[c.code];\n  if (own !== undefined) return own;\n  if (locale) {\n    try {\n      const shown = new Intl.DisplayNames([locale], { type: \"currency\" }).of(c.code);\n      if (shown && shown !== c.code) return shown;\n    } catch {\n      // A malformed tag, or a runtime without `DisplayNames`: the shipped name.\n    }\n  }\n  return c.name;\n}\n\nexport interface CurrencyOptionListProps {\n  /** The host's `useComboboxCore`: its trigger, its open state, its query. */\n  core: ComboboxCore<string>;\n  /** What the host's trigger names in `aria-controls`. */\n  listboxId: string;\n  /** The chosen code, if any — selected and checked in the list. */\n  value: string | null | undefined;\n  /** A currency was picked. The host closes the list. */\n  onChoose: (code: string) => void;\n  /** Only these ISO codes, in this order; codes the kit has no definition for are\n   *  dropped. Default every one of {@link CURRENCIES}. */\n  codes?: readonly string[];\n  /** Translated names by code — see {@link currencyName}. */\n  currencyNames?: Record<string, string>;\n  locale?: string;\n  searchPlaceholder: string;\n  /** The phone sheet's title — the field's name. */\n  sheetTitle: ReactNode;\n}\n\n/**\n * The currency list — its filter and its rows — that CurrencySelect and AmountInput's\n * currency chip both render, on the picker family's `ComboboxPanel` (round 0.34 Wave 2,\n * DUP-4 + BUG-12).\n *\n * The chip's list was a hand copy of CurrencySelect's, and it had drifted: the name kept a\n * plain `truncate` where T1 made CurrencySelect's wrap from Large up, it took no `options`\n * subset, it had no check mark and no listbox id, and it was a fixed 16rem where #308 had\n * given CurrencySelect a panel that grows to the full names. And both were lists of plain\n * buttons under a trigger that promised a listbox. On the shared panel they are a listbox\n * of options, the chosen one selected, with the arrow keys, the live result count, the\n * phone sheet (live #200) and portal anchoring (dev#548: an `overflow` ancestor clipped\n * the absolute panel's first third away).\n *\n * The panel hangs from the trigger's END edge and grows toward the start, as wide as the\n * names need up to 20rem and the glass (feedback #308: a field with content after it is\n * not pushed past the page).\n */\nexport function CurrencyOptionList({\n  core,\n  listboxId,\n  value,\n  onChoose,\n  codes,\n  currencyNames,\n  locale,\n  searchPlaceholder,\n  sheetTitle,\n}: CurrencyOptionListProps) {\n  // Keyed on the codes' CONTENTS: an inline `options={[\"EUR\", \"CHF\"]}` is a new array\n  // every render.\n  const codesKey = codes?.join(\",\");\n  const pool = useMemo(\n    () =>\n      codesKey === undefined\n        ? CURRENCIES\n        : // The caller's order; codes the kit has no definition for are dropped.\n          codesKey\n            .split(\",\")\n            .map((code) => getCurrency(code))\n            .filter((c): c is CurrencyOption => c !== undefined),\n    [codesKey],\n  );\n  const named = useMemo(\n    () => pool.map((c) => ({ c, name: currencyName(c, currencyNames, locale) })),\n    [pool, currencyNames, locale],\n  );\n  const byCode = useMemo(() => new Map(named.map((n) => [n.c.code, n])), [named]);\n\n  // The code, the name the row SHOWS (so a translated list is searchable in the language\n  // it is written in) and the symbol — folded as every kit list folds (DUP-5).\n  const query = core.query;\n  const results = useMemo(() => {\n    const q = foldForSearch(query.trim(), locale);\n    const hits = q\n      ? named.filter(({ c, name }) => [c.code, name, c.symbol].some((s) => foldForSearch(s, locale).includes(q)))\n      : named;\n    return hits.map(\n      ({ c, name }): ComboOption<string> => ({\n        value: c.code,\n        label: name,\n        icon: <CurrencyFlag country={c.country} />,\n      }),\n    );\n  }, [named, query, locale]);\n\n  const chosen = getCurrency(value)?.code;\n  return (\n    <ComboboxPanel\n      // The core with the currency filter's rows in place of its own.\n      core={{ ...core, results }}\n      listboxId={listboxId}\n      searchPlaceholder={searchPlaceholder}\n      sheetTitle={sheetTitle}\n      isSelected={(code) => code === chosen}\n      onChoose={(o) => onChoose(o.value)}\n      showCreate={false}\n      onCreate={() => {}}\n      createContent={null}\n      width={{ fit: true, maxRem: 20 }}\n      align=\"end\"\n      renderOption={(o) => {\n        const row = byCode.get(o.value);\n        if (!row) return o.label;\n        return (\n          <>\n            <span className=\"w-8 shrink-0 font-mono text-muted\">{row.c.symbol}</span>{\" \"}\n            <span className=\"shrink-0 font-medium text-primary\">{row.c.code}</span>{\" \"}\n            {/* The name wraps from Large up (round 0.34 T1); the code beside it is what a\n                reader scans for, and it never shrinks. */}\n            <span className=\"min-w-0 truncate-until-large text-muted\">{row.name}</span>\n          </>\n        );\n      }}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/currency-select.d.ts

@@ -1,10 +1,11 @@
 import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import { type FieldHelpProps } from "./field-parts.js";
 import { CURRENCIES, CurrencyFlag, currencyName, getCurrency, type CurrencyFlagProps, type CurrencyOption } from "./currency-option-list.js";
 export { CURRENCIES, CurrencyFlag, currencyName, getCurrency };
 export type { CurrencyFlagProps, CurrencyOption };
 /** `onChange` is the kit's — "a currency was picked", carrying the code — rather
  *  than the div's form event. */
-export interface CurrencySelectProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+export interface CurrencySelectProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange">, FieldHelpProps {
     value: string;
     onChange: (code: string) => void;
     placeholder?: string;
@@ -70,4 +71,4 @@ export interface CurrencySelectProps extends Omit<ComponentPropsWithoutRef<"div"
      *  calls `focus()` on it (0.34, API-3, refactor audit 2026-10). Not the wrapper. */
     ref?: Ref<HTMLButtonElement>;
 }
-export declare function CurrencySelect({ value, onChange, placeholder, className, label, options, invalid, error, hint, labels, currencyNames, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ref, ...rest }: CurrencySelectProps): import("react").JSX.Element;
+export declare function CurrencySelect({ value, onChange, placeholder, className, label, options, invalid, error, hint, help, labels, currencyNames, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ref, ...rest }: CurrencySelectProps): import("react").JSX.Element;

package/dist/components/currency-select.js

@@ -29,6 +29,7 @@ function CurrencySelect({
   invalid,
   error,
   hint,
+  help,
   labels,
   currencyNames,
   "aria-label": ariaLabel,
@@ -51,7 +52,15 @@ function CurrencySelect({
   const locale = useKitLocale();
   const selected = getCurrency(value);
   const listboxId = `${useId()}-listbox`;
-  const field = useFieldMessages({ hint, error, invalid, describedBy: ariaDescribedBy, ariaInvalid });
+  const field = useFieldMessages({
+    hint,
+    help,
+    name: label ?? ariaLabel,
+    error,
+    invalid,
+    describedBy: ariaDescribedBy,
+    ariaInvalid
+  });
   const { labelHint, describedBy, isInvalid } = field;
   const fieldName = typeof label === "string" ? label : text.currency;
   const name = ariaLabel ?? common.fieldValue(fieldName, selected ? selected.code : placeholder ?? text.currency);

package/dist/components/currency-select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/currency-select.tsx"],"sourcesContent":["import { useCallback, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { FieldChevron, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from \"./field-base\";\nimport { FieldLabel } from \"./field-parts\";\nimport { assignRef, EndHintRow, useFieldMessages } from \"./field-parts\";\nimport { cn } from \"../lib/cn\";\nimport { useComboboxCore } from \"./combobox-core\";\nimport {\n  CURRENCIES,\n  CurrencyFlag,\n  CurrencyOptionList,\n  currencyName,\n  getCurrency,\n  type CurrencyFlagProps,\n  type CurrencyOption,\n} from \"./currency-option-list\";\nimport {\n  DEFAULT_COMMON_LABELS,\n  DEFAULT_CURRENCY_LABELS,\n  useKitLabels,\n  useKitLocale,\n} from \"../i18n/kit-labels\";\n\n// The data and the flag are declared beside the one list both currency pickers render\n// (./currency-option-list, round 0.34 Wave 2, DUP-4) and are this module's exports, as\n// they always were.\nexport { CURRENCIES, CurrencyFlag, currencyName, getCurrency };\nexport type { CurrencyFlagProps, CurrencyOption };\n\n/** `onChange` is the kit's — \"a currency was picked\", carrying the code — rather\n *  than the div's form event. */\nexport interface CurrencySelectProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  value: string;\n  onChange: (code: string) => void;\n  placeholder?: string;\n  label?: ReactNode;\n  /**\n   * Restrict the pickable currencies to these ISO codes (e.g. only the\n   * currencies actually present in a budget). Order is preserved. Defaults to\n   * the full {@link CURRENCIES} list.\n   */\n  options?: string[];\n  /** Required and unanswered — {@link FIELD_INVALID}, the same rose border the\n   *  native `Select` has worn since feedback #235. Every field-styled control in\n   *  this package carries it now, so a form can mark any of its fields rather than\n   *  only the one that happened to have it first. */\n  invalid?: boolean;\n  /**\n   * What is wrong with the choice, in the caller's own words — {@link Input}'s `error`\n   * (keksdose K4: of the kit's pickers this one had neither a message nor a caption, so\n   * \"the account is in EUR\" sat in a loose `<p>` beside it that nothing pointed at).\n   * Rendered under the field, after a text `hint`; merged into the trigger's\n   * `aria-describedby`; implies `invalid`. `null`, `false` and `\"\"` are no message.\n   */\n  error?: ReactNode;\n  /**\n   * {@link Select}'s `hint`, the same rule (keksdose K4). A {@link FieldHint} \"?\" rides\n   * the label's line; on an unlabelled picker it sits at the field's end edge, outside\n   * the box. Plain TEXT (a string or a number) is a caption UNDER the field, attached\n   * to the trigger through `aria-describedby` — the label line has no room for a\n   * sentence.\n   */\n  hint?: ReactNode;\n  /** Every user-facing string this control owns, shaped like `AmountInput`'s\n   *  `labels` so the two currency pickers in the kit are configured the same way.\n   *\n   *  `search` exists because `placeholder` used to do BOTH jobs: it named the empty\n   *  field and, for want of anything else, it was also handed to the search box —\n   *  so a caller who wrote \"Currency\" got \"Currency\" as the prompt for typing a\n   *  filter, and a caller who wanted to name the filter had to rename the field.\n   *  `placeholder` still wins for the trigger, so nothing moves for the callers\n   *  that set it; what changes is that the search box no longer borrows it. */\n  labels?: {\n    /** The empty trigger, when `placeholder` is not given. */\n    currency?: string;\n    /** The filter box inside the open panel. */\n    search?: string;\n  };\n  /**\n   * Translated currency names, keyed by ISO code — `{ CHF: \"Schweizer Franken\" }`.\n   *\n   * {@link CURRENCIES} is data the package ships, so its 27 names were the one\n   * string in the row a consumer could not translate: the code and the symbol are\n   * language-neutral, and the name beside them stayed English in a German UI. This\n   * is a sparse OVERRIDE rather than a replacement list, so an app translates the\n   * eight currencies it actually uses and keeps the rest; forking `CURRENCIES` to\n   * get there would also fork the flags and symbols, which nobody wants to maintain.\n   *\n   * The search matches what is SHOWN — type \"Franken\" and you find CHF — because a\n   * filter that only matches the hidden English name is worse than no filter.\n   */\n  currencyNames?: Record<string, string>;\n  /** The TRIGGER — the focusable `<button>` — as a React 19 ref prop, as on\n   *  {@link MultiSelect} and {@link CountrySelect}: react-hook-form's focus-on-error\n   *  calls `focus()` on it (0.34, API-3, refactor audit 2026-10). Not the wrapper. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function CurrencySelect({\n  value,\n  onChange,\n  placeholder,\n  className,\n  label,\n  options,\n  invalid,\n  error,\n  hint,\n  labels,\n  currencyNames,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  ref,\n  ...rest\n}: CurrencySelectProps) {\n  // The picker family's foundation (round 0.34 Wave 2, DUP-4): open state, the query,\n  // the highlighted row, portal anchoring, outside press, Escape on the kit's stack and\n  // Back — what `useDropdownSearch` gave it, and the rest it did not. `filter: false`:\n  // the list's own currency filter hands the panel its rows.\n  const core = useComboboxCore<string>({ filter: false, backCloses: true });\n  const { open, setOpen, triggerRef, closeToTrigger } = core;\n  // The core anchors the panel to the trigger and hands focus back to it; the caller's\n  // `ref` wants the same element. One callback feeds both, as on MultiSelect.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n  // `labels` > `currency` from the provider > English.\n  const text = useKitLabels(\"currency\", DEFAULT_CURRENCY_LABELS, labels);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale();\n\n  const selected = getCurrency(value);\n\n  const listboxId = `${useId()}-listbox`;\n  // Text is a caption under the field; anything else (a FieldHint) rides the label\n  // line — and a FieldHint is that caption at Large and on touch (§4). See `hint`. On\n  // the TRIGGER, which is the control with a role: a caller's description used to land\n  // on the wrapper `<div>` through the spread, where nothing reads it. The caller's ids\n  // first, then the caption, then the error — Select's order, through useFieldMessages\n  // since 0.34 (DUP-2, DUP-8).\n  const field = useFieldMessages({ hint, error, invalid, describedBy: ariaDescribedBy, ariaInvalid });\n  const { labelHint, describedBy, isInvalid } = field;\n\n  // The trigger's NAME. A combobox does not take its name from its content, and the\n  // floating label is a <span>, not a <label for> — so without `aria-label` from the\n  // caller this trigger had no name at all (keksdose's test suite, 0.5.0). Composed the\n  // way MultiSelect and the entity comboboxes compose theirs, \"label: value\", with the\n  // `currency` word standing in for a missing label so it is never nameless.\n  const fieldName = typeof label === \"string\" ? label : text.currency;\n  const name = ariaLabel ?? common.fieldValue(fieldName, selected ? selected.code : (placeholder ?? text.currency));\n\n  const trigger = (\n    <button\n      // Where Escape on the open list hands focus back to (round 0.34 BUG-1).\n      ref={setTrigger}\n      type=\"button\"\n      aria-label={name}\n      onClick={() => setOpen((v) => !v)}\n      // Down/Up opens the list from the closed trigger, per the APG; Enter and Space\n      // already do through the button's own click.\n      onKeyDown={(e) => {\n        if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n          e.preventDefault();\n          setOpen(true);\n        }\n      }}\n      // The implicit `button` role supports neither `aria-expanded` nor\n      // `aria-invalid`, so this trigger previously wore a red border and announced\n      // nothing about being invalid or about there being a list behind it. The role\n      // that DESCRIBES it is the one that also supports the attributes — the same\n      // treatment its siblings (MultiSelect, the entity comboboxes) now carry, so a\n      // form row of pickers reads the same way throughout. And since Wave 2 the popup\n      // IS the listbox it promises, of options with the chosen one selected (BUG-12).\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      aria-controls={listboxId}\n      aria-expanded={open}\n      aria-invalid={isInvalid || undefined}\n      aria-describedby={describedBy}\n      className={cn(FIELD_TRIGGER, \"pe-9\", label !== undefined && FIELD_FLOATING_PAD, isInvalid && FIELD_INVALID)}\n    >\n      {/* The trigger stays COMPACT — flag + code only — so it never clips in a\n          narrow field; the full names live in the (wider) popup (feedback\n          #308). */}\n      <span className={cn(\"flex items-center gap-2 min-w-0\", selected ? \"text-primary\" : \"text-placeholder\")}>\n        {selected ? (\n          <>\n            <CurrencyFlag country={selected.country} />\n            <span className=\"font-medium\">{selected.code}</span>\n          </>\n        ) : (\n          placeholder ?? text.currency\n        )}\n      </span>\n      <FieldChevron />\n    </button>\n  );\n\n  return (\n    // The wrapper takes `rest`; the trigger takes the name. This field's label is a\n    // floating <span> rather than a <label for>, so a caller who wants the control to\n    // announce more than the code inside it has nowhere else to put it.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined &&\n        (labelHint === undefined ? (\n          <FieldLabel>{label}</FieldLabel>\n        ) : (\n          // The label and its \"?\" as one row on the label's line, as FloatingField lays\n          // out a static label with a hint: the row places both, the label truncates\n          // and the hint keeps its width. `z-10` like FieldLabel's own: the trigger is\n          // `relative` and comes later, so it would paint over the strip.\n          <div className=\"pointer-events-none absolute inset-x-3 top-1 z-10 flex items-center gap-1\">\n            <FieldLabel className=\"static z-auto min-w-0 max-w-none\">{label}</FieldLabel>\n            <span className=\"pointer-events-auto flex shrink-0 items-center\">{labelHint}</span>\n          </div>\n        ))}\n      {/* No label line to ride: at the field's end edge, outside the box, as an\n          unlabelled Select places its FieldHint. */}\n      <EndHintRow hint={label === undefined ? labelHint : undefined}>{trigger}</EndHintRow>\n      {field.below}\n      {/* Portalled to <body> and anchored to the trigger (dev#548), so where it stands\n          in the flow no longer moves it. */}\n      <CurrencyOptionList\n        core={core}\n        listboxId={listboxId}\n        value={value}\n        codes={options}\n        currencyNames={currencyNames}\n        locale={locale}\n        searchPlaceholder={text.search}\n        // On a phone the list is a full-screen sheet, which needs the field's own name\n        // to say what it asks for (live #200).\n        sheetTitle={label ?? text.currency}\n        onChoose={(code) => {\n          onChange(code);\n          // Back to the trigger: the panel holding focus is about to unmount, and a\n          // keyboard user who has answered the field should stand on it, ready to Tab on.\n          closeToTrigger();\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/currency-select.tsx"],"sourcesContent":["import { useCallback, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { FieldChevron, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from \"./field-base\";\nimport { FieldLabel } from \"./field-parts\";\nimport { assignRef, EndHintRow, useFieldMessages, type FieldHelpProps } from \"./field-parts\";\nimport { cn } from \"../lib/cn\";\nimport { useComboboxCore } from \"./combobox-core\";\nimport {\n  CURRENCIES,\n  CurrencyFlag,\n  CurrencyOptionList,\n  currencyName,\n  getCurrency,\n  type CurrencyFlagProps,\n  type CurrencyOption,\n} from \"./currency-option-list\";\nimport {\n  DEFAULT_COMMON_LABELS,\n  DEFAULT_CURRENCY_LABELS,\n  useKitLabels,\n  useKitLocale,\n} from \"../i18n/kit-labels\";\n\n// The data and the flag are declared beside the one list both currency pickers render\n// (./currency-option-list, round 0.34 Wave 2, DUP-4) and are this module's exports, as\n// they always were.\nexport { CURRENCIES, CurrencyFlag, currencyName, getCurrency };\nexport type { CurrencyFlagProps, CurrencyOption };\n\n/** `onChange` is the kit's — \"a currency was picked\", carrying the code — rather\n *  than the div's form event. */\nexport interface CurrencySelectProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\">, FieldHelpProps {\n  value: string;\n  onChange: (code: string) => void;\n  placeholder?: string;\n  label?: ReactNode;\n  /**\n   * Restrict the pickable currencies to these ISO codes (e.g. only the\n   * currencies actually present in a budget). Order is preserved. Defaults to\n   * the full {@link CURRENCIES} list.\n   */\n  options?: string[];\n  /** Required and unanswered — {@link FIELD_INVALID}, the same rose border the\n   *  native `Select` has worn since feedback #235. Every field-styled control in\n   *  this package carries it now, so a form can mark any of its fields rather than\n   *  only the one that happened to have it first. */\n  invalid?: boolean;\n  /**\n   * What is wrong with the choice, in the caller's own words — {@link Input}'s `error`\n   * (keksdose K4: of the kit's pickers this one had neither a message nor a caption, so\n   * \"the account is in EUR\" sat in a loose `<p>` beside it that nothing pointed at).\n   * Rendered under the field, after a text `hint`; merged into the trigger's\n   * `aria-describedby`; implies `invalid`. `null`, `false` and `\"\"` are no message.\n   */\n  error?: ReactNode;\n  /**\n   * {@link Select}'s `hint`, the same rule (keksdose K4). A {@link FieldHint} \"?\" rides\n   * the label's line; on an unlabelled picker it sits at the field's end edge, outside\n   * the box. Plain TEXT (a string or a number) is a caption UNDER the field, attached\n   * to the trigger through `aria-describedby` — the label line has no room for a\n   * sentence.\n   */\n  hint?: ReactNode;\n  /** Every user-facing string this control owns, shaped like `AmountInput`'s\n   *  `labels` so the two currency pickers in the kit are configured the same way.\n   *\n   *  `search` exists because `placeholder` used to do BOTH jobs: it named the empty\n   *  field and, for want of anything else, it was also handed to the search box —\n   *  so a caller who wrote \"Currency\" got \"Currency\" as the prompt for typing a\n   *  filter, and a caller who wanted to name the filter had to rename the field.\n   *  `placeholder` still wins for the trigger, so nothing moves for the callers\n   *  that set it; what changes is that the search box no longer borrows it. */\n  labels?: {\n    /** The empty trigger, when `placeholder` is not given. */\n    currency?: string;\n    /** The filter box inside the open panel. */\n    search?: string;\n  };\n  /**\n   * Translated currency names, keyed by ISO code — `{ CHF: \"Schweizer Franken\" }`.\n   *\n   * {@link CURRENCIES} is data the package ships, so its 27 names were the one\n   * string in the row a consumer could not translate: the code and the symbol are\n   * language-neutral, and the name beside them stayed English in a German UI. This\n   * is a sparse OVERRIDE rather than a replacement list, so an app translates the\n   * eight currencies it actually uses and keeps the rest; forking `CURRENCIES` to\n   * get there would also fork the flags and symbols, which nobody wants to maintain.\n   *\n   * The search matches what is SHOWN — type \"Franken\" and you find CHF — because a\n   * filter that only matches the hidden English name is worse than no filter.\n   */\n  currencyNames?: Record<string, string>;\n  /** The TRIGGER — the focusable `<button>` — as a React 19 ref prop, as on\n   *  {@link MultiSelect} and {@link CountrySelect}: react-hook-form's focus-on-error\n   *  calls `focus()` on it (0.34, API-3, refactor audit 2026-10). Not the wrapper. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function CurrencySelect({\n  value,\n  onChange,\n  placeholder,\n  className,\n  label,\n  options,\n  invalid,\n  error,\n  hint,\n  help,\n  labels,\n  currencyNames,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  ref,\n  ...rest\n}: CurrencySelectProps) {\n  // The picker family's foundation (round 0.34 Wave 2, DUP-4): open state, the query,\n  // the highlighted row, portal anchoring, outside press, Escape on the kit's stack and\n  // Back — what `useDropdownSearch` gave it, and the rest it did not. `filter: false`:\n  // the list's own currency filter hands the panel its rows.\n  const core = useComboboxCore<string>({ filter: false, backCloses: true });\n  const { open, setOpen, triggerRef, closeToTrigger } = core;\n  // The core anchors the panel to the trigger and hands focus back to it; the caller's\n  // `ref` wants the same element. One callback feeds both, as on MultiSelect.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n  // `labels` > `currency` from the provider > English.\n  const text = useKitLabels(\"currency\", DEFAULT_CURRENCY_LABELS, labels);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale();\n\n  const selected = getCurrency(value);\n\n  const listboxId = `${useId()}-listbox`;\n  // Text is a caption under the field; anything else (a FieldHint) rides the label\n  // line — and a FieldHint is that caption at Large and on touch (§4). See `hint`. On\n  // the TRIGGER, which is the control with a role: a caller's description used to land\n  // on the wrapper `<div>` through the spread, where nothing reads it. The caller's ids\n  // first, then the caption, then the error — Select's order, through useFieldMessages\n  // since 0.34 (DUP-2, DUP-8).\n  const field = useFieldMessages({\n    hint,\n    help,\n    name: label ?? ariaLabel,\n    error,\n    invalid,\n    describedBy: ariaDescribedBy,\n    ariaInvalid,\n  });\n  const { labelHint, describedBy, isInvalid } = field;\n\n  // The trigger's NAME. A combobox does not take its name from its content, and the\n  // floating label is a <span>, not a <label for> — so without `aria-label` from the\n  // caller this trigger had no name at all (keksdose's test suite, 0.5.0). Composed the\n  // way MultiSelect and the entity comboboxes compose theirs, \"label: value\", with the\n  // `currency` word standing in for a missing label so it is never nameless.\n  const fieldName = typeof label === \"string\" ? label : text.currency;\n  const name = ariaLabel ?? common.fieldValue(fieldName, selected ? selected.code : (placeholder ?? text.currency));\n\n  const trigger = (\n    <button\n      // Where Escape on the open list hands focus back to (round 0.34 BUG-1).\n      ref={setTrigger}\n      type=\"button\"\n      aria-label={name}\n      onClick={() => setOpen((v) => !v)}\n      // Down/Up opens the list from the closed trigger, per the APG; Enter and Space\n      // already do through the button's own click.\n      onKeyDown={(e) => {\n        if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n          e.preventDefault();\n          setOpen(true);\n        }\n      }}\n      // The implicit `button` role supports neither `aria-expanded` nor\n      // `aria-invalid`, so this trigger previously wore a red border and announced\n      // nothing about being invalid or about there being a list behind it. The role\n      // that DESCRIBES it is the one that also supports the attributes — the same\n      // treatment its siblings (MultiSelect, the entity comboboxes) now carry, so a\n      // form row of pickers reads the same way throughout. And since Wave 2 the popup\n      // IS the listbox it promises, of options with the chosen one selected (BUG-12).\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      aria-controls={listboxId}\n      aria-expanded={open}\n      aria-invalid={isInvalid || undefined}\n      aria-describedby={describedBy}\n      className={cn(FIELD_TRIGGER, \"pe-9\", label !== undefined && FIELD_FLOATING_PAD, isInvalid && FIELD_INVALID)}\n    >\n      {/* The trigger stays COMPACT — flag + code only — so it never clips in a\n          narrow field; the full names live in the (wider) popup (feedback\n          #308). */}\n      <span className={cn(\"flex items-center gap-2 min-w-0\", selected ? \"text-primary\" : \"text-placeholder\")}>\n        {selected ? (\n          <>\n            <CurrencyFlag country={selected.country} />\n            <span className=\"font-medium\">{selected.code}</span>\n          </>\n        ) : (\n          placeholder ?? text.currency\n        )}\n      </span>\n      <FieldChevron />\n    </button>\n  );\n\n  return (\n    // The wrapper takes `rest`; the trigger takes the name. This field's label is a\n    // floating <span> rather than a <label for>, so a caller who wants the control to\n    // announce more than the code inside it has nowhere else to put it.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined &&\n        (labelHint === undefined ? (\n          <FieldLabel>{label}</FieldLabel>\n        ) : (\n          // The label and its \"?\" as one row on the label's line, as FloatingField lays\n          // out a static label with a hint: the row places both, the label truncates\n          // and the hint keeps its width. `z-10` like FieldLabel's own: the trigger is\n          // `relative` and comes later, so it would paint over the strip.\n          <div className=\"pointer-events-none absolute inset-x-3 top-1 z-10 flex items-center gap-1\">\n            <FieldLabel className=\"static z-auto min-w-0 max-w-none\">{label}</FieldLabel>\n            <span className=\"pointer-events-auto flex shrink-0 items-center\">{labelHint}</span>\n          </div>\n        ))}\n      {/* No label line to ride: at the field's end edge, outside the box, as an\n          unlabelled Select places its FieldHint. */}\n      <EndHintRow hint={label === undefined ? labelHint : undefined}>{trigger}</EndHintRow>\n      {field.below}\n      {/* Portalled to <body> and anchored to the trigger (dev#548), so where it stands\n          in the flow no longer moves it. */}\n      <CurrencyOptionList\n        core={core}\n        listboxId={listboxId}\n        value={value}\n        codes={options}\n        currencyNames={currencyNames}\n        locale={locale}\n        searchPlaceholder={text.search}\n        // On a phone the list is a full-screen sheet, which needs the field's own name\n        // to say what it asks for (live #200).\n        sheetTitle={label ?? text.currency}\n        onChoose={(code) => {\n          onChange(code);\n          // Back to the trigger: the panel holding focus is about to unmount, and a\n          // keyboard user who has answered the field should stand on it, ready to Tab on.\n          closeToTrigger();\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/danger-confirm.d.ts

@@ -49,7 +49,7 @@ export interface CurrentPasswordInputProps extends Omit<InputProps, "type" | "au
      * is named another way (`aria-label` / `aria-labelledby`), which then stays the only
      * name. Pass the app's own word on a sign-in form ("Password", "Your password"), or
      * `null` for a field whose `<label htmlFor>` is drawn elsewhere (a form library's
-     * `FormLabel`), which would otherwise be labelled twice.
+     * label), which would otherwise be labelled twice.
      */
     label?: ReactNode;
     /** The value as a string — the `(next) => …` shape, so a caller holding it in
@@ -81,8 +81,8 @@ export interface CurrentPasswordInputProps extends Omit<InputProps, "type" | "au
  *
  * Everything else is {@link Input}: the reveal toggle, `error` (under the field,
  * `aria-describedby`, `aria-invalid`), `invalid`, `name`, `id`, `autoFocus`, `required`.
- * The ref is the `<input>`, so it works with `@eifi1/ui-kit/rhf`'s `FormControl` /
- * a `register()` spread, and controlled or uncontrolled.
+ * The ref is the `<input>`, so it works with `@eifi1/ui-kit/rhf`'s `RhfField` / a
+ * `register()` spread, and controlled or uncontrolled.
  *
  * ```tsx
  * <CurrentPasswordInput name="password" label={t("password")} error={errors.password?.message}