@eifi1/ui-kit 0.6.0 → 0.7.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/currency-select.tsx"],"sourcesContent":["import { useMemo, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from \"./dropdown\";\nimport {\n  DEFAULT_COMMON_LABELS,\n  DEFAULT_CURRENCY_LABELS,\n  useKitLabels,\n  useKitLocale,\n} from \"../i18n/kit-labels\";\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 ComponentPropsWithoutRef<\"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-[15px] 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\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  /** 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}\n\nexport function CurrencySelect({\n  value,\n  onChange,\n  placeholder,\n  className,\n  label,\n  options,\n  invalid,\n  labels,\n  currencyNames,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: CurrencySelectProps) {\n  const { open, setOpen, wrapperRef, query, setQuery, inputRef } = useDropdownSearch();\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  const pool = useMemo(() => {\n    if (!options) return CURRENCIES;\n    // Keep the caller's order; drop codes we don't have a definition for.\n    return options.map((code) => getCurrency(code)).filter((c): c is CurrencyOption => !!c);\n  }, [options]);\n  const filtered = useMemo(() => {\n    const q = query.trim().toLocaleLowerCase(locale);\n    if (!q) return pool;\n    return pool.filter(\n      (c) =>\n        c.code.toLowerCase().includes(q) ||\n        currencyName(c, currencyNames, locale).toLocaleLowerCase(locale).includes(q) ||\n        c.symbol.toLowerCase().includes(q),\n    );\n  }, [query, pool, currencyNames, locale]);\n\n  const listboxId = `${useId()}-listbox`;\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  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} ref={wrapperRef} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      <button\n        type=\"button\"\n        aria-label={name}\n        onClick={() => setOpen((v) => !v)}\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.\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-controls={listboxId}\n        aria-expanded={open}\n        aria-invalid={invalid || undefined}\n        className={cn(FIELD_TRIGGER, \"pr-9\", label !== undefined && FIELD_FLOATING_PAD, invalid && 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-[var(--text-primary)]\" : \"text-[var(--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      {open && (\n        <DropdownPanel\n          // At least as wide as the trigger, but grows to fit the full currency\n          // names and caps so it never runs off-screen. RIGHT-aligned so it grows\n          // leftward instead of pushing the page width when there's content to the\n          // right of the field (feedback #308).\n          className=\"right-0 min-w-full w-max max-w-[min(20rem,calc(100vw-2rem))]\"\n          empty={filtered.length === 0}\n          listProps={{ id: listboxId }}\n          header={\n            <DropdownSearchHeader\n              query={query}\n              onQueryChange={setQuery}\n              inputRef={inputRef}\n              placeholder={text.search}\n            />\n          }\n        >\n          {filtered.map((c) => {\n              const active = c.code === selected?.code;\n              return (\n                <li key={c.code}>\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      onChange(c.code);\n                      setOpen(false);\n                    }}\n                    className={cn(\n                      \"flex w-full items-center justify-between gap-2 px-3 py-2 text-sm text-left hover:bg-[var(--bg-hover)]\",\n                      active && \"bg-[var(--bg-active)]\",\n                    )}\n                  >\n                    <span className=\"flex items-center gap-2 min-w-0\">\n                      <CurrencyFlag country={c.country} />\n                      <span className=\"font-mono text-[var(--text-muted)] w-8 shrink-0\">{c.symbol}</span>\n                      <span className=\"font-medium text-[var(--text-primary)]\">{c.code}</span>\n                      <span className=\"text-[var(--text-muted)] truncate\">{currencyName(c, currencyNames, locale)}</span>\n                    </span>\n                    {active && <Check className=\"size-4 text-[var(--text-secondary)] shrink-0\" />}\n                  </button>\n                </li>\n              );\n            })}\n        </DropdownPanel>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/currency-select.tsx"],"sourcesContent":["import { useMemo, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from \"./dropdown\";\nimport {\n  DEFAULT_COMMON_LABELS,\n  DEFAULT_CURRENCY_LABELS,\n  useKitLabels,\n  useKitLocale,\n} from \"../i18n/kit-labels\";\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 ComponentPropsWithoutRef<\"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-[15px] 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\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  /** 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}\n\nexport function CurrencySelect({\n  value,\n  onChange,\n  placeholder,\n  className,\n  label,\n  options,\n  invalid,\n  labels,\n  currencyNames,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: CurrencySelectProps) {\n  const { open, setOpen, wrapperRef, query, setQuery, inputRef } = useDropdownSearch();\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  const pool = useMemo(() => {\n    if (!options) return CURRENCIES;\n    // Keep the caller's order; drop codes we don't have a definition for.\n    return options.map((code) => getCurrency(code)).filter((c): c is CurrencyOption => !!c);\n  }, [options]);\n  const filtered = useMemo(() => {\n    const q = query.trim().toLocaleLowerCase(locale);\n    if (!q) return pool;\n    return pool.filter(\n      (c) =>\n        c.code.toLowerCase().includes(q) ||\n        currencyName(c, currencyNames, locale).toLocaleLowerCase(locale).includes(q) ||\n        c.symbol.toLowerCase().includes(q),\n    );\n  }, [query, pool, currencyNames, locale]);\n\n  const listboxId = `${useId()}-listbox`;\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  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} ref={wrapperRef} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      <button\n        type=\"button\"\n        aria-label={name}\n        onClick={() => setOpen((v) => !v)}\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.\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-controls={listboxId}\n        aria-expanded={open}\n        aria-invalid={invalid || undefined}\n        className={cn(FIELD_TRIGGER, \"pe-9\", label !== undefined && FIELD_FLOATING_PAD, invalid && 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-[var(--text-primary)]\" : \"text-[var(--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      {open && (\n        <DropdownPanel\n          // At least as wide as the trigger, but grows to fit the full currency\n          // names and caps so it never runs off-screen. END-aligned so it grows\n          // toward the start instead of pushing the page width when there's content\n          // after the field (feedback #308).\n          className=\"end-0 min-w-full w-max max-w-[min(20rem,calc(100vw-2rem))]\"\n          empty={filtered.length === 0}\n          listProps={{ id: listboxId }}\n          header={\n            <DropdownSearchHeader\n              query={query}\n              onQueryChange={setQuery}\n              inputRef={inputRef}\n              placeholder={text.search}\n            />\n          }\n        >\n          {filtered.map((c) => {\n              const active = c.code === selected?.code;\n              return (\n                <li key={c.code}>\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      onChange(c.code);\n                      setOpen(false);\n                    }}\n                    className={cn(\n                      \"flex w-full items-center justify-between gap-2 px-3 py-2 text-sm text-start hover:bg-[var(--bg-hover)]\",\n                      active && \"bg-[var(--bg-active)]\",\n                    )}\n                  >\n                    <span className=\"flex items-center gap-2 min-w-0\">\n                      <CurrencyFlag country={c.country} />\n                      <span className=\"font-mono text-[var(--text-muted)] w-8 shrink-0\">{c.symbol}</span>\n                      <span className=\"font-medium text-[var(--text-primary)]\">{c.code}</span>\n                      <span className=\"text-[var(--text-muted)] truncate\">{currencyName(c, currencyNames, locale)}</span>\n                    </span>\n                    {active && <Check className=\"size-4 text-[var(--text-secondary)] shrink-0\" />}\n                  </button>\n                </li>\n              );\n            })}\n        </DropdownPanel>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -17,12 +17,29 @@ interface DangerConfirmLabels {
     prompt: string;
     /** Label of the password field (`requirePassword`). */
     password: string;
-    /** Label of the type-to-confirm field, given the phrase to type. A FUNCTION, like
+    /** Label of the type-to-confirm field. A FUNCTION of the phrase by default, like
      *  every message that carries a value: where the phrase sits in the sentence moves
-     *  with the language. */
-    phrase: (phrase: string) => string;
+     *  with the language. A plain STRING is taken as the finished label — for an app
+     *  whose catalogue already words it ("Type DELETE to confirm") and would otherwise
+     *  wrap it as `() => label`. */
+    phrase: string | ((phrase: string) => string);
+    /** Placeholder of the type-to-confirm field — a string, or a function of the
+     *  phrase (`(p) => p` echoes it). Optional and unset by default: the field keeps its
+     *  floating label, as before. Given, the label moves ABOVE the field (a floating
+     *  label occupies the empty field, which is exactly where a placeholder shows) and
+     *  the placeholder fills the field. An empty string means none. */
+    phrasePlaceholder?: string | ((phrase: string) => string);
 }
