@eifi1/ui-kit 0.33.1 → 0.34.0

package/dist/components/password-strength.js

@@ -4,6 +4,7 @@ import { useEffect, useRef } from "react";
 import { cn } from "../lib/cn.js";
 import { useAnnounce } from "../hooks/use-announce.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
+import { DEFAULT_PASSWORD_STRENGTH_LABELS } from "./password-strength-labels.js";
 const DEFAULT_MIN_LENGTH = 8;
 function passwordRules(value, { minLength = DEFAULT_MIN_LENGTH } = {}) {
   return [
@@ -29,29 +30,13 @@ function scorePassword(value, options = {}) {
 function passwordByteLength(value) {
   return new TextEncoder().encode(value).length;
 }
-const DEFAULT_PASSWORD_STRENGTH_LABELS = {
-  tooShort: "Too short",
-  weak: "Weak",
-  fair: "Fair",
-  good: "Good",
-  strong: "Strong",
-  announcement: (level) => `Password strength: ${level}`,
-  ruleLength: (minLength) => `At least ${minLength} characters`,
-  ruleCase: "Upper and lower case",
-  ruleDigit: "A number",
-  ruleSymbol: "A symbol",
-  optional: (rule) => `${rule} (optional)`,
-  met: "Met:",
-  notMet: "Not met:",
-  tooLong: (maxBytes) => `At most ${maxBytes} characters (accents and emoji count for more than one).`
-};
 const LEVEL_KEYS = ["tooShort", "weak", "fair", "good", "strong"];
 const FILL = {
   0: "",
-  1: "bg-[var(--danger)]",
-  2: "bg-[var(--warning)]",
+  1: "bg-danger",
+  2: "bg-warning",
   3: "bg-[color-mix(in_oklab,var(--success)_60%,var(--warning))]",
-  4: "bg-[var(--success)]"
+  4: "bg-success"
 };
 function PasswordStrengthMeter({
   value,
@@ -96,14 +81,14 @@ function PasswordStrengthMeter({
           },
           step
         )) }),
-        /* @__PURE__ */ jsx("p", { className: "min-w-[4.5rem] text-end text-xs text-[var(--text-secondary)]", children: level })
+        /* @__PURE__ */ jsx("p", { className: "min-w-[4.5rem] text-end text-xs text-secondary", children: level })
       ] }),
       showRequirements && /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-x-3 gap-y-0.5 text-xs", children: rules.map((r) => /* @__PURE__ */ jsxs(
         "li",
         {
           className: cn(
             "relative",
-            r.met ? "text-[var(--success)]" : "text-[var(--text-muted)]"
+            r.met ? "text-success" : "text-muted"
           ),
           "data-met": r.met,
           children: [
@@ -118,7 +103,7 @@ function PasswordStrengthMeter({
         },
         r.id
       )) }),
-      tooLong && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--danger)]", children: labels.tooLong(maxBytes) })
+      tooLong && /* @__PURE__ */ jsx("p", { className: "text-xs text-danger", children: labels.tooLong(maxBytes) })
     ] })
   ] });
 }

package/dist/components/password-strength.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/password-strength.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * The bar, the word and the advisory checklist under a field where someone is\n * CHOOSING a secret.\n *\n * Ported from Keksdose (`features/auth/password-strength-meter.tsx`), where one meter\n * sits under the sign-in password and the encryption passphrase alike — a copy per\n * form is what had let the passphrase dialogs ship with no meter at all. Three things\n * changed on the way in:\n *\n *  1. **Tokens, not palette.** The four fills were red/amber/lime/emerald utilities;\n *     they are `--danger` → `--warning` → `--success` now, so a consumer re-pointing\n *     those families re-skins the meter with them.\n *  2. **Not colour alone.** The level is always written out beside the bar, and each\n *     checklist item says \"met\" / \"not met\" to a screen reader — the ✓/○ glyphs are\n *     decoration and hidden.\n *  3. **Announced.** A level change is spoken through a polite live region\n *     ({@link useAnnounce}); the bar itself is `aria-hidden`, because four coloured\n *     strips read out as four empty groups.\n *\n * Advisory only, as in Keksdose: nothing here blocks a submit. The caller decides what\n * is required — {@link passwordRules} marks `length` as the one rule that usually is,\n * so a form can gate on it with the same function the checklist draws from.\n *\n * Dependency-free on purpose. zxcvbn is ~400 kB of dictionaries, and neither consumer\n * ships it; a host that does can pass its scorer as `score` and keep the rest.\n */\n\n/* ── The scorer ──────────────────────────────────────────────────────────── */\n\n/** 0 = too short (or empty), 4 = strong. */\nexport type PasswordStrengthScore = 0 | 1 | 2 | 3 | 4;\n\nexport type PasswordRuleId = \"length\" | \"case\" | \"digit\" | \"symbol\";\n\nexport interface PasswordRule {\n  id: PasswordRuleId;\n  met: boolean;\n  /** Only `length` is required; the rest are suggestions. */\n  required: boolean;\n}\n\nexport interface PasswordScoreOptions {\n  /** The length below which a secret is \"too short\", whatever else it has. Keep it\n   *  in step with the server's own minimum. Default 8. */\n  minLength?: number;\n}\n\nconst DEFAULT_MIN_LENGTH = 8;\n\n/** The checklist's rules, evaluated. Pure; the order is the order they are shown in. */\nexport function passwordRules(value: string, { minLength = DEFAULT_MIN_LENGTH }: PasswordScoreOptions = {}): PasswordRule[] {\n  return [\n    // Code points, not UTF-16 units: an emoji is one character to the person typing it.\n    { id: \"length\", met: [...value].length >= minLength, required: true },\n    { id: \"case\", met: /\\p{Ll}/u.test(value) && /\\p{Lu}/u.test(value), required: false },\n    { id: \"digit\", met: /\\p{Nd}/u.test(value), required: false },\n    { id: \"symbol\", met: /[^\\p{L}\\p{N}\\s]/u.test(value), required: false },\n  ];\n}\n\n/**\n * A 0–4 strength bucket. Length dominates, because it genuinely dominates real-world\n * guessing cost: one step each at `minLength`, `minLength + 4` and `minLength + 8`,\n * and one more for at least two of the three variety rules.\n *\n * One addition over Keksdose's curve: a secret with fewer than four DISTINCT\n * characters caps at 1. Sixteen `a`s are long, and nothing about them is strong.\n */\nexport function scorePassword(value: string, options: PasswordScoreOptions = {}): PasswordStrengthScore {\n  const minLength = options.minLength ?? DEFAULT_MIN_LENGTH;\n  const chars = [...value];\n  // Under the minimum is never anything but \"too short\", however varied.\n  if (chars.length === 0 || chars.length < minLength) return 0;\n  let score = 1;\n  if (chars.length >= minLength + 4) score += 1;\n  if (chars.length >= minLength + 8) score += 1;\n  const variety = passwordRules(value, { minLength }).filter((r) => !r.required && r.met).length;\n  if (variety >= 2) score += 1;\n  if (new Set(chars).size < 4) score = 1;\n  return Math.min(score, 4) as PasswordStrengthScore;\n}\n\n/** UTF-8 byte length — what a bcrypt-style ceiling counts. \"ü\" is two, an emoji four. */\nexport function passwordByteLength(value: string): number {\n  return new TextEncoder().encode(value).length;\n}\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** Every string the meter renders or speaks. */\nexport interface PasswordStrengthLabels {\n  /** The five level names, shown beside the bar. Score 0 … 4. */\n  tooShort: string;\n  weak: string;\n  fair: string;\n  good: string;\n  strong: string;\n  /** What the live region says when the level changes, given the level's name. */\n  announcement: (level: string) => string;\n  /** The length rule, given the minimum. */\n  ruleLength: (minLength: number) => string;\n  ruleCase: string;\n  ruleDigit: string;\n  ruleSymbol: string;\n  /** A suggestion rather than a requirement, given the rule's text. */\n  optional: (rule: string) => string;\n  /** Screen-reader-only state before each checklist item — the ✓/○ are hidden. */\n  met: string;\n  notMet: string;\n  /** Shown when the value is over `maxBytes`, given that ceiling. */\n  tooLong: (maxBytes: number) => string;\n}\n\nexport const DEFAULT_PASSWORD_STRENGTH_LABELS: PasswordStrengthLabels = {\n  tooShort: \"Too short\",\n  weak: \"Weak\",\n  fair: \"Fair\",\n  good: \"Good\",\n  strong: \"Strong\",\n  announcement: (level) => `Password strength: ${level}`,\n  ruleLength: (minLength) => `At least ${minLength} characters`,\n  ruleCase: \"Upper and lower case\",\n  ruleDigit: \"A number\",\n  ruleSymbol: \"A symbol\",\n  optional: (rule) => `${rule} (optional)`,\n  met: \"Met:\",\n  notMet: \"Not met:\",\n  tooLong: (maxBytes) =>\n    `At most ${maxBytes} characters (accents and emoji count for more than one).`,\n};\n\nconst LEVEL_KEYS = [\"tooShort\", \"weak\", \"fair\", \"good\", \"strong\"] as const;\n\n/* ── The meter ───────────────────────────────────────────────────────────── */\n\n// The filled segments' colour per score. \"Good\" sits between the warning and the\n// success hue rather than borrowing either, so 3 and 4 differ in colour as well as in\n// segment count. Index 0 is never drawn — a too-short secret fills no segment.\nconst FILL: Record<PasswordStrengthScore, string> = {\n  0: \"\",\n  1: \"bg-[var(--danger)]\",\n  2: \"bg-[var(--warning)]\",\n  3: \"bg-[color-mix(in_oklab,var(--success)_60%,var(--warning))]\",\n  4: \"bg-[var(--success)]\",\n};\n\nexport interface PasswordStrengthMeterProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** The secret being chosen. Nothing visible renders while it is empty. */\n  value: string;\n  /** Replace the built-in scorer (e.g. with zxcvbn's `score`). Must be pure. */\n  score?: (value: string) => PasswordStrengthScore;\n  /** See {@link PasswordScoreOptions.minLength}. Drives the built-in scorer and the\n   *  length rule's text. */\n  minLength?: number;\n  /** Show the checklist under the bar. Default `true`. */\n  showRequirements?: boolean;\n  /**\n   * A byte ceiling to warn about, if the secret has one — bcrypt reads at most 72\n   * BYTES. Leave it unset for a secret that has none (a passphrase stretched in the\n   * browser): inventing one talks people out of the long passphrase they chose.\n   */\n  maxBytes?: number;\n  /** User-facing strings; see {@link PasswordStrengthLabels}. */\n  labels?: Partial<PasswordStrengthLabels>;\n}\n\n/**\n * Render directly under the password field. To have the field itself describe its\n * strength, give this an `id` and point the input's `aria-describedby` at it.\n */\nexport function PasswordStrengthMeter({\n  value,\n  score: scoreProp,\n  minLength = DEFAULT_MIN_LENGTH,\n  showRequirements = true,\n  maxBytes,\n  labels: labelsProp,\n  className,\n  ...rest\n}: PasswordStrengthMeterProps) {\n  // Prop > <UiKitProvider> > English, like every labelled component in the kit.\n  const labels = useKitLabels(\"passwordStrength\", DEFAULT_PASSWORD_STRENGTH_LABELS, labelsProp);\n  const { announce, regionProps } = useAnnounce();\n\n  const empty = value.length === 0;\n  const score = empty ? 0 : scoreProp ? scoreProp(value) : scorePassword(value, { minLength });\n  const level = labels[LEVEL_KEYS[score]];\n\n  // Speak on a CHANGE of level only — not on every keystroke, and not on mount (a\n  // prefilled field has not changed anything). Clearing the field says nothing: the\n  // user did that on purpose and the meter disappearing is the whole news.\n  const previous = useRef(score);\n  useEffect(() => {\n    if (previous.current === score) return;\n    previous.current = score;\n    if (!empty) announce(labels.announcement(level));\n  }, [score, empty, level, labels, announce]);\n\n  const rules = passwordRules(value, { minLength });\n  const ruleText: Record<PasswordRuleId, string> = {\n    length: labels.ruleLength(minLength),\n    case: labels.ruleCase,\n    digit: labels.ruleDigit,\n    symbol: labels.ruleSymbol,\n  };\n  const tooLong = maxBytes !== undefined && passwordByteLength(value) > maxBytes;\n\n  return (\n    <div {...rest} className={cn(\"mt-1.5 space-y-1\", className)}>\n      {/* Rendered from the start and never unmounted — see useAnnounce. */}\n      <div {...regionProps} />\n      {!empty && (\n        <>\n          <div className=\"flex items-center gap-2\">\n            <div className=\"flex flex-1 gap-1\" aria-hidden=\"true\" data-score={score}>\n              {[1, 2, 3, 4].map((step) => (\n                <div\n                  key={step}\n                  className={cn(\n                    \"h-1 flex-1 rounded-full\",\n                    step <= score ? FILL[score] : \"bg-[var(--border)]\",\n                  )}\n                />\n              ))}\n            </div>\n            <p className=\"min-w-[4.5rem] text-end text-xs text-[var(--text-secondary)]\">{level}</p>\n          </div>\n          {showRequirements && (\n            <ul className=\"flex flex-wrap gap-x-3 gap-y-0.5 text-xs\">\n              {rules.map((r) => (\n                <li\n                  key={r.id}\n                  // `relative`: the sr-only state needs a local containing block.\n                  className={cn(\n                    \"relative\",\n                    r.met ? \"text-[var(--success)]\" : \"text-[var(--text-muted)]\",\n                  )}\n                  data-met={r.met}\n                >\n                  <span className=\"sr-only\">{r.met ? labels.met : labels.notMet} </span>\n                  <span aria-hidden=\"true\">{r.met ? \"✓\" : \"○\"}</span>{\" \"}\n                  {r.required ? ruleText[r.id] : labels.optional(ruleText[r.id])}\n                </li>\n              ))}\n            </ul>\n          )}\n          {tooLong && <p className=\"text-xs text-[var(--danger)]\">{labels.tooLong(maxBytes)}</p>}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/password-strength.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_PASSWORD_STRENGTH_LABELS } from \"./password-strength-labels\";\n\n/**\n * The bar, the word and the advisory checklist under a field where someone is\n * CHOOSING a secret.\n *\n * Ported from Keksdose (`features/auth/password-strength-meter.tsx`), where one meter\n * sits under the sign-in password and the encryption passphrase alike — a copy per\n * form is what had let the passphrase dialogs ship with no meter at all. Three things\n * changed on the way in:\n *\n *  1. **Tokens, not palette.** The four fills were red/amber/lime/emerald utilities;\n *     they are `--danger` → `--warning` → `--success` now, so a consumer re-pointing\n *     those families re-skins the meter with them.\n *  2. **Not colour alone.** The level is always written out beside the bar, and each\n *     checklist item says \"met\" / \"not met\" to a screen reader — the ✓/○ glyphs are\n *     decoration and hidden.\n *  3. **Announced.** A level change is spoken through a polite live region\n *     ({@link useAnnounce}); the bar itself is `aria-hidden`, because four coloured\n *     strips read out as four empty groups.\n *\n * Advisory only, as in Keksdose: nothing here blocks a submit. The caller decides what\n * is required — {@link passwordRules} marks `length` as the one rule that usually is,\n * so a form can gate on it with the same function the checklist draws from.\n *\n * Dependency-free on purpose. zxcvbn is ~400 kB of dictionaries, and neither consumer\n * ships it; a host that does can pass its scorer as `score` and keep the rest.\n */\n\n/* ── The scorer ──────────────────────────────────────────────────────────── */\n\n/** 0 = too short (or empty), 4 = strong. */\nexport type PasswordStrengthScore = 0 | 1 | 2 | 3 | 4;\n\nexport type PasswordRuleId = \"length\" | \"case\" | \"digit\" | \"symbol\";\n\nexport interface PasswordRule {\n  id: PasswordRuleId;\n  met: boolean;\n  /** Only `length` is required; the rest are suggestions. */\n  required: boolean;\n}\n\nexport interface PasswordScoreOptions {\n  /** The length below which a secret is \"too short\", whatever else it has. Keep it\n   *  in step with the server's own minimum. Default 8. */\n  minLength?: number;\n}\n\nconst DEFAULT_MIN_LENGTH = 8;\n\n/** The checklist's rules, evaluated. Pure; the order is the order they are shown in. */\nexport function passwordRules(value: string, { minLength = DEFAULT_MIN_LENGTH }: PasswordScoreOptions = {}): PasswordRule[] {\n  return [\n    // Code points, not UTF-16 units: an emoji is one character to the person typing it.\n    { id: \"length\", met: [...value].length >= minLength, required: true },\n    { id: \"case\", met: /\\p{Ll}/u.test(value) && /\\p{Lu}/u.test(value), required: false },\n    { id: \"digit\", met: /\\p{Nd}/u.test(value), required: false },\n    { id: \"symbol\", met: /[^\\p{L}\\p{N}\\s]/u.test(value), required: false },\n  ];\n}\n\n/**\n * A 0–4 strength bucket. Length dominates, because it genuinely dominates real-world\n * guessing cost: one step each at `minLength`, `minLength + 4` and `minLength + 8`,\n * and one more for at least two of the three variety rules.\n *\n * One addition over Keksdose's curve: a secret with fewer than four DISTINCT\n * characters caps at 1. Sixteen `a`s are long, and nothing about them is strong.\n */\nexport function scorePassword(value: string, options: PasswordScoreOptions = {}): PasswordStrengthScore {\n  const minLength = options.minLength ?? DEFAULT_MIN_LENGTH;\n  const chars = [...value];\n  // Under the minimum is never anything but \"too short\", however varied.\n  if (chars.length === 0 || chars.length < minLength) return 0;\n  let score = 1;\n  if (chars.length >= minLength + 4) score += 1;\n  if (chars.length >= minLength + 8) score += 1;\n  const variety = passwordRules(value, { minLength }).filter((r) => !r.required && r.met).length;\n  if (variety >= 2) score += 1;\n  if (new Set(chars).size < 4) score = 1;\n  return Math.min(score, 4) as PasswordStrengthScore;\n}\n\n/** UTF-8 byte length — what a bcrypt-style ceiling counts. \"ü\" is two, an emoji four. */\nexport function passwordByteLength(value: string): number {\n  return new TextEncoder().encode(value).length;\n}\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** Every string the meter renders or speaks. */\nexport interface PasswordStrengthLabels {\n  /** The five level names, shown beside the bar. Score 0 … 4. */\n  tooShort: string;\n  weak: string;\n  fair: string;\n  good: string;\n  strong: string;\n  /** What the live region says when the level changes, given the level's name. */\n  announcement: (level: string) => string;\n  /** The length rule, given the minimum. */\n  ruleLength: (minLength: number) => string;\n  ruleCase: string;\n  ruleDigit: string;\n  ruleSymbol: string;\n  /** A suggestion rather than a requirement, given the rule's text. */\n  optional: (rule: string) => string;\n  /** Screen-reader-only state before each checklist item — the ✓/○ are hidden. */\n  met: string;\n  notMet: string;\n  /** Shown when the value is over `maxBytes`, given that ceiling. */\n  tooLong: (maxBytes: number) => string;\n}\n\n// Defined in ./password-strength-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PASSWORD_STRENGTH_LABELS };\n\nconst LEVEL_KEYS = [\"tooShort\", \"weak\", \"fair\", \"good\", \"strong\"] as const;\n\n/* ── The meter ───────────────────────────────────────────────────────────── */\n\n// The filled segments' colour per score. \"Good\" sits between the warning and the\n// success hue rather than borrowing either, so 3 and 4 differ in colour as well as in\n// segment count. Index 0 is never drawn — a too-short secret fills no segment.\nconst FILL: Record<PasswordStrengthScore, string> = {\n  0: \"\",\n  1: \"bg-danger\",\n  2: \"bg-warning\",\n  3: \"bg-[color-mix(in_oklab,var(--success)_60%,var(--warning))]\",\n  4: \"bg-success\",\n};\n\nexport interface PasswordStrengthMeterProps extends ComponentPropsWithRef<\"div\"> {\n  /** The secret being chosen. Nothing visible renders while it is empty. */\n  value: string;\n  /** Replace the built-in scorer (e.g. with zxcvbn's `score`). Must be pure. */\n  score?: (value: string) => PasswordStrengthScore;\n  /** See {@link PasswordScoreOptions.minLength}. Drives the built-in scorer and the\n   *  length rule's text. */\n  minLength?: number;\n  /** Show the checklist under the bar. Default `true`. */\n  showRequirements?: boolean;\n  /**\n   * A byte ceiling to warn about, if the secret has one — bcrypt reads at most 72\n   * BYTES. Leave it unset for a secret that has none (a passphrase stretched in the\n   * browser): inventing one talks people out of the long passphrase they chose.\n   */\n  maxBytes?: number;\n  /** User-facing strings; see {@link PasswordStrengthLabels}. */\n  labels?: LabelOverride<PasswordStrengthLabels>;\n}\n\n/**\n * Render directly under the password field. To have the field itself describe its\n * strength, give this an `id` and point the input's `aria-describedby` at it.\n */\nexport function PasswordStrengthMeter({\n  value,\n  score: scoreProp,\n  minLength = DEFAULT_MIN_LENGTH,\n  showRequirements = true,\n  maxBytes,\n  labels: labelsProp,\n  className,\n  ...rest\n}: PasswordStrengthMeterProps) {\n  // Prop > <UiKitProvider> > English, like every labelled component in the kit.\n  const labels = useKitLabels(\"passwordStrength\", DEFAULT_PASSWORD_STRENGTH_LABELS, labelsProp);\n  const { announce, regionProps } = useAnnounce();\n\n  const empty = value.length === 0;\n  const score = empty ? 0 : scoreProp ? scoreProp(value) : scorePassword(value, { minLength });\n  const level = labels[LEVEL_KEYS[score]];\n\n  // Speak on a CHANGE of level only — not on every keystroke, and not on mount (a\n  // prefilled field has not changed anything). Clearing the field says nothing: the\n  // user did that on purpose and the meter disappearing is the whole news.\n  const previous = useRef(score);\n  useEffect(() => {\n    if (previous.current === score) return;\n    previous.current = score;\n    if (!empty) announce(labels.announcement(level));\n  }, [score, empty, level, labels, announce]);\n\n  const rules = passwordRules(value, { minLength });\n  const ruleText: Record<PasswordRuleId, string> = {\n    length: labels.ruleLength(minLength),\n    case: labels.ruleCase,\n    digit: labels.ruleDigit,\n    symbol: labels.ruleSymbol,\n  };\n  const tooLong = maxBytes !== undefined && passwordByteLength(value) > maxBytes;\n\n  return (\n    <div {...rest} className={cn(\"mt-1.5 space-y-1\", className)}>\n      {/* Rendered from the start and never unmounted — see useAnnounce. */}\n      <div {...regionProps} />\n      {!empty && (\n        <>\n          <div className=\"flex items-center gap-2\">\n            <div className=\"flex flex-1 gap-1\" aria-hidden=\"true\" data-score={score}>\n              {[1, 2, 3, 4].map((step) => (\n                <div\n                  key={step}\n                  className={cn(\n                    \"h-1 flex-1 rounded-full\",\n                    step <= score ? FILL[score] : \"bg-[var(--border)]\",\n                  )}\n                />\n              ))}\n            </div>\n            <p className=\"min-w-[4.5rem] text-end text-xs text-secondary\">{level}</p>\n          </div>\n          {showRequirements && (\n            <ul className=\"flex flex-wrap gap-x-3 gap-y-0.5 text-xs\">\n              {rules.map((r) => (\n                <li\n                  key={r.id}\n                  // `relative`: the sr-only state needs a local containing block.\n                  className={cn(\n                    \"relative\",\n                    r.met ? \"text-success\" : \"text-muted\",\n                  )}\n                  data-met={r.met}\n                >\n                  <span className=\"sr-only\">{r.met ? labels.met : labels.notMet} </span>\n                  <span aria-hidden=\"true\">{r.met ? \"✓\" : \"○\"}</span>{\" \"}\n                  {r.required ? ruleText[r.id] : labels.optional(ruleText[r.id])}\n                </li>\n              ))}\n            </ul>\n          )}\n          {tooLong && <p className=\"text-xs text-danger\">{labels.tooLong(maxBytes)}</p>}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/phone-input-labels.d.ts

@@ -0,0 +1,2 @@
+import type { PhoneInputLabels } from "./phone-input.js";
+export declare const DEFAULT_PHONE_INPUT_LABELS: PhoneInputLabels;

package/dist/components/phone-input-labels.js

@@ -0,0 +1,9 @@
+"use client";
+const DEFAULT_PHONE_INPUT_LABELS = {
+  countryCode: "Country code",
+  other: "Other"
+};
+export {
+  DEFAULT_PHONE_INPUT_LABELS
+};
+//# sourceMappingURL=phone-input-labels.js.map

package/dist/components/phone-input-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/phone-input-labels.ts"],"sourcesContent":["// The English words of ./phone-input, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./phone-input re-exports them.\n\nimport type { PhoneInputLabels } from \"./phone-input\";\n\nexport const DEFAULT_PHONE_INPUT_LABELS: PhoneInputLabels = {\n  countryCode: \"Country code\",\n  other: \"Other\",\n};\n"],"mappings":";AAMO,MAAM,6BAA+C;AAAA,EAC1D,aAAa;AAAA,EACb,OAAO;AACT;","names":[]}

package/dist/components/phone-input.d.ts

@@ -1,101 +1,75 @@
-import 'react';
-import '../lib/phone.js';
-export { cJ as DEFAULT_PHONE_INPUT_LABELS, er as PhoneInput, es as PhoneInputLabels, et as PhoneInputProps } from '../delete-account-setting-DAgGBrbn.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './write-lock.js';
-import './mini-calendar.js';
-import './calendar-heatmap.js';
-import './popover.js';
-import '../hooks/use-breakpoint.js';
-import './field-sync.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 './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 './user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import './menu-item.js';
-import './floating-panel.js';
-import '../hooks/use-authed-src.js';
-import './account-settings-labels.js';
-import './bulk-action-bar.js';
-import './list.js';
-import './breadcrumbs.js';
-import './toast.js';
-import './description-list.js';
-import './line-items.js';
-import './error-boundary.js';
-import './authed-image.js';
-import './image-grid.js';
-import './lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import './account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import '../i18n/plurals.js';
-import './appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.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 './sign-chip.js';
-import './column-mapper.js';
-import '../lib/column-mapping.js';
-import '../lib/table-text.js';
-import './focus-ring.js';
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import type { PhoneCountry, PhoneCountryCode } from "../lib/phone.js";
+import { type InputProps } from "./input.js";
+import { DEFAULT_PHONE_INPUT_LABELS } from "./phone-input-labels.js";
+/** The words {@link PhoneInput} renders on its own behalf. */
+export interface PhoneInputLabels {
+    /** The country-code select's accessible name. */
+    countryCode: string;
+    /** The select's last option: a number from a country not listed, typed with its
+     *  own "+". */
+    other: string;
+}
+export { DEFAULT_PHONE_INPUT_LABELS };
+export interface PhoneInputProps extends Omit<InputProps, "type" | "value" | "defaultValue"> {
+    /** The number: E.164 ("+41210000001") for one the field could read, or free text —
+     *  a value saved before the field existed is shown exactly as it is. `""` is no
+     *  number. */
+    value: string;
+    /** On every change: E.164 when the typed text reads as a number of the selected
+     *  country (or carries its own "+"), otherwise the typed text UNCHANGED. Nothing is
+     *  refused — see {@link PhoneInput}. Plain `onChange` still fires with the raw event;
+     *  bind this one to a form. */
+    onValueChange?: (value: string) => void;
+    /** The country a number typed without "+" belongs to, until the value says
+     *  otherwise. Default `"CH"`. */
+    defaultCountry?: PhoneCountry;
+    /** The countries the select offers, in order; "Other" always follows. Default
+     *  {@link PHONE_COUNTRIES} (CH, LI, DE, AT, FR, IT). A stored number from a country
+     *  left out still shows under its own code. */
+    countries?: readonly PhoneCountryCode[];
+    /** See {@link PhoneInputLabels}. */
+    labels?: LabelOverride<PhoneInputLabels>;
+    /** Classes for the whole field — the select, the input and the lines under them.
+     *  `inputClassName` reaches the `<input>`. */
+    className?: string;
+}
+/**
+ * A phone number field (kastlan): a country-code select and the number, stored as
+ * E.164 and shown grouped.
+ *
+ * kastlan's contacts kept whatever was typed — "079 …", "+41 (0)79 …", "0041 79 …" —
+ * which nobody could dial from the app or match against the next import. This field
+ * turns all of those into one stored form, "+41210000001", without taking anything
+ * away from the person typing:
+ *
+ *  - **A country to type against.** The select (default CH, then LI, DE, AT, FR, IT
+ *    and "Other") says which country a number without "+" belongs to; the national
+ *    trunk 0 may be typed or left out. Typing a "+" or "00" overrides it, and the
+ *    select follows the number ("+49 …" switches it to DE). Changing the select moves
+ *    the national number to the new country code.
+ *  - **E.164 when it reads, the text when it does not.** A number the rules read is
+ *    emitted as E.164; anything else ("ask reception", an extension) is emitted exactly
+ *    as typed. Never refused, never an error of its own: a contact's number is often
+ *    known only roughly, and a field that will not save "079 … (mornings)" makes
+ *    people type it into the notes instead. An app that needs a dialable number
+ *    checks {@link isE164} on submit.
+ *  - **Existing values untouched.** A free-text value from before is shown exactly as
+ *    it is, and normalised only when someone edits it — the field never rewrites a
+ *    record just by being opened.
+ *  - **Grouped when settled.** While typing the field shows what was typed; on blur a
+ *    number it read is regrouped by its country ("21 000 00 01").
+ *
+ * **The limitation** — there is no libphonenumber behind this (≈150 kB of metadata in
+ * every bundle): the six countries have light rules (the trunk 0, a plausible length)
+ * and every other country is any "+" with 8–15 digits. A well-formed number that does
+ * not exist passes, and German and Austrian landlines, whose area codes vary in length,
+ * are grouped only where the split is known (mobile prefixes, the largest cities) and
+ * otherwise shown as one block. See `lib/phone.ts`.
+ *
+ * `label`, `hint`, `error` and `invalid` read as on {@link Input}: the label floats in
+ * the number's box, and a text hint and the error go under the whole row, attached to
+ * the number with `aria-describedby`. The select is named by `labels.countryCode`, and
+ * the pair is a group named by a string `label`.
+ */
+export declare function PhoneInput({ ref, value, onValueChange, onChange, onBlur, defaultCountry, countries, labels, className, inputClassName, label, hint, error, invalid, disabled, "aria-describedby": ariaDescribedBy, ...rest }: PhoneInputProps): import("react").JSX.Element;

package/dist/components/phone-input.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, useState } from "react";
+import { useState } from "react";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { cn } from "../lib/cn.js";
 import {
@@ -11,19 +11,14 @@ import {
   isE164,
   parsePhone
 } from "../lib/phone.js";
-import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
-import { Input, Select } from "./ui.js";
-const DEFAULT_PHONE_INPUT_LABELS = {
-  countryCode: "Country code",
-  other: "Other"
-};
+import { useFieldMessages } from "./field-parts.js";
+import { Input } from "./input.js";
+import { Select } from "./select.js";
+import { DEFAULT_PHONE_INPUT_LABELS } from "./phone-input-labels.js";
 function usePhoneInputLabels(prop) {
   const labels = useKitLabels("phoneInput", DEFAULT_PHONE_INPUT_LABELS, prop);
   return labels;
 }
-const CAPTION_CLASS = "mt-1 text-caption leading-tight text-[var(--text-muted)]";
-const ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
-const isTextHint = (hint) => typeof hint === "string" && hint !== "" || typeof hint === "number";
 function storedNumber(value) {
   return isE164(value) ? parsePhone(value, "other") : null;
 }
@@ -42,7 +37,8 @@ function displayOf(value, country) {
   }
   return formatPhone(parsed.e164);
 }
-const PhoneInput = forwardRef(function PhoneInput2({
+function PhoneInput({
+  ref,
   value,
   onValueChange,
   onChange,
@@ -59,7 +55,7 @@ const PhoneInput = forwardRef(function PhoneInput2({
   disabled,
   "aria-describedby": ariaDescribedBy,
   ...rest
-}, ref) {
+}) {
   const text = usePhoneInputLabels(labels);
   const [country, setCountry] = useState(() => countryOf(value) ?? defaultCountry);
   const [draft, setDraft] = useState(null);
@@ -107,10 +103,13 @@ const PhoneInput = forwardRef(function PhoneInput2({
   const display = draft !== null && emitFor(draft, country) === value ? draft : displayOf(value, country);
   const options = [...countries];
   if (country !== "other" && !options.includes(country)) options.push(country);
-  const captionId = useId();
-  const errorId = useId();
-  const caption = isTextHint(hint);
-  const showError = hasMessage(error);
+  const messages = useFieldMessages({
+    hint,
+    error,
+    invalid,
+    describedBy: ariaDescribedBy,
+    ariaInvalid: rest["aria-invalid"]
+  });
   const named = typeof label === "string" && label !== "";
   return /* @__PURE__ */ jsxs(
     "div",
@@ -143,9 +142,9 @@ const PhoneInput = forwardRef(function PhoneInput2({
               type: "tel",
               autoComplete: rest.autoComplete ?? "tel",
               label,
-              hint: caption ? void 0 : hint,
-              invalid: invalid || showError,
-              "aria-describedby": mergeDescribedBy(ariaDescribedBy, caption && captionId, showError && errorId),
+              hint: messages.labelHint,
+              invalid: messages.isInvalid,
+              "aria-describedby": messages.describedBy,
               disabled,
               value: display,
               onChange: handleChange,
@@ -157,13 +156,11 @@ const PhoneInput = forwardRef(function PhoneInput2({
             }
           ) })
         ] }),
-        caption && /* @__PURE__ */ jsx("p", { id: captionId, className: CAPTION_CLASS, children: hint }),
-        showError && /* @__PURE__ */ jsx("p", { id: errorId, className: ERROR_CLASS, children: error })
+        messages.below
       ]
     }
   );
-});
-PhoneInput.displayName = "PhoneInput";
+}
 export {
   DEFAULT_PHONE_INPUT_LABELS,
   PhoneInput

package/dist/components/phone-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/phone-input.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from \"react\";\nimport type { ChangeEvent, FocusEvent } from \"react\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport {\n  PHONE_COUNTRIES,\n  PHONE_DIAL_CODES,\n  formatNationalPhone,\n  formatPhone,\n  isE164,\n  parsePhone,\n} from \"../lib/phone\";\nimport type { ParsedPhone, PhoneCountry, PhoneCountryCode } from \"../lib/phone\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { Input, Select, type InputProps } from \"./ui\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The words {@link PhoneInput} renders on its own behalf. */\nexport interface PhoneInputLabels {\n  /** The country-code select's accessible name. */\n  countryCode: string;\n  /** The select's last option: a number from a country not listed, typed with its\n   *  own \"+\". */\n  other: string;\n}\n\nexport const DEFAULT_PHONE_INPUT_LABELS: PhoneInputLabels = {\n  countryCode: \"Country code\",\n  other: \"Other\",\n};\n\n/**\n * The `phoneInput` namespace: prop > `<UiKitProvider labels>` > English (0.22.0).\n */\nfunction usePhoneInputLabels(prop: Partial<PhoneInputLabels> | undefined): PhoneInputLabels {\n  const labels: PhoneInputLabels = useKitLabels(\"phoneInput\", DEFAULT_PHONE_INPUT_LABELS, prop);\n  return labels;\n}\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\n/** The caption and the error under the row — the type every kit field uses for them\n *  (Select's caption, Input's `error`). */\nconst CAPTION_CLASS = \"mt-1 text-caption leading-tight text-[var(--text-muted)]\";\nconst ERROR_CLASS = \"mt-1 text-caption leading-tight text-[var(--danger)]\";\n\nconst isTextHint = (hint: unknown): hint is string | number =>\n  (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n\n/** A stored value read back: an E.164 number these rules can read, else `null`. */\nfunction storedNumber(value: string): ParsedPhone | null {\n  return isE164(value) ? parsePhone(value, \"other\") : null;\n}\n\n/** The select's country for a stored E.164 value, or `null` for free text. */\nfunction countryOf(value: string): PhoneCountry | null {\n  const parsed = storedNumber(value);\n  return parsed ? (parsed.country ?? \"other\") : null;\n}\n\n/** What the field emits for typed text: E.164 when it reads, the text unchanged when\n *  it does not. */\nfunction emitFor(raw: string, country: PhoneCountry): string {\n  return parsePhone(raw, country)?.e164 ?? raw;\n}\n\n/**\n * The text a stored value shows, outside of typing. Under its own country: the national\n * number grouped (\"21 000 00 01\" beside \"CH +41\"). Under another (a \"+33\" number while\n * the select says \"Other\"): the whole international number. Free text: as it is.\n */\nfunction displayOf(value: string, country: PhoneCountry): string {\n  const parsed = storedNumber(value);\n  if (!parsed) return value;\n  if (parsed.country !== null && parsed.country === country) {\n    return formatNationalPhone(parsed.national, parsed.country);\n  }\n  return formatPhone(parsed.e164);\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport interface PhoneInputProps extends Omit<InputProps, \"type\" | \"value\" | \"defaultValue\"> {\n  /** The number: E.164 (\"+41210000001\") for one the field could read, or free text —\n   *  a value saved before the field existed is shown exactly as it is. `\"\"` is no\n   *  number. */\n  value: string;\n  /** On every change: E.164 when the typed text reads as a number of the selected\n   *  country (or carries its own \"+\"), otherwise the typed text UNCHANGED. Nothing is\n   *  refused — see {@link PhoneInput}. Plain `onChange` still fires with the raw event;\n   *  bind this one to a form. */\n  onValueChange?: (value: string) => void;\n  /** The country a number typed without \"+\" belongs to, until the value says\n   *  otherwise. Default `\"CH\"`. */\n  defaultCountry?: PhoneCountry;\n  /** The countries the select offers, in order; \"Other\" always follows. Default\n   *  {@link PHONE_COUNTRIES} (CH, LI, DE, AT, FR, IT). A stored number from a country\n   *  left out still shows under its own code. */\n  countries?: readonly PhoneCountryCode[];\n  /** See {@link PhoneInputLabels}. */\n  labels?: Partial<PhoneInputLabels>;\n  /** Classes for the whole field — the select, the input and the lines under them.\n   *  `inputClassName` reaches the `<input>`. */\n  className?: string;\n}\n\n/**\n * A phone number field (kastlan): a country-code select and the number, stored as\n * E.164 and shown grouped.\n *\n * kastlan's contacts kept whatever was typed — \"079 …\", \"+41 (0)79 …\", \"0041 79 …\" —\n * which nobody could dial from the app or match against the next import. This field\n * turns all of those into one stored form, \"+41210000001\", without taking anything\n * away from the person typing:\n *\n *  - **A country to type against.** The select (default CH, then LI, DE, AT, FR, IT\n *    and \"Other\") says which country a number without \"+\" belongs to; the national\n *    trunk 0 may be typed or left out. Typing a \"+\" or \"00\" overrides it, and the\n *    select follows the number (\"+49 …\" switches it to DE). Changing the select moves\n *    the national number to the new country code.\n *  - **E.164 when it reads, the text when it does not.** A number the rules read is\n *    emitted as E.164; anything else (\"ask reception\", an extension) is emitted exactly\n *    as typed. Never refused, never an error of its own: a contact's number is often\n *    known only roughly, and a field that will not save \"079 … (mornings)\" makes\n *    people type it into the notes instead. An app that needs a dialable number\n *    checks {@link isE164} on submit.\n *  - **Existing values untouched.** A free-text value from before is shown exactly as\n *    it is, and normalised only when someone edits it — the field never rewrites a\n *    record just by being opened.\n *  - **Grouped when settled.** While typing the field shows what was typed; on blur a\n *    number it read is regrouped by its country (\"21 000 00 01\").\n *\n * **The limitation** — there is no libphonenumber behind this (≈150 kB of metadata in\n * every bundle): the six countries have light rules (the trunk 0, a plausible length)\n * and every other country is any \"+\" with 8–15 digits. A well-formed number that does\n * not exist passes, and German and Austrian landlines, whose area codes vary in length,\n * are grouped only where the split is known (mobile prefixes, the largest cities) and\n * otherwise shown as one block. See `lib/phone.ts`.\n *\n * `label`, `hint`, `error` and `invalid` read as on {@link Input}: the label floats in\n * the number's box, and a text hint and the error go under the whole row, attached to\n * the number with `aria-describedby`. The select is named by `labels.countryCode`, and\n * the pair is a group named by a string `label`.\n */\nexport const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(function PhoneInput(\n  {\n    value,\n    onValueChange,\n    onChange,\n    onBlur,\n    defaultCountry = \"CH\",\n    countries = PHONE_COUNTRIES,\n    labels,\n    className,\n    inputClassName,\n    label,\n    hint,\n    error,\n    invalid,\n    disabled,\n    \"aria-describedby\": ariaDescribedBy,\n    ...rest\n  },\n  ref,\n) {\n  const text = usePhoneInputLabels(labels);\n  const [country, setCountry] = useState<PhoneCountry>(() => countryOf(value) ?? defaultCountry);\n  // What was typed, shown for as long as it still reads as the value (AmountInput's\n  // draft): the person's own spacing stays under their fingers, and is regrouped on\n  // blur.\n  const [draft, setDraft] = useState<string | null>(null);\n  // The last value this field emitted, to tell its own echo from a value set outside.\n  const [emitted, setEmitted] = useState<string | null>(null);\n  const [seen, setSeen] = useState(value);\n  if (seen !== value) {\n    setSeen(value);\n    if (value !== emitted) {\n      // Set from outside (a reset, another record): its own country, none of our text.\n      const own = countryOf(value);\n      if (own) setCountry(own);\n      setDraft(null);\n    }\n  }\n\n  const emit = (next: string) => {\n    setEmitted(next);\n    onValueChange?.(next);\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(e);\n    const raw = e.target.value;\n    setDraft(raw);\n    const parsed = parsePhone(raw, country);\n    // A number typed with its own \"+\" takes the select with it.\n    if (parsed && parsed.country !== country) setCountry(parsed.country ?? \"other\");\n    emit(parsed?.e164 ?? raw);\n  };\n\n  const handleCountry = (next: PhoneCountry) => {\n    setCountry(next);\n    const stored = storedNumber(value);\n    if (stored) {\n      // \"Other\", the same country, or a generic number with its own \"+\": the number\n      // stays, only the way it is shown changes.\n      if (next === \"other\" || stored.country === null || stored.country === next) {\n        setDraft(null);\n        return;\n      }\n      // A different listed country: the national number moves to its code. If it does\n      // not read there, the digits are kept as text for the person to finish.\n      emit(parsePhone(stored.national, next)?.e164 ?? stored.national);\n      setDraft(null);\n      return;\n    }\n    // Free text (or a draft): read it again under the new country.\n    const source = draft ?? value;\n    const parsed = source.trim() === \"\" ? null : parsePhone(source, next);\n    if (parsed && parsed.e164 !== value) {\n      setDraft(source);\n      emit(parsed.e164);\n    }\n  };\n\n  const display = draft !== null && emitFor(draft, country) === value ? draft : displayOf(value, country);\n\n  // The select offers the configured countries, plus the stored number's own if it\n  // is not among them — a select cannot show a value it has no option for.\n  const options: PhoneCountryCode[] = [...countries];\n  if (country !== \"other\" && !options.includes(country)) options.push(country);\n\n  const captionId = useId();\n  const errorId = useId();\n  const caption = isTextHint(hint);\n  const showError = hasMessage(error);\n  const named = typeof label === \"string\" && label !== \"\";\n\n  return (\n    <div\n      className={className}\n      role={named ? \"group\" : undefined}\n      aria-label={named ? label : undefined}\n    >\n      {/* On a phone at Large the number takes a line of its own under the country (0.32.1,\n          the 360 px Extra-large sweep; docs/text-size-harmonization.md §4 \"nothing\n          truncates\"): the 7rem select is 168 px at 150 %, and on a 360 px phone it left\n          the number 82 px — \"Ph…\" over \"021 (\". `large:max-sm:`, the scaled phone width,\n          so a wider screen at Large and Normal keep the one row. */}\n      <div className=\"flex items-stretch gap-2 large:max-sm:flex-wrap\">\n        <Select\n          aria-label={text.countryCode}\n          value={country}\n          disabled={disabled}\n          onChange={(e) => handleCountry(e.target.value as PhoneCountry)}\n          className=\"w-28 shrink-0\"\n          // Stretched to the number's height: a labelled field is taller than an\n          // unlabelled select, and the pair should read as one row.\n          selectClassName=\"h-full tabular-nums\"\n        >\n          {options.map((code) => (\n            <option key={code} value={code}>\n              {`${code} +${PHONE_DIAL_CODES[code]}`}\n            </option>\n          ))}\n          <option value=\"other\">{text.other}</option>\n        </Select>\n        {/* Its own flex item, so nothing Input wraps itself in can take the sizing. */}\n        <div className=\"min-w-0 flex-1 large:max-sm:basis-full\">\n          <Input\n            ref={ref}\n            {...rest}\n            type=\"tel\"\n            autoComplete={rest.autoComplete ?? \"tel\"}\n            label={label}\n            // A FieldHint \"?\" rides the label line; text goes under the whole row.\n            hint={caption ? undefined : hint}\n            invalid={invalid || showError}\n            aria-describedby={mergeDescribedBy(ariaDescribedBy, caption && captionId, showError && errorId)}\n            disabled={disabled}\n            value={display}\n            onChange={handleChange}\n            onBlur={(e: FocusEvent<HTMLInputElement>) => {\n              setDraft(null);\n              onBlur?.(e);\n            }}\n            inputClassName={cn(\"tabular-nums\", inputClassName)}\n          />\n        </div>\n      </div>\n      {caption && (\n        <p id={captionId} className={CAPTION_CLASS}>\n          {hint}\n        </p>\n      )}\n      {showError && (\n        <p id={errorId} className={ERROR_CLASS}>\n          {error}\n        </p>\n      )}\n    </div>\n  );\n});\nPhoneInput.displayName = \"PhoneInput\";\n"],"mappings":"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","names":["PhoneInput"]}
+{"version":3,"sources":["../../src/components/phone-input.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ChangeEvent, FocusEvent } from \"react\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport {\n  PHONE_COUNTRIES,\n  PHONE_DIAL_CODES,\n  formatNationalPhone,\n  formatPhone,\n  isE164,\n  parsePhone,\n} from \"../lib/phone\";\nimport type { ParsedPhone, PhoneCountry, PhoneCountryCode } from \"../lib/phone\";\nimport { useFieldMessages } from \"./field-parts\";\nimport { Input, type InputProps } from \"./input\";\nimport { Select } from \"./select\";\nimport { DEFAULT_PHONE_INPUT_LABELS } from \"./phone-input-labels\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The words {@link PhoneInput} renders on its own behalf. */\nexport interface PhoneInputLabels {\n  /** The country-code select's accessible name. */\n  countryCode: string;\n  /** The select's last option: a number from a country not listed, typed with its\n   *  own \"+\". */\n  other: string;\n}\n\n// Defined in ./phone-input-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PHONE_INPUT_LABELS };\n\n/**\n * The `phoneInput` namespace: prop > `<UiKitProvider labels>` > English (0.22.0).\n */\nfunction usePhoneInputLabels(prop: Partial<PhoneInputLabels> | undefined): PhoneInputLabels {\n  const labels: PhoneInputLabels = useKitLabels(\"phoneInput\", DEFAULT_PHONE_INPUT_LABELS, prop);\n  return labels;\n}\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\n/** A stored value read back: an E.164 number these rules can read, else `null`. */\nfunction storedNumber(value: string): ParsedPhone | null {\n  return isE164(value) ? parsePhone(value, \"other\") : null;\n}\n\n/** The select's country for a stored E.164 value, or `null` for free text. */\nfunction countryOf(value: string): PhoneCountry | null {\n  const parsed = storedNumber(value);\n  return parsed ? (parsed.country ?? \"other\") : null;\n}\n\n/** What the field emits for typed text: E.164 when it reads, the text unchanged when\n *  it does not. */\nfunction emitFor(raw: string, country: PhoneCountry): string {\n  return parsePhone(raw, country)?.e164 ?? raw;\n}\n\n/**\n * The text a stored value shows, outside of typing. Under its own country: the national\n * number grouped (\"21 000 00 01\" beside \"CH +41\"). Under another (a \"+33\" number while\n * the select says \"Other\"): the whole international number. Free text: as it is.\n */\nfunction displayOf(value: string, country: PhoneCountry): string {\n  const parsed = storedNumber(value);\n  if (!parsed) return value;\n  if (parsed.country !== null && parsed.country === country) {\n    return formatNationalPhone(parsed.national, parsed.country);\n  }\n  return formatPhone(parsed.e164);\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport interface PhoneInputProps extends Omit<InputProps, \"type\" | \"value\" | \"defaultValue\"> {\n  /** The number: E.164 (\"+41210000001\") for one the field could read, or free text —\n   *  a value saved before the field existed is shown exactly as it is. `\"\"` is no\n   *  number. */\n  value: string;\n  /** On every change: E.164 when the typed text reads as a number of the selected\n   *  country (or carries its own \"+\"), otherwise the typed text UNCHANGED. Nothing is\n   *  refused — see {@link PhoneInput}. Plain `onChange` still fires with the raw event;\n   *  bind this one to a form. */\n  onValueChange?: (value: string) => void;\n  /** The country a number typed without \"+\" belongs to, until the value says\n   *  otherwise. Default `\"CH\"`. */\n  defaultCountry?: PhoneCountry;\n  /** The countries the select offers, in order; \"Other\" always follows. Default\n   *  {@link PHONE_COUNTRIES} (CH, LI, DE, AT, FR, IT). A stored number from a country\n   *  left out still shows under its own code. */\n  countries?: readonly PhoneCountryCode[];\n  /** See {@link PhoneInputLabels}. */\n  labels?: LabelOverride<PhoneInputLabels>;\n  /** Classes for the whole field — the select, the input and the lines under them.\n   *  `inputClassName` reaches the `<input>`. */\n  className?: string;\n}\n\n/**\n * A phone number field (kastlan): a country-code select and the number, stored as\n * E.164 and shown grouped.\n *\n * kastlan's contacts kept whatever was typed — \"079 …\", \"+41 (0)79 …\", \"0041 79 …\" —\n * which nobody could dial from the app or match against the next import. This field\n * turns all of those into one stored form, \"+41210000001\", without taking anything\n * away from the person typing:\n *\n *  - **A country to type against.** The select (default CH, then LI, DE, AT, FR, IT\n *    and \"Other\") says which country a number without \"+\" belongs to; the national\n *    trunk 0 may be typed or left out. Typing a \"+\" or \"00\" overrides it, and the\n *    select follows the number (\"+49 …\" switches it to DE). Changing the select moves\n *    the national number to the new country code.\n *  - **E.164 when it reads, the text when it does not.** A number the rules read is\n *    emitted as E.164; anything else (\"ask reception\", an extension) is emitted exactly\n *    as typed. Never refused, never an error of its own: a contact's number is often\n *    known only roughly, and a field that will not save \"079 … (mornings)\" makes\n *    people type it into the notes instead. An app that needs a dialable number\n *    checks {@link isE164} on submit.\n *  - **Existing values untouched.** A free-text value from before is shown exactly as\n *    it is, and normalised only when someone edits it — the field never rewrites a\n *    record just by being opened.\n *  - **Grouped when settled.** While typing the field shows what was typed; on blur a\n *    number it read is regrouped by its country (\"21 000 00 01\").\n *\n * **The limitation** — there is no libphonenumber behind this (≈150 kB of metadata in\n * every bundle): the six countries have light rules (the trunk 0, a plausible length)\n * and every other country is any \"+\" with 8–15 digits. A well-formed number that does\n * not exist passes, and German and Austrian landlines, whose area codes vary in length,\n * are grouped only where the split is known (mobile prefixes, the largest cities) and\n * otherwise shown as one block. See `lib/phone.ts`.\n *\n * `label`, `hint`, `error` and `invalid` read as on {@link Input}: the label floats in\n * the number's box, and a text hint and the error go under the whole row, attached to\n * the number with `aria-describedby`. The select is named by `labels.countryCode`, and\n * the pair is a group named by a string `label`.\n */\nexport function PhoneInput({\n  ref,\n  value,\n  onValueChange,\n  onChange,\n  onBlur,\n  defaultCountry = \"CH\",\n  countries = PHONE_COUNTRIES,\n  labels,\n  className,\n  inputClassName,\n  label,\n  hint,\n  error,\n  invalid,\n  disabled,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: PhoneInputProps) {\n  const text = usePhoneInputLabels(labels);\n  const [country, setCountry] = useState<PhoneCountry>(() => countryOf(value) ?? defaultCountry);\n  // What was typed, shown for as long as it still reads as the value (AmountInput's\n  // draft): the person's own spacing stays under their fingers, and is regrouped on\n  // blur.\n  const [draft, setDraft] = useState<string | null>(null);\n  // The last value this field emitted, to tell its own echo from a value set outside.\n  const [emitted, setEmitted] = useState<string | null>(null);\n  const [seen, setSeen] = useState(value);\n  if (seen !== value) {\n    setSeen(value);\n    if (value !== emitted) {\n      // Set from outside (a reset, another record): its own country, none of our text.\n      const own = countryOf(value);\n      if (own) setCountry(own);\n      setDraft(null);\n    }\n  }\n\n  const emit = (next: string) => {\n    setEmitted(next);\n    onValueChange?.(next);\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(e);\n    const raw = e.target.value;\n    setDraft(raw);\n    const parsed = parsePhone(raw, country);\n    // A number typed with its own \"+\" takes the select with it.\n    if (parsed && parsed.country !== country) setCountry(parsed.country ?? \"other\");\n    emit(parsed?.e164 ?? raw);\n  };\n\n  const handleCountry = (next: PhoneCountry) => {\n    setCountry(next);\n    const stored = storedNumber(value);\n    if (stored) {\n      // \"Other\", the same country, or a generic number with its own \"+\": the number\n      // stays, only the way it is shown changes.\n      if (next === \"other\" || stored.country === null || stored.country === next) {\n        setDraft(null);\n        return;\n      }\n      // A different listed country: the national number moves to its code. If it does\n      // not read there, the digits are kept as text for the person to finish.\n      emit(parsePhone(stored.national, next)?.e164 ?? stored.national);\n      setDraft(null);\n      return;\n    }\n    // Free text (or a draft): read it again under the new country.\n    const source = draft ?? value;\n    const parsed = source.trim() === \"\" ? null : parsePhone(source, next);\n    if (parsed && parsed.e164 !== value) {\n      setDraft(source);\n      emit(parsed.e164);\n    }\n  };\n\n  const display = draft !== null && emitFor(draft, country) === value ? draft : displayOf(value, country);\n\n  // The select offers the configured countries, plus the stored number's own if it\n  // is not among them — a select cannot show a value it has no option for.\n  const options: PhoneCountryCode[] = [...countries];\n  if (country !== \"other\" && !options.includes(country)) options.push(country);\n\n  // A FieldHint \"?\" rides the number's label line; text — and a FieldHint at Large and\n  // on touch (§4) — goes under the whole row with the error. Through useFieldMessages\n  // since 0.34, not a copy of its rule (DUP-2, DUP-8).\n  const messages = useFieldMessages({\n    hint,\n    error,\n    invalid,\n    describedBy: ariaDescribedBy,\n    ariaInvalid: rest[\"aria-invalid\"],\n  });\n  const named = typeof label === \"string\" && label !== \"\";\n\n  return (\n    <div\n      className={className}\n      role={named ? \"group\" : undefined}\n      aria-label={named ? label : undefined}\n    >\n      {/* On a phone at Large the number takes a line of its own under the country (0.32.1,\n          the 360 px Extra-large sweep; docs/text-size-harmonization.md §4 \"nothing\n          truncates\"): the 7rem select is 168 px at 150 %, and on a 360 px phone it left\n          the number 82 px — \"Ph…\" over \"021 (\". `large:max-sm:`, the scaled phone width,\n          so a wider screen at Large and Normal keep the one row. */}\n      <div className=\"flex items-stretch gap-2 large:max-sm:flex-wrap\">\n        <Select\n          aria-label={text.countryCode}\n          value={country}\n          disabled={disabled}\n          onChange={(e) => handleCountry(e.target.value as PhoneCountry)}\n          className=\"w-28 shrink-0\"\n          // Stretched to the number's height: a labelled field is taller than an\n          // unlabelled select, and the pair should read as one row.\n          selectClassName=\"h-full tabular-nums\"\n        >\n          {options.map((code) => (\n            <option key={code} value={code}>\n              {`${code} +${PHONE_DIAL_CODES[code]}`}\n            </option>\n          ))}\n          <option value=\"other\">{text.other}</option>\n        </Select>\n        {/* Its own flex item, so nothing Input wraps itself in can take the sizing. */}\n        <div className=\"min-w-0 flex-1 large:max-sm:basis-full\">\n          <Input\n            ref={ref}\n            {...rest}\n            type=\"tel\"\n            autoComplete={rest.autoComplete ?? \"tel\"}\n            label={label}\n            hint={messages.labelHint}\n            invalid={messages.isInvalid}\n            aria-describedby={messages.describedBy}\n            disabled={disabled}\n            value={display}\n            onChange={handleChange}\n            onBlur={(e: FocusEvent<HTMLInputElement>) => {\n              setDraft(null);\n              onBlur?.(e);\n            }}\n            inputClassName={cn(\"tabular-nums\", inputClassName)}\n          />\n        </div>\n      </div>\n      {messages.below}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/picker-sheet.d.ts

@@ -1,13 +1,11 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, RefObject } from 'react';
-
+import type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref, RefObject } from "react";
 /**
  * Two of the div's own attributes are omitted because this component already owns
  * the name: `title` here is the sheet's HEADING (and a ReactNode), not the browser's
  * tooltip string, and `onClose` is "the sheet was dismissed", not the DOM's
  * `<dialog>` close event. Everything else a caller can pass reaches the sheet.
  */
-interface PickerSheetProps extends Omit<ComponentPropsWithoutRef<"div">, "title" | "onClose"> {
+export interface PickerSheetProps extends Omit<ComponentPropsWithoutRef<"div">, "title" | "onClose"> {
     open: boolean;
     onClose: () => void;
     /** The field's own label — a sheet that fills the screen has to say what it is
@@ -16,10 +14,26 @@ interface PickerSheetProps extends Omit<ComponentPropsWithoutRef<"div">, "title"
     query: string;
     onQueryChange: (value: string) => void;
     searchPlaceholder?: string;
+    /** The search box's accessible name. Default: `searchPlaceholder` — a placeholder is
+     *  gone the moment a character is typed, and is no name to many readers at all. */
+    searchLabel?: string;
     inputRef?: RefObject<HTMLInputElement | null>;
     /** Default: `pickerSheet.close` from the {@link UiKitProvider}, else "Close". */
     closeLabel?: string;
+    /**
+     * The list's keyboard, on the search box — where focus is while the sheet is up:
+     * Up/Down/Home/End/Enter (round 0.34 Wave 2, BUG-5). `ComboboxPanel` passes its own;
+     * without it arrows and Enter in the sheet did nothing at all.
+     */
+    onSearchKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    /** The `role="listbox"` the search box filters, for its `aria-controls`. */
+    listboxId?: string;
+    /** The option the arrow keys are on, for the search box's `aria-activedescendant`. */
+    activeId?: string;
     children: ReactNode;
+    /** The sheet, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —
+     *  merged with the sheet's own ref, which its focus trap holds. */
+    ref?: Ref<HTMLDivElement>;
 }
 /**
  * The PHONE presentation of a picker: a full-screen dialog with a search box at
@@ -44,9 +58,7 @@ interface PickerSheetProps extends Omit<ComponentPropsWithoutRef<"div">, "title"
  * scrolls, the header does not, and the body behind it is scroll-locked so a drag
  * that overshoots the list does not move the page underneath.
  */
-declare function PickerSheet({ open, onClose, title, query, onQueryChange, searchPlaceholder, inputRef, closeLabel, children, "aria-label": ariaLabel, className, style, ...rest }: PickerSheetProps): react.ReactPortal | null;
+export declare function PickerSheet({ open, onClose, title, query, onQueryChange, searchPlaceholder, searchLabel, inputRef, closeLabel, onSearchKeyDown, listboxId, activeId, children, "aria-label": ariaLabel, className, style, ref, ...rest }: PickerSheetProps): import("react").ReactPortal | null;
 /** A row inside a {@link PickerSheet} — the phone-sized version of a dropdown row,
  *  so a list is comfortable to hit with a thumb rather than merely legible. */
-declare const SHEET_ROW_CLASS: string;
-
-export { PickerSheet, type PickerSheetProps, SHEET_ROW_CLASS };
+export declare const SHEET_ROW_CLASS: string;