@eifi1/ui-kit 0.54.0 → 0.55.0

package/src/components/page-header.tsx

@@ -1,298 +0,0 @@
-import { useLayoutEffect, useRef, useState } from "react";
-import type { ComponentPropsWithRef, ElementType, ReactNode } from "react";
-import { cn } from "../lib/cn";
-import { SECTION_LABEL_CLASS } from "./text";
-import { useDocumentTitle } from "../hooks/use-document-title";
-import { PageHeaderTrailContext } from "./page-header-context";
-
-/**
- * `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a
- * phone; `sm` is lenkbank's `text-lg` title on a dense tool page (projects-page.tsx).
- *
- * `compact` (0.13) is keksdose's page title (keksdose F4): `text-xl font-semibold` at
- * EVERY width — budgets, rules, accounts, transactions and budget pages all write
- * exactly that `<h1>` by hand. It is `md`'s phone size without `md`'s step up to
- * `text-2xl` on a wider screen, and without its `tracking-tight`, which keksdose's
- * titles never had. A word and not a letter for the reason `ProgressBar`'s `slim` is
- * one: the letters are taken in order, and there is none between `sm` and `md` — an
- * `lg` or `xl` at `text-xl` would read as LARGER than `md`, which from `sm` up it is
- * not.
- */
-export type PageHeaderSize = "sm" | "compact" | "md";
-
-const TITLE: Record<PageHeaderSize, string> = {
-  sm: "text-lg font-semibold",
-  compact: "text-xl font-semibold",
-  md: "text-xl font-semibold tracking-tight sm:text-2xl",
-};
-
-/**
- * How the title block and the actions sit below the `sm` breakpoint. From `sm` up both
- * layouts are one row: title block at the start, actions at the end.
- */
-export type PageHeaderMobileLayout = "stacked" | "inline";
-
-/**
- * `stacked` at Large and Extra large on a phone (0.32.2, kastlan's 0.32.1 report;
- * docs/text-size-harmonization.md §4, as FormActions does): the actions take the full
- * width, one under the other. Side by side in 240 px of layout, two buttons each wrapped
- * their label onto three lines. `large:max-sm:`, the scaled phone width, so Normal and
- * every wider screen keep their row; `inline` is for actions known to fit, and stays.
- */
-const STACK_ACTIONS_AT_LARGE = "large:max-sm:flex-col large:max-sm:items-stretch large:max-sm:[&>*]:w-full";
-
-const ROW: Record<PageHeaderMobileLayout, string> = {
-  stacked: "flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4",
-  inline: "flex-row items-center justify-between gap-2 sm:gap-4",
-};
-
-/**
- * Where the actions sit on the title block's height, in the one row the header is from
- * `sm` up (and on a phone too when {@link PageHeaderMobileLayout} is `inline`, the only
- * layout that has a row there). Unset keeps each layout's own: `start` for `stacked`,
- * `center` for `inline`.
- */
-export type PageHeaderActionsAlign = "start" | "center" | "end";
-
-/** Applied to the ROW, so the title block and the actions are aligned against each
- *  other on one cross axis. 0.14.0 put `self-*` on the actions box alone, which moved
- *  nothing when the actions were the taller item — they already filled the row, and
- *  the title stayed at the top (keksdose H2, reports-page's two-line labelled
- *  CurrencySelect). Per layout, because `stacked` is a column on a phone, where
- *  `items-center` would centre everything HORIZONTALLY — so it aligns from `sm` up. */
-const ROW_ALIGN: Record<PageHeaderMobileLayout, Record<PageHeaderActionsAlign, string>> = {
-  stacked: { start: "sm:items-start", center: "sm:items-center", end: "sm:items-end" },
-  inline: { start: "items-start", center: "items-center", end: "items-end" },
-};
-
-export interface PageHeaderProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
-  title: ReactNode;
-  /** A sentence under the title. */
-  description?: ReactNode;
-  /** Buttons for the page — "New", "Export". At the title's end from `sm` up; under it,
-   *  wrapping, on a phone — unless {@link mobileLayout} is `inline`. */
-  actions?: ReactNode;
-  /** A `Breadcrumbs` trail, drawn above everything else. Inside a header with a title
-   *  it hides its current entry (the title names it) and is drawn only when an entry
-   *  other than home is left — `Breadcrumbs.hideCurrent` (0.49 KIT-9). */
-  breadcrumbs?: ReactNode;
-  /**
-   * The window's title (`document.title`) while the header is mounted (0.49 KIT-9),
-   * through `useDocumentTitle` and the provider's format ("{page} · {section} · {app}",
-   * `appName` as the app). A string is the page; an array is `[page, section]` (or
-   * `[page, section, app]`); `false` leaves the window's title alone.
-   *
-   * Default: the `title` when it is a string, and only for the page's own header
-   * (`as="h1"`) — a tab's `h2` header does not rename the window.
-   */
-  documentTitle?: string | ReadonlyArray<string | null | undefined> | false;
-  /** A small uppercase line above the title — the section or the kind of record
-   *  ("Building", "Settings"). The section-label type. */
-  eyebrow?: ReactNode;
-  /** The title's element. Default `h1`: a page has one, and this is it. `h2` for a
-   *  header inside a page that already has its `h1` (a tab's own header). */
-  as?: "h1" | "h2" | "h3";
-  size?: PageHeaderSize;
-  /**
-   * `stacked` (default): on a phone the actions drop under the title and wrap, so a
-   * row of three buttons never pushes the title off the screen.
-   *
-   * `inline`: the actions stay beside the title on a phone too, vertically centred on
-   * it — keksdose's headers (transactions-page.tsx:515, `flex items-center
-   * justify-between gap-2`), which carry one or two icon-sized controls and were tuned
-   * for the phone in live #263. Adopting `PageHeader` must not undo that tuning, so the
-   * row stays a row (keksdose F4). The actions do NOT wrap or shrink here: `inline` is
-   * for a header whose actions are known to fit beside a phone-width title (an icon
-   * button, a month picker); a long title wraps to make room for them instead.
-   */
-  mobileLayout?: PageHeaderMobileLayout;
-  /**
-   * A second group of actions that gets its OWN full-width row under the header on a
-   * phone, and joins the actions' row from `sm` up, between the title and
-   * {@link actions}.
-   *
-   * keksdose's budget page (budget-page.tsx, feedback #60) is the case: title and month
-   * navigation on row 1, the fold/unfold toggles on row 2 on a phone — "two tidy rows
-   * instead of the old ragged justify-between overflow" — and one row, title | toggles |
-   * month nav, on a wider screen. It builds that by hand with a wrapping flex row and
-   * swapped order utilities; adopting `PageHeader` (keksdose G6b) must not lose it.
-   * There: `actions` is the month navigation, this is the toggles.
-   *
-   * The DOM order is title, `actions`, `secondaryActions` — the phone's visual order,
-   * and the one a screen reader and the Tab key follow at every width. From `sm` up the
-   * two groups swap places visually only, which keeps the page's primary control (the
-   * month) at the row's end, where keksdose had it, and first in reading order. The
-   * breakpoint is `sm`, the one {@link mobileLayout} switches at, not keksdose's `md`:
-   * one header, one breakpoint.
-   */
-  secondaryActions?: ReactNode;
-  /**
-   * The actions' vertical alignment against the title block — see
-   * {@link PageHeaderActionsAlign}. Unset keeps the layout's own.
-   *
-   * keksdose's reports page (reports-page.tsx, keksdose G8) carries a LABELLED
-   * `CurrencySelect` as its action: a field with its label on top is taller than the
-   * title, and `stacked`'s default top alignment hangs it from the title's cap height
-   * with its control well below the title's line. `center` sets it on the title's
-   * middle, as that page's hand-written `items-center` row did. It aligns the whole row
-   * (title block and actions against each other), since 0.14.1: 0.14.0 moved only the
-   * actions box, which did nothing when the actions were the taller item (keksdose H2).
-   */
-  actionsAlign?: PageHeaderActionsAlign;
-  /**
-   * One line, cut with an ellipsis, instead of the default breaking of a long word onto
-   * as many lines as it needs.
-   *
-   * keksdose's payees page (payees-page.tsx, live #263, keksdose G6a) wraps its title in
-   * its own truncating span so a long name gives way to the `inline` header's actions
-   * instead of pushing them. This is that span's behaviour on the heading itself; the
-   * title block is already allowed to shrink below its content, which is what lets the
-   * cut happen inside a flex row.
-   *
-   * The full title stays in the DOM as the heading's text, so a screen reader and the
-   * document outline read all of it. There is deliberately no native `title` tooltip:
-   * the kit does not use them (not on touch, not on keyboard focus, not styled).
-   *
-   * At Normal only: from Large up the title wraps (`truncate-until-large`, text size
-   * §10.17; round 0.34 T1), as nothing is cut at Large — the actions then share the row
-   * with a taller title block.
-   */
-  truncateTitle?: boolean;
-}
-
-const TITLED = { titled: true };
-const UNTITLED = { titled: false };
-
-/**
- * A page's head: optional breadcrumbs, an eyebrow, the title, a description, and the
- * page's actions.
- *
- * kastlan's (shared/components/display/page-header.tsx) is the model — title and
- * description on one side, actions on the other, stacked on a phone — and this adds
- * what its pages kept writing around it: a trail above, an eyebrow, a `ReactNode`
- * title (a status chip beside the name), and actions that WRAP when there are more
- * than fit a phone's width, instead of running off it. No outer margin: the page's
- * own rhythm (`space-y-*`, a grid gap) places it.
- */
-export function PageHeader({
-  title,
-  description,
-  actions,
-  breadcrumbs,
-  eyebrow,
-  as = "h1",
-  size = "md",
-  mobileLayout = "stacked",
-  secondaryActions,
-  actionsAlign,
-  truncateTitle = false,
-  documentTitle,
-  className,
-  ...rest
-}: PageHeaderProps) {
-  const Heading = as as ElementType;
-  useDocumentTitle(
-    documentTitle === false
-      ? []
-      : documentTitle === undefined
-        ? as === "h1" && typeof title === "string"
-          ? [title]
-          : []
-        : typeof documentTitle === "string"
-          ? [documentTitle]
-          : documentTitle,
-  );
-  const titled = title != null && title !== false && title !== "";
-  const hasSecondary = secondaryActions != null;
-  const wrapsSecondary = hasSecondary && mobileLayout === "inline";
-  const align = actionsAlign != null ? ROW_ALIGN[mobileLayout][actionsAlign] : undefined;
-  // keksdose H1: in `inline` the title block could shrink below its longest word, and
-  // `break-words` then split "Monatsbudget" into "Monatsbudg" / "et" beside the actions.
-  // Unless it truncates, the title keeps its longest word (min-content) and the ROW
-  // wraps instead: actions that do not fit go to a line of their own, as the app's old
-  // `flex-wrap` header did.
-  const keepsWords = mobileLayout === "inline" && !truncateTitle;
-  // keksdose, after H1: once the actions have wrapped below the title, the phone's
-  // header was THREE rows — title / actions / secondary — where the app's old header
-  // shared the second row between the month nav and the toggles (~48px of phone
-  // height). So the secondary group's full-width basis (G6b: a row of its own) is
-  // dropped exactly when the actions already sit below the title; then it joins their
-  // row if it fits, and wraps under them if not. While the actions share the title's
-  // row, nothing changes: the secondary group never climbs onto the title's row.
-  //
-  // CSS cannot see "the previous item wrapped", so it is measured — by a
-  // ResizeObserver, whose first callback runs on `observe`. It is stable: the
-  // secondary group comes after the actions, so its basis cannot move them. No
-  // ResizeObserver (jsdom) or no layout keeps the basis, the 0.14.0 layout.
-  const measuresWrap = keepsWords && hasSecondary && actions != null;
-  const titleRef = useRef<HTMLDivElement>(null);
-  const actionsRef = useRef<HTMLDivElement>(null);
-  const [actionsWrapped, setActionsWrapped] = useState(false);
-  useLayoutEffect(() => {
-    const titleBox = titleRef.current;
-    const actionsBox = actionsRef.current;
-    if (!measuresWrap || !titleBox || !actionsBox || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(() => {
-      const t = titleBox.getBoundingClientRect();
-      const a = actionsBox.getBoundingClientRect();
-      // Unmeasured (display: none, no layout): keep the full-width basis.
-      setActionsWrapped(t.height > 0 && a.height > 0 && a.top >= t.bottom - 1);
-    });
-    observer.observe(titleBox);
-    observer.observe(actionsBox);
-    if (titleBox.parentElement) observer.observe(titleBox.parentElement);
-    return () => observer.disconnect();
-  }, [measuresWrap]);
-  return (
-    <div {...rest} className={cn("flex min-w-0 flex-col gap-2", className)}>
-      {breadcrumbs != null && (
-        <PageHeaderTrailContext.Provider value={titled ? TITLED : UNTITLED}>
-          {breadcrumbs}
-        </PageHeaderTrailContext.Provider>
-      )}
-      {/* With a second group, `inline` wraps so that group's full-width basis puts it
-          on a row of its own on a phone (`stacked` is a column there already, and a
-          basis would size a column item's HEIGHT); from `sm` up the row stops wrapping
-          and the order utilities seat it between the title and the actions. Without
-          one, nothing changes. */}
-      <div
-        className={cn(
-          "flex min-w-0",
-          ROW[mobileLayout],
-          keepsWords ? "flex-wrap" : wrapsSecondary && "flex-wrap sm:flex-nowrap",
-          align,
-        )}
-      >
-        <div ref={titleRef} className={cn("flex-1", keepsWords ? "min-w-min" : "min-w-0")}>
-          {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, "mb-1")}>{eyebrow}</p>}
-          <Heading className={cn(truncateTitle ? "truncate-until-large" : "break-words", "text-primary", TITLE[size])}>
-            {title}
-          </Heading>
-          {description != null && <p className="mt-1 text-sm text-muted">{description}</p>}
-        </div>
-        {actions != null && (
-          <div
-            ref={actionsRef}
-            className={cn(
-              "flex shrink-0 flex-wrap items-center gap-2",
-              hasSecondary && "sm:order-2",
-              mobileLayout === "stacked" && STACK_ACTIONS_AT_LARGE,
-            )}
-          >
-            {actions}
-          </div>
-        )}
-        {hasSecondary && (
-          <div
-            className={cn(
-              "flex flex-wrap items-center gap-2 sm:order-1 sm:shrink-0",
-              wrapsSecondary && (measuresWrap && actionsWrapped ? "sm:basis-auto" : "basis-full sm:basis-auto"),
-            )}
-          >
-            {secondaryActions}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/password-strength-labels.ts

@@ -1,22 +0,0 @@
-// The English words of ./password-strength, in a module with no component code: the English
-// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
-// chunk like the other languages (0.34, KS U8). ./password-strength re-exports them.
-
-import type { PasswordStrengthLabels } from "./password-strength";
-
-export const DEFAULT_PASSWORD_STRENGTH_LABELS: PasswordStrengthLabels = {
-  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).`,
-};

package/src/components/password-strength.tsx

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

package/src/components/phone-input-labels.ts

@@ -1,10 +0,0 @@
-// The English words of ./phone-input, in a module with no component code: the English
-// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
-// chunk like the other languages (0.34, KS U8). ./phone-input re-exports them.
-
-import type { PhoneInputLabels } from "./phone-input";
-
-export const DEFAULT_PHONE_INPUT_LABELS: PhoneInputLabels = {
-  countryCode: "Country code",
-  other: "Other",
-};