@lerianstudio/sindarian-ui 2.0.0-beta.1 → 2.0.0-beta.11

package/dist/esm/enterprise/number-input/index.js

@@ -210,5 +210,5 @@ export function NumberInput({ value, onValueChange, min, max, step = 1, precisio
     };
     const atMin = typeof min === 'number' && value !== null && value <= min;
     const atMax = typeof max === 'number' && value !== null && value >= max;
-    return (_jsxs("div", { className: cn('inline-flex items-stretch gap-1', className), children: [_jsx(IconButton, { type: "button", variant: "outline", disabled: disabled || atMin, "aria-label": `Decrease${ariaLabel ? ` ${ariaLabel}` : ''}`, onClick: () => stepBy(-1), tabIndex: -1, children: _jsx(Minus, { className: "size-4", "aria-hidden": true }) }), _jsx("div", { className: "w-28", children: _jsx(Input, { id: id, inputMode: "decimal", role: "spinbutton", "aria-valuenow": value ?? undefined, "aria-valuemin": min, "aria-valuemax": max, className: "text-right tabular-nums", value: displayValue, placeholder: placeholder, disabled: disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur }) }), _jsx(IconButton, { type: "button", variant: "outline", disabled: disabled || atMax, "aria-label": `Increase${ariaLabel ? ` ${ariaLabel}` : ''}`, onClick: () => stepBy(1), tabIndex: -1, children: _jsx(Plus, { className: "size-4", "aria-hidden": true }) })] }));
+    return (_jsxs("div", { className: cn('inline-flex items-stretch gap-1', className), children: [_jsx(IconButton, { className: "shrink-0", type: "button", variant: "outline", disabled: disabled || atMin, "aria-label": `Decrease${ariaLabel ? ` ${ariaLabel}` : ''}`, onClick: () => stepBy(-1), tabIndex: -1, children: _jsx(Minus, { className: "size-4", "aria-hidden": true }) }), _jsx("div", { className: "w-28 min-w-0", children: _jsx(Input, { id: id, inputMode: "decimal", role: "spinbutton", "aria-valuenow": value ?? undefined, "aria-valuemin": min, "aria-valuemax": max, className: "text-right tabular-nums", value: displayValue, placeholder: placeholder, disabled: disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur }) }), _jsx(IconButton, { className: "shrink-0", type: "button", variant: "outline", disabled: disabled || atMax, "aria-label": `Increase${ariaLabel ? ` ${ariaLabel}` : ''}`, onClick: () => stepBy(1), tabIndex: -1, children: _jsx(Plus, { className: "size-4", "aria-hidden": true }) })] }));
 }

package/dist/globals.css

@@ -214,6 +214,28 @@
   :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 */
     /*
@@ -541,7 +563,7 @@
   }
 }
 
-/* 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 +581,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 +624,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 +657,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.11",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {
@@ -43,12 +43,14 @@
     "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",
+    "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"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.20",