@evinvest/uikit 0.31.0 → 0.33.0

package/styles/tokens.css

@@ -23,17 +23,21 @@
  *              accent-trace · accent-debug · accent-info · accent-warn · accent-error
  *              primary-ink — the primary role as ink on a surface, where the
  *              fill and the readable value are different colours;
- *              primary-hover · primary-border — the solid button's states
+ *              primary-hover · accent-*-hover — a solid fill's hover, derived;
+ *              primary-border — the primary button's edge;
+ *              on-secondary — the ink, derived
  *              positive-ink · accent-info-ink — a quiet status role as text on
  *              a surface; derived from the role and the ink, a palette may pin
  *              them. warn and error are text in their own colour
- *   FACES      button-primary-* · button-danger-* ({bg,hover,border,ink}) and
- *              chip-{neutral,primary,positive,info,warn,error}-{bg,border}:
- *              what a Button or Badge paints, pinned per theme by EV and
+ *   FACES      button-danger-* ({bg,hover,border,ink}) and
+ *              tint-{neutral,primary,positive,info,warn,error,trace,debug}-{fill,edge}:
+ *              what a Button or a toned chip, toast or banner paints, pinned per theme by EV and
  *              derived for a brand. Not part of what a brand file owes.
  *   TYPE       text-caption · body-s · body · body-l · h3 · h2 · h1 ·
- *              figure-m · figure-l (size and line height); fonts
- *   SCALARS    radius · control-radius · chip-radius · control-* · display-scale ·
+ *              figure-m · figure-l (size and line height), derived from
+ *              body-{size,step,leading} and display-{base,step,leading} ·
+ *              figure-leading · display-scale; fonts
+ *   SCALARS    radius · control-radius · chip-radius · control-* · disabled-opacity · body-* · display-* · figure-leading ·
  *              page-* · shell-* · depth-* (behind shadow-card/elevated/overlay)
  *   MOTION     ev-ease-* · ev-dur-* · ev-rise · ev-stagger(-section)
  *   CHARTS     chart-1 … chart-6
@@ -720,6 +724,11 @@
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
   --radius-2xl: calc(var(--radius) + 8px);
+  /* the roles the kit's tables name; the steps above are the consumer's */
+  --radius-control: var(--control-radius);
+  --radius-panel: var(--radius);
+  --radius-chip: var(--chip-radius);
+  --radius-row: calc(var(--radius) - 4px); /* concentric inside a panel's p-1 */
 
   /* The names stay, the values are per theme: u2 is flat (`--depth-*` is a
    * zero shadow), Oldschool brings the ladder back in ev.css. */
@@ -727,25 +736,25 @@
   --shadow-elevated: var(--depth-elevated);
   --shadow-overlay: var(--depth-overlay);
 
-  /* Type scale: size / line-height in pairs, the Figma text styles. */
-  --text-caption: 0.6875rem;
-  --text-caption--line-height: 0.875rem;
-  --text-body-s: 0.75rem;
-  --text-body-s--line-height: 1rem;
-  --text-body: 0.8125rem;
-  --text-body--line-height: 1.125rem;
-  --text-body-l: 0.875rem;
-  --text-body-l--line-height: 1.25rem;
-  --text-h3: 0.875rem;
-  --text-h3--line-height: 1.25rem;
-  --text-h2: 1.5rem;
-  --text-h2--line-height: 1.875rem;
-  --text-h1: 2rem;
-  --text-h1--line-height: 2.375rem;
-  --text-figure-m: 1.25rem;
-  --text-figure-m--line-height: 1.5rem;
-  --text-figure-l: 1.75rem;
-  --text-figure-l--line-height: 2rem;
+  /* Type scale: two even-step ramps off the geometry rule's inputs (docs/spec/roles.md). */
+  --text-caption: calc(var(--body-size) - 2 * var(--body-step));
+  --text-caption--line-height: calc(var(--body-leading) - 4 * var(--body-step));
+  --text-body-s: calc(var(--body-size) - var(--body-step));
+  --text-body-s--line-height: calc(var(--body-leading) - 2 * var(--body-step));
+  --text-body: var(--body-size);
+  --text-body--line-height: var(--body-leading);
+  --text-body-l: calc(var(--body-size) + var(--body-step));
+  --text-body-l--line-height: calc(var(--body-leading) + 2 * var(--body-step));
+  --text-h3: calc(var(--body-size) + var(--body-step));
+  --text-h3--line-height: calc(var(--body-leading) + 2 * var(--body-step));
+  --text-h2: calc((var(--display-base) + 2 * var(--display-step)) * var(--display-scale));
+  --text-h2--line-height: calc((var(--display-base) + 2 * var(--display-step) + var(--display-leading)) * var(--display-scale));
+  --text-h1: calc((var(--display-base) + 4 * var(--display-step)) * var(--display-scale));
+  --text-h1--line-height: calc((var(--display-base) + 4 * var(--display-step) + var(--display-leading)) * var(--display-scale));
+  --text-figure-m: calc((var(--display-base) + var(--display-step)) * var(--display-scale));
+  --text-figure-m--line-height: calc((var(--display-base) + var(--display-step) + var(--figure-leading)) * var(--display-scale));
+  --text-figure-l: calc((var(--display-base) + 3 * var(--display-step)) * var(--display-scale));
+  --text-figure-l--line-height: calc((var(--display-base) + 3 * var(--display-step) + var(--figure-leading)) * var(--display-scale));
 
   /* The families are parameters, apart from the colour contract: a brand scope
    * sets `--brand-font-sans`, `--brand-font-serif` and `--brand-font-mono`
@@ -804,38 +813,51 @@
   --color-positive-ink: var(--positive-ink);
   --color-accent-trace: var(--accent-trace);
   --color-on-accent-trace: var(--on-accent-trace);
+  --color-accent-trace-hover: var(--accent-trace-hover);
   --color-accent-debug: var(--accent-debug);
   --color-on-accent-debug: var(--on-accent-debug);
+  --color-accent-debug-hover: var(--accent-debug-hover);
   --color-accent-info: var(--accent-info);
   --color-on-accent-info: var(--on-accent-info);
+  --color-accent-info-hover: var(--accent-info-hover);
   --color-accent-info-ink: var(--accent-info-ink);
   --color-accent-warn: var(--accent-warn);
   --color-on-accent-warn: var(--on-accent-warn);
+  --color-accent-warn-hover: var(--accent-warn-hover);
   --color-accent-error: var(--accent-error);
   --color-on-accent-error: var(--on-accent-error);
+  --color-accent-error-hover: var(--accent-error-hover);
 
-  /* component faces: derived below, pinned per theme by EV, so `bg-button-primary-bg`
-   * and `border-chip-error-border` are real utilities the class merge understands */
-  --color-button-primary-bg: var(--button-primary-bg);
-  --color-button-primary-hover: var(--button-primary-hover);
-  --color-button-primary-border: var(--button-primary-border);
-  --color-button-primary-ink: var(--button-primary-ink);
+  /* component faces: derived below, pinned per theme by EV, so `bg-button-danger-bg`
+   * and `border-tint-error-edge` are real utilities the class merge understands */
   --color-button-danger-bg: var(--button-danger-bg);
   --color-button-danger-hover: var(--button-danger-hover);
   --color-button-danger-border: var(--button-danger-border);
   --color-button-danger-ink: var(--button-danger-ink);
-  --color-chip-neutral-bg: var(--chip-neutral-bg);
-  --color-chip-neutral-border: var(--chip-neutral-border);
-  --color-chip-primary-bg: var(--chip-primary-bg);
-  --color-chip-primary-border: var(--chip-primary-border);
-  --color-chip-positive-bg: var(--chip-positive-bg);
-  --color-chip-positive-border: var(--chip-positive-border);
-  --color-chip-info-bg: var(--chip-info-bg);
-  --color-chip-info-border: var(--chip-info-border);
-  --color-chip-warn-bg: var(--chip-warn-bg);
-  --color-chip-warn-border: var(--chip-warn-border);
-  --color-chip-error-bg: var(--chip-error-bg);
-  --color-chip-error-border: var(--chip-error-border);
+  --color-tint-neutral-fill: var(--tint-neutral-fill);
+  --color-tint-neutral-edge: var(--tint-neutral-edge);
+  --color-tint-neutral-wash: var(--tint-neutral-wash);
+  --color-tint-primary-fill: var(--tint-primary-fill);
+  --color-tint-primary-edge: var(--tint-primary-edge);
+  --color-tint-primary-wash: var(--tint-primary-wash);
+  --color-tint-positive-fill: var(--tint-positive-fill);
+  --color-tint-positive-edge: var(--tint-positive-edge);
+  --color-tint-positive-wash: var(--tint-positive-wash);
+  --color-tint-info-fill: var(--tint-info-fill);
+  --color-tint-info-edge: var(--tint-info-edge);
+  --color-tint-info-wash: var(--tint-info-wash);
+  --color-tint-warn-fill: var(--tint-warn-fill);
+  --color-tint-warn-edge: var(--tint-warn-edge);
+  --color-tint-warn-wash: var(--tint-warn-wash);
+  --color-tint-error-fill: var(--tint-error-fill);
+  --color-tint-error-edge: var(--tint-error-edge);
+  --color-tint-error-wash: var(--tint-error-wash);
+  --color-tint-trace-fill: var(--tint-trace-fill);
+  --color-tint-trace-edge: var(--tint-trace-edge);
+  --color-tint-trace-wash: var(--tint-trace-wash);
+  --color-tint-debug-fill: var(--tint-debug-fill);
+  --color-tint-debug-edge: var(--tint-debug-edge);
+  --color-tint-debug-wash: var(--tint-debug-wash);
 
   /* charts — distinguishable hues carrying no significance */
   --color-chart-1: var(--chart-1);
@@ -875,7 +897,14 @@
    * side — ink over white needs ~47% to clear it, dark lands near 4:1. */
   --input: color-mix(in srgb, var(--ink) 48%, transparent);
   --ring: var(--primary-ink);
-  --primary-hover: color-mix(in srgb, var(--primary) 95%, black);
+  --on-secondary: var(--ink);
+  /* a solid fill's hover moves away from its label, so the label only gains contrast */
+  --primary-hover: color-mix(in srgb, rgb(from var(--on-primary) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--primary));
+  --accent-trace-hover: color-mix(in srgb, rgb(from var(--on-accent-trace) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--accent-trace));
+  --accent-debug-hover: color-mix(in srgb, rgb(from var(--on-accent-debug) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--accent-debug));
+  --accent-info-hover: color-mix(in srgb, rgb(from var(--on-accent-info) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--accent-info));
+  --accent-warn-hover: color-mix(in srgb, rgb(from var(--on-accent-warn) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--accent-warn));
+  --accent-error-hover: color-mix(in srgb, rgb(from var(--on-accent-error) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--accent-error));
   --primary-border: color-mix(in srgb, var(--primary-ink) 55%, transparent);
   /* the quiet status roles as text on a surface: a fill is a shape, and as text
    * it reads far below AA on a light plane. warn and error have none: they are
@@ -890,31 +919,40 @@
  * same scopes, listed in another order so the contract reader finds one rule
  * per selector. */
 :where([data-theme], [data-brand], .light, .dark, :root) {
-  /* primary is an outline button, danger the same in the error role */
-  --button-primary-bg: transparent;
-  --button-primary-hover: var(--hover);
-  --button-primary-border: color-mix(in srgb, var(--ink) 60%, transparent);
-  --button-primary-ink: var(--ink);
+  /* danger is an outline in the error role */
   --button-danger-bg: transparent;
-  --button-danger-hover: color-mix(in srgb, var(--accent-error) 10%, transparent);
+  --button-danger-hover: color-mix(in srgb, var(--accent-error) var(--tint-hover), transparent);
   --button-danger-border: var(--accent-error);
   --button-danger-ink: var(--accent-error);
 
-  /* chips (Badge, status pills). The source is the colour the label wears, so
-   * the edge and the label are one hue; --chip-fill and --chip-edge are in the
-   * geometry. */
-  --chip-neutral-bg: var(--hover);
-  --chip-neutral-border: var(--border);
-  --chip-primary-bg: color-mix(in srgb, var(--primary-ink) var(--chip-fill), transparent);
-  --chip-primary-border: color-mix(in srgb, var(--primary-ink) var(--chip-edge), transparent);
-  --chip-positive-bg: color-mix(in srgb, var(--positive-ink) var(--chip-fill), transparent);
-  --chip-positive-border: color-mix(in srgb, var(--positive-ink) var(--chip-edge), transparent);
-  --chip-info-bg: color-mix(in srgb, var(--accent-info-ink) var(--chip-fill), transparent);
-  --chip-info-border: color-mix(in srgb, var(--accent-info-ink) var(--chip-edge), transparent);
-  --chip-warn-bg: color-mix(in srgb, var(--accent-warn) var(--chip-fill), transparent);
-  --chip-warn-border: color-mix(in srgb, var(--accent-warn) var(--chip-edge), transparent);
-  --chip-error-bg: color-mix(in srgb, var(--accent-error) var(--chip-fill), transparent);
-  --chip-error-border: color-mix(in srgb, var(--accent-error) var(--chip-edge), transparent);
+  /* a tone worn as a tint: a chip's fill and edge are the tone's ink at
+   * --tint-fill and --tint-edge, so the edge and the label are one hue, and an
+   * area's wash is it at --tint-wash. warn and error are their own ink
+   * (docs/spec/accents.md). */
+  --tint-neutral-fill: var(--hover);
+  --tint-neutral-edge: var(--border);
+  --tint-neutral-wash: transparent;
+  --tint-primary-fill: color-mix(in srgb, var(--primary-ink) var(--tint-fill), transparent);
+  --tint-primary-edge: color-mix(in srgb, var(--primary-ink) var(--tint-edge), transparent);
+  --tint-primary-wash: color-mix(in srgb, var(--primary-ink) var(--tint-wash), transparent);
+  --tint-positive-fill: color-mix(in srgb, var(--positive-ink) var(--tint-fill), transparent);
+  --tint-positive-edge: color-mix(in srgb, var(--positive-ink) var(--tint-edge), transparent);
+  --tint-positive-wash: color-mix(in srgb, var(--positive-ink) var(--tint-wash), transparent);
+  --tint-info-fill: color-mix(in srgb, var(--accent-info-ink) var(--tint-fill), transparent);
+  --tint-info-edge: color-mix(in srgb, var(--accent-info-ink) var(--tint-edge), transparent);
+  --tint-info-wash: color-mix(in srgb, var(--accent-info-ink) var(--tint-wash), transparent);
+  --tint-warn-fill: color-mix(in srgb, var(--accent-warn) var(--tint-fill), transparent);
+  --tint-warn-edge: color-mix(in srgb, var(--accent-warn) var(--tint-edge), transparent);
+  --tint-warn-wash: color-mix(in srgb, var(--accent-warn) var(--tint-wash), transparent);
+  --tint-error-fill: color-mix(in srgb, var(--accent-error) var(--tint-fill), transparent);
+  --tint-error-edge: color-mix(in srgb, var(--accent-error) var(--tint-edge), transparent);
+  --tint-error-wash: color-mix(in srgb, var(--accent-error) var(--tint-wash), transparent);
+  --tint-trace-fill: color-mix(in srgb, var(--accent-trace) var(--tint-fill), transparent);
+  --tint-trace-edge: color-mix(in srgb, var(--accent-trace) var(--tint-edge), transparent);
+  --tint-trace-wash: color-mix(in srgb, var(--accent-trace) var(--tint-wash), transparent);
+  --tint-debug-fill: color-mix(in srgb, var(--accent-debug) var(--tint-fill), transparent);
+  --tint-debug-edge: color-mix(in srgb, var(--accent-debug) var(--tint-edge), transparent);
+  --tint-debug-wash: color-mix(in srgb, var(--accent-debug) var(--tint-wash), transparent);
 }
 
 /* Geometry. A `[data-brand]` scope is a theme root of its own, so it restarts
@@ -924,22 +962,37 @@
   --radius: 0.375rem; /* panels and menus */
   /* control geometry, so a consumer reshapes every button/input at once */
   --control-radius: 0.25rem;
+  --control-h: 2.25rem;
+  --control-step: 0.25rem;
+  --control-inset: 1rem; /* the md rung's side inset; every other rung's moves with its height */
   --chip-radius: 0.25rem;
-  /* how much of its ink a chip's fill and edge take, for a brand that pins
-   * nothing: an outline by default, a tint where a theme raises the fill */
-  --chip-fill: 0%;
-  --chip-edge: 50%;
+  --disabled-opacity: 0.5;
+  /* how much of its ink a tint's fill and edge take: an outline by default, a
+   * tinted pill where a theme raises the fill; and a tone's pointed-at row or face */
+  --tint-fill: 0%;
+  --tint-edge: 50%;
+  --tint-hover: 10%;
+  /* how much of its ink an area in a tone (a banner, an alert) is washed with:
+   * an area needs a body to read as content, where a chip reads as an outline.
+   * At 10 % Light's positive and warn labels fall under their floor. */
+  --tint-wash: 6%;
   /* u2 is flat: depth is surface steps and hairlines. Never `none` — inside
    * Tailwind's comma-separated box-shadow list it invalidates the whole
    * declaration, and the focus ring goes with it. */
   --depth-card: 0 0 #0000;
   --depth-elevated: 0 0 #0000;
   --depth-overlay: 0 0 #0000;
-  --control-py: 0.5rem;
-  /* the Xl (call-to-action) button reads all three */
+  /* the Xl (call-to-action) rung's inset and text */
   --control-px: 2rem;
   --control-text: 1rem;
-  /* multiplies the display type scale (uikit <Display>) */
+  /* the type ramps: text steps 1 px, display steps 4 px, a scale over the display tier */
+  --body-size: 0.8125rem;
+  --body-step: 0.0625rem;
+  --body-leading: 1.125rem;
+  --display-base: 1rem;
+  --display-step: 0.25rem;
+  --display-leading: 0.375rem; /* h1, h2 */
+  --figure-leading: 0.25rem; /* figure-m, figure-l */
   --display-scale: 1;
   /* the vertical rhythm of a full-bleed <Section>; `tight` is the sub-page one */
   --band-py: 2.25rem;
@@ -983,6 +1036,24 @@
    */
 }
 
+/* The control height and inset ramps a `Size` step names, re-derived on every
+ * scope that may set `--control-h`. Pin one step to bend the ramp. */
+:where(:root, [data-brand], [data-theme]) {
+  --control-h-2xs: calc(var(--control-h) - 3 * var(--control-step));
+  --control-h-xs: calc(var(--control-h) - 2 * var(--control-step));
+  --control-h-sm: calc(var(--control-h) - var(--control-step));
+  --control-h-md: var(--control-h);
+  --control-h-lg: calc(var(--control-h) + var(--control-step));
+  --control-h-xl: calc(var(--control-h) + 3 * var(--control-step));
+  --control-h-touch: max(var(--control-h-lg), 2.75rem); /* the 44 px pointer-target floor (WCAG 2.5.5) */
+  --control-inset-xs: calc(var(--control-h-xs) - var(--control-h) + var(--control-inset));
+  --control-inset-sm: calc(var(--control-h-sm) - var(--control-h) + var(--control-inset));
+  --control-inset-md: var(--control-inset);
+  --control-inset-lg: calc(var(--control-h-lg) - var(--control-h) + var(--control-inset));
+  --control-inset-xl: var(--control-px);
+  --control-inset-touch: calc(var(--control-h-touch) - var(--control-h) + var(--control-inset));
+}
+
 :root {
   /* shell offset — viewport space reserved by whatever shell hosts the app.
      Standalone apps get 0; a hosting shell overrides on :root. Size
@@ -1051,7 +1122,6 @@
   --background: #0d0d0f;
   --card: #151518;
   --secondary: #1c1c20;
-  --on-secondary: var(--ink);
   --popover: #252529;
   --muted: #070709;
   --hover: #e6e1d30f;
@@ -1075,13 +1145,11 @@
 
   /* brand and primary. A fill and an ink are different jobs (docs/spec/accents.md):
    * --primary carries white at 4.62:1 and reads as a shape on every plane (3.30:1
-   * on the popover); --primary-ink is the teal that reads as text (4.96:1 there).
-   * Figma's hover #18998b is 3.52:1 under white, so #127c71 (5.06:1) is pinned. */
+   * on the popover); --primary-ink is the teal that reads as text (4.96:1 there). */
   --brand: #0d1627;
   --primary: #138377;
   --on-primary: #ffffff;
   --primary-ink: #35a395;
-  --primary-hover: #127c71;
   --primary-border: #35a3958c;
 
   /* status. Fills carry the dark label (white fails 3:1–3.4:1 on these); the
@@ -1107,29 +1175,6 @@
   --chart-4: #e68aaf;
   --chart-5: #2e9e5c;
   --chart-6: #988eef;
-
-  --button-primary-bg: #e6e1d300;
-  --button-primary-hover: #e6e1d314;
-  --button-primary-border: #e6e1d399;
-  --button-primary-ink: #e6e1d3;
-  --button-danger-bg: #f05b5200;
-  --button-danger-hover: #f05b521a;
-  --button-danger-border: #f05b52;
-  --button-danger-ink: var(--accent-error);
-
-  /* chips are outlines: a transparent fill and the label's hue at 50 % */
-  --chip-neutral-bg: var(--hover);
-  --chip-neutral-border: var(--border);
-  --chip-primary-bg: #35a39500;
-  --chip-primary-border: #35a3958c;
-  --chip-positive-bg: #2e9e5c00;
-  --chip-positive-border: #4abf7680;
-  --chip-info-bg: #4990d800;
-  --chip-info-border: #6ca6e480;
-  --chip-warn-bg: #f5c84e00;
-  --chip-warn-border: #f5c84e80;
-  --chip-error-bg: #f05b5200;
-  --chip-error-border: #f05b5280;
 }
 
 /* ── u2 Light ────────────────────────────────────────────────── */
@@ -1139,7 +1184,6 @@
   --background: #efebdf;
   --card: #f6f3eb;
   --secondary: #fbfaf6;
-  --on-secondary: var(--ink);
   --popover: #ffffff;
   --muted: #e6e1d3;
   --hover: #0d0d0f0d;
@@ -1161,7 +1205,6 @@
   --primary: #138377;
   --on-primary: #ffffff;
   --primary-ink: #116f65;
-  --primary-hover: #116f65;
   --primary-border: #116f658c;
 
   /* Figma's positive #228a4e carries neither label at 4.5:1 (white 4.36, dark
@@ -1190,29 +1233,6 @@
   --chart-4: #b74679;
   --chart-5: #228a4e;
   --chart-6: #6d5acc;
-
-  --button-primary-bg: #0d0d0f00;
-  --button-primary-hover: #0d0d0f0f;
-  --button-primary-border: #0d0d0fa6;
-  --button-primary-ink: #080e1a;
-  --button-danger-bg: #db383400;
-  --button-danger-hover: #db383414;
-  --button-danger-border: #db3834;
-  --button-danger-ink: var(--accent-error);
-
-  /* the solid hue at 50 % (warning 60 %), where Dark uses the ink's */
-  --chip-neutral-bg: var(--hover);
-  --chip-neutral-border: var(--border);
-  --chip-primary-bg: #13837700;
-  --chip-primary-border: #116f658c;
-  --chip-positive-bg: #228a4e00;
-  --chip-positive-border: #228a4e80;
-  --chip-info-bg: #2d79c200;
-  --chip-info-border: #2d79c280;
-  --chip-warn-bg: #a77f1200;
-  --chip-warn-border: #a77f1299;
-  --chip-error-bg: #db383400;
-  --chip-error-border: #db383480;
 }
 
 /* ── Oldschool ───────────────────────────────────────────────── *
@@ -1232,7 +1252,6 @@
   --background: #070d18;
   --card: #16233c;
   --secondary: #0d1526;
-  --on-secondary: var(--ink);
   --popover: #1d2c49;
   --muted: #26375c;
   --hover: #e6e1d312;
@@ -1254,7 +1273,6 @@
   --primary: #138377;
   --on-primary: #ffffff;
   --primary-ink: #35a395;
-  --primary-hover: #127c71;
   --primary-border: #35a39500;
 
   --positive: #2e9e5c;
@@ -1279,31 +1297,21 @@
   --chart-5: #2e9e5c;
   --chart-6: #988eef;
 
-  /* filled buttons. The danger label stays dark: white on #f05b52 is 3.32:1. */
-  --button-primary-bg: #138377;
-  --button-primary-hover: #127c71;
-  --button-primary-border: #138377;
-  --button-primary-ink: #ffffff;
-  --button-danger-bg: #f05b52;
-  --button-danger-hover: #f06c61;
-  --button-danger-border: #f05b52;
-  --button-danger-ink: #070d18;
-
-  /* chips are tinted pills with no edge */
-  --chip-neutral-bg: var(--hover);
-  --chip-neutral-border: #e6e1d300;
+  /* danger is a fill */
+  --button-danger-bg: var(--accent-error);
+  --button-danger-hover: var(--accent-error-hover);
+  --button-danger-border: var(--accent-error);
+  --button-danger-ink: var(--on-accent-error);
+
+  /* tints are pills with no edge */
+  --tint-fill: 18%;
+  --tint-edge: 0%;
+  --tint-neutral-edge: transparent;
   /* Figma tints the accent chip 16 %, which leaves its teal label at 4.03:1 on
    * the card; 8 % holds 4.56:1 */
-  --chip-primary-bg: #35a39514;
-  --chip-primary-border: #35a39500;
-  --chip-positive-bg: #2e9e5c2e;
-  --chip-positive-border: #4abf7600;
-  --chip-info-bg: #4990d82e;
-  --chip-info-border: #6ca6e400;
-  --chip-warn-bg: #f5c84e29;
-  --chip-warn-border: #f5c84e00;
-  --chip-error-bg: #f05b522e;
-  --chip-error-border: #f06c6100;
+  --tint-primary-fill: color-mix(in srgb, var(--primary-ink) 8%, transparent);
+  /* at 18 % the info label reads 4.43:1 on its fill; 16 % clears 4.5:1 */
+  --tint-info-fill: color-mix(in srgb, var(--accent-info-ink) 16%, transparent);
 
   --radius: 0.5rem;
   --control-radius: 0.375rem;

package/dist/components/accordion.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport {\n  ACCORDION_CONTENT,\n  ACCORDION_CONTENT_INNER,\n  ACCORDION_HEADER,\n  ACCORDION_ITEM,\n  ACCORDION_TRIGGER,\n} from \"../generated/accordion\";\n\ntype AccordionType = \"single\" | \"multiple\";\n\ninterface AccordionContextValue {\n  isOpen: (value: string) => boolean;\n  toggle: (value: string) => void;\n}\n\nconst AccordionContext = React.createContext<AccordionContextValue | null>(null);\n\nfunction useAccordion(): AccordionContextValue {\n  const ctx = React.useContext(AccordionContext);\n  if (!ctx) throw new Error(\"Accordion parts must be used within <Accordion>\");\n  return ctx;\n}\n\nconst ItemContext = React.createContext<string | null>(null);\n\nfunction useItemValue(): string {\n  const value = React.useContext(ItemContext);\n  if (value === null)\n    throw new Error(\"AccordionTrigger/Content must be used within <AccordionItem>\");\n  return value;\n}\n\nexport interface AccordionProps\n  extends Omit<React.ComponentProps<\"div\">, \"onChange\"> {\n  type?: AccordionType;\n  collapsible?: boolean;\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n}\n\nexport function Accordion({\n  type = \"single\",\n  collapsible = false,\n  value,\n  defaultValue = [],\n  onValueChange,\n  children,\n  ...props\n}: AccordionProps) {\n  const [open, setOpen] = useControllableState<string[]>({\n    ...(value !== undefined ? { value } : {}),\n    defaultValue,\n    ...(onValueChange ? { onChange: onValueChange } : {}),\n  });\n\n  const isOpen = (v: string) => open.includes(v);\n  const toggle = (v: string) => {\n    if (type === \"multiple\") {\n      setOpen(open.includes(v) ? open.filter((x) => x !== v) : [...open, v]);\n      return;\n    }\n    if (open.includes(v)) setOpen(collapsible ? [] : open);\n    else setOpen([v]);\n  };\n\n  return (\n    <AccordionContext.Provider value={{ isOpen, toggle }}>\n      <div data-slot=\"accordion\" {...props}>\n        {children}\n      </div>\n    </AccordionContext.Provider>\n  );\n}\n\nexport interface AccordionItemProps extends React.ComponentProps<\"div\"> {\n  value: string;\n}\n\nexport function AccordionItem({\n  className,\n  value,\n  children,\n  ...props\n}: AccordionItemProps) {\n  return (\n    <ItemContext.Provider value={value}>\n      <div\n        data-slot=\"accordion-item\"\n        className={cn(ACCORDION_ITEM, className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </ItemContext.Provider>\n  );\n}\n\nexport function AccordionTrigger({\n  className,\n  children,\n  onClick,\n  ...props\n}: React.ComponentProps<\"button\">) {\n  const { isOpen, toggle } = useAccordion();\n  const value = useItemValue();\n  const open = isOpen(value);\n  return (\n    <h3 className={ACCORDION_HEADER} data-slot=\"accordion-header\">\n      <button\n        type=\"button\"\n        data-slot=\"accordion-trigger\"\n        data-state={open ? \"open\" : \"closed\"}\n        aria-expanded={open}\n        className={cn(ACCORDION_TRIGGER, className)}\n        onClick={(e) => {\n          onClick?.(e);\n          toggle(value);\n        }}\n        {...props}\n      >\n        {children}\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"text-ink-soft pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200\"\n        >\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      </button>\n    </h3>\n  );\n}\n\nexport function AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const { isOpen } = useAccordion();\n  const value = useItemValue();\n  if (!isOpen(value)) return null;\n  return (\n    <div\n      data-slot=\"accordion-content\"\n      data-state=\"open\"\n      className={ACCORDION_CONTENT}\n      {...props}\n    >\n      <div className={cn(ACCORDION_CONTENT_INNER, className)}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/account-list.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/account-list.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  ACCOUNT_LIST_BASE,\n  ACCOUNT_LIST_ITEM_ACTIONS,\n  ACCOUNT_LIST_ITEM_AVATAR,\n  ACCOUNT_LIST_ITEM_AVATAR_FALLBACK,\n  ACCOUNT_LIST_ITEM_BADGES,\n  ACCOUNT_LIST_ITEM_BASE,\n  ACCOUNT_LIST_ITEM_CHECK,\n  ACCOUNT_LIST_ITEM_CHECK_HIDDEN,\n  ACCOUNT_LIST_ITEM_CHECKED,\n  ACCOUNT_LIST_ITEM_DISABLED,\n  ACCOUNT_LIST_ITEM_FIGURE,\n  ACCOUNT_LIST_ITEM_HANDLE,\n  ACCOUNT_LIST_ITEM_NAME,\n  ACCOUNT_LIST_ITEM_RADIO,\n  ACCOUNT_LIST_ITEM_TEXT,\n  ACCOUNT_LIST_ITEM_UNCHECKED,\n} from \"../generated/account-list\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { Avatar, AvatarFallback } from \"./avatar\";\nimport { UiIcon } from \"./ui-icons\";\n\ninterface AccountListContextValue {\n  value: string;\n  setValue: (next: string) => void;\n}\n\nconst AccountListContext = React.createContext<AccountListContextValue | null>(null);\n\nexport interface AccountListProps extends Omit<React.ComponentProps<\"div\">, \"onChange\" | \"defaultValue\"> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Accessible name of the group, e.g. \"Accounts\". */\n  \"aria-label\": string;\n}\n\n/**\n * Pick the account you act as: one is current, arrows move and select\n * (radio-group semantics), so the current account is the only tab stop.\n */\nexport function AccountList({\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  className,\n  onKeyDown,\n  ...props\n}: AccountListProps) {\n  const [current, setValue] = useControllableState<string>({\n    ...(value !== undefined ? { value } : {}),\n    defaultValue,\n    ...(onValueChange ? { onChange: onValueChange } : {}),\n  });\n\n  const move = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    const forward = e.key === \"ArrowDown\" || e.key === \"ArrowRight\";\n    const back = e.key === \"ArrowUp\" || e.key === \"ArrowLeft\";\n    if (!forward && !back) return;\n    const radios = Array.from(\n      e.currentTarget.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not(:disabled)'),\n    );\n    const at = radios.indexOf(document.activeElement as HTMLButtonElement);\n    if (at < 0) return;\n    e.preventDefault();\n    const next = radios[(at + (forward ? 1 : -1) + radios.length) % radios.length];\n    next?.focus();\n    next?.click();\n  };\n\n  return (\n    <AccountListContext.Provider value={{ value: current, setValue }}>\n      <div\n        role=\"radiogroup\"\n        data-slot=\"account-list\"\n        className={cn(ACCOUNT_LIST_BASE, className)}\n        onKeyDown={(e) => {\n          onKeyDown?.(e);\n          if (!e.defaultPrevented) move(e);\n        }}\n        {...props}\n      />\n    </AccountListContext.Provider>\n  );\n}\n\nexport interface AccountListItemProps extends Omit<React.ComponentProps<\"div\">, \"value\" | \"title\"> {\n  value: string;\n  name: React.ReactNode;\n  /** A line under the name: handle, email. */\n  handle?: React.ReactNode;\n  /** Replaces the initial-in-a-square default. */\n  avatar?: React.ReactNode;\n  /** Role badges after the name block. */\n  badges?: React.ReactNode;\n  /** A figure at the end, set in the serif face: a balance. */\n  figure?: React.ReactNode;\n  /** Controls beside the row (a menu button); they cannot live inside the radio. */\n  actions?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport function AccountListItem({\n  value,\n  name,\n  handle,\n  avatar,\n  badges,\n  figure,\n  actions,\n  disabled,\n  className,\n  ...props\n}: AccountListItemProps) {\n  const ctx = React.useContext(AccountListContext);\n  if (!ctx) throw new Error(\"AccountListItem must be used within <AccountList>\");\n  const checked = ctx.value === value;\n  const initial = typeof name === \"string\" ? name.trim().charAt(0).toUpperCase() : \"\";\n  return (\n    <div\n      data-slot=\"account-list-item\"\n      data-state={checked ? \"checked\" : \"unchecked\"}\n      className={cn(\n        ACCOUNT_LIST_ITEM_BASE,\n        checked ? ACCOUNT_LIST_ITEM_CHECKED : ACCOUNT_LIST_ITEM_UNCHECKED,\n        disabled && ACCOUNT_LIST_ITEM_DISABLED,\n        className,\n      )}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        role=\"radio\"\n        aria-checked={checked}\n        disabled={disabled}\n        // Until one is chosen every radio is a tab stop, or the group could not be entered.\n        tabIndex={checked || ctx.value === \"\" ? 0 : -1}\n        onClick={() => ctx.setValue(value)}\n        className={ACCOUNT_LIST_ITEM_RADIO}\n      >\n        {avatar ?? (\n          <Avatar className={ACCOUNT_LIST_ITEM_AVATAR}>\n            <AvatarFallback className={ACCOUNT_LIST_ITEM_AVATAR_FALLBACK}>{initial}</AvatarFallback>\n          </Avatar>\n        )}\n        <span className={ACCOUNT_LIST_ITEM_TEXT}>\n          <span className={ACCOUNT_LIST_ITEM_NAME}>{name}</span>\n          {handle != null && <span className={ACCOUNT_LIST_ITEM_HANDLE}>{handle}</span>}\n        </span>\n        {badges != null && <span className={ACCOUNT_LIST_ITEM_BADGES}>{badges}</span>}\n        {figure != null && <span className={ACCOUNT_LIST_ITEM_FIGURE}>{figure}</span>}\n        <span className={cn(ACCOUNT_LIST_ITEM_CHECK, !checked && ACCOUNT_LIST_ITEM_CHECK_HIDDEN)} aria-hidden>\n          <UiIcon name=\"check\" />\n        </span>\n      </button>\n      {actions != null && <div className={ACCOUNT_LIST_ITEM_ACTIONS}>{actions}</div>}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/account-menu-profile.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/account-menu-profile.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Avatar, AvatarFallback } from \"./avatar\";\nimport { Badge } from \"./badge\";\nimport {\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n} from \"./dropdown-menu\";\nimport { Switch } from \"./switch\";\nimport { UiIcon } from \"./ui-icons\";\n\nexport interface AccountMenuTab {\n  id: string;\n  label: React.ReactNode;\n  /** Shown instead of the menu body when this tab is current; the first tab is always the menu itself. */\n  content?: React.ReactNode;\n}\n\nexport interface AccountMenuProfile {\n  /** Under the name on the profile card, e.g. \"Free\". */\n  plan?: string;\n  /** Makes the card a menu item that runs this and closes the menu, e.g. to open the account settings. */\n  onOpenProfile?: () => void;\n  tabs?: readonly AccountMenuTab[];\n  /** Names the tab row for assistive tech. Default `\"Sections\"`. */\n  tabsLabel?: string;\n  /** Current tab id (controlled). */\n  tab?: string;\n  onTabChange?: (id: string) => void;\n  /** A row with a short value badge on the right (\"EN\"); picking it runs `onSelect`. */\n  language?: { label: string; value: string; onSelect?: () => void };\n  /** A row with a switch; the menu closes after a toggle. */\n  darkTheme?: { label: string; checked: boolean; onCheckedChange: (checked: boolean) => void };\n  /** A submenu of radio options; the current one's label shows on the row. */\n  colorTheme?: {\n    label: string;\n    value: string;\n    options: readonly { id: string; label: string }[];\n    onValueChange: (id: string) => void;\n  };\n  /** Glyphs for the rows, so the kit carries no icon set. */\n  icons?: { language?: React.ReactNode; darkTheme?: React.ReactNode; colorTheme?: React.ReactNode };\n}\n\n/**\n * The tabs are `menuitemradio` items in a group, not a tablist: a menu may only\n * hold items, and this way the menu's own arrow-key roving reaches them.\n * Selecting one does not close the menu.\n */\nexport function ProfileTabs({\n  tabs,\n  value,\n  onChange,\n  label = \"Sections\",\n}: {\n  tabs: readonly AccountMenuTab[];\n  value: string;\n  onChange: (id: string) => void;\n  label?: string | undefined;\n}) {\n  const move = (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const step = e.key === \"ArrowRight\" ? 1 : e.key === \"ArrowLeft\" ? -1 : 0;\n    if (step === 0) return;\n    // Up and Down belong to the menu; Left and Right stay in the row.\n    e.stopPropagation();\n    e.preventDefault();\n    const target = (index + step + tabs.length) % tabs.length;\n    const next = tabs[target];\n    if (!next) return;\n    onChange(next.id);\n    e.currentTarget.parentElement?.querySelectorAll<HTMLElement>('[role=\"menuitemradio\"]')[target]?.focus();\n  };\n  return (\n    <div role=\"group\" aria-label={label} data-slot=\"account-menu-tabs\" className=\"flex border-b border-border-subtle\">\n      {tabs.map((t, i) => {\n        const selected = t.id === value;\n        return (\n          <button\n            key={t.id}\n            type=\"button\"\n            role=\"menuitemradio\"\n            aria-checked={selected}\n            tabIndex={-1}\n            onClick={() => onChange(t.id)}\n            onKeyDown={(e) => move(e, i)}\n            className={cn(\n              \"-mb-px h-8 flex-1 border-b px-3 text-body font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              selected ? \"border-primary text-ink\" : \"border-transparent text-ink-mid hover:text-ink\",\n            )}\n          >\n            {t.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function ProfileCard({\n  name,\n  plan,\n  initials,\n  onOpen,\n}: {\n  name: string;\n  plan?: string | undefined;\n  initials: string;\n  onOpen?: (() => void) | undefined;\n}) {\n  const content = (\n    <>\n      <Avatar className=\"size-14 shrink-0 rounded-full\">\n        <AvatarFallback className=\"font-serif text-h2 font-light text-ink\">{initials.slice(0, 1)}</AvatarFallback>\n      </Avatar>\n      <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <span className=\"truncate text-body font-medium text-ink\">{name}</span>\n        {plan && <span className=\"text-caption text-ink-soft\">{plan}</span>}\n      </span>\n      {onOpen && <UiIcon name=\"chevron-right\" className=\"size-4 text-ink-soft\" />}\n    </>\n  );\n  if (!onOpen) {\n    return (\n      <div data-slot=\"account-menu-card\" className=\"flex w-full items-center gap-2.5 p-2\">\n        {content}\n      </div>\n    );\n  }\n  // A real menu item: it joins the arrow-key order and closes the menu, so a dialog opened from it is not left under the menu.\n  return (\n    <DropdownMenuItem data-slot=\"account-menu-card\" className=\"h-auto gap-2.5 p-2\" onClick={onOpen}>\n      {content}\n    </DropdownMenuItem>\n  );\n}\n\nexport function ProfileSettingRows({ profile }: { profile: AccountMenuProfile }) {\n  const { language, darkTheme, colorTheme, icons } = profile;\n  if (!language && !darkTheme && !colorTheme) return null;\n  const currentColor = colorTheme?.options.find((o) => o.id === colorTheme.value)?.label;\n  return (\n    <>\n      <DropdownMenuSeparator />\n      {language && (\n        <DropdownMenuItem onClick={() => language.onSelect?.()}>\n          {icons?.language}\n          <span className=\"flex-1\">{language.label}</span>\n          <Badge>{language.value}</Badge>\n        </DropdownMenuItem>\n      )}\n      {darkTheme && (\n        <DropdownMenuItem\n          role=\"menuitemcheckbox\"\n          aria-checked={darkTheme.checked}\n          onClick={() => darkTheme.onCheckedChange(!darkTheme.checked)}\n        >\n          {icons?.darkTheme}\n          <span className=\"flex-1\">{darkTheme.label}</span>\n          {/* Presentational: the row is the control, so the switch stays out of the tab order. */}\n          <Switch checked={darkTheme.checked} tabIndex={-1} aria-hidden className=\"pointer-events-none\" />\n        </DropdownMenuItem>\n      )}\n      {colorTheme && (\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            {icons?.colorTheme}\n            <span className=\"flex-1\">{colorTheme.label}</span>\n            {currentColor && <span className=\"text-body-s text-ink-soft\">{currentColor}</span>}\n          </DropdownMenuSubTrigger>\n          <DropdownMenuSubContent>\n            <DropdownMenuRadioGroup value={colorTheme.value} onValueChange={colorTheme.onValueChange}>\n              {colorTheme.options.map((o) => (\n                <DropdownMenuRadioItem key={o.id} value={o.id}>\n                  {o.label}\n                </DropdownMenuRadioItem>\n              ))}\n            </DropdownMenuRadioGroup>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n      )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/account-menu.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/account-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Avatar, AvatarFallback } from \"./avatar\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\";\nimport type { NavGroup } from \"./nav-model\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport {\n  ProfileCard,\n  ProfileSettingRows,\n  ProfileTabs,\n  type AccountMenuProfile,\n  type AccountMenuTab,\n} from \"./account-menu-profile\";\n\nexport type { AccountMenuProfile, AccountMenuTab };\n\nexport interface AccountMenuLabels {\n  /** Accessible name of the trigger. Default `\"Account\"`. */\n  trigger?: string;\n  /** Default `\"Manage account\"`. */\n  manage?: string;\n  /** Default `\"Switch account\"`. */\n  switchAccount?: string;\n  /** Default `\"Sign out\"`. */\n  signOut?: string;\n}\n\nexport interface AccountMenuProps {\n  account: { name?: string | null | undefined; email: string };\n  /** The account center, on the identity provider's origin; no item without it. */\n  manageHref?: string | undefined;\n  /** A full page load to the sign-in that offers the account chooser. */\n  switchHref: string;\n  /** The service's own entries, between the account center and switching. Draws `label`, `icon`, `external`. */\n  groups?: readonly NavGroup[];\n  onSignOut: () => void;\n  linkComponent?: React.ElementType;\n  labels?: AccountMenuLabels;\n  /**\n   * The wide profile form: tabs, a profile card, language and theme rows. Absent,\n   * the menu is the compact one it always was.\n   */\n  profile?: AccountMenuProfile;\n  className?: string;\n}\n\nconst initials = (account: AccountMenuProps[\"account\"]) => {\n  const words = account.name?.trim().split(/\\s+/).filter(Boolean) ?? [];\n  const letters = words.length > 0 ? words.slice(0, 2).map(w => Array.from(w)[0]) : [Array.from(account.email)[0]];\n  return letters.join(\"\").toUpperCase();\n};\n\n/**\n * Who is signed in, top right. The order is fixed — the account, the account\n * center, the service's groups, switching, signing out — so every service's\n * menu reads the same; a service adds groups and nothing else.\n */\nexport function AccountMenu({\n  account,\n  manageHref,\n  switchHref,\n  groups = [],\n  onSignOut,\n  linkComponent,\n  labels = {},\n  profile,\n  className,\n}: AccountMenuProps) {\n  const Link = linkComponent ?? \"a\";\n  const tabs = profile?.tabs ?? [];\n  const [tab, setTab] = useControllableState<string>({\n    ...(profile?.tab !== undefined ? { value: profile.tab } : {}),\n    defaultValue: tabs[0]?.id ?? \"\",\n    ...(profile?.onTabChange ? { onChange: profile.onTabChange } : {}),\n  });\n  const otherTab = tabs.length > 0 && tab !== tabs[0]?.id ? tabs.find((t) => t.id === tab) : undefined;\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        data-slot=\"account-menu-trigger\"\n        aria-label={labels.trigger ?? \"Account\"}\n        className={cn(\"rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring\", className)}\n      >\n        <Avatar>\n          <AvatarFallback className=\"text-xs font-medium text-ink\">{initials(account)}</AvatarFallback>\n        </Avatar>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className={profile ? \"w-75\" : \"w-64\"}>\n        {tabs.length > 0 && <ProfileTabs tabs={tabs} value={tab} onChange={setTab} label={profile?.tabsLabel} />}\n        {otherTab ? (\n          otherTab.content\n        ) : (\n          <>\n        {profile ? (\n          <ProfileCard\n            name={account.name || account.email}\n            plan={profile.plan}\n            initials={initials(account)}\n            onOpen={profile.onOpenProfile}\n          />\n        ) : (\n          <DropdownMenuLabel className=\"flex flex-col\">\n            {account.name && <span className=\"truncate text-ink\">{account.name}</span>}\n            <span className=\"truncate font-normal text-ink-soft\">{account.email}</span>\n          </DropdownMenuLabel>\n        )}\n        {profile && <DropdownMenuSeparator />}\n        {manageHref && (\n          <DropdownMenuItem asChild>\n            <a href={manageHref}>{labels.manage ?? \"Manage account\"}</a>\n          </DropdownMenuItem>\n        )}\n        {groups.map(group => (\n          <React.Fragment key={group.id}>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              {group.label && <DropdownMenuLabel className=\"text-xs text-ink-soft\">{group.label}</DropdownMenuLabel>}\n              {group.items.map(item => {\n                const Item = item.external ? \"a\" : Link;\n                const Icon = item.icon;\n                return (\n                  <DropdownMenuItem key={item.id} asChild>\n                    <Item href={item.href}>\n                      {Icon && <Icon className=\"size-4\" />}\n                      {item.label}\n                    </Item>\n                  </DropdownMenuItem>\n                );\n              })}\n            </DropdownMenuGroup>\n          </React.Fragment>\n        ))}\n        {profile && <ProfileSettingRows profile={profile} />}\n        <DropdownMenuSeparator />\n        <DropdownMenuItem asChild>\n          <a href={switchHref}>{labels.switchAccount ?? \"Switch account\"}</a>\n        </DropdownMenuItem>\n        <DropdownMenuItem variant={profile ? \"destructive\" : \"neutral\"} onClick={onSignOut}>\n          {labels.signOut ?? \"Sign out\"}\n        </DropdownMenuItem>\n          </>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/account-settings-dialog.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/account-settings-dialog.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  ACCOUNT_SETTINGS_DIALOG_CLOSE,\n  ACCOUNT_SETTINGS_DIALOG_CONTENT,\n  ACCOUNT_SETTINGS_DIALOG_DESCRIPTION,\n  ACCOUNT_SETTINGS_DIALOG_ENTRY,\n  ACCOUNT_SETTINGS_DIALOG_FOOTER,\n  ACCOUNT_SETTINGS_DIALOG_HEADING,\n  ACCOUNT_SETTINGS_DIALOG_LIST,\n  ACCOUNT_SETTINGS_DIALOG_PANE,\n  ACCOUNT_SETTINGS_DIALOG_PANEL,\n  ACCOUNT_SETTINGS_DIALOG_SIDEBAR,\n  ACCOUNT_SETTINGS_DIALOG_TABS,\n  ACCOUNT_SETTINGS_DIALOG_TITLE,\n} from \"../generated/account-settings-dialog\";\nimport { cn } from \"../lib/cn\";\nimport { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from \"./dialog\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"./tabs\";\nimport { IconButton } from \"./icon-button\";\nimport { UiIcon } from \"./ui-icons\";\n\nexport interface AccountSettingsSection {\n  id: string;\n  label: React.ReactNode;\n  icon?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface AccountSettingsDialogLabels {\n  /** The close button. Default `\"Close\"`. */\n  close?: string;\n}\n\nexport interface AccountSettingsDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The heading of the content pane. */\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** One sidebar entry each; the active one's `content` fills the pane. */\n  sections: readonly AccountSettingsSection[];\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (id: string) => void;\n  /** Pinned under the sidebar entries: sign out, language. */\n  sidebarFooter?: React.ReactNode;\n  labels?: AccountSettingsDialogLabels;\n  className?: string;\n}\n\n/**\n * The account modal: a vertical tab rail on the left, the active section on\n * the right. Sections are the caller's, so Profile and Security (or any other)\n * are built from `SettingsSection` and `SettingsRow` inside `content`.\n */\nexport function AccountSettingsDialog({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  description,\n  sections,\n  value,\n  defaultValue,\n  onValueChange,\n  sidebarFooter,\n  labels = {},\n  className,\n}: AccountSettingsDialogProps) {\n  const first = sections[0]?.id ?? \"\";\n  return (\n    <Dialog\n      {...(open !== undefined ? { open } : {})}\n      {...(defaultOpen !== undefined ? { defaultOpen } : {})}\n      {...(onOpenChange ? { onOpenChange } : {})}\n    >\n      <DialogContent\n        showCloseButton={false}\n        className={cn(ACCOUNT_SETTINGS_DIALOG_CONTENT, className)}\n      >\n        <Tabs\n          orientation=\"vertical\"\n          {...(value !== undefined ? { value } : { defaultValue: defaultValue ?? first })}\n          {...(onValueChange ? { onValueChange } : {})}\n          className={ACCOUNT_SETTINGS_DIALOG_TABS}\n        >\n          <div className={ACCOUNT_SETTINGS_DIALOG_SIDEBAR}>\n            <TabsList className={ACCOUNT_SETTINGS_DIALOG_LIST}>\n              {sections.map((s) => (\n                <TabsTrigger key={s.id} value={s.id} className={ACCOUNT_SETTINGS_DIALOG_ENTRY}>\n                  {s.icon}\n                  {s.label}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n            {sidebarFooter != null && (\n              <div className={ACCOUNT_SETTINGS_DIALOG_FOOTER}>{sidebarFooter}</div>\n            )}\n          </div>\n          <div className={ACCOUNT_SETTINGS_DIALOG_PANE}>\n            <div className={ACCOUNT_SETTINGS_DIALOG_HEADING}>\n              <DialogTitle className={ACCOUNT_SETTINGS_DIALOG_TITLE}>{title}</DialogTitle>\n              {description != null && (\n                <DialogDescription className={ACCOUNT_SETTINGS_DIALOG_DESCRIPTION}>{description}</DialogDescription>\n              )}\n            </div>\n            {sections.map((s) => (\n              <TabsContent key={s.id} value={s.id} className={ACCOUNT_SETTINGS_DIALOG_PANEL}>\n                {s.content}\n              </TabsContent>\n            ))}\n          </div>\n        </Tabs>\n        <DialogClose asChild>\n          <IconButton aria-label={labels.close ?? \"Close\"} className={ACCOUNT_SETTINGS_DIALOG_CLOSE}>\n            <UiIcon name=\"x\" />\n          </IconButton>\n        </DialogClose>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"AAwFY,cAEI,YAFJ;AAxFZ,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AACnB,SAAS,QAAQ,aAAa,eAAe,mBAAmB,mBAAmB;AACnF,SAAS,MAAM,aAAa,UAAU,mBAAmB;AACzD,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAqChB,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AACF,GAA+B;AAC7B,QAAM,QAAQ,SAAS,CAAC,GAAG,MAAM;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,SAAS,SAAY,EAAE,KAAK,IAAI,CAAC;AAAA,MACrC,GAAI,gBAAgB,SAAY,EAAE,YAAY,IAAI,CAAC;AAAA,MACnD,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;AAAA,MAExC;AAAA,QAAC;AAAA;AAAA,UACC,iBAAiB;AAAA,UACjB,WAAW,GAAG,iCAAiC,SAAS;AAAA,UAExD;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAY;AAAA,gBACX,GAAI,UAAU,SAAY,EAAE,MAAM,IAAI,EAAE,cAAc,gBAAgB,MAAM;AAAA,gBAC5E,GAAI,gBAAgB,EAAE,cAAc,IAAI,CAAC;AAAA,gBAC1C,WAAW;AAAA,gBAEX;AAAA,uCAAC,SAAI,WAAW,iCACd;AAAA,wCAAC,YAAS,WAAW,8BAClB,mBAAS,IAAI,CAAC,MACb,qBAAC,eAAuB,OAAO,EAAE,IAAI,WAAW,+BAC7C;AAAA,wBAAE;AAAA,sBACF,EAAE;AAAA,yBAFa,EAAE,EAGpB,CACD,GACH;AAAA,oBACC,iBAAiB,QAChB,oBAAC,SAAI,WAAW,gCAAiC,yBAAc;AAAA,qBAEnE;AAAA,kBACA,qBAAC,SAAI,WAAW,8BACd;AAAA,yCAAC,SAAI,WAAW,iCACd;AAAA,0CAAC,eAAY,WAAW,+BAAgC,iBAAM;AAAA,sBAC7D,eAAe,QACd,oBAAC,qBAAkB,WAAW,qCAAsC,uBAAY;AAAA,uBAEpF;AAAA,oBACC,SAAS,IAAI,CAAC,MACb,oBAAC,eAAuB,OAAO,EAAE,IAAI,WAAW,+BAC7C,YAAE,WADa,EAAE,EAEpB,CACD;AAAA,qBACH;AAAA;AAAA;AAAA,YACF;AAAA,YACA,oBAAC,eAAY,SAAO,MAClB,8BAAC,cAAW,cAAY,OAAO,SAAS,SAAS,WAAW,+BAC1D,8BAAC,UAAO,MAAK,KAAI,GACnB,GACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/alert-dialog.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { buttonVariants } from \"./button\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { DismissableLayerScope, useDismissableLayer, useModalScrimStyle } from \"../primitives/dismissable-layer\";\nimport { useFocusScope } from \"../primitives/focus-scope\";\nimport { usePresence } from \"../primitives/presence\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { Slot } from \"../primitives/slot\";\nimport {\n  ALERT_DIALOG_CONTENT,\n  ALERT_DIALOG_DESCRIPTION,\n  ALERT_DIALOG_FOOTER,\n  ALERT_DIALOG_HEADER,\n  ALERT_DIALOG_OVERLAY,\n  ALERT_DIALOG_TITLE,\n} from \"../generated/alert-dialog\";\n\ninterface AlertDialogContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  triggerRef: React.RefObject<HTMLElement | null>;\n}\n\nconst AlertDialogContext = React.createContext<AlertDialogContextValue | null>(null);\n\nfunction useAlertDialog(): AlertDialogContextValue {\n  const ctx = React.useContext(AlertDialogContext);\n  if (!ctx) throw new Error(\"AlertDialog parts must be used within <AlertDialog>\");\n  return ctx;\n}\n\nexport interface AlertDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function AlertDialog({ open, defaultOpen = false, onOpenChange, children }: AlertDialogProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const triggerRef = React.useRef<HTMLElement | null>(null);\n  return (\n    <AlertDialogContext.Provider value={{ open: isOpen, setOpen, triggerRef }}>\n      {children}\n    </AlertDialogContext.Provider>\n  );\n}\n\nexport interface AlertDialogTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function AlertDialogTrigger({ asChild = false, onClick, ...props }: AlertDialogTriggerProps) {\n  const { open, setOpen, triggerRef } = useAlertDialog();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"alert-dialog-trigger\"\n      aria-expanded={open}\n      ref={triggerRef as React.Ref<HTMLButtonElement>}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(true);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogOverlayProps extends React.ComponentProps<\"div\"> {}\n\nexport function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {\n  const { open } = useAlertDialog();\n  // No onClick: the content's dismissable layer already closes on the\n  // pointer-down that lands here, and a second path called onOpenChange(false)\n  // twice for one press whenever the overlay was still hit by the click\n  // (a host that closes later, CSS without the closed-state pointer-events).\n  return (\n    <div\n      data-slot=\"alert-dialog-overlay\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(ALERT_DIALOG_OVERLAY, className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogContentProps extends React.ComponentProps<\"div\"> {}\n\nexport function AlertDialogContent({ className, children, ...props }: AlertDialogContentProps) {\n  const { open, setOpen, triggerRef } = useAlertDialog();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const focusRef = useFocusScope(open, { returnFocusTo: triggerRef });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [triggerRef],\n    modal: true,\n  });\n  const scrimStyle = useModalScrimStyle(dismissRef);\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <AlertDialogOverlay style={scrimStyle} />\n      <div\n        data-slot=\"alert-dialog-content\"\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        data-state={open ? \"open\" : \"closed\"}\n        ref={mergeRefs(focusRef, dismissRef, presRef as React.Ref<HTMLDivElement>)}\n        className={cn(ALERT_DIALOG_CONTENT, className)}\n        {...(props as Record<string, unknown>)}\n      >\n        <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n      </div>\n    </Portal>\n  );\n}\n\nexport function AlertDialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(ALERT_DIALOG_HEADER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(ALERT_DIALOG_FOOTER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <h2\n      data-slot=\"alert-dialog-title\"\n      className={cn(ALERT_DIALOG_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"alert-dialog-description\"\n      className={cn(ALERT_DIALOG_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface AlertDialogActionProps extends React.ComponentProps<\"button\"> {}\n\nexport function AlertDialogAction({ className, onClick, ...props }: AlertDialogActionProps) {\n  const { setOpen } = useAlertDialog();\n  return (\n    <button\n      data-slot=\"alert-dialog-action\"\n      className={cn(buttonVariants(), className)}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogCancelProps extends React.ComponentProps<\"button\"> {}\n\nexport function AlertDialogCancel({ className, onClick, ...props }: AlertDialogCancelProps) {\n  const { setOpen } = useAlertDialog();\n  return (\n    <button\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/alert.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport {\n  ALERT_BASE,\n  ALERT_DESCRIPTION,\n  ALERT_TITLE,\n  alertVariants,\n  type AlertVariant,\n} from \"../generated/alert\";\n\nexport type { AlertVariant };\n\nexport interface AlertProps extends React.ComponentProps<\"div\"> {\n  variant?: AlertVariant;\n}\n\nexport function Alert({ className, variant = \"neutral\", ...props }: AlertProps) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(ALERT_BASE, alertVariants[variant], className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(ALERT_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(ALERT_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"AAkBI;AAlBJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAQA,SAAS,MAAM,EAAE,WAAW,UAAU,WAAW,GAAG,MAAM,GAAe;AAC9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAW,GAAG,YAAY,cAAc,OAAO,GAAG,SAAS;AAAA,MAC1D,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC/E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,aAAa,SAAS;AAAA,MACnC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,mBAAmB,SAAS;AAAA,MACzC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/animated-number-columns.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/animated-number-columns.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type { NumberItem, RollDirection } from \"../lib/number-parts\";\nimport { rollStep } from \"../lib/number-parts\";\n\n// The JS side has to know when an entering or leaving column is done, so these\n// are literals rather than `--ev-dur-*` (400ms is the nearest token).\nexport const EDGE_MS = 350;\nconst EDGE_EASE = \"var(--ev-ease-out, cubic-bezier(0.22, 1, 0.36, 1))\";\nexport const SPIN_MS = 750;\n// A damped spring (zeta .72, ~4% overshoot) sampled for `linear()`.\nconst SPRING =\n  \"linear(0, 0.097, 0.301, 0.521, 0.712, 0.855, 0.95, 1.005, 1.031, 1.038, 1.035, 1.028, 1.019, 1.012, 1.006, 1.002, 1, 0.999, 1, 1, 1)\";\nconst WINDOW_EDGE = \"0.25em\";\nconst WINDOW_MASK = `linear-gradient(to bottom, transparent 0, black ${WINDOW_EDGE}, black calc(100% - ${WINDOW_EDGE}), transparent 100%)`;\n\nfunction spinEasing(): string {\n  const springy = typeof CSS !== \"undefined\" && typeof CSS.supports === \"function\" && CSS.supports(\"transition-timing-function\", SPRING);\n  return springy ? SPRING : EDGE_EASE;\n}\n\ninterface SlotProps {\n  item: NumberItem;\n  glyphs: readonly string[];\n  direction: RollDirection;\n  motion: boolean;\n  spin: number;\n}\n\n/** One part of the number; collapses to zero width to enter or leave, so its neighbours slide. */\nexport function Slot({ item, glyphs, direction, motion, spin }: SlotProps) {\n  const ref = React.useRef<HTMLSpanElement>(null);\n  const [open, setOpen] = React.useState(!item.fresh);\n  React.useLayoutEffect(() => {\n    if (open) return;\n    // Reading layout makes the browser style the collapsed state, so opening it is a transition.\n    void ref.current?.offsetWidth;\n    setOpen(true);\n  }, [open]);\n  const collapsed = item.exiting || !open;\n  const { part } = item;\n  return (\n    <span\n      ref={ref}\n      data-slot=\"animated-number-part\"\n      data-state={collapsed ? \"collapsed\" : \"open\"}\n      style={{\n        display: \"inline-grid\",\n        gridTemplateColumns: collapsed ? \"0fr\" : \"1fr\",\n        opacity: collapsed ? 0 : 1,\n        transition: motion\n          ? `grid-template-columns ${EDGE_MS}ms ${EDGE_EASE}, opacity ${EDGE_MS}ms ${EDGE_EASE}`\n          : undefined,\n      }}\n    >\n      <span style={{ minWidth: 0, overflowX: \"clip\", whiteSpace: \"pre\" }}>\n        {part.kind === \"digit\" ? (\n          <Digit digit={part.digit} glyphs={glyphs} direction={direction} motion={motion} spin={spin} />\n        ) : (\n          part.text\n        )}\n      </span>\n    </span>\n  );\n}\n\ninterface SpinState {\n  digit: number;\n  /** Index into the unbounded strip; the glyph at index i is `i mod 10`. */\n  at: number;\n  lo: number;\n  hi: number;\n  animate: boolean;\n  /** Sign of the last move, for `data-roll`. */\n  step: number;\n}\n\nconst settle = (digit: number): SpinState => ({ digit, at: digit, lo: digit, hi: digit, animate: false, step: 0 });\n\nconst glyphIndex = (i: number): number => ((i % 10) + 10) % 10;\n\ninterface DigitProps {\n  digit: number;\n  glyphs: readonly string[];\n  direction: RollDirection;\n  motion: boolean;\n  spin: number;\n}\n\n/**\n * A clipped one-line window over a strip of digits. The strip is unbounded,\n * so a forced direction wraps (9 -> 0 going up lands on index 10) and a column\n * never rewinds through the digits in between. Only the cells between where it\n * was and where it is going exist in the DOM; when the transition ends it is\n * rebased to 0..9 without a transition.\n */\nfunction Digit({ digit, glyphs, direction, motion, spin }: DigitProps) {\n  const [state, setState] = React.useState<SpinState>(() => settle(digit));\n  let s = state;\n  if (s.digit !== digit) {\n    if (motion) {\n      const step = rollStep(s.digit, digit, direction);\n      const at = s.at + step;\n      s = { digit, at, lo: Math.min(s.lo, at), hi: Math.max(s.hi, at), animate: true, step };\n    } else {\n      s = settle(digit);\n    }\n    setState(s);\n  }\n  const moving = s.lo !== s.hi;\n  const cells = Array.from({ length: s.hi - s.lo + 1 }, (_, n) => s.lo + n);\n  return (\n    <span\n      data-slot=\"animated-number-digit\"\n      data-roll={moving ? (s.step > 0 ? \"up\" : \"down\") : \"rest\"}\n      style={{\n        position: \"relative\",\n        display: \"inline-block\",\n        overflow: \"clip\",\n        paddingBlock: WINDOW_EDGE,\n        marginBlock: `-${WINDOW_EDGE}`,\n        ...(moving ? { maskImage: WINDOW_MASK } : {}),\n      }}\n    >\n      <span style={{ display: \"block\", visibility: \"hidden\" }}>{glyphs[0]}</span>\n      <span\n        onTransitionEnd={(e) => {\n          if (e.target === e.currentTarget && e.propertyName === \"transform\") setState(settle(digit));\n        }}\n        style={{\n          position: \"absolute\",\n          insetInline: 0,\n          top: WINDOW_EDGE,\n          transform: `translateY(calc(${-s.at} * 1lh))`,\n          transition: s.animate ? `transform ${spin}ms ${spinEasing()}` : \"none\",\n        }}\n      >\n        {cells.map((i) => (\n          <span\n            key={i}\n            style={{ position: \"absolute\", insetInline: 0, top: `calc(${i} * 1lh)`, height: \"1lh\", textAlign: \"center\" }}\n          >\n            {glyphs[glyphIndex(i)]}\n          </span>\n        ))}\n      </span>\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}