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

package/dist/index.js

@@ -19,6 +19,7 @@ exports.cn = exports.ApplicationBreadcrumb = void 0;
 // Primitives
 __exportStar(require("./components/ui/alert"), exports);
 __exportStar(require("./components/ui/autocomplete"), exports);
+__exportStar(require("./hooks/use-click-away"), exports);
 __exportStar(require("./components/ui/autosize-textarea"), exports);
 __exportStar(require("./components/ui/avatar"), exports);
 __exportStar(require("./components/ui/badge"), exports);
@@ -36,6 +37,7 @@ __exportStar(require("./components/ui/dropdown-menu"), exports);
 __exportStar(require("./components/ui/input"), exports);
 __exportStar(require("./components/ui/otp-input"), exports);
 __exportStar(require("./components/ui/label"), exports);
+__exportStar(require("./components/ui/lerian-wordmark"), exports);
 __exportStar(require("./components/ui/loading-button"), exports);
 __exportStar(require("./components/ui/multiple-select"), exports);
 __exportStar(require("./components/ui/paper"), exports);
@@ -58,6 +60,7 @@ __exportStar(require("./components/ui/toast"), exports);
 __exportStar(require("./components/ui/toast/toaster"), exports);
 __exportStar(require("./hooks/use-toast"), exports);
 __exportStar(require("./components/ui/time-picker"), exports);
+__exportStar(require("./hooks/use-time"), exports);
 __exportStar(require("./components/ui/tooltip"), exports);
 __exportStar(require("./components/ui/form"), exports);
 // Components

package/dist/lib/utils.d.ts