-declare const DEFAULT_DANGER_CONFIRM_LABELS: DangerConfirmLabels;
+/** `satisfies` rather than a type annotation, so `DEFAULT_DANGER_CONFIRM_LABELS.phrase`
+ *  stays callable for a caller that composes its own label from it. */
+declare const DEFAULT_DANGER_CONFIRM_LABELS: {
+    arm: string;
+    confirm: string;
+    cancel: string;
+    prompt: string;
+    password: string;
+    phrase: (phrase: string) => string;
+};
 interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
     /**
      * Runs the action, with the entered password when `requirePassword` is on.
@@ -36,8 +53,15 @@ interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<"div">, "onCh
     /** Show a password field; confirm stays disabled until it is filled. */
     requirePassword?: boolean;
     /** Show a "type <phrase> to confirm" field; confirm stays disabled until the field
-     *  matches exactly (case-sensitive, surrounding spaces ignored). */
+     *  matches (case-sensitive; surrounding spaces ignored unless `phraseMatch="exact"`). */
     phrase?: string;
+    /**
+     * How the typed text is compared with `phrase`. `"trim"` (default) ignores spaces
+     * around it — a phone keyboard's autocomplete likes to add one. `"exact"` compares
+     * character for character, spaces included, for an app whose contract is "type
+     * exactly this".
+     */
+    phraseMatch?: "trim" | "exact";
     /** The warning above the fields. Defaults to `labels.prompt`. */
     prompt?: ReactNode;
     /** `"danger"` (default) for what cannot be undone; `"warning"` for what can, at a
@@ -86,6 +110,6 @@ interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<"div">, "onCh
  * destructive button itself), and disarming moves it back to the arm button, so the
  * keyboard user is never left on an element that just vanished.
  */
-declare function DangerConfirm({ onConfirm, requirePassword, phrase, prompt, tone, armLabel, confirmLabel, busy: busyProp, disabled, lockedReason, armed: armedProp, onArmedChange, labels: labelsProp, className, ...rest }: DangerConfirmProps): react.JSX.Element;
+declare function DangerConfirm({ onConfirm, requirePassword, phrase, phraseMatch, prompt, tone, armLabel, confirmLabel, busy: busyProp, disabled, lockedReason, armed: armedProp, onArmedChange, labels: labelsProp, className, ...rest }: DangerConfirmProps): react.JSX.Element;
 
 export { DEFAULT_DANGER_CONFIRM_LABELS, DangerConfirm, type DangerConfirmLabels, type DangerConfirmProps };

package/dist/components/danger-confirm.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
-import { Button, Input, Spinner } from "./ui.js";
+import { Button, Input, Label, Spinner } from "./ui.js";
+import { Tooltip } from "./tooltip.js";
 const DEFAULT_DANGER_CONFIRM_LABELS = {
   arm: "Delete\u2026",
   confirm: "Delete",
@@ -16,6 +17,7 @@ function DangerConfirm({
   onConfirm,
   requirePassword,
   phrase,
+  phraseMatch = "trim",
   prompt,
   tone = "danger",
   armLabel,
@@ -38,6 +40,7 @@ function DangerConfirm({
   const busy = Boolean(busyProp) || pending;
   const promptId = useId();
   const reasonId = useId();
+  const phraseFieldId = useId();
   const armId = useId();
   const cancelId = useId();
   const firstFieldRef = useRef(null);
@@ -78,7 +81,7 @@ function DangerConfirm({
   };
   const locked = lockedReason !== void 0 && lockedReason !== null && lockedReason !== false && lockedReason !== "";
   const passwordOk = !requirePassword || password !== "";
-  const phraseOk = phrase === void 0 || typed.trim() === phrase;
+  const phraseOk = phrase === void 0 || (phraseMatch === "exact" ? typed : typed.trim()) === phrase;
   const canConfirm = passwordOk && phraseOk && !busy;
   const submit = (e) => {
     e.preventDefault();
@@ -97,25 +100,47 @@ function DangerConfirm({
       }
     );
   };
+  const phrasePlaceholder = phrase === void 0 || labels.phrasePlaceholder === void 0 ? void 0 : typeof labels.phrasePlaceholder === "function" ? labels.phrasePlaceholder(phrase) : labels.phrasePlaceholder;
+  const phraseLabel = phrase === void 0 ? "" : typeof labels.phrase === "function" ? labels.phrase(phrase) : labels.phrase;
+  const phraseFieldProps = {
+    ref: firstFieldRef,
+    value: typed,
+    autoComplete: "off",
+    autoCapitalize: "off",
+    spellCheck: false,
+    readOnly: busy,
+    onChange: (e) => setTyped(e.target.value)
+  };
   const toneText = tone === "warning" ? "text-[var(--warning)]" : "text-[var(--danger)]";
   if (!armed) {
+    const arm = /* @__PURE__ */ jsx(
+      Button,
+      {
+        id: armId,
+        type: "button",
+        variant: tone === "warning" ? "secondary" : "danger",
+        disabled,
+        "aria-disabled": locked || void 0,
+        "aria-describedby": locked ? reasonId : void 0,
+        onClick: () => {
+          if (!locked) setArmed(true);
+        },
+        className: "aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
+        children: armLabel ?? labels.arm
+      }
+    );
     return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("space-y-1", className), children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          id: armId,
-          type: "button",
-          variant: tone === "warning" ? "secondary" : "danger",
-          disabled,
-          "aria-disabled": locked || void 0,
-          "aria-describedby": locked ? reasonId : void 0,
-          onClick: () => {
-            if (!locked) setArmed(true);
-          },
-          className: "aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
-          children: armLabel ?? labels.arm
-        }
-      ),
+      locked ? (
+        // The reason on the button itself too, where the pointer that tried it is —
+        // the line below can sit out of view in a long settings card. Portalled, so
+        // a card that scrolls neither clips it nor grows by it.
+        //
+        // The button in a FRAGMENT on purpose: Tooltip clones an element child to
+        // add the bubble to its `aria-describedby`, and the button is already
+        // described by the visible line below — the same sentence twice, read out
+        // on every focus. A fragment is left as it is, so the bubble stays visual.
+        /* @__PURE__ */ jsx(Tooltip, { label: lockedReason, portal: true, children: /* @__PURE__ */ jsx(Fragment, { children: arm }) })
+      ) : arm,
       locked && /* @__PURE__ */ jsx("p", { id: reasonId, className: "text-xs text-[var(--text-muted)]", children: lockedReason })
     ] });
   }
@@ -129,19 +154,13 @@ function DangerConfirm({
       noValidate: true,
       children: [
         /* @__PURE__ */ jsx("p", { id: promptId, className: cn("text-xs font-medium", toneText), children: prompt ?? labels.prompt }),
-        phrase !== void 0 && /* @__PURE__ */ jsx(
-          Input,
-          {
-            ref: firstFieldRef,
-            label: labels.phrase(phrase),
-            value: typed,
-            autoComplete: "off",
-            autoCapitalize: "off",
-            spellCheck: false,
-            readOnly: busy,
-            onChange: (e) => setTyped(e.target.value)
-          }
-        ),
+        phrase !== void 0 && (phrasePlaceholder ? (
+          // A static label above, so the placeholder has the empty field to itself.
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: phraseFieldId, children: phraseLabel }),
+            /* @__PURE__ */ jsx(Input, { id: phraseFieldId, placeholder: phrasePlaceholder, ...phraseFieldProps })
+          ] })
+        ) : /* @__PURE__ */ jsx(Input, { label: phraseLabel, ...phraseFieldProps })),
         requirePassword && /* @__PURE__ */ jsx(
           Input,
           {

package/dist/components/danger-confirm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/danger-confirm.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, FormEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, Input, Spinner } from \"./ui\";\n\n/**\n * Every string the tile renders — the `dangerConfirm` namespace of\n * `<UiKitProvider labels>`, overridable per instance through `labels`. The arm and\n * confirm buttons are usually worded per action (\"Delete budget\"), which is what the\n * `armLabel` / `confirmLabel` props are for; these are the fallbacks.\n */\nexport interface DangerConfirmLabels {\n  /** The button that arms the tile. */\n  arm: string;\n  /** The button that runs the action once the guards are satisfied. */\n  confirm: string;\n  cancel: string;\n  /** The warning above the fields, when no `prompt` is given. */\n  prompt: string;\n  /** Label of the password field (`requirePassword`). */\n  password: string;\n  /** Label of the type-to-confirm field, given the phrase to type. A FUNCTION, like\n   *  every message that carries a value: where the phrase sits in the sentence moves\n   *  with the language. */\n  phrase: (phrase: string) => string;\n}\n\nexport const DEFAULT_DANGER_CONFIRM_LABELS: DangerConfirmLabels = {\n  arm: \"Delete…\",\n  confirm: \"Delete\",\n  cancel: \"Cancel\",\n  prompt: \"This cannot be undone.\",\n  password: \"Password\",\n  phrase: (phrase) => `Type “${phrase}” to confirm`,\n};\n\nexport interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Runs the action, with the entered password when `requirePassword` is on.\n   *\n   * Return a promise and the tile manages itself: busy until it settles, disarmed\n   * (fields wiped) when it resolves, still armed when it rejects — so the user can\n   * correct a wrong password and retry. The rejection is not swallowed for you to\n   * miss: handle it (and show why) in the caller, as with any mutation.\n   */\n  onConfirm: (password?: string) => void | Promise<unknown>;\n  /** Show a password field; confirm stays disabled until it is filled. */\n  requirePassword?: boolean;\n  /** Show a \"type <phrase> to confirm\" field; confirm stays disabled until the field\n   *  matches exactly (case-sensitive, surrounding spaces ignored). */\n  phrase?: string;\n  /** The warning above the fields. Defaults to `labels.prompt`. */\n  prompt?: ReactNode;\n  /** `\"danger\"` (default) for what cannot be undone; `\"warning\"` for what can, at a\n   *  cost (loading demo data over your own). Colours the prompt and the confirm. */\n  tone?: \"danger\" | \"warning\";\n  /** Visible text of the arm button; defaults to `labels.arm`. */\n  armLabel?: ReactNode;\n  /** Visible text of the confirm button; defaults to `labels.confirm`. */\n  confirmLabel?: ReactNode;\n  /** The action is running: confirm shows a spinner and nothing can be pressed. For a\n   *  caller that tracks the mutation itself (a `useMutation`'s `isPending`); a\n   *  promise returned from `onConfirm` does the same on its own. */\n  busy?: boolean;\n  /** The arm button is disabled. */\n  disabled?: boolean;\n  /**\n   * Why the action is not available — a read-only demo, a write lock, a missing\n   * permission. Disables the arm button like `disabled`, and SAYS so: the sentence is\n   * shown under the button and attached to it with `aria-describedby`, and the button\n   * stays focusable (`aria-disabled`) so a keyboard user can land on it and hear why.\n   *\n   * On the ARM button rather than the confirm: arming asks for a password, and asking\n   * for a password for a write that can never land is the worse of the two.\n   */\n  lockedReason?: ReactNode;\n  /** Controlled armed state. The parent can then collapse the tile from a mutation's\n   *  own `onSuccess` without returning a promise. */\n  armed?: boolean;\n  /** Called with the next armed state — on arm, cancel, and a resolved `onConfirm`. */\n  onArmedChange?: (armed: boolean) => void;\n  /** User-facing strings; see {@link DangerConfirmLabels}. */\n  labels?: Partial<DangerConfirmLabels>;\n}\n\n/**\n * An \"arm → confirm\" tile for destructive actions: one button, which expands into a\n * warning, an optional password field, an optional type-to-confirm field and a\n * confirm that stays disabled until every guard is satisfied.\n *\n * Keksdose hand-rolled it three times (load demo data, wipe everything, reset a\n * budget) and then as `shared/components/danger-confirm.tsx`; the only app-specific\n * part was its write-lock hook, which is `lockedReason` here.\n *\n * The fields are a `<form>`, so Enter confirms once the guards allow it. They are\n * wiped every time the tile disarms — a password must not sit in a collapsed tile.\n * Arming moves focus to the first field (or Cancel, when there is none — never to the\n * destructive button itself), and disarming moves it back to the arm button, so the\n * keyboard user is never left on an element that just vanished.\n */\nexport function DangerConfirm({\n  onConfirm,\n  requirePassword,\n  phrase,\n  prompt,\n  tone = \"danger\",\n  armLabel,\n  confirmLabel,\n  busy: busyProp,\n  disabled,\n  lockedReason,\n  armed: armedProp,\n  onArmedChange,\n  labels: labelsProp,\n  className,\n  ...rest\n}: DangerConfirmProps) {\n  const labels = useKitLabels(\"dangerConfirm\", DEFAULT_DANGER_CONFIRM_LABELS, labelsProp);\n  const [armedState, setArmedState] = useState(false);\n  const armed = armedProp ?? armedState;\n  const [password, setPassword] = useState(\"\");\n  const [typed, setTyped] = useState(\"\");\n  const [pending, setPending] = useState(false);\n  const busy = Boolean(busyProp) || pending;\n  // `readOnly` rather than `disabled` on the fields while busy: disabling the field\n  // that has focus (Enter was pressed in it) drops focus to <body>.\n  const promptId = useId();\n  const reasonId = useId();\n\n  // The kit's Button takes no ref, so the two buttons focus is moved to are found by id.\n  const armId = useId();\n  const cancelId = useId();\n  const firstFieldRef = useRef<HTMLInputElement>(null);\n  // Focus moves only after a transition — never on mount, so a tile that renders armed\n  // (controlled) does not take the page's focus merely by existing.\n  const moveFocus = useRef(false);\n  const mounted = useRef(true);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  // A disarm from anywhere (cancel, a resolved confirm, the parent) wipes the fields.\n  // During render, like NumberField's draft, so no frame shows a collapsed tile that\n  // still holds a password.\n  const [wasArmed, setWasArmed] = useState(armed);\n  if (wasArmed !== armed) {\n    setWasArmed(armed);\n    if (!armed) {\n      setPassword(\"\");\n      setTyped(\"\");\n    }\n  }\n\n  const prevArmed = useRef(armed);\n  useEffect(() => {\n    const changed = prevArmed.current !== armed;\n    prevArmed.current = armed;\n    const byUser = moveFocus.current;\n    moveFocus.current = false;\n    if (!changed) return;\n    if (armed) {\n      if (byUser) (firstFieldRef.current ?? document.getElementById(cancelId))?.focus();\n      return;\n    }\n    // A controlled parent collapsing the tile from its own `onSuccess` did not go\n    // through `setArmed`; if focus went down with the form, bring it back too.\n    const lost = document.activeElement === null || document.activeElement === document.body;\n    if (byUser || lost) document.getElementById(armId)?.focus();\n  }, [armed, armId, cancelId]);\n\n  const setArmed = (next: boolean) => {\n    moveFocus.current = true;\n    if (armedProp === undefined) setArmedState(next);\n    onArmedChange?.(next);\n  };\n\n  const locked = lockedReason !== undefined && lockedReason !== null && lockedReason !== false && lockedReason !== \"\";\n  const passwordOk = !requirePassword || password !== \"\";\n  const phraseOk = phrase === undefined || typed.trim() === phrase;\n  const canConfirm = passwordOk && phraseOk && !busy;\n\n  const submit = (e: FormEvent) => {\n    e.preventDefault();\n    if (!canConfirm) return;\n    const result = onConfirm(requirePassword ? password : undefined);\n    if (!result || typeof (result as Promise<unknown>).then !== \"function\") return;\n    setPending(true);\n    (result as Promise<unknown>).then(\n      () => {\n        if (!mounted.current) return;\n        setPending(false);\n        setArmed(false);\n      },\n      () => {\n        // Stays armed, fields kept: the caller shows why, the user retries.\n        if (mounted.current) setPending(false);\n      },\n    );\n  };\n\n  const toneText = tone === \"warning\" ? \"text-[var(--warning)]\" : \"text-[var(--danger)]\";\n\n  if (!armed) {\n    return (\n      <div {...rest} className={cn(\"space-y-1\", className)}>\n        <Button\n          id={armId}\n          type=\"button\"\n          variant={tone === \"warning\" ? \"secondary\" : \"danger\"}\n          disabled={disabled}\n          aria-disabled={locked || undefined}\n          aria-describedby={locked ? reasonId : undefined}\n          onClick={() => {\n            if (!locked) setArmed(true);\n          }}\n          className=\"aria-disabled:cursor-not-allowed aria-disabled:opacity-50\"\n        >\n          {armLabel ?? labels.arm}\n        </Button>\n        {locked && (\n          <p id={reasonId} className=\"text-xs text-[var(--text-muted)]\">\n            {lockedReason}\n          </p>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={cn(\"space-y-2\", className)}>\n      <form\n        className=\"space-y-2\"\n        aria-describedby={promptId}\n        aria-busy={busy || undefined}\n        onSubmit={submit}\n        noValidate\n      >\n        <p id={promptId} className={cn(\"text-xs font-medium\", toneText)}>\n          {prompt ?? labels.prompt}\n        </p>\n        {phrase !== undefined && (\n          <Input\n            ref={firstFieldRef}\n            label={labels.phrase(phrase)}\n            value={typed}\n            autoComplete=\"off\"\n            autoCapitalize=\"off\"\n            spellCheck={false}\n            readOnly={busy}\n            onChange={(e) => setTyped(e.target.value)}\n          />\n        )}\n        {requirePassword && (\n          <Input\n            // The phrase field takes the ref when both are there — it comes first.\n            ref={phrase === undefined ? firstFieldRef : undefined}\n            type=\"password\"\n            autoComplete=\"current-password\"\n            label={labels.password}\n            value={password}\n            readOnly={busy}\n            onChange={(e) => setPassword(e.target.value)}\n          />\n        )}\n        <div className=\"flex flex-wrap gap-2\">\n          <Button id={cancelId} type=\"button\" variant=\"ghost\" disabled={busy} onClick={() => setArmed(false)}>\n            {labels.cancel}\n          </Button>\n          <Button\n            type=\"submit\"\n            variant={tone === \"warning\" ? \"primary\" : \"danger\"}\n            disabled={!canConfirm}\n            aria-busy={busy || undefined}\n          >\n            {busy && <Spinner label={null} className=\"h-4 w-4\" />}\n            {confirmLabel ?? labels.confirm}\n          </Button>\n        </div>\n      </form>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/danger-confirm.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from \"react\";\nimport type { ChangeEvent, ComponentPropsWithoutRef, FormEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, Input, Label, Spinner } from \"./ui\";\nimport { Tooltip } from \"./tooltip\";\n\n/**\n * Every string the tile renders — the `dangerConfirm` namespace of\n * `<UiKitProvider labels>`, overridable per instance through `labels`. The arm and\n * confirm buttons are usually worded per action (\"Delete budget\"), which is what the\n * `armLabel` / `confirmLabel` props are for; these are the fallbacks.\n */\nexport interface DangerConfirmLabels {\n  /** The button that arms the tile. */\n  arm: string;\n  /** The button that runs the action once the guards are satisfied. */\n  confirm: string;\n  cancel: string;\n  /** The warning above the fields, when no `prompt` is given. */\n  prompt: string;\n  /** Label of the password field (`requirePassword`). */\n  password: string;\n  /** Label of the type-to-confirm field. A FUNCTION of the phrase by default, like\n   *  every message that carries a value: where the phrase sits in the sentence moves\n   *  with the language. A plain STRING is taken as the finished label — for an app\n   *  whose catalogue already words it (\"Type DELETE to confirm\") and would otherwise\n   *  wrap it as `() => label`. */\n  phrase: string | ((phrase: string) => string);\n  /** Placeholder of the type-to-confirm field — a string, or a function of the\n   *  phrase (`(p) => p` echoes it). Optional and unset by default: the field keeps its\n   *  floating label, as before. Given, the label moves ABOVE the field (a floating\n   *  label occupies the empty field, which is exactly where a placeholder shows) and\n   *  the placeholder fills the field. An empty string means none. */\n  phrasePlaceholder?: string | ((phrase: string) => string);\n}\n\n/** `satisfies` rather than a type annotation, so `DEFAULT_DANGER_CONFIRM_LABELS.phrase`\n *  stays callable for a caller that composes its own label from it. */\nexport const DEFAULT_DANGER_CONFIRM_LABELS = {\n  arm: \"Delete…\",\n  confirm: \"Delete\",\n  cancel: \"Cancel\",\n  prompt: \"This cannot be undone.\",\n  password: \"Password\",\n  phrase: (phrase: string) => `Type “${phrase}” to confirm`,\n} satisfies DangerConfirmLabels;\n\nexport interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Runs the action, with the entered password when `requirePassword` is on.\n   *\n   * Return a promise and the tile manages itself: busy until it settles, disarmed\n   * (fields wiped) when it resolves, still armed when it rejects — so the user can\n   * correct a wrong password and retry. The rejection is not swallowed for you to\n   * miss: handle it (and show why) in the caller, as with any mutation.\n   */\n  onConfirm: (password?: string) => void | Promise<unknown>;\n  /** Show a password field; confirm stays disabled until it is filled. */\n  requirePassword?: boolean;\n  /** Show a \"type <phrase> to confirm\" field; confirm stays disabled until the field\n   *  matches (case-sensitive; surrounding spaces ignored unless `phraseMatch=\"exact\"`). */\n  phrase?: string;\n  /**\n   * How the typed text is compared with `phrase`. `\"trim\"` (default) ignores spaces\n   * around it — a phone keyboard's autocomplete likes to add one. `\"exact\"` compares\n   * character for character, spaces included, for an app whose contract is \"type\n   * exactly this\".\n   */\n  phraseMatch?: \"trim\" | \"exact\";\n  /** The warning above the fields. Defaults to `labels.prompt`. */\n  prompt?: ReactNode;\n  /** `\"danger\"` (default) for what cannot be undone; `\"warning\"` for what can, at a\n   *  cost (loading demo data over your own). Colours the prompt and the confirm. */\n  tone?: \"danger\" | \"warning\";\n  /** Visible text of the arm button; defaults to `labels.arm`. */\n  armLabel?: ReactNode;\n  /** Visible text of the confirm button; defaults to `labels.confirm`. */\n  confirmLabel?: ReactNode;\n  /** The action is running: confirm shows a spinner and nothing can be pressed. For a\n   *  caller that tracks the mutation itself (a `useMutation`'s `isPending`); a\n   *  promise returned from `onConfirm` does the same on its own. */\n  busy?: boolean;\n  /** The arm button is disabled. */\n  disabled?: boolean;\n  /**\n   * Why the action is not available — a read-only demo, a write lock, a missing\n   * permission. Disables the arm button like `disabled`, and SAYS so: the sentence is\n   * shown under the button and attached to it with `aria-describedby`, and the button\n   * stays focusable (`aria-disabled`) so a keyboard user can land on it and hear why.\n   *\n   * On the ARM button rather than the confirm: arming asks for a password, and asking\n   * for a password for a write that can never land is the worse of the two.\n   */\n  lockedReason?: ReactNode;\n  /** Controlled armed state. The parent can then collapse the tile from a mutation's\n   *  own `onSuccess` without returning a promise. */\n  armed?: boolean;\n  /** Called with the next armed state — on arm, cancel, and a resolved `onConfirm`. */\n  onArmedChange?: (armed: boolean) => void;\n  /** User-facing strings; see {@link DangerConfirmLabels}. */\n  labels?: Partial<DangerConfirmLabels>;\n}\n\n/**\n * An \"arm → confirm\" tile for destructive actions: one button, which expands into a\n * warning, an optional password field, an optional type-to-confirm field and a\n * confirm that stays disabled until every guard is satisfied.\n *\n * Keksdose hand-rolled it three times (load demo data, wipe everything, reset a\n * budget) and then as `shared/components/danger-confirm.tsx`; the only app-specific\n * part was its write-lock hook, which is `lockedReason` here.\n *\n * The fields are a `<form>`, so Enter confirms once the guards allow it. They are\n * wiped every time the tile disarms — a password must not sit in a collapsed tile.\n * Arming moves focus to the first field (or Cancel, when there is none — never to the\n * destructive button itself), and disarming moves it back to the arm button, so the\n * keyboard user is never left on an element that just vanished.\n */\nexport function DangerConfirm({\n  onConfirm,\n  requirePassword,\n  phrase,\n  phraseMatch = \"trim\",\n  prompt,\n  tone = \"danger\",\n  armLabel,\n  confirmLabel,\n  busy: busyProp,\n  disabled,\n  lockedReason,\n  armed: armedProp,\n  onArmedChange,\n  labels: labelsProp,\n  className,\n  ...rest\n}: DangerConfirmProps) {\n  const labels = useKitLabels(\"dangerConfirm\", DEFAULT_DANGER_CONFIRM_LABELS, labelsProp);\n  const [armedState, setArmedState] = useState(false);\n  const armed = armedProp ?? armedState;\n  const [password, setPassword] = useState(\"\");\n  const [typed, setTyped] = useState(\"\");\n  const [pending, setPending] = useState(false);\n  const busy = Boolean(busyProp) || pending;\n  // `readOnly` rather than `disabled` on the fields while busy: disabling the field\n  // that has focus (Enter was pressed in it) drops focus to <body>.\n  const promptId = useId();\n  const reasonId = useId();\n  const phraseFieldId = useId();\n\n  // The kit's Button takes no ref, so the two buttons focus is moved to are found by id.\n  const armId = useId();\n  const cancelId = useId();\n  const firstFieldRef = useRef<HTMLInputElement>(null);\n  // Focus moves only after a transition — never on mount, so a tile that renders armed\n  // (controlled) does not take the page's focus merely by existing.\n  const moveFocus = useRef(false);\n  const mounted = useRef(true);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  // A disarm from anywhere (cancel, a resolved confirm, the parent) wipes the fields.\n  // During render, like NumberField's draft, so no frame shows a collapsed tile that\n  // still holds a password.\n  const [wasArmed, setWasArmed] = useState(armed);\n  if (wasArmed !== armed) {\n    setWasArmed(armed);\n    if (!armed) {\n      setPassword(\"\");\n      setTyped(\"\");\n    }\n  }\n\n  const prevArmed = useRef(armed);\n  useEffect(() => {\n    const changed = prevArmed.current !== armed;\n    prevArmed.current = armed;\n    const byUser = moveFocus.current;\n    moveFocus.current = false;\n    if (!changed) return;\n    if (armed) {\n      if (byUser) (firstFieldRef.current ?? document.getElementById(cancelId))?.focus();\n      return;\n    }\n    // A controlled parent collapsing the tile from its own `onSuccess` did not go\n    // through `setArmed`; if focus went down with the form, bring it back too.\n    const lost = document.activeElement === null || document.activeElement === document.body;\n    if (byUser || lost) document.getElementById(armId)?.focus();\n  }, [armed, armId, cancelId]);\n\n  const setArmed = (next: boolean) => {\n    moveFocus.current = true;\n    if (armedProp === undefined) setArmedState(next);\n    onArmedChange?.(next);\n  };\n\n  const locked = lockedReason !== undefined && lockedReason !== null && lockedReason !== false && lockedReason !== \"\";\n  const passwordOk = !requirePassword || password !== \"\";\n  const phraseOk = phrase === undefined || (phraseMatch === \"exact\" ? typed : typed.trim()) === phrase;\n  const canConfirm = passwordOk && phraseOk && !busy;\n\n  const submit = (e: FormEvent) => {\n    e.preventDefault();\n    if (!canConfirm) return;\n    const result = onConfirm(requirePassword ? password : undefined);\n    if (!result || typeof (result as Promise<unknown>).then !== \"function\") return;\n    setPending(true);\n    (result as Promise<unknown>).then(\n      () => {\n        if (!mounted.current) return;\n        setPending(false);\n        setArmed(false);\n      },\n      () => {\n        // Stays armed, fields kept: the caller shows why, the user retries.\n        if (mounted.current) setPending(false);\n      },\n    );\n  };\n\n  const phrasePlaceholder =\n    phrase === undefined || labels.phrasePlaceholder === undefined\n      ? undefined\n      : typeof labels.phrasePlaceholder === \"function\"\n        ? labels.phrasePlaceholder(phrase)\n        : labels.phrasePlaceholder;\n\n  const phraseLabel =\n    phrase === undefined ? \"\" : typeof labels.phrase === \"function\" ? labels.phrase(phrase) : labels.phrase;\n  const phraseFieldProps = {\n    ref: firstFieldRef,\n    value: typed,\n    autoComplete: \"off\",\n    autoCapitalize: \"off\",\n    spellCheck: false,\n    readOnly: busy,\n    onChange: (e: ChangeEvent<HTMLInputElement>) => setTyped(e.target.value),\n  };\n\n  const toneText = tone === \"warning\" ? \"text-[var(--warning)]\" : \"text-[var(--danger)]\";\n\n  if (!armed) {\n    const arm = (\n      <Button\n        id={armId}\n        type=\"button\"\n        variant={tone === \"warning\" ? \"secondary\" : \"danger\"}\n        disabled={disabled}\n        aria-disabled={locked || undefined}\n        aria-describedby={locked ? reasonId : undefined}\n        onClick={() => {\n          if (!locked) setArmed(true);\n        }}\n        className=\"aria-disabled:cursor-not-allowed aria-disabled:opacity-50\"\n      >\n        {armLabel ?? labels.arm}\n      </Button>\n    );\n    return (\n      <div {...rest} className={cn(\"space-y-1\", className)}>\n        {locked ? (\n          // The reason on the button itself too, where the pointer that tried it is —\n          // the line below can sit out of view in a long settings card. Portalled, so\n          // a card that scrolls neither clips it nor grows by it.\n          //\n          // The button in a FRAGMENT on purpose: Tooltip clones an element child to\n          // add the bubble to its `aria-describedby`, and the button is already\n          // described by the visible line below — the same sentence twice, read out\n          // on every focus. A fragment is left as it is, so the bubble stays visual.\n          <Tooltip label={lockedReason} portal>\n            <>{arm}</>\n          </Tooltip>\n        ) : (\n          arm\n        )}\n        {locked && (\n          <p id={reasonId} className=\"text-xs text-[var(--text-muted)]\">\n            {lockedReason}\n          </p>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={cn(\"space-y-2\", className)}>\n      <form\n        className=\"space-y-2\"\n        aria-describedby={promptId}\n        aria-busy={busy || undefined}\n        onSubmit={submit}\n        noValidate\n      >\n        <p id={promptId} className={cn(\"text-xs font-medium\", toneText)}>\n          {prompt ?? labels.prompt}\n        </p>\n        {phrase !== undefined &&\n          (phrasePlaceholder ? (\n            // A static label above, so the placeholder has the empty field to itself.\n            <div className=\"space-y-1.5\">\n              <Label htmlFor={phraseFieldId}>{phraseLabel}</Label>\n              <Input id={phraseFieldId} placeholder={phrasePlaceholder} {...phraseFieldProps} />\n            </div>\n          ) : (\n            <Input label={phraseLabel} {...phraseFieldProps} />\n          ))}\n        {requirePassword && (\n          <Input\n            // The phrase field takes the ref when both are there — it comes first.\n            ref={phrase === undefined ? firstFieldRef : undefined}\n            type=\"password\"\n            autoComplete=\"current-password\"\n            label={labels.password}\n            value={password}\n            readOnly={busy}\n            onChange={(e) => setPassword(e.target.value)}\n          />\n        )}\n        <div className=\"flex flex-wrap gap-2\">\n          <Button id={cancelId} type=\"button\" variant=\"ghost\" disabled={busy} onClick={() => setArmed(false)}>\n            {labels.cancel}\n          </Button>\n          <Button\n            type=\"submit\"\n            variant={tone === \"warning\" ? \"primary\" : \"danger\"}\n            disabled={!canConfirm}\n            aria-busy={busy || undefined}\n          >\n            {busy && <Spinner label={null} className=\"h-4 w-4\" />}\n            {confirmLabel ?? labels.confirm}\n          </Button>\n        </div>\n      </form>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table-filter-popover.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { a as DataTableColumn, c as FilterValue } from '../data-table-filters-DM1auUfH.js';
+import { a as DataTableColumn, c as FilterValue } from '../data-table-filters-noy0Abvi.js';
 import { DataTableLabels } from './data-table-labels.js';
 import './data-table-sort.js';
 import './swipeable-row.js';

package/dist/components/data-table-filters.d.ts

@@ -1,4 +1,4 @@
-export { C as ColumnFilter, c as FilterValue, d as decodeFilterValue, e as decodeFilterValueOfType, f as defaultFilterState, g as encodeFilterValue, i as isFilterActive, r as resolveFilter, h as rowMatches } from '../data-table-filters-DM1auUfH.js';
+export { C as ColumnFilter, c as FilterValue, d as decodeFilterValue, e as decodeFilterValueOfType, f as defaultFilterState, g as encodeFilterValue, i as isFilterActive, r as resolveFilter, h as rowMatches } from '../data-table-filters-noy0Abvi.js';
 import 'react';
 import './data-table-sort.js';
 import './swipeable-row.js';

package/dist/components/data-table-pagination.d.ts

@@ -8,13 +8,16 @@ interface PaginationProps {
     pageSize: number;
     total: number;
     onPage: (p: number) => void;
-    onPageSize: (n: number) => void;
-    labels?: DataTableLabels;
+    /** Omit when the page size is not the user's to change (a server that fixes it):
+     *  the select is then not rendered at all, rather than rendered and inert. */
+    onPageSize?: (n: number) => void;
+    /** Over `dataTable` from `<UiKitProvider labels>`, over the English defaults. */
+    labels?: Partial<DataTableLabels>;
     /** For the page numbers and page-size options; falls back to the provider's. */
     locale?: string;
 }
 /** Footer for {@link DataTable}: range summary, page-size select, and a
  *  windowed page-number strip (first/last + ±2 around the current page). */
-declare function Pagination({ page, totalPages, pageSize, total, onPage, onPageSize, labels, locale: localeProp, }: PaginationProps): react.JSX.Element;
+declare function Pagination({ page, totalPages, pageSize, total, onPage, onPageSize, labels: labelsProp, locale: localeProp, }: PaginationProps): react.JSX.Element;
 
 export { PAGE_SIZE_OPTIONS, Pagination };

package/dist/components/data-table-pagination.js

@@ -4,7 +4,7 @@ import { useMemo } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { DEFAULT_DATA_TABLE_LABELS } from "./data-table-labels.js";
-import { useKitLocale } from "../i18n/kit-labels.js";
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200];
 function Pagination({
   page,
@@ -13,9 +13,10 @@ function Pagination({
   total,
   onPage,
   onPageSize,
-  labels = DEFAULT_DATA_TABLE_LABELS,
+  labels: labelsProp,
   locale: localeProp
 }) {
+  const labels = useKitLabels("dataTable", DEFAULT_DATA_TABLE_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
   const num = useMemo(() => new Intl.NumberFormat(locale), [locale]);
   const visible = useMemo(() => {
@@ -35,7 +36,7 @@ function Pagination({
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-t border-[var(--border)] px-3 py-2 text-xs text-[var(--text-secondary)]", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx("span", { children: pageSize === Infinity ? labels.rowCount(total) : labels.pageRange(page * pageSize + 1, Math.min(total, (page + 1) * pageSize), total) }),
-      /* @__PURE__ */ jsxs(
+      onPageSize && /* @__PURE__ */ jsxs(
         "select",
         {
           value: pageSize === Infinity ? "all" : pageSize,
@@ -58,7 +59,7 @@ function Pagination({
           disabled: page === 0,
           className: "rounded p-1 hover:bg-[var(--bg-hover)] disabled:opacity-40",
           "aria-label": labels.prevPage,
-          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4 rtl:-scale-x-100" })
         }
       ),
       items.map(
@@ -85,7 +86,7 @@ function Pagination({
           disabled: page >= totalPages - 1,
           className: "rounded p-1 hover:bg-[var(--bg-hover)] disabled:opacity-40",
           "aria-label": labels.nextPage,
-          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 rtl:-scale-x-100" })
         }
       )
     ] })

package/dist/components/data-table-pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-pagination.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from \"./data-table-labels\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\n\nexport const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200] as const;\n\ninterface PaginationProps {\n  page: number;\n  totalPages: number;\n  pageSize: number;\n  total: number;\n  onPage: (p: number) => void;\n  onPageSize: (n: number) => void;\n  labels?: DataTableLabels;\n  /** For the page numbers and page-size options; falls back to the provider's. */\n  locale?: string;\n}\n\n/** Footer for {@link DataTable}: range summary, page-size select, and a\n *  windowed page-number strip (first/last + ±2 around the current page). */\nexport function Pagination({\n  page,\n  totalPages,\n  pageSize,\n  total,\n  onPage,\n  onPageSize,\n  labels = DEFAULT_DATA_TABLE_LABELS,\n  locale: localeProp,\n}: PaginationProps) {\n  const locale = useKitLocale(localeProp);\n  // The bare numbers on the strip and in the select are text too: `String(n)` is\n  // always ASCII digits, which is wrong for a locale that writes its own. The range\n  // summary is not formatted here — `pageRange` / `rowCount` take NUMBERS so the\n  // translation can format them itself, alongside the words around them.\n  const num = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const visible = useMemo(() => {\n    if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i);\n    const set = new Set<number>([0, totalPages - 1, page]);\n    for (let d = 1; d <= 2; d++) {\n      if (page - d >= 0) set.add(page - d);\n      if (page + d <= totalPages - 1) set.add(page + d);\n    }\n    return Array.from(set).sort((a, b) => a - b);\n  }, [page, totalPages]);\n\n  const items: (number | \"ellipsis\")[] = [];\n  visible.forEach((p, idx) => {\n    if (idx > 0 && p - visible[idx - 1] > 1) items.push(\"ellipsis\");\n    items.push(p);\n  });\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-between gap-2 border-t border-[var(--border)] px-3 py-2 text-xs text-[var(--text-secondary)]\">\n      <div className=\"flex items-center gap-2\">\n        <span>\n          {pageSize === Infinity\n            ? labels.rowCount(total)\n            : labels.pageRange(page * pageSize + 1, Math.min(total, (page + 1) * pageSize), total)}\n        </span>\n        <select\n          value={pageSize === Infinity ? \"all\" : pageSize}\n          onChange={(e) => onPageSize(e.target.value === \"all\" ? Infinity : Number(e.target.value))}\n          className=\"rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 py-0.5 text-xs\"\n          aria-label={labels.pageSize}\n        >\n          {PAGE_SIZE_OPTIONS.map((n) => (\n            <option key={n} value={n}>\n              {num.format(n)}\n            </option>\n          ))}\n          <option value=\"all\">{labels.pageSizeAll}</option>\n        </select>\n      </div>\n      {pageSize !== Infinity && totalPages > 1 && (\n        <div className=\"flex items-center gap-1\">\n          <button\n            type=\"button\"\n            onClick={() => onPage(Math.max(0, page - 1))}\n            disabled={page === 0}\n            className=\"rounded p-1 hover:bg-[var(--bg-hover)] disabled:opacity-40\"\n            aria-label={labels.prevPage}\n          >\n            <ChevronLeft className=\"size-4\" />\n          </button>\n          {items.map((it, i) =>\n            it === \"ellipsis\" ? (\n              <span key={`e${i}`} className=\"px-1 text-[var(--text-placeholder)]\">\n                …\n              </span>\n            ) : (\n              <button\n                key={it}\n                type=\"button\"\n                onClick={() => onPage(it)}\n                // Which page you are on is carried only by a background colour\n                // otherwise, and the strip is a row of bare numbers with nothing\n                // else to tell them apart.\n                aria-current={it === page ? \"page\" : undefined}\n                className={cn(\n                  \"min-w-7 rounded px-2 py-0.5\",\n                  it === page\n                    ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                    : \"hover:bg-[var(--bg-hover)]\",\n                )}\n              >\n                {num.format(it + 1)}\n              </button>\n            ),\n          )}\n          <button\n            type=\"button\"\n            onClick={() => onPage(Math.min(totalPages - 1, page + 1))}\n            disabled={page >= totalPages - 1}\n            className=\"rounded p-1 hover:bg-[var(--bg-hover)] disabled:opacity-40\"\n            aria-label={labels.nextPage}\n          >\n            <ChevronRight className=\"size-4\" />\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAyDQ,cAKA,YALA;AAzDR,SAAS,eAAe;AACxB,SAAS,aAAa,oBAAoB;AAC1C,SAAS,UAAU;AACnB,SAAS,iCAAuD;AAChE,SAAS,oBAAoB;AAEtB,MAAM,oBAAoB,CAAC,IAAI,IAAI,IAAI,KAAK,GAAG;AAgB/C,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AACV,GAAoB;AAClB,QAAM,SAAS,aAAa,UAAU;AAKtC,QAAM,MAAM,QAAQ,MAAM,IAAI,KAAK,aAAa,MAAM,GAAG,CAAC,MAAM,CAAC;AACjE,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,cAAc,EAAG,QAAO,MAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MAAM,CAAC;AAC1E,UAAM,MAAM,oBAAI,IAAY,CAAC,GAAG,aAAa,GAAG,IAAI,CAAC;AACrD,aAAS,IAAI,GAAG,KAAK,GAAG,KAAK;AAC3B,UAAI,OAAO,KAAK,EAAG,KAAI,IAAI,OAAO,CAAC;AACnC,UAAI,OAAO,KAAK,aAAa,EAAG,KAAI,IAAI,OAAO,CAAC;AAAA,IAClD;AACA,WAAO,MAAM,KAAK,GAAG,EAAE,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAAA,EAC7C,GAAG,CAAC,MAAM,UAAU,CAAC;AAErB,QAAM,QAAiC,CAAC;AACxC,UAAQ,QAAQ,CAAC,GAAG,QAAQ;AAC1B,QAAI,MAAM,KAAK,IAAI,QAAQ,MAAM,CAAC,IAAI,EAAG,OAAM,KAAK,UAAU;AAC9D,UAAM,KAAK,CAAC;AAAA,EACd,CAAC;AAED,SACE,qBAAC,SAAI,WAAU,oIACb;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,UACE,uBAAa,WACV,OAAO,SAAS,KAAK,IACrB,OAAO,UAAU,OAAO,WAAW,GAAG,KAAK,IAAI,QAAQ,OAAO,KAAK,QAAQ,GAAG,KAAK,GACzF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,aAAa,WAAW,QAAQ;AAAA,UACvC,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,UAAU,QAAQ,WAAW,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,UACxF,WAAU;AAAA,UACV,cAAY,OAAO;AAAA,UAElB;AAAA,8BAAkB,IAAI,CAAC,MACtB,oBAAC,YAAe,OAAO,GACpB,cAAI,OAAO,CAAC,KADF,CAEb,CACD;AAAA,YACD,oBAAC,YAAO,OAAM,OAAO,iBAAO,aAAY;AAAA;AAAA;AAAA,MAC1C;AAAA,OACF;AAAA,IACC,aAAa,YAAY,aAAa,KACrC,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AAAA,UAC3C,UAAU,SAAS;AAAA,UACnB,WAAU;AAAA,UACV,cAAY,OAAO;AAAA,UAEnB,8BAAC,eAAY,WAAU,UAAS;AAAA;AAAA,MAClC;AAAA,MACC,MAAM;AAAA,QAAI,CAAC,IAAI,MACd,OAAO,aACL,oBAAC,UAAmB,WAAU,uCAAsC,sBAAzD,IAAI,CAAC,EAEhB,IAEA;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAM,OAAO,EAAE;AAAA,YAIxB,gBAAc,OAAO,OAAO,SAAS;AAAA,YACrC,WAAW;AAAA,cACT;AAAA,cACA,OAAO,OACH,sDACA;AAAA,YACN;AAAA,YAEC,cAAI,OAAO,KAAK,CAAC;AAAA;AAAA,UAdb;AAAA,QAeP;AAAA,MAEJ;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,OAAO,KAAK,IAAI,aAAa,GAAG,OAAO,CAAC,CAAC;AAAA,UACxD,UAAU,QAAQ,aAAa;AAAA,UAC/B,WAAU;AAAA,UACV,cAAY,OAAO;AAAA,UAEnB,8BAAC,gBAAa,WAAU,UAAS;AAAA;AAAA,MACnC;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/data-table-pagination.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from \"./data-table-labels\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\nexport const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200] as const;\n\ninterface PaginationProps {\n  page: number;\n  totalPages: number;\n  pageSize: number;\n  total: number;\n  onPage: (p: number) => void;\n  /** Omit when the page size is not the user's to change (a server that fixes it):\n   *  the select is then not rendered at all, rather than rendered and inert. */\n  onPageSize?: (n: number) => void;\n  /** Over `dataTable` from `<UiKitProvider labels>`, over the English defaults. */\n  labels?: Partial<DataTableLabels>;\n  /** For the page numbers and page-size options; falls back to the provider's. */\n  locale?: string;\n}\n\n/** Footer for {@link DataTable}: range summary, page-size select, and a\n *  windowed page-number strip (first/last + ±2 around the current page). */\nexport function Pagination({\n  page,\n  totalPages,\n  pageSize,\n  total,\n  onPage,\n  onPageSize,\n  labels: labelsProp,\n  locale: localeProp,\n}: PaginationProps) {\n  // prop > provider > English, like every other kit component. This defaulted straight\n  // to the English object, so a standalone pager under a translated provider still\n  // said \"Rows per page\" — only the pager INSIDE a DataTable was translated, because\n  // the table resolved the provider's labels and handed them down.\n  const labels = useKitLabels(\"dataTable\", DEFAULT_DATA_TABLE_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  // The bare numbers on the strip and in the select are text too: `String(n)` is\n  // always ASCII digits, which is wrong for a locale that writes its own. The range\n  // summary is not formatted here — `pageRange` / `rowCount` take NUMBERS so the\n  // translation can format them itself, alongside the words around them.\n  const num = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const visible = useMemo(() => {\n    if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i);\n    const set = new Set<number>([0, totalPages - 1, page]);\n    for (let d = 1; d <= 2; d++) {\n      if (page - d >= 0) set.add(page - d);\n      if (page + d <= totalPages - 1) set.add(page + d);\n    }\n    return Array.from(set).sort((a, b) => a - b);\n  }, [page, totalPages]);\n\n  const items: (number | \"ellipsis\")[] = [];\n  visible.forEach((p, idx) => {\n    if (idx > 0 && p - visible[idx - 1] > 1) items.push(\"ellipsis\");\n    items.push(p);\n  });\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-between gap-2 border-t border-[var(--border)] px-3 py-2 text-xs text-[var(--text-secondary)]\">\n      <div className=\"flex items-center gap-2\">\n        <span>\n          {pageSize === Infinity\n            ? labels.rowCount(total)\n            : labels.pageRange(page * pageSize + 1, Math.min(total, (page + 1) * pageSize), total)}\n        </span>\n        {onPageSize && (\n          <select\n            value={pageSize === Infinity ? \"all\" : pageSize}\n            onChange={(e) =>\n              onPageSize(e.target.value === \"all\" ? Infinity : Number(e.target.value))\n            }\n            className=\"rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 py-0.5 text-xs\"\n            aria-label={labels.pageSize}\n          >\n            {PAGE_SIZE_OPTIONS.map((n) => (\n              <option key={n} value={n}>\n                {num.format(n)}\n              </option>\n            ))}\n            <option value=\"all\">{labels.pageSizeAll}</option>\n          </select>\n        )}\n      </div>\n      {pageSize !== Infinity && totalPages > 1 && (\n        <div className=\"flex items-center gap-1\">\n          <button\n            type=\"button\"\n            onClick={() => onPage(Math.max(0, page - 1))}\n            disabled={page === 0}\n            className=\"rounded p-1 hover:bg-[var(--bg-hover)] disabled:opacity-40\"\n            aria-label={labels.prevPage}\n          >\n            {/* \"Previous\" points back along the line — left in LTR, right in RTL. */}\n            <ChevronLeft className=\"size-4 rtl:-scale-x-100\" />\n          </button>\n          {items.map((it, i) =>\n            it === \"ellipsis\" ? (\n              <span key={`e${i}`} className=\"px-1 text-[var(--text-placeholder)]\">\n                …\n              </span>\n            ) : (\n              <button\n                key={it}\n                type=\"button\"\n                onClick={() => onPage(it)}\n                // Which page you are on is carried only by a background colour\n                // otherwise, and the strip is a row of bare numbers with nothing\n                // else to tell them apart.\n                aria-current={it === page ? \"page\" : undefined}\n                className={cn(\n                  \"min-w-7 rounded px-2 py-0.5\",\n                  it === page\n                    ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                    : \"hover:bg-[var(--bg-hover)]\",\n                )}\n              >\n                {num.format(it + 1)}\n              </button>\n            ),\n          )}\n          <button\n            type=\"button\"\n            onClick={() => onPage(Math.min(totalPages - 1, page + 1))}\n            disabled={page >= totalPages - 1}\n            className=\"rounded p-1 hover:bg-[var(--bg-hover)] disabled:opacity-40\"\n            aria-label={labels.nextPage}\n          >\n            <ChevronRight className=\"size-4 rtl:-scale-x-100\" />\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { D as DataTable, a as DataTableColumn, b as DataTableProps, F as FilterState, S as ServerPagination } from '../data-table-filters-DM1auUfH.js';
+export { D as DataTable, a as DataTableColumn, b as DataTableProps, F as FilterState, M as MobileSwipeActions, S as ServerPagination } from '../data-table-filters-noy0Abvi.js';
 export { SortState } from './data-table-sort.js';
 import './swipeable-row.js';
 import './data-table-labels.js';