@eifi1/ui-kit 0.21.0 → 0.22.0

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

@@ -1,161 +1,66 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { TypedMatch } from './danger-confirm.js';
-
-/**
- * The `confirmDialog` namespace of `<UiKitProvider labels>`: the two buttons' fallback
- * text. A call that knows what it is confirming says so per call (`confirmLabel:
- * "Delete budget"`), which is what the dialog is for — these are for the rest.
- */
-interface ConfirmDialogLabels {
-    confirm: string;
-    cancel: string;
-    /**
-     * 0.18: label of the field a `requireTyped` confirm shows. A FUNCTION of the text to
-     * type by default — where the address sits in the sentence moves with the language —
-     * or a finished STRING. A call's own `typedLabel` wins over it.
-     *
-     * Required, like every key of a namespace: the shipped catalogues
-     * (`@eifi1/ui-kit/i18n/<code>`) translate it, and an app's own full catalogue should
-     * hear about the new string from the compiler rather than show it in English.
-     */
-    typed: string | ((text: string) => string);
-}
-/** `satisfies` rather than a type annotation, so `.typed` stays known-callable for a
- *  caller composing its own label from it. */
-declare const DEFAULT_CONFIRM_DIALOG_LABELS: {
-    confirm: string;
-    cancel: string;
-    typed: (text: string) => string;
-};
-type ConfirmTone = "danger" | "warning" | "neutral";
-interface ConfirmOptions {
-    /** The question, and the dialog's accessible name. */
-    title: ReactNode;
-    /** The smaller line under it — the consequence. Wired to `aria-describedby`. */
-    body?: ReactNode;
-    /** Default: `confirmDialog.confirm` from the provider, else "Confirm". */
-    confirmLabel?: ReactNode;
-    /** Default: `confirmDialog.cancel` from the provider, else "Cancel". */
-    cancelLabel?: ReactNode;
-    /**
-     * `"danger"` for what cannot be undone (a delete): the confirm is the destructive
-     * button and focus starts on CANCEL. `"warning"` and `"neutral"` (default) start on
-     * the confirm. See {@link ConfirmProvider} for why the two differ.
-     */
-    tone?: ConfirmTone;
-    /**
-     * 0.18: make the user TYPE this before confirm is enabled — the target account's
-     * e-mail address, a budget's name. For the action whose risk is not "did you mean
-     * it" but "is this the right row": an admin who deactivates somebody has already
-     * proven who THEY are (they passed the admin gate); typing the address is what
-     * proves they read which account they are on. Both keksdose (`TYPE_EMAIL`) and
-     * Kurvenschmiede (`TypedConfirm`) built this beside `useConfirm` because it had no
-     * field.
-     *
-     * The dialog then shows one text field under the body and focuses it (whatever the
-     * tone: a reflexive Enter cannot confirm a field that does not match yet). Confirm
-     * stays disabled until the text matches; Enter in the field confirms once it does.
-     * The answer is still `true` / `false` — the text matched what you passed, so send
-     * that to the server if it asks for the address too, not the user's spelling.
-     */
-    requireTyped?: string;
-    /** Label of that field. Default: `confirmDialog.typed` — `Type “a@b.c” to confirm`. */
-    typedLabel?: string;
-    /**
-     * How the typed text is compared. Default `"caseless"`: surrounding spaces and case
-     * ignored, the rule both apps applied to an address. `"trim"` keeps case, `"exact"`
-     * keeps spaces too — for a phrase like "DELETE" whose contract is "exactly this".
-     */
-    typedMatch?: TypedMatch;
-}
-type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
-/**
- * `const confirm = useConfirm()` → `if (!(await confirm({ title }))) return`.
- *
- * The returned function is STABLE for the life of the provider, so it can sit in an
- * effect's or a `useCallback`'s dependency list without re-running it.
- *
- * Throws outside a {@link ConfirmProvider}, rather than falling back to
- * `window.confirm`: a silent fallback is exactly the native dialog the three apps are
- * migrating away from, and it would look like the migration had worked.
- */
-declare function useConfirm(): ConfirmFn;
-interface ConfirmProviderProps {
-    children: ReactNode;
-}
-/**
- * The host for {@link useConfirm}: ONE confirm dialog for the whole app, rendered on
- * {@link DialogFrame}, answering a promise.
- *
- * Asked for by all three apps at once — keksdose has 20+ `window.confirm` calls,
- * kastlan 7, lenkbank 1. The native dialog cannot be translated past its OK/Cancel
- * (those are the BROWSER's language, not the app's), cannot say which button is the
- * destructive one, and on an installed PWA it prints the origin over the question.
- * A promise is what lets each of those call sites change by one `await`:
- *
- *     if (!window.confirm(t("budget.delete_confirm"))) return;
- *     // becomes
- *     if (!(await confirm({ title: t("budget.delete_confirm"), tone: "danger" }))) return;
- *
- * ## Its own provider, not part of `UiKitProvider`
- *
- * `UiKitProvider` renders nothing: it is strings and a locale, it is optional, and it
- * NESTS (an inner one re-labels one table). A dialog host inside it would mount a host
- * per nested provider, and a component under the inner one would open a second dialog
- * layer of its own. So the host is its own component, mounted once — inside the
- * `UiKitProvider` whose strings it should speak, which is also the order the labels
- * need.
- *
- * ## Focus
- *
- * On CANCEL for `tone: "danger"`, on CONFIRM otherwise. A confirm is often answered by
- * a reflexive Enter — the key that pressed the Delete button in the first place may
- * still be down — and for an action that cannot be undone that reflex must land on the
- * harmless answer; `DangerConfirm` makes the same call ("never to the destructive
- * button itself"). For everything else the confirm is the expected answer and Enter
- * accepting it is what `window.confirm` taught users, which the migrating call sites'
- * users already rely on. Focus returns to whatever opened it, through `Modal`'s trap.
- *
- * ## Escape, the backdrop, Back and Cancel all answer `false`
- *
- * Only the confirm button answers `true`. Anything that merely dismisses is a no.
- *
- * ## A second `confirm` while one is open QUEUES
- *
- * It is shown when the first is answered, and each call gets its own answer. The
- * alternative — answering the open one `false` to make room — would answer a question
- * the user never answered: a background prompt ("your session is about to expire")
- * would cancel the delete they were reading. `false` has to mean "the user said no".
- * A double-click cannot queue two of the same: the first click opens the modal
- * synchronously (a discrete event's update is flushed before the next one), so the
- * second lands on the open dialog rather than on the button — at worst on its
- * backdrop, which answers `false`, the safe way to be wrong.
- *
- * Unmounting the provider answers everything still pending `false`, so no caller's
- * `await` hangs forever.
- *
- * ## keksdose's synchronous call (transaction-swipe-plan.ts)
- *
- * `buildTxSwipeActions` is synchronous, but its `window.confirm` sits inside the
- * action THUNK (`confirmed(key, run)` returns `() => { if (confirm(…)) run() }`), and a
- * thunk may be async without its caller knowing. So the plan builder stays
- * synchronous; it takes the confirm as an argument and the thunk awaits it:
- *
- *     // mobile-transaction-list.tsx
- *     const confirm = useConfirm();
- *     buildTxSwipeActions({ tx, …, confirm });
- *
- *     // transaction-swipe-plan.ts
- *     const confirmed = (messageKey: string, run: () => void) => () => {
- *       void confirm({ title: t(messageKey), tone: "danger" }).then((ok) => ok && run());
- *     };
- *
- * Its test then passes `confirm: vi.fn(async () => false)` instead of stubbing the
- * global, and asserts after an `await` (the mutation now runs a microtask later). The
- * row snaps back when the swipe commits, before the answer — which is right: the
- * dialog, not the half-swiped row, is where the question now is.
- */
-declare function ConfirmProvider({ children }: ConfirmProviderProps): react.JSX.Element;
-
-export { type ConfirmDialogLabels, type ConfirmFn, type ConfirmOptions, ConfirmProvider, type ConfirmProviderProps, type ConfirmTone, DEFAULT_CONFIRM_DIALOG_LABELS, useConfirm };
+import 'react';
+export { E as ConfirmDialogLabels, F as ConfirmFn, G as ConfirmOptions, H as ConfirmProvider, I as ConfirmProviderProps, J as ConfirmTone, W as DEFAULT_CONFIRM_DIALOG_LABELS, bT as useConfirm } from '../kit-labels-R8mIAc9N.js';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './mini-calendar.js';
+import './calendar-heatmap.js';
+import './popover.js';
+import './chip.js';
+import 'lucide-react';
+import './field-sync.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './pie-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './swatch-picker.js';
+import './tile-radio.js';
+import './icon-picker.js';
+import './dialog-frame.js';
+import './modal.js';
+import '../hooks/use-search-param-state.js';
+import './measured-grid.js';
+import '../feedback-attachment-NhUm7Zga.js';
+import '../feedback/feedback-thread.js';
+import '../feedback/feedback-inbox.js';
+import './account-settings-labels.js';
+import './floating-panel.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './signed-amount.js';
+import './breadcrumbs.js';
+import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';
+import './write-lock.js';
+import './legal.js';
+import './account-chips.js';
+import '../lib/format.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';
+import './translation-review-labels.js';
+import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';

package/dist/components/copy-button.d.ts

@@ -1,7 +1,9 @@
 import 'react';
-export { D as CopyButton, E as CopyButtonLabels, F as CopyButtonProps, L as DEFAULT_COPY_BUTTON_LABELS } from '../kit-labels-D1J2_jyD.js';
+export { K as CopyButton, L as CopyButtonLabels, M as CopyButtonProps, X as DEFAULT_COPY_BUTTON_LABELS } from '../kit-labels-R8mIAc9N.js';
 import './tooltip.js';
-import './data-table-labels.js';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
@@ -21,7 +23,6 @@ import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
-import './danger-confirm.js';
 import './swatch-picker.js';
 import './tile-radio.js';
 import './icon-picker.js';
@@ -29,11 +30,10 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback-attachment-WFiXJ8We.js';
+import '../feedback-attachment-NhUm7Zga.js';
 import '../feedback/feedback-thread.js';
 import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
-import './confirm-dialog.js';
 import './floating-panel.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
@@ -54,11 +54,13 @@ import './write-lock.js';
 import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
-import '../data-table-3mi2R3so.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
 import './translation-review-labels.js';
 import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';

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

@@ -0,0 +1,124 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+/** The words {@link CountrySelect} renders on its own behalf. The list's "no results",
+ *  "loading" and result-count announcements are the shared `combobox` namespace's,
+ *  as on every other searchable picker. */
+interface CountrySelectLabels {
+    /** What the field is, when the caller gives no `label`: the first half of the
+     *  trigger's accessible name, the phone sheet's title, and the empty trigger's
+     *  text. */
+    country: string;
+    /** The search box in the open list. */
+    search: string;
+    /** The heading between the `preferred` countries and all the others. Shown only
+     *  when `preferred` puts something above it. */
+    others: string;
+}
+declare const DEFAULT_COUNTRY_SELECT_LABELS: CountrySelectLabels;
+/**
+ * `onChange` is the kit's — "a country was picked", carrying its code — rather than
+ * the div's form event. `id` and the `aria-*` wiring below go to the TRIGGER, which is
+ * the control a reader meets; everything else in `rest` dresses the wrapper.
+ */
+interface CountrySelectProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> {
+    /** The chosen country as an ISO 3166-1 alpha-2 code ("CH"), in either case;
+     *  `null`, `undefined` or `""` when none is. A code outside the list still shows
+     *  its name — the list restricts what can be PICKED, not what can be shown. */
+    value: string | null | undefined;
+    /** A country was picked: its alpha-2 code, always upper-case. */
+    onChange: (code: string) => void;
+    /**
+     * Offer only these codes (any case; duplicates and malformed entries dropped).
+     * Default: every ISO 3166-1 country, {@link COUNTRY_CODES}. Sorted by name either
+     * way — the order given is not kept, because the reader looks a country up by its
+     * name in their own language, and any other order is one they cannot predict.
+     *
+     * keksdose's bank picker offers the fifteen countries its banks are in
+     * (DE AT CH FR IT ES NL BE PT PL SE DK FI GB IE). A code that is not in ISO's list
+     * is allowed here on purpose: `XK` (Kosovo) is the app's decision, not the kit's.
+     */
+    countries?: readonly string[];
+    /**
+     * A short group shown FIRST, in the order given, above the alphabetical rest —
+     * kastlan's CH, LI, DE, AT, FR, IT, the six countries most of its customers live
+     * in, out of a list of 249. Each code appears once: a preferred country is not
+     * repeated in the rest. The rest gets a heading (`labels.others`) so the boundary
+     * is visible. Search keeps the split: matching preferred countries stay on top.
+     * Codes not in `countries` are ignored — `countries` decides what can be picked.
+     */
+    preferred?: readonly string[];
+    /**
+     * Draw each country's flag as a flag-icons span (`fi fi-ch`), in the rows and on
+     * the trigger. Default `false`, because the kit ships no flag stylesheet — the same
+     * convention as `LanguageMenu`'s `country` and `CurrencySelect`: the host imports
+     * `flag-icons/css/flag-icons.min.css`, and without it a flag is an empty box.
+     */
+    flags?: boolean;
+    /** The floating label, as on every field. A string also names the trigger
+     *  ("Country: Switzerland"). */
+    label?: ReactNode;
+    /** As {@link Select}'s `hint`: plain TEXT is a caption under the field, attached
+     *  through `aria-describedby`; a {@link FieldHint} rides the label line (or the
+     *  field's end, when there is no label). */
+    hint?: ReactNode;
+    /** As {@link Input}'s `error`: rendered under the field, on the trigger's
+     *  `aria-describedby`, and implies `invalid`. */
+    error?: ReactNode;
+    /** Required and unanswered — {@link FIELD_INVALID}, as on every field. */
+    invalid?: boolean;
+    /** The empty trigger's text. Default: nothing when the field has a `label` (the
+     *  label already says what goes here), else `labels.country`. */
+    placeholder?: string;
+    /** As on the other pickers: no focus, no list, the settled look. */
+    disabled?: boolean;
+    /**
+     * Why the country cannot be changed — {@link Button}'s `disabledReason`, for a field
+     * that saves itself. The trigger stays focusable and `aria-disabled`, the list does
+     * not open and `onChange` never fires; the reason is in the kit {@link Tooltip} and
+     * on the trigger's `aria-describedby`. Wins over `disabled`.
+     */
+    disabledReason?: ReactNode;
+    /**
+     * This select SAVES on change (a settings row with no Save button). Under a locked
+     * {@link WriteLockProvider} it is locked the `disabledReason` way, with the lock's
+     * reason. A country field inside a form that has its own Save stays editable under
+     * the lock — leave this off there, and put `commit` on the Save.
+     */
+    commit?: boolean;
+    /** The language the names are in. Default: the `<UiKitProvider locale>`, else
+     *  English (see {@link countryName}). */
+    locale?: string;
+    /** Per-instance overrides of {@link CountrySelectLabels}, over the provider's
+     *  `countrySelect` namespace, over English. */
+    labels?: Partial<CountrySelectLabels>;
+}
+/**
+ * A country picker: the value is the ISO 3166-1 alpha-2 code ("CH"), the names are the
+ * runtime's own (`Intl.DisplayNames`) in the provider's locale, sorted by that
+ * locale's collation. Requested by kastlan (customer and handover addresses, with its
+ * six neighbours on top) and keksdose (the bank picker's fifteen countries) — both
+ * apps carried a hand-written list of names in two languages.
+ *
+ * ## Built on the kit's searchable combobox
+ *
+ * 249 countries is not a menu, it is a lookup, and the list has to work on a phone. So
+ * this is the entity pickers' machinery — `useComboboxCore` and `ComboboxPanel`, which
+ * {@link EntityCombobox} is also made of — not a native `<select>`: the anchored panel
+ * with a search box on a pointer device, the full-screen sheet with its own search box
+ * on a phone (live #200), the same keyboard (APG listbox), the same announcements, the
+ * same group headings. Only the trigger is this component's own, because the trigger
+ * is where the write lock lives: `EntityCombobox`'s is a native `disabled` button,
+ * and a locked field has to stay focusable to say why.
+ *
+ * The search is this component's own too: it folds accents and case ("osterreich"
+ * finds Österreich), matches the code ("ch" ranks Switzerland first), and ranks
+ * name-starts above name-contains. The panel is handed those rows in place of the
+ * core's plain substring filter.
+ *
+ * Field anatomy as on every field: floating `label`, `hint`, `error`, `invalid`; the
+ * trigger is named "label: value" as the other trigger pickers are.
+ */
+declare function CountrySelect({ value, onChange, countries, preferred, flags, label, hint, error, invalid, placeholder, disabled, disabledReason: ownReason, commit, locale: localeProp, labels: labelsProp, className, id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, ...rest }: CountrySelectProps): react.JSX.Element;
+
+export { CountrySelect, type CountrySelectLabels, type CountrySelectProps, DEFAULT_COUNTRY_SELECT_LABELS };

package/dist/components/country-select.js

@@ -0,0 +1,237 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { cn } from "../lib/cn.js";
+import { COUNTRY_CODES, countryName, normalizeCountryCode } from "../lib/countries.js";
+import { FieldChevron, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FloatingField } from "./ui.js";
+import { Tooltip } from "./tooltip.js";
+import { CurrencyFlag } from "./currency-select.js";
+import {
+  ComboboxPanel,
+  useComboboxCore,
+  useComboboxFieldError
+} from "./combobox-core.js";
+import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
+import { useCommitReason } from "./write-lock.js";
+import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+const DEFAULT_COUNTRY_SELECT_LABELS = {
+  country: "Country",
+  search: "Search country",
+  others: "Other countries"
+};
+function fold(s) {
+  return s.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
+}
+function rank(e, q) {
+  if (e.code.toLowerCase() === q) return 0;
+  if (e.folded.startsWith(q)) return 1;
+  return e.folded.includes(q) ? 2 : -1;
+}
+function search(entries, q) {
+  return entries.map((e) => ({ e, r: rank(e, q) })).filter((x) => x.r >= 0).sort((a, b) => a.r - b.r).map((x) => x.e);
+}
+function toOption(e, flags, group) {
+  return {
+    value: e.code,
+    label: e.name,
+    icon: flags ? /* @__PURE__ */ jsx(CurrencyFlag, { country: e.code.toLowerCase() }) : void 0,
+    group
+  };
+}
+function collator(locale) {
+  try {
+    return new Intl.Collator(locale);
+  } catch {
+    return new Intl.Collator();
+  }
+}
+function CountrySelect({
+  value,
+  onChange,
+  countries,
+  preferred,
+  flags = false,
+  label,
+  hint,
+  error,
+  invalid,
+  placeholder,
+  disabled,
+  disabledReason: ownReason,
+  commit,
+  locale: localeProp,
+  labels: labelsProp,
+  className,
+  id,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  ...rest
+}) {
+  const text = useKitLabels("countrySelect", DEFAULT_COUNTRY_SELECT_LABELS, labelsProp);
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const locale = useKitLocale(localeProp) ?? "en";
+  const countriesKey = countries?.join(",");
+  const preferredKey = preferred?.join(",");
+  const { top, rest: others } = useMemo(() => {
+    const seen = /* @__PURE__ */ new Set();
+    const pool = [];
+    for (const raw of countriesKey !== void 0 ? countriesKey.split(",") : COUNTRY_CODES) {
+      const code2 = normalizeCountryCode(raw);
+      if (code2 && !seen.has(code2)) {
+        seen.add(code2);
+        pool.push(code2);
+      }
+    }
+    const entry = (code2) => {
+      const name2 = countryName(code2, locale);
+      return { code: code2, name: name2, folded: fold(name2) };
+    };
+    const firsts = [];
+    const picked = /* @__PURE__ */ new Set();
+    for (const raw of preferredKey ? preferredKey.split(",") : []) {
+      const code2 = normalizeCountryCode(raw);
+      if (code2 && seen.has(code2) && !picked.has(code2)) {
+        picked.add(code2);
+        firsts.push(entry(code2));
+      }
+    }
+    const compare = collator(locale).compare;
+    const sorted = pool.filter((c) => !picked.has(c)).map(entry).sort((a, b) => compare(a.name, b.name));
+    return { top: firsts, rest: sorted };
+  }, [countriesKey, preferredKey, locale]);
+  const allOptions = useMemo(
+    () => [...top, ...others].map((e) => toOption(e, flags)),
+    [top, others, flags]
+  );
+  const core = useComboboxCore({ options: allOptions, filter: false });
+  const { open, setOpen, query, triggerRef, closeToTrigger } = core;
+  const q = fold(query.trim());
+  const results = useMemo(() => {
+    const firsts = q ? search(top, q) : top;
+    const below = q ? search(others, q) : others;
+    const heading = firsts.length > 0 ? text.others : void 0;
+    return [...firsts.map((e) => toOption(e, flags)), ...below.map((e) => toOption(e, flags, heading))];
+  }, [top, others, q, text.others, flags]);
+  const reason = useCommitReason(commit, ownReason);
+  const locked = hasMessage(reason);
+  const inert = locked || Boolean(disabled);
+  if (inert && open) setOpen(false);
+  const generated = useId();
+  const triggerId = id ?? generated;
+  const listboxId = `${generated}-listbox`;
+  const hintId = useId();
+  const reasonId = useId();
+  const textHint = typeof hint === "string" && hint !== "" || typeof hint === "number";
+  const field = useComboboxFieldError(
+    error,
+    invalid || ariaInvalid === true || ariaInvalid === "true",
+    // The caller's, then the standing advice, then (inside) the error — the order every
+    // field keeps — and the lock's reason last, while there is one.
+    mergeDescribedBy(ariaDescribedBy, textHint && hintId)
+  );
+  const code = normalizeCountryCode(value);
+  const selectedName = code ? countryName(code, locale) : void 0;
+  const emptyText = placeholder ?? (label === void 0 ? text.country : "");
+  const fieldName = typeof label === "string" ? label : text.country;
+  const name = ariaLabel ?? (selectedName !== void 0 ? common.fieldValue(fieldName, selectedName) : placeholder ? common.fieldValue(fieldName, placeholder) : fieldName);
+  const choose = (o) => {
+    if (inert) return;
+    onChange(o.value);
+    closeToTrigger();
+  };
+  const trigger = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: triggerRef,
+      id: triggerId,
+      type: "button",
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      "aria-controls": listboxId,
+      "aria-expanded": open,
+      "aria-label": name,
+      "aria-invalid": field.isInvalid || void 0,
+      "aria-required": ariaRequired,
+      "aria-describedby": mergeDescribedBy(field.describedBy, locked && reasonId),
+      disabled: locked ? void 0 : disabled,
+      "aria-disabled": locked || void 0,
+      onClick: (e) => {
+        if (inert) {
+          e.preventDefault();
+          return;
+        }
+        setOpen((o) => !o);
+      },
+      onKeyDown: (e) => {
+        if (inert) return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          e.preventDefault();
+          setOpen(true);
+        }
+      },
+      className: cn(
+        FIELD_TRIGGER,
+        // `peer` dims the floating label with a natively disabled trigger, as Select's.
+        "peer pe-9",
+        label !== void 0 && FIELD_FLOATING_PAD,
+        inert && "cursor-not-allowed opacity-50",
+        field.isInvalid && FIELD_INVALID
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+          flags && code && /* @__PURE__ */ jsx(CurrencyFlag, { country: code.toLowerCase() }),
+          /* @__PURE__ */ jsx("span", { className: cn("truncate", selectedName === void 0 && "text-[var(--text-placeholder)]"), children: selectedName ?? emptyText })
+        ] }),
+        /* @__PURE__ */ jsx(FieldChevron, {})
+      ]
+    }
+  );
+  const control = locked ? (
+    // In a FRAGMENT, as Button does, so the Tooltip does not clone its bubble into the
+    // description as well — the hidden copy is what `aria-describedby` points at.
+    /* @__PURE__ */ jsx(Tooltip, { label: reason, className: "flex w-full", children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      trigger,
+      /* @__PURE__ */ jsx("span", { id: reasonId, hidden: true, children: reason })
+    ] }) })
+  ) : trigger;
+  const labelHint = textHint ? void 0 : hasMessage(hint) ? hint : void 0;
+  const box = label !== void 0 ? /* @__PURE__ */ jsx(FloatingField, { htmlFor: triggerId, label, staticLabel: true, hint: labelHint, children: control }) : labelHint !== void 0 ? (
+    // No label line to ride: the "?" goes at the field's end, outside the box, as on
+    // an unlabelled Select.
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative min-w-0 flex-1", children: control }),
+      /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: labelHint })
+    ] })
+  ) : /* @__PURE__ */ jsx("div", { className: "relative", children: control });
+  return (
+    // `rest` dresses the wrapper — a `data-tour` anchor, a test id. The name, the
+    // description and the invalid state are on the trigger above.
+    /* @__PURE__ */ jsxs("div", { ...rest, className, children: [
+      box,
+      textHint && /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1 text-[11px] leading-tight text-[var(--text-muted)]", children: hint }),
+      field.errorEl,
+      /* @__PURE__ */ jsx(
+        ComboboxPanel,
+        {
+          core: { ...core, results },
+          listboxId,
+          sheetTitle: label ?? text.country,
+          searchPlaceholder: text.search,
+          isSelected: (v) => v === code,
+          onChoose: choose,
+          showCreate: false,
+          onCreate: () => {
+          },
+          createContent: null
+        }
+      )
+    ] })
+  );
+}
+export {
+  CountrySelect,
+  DEFAULT_COUNTRY_SELECT_LABELS
+};
+//# sourceMappingURL=country-select.js.map