@@ -1,3 +1,5 @@
 import { type ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
+/** Wraps a Radix `onInteractOutside` so a press on a toast never dismisses the layer under it. */
+export declare function keepOpenOnToast<E extends Event>(onInteractOutside?: (event: E) => void): (event: E) => void;
 //# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AA8B5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AA8B5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,kGAAkG;AAClG,wBAAgB,eAAe,CAAC,CAAC,SAAS,KAAK,EAC7C,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,IAE9B,OAAO,CAAC,UASjB"}

package/dist/lib/utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cn = cn;
+exports.keepOpenOnToast = keepOpenOnToast;
 const clsx_1 = require("clsx");
 const tailwind_merge_1 = require("tailwind-merge");
 /**
@@ -32,3 +33,13 @@ const twMerge = (0, tailwind_merge_1.extendTailwindMerge)({
 function cn(...inputs) {
     return twMerge((0, clsx_1.clsx)(inputs));
 }
+/** Wraps a Radix `onInteractOutside` so a press on a toast never dismisses the layer under it. */
+function keepOpenOnToast(onInteractOutside) {
+    return (event) => {
+        if (event.target?.closest('[data-sonner-toaster]')) {
+            event.preventDefault();
+            return;
+        }
+        onInteractOutside?.(event);
+    };
+}

package/dist/public/wordmark.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1090.88 280" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M619.42,29.69c0,15.43-10.87,27.93-27.93,27.93s-27.93-12.51-27.93-27.93,10.86-27.93,27.92-27.93,27.93,12.51,27.93,27.93h0ZM158.64,242.4v33.54H12.13v-33.55h48.36c3.16,0,5.73-2.57,5.73-5.73V87.77c0-3.16-2.57-5.73-5.73-5.73H7.85v-34.31h98.33v188.94c0,3.16,2.57,5.73,5.73,5.73h46.74ZM168.85,179.86c0,58.52,37.29,98.33,99.47,98.33,49.15,0,79.7-30.6,86.27-67.08h-40.69c-6.29,24.54-26.97,33.91-48.61,33.91-48.85,0-53.41-45.18-53.83-55-.04-1.02.77-1.87,1.79-1.87h143.61c.76-5.26,1.13-10.42,1.13-15.44,0-32.71-20.25-91.92-95.33-91.92-57.04,0-93.8,41.26-93.81,99.07ZM314.47,158.39l-99.49.02c-1.08,0-1.94-.96-1.78-2.02,4.49-31.28,30.98-42.82,50.98-42.82,33.88,0,48.71,21.59,52.08,42.79.17,1.08-.69,2.04-1.78,2.04h0ZM867.2,83.16h0s0,0,0,0h0ZM826.87,83.16h40.33v192.83h-40.32v-24.53c0-3.09-3.92-4.41-5.79-1.95-.18.23-.35.47-.53.71h0s0,.02,0,.02h0c-.11.16-.23.32-.35.47-7.92,10.56-20.68,27.53-56.24,27.53-60.83,0-91.19-46.33-91.19-98.7,0-61.42,40.37-98.72,91.17-98.72,36.73,0,48.44,15.73,56.64,26.75l.49.66c1.86,2.49,5.81,1.18,5.81-1.93v-23.14ZM770.75,115.48c34.78,0,56.14,27.81,56.14,64.8h0c0,42-26.32,63.68-56.14,63.68-34.83,0-56.14-27.43-56.14-64.43,0-42.07,26.11-64.05,56.14-64.05ZM1063.39,101.7c14.42,14.06,21.64,36.67,21.64,67.8v106.25h-41.06v-103.99c0-43.98-22.35-56.14-45.96-56.14-31.99,0-51.6,23.22-51.6,62.92v97.21h-40.68V83.15h39.93v25.07c0,3.11,3.95,4.4,5.82,1.92,8.55-11.4,26.72-29.52,55.98-29.52,37.55,0,55.75,20.88,55.93,21.08ZM657.42,275.94v-33.54h0s-37.37,0-37.37,0c-3.16,0-5.73-2.57-5.73-5.73V83.14h-81.34v34.31h37.54c3.16,0,5.73,2.57,5.73,5.73v113.48c0,3.16-2.57,5.73-5.73,5.73h-38.14v33.55h125.03ZM499.27,119.27c0,.13-.1.23-.23.23h0s-36.31,0-36.31,0c-28.68,0-28.65,24.99-28.64,43.62,0,.46,0,.92,0,1.37v111.24c0,.13-.1.23-.23.23h-41.01c-.13,0-.23-.1-.23-.23V83.27c0-.13.1-.23.23-.23h36.49c.13,0,.23.1.23.23v24.03c0,4.05,5.24,5.65,7.49,2.28.22-.32.43-.64.65-.97,8.18-12.25,18.71-28.02,52.51-28.02h9.05v38.68Z"/></svg>

package/dist/standalone.css

@@ -0,0 +1,10 @@
+/* One-link entry for pages without React or Tailwind. Light is :root; dark is
+   class="dark" on <html>, set by the page. No element reset. */
+@import './fonts.css';
+@import './tokens.css';
+
+html {
+  font-family: var(--font-stack-sans);
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+}

package/dist/toast/helpers.d.ts

@@ -1,6 +1,12 @@
 import type { ToastActionElement } from '../components/ui/toast';
 /** Extra toast props for the severity helpers (the variant is fixed per helper). */
 export interface ToastOptions {
+    /**
+     * Caller-controlled toast identity. A repeat under the same id updates the
+     * toast in place instead of stacking a second one; omit it and a destructive
+     * toast derives its own from the title and description.
+     */
+    id?: string | number;
     /** Optional action element rendered inside the toast. */
     action?: ToastActionElement;
     /**
@@ -9,6 +15,13 @@ export interface ToastOptions {
      * it, so it is not rendered. Put it in `description` if it must be visible.
      */
     errorCode?: string;
+    /**
+     * Auto-dismiss delay in ms, overriding the variant's own lifetime for this
+     * one call. Must be greater than 0 -- sonner reads `0` as unset and falls
+     * back to the `<Toaster />` default. Omit it and `errorToast` stays until
+     * dismissed while `successToast` and `warningToast` close after 10s.
+     */
+    duration?: number;
 }
 export declare function successToast(title: string, description?: string, opts?: Partial<ToastOptions>): void;
 export declare function errorToast(title: string, description?: string, opts?: Partial<ToastOptions>): void;

package/dist/toast/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/toast/helpers.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE/D,oFAAoF;AACpF,MAAM,WAAW,YAAY;IAC3B,yDAAyD;IACzD,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAWD,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAC3B,IAAI,CAEN;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAC3B,IAAI,CAEN;AAED,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAC3B,IAAI,CAEN"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/toast/helpers.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE/D,oFAAoF;AACpF,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,yDAAyD;IACzD,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAkBD,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAC3B,IAAI,CAEN;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAC3B,IAAI,CAEN;AAED,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAC3B,IAAI,CAEN"}

package/dist/toast/helpers.js

@@ -21,7 +21,14 @@ exports.warningToast = warningToast;
  */
 const use_toast_1 = require("../hooks/use-toast");
 function raise(variant, title, description, opts) {
-    (0, use_toast_1.toast)({ action: opts?.action, variant, title, description });
+    (0, use_toast_1.toast)({
+        action: opts?.action,
+        variant,
+        title,
+        description,
+        duration: opts?.duration,
+        id: opts?.id
+    });
 }
 function successToast(title, description, opts) {
     raise('success', title, description, opts);

package/dist/tokens.css

@@ -0,0 +1,367 @@
+@layer base {
+  :root {
+    color-scheme: light; /* native widgets (form controls, scrollbars) follow the theme */
+
+    /*
+      Sidebar geometry. These were literals inside SidebarRoot's cva
+      (`w-[244px]` / `w-[72px]`), which a consumer could only override by
+      winning a specificity argument with `cn`. As custom properties the
+      default still ships with this sheet.
+
+      TWO places to re-point them, and only these two:
+        - on the rail, via `className="[--sidebar-width:280px]"`. SidebarRoot
+          copies exactly these two arbitrary-property classes onto the mobile
+          drawer's own element, so one class moves the rail AND the drawer.
+        - on `:root` or `html`, which every layout inherits from.
+
+      NOT on a React-tree wrapper above the rail: that reaches the rail, but
+      the mobile drawer is portalled into document.body, and custom properties
+      inherit down the DOM tree. A wrapper is not an ancestor of the portal;
+      `:root` is.
+
+      They are theme-independent on purpose: a rail is not wider in the dark.
+    */
+    --sidebar-width: 244px;
+    --sidebar-width-collapsed: 72px;
+
+    /* 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 */
+    /* Field boundary, held to the 3:1 non-text floor (SC 1.4.11) on every ground a
+       field sits on. base/400 read 2.56:1 on white and 2.34:1 on --body-surface. */
+    --input-border: 240 4% 46%; /* base/500 = #71717A, 4.86:1 on white, 4.43:1 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 */
+
+    /* Plain-CSS twins of the @theme font slots in globals.css, for pages without
+       Tailwind; each must equal its --font-* value there. */
+    --font-stack-sans:
+      var(--font-inter, 'Inter'), 'Inter', ui-sans-serif, system-ui, sans-serif;
+    --font-stack-serif:
+      var(--font-plex-serif, ui-serif), ui-serif, Georgia, Cambria,
+      'Times New Roman', Times, serif;
+    --font-stack-mono:
+      var(--font-plex-mono, ui-monospace), ui-monospace, SFMono-Regular, Menlo,
+      Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  }
+
+  .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 */
+    --input-border: 240 5% 65%; /* base/400 = #A1A1AA, 4.09:1 on card; light's base/500 reads 2.15: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 */
+  }
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.21",
   "description": "Sindarian UI - A UI library for Midaz Console",
-  "license": "ISC",
+  "license": "Elastic-2.0",
   "author": {
     "name": "Lerian Studio",
     "email": "contato@lerian.studio",
@@ -41,14 +41,17 @@
     "build": "npm run build:cjs && npm run build:esm && npm run copy:assets && npm run copy:styles",
     "build:cjs": "tsc && tsc-alias -p tsconfig.json && copyfiles -u 1 \"src/**/*.cjs\" \"src/**/*.d.cts\" \"src/**/*.json\" dist",
     "build:esm": "tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json --resolve-full-paths && copyfiles -u 1 \"src/**/*.cjs\" \"src/**/*.d.cts\" \"src/**/*.json\" dist/esm && node -e \"require('fs').writeFileSync('dist/esm/package.json',JSON.stringify({type:'module'}))\" && node scripts/check-esm-output.mjs",
-    "copy:assets": "copyfiles -f src/public/**/* dist/public",
-    "copy:styles": "copyfiles -u 1 src/**/*.css dist",
-    "lint": "eslint . --fix",
+    "copy:assets": "copyfiles -f \"src/public/**/*\" dist/public && copyfiles -u 1 \"src/fonts/*\" dist",
+    "copy:styles": "copyfiles -u 1 \"src/**/*.css\" dist",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build",
     "test": "jest",
     "test:e2e": "exit 0",
-    "test:cov": "jest --coverage"
+    "test:cov": "jest --coverage",
+    "measure:input-shrink": "node scripts/measure-input-shrink.mjs",
+    "measure:phone-shapes": "node scripts/measure-phone-shapes.mjs"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.20",