@lerianstudio/sindarian-ui 2.0.0-beta.2 → 2.0.0-beta.21

package/dist/globals.css

@@ -10,11 +10,18 @@
 @import './components/ui/stepper/styles.css';
 @import './components/ui/tabs/styles.css';
 @import './components/ui/dialog/styles.css';
+@import './tokens.css';
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --font-sans:
     var(--font-inter, 'Inter'), 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-serif:
+    var(--font-plex-serif, ui-serif), ui-serif, Georgia, Cambria,
+    'Times New Roman', Times, serif;
+  --font-mono:
+    var(--font-plex-mono, ui-monospace), ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 
   --shadow-sidebar: 5px 0px 15px -3px hsl(var(--shadow-color) / 0.05);
   --shadow-data-table:
@@ -210,338 +217,7 @@
   }
 }
 
-@layer base {
-  :root {
-    color-scheme: light; /* native widgets (form controls, scrollbars) follow the theme */
-
-    /* Application tokens (from Figma ring-tokens) */
-    --body-surface: 240 5% 96%; /* base/100 = #F4F4F5 */
-    /*
-      --body-text and --container-text below both step one notch off base/500.
-      base/500 clears AA on white (4.86:1) but not on --body-surface, the
-      recessed page ground, where it read 4.43:1. That ground is exactly where
-      the components carrying these two tokens sit: the resting tabs trigger
-      (text-sm font-medium, and its hover fill is --card precisely because the
-      resting ground is not white), the breadcrumb page and separator, the
-      stepper item text and description. An axe crawl of the br-sfn cockpit
-      flagged .text-body-text on 2026-09-06; the ratio it printed does not
-      reproduce here, and the measured pair on this token's own ground is
-      4.40:1 at 8-bit precision (4.43:1 in float).
-
-      45% is the smallest step that clears it: 4.59:1 on --body-surface, up
-      from 4.43:1, and 5.04:1 on white. Both stay eleven notches clear of
-      --container-title (base/600), so the text-versus-title step holds.
-
-      Deliberately not stepped far enough to clear --muted (#E4E4E7), which
-      would take base/500 minus five notches and visibly darken tabs,
-      breadcrumbs and steppers. No component in THIS kit paints either token on
-      that fill. A consumer that does is a call-site fix on its side, not a
-      clean bill from here: product-console's extract-table pairs bg-muted with
-      text-body-text and reads 3.98:1 in light.
-    */
-    --body-text: 240 4% 45%; /* one notch off base/500: #6E6E77, AA on body-surface */
-    --body-title: 240 5% 26%; /* base/700 = #3F3F46 */
-    --container-surface: 0 0% 100%; /* base/white = #FFFFFF */
-    --container-text: 240 4% 45%; /* one notch off base/500: #6E6E77, AA on body-surface */
-    --container-title: 240 5% 34%; /* base/600 = #52525B */
-    --container-border: 0 0% 100%; /* #FFFFFF */
-    --link: 240 4% 16%; /* base/800 = #27272A */
-    --link-hover: 240 4% 16%; /* #27272A with 80% opacity via /80 */
-    --link-mute: 240 4% 16%; /* #27272A with 40% opacity via /40 */
-    --button-primary-surface: 240 4% 16%; /* base/800 = #27272A */
-    --button-primary-text: 0 0% 100%; /* base/white */
-
-    /* Shadcn semantic tokens (aligned with Figma) */
-    --background: 0 0% 100%; /* base/white = #FFFFFF */
-    --foreground: 240 5% 26%; /* base/700 = #3F3F46 */
-    --card: 0 0% 100%; /* = container-surface (white) */
-    /* Held at base/500, the step --container-text just moved off: this token's
-       own ground is --card (white), where base/500 clears AA at 4.86:1. It
-       measures 3.84:1 over --muted, but no component in this kit renders it
-       there: the data table pins its own inks rather than inheriting this one
-       (`ui/table/index.tsx`: cells take text-foreground, heads take
-       text-muted-foreground), so the hovered-row ground never sits under this
-       token. */
-    --card-foreground: 240 4% 46%; /* base/500 = #71717A */
-    --popover: 0 0% 100%; /* base/white */
-    --popover-foreground: 240 5% 34%; /* base/600 = #52525B */
-    --primary: 240 4% 16%; /* base/800 = #27272A */
-    --primary-foreground: 0 0% 100%; /* base/white */
-    --secondary: 0 0% 100%; /* base/white */
-    --secondary-foreground: 240 5% 34%; /* base/600 = #52525B */
-    --muted: 240 5% 90%; /* base/200 = #E4E4E7 */
-    --muted-foreground: 240 5% 34%; /* base/600 = #52525B */
-    --accent: 56 99% 50%; /* #FEED02 (sunglow) */
-    --accent-foreground: 240 10% 4%; /* base/800 for contrast on yellow */
-    /*
-      Shadcn — Destructive. Darkened one step to red/600. red/500 under white
-      was 3.78:1, under AA, for both roles this token plays: the fill beneath
-      `--destructive-foreground` (the Critical badge, every destructive
-      button) and the plain body ink of a field/form error message on white.
-      red/600 lifts both to 4.80:1. The hue is unchanged; only the step moved.
-    */
-    --destructive: 0 72% 51%; /* red/600 = #DC2626 */
-    --destructive-foreground: 0 0% 100%; /* white */
-    --border: 240 5% 90%; /* base/200 = #E4E4E7 */
-    --input: 0 0% 100%; /* base/white */
-    /* Lighter than --muted-foreground, which is also the label colour: a
-       placeholder that matches its own label has no hierarchy left to give.
-       Stepped off base/500 with --body-text, and for the same reason. The
-       field paints no fill of its own (`input/styles.css`: .input-wrapper is
-       border-only, .input-base is bg-transparent), so the hint sits on
-       whatever ground contains the form, and on --body-surface base/500 read
-       4.40:1. 45% brings that to 4.59:1 and 5.04:1 on white. The retired note
-       here claimed 4.4:1 was acceptable "on the shadcn-100 field", which named
-       a fill the component never paints. */
-    --input-placeholder: 240 4% 45%; /* one notch off base/500: #6E6E77, AA on body-surface */
-    /*
-      Focus ring. base/400 read 2.55:1 on white and 2.33:1 on --body-surface,
-      under the 3:1 floor a focus indicator answers to (SC 1.4.11), and this is
-      the ring every input, button and trigger in the kit paints: the wrapper
-      border on :focus-within, and the ring itself at ring-offset-0, both of
-      which touch the page ground directly. base/500 clears it on every light
-      ground: 4.84:1 on white (which is also --card and --popover here) and
-      4.40:1 on --body-surface.
-
-      It does NOT serve both themes. On the dark container surface base/500
-      measures 2.16:1, so .dark keeps the old channel as its own declaration,
-      where it reads 5.81:1 on --background and 4.08:1 on --card.
-
-      No single value clears both themes with margin, and none is a palette
-      step: the best one channel does is an off-scale 240 5% 57%, which clears
-      3:1 on all four grounds but by 0.04 on two of them. The per-theme pair
-      sits at 4.4+ light and 4.0+ dark, each half gated in
-      `__tests__/tokens-contract.test.ts`.
-    */
-    --ring: 240 4% 46%; /* base/500 = #71717A */
-    --radius: 0.5rem;
-
-    /* Accent variants */
-    --accent-hover: 56 99% 50%; /* #FEED02 - opacity handled via /70 */
-    --accent-mute: 56 99% 50%; /* #FEED02 - opacity handled via /50 */
-
-    /* System tokens (light mode — dark overrides in .dark) */
-    --system-error: 0 84% 60%; /* red/500 = #EF4444 */
-    --system-error-surface: 0 86% 97%; /* red/50 = #FEF2F2 */
-    --system-error-h1a: 0 74% 35%; /* red/800 = #991B1B */
-    --system-error-border: 0 84% 60% / 0.5; /* #EF4444 50% */
-    --system-error-text: 0 74% 35%; /* #991B1B */
-    --system-success: 142 76% 36%; /* green/600 = #16A34A */
-    --system-success-surface: 139 76% 97%; /* green/50 = #F0FDF4 */
-    --system-success-h1a: 143 64% 24%; /* green/800 = #166534 */
-    --system-success-border: 142 76% 36% / 0.5; /* #16A34A 50% */
-    --system-success-text: 143 64% 24%; /* #166534 */
-    --system-info: 221 83% 53%; /* blue/600 = #2563EB */
-    --system-info-surface: 214 100% 97%; /* blue/50 = #EFF6FF */
-    --system-info-h1a: 224 76% 40%; /* blue/800 = #1E40AF */
-    --system-info-border: 221 83% 53% / 0.5; /* #2563EB 50% */
-    --system-info-text: 224 76% 40%; /* #1E40AF */
-    --system-alert: 48 96% 47%; /* yellow/500 = #EAB308 */
-    --system-alert-surface: 55 92% 95%; /* yellow/50 = #FEFCE8 */
-    --system-alert-h1a: 36 92% 29%; /* yellow/800 = #854D0E */
-    --system-alert-border: 48 96% 47% / 0.5; /* #EAB308 50% */
-    --system-alert-text: 36 92% 29%; /* #854D0E */
-    --system-purple: 271 81% 56%; /* purple/600 = #9333EA */
-    --system-purple-surface: 270 100% 98%; /* purple/50 = #FAF5FF */
-    --system-purple-h1a: 273 67% 39%; /* purple/800 = #6B21A8 */
-    --system-purple-border: 271 81% 56% / 0.5; /* #9333EA 50% */
-    --system-purple-text: 273 67% 39%; /* #6B21A8 */
-
-    /* Shadow color token for dark mode adaptation */
-    --shadow-color: 0 0% 0%;
-
-    /*
-      Ledger credit semantic — deliberately DISTINCT from --destructive, not an
-      alias: --destructive is an error/alarm, --credit is the accounting reading
-      of a credit amount. Deeper than --destructive (red/700 vs red/500) so the
-      two never read as the same signal. --credit-foreground mirrors --credit:
-      the red itself carries the role as text.
-    */
-    --credit: 0 74% 42%; /* red/700 = #B91C1C */
-    --credit-foreground: 0 74% 42%; /* mirrors --credit */
-
-    /*
-      Reconciliation matte fills — the recessed track behind a balance bar, one
-      neutral step apart. Deliberately hue-neutral: the matched/unmatched signal
-      is carried by the bar's leading edge, so a tinted wall would double-encode.
-    */
-    --matched-surface: 240 5% 96%; /* base/100 = #F4F4F5 */
-    --unmatched-surface: 240 5% 90%; /* base/200 = #E4E4E7 */
-
-    /*
-      Chart series palette — 8 categorical slots drawn from the brand scales
-      (de-york, sunglow, cod-gray) plus the system hues, ordered so no adjacent
-      pair shares a hue neighbourhood.
-    */
-    --chart-1: 143 59% 36%; /* de-york-600 = #26934F */
-    --chart-2: 0 72% 51%; /* red/600 = #DC2626 */
-    --chart-3: 39 98% 40%; /* sunglow-600 = #CC8402 */
-    --chart-4: 221 83% 53%; /* blue/600 = #2563EB */
-    --chart-5: 333 71% 51%; /* pink/600 = #DB2777 */
-    --chart-6: 193 82% 31%; /* cyan/700 = #0E7490 */
-    --chart-7: 272 72% 47%; /* purple/700 = #7E22CE */
-    --chart-8: 351 9% 43%; /* cod-gray-500 = #776366 */
-  }
-
-  .dark {
-    color-scheme: dark; /* native widgets (form controls, scrollbars) follow the theme */
-
-    /* Custom — Layout */
-    --link-hover: 240 5% 96%; /* #F4F4F5 80% (opacity via /80) */
-    --link-mute: 240 5% 96%; /* #F4F4F5 40% (opacity via /40) */
-    --container-surface: 240 5% 26%; /* base/700 = #3F3F46 */
-    --container-text: 240 5% 96%; /* base/100 = #F4F4F5 */
-    --container-title: 0 0% 100%; /* base/white */
-    --body-surface: 240 4% 16%; /* base/800 = #27272A */
-    --body-text: 240 5% 84%; /* base/300 = #D4D4D8 */
-    --body-title: 0 0% 100%; /* base/white */
-    --link: 240 5% 96%; /* base/100 = #F4F4F5 */
-    --button-primary-surface: 240 5% 96%; /* base/100 = #F4F4F5 */
-    --button-primary-text: 240 4% 16%; /* base/800 = #27272A */
-    --container-border: var(--border); /* shadcn/--border */
-
-    /* Shadcn — Core */
-    --background: 240 4% 16%; /* base/800 = #27272A */
-    --foreground: 240 5% 96%; /* base/100 = #F4F4F5 */
-    --muted: 240 5% 34%; /* base/600 = #52525B */
-    /*
-      Lifted off the base scale. base/400 read 4.09:1 on --container-surface
-      (which --card aliases) and 3.01:1 on --muted, both under the 4.5 AA floor
-      for normal text, and this is the kit's universal secondary ink: every
-      TableHead column label (text-sm font-medium inside a text-sm Table),
-      every empty-state line, every form label through LABEL_VOICE_CLASS, every
-      MoneyText caption. An axe crawl of the br-sfn cockpit measured both pairs
-      on 2026-09-06; every console on this library inherited them.
-
-      80% is the smallest round step that clears both: 6.36:1 on
-      --container-surface and 4.68:1 on --muted. base/300 is the nearest scale
-      step that would also clear, but it is byte-identical to this theme's
-      --body-text, so adopting it would collapse the muted-versus-body step the
-      two tokens exist to express. Staying on the scale is worth less than
-      keeping that step, so the value leaves the scale instead.
-
-      That step is now thin, and the trade was made with eyes open: 80% sits at
-      L* 81 against --body-text at L* 85, so the two inks are 1.12:1 apart and
-      barely separable side by side. Legibility won because the weight is all
-      on one side: this token has 86 call sites and is read as prose on every
-      surface, while --body-text has one (an uppercase sidebar group label) plus
-      two derived theme keys. A reader who needs the step to be visible should
-      move --body-text, which is cheap to reposition, rather than push this one
-      back under the AA floor.
-
-      Repairs a fourth pair on the way: the disabled chip in autocomplete and
-      multiple-select paints text-muted on bg-muted-foreground, 3.01:1 before
-      and 4.68:1 now.
-    */
-    --muted-foreground: 240 5% 80%; /* between base/400 and base/300: #C9C9CF, AA on container-surface and muted */
-    --card: var(--container-surface);
-    --card-foreground: var(--container-text);
-    --popover: 240 4% 16%; /* base/800 = #27272A */
-    --popover-foreground: 240 5% 96%; /* base/100 = #F4F4F5 */
-    --border: 240 5% 34%; /* base/600 = #52525B */
-    --input: 240 4% 16%; /* base/800 = #27272A */
-    /* Held at base/400 rather than stepped down with the light theme: on the
-       dark field that is already only 5.8:1, and going lighter here means
-       darker, which would push the hint under the AA floor. */
-    --input-placeholder: 240 5% 80%; /* between base/400 and base/300: #C9C9CF, AA on card (6.3:1); base/400 read 4.07:1 there */
-    /* Held at base/400, which light had to leave: on this ground the two
-       directions disagree. base/400 reads 5.81:1 on --background and 4.08:1 on
-       --card here, while light's base/500 would read 2.16:1 on --card. */
-    --ring: 240 5% 65%; /* base/400 = #A1A1AA */
-    --primary: 240 5% 96%; /* base/100 = #F4F4F5 */
-    --primary-foreground: 240 4% 16%; /* base/800 = #27272A */
-    --secondary: 240 4% 16%; /* base/800 = #27272A */
-    --secondary-foreground: 240 5% 96%; /* base/100 = #F4F4F5 */
-
-    /* Shadcn — Accent (Brand Lerian) */
-    --accent: 46 98% 57%; /* sunglow/400 = #FDCB28 */
-    --accent-hover: 46 98% 57%; /* sunglow/400 = #FDCB28 - opacity via /70 */
-    --accent-mute: 46 98% 57%; /* sunglow/400 = #FDCB28 - opacity via /50 */
-
-    /*
-      Shadcn — Destructive. Lifted to red/400 like every other red in this
-      block (--system-error, --credit, --chart-2): the light red/500 inherited
-      here before, which left `text-destructive` at 2.76:1 on a --card surface
-      and `bg-destructive`/`text-destructive-foreground` at 3.78:1. The
-      foreground inverts to red/950 — the deep end this theme already uses as
-      --system-error-surface — so the pair reads 5.94:1.
-    */
-    --destructive: 0 91% 71%; /* red/400 = #F87171 */
-    --destructive-foreground: 0 75% 15%; /* red/950 = #450A0A */
-
-    /* Shadcn — System Error */
-    --system-error: 0 91% 71%; /* red/400 = #F87171 */
-    --system-error-surface: 0 75% 15%; /* red/950 = #450A0A */
-    --system-error-text: 0 94% 82%; /* red/300 = #FCA5A5 */
-    --system-error-h1a: 0 96% 89%; /* red/200 = #FECACA */
-    --system-error-border: 0 94% 82% / 0.3; /* #FCA5A5 30% */
-
-    /* Shadcn — System Success */
-    --system-success: 142 69% 58%; /* green/400 = #4ADE80 */
-    --system-success-surface: 145 80% 10%; /* green/950 = #052E16 */
-    --system-success-text: 142 77% 73%; /* green/300 = #86EFAC */
-    --system-success-h1a: 141 79% 85%; /* green/200 = #BBF7D0 */
-    --system-success-border: 142 69% 58% / 0.3; /* #4ADE80 30% */
-
-    /* Shadcn — System Info */
-    --system-info: 213 94% 68%; /* blue/400 = #60A5FA */
-    --system-info-surface: 226 57% 21%; /* blue/950 = #172554 */
-    --system-info-text: 212 96% 78%; /* blue/300 = #93C5FD */
-    --system-info-h1a: 213 97% 87%; /* blue/200 = #BFDBFE */
-    --system-info-border: 213 94% 68% / 0.3; /* #60A5FA 30% */
-
-    /* Shadcn — System Alert */
-    --system-alert: 48 96% 53%; /* yellow/400 = #FACC15 */
-    --system-alert-surface: 26 83% 14%; /* yellow/950 = #422006 */
-    --system-alert-text: 48 97% 77%; /* yellow/300 = #FDE68A */
-    --system-alert-h1a: 53 98% 77%; /* yellow/200 = #FEF08A */
-    --system-alert-border: 48 96% 53% / 0.3; /* #FACC15 30% */
-
-    /* Shadcn — System Purple */
-    --system-purple: 270 95% 75%; /* purple/400 = #C084FC */
-    --system-purple-surface: 266 86% 13%; /* purple/950 = #3B0764 */
-    --system-purple-text: 269 97% 85%; /* purple/300 = #D8B4FE */
-    --system-purple-h1a: 269 100% 92%; /* purple/200 = #E9D5FF */
-    --system-purple-border: 270 95% 75% / 0.3; /* #C084FC 30% */
-
-    /* Shadow color for dark mode */
-    --shadow-color: 0 0% 100%;
-
-    /*
-      Ledger credit semantic — lifted for the dark canvas; foreground mirrors.
-      Sized by the composite the mirror actually produces, not by the plain
-      pair: components write `bg-credit/10` + `text-credit`, so the real
-      measurement is credit-as-text over a 10% credit tint composited on
-      --card. red/400 read only 3.34:1 there. red/300 — the channel this block
-      already uses for --system-error-text — reaches 4.59:1, and 5.54:1 as
-      plain text on --card.
-
-      Credit stays one step further from the canvas than --destructive
-      (red/400 here), the way light keeps credit at red/700 against a red/500
-      destructive: on a dark ground "further from the canvas" means lighter,
-      so the direction inverts but the separation holds and the two never read
-      as the same signal.
-    */
-    --credit: 0 94% 82%; /* red/300 = #FCA5A5 */
-    --credit-foreground: 0 94% 82%; /* mirrors --credit */
-
-    /* Reconciliation matte fills — raised surfaces over base/800, one step apart. */
-    --matched-surface: 240 5% 26%; /* base/700 = #3F3F46 */
-    --unmatched-surface: 240 5% 34%; /* base/600 = #52525B */
-
-    /* Chart series palette — same families, lifted for the dark canvas. */
-    --chart-1: 143 53% 58%; /* de-york-400 = #5BCD86 */
-    --chart-2: 0 91% 71%; /* red/400 = #F87171 */
-    --chart-3: 46 98% 57%; /* sunglow-400 = #FDCB28 */
-    --chart-4: 213 94% 68%; /* blue/400 = #60A5FA */
-    --chart-5: 329 86% 70%; /* pink/400 = #F472B6 */
-    --chart-6: 188 86% 53%; /* cyan/400 = #22D3EE */
-    --chart-7: 270 95% 75%; /* purple/400 = #C084FC */
-    --chart-8: 351 9% 69%; /* cod-gray-300 = #B7A9AB */
-  }
-}
-
-/* Sonner toast overrides — solid bold backgrounds (Radix parity) */
+/* Sonner toast overrides — tinted surfaces from the system token families */
 [data-sonner-toaster] {
   --width: 420px;
   pointer-events: auto !important;
@@ -559,41 +235,41 @@
 }
 
 /*
-  Type fills come from the system token families, so a toast themes with the
-  rest of the app. All three coloured types take ONE ink, --accent-foreground:
-  a solid system fill is bright enough to need near-black ink in BOTH themes,
-  and that token is the only one in this sheet that is near-black in both.
-
-  It replaced the per-family reasoning that stood here, which routed success
-  and error through --primary-foreground because that token inverts (white in
-  light, base/800 in dark). Inverting was the bug: white ink on the LIGHT
-  fills measured 3.35:1 on --system-success and 3.78:1 on --system-error,
-  both under AA, and no token value can fix that from the white side — the
-  light green/600 and red/500 fills sit mid-luminance, so white caps at ~3.8
-  while near-black reaches 5.9 and 5.3. Ratios now, ink over fill:
-  light 5.93 / 5.25 / 11.17 and dark 11.39 / 7.23 / 13.00
-  (success / error / warning). The dark pairs were already passing at
-  8.51 / 5.41 / 13.00 and only gained. `toast ink` in
-  src/__tests__/tokens-contract.test.ts recomputes all six from these
-  declarations, so the next token edit that drops a pair under 4.5 fails
-  instead of shipping.
+  Each coloured type paints the `surface` + `text` + `border` trio of its own
+  family — the pairing every other tinted component in the kit already uses
+  (`components/ui/badge/index.tsx`, `enterprise/alert-banner/index.tsx`).
+  `surface` is the only slot in a system family built to sit BEHIND content: it
+  darkens on the dark canvas, while `base` and `h1a` are fill and ink slots
+  that INVERT between themes (`--system-success-h1a` is #166534 in light and
+  #BBF7D0 in dark). Grounding toast text on either of those forces a different
+  ink per theme, and the toast stops tracking the family it names.
+
+  Ink over ground, light / dark: success 6.81 / 10.62, error 7.60 / 8.51,
+  warning 6.62 / 11.70 — every half clear of the 4.5 floor by more than two
+  points. `system text tokens` in `src/__tests__/tokens-contract.test.ts`
+  already measures this pair for all five families, so the toast is covered by
+  the gate that guards the pills rather than by a rule written for it alone;
+  `sonner toast ink` there reads whichever pair these rules declare.
+
+  `info` stays neutral on `--card`: an informational toast is the unstyled
+  case, not a fourth colour.
 */
 [data-sonner-toast][data-type='success'] {
-  --normal-bg: hsl(var(--system-success));
-  --normal-text: hsl(var(--accent-foreground));
-  --normal-border: transparent;
+  --normal-bg: hsl(var(--system-success-surface));
+  --normal-text: hsl(var(--system-success-text));
+  --normal-border: hsl(var(--system-success-border));
 }
 
 [data-sonner-toast][data-type='error'] {
-  --normal-bg: hsl(var(--system-error));
-  --normal-text: hsl(var(--accent-foreground));
-  --normal-border: transparent;
+  --normal-bg: hsl(var(--system-error-surface));
+  --normal-text: hsl(var(--system-error-text));
+  --normal-border: hsl(var(--system-error-border));
 }
 
 [data-sonner-toast][data-type='warning'] {
-  --normal-bg: hsl(var(--system-alert));
-  --normal-text: hsl(var(--accent-foreground));
-  --normal-border: transparent;
+  --normal-bg: hsl(var(--system-alert-surface));
+  --normal-text: hsl(var(--system-alert-text));
+  --normal-border: hsl(var(--system-alert-border));
 }
 
 [data-sonner-toast][data-type='info'] {
@@ -602,8 +278,32 @@
   --normal-border: hsl(var(--border));
 }
 
-[data-sonner-toast] [data-title] {
-  font-weight: 600;
+/*
+  The title outranks the description, and both rules have to WIN the cascade
+  for that to mean anything. Sonner ships
+  `[data-sonner-toast][data-styled='true'] [data-title]` at font-weight 500 and
+  its description twin at 400 — both (0,3,0), both injected at runtime.
+  The title rule here was a plain `[data-sonner-toast] [data-title]` (0,2,0):
+  it declared 600 and rendered at 500, losing outright, while the description
+  carried `!important` and rendered at 600. The hierarchy came out inverted on
+  every toast in the kit, the long line heavier than the label naming it.
+
+  Both now take the compound selector plus !important — the shape the
+  close-button rules below already use against this same stylesheet, and for
+  the same reason: source order cannot settle a tie with a sheet that is
+  injected at runtime.
+
+  The description returns to 400. It is the running text of a toast, and 14px
+  semibold across a full sentence reads as emphasis with nothing left to
+  emphasise; the family ink already carries the severity. Its `color` override
+  keeps !important on its own merits — sonner hardcodes #3f3f3f there, plus a
+  dark-theme rule of its own on top.
+
+  `toast text weights` in src/__tests__/tokens-contract.test.ts holds the order
+  and the two properties that let it apply.
+*/
+[data-sonner-toast][data-styled='true'] [data-title] {
+  font-weight: 600 !important;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
@@ -611,7 +311,7 @@
 [data-sonner-toast] [data-description],
 [data-sonner-toast][data-styled='true'] [data-description] {
   font-size: 0.875rem;
-  font-weight: 600 !important;
+  font-weight: 400 !important;
   line-height: 1.25rem;
   color: var(--normal-text) !important;
 }

package/dist/hooks/use-toast.d.ts

@@ -1,4 +1,10 @@
 import type { ToastActionElement } from '../components/ui/toast';
+/**
+ * Lifetime of every non-destructive toast, and the `<Toaster />` fallback for
+ * anything raised without one. The two must not drift apart, so the Toaster
+ * imports this rather than repeating the literal.
+ */
+export declare const DEFAULT_DURATION = 10000;
 type ToastVariant = 'default' | 'success' | 'warning' | 'destructive';
 type ToasterToast = {
     id: string | number;
@@ -6,9 +12,19 @@ type ToasterToast = {
     description?: React.ReactNode;
     variant?: ToastVariant;
     action?: ToastActionElement;
+    /**
+     * Auto-dismiss delay in ms, which must be greater than 0: sonner resolves it
+     * as `toast.duration || toasterDuration || default`, so `0` reads as unset
+     * and the toast silently takes the `<Toaster />` default instead of closing
+     * at once. Omit it to take the variant's own lifetime: `destructive` stays
+     * until dismissed, every other variant closes after 10s.
+     */
+    duration?: number;
+};
+type Toast = Omit<ToasterToast, 'id'> & {
+    id?: ToasterToast['id'];
 };
-type Toast = Omit<ToasterToast, 'id'>;
-declare function toast({ title, description, variant, ...rest }: Toast): {
+declare function toast({ title, description, variant, duration, id, ...rest }: Toast): {
     id: string | number;
     dismiss: () => string | number;
     update: (props: Partial<ToasterToast>) => void;

package/dist/hooks/use-toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-toast.d.ts","sourceRoot":"","sources":["../../src/hooks/use-toast.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAI/D,KAAK,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAA;AAErE,KAAK,YAAY,GAAG;IAClB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAC5B,CAAA;AAED,KAAK,KAAK,GAAG,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,CAAA;AAErC,iBAAS,KAAK,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK;;;oBA+B1C,OAAO,CAAC,YAAY,CAAC;EAQxC;AAED;;;;;;;GAOG;AACH,iBAAS,QAAQ;;wBAGO,MAAM,GAAG,MAAM;YAOrB,YAAY,EAAE;EAE/B;AAED,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAA;AAC1B,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"use-toast.d.ts","sourceRoot":"","sources":["../../src/hooks/use-toast.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE/D;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,QAAQ,CAAA;AAerC,KAAK,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAA;AAErE,KAAK,YAAY,GAAG;IAClB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,KAAK,KAAK,GAAG,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,GAAG;IAAE,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,CAAA;AAiCnE,iBAAS,KAAK,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK;;;oBAsCxD,OAAO,CAAC,YAAY,CAAC;EASxC;AAED;;;;;;;GAOG;AACH,iBAAS,QAAQ;;wBAGO,MAAM,GAAG,MAAM;YAOrB,YAAY,EAAE;EAE/B;AAED,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAA;AAC1B,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,CAAA"}

package/dist/hooks/use-toast.js

@@ -1,43 +1,88 @@
 'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_DURATION = void 0;
 exports.useToast = useToast;
 exports.toast = toast;
 const sonner_1 = require("sonner");
-const DEFAULT_DURATION = 10000;
-function toast({ title, description, variant, ...rest }) {
+/**
+ * Lifetime of every non-destructive toast, and the `<Toaster />` fallback for
+ * anything raised without one. The two must not drift apart, so the Toaster
+ * imports this rather than repeating the literal.
+ */
+exports.DEFAULT_DURATION = 10000;
+/**
+ * A destructive toast reports something the operator has to read -- a refused
+ * money operation, a failed copy of a show-once secret, a language switch that
+ * did not take. It stays up until dismissed instead of auto-closing.
+ *
+ * `Infinity` is how sonner disables the auto-close timer (it short-circuits the
+ * timer effect rather than calling `setTimeout(fn, Infinity)`, which would fire
+ * immediately). `<Toaster />` already passes `closeButton`, and sonner gates the
+ * close button on that flag alone, never on the duration -- so a persistent
+ * toast still renders its dismiss affordance.
+ */
+const PERSIST_UNTIL_DISMISSED = Infinity;
+const isPlainText = (value) => value === undefined || typeof value === 'string';
+/**
+ * Two identical errors share one toast instead of stacking: same variant, same
+ * text -- same id, and sonner updates the one already on screen.
+ *
+ * Unbounded stacking is worse for a persistent toast than for a transient one.
+ * `<Toaster />` shows three at a time and renders the rest `opacity: 0;
+ * pointer-events: none`, so a fourth error nobody can read is also a fourth
+ * error nobody can close -- and without an auto-dismiss, nothing ahead of it
+ * clears on its own.
+ *
+ * Only plain-text toasts collapse. A `ReactNode` has no stable key and
+ * `String(node)` would fold unrelated errors onto one id.
+ *
+ * ponytail: the ceiling is still three. Distinct persistent errors past the
+ * third queue behind the front three until one is dismissed; lifting that means
+ * raising `visibleToasts`, not more work here.
+ */
+function collapseKey(title, description) {
+    if (!isPlainText(title) || !isPlainText(description)) {
+        return undefined;
+    }
+    return `destructive:${JSON.stringify([title ?? null, description ?? null])}`;
+}
+function toast({ title, description, variant, duration, id, ...rest }) {
     const message = title ?? '';
+    const toastId = variant === 'destructive' && id === undefined
+        ? collapseKey(title, description)
+        : id;
     const options = {
         description,
-        ...rest
+        ...rest,
+        ...(toastId !== undefined && { id: toastId }),
+        duration: duration ??
+            (variant === 'destructive' ? PERSIST_UNTIL_DISMISSED : exports.DEFAULT_DURATION)
     };
-    let id;
+    let raisedId;
     switch (variant) {
         case 'success':
-            options.duration = DEFAULT_DURATION;
-            id = sonner_1.toast.success(message, options);
+            raisedId = sonner_1.toast.success(message, options);
             break;
         case 'warning':
-            options.duration = DEFAULT_DURATION;
-            id = sonner_1.toast.warning(message, options);
+            raisedId = sonner_1.toast.warning(message, options);
             break;
         case 'destructive':
-            options.duration = DEFAULT_DURATION;
-            id = sonner_1.toast.error(message, options);
+            raisedId = sonner_1.toast.error(message, options);
             break;
         default:
-            options.duration = DEFAULT_DURATION;
-            id = (0, sonner_1.toast)(message, options);
+            raisedId = (0, sonner_1.toast)(message, options);
             break;
     }
     return {
-        id,
-        dismiss: () => sonner_1.toast.dismiss(id),
+        id: raisedId,
+        dismiss: () => sonner_1.toast.dismiss(raisedId),
         update: (props) => {
             (0, sonner_1.toast)(props.title ?? message, {
-                id,
+                ...rest,
+                id: raisedId,
                 description: props.description ?? description,
-                ...rest
+                duration: props.duration ?? options.duration
             });
         }
     };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/ui/alert';
 export * from './components/ui/autocomplete';
+export * from './hooks/use-click-away';
 export * from './components/ui/autosize-textarea';
 export * from './components/ui/avatar';
 export * from './components/ui/badge';
@@ -17,6 +18,7 @@ export * from './components/ui/dropdown-menu';
 export * from './components/ui/input';
 export * from './components/ui/otp-input';
 export * from './components/ui/label';
+export * from './components/ui/lerian-wordmark';
 export * from './components/ui/loading-button';
 export * from './components/ui/multiple-select';
 export * from './components/ui/paper';
@@ -39,6 +41,7 @@ export * from './components/ui/toast';
 export * from './components/ui/toast/toaster';
 export * from './hooks/use-toast';
 export * from './components/ui/time-picker';
+export * from './hooks/use-time';
 export * from './components/ui/tooltip';
 export * from './components/ui/form';
 export { Breadcrumb as ApplicationBreadcrumb } from './components/breadcrumb';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAGA,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,mCAAmC,CAAA;AACjD,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AAGpC,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC7E,cAAc,8CAA8C,CAAA;AAC5D,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAGlC,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AAGxB,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAG5C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAChC,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAGA,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,mCAAmC,CAAA;AACjD,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AAGpC,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC7E,cAAc,8CAA8C,CAAA;AAC5D,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAGlC,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AAGxB,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAG5C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAChC,cAAc,kBAAkB,CAAA"}