@lerianstudio/sindarian-ui 1.3.0-beta.2 → 1.3.0-beta.4

package/dist/esm/domain/delinquency-aging/aging-buckets.js

@@ -84,7 +84,7 @@ export function sumBucketTotals(buckets, scale) {
     const total = sumMinor(buckets.map((b) => b.total), scale);
     return total === null ? null : minorToDecimal(total, scale);
 }
-export function AgingBuckets({ buckets, currency, locale, showTotal = false, labels, className }) {
+export function AgingBuckets({ buckets, currency, locale, showTotal = false, labels, healthyTone = 'success', className }) {
     const countLabel = labels?.count ?? 'Itens';
     const totalLabel = labels?.total ?? 'Total';
     const grandTotalLabel = labels?.grandTotal ?? 'Total geral';
@@ -97,7 +97,12 @@ export function AgingBuckets({ buckets, currency, locale, showTotal = false, lab
     const grandTotal = showTotal ? sumBucketTotals(buckets, scale) : null;
     return (_jsxs("div", { className: cn('flex flex-col', className), children: [_jsx("ul", { className: "flex flex-col", children: buckets.map((bucket, i) => {
                     const band = bucketBand(i, buckets.length);
-                    const { Icon, tint, word } = BAND[band];
+                    const { Icon, word } = BAND[band];
+                    // `ink` retones ONLY the healthy band — the escalated bands keep their
+                    // alert and credit-red tints, which are the whole point of the scale.
+                    const tint = healthyTone === 'ink' && band === 'current'
+                        ? 'text-foreground'
+                        : BAND[band].tint;
                     // Shallow merge: an unlisted band keeps its pt-BR default.
                     const bandWord = labels?.bands?.[band] ?? word;
                     return (_jsxs("li", { className: "border-border flex items-center gap-3 border-b py-2.5 last:border-b-0", children: [_jsx(Icon, { "aria-hidden": true, className: cn('size-4 shrink-0', tint) }), _jsxs("span", { className: "sr-only", children: [bandWord, ": "] }), _jsx("span", { className: cn(LABEL_VOICE_CLASS, 'text-foreground min-w-0 flex-1 tracking-normal normal-case'), children: bucket.label }), _jsxs("span", { className: "flex shrink-0 flex-col items-end leading-none", children: [_jsx(Figure, { size: "row", className: "text-foreground", children: formatCount(bucket.count, locale) }), _jsx("span", { className: cn(LABEL_VOICE_CLASS, 'mt-1'), children: countLabel })] }), _jsxs("span", { className: "flex w-32 shrink-0 flex-col items-end leading-none sm:w-40", children: [_jsx(Figure, { size: "row", className: cn(band === 'overdue' && 'text-credit'), children: _jsx(MoneyText, { amount: bucket.total, currency: currency, fractionDigits: scale, locale: locale, signColor: false }) }), _jsx("span", { className: cn(LABEL_VOICE_CLASS, 'mt-1'), children: totalLabel })] })] }, `${bucket.label}-${i}`));

package/dist/esm/domain/delinquency-aging/index.d.ts

@@ -65,7 +65,17 @@ export interface DelinquencyAgingProps {
     breach?: number;
     /** Render the money-math-exact grand total row under the distribution. */
     showTotal?: boolean;
+    /**
+     * Tint of the healthy band — the low delinquency rate AND the `current`
+     * aging bucket. `'success'` (default) is the ambient green; `'ink'` retones
+     * both to `text-foreground`, which is the Ledger canon for a healthy-but-
+     * nonzero book: green reads as "achievement", and a book merely not in
+     * arrears has achieved nothing. Scoped to the healthy band only — elevated,
+     * distressed and overdue keep their alert and credit-red tints, since the
+     * glyph + sr-only word (not the tint) are the load-bearing cue either way.
+     */
+    healthyTone?: 'success' | 'ink';
     className?: string;
 }
-export declare function DelinquencyAging({ buckets, currency, locale, rateLabel, rateBandLabels, emptyLabel, indeterminateLabel, bucketLabels, warn, breach, showTotal, className }: DelinquencyAgingProps): import("react").JSX.Element;
+export declare function DelinquencyAging({ buckets, currency, locale, rateLabel, rateBandLabels, emptyLabel, indeterminateLabel, bucketLabels, warn, breach, showTotal, healthyTone, className }: DelinquencyAgingProps): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/domain/delinquency-aging/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/domain/delinquency-aging/index.tsx"],"names":[],"mappings":"AAoDA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAKtE,YAAY,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAOpE;;wEAEwE;AACxE,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;oEACoE;AACpE,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,iFAAiF;IACjF,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,6EAA6E;IAC7E,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB;;0EAEsE;IACtE,aAAa,EAAE,OAAO,CAAA;CACvB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,iBAAiB,EAAE,EAC5B,KAAK,EAAE,MAAM,GACZ,eAAe,CAuDjB;AAoFD,MAAM,WAAW,qBAAqB;IACpC;yEACqE;IACrE,OAAO,EAAE,iBAAiB,EAAE,CAAA;IAC5B,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;sBAGkB;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAA;IACnD,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,+EAA+E;IAC/E,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;oBAEgB;IAChB,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC;;;mDAG+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;yEACqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAA2B,EAC3B,cAAc,EACd,UAA2B,EAC3B,kBAAoC,EACpC,YAAY,EACZ,IAAW,EACX,MAAY,EACZ,SAAiB,EACjB,SAAS,EACV,EAAE,qBAAqB,+BAyEvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/domain/delinquency-aging/index.tsx"],"names":[],"mappings":"AAoDA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAKtE,YAAY,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAOpE;;wEAEwE;AACxE,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;oEACoE;AACpE,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,iFAAiF;IACjF,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,6EAA6E;IAC7E,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB;;0EAEsE;IACtE,aAAa,EAAE,OAAO,CAAA;CACvB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,iBAAiB,EAAE,EAC5B,KAAK,EAAE,MAAM,GACZ,eAAe,CAuDjB;AAoFD,MAAM,WAAW,qBAAqB;IACpC;yEACqE;IACrE,OAAO,EAAE,iBAAiB,EAAE,CAAA;IAC5B,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;sBAGkB;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAA;IACnD,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,+EAA+E;IAC/E,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;oBAEgB;IAChB,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC;;;mDAG+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;yEACqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,KAAK,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAA2B,EAC3B,cAAc,EACd,UAA2B,EAC3B,kBAAoC,EACpC,YAAY,EACZ,IAAW,EACX,MAAY,EACZ,SAAiB,EACjB,WAAuB,EACvB,SAAS,EACV,EAAE,qBAAqB,+BA+EvB"}

package/dist/esm/domain/delinquency-aging/index.js

@@ -184,7 +184,7 @@ const RATE_BAND = {
     warn: { Icon: TriangleAlert, tint: 'text-system-alert', word: 'Elevada' },
     breach: { Icon: AlertOctagon, tint: 'text-credit', word: 'Em estresse' }
 };
-export function DelinquencyAging({ buckets, currency, locale, rateLabel = 'Inadimplência', rateBandLabels, emptyLabel = 'sem carteira', indeterminateLabel = 'indeterminada', bucketLabels, warn = 0.05, breach = 0.1, showTotal = false, className }) {
+export function DelinquencyAging({ buckets, currency, locale, rateLabel = 'Inadimplência', rateBandLabels, emptyLabel = 'sem carteira', indeterminateLabel = 'indeterminada', bucketLabels, warn = 0.05, breach = 0.1, showTotal = false, healthyTone = 'success', className }) {
     // THIRD RAIL: the rate scale and the two totals come from money-math, never
     // float. The division below is of two exact BigInt-derived integers.
     const scale = currency ? minorDigitsOf(currency) : 2;
@@ -198,12 +198,16 @@ export function DelinquencyAging({ buckets, currency, locale, rateLabel = 'Inadi
     const band = hasRate && overdueMinor !== null && totalMinor !== null
         ? exactBand(overdueMinor, totalMinor, warn, breach)
         : 'low';
-    const { Icon, tint, word } = RATE_BAND[band];
+    const { Icon, word } = RATE_BAND[band];
+    // `ink` retones ONLY the healthy band; `warn`/`breach` keep their alarm tints.
+    const tint = healthyTone === 'ink' && band === 'low'
+        ? 'text-foreground'
+        : RATE_BAND[band].tint;
     // Shallow merge: an unlisted band keeps its pt-BR default.
     const bandWord = rateBandLabels?.[band] ?? word;
     const distressed = band === 'breach';
     return (_jsxs("div", { className: cn('flex flex-col gap-4', className), children: [_jsxs("header", { className: "flex items-baseline justify-between gap-3", children: [_jsx(SectionLabel, { as: "span", children: rateLabel }), hasRate ? (_jsxs("span", { 
                         // A distressed rate is a credit alarm: announced the moment it
                         // crosses the band, so assistive tech does not lean on the tint.
-                        role: distressed ? 'alert' : undefined, className: cn('inline-flex items-center gap-1.5', tint), children: [_jsx(Icon, { "aria-hidden": true, className: "size-4 shrink-0" }), _jsxs("span", { className: "sr-only", children: [bandWord, ": "] }), _jsx(Figure, { size: "row", className: tint, children: formatPercent(rate, { unit: 'ratio', locale }) })] })) : (_jsxs("span", { className: "text-muted-foreground inline-flex items-center gap-1.5", children: [_jsx("span", { className: cn(LABEL_VOICE_CLASS, 'tracking-normal normal-case'), children: indeterminate ? indeterminateLabel : emptyLabel }), _jsx(Figure, { size: "row", className: "text-muted-foreground", children: NO_VALUE })] }))] }), _jsx(AgingBuckets, { buckets: buckets, currency: currency, locale: locale, showTotal: showTotal, labels: bucketLabels })] }));
+                        role: distressed ? 'alert' : undefined, className: cn('inline-flex items-center gap-1.5', tint), children: [_jsx(Icon, { "aria-hidden": true, className: "size-4 shrink-0" }), _jsxs("span", { className: "sr-only", children: [bandWord, ": "] }), _jsx(Figure, { size: "row", className: tint, children: formatPercent(rate, { unit: 'ratio', locale }) })] })) : (_jsxs("span", { className: "text-muted-foreground inline-flex items-center gap-1.5", children: [_jsx("span", { className: cn(LABEL_VOICE_CLASS, 'tracking-normal normal-case'), children: indeterminate ? indeterminateLabel : emptyLabel }), _jsx(Figure, { size: "row", className: "text-muted-foreground", children: NO_VALUE })] }))] }), _jsx(AgingBuckets, { buckets: buckets, currency: currency, locale: locale, showTotal: showTotal, labels: bucketLabels, healthyTone: healthyTone })] }));
 }

package/dist/esm/domain/figure/index.d.ts

@@ -8,14 +8,21 @@
  * `FIGURE_CLASS` constants when composing className strings inline.
  *
  * Scale:
- *  - hero  : the dominant in-bar figure   — text-4xl/5xl, semibold, tracking-tight
- *  - panel : compliance / exposure        — text-3xl, semibold, tracking-tight
- *  - count : ledger count                 — text-2xl, semibold, tracking-tight
- *  - row   : inline / row figure          — text-sm
- *  - tick  : ruler / micro figure         — text-[10px], leading-none
+ *  - hero       : the dominant in-bar figure — text-4xl/5xl, semibold, tracking-tight
+ *  - money-hero : hero-role MONEY figure     — text-2xl/3xl, semibold, tracking-tight
+ *  - panel      : compliance / exposure      — text-3xl, semibold, tracking-tight
+ *  - count      : ledger count               — text-2xl, semibold, tracking-tight
+ *  - row        : inline / row figure        — text-sm
+ *  - tick       : ruler / micro figure       — text-[10px], leading-none
+ *
+ * `money-hero` is `hero`'s role at one step down the scale: a formatted BRL
+ * amount runs ~13 characters, which clips a three-column panel at 4xl/5xl, so
+ * consoles were hand-rolling `text-2xl lg:text-3xl` at the call site and losing
+ * the mono/tabular/weight invariants along the way. Same responsive shape as
+ * `hero`, same weight and tracking — only the two size steps differ.
  */
 import type { ElementType, ReactNode } from 'react';
-export type FigureSize = 'hero' | 'panel' | 'count' | 'row' | 'tick';
+export type FigureSize = 'hero' | 'money-hero' | 'panel' | 'count' | 'row' | 'tick';
 /** Canonical class strings per figure size. The `tabular-nums` and `font-mono`
  *  invariants live here so they can never be forgotten at a call site. */
 export declare const FIGURE_CLASS: Record<FigureSize, string>;

package/dist/esm/domain/figure/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/domain/figure/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAInD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAA;AAEpE;0EAC0E;AAC1E,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAMnD,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,UAAU,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8EAA8E;IAC9E,EAAE,CAAC,EAAE,WAAW,CAAA;CACjB,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,GAAY,EACjB,EAAE,WAAW,+BAEb"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/domain/figure/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAInD,MAAM,MAAM,UAAU,GACpB,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAA;AAE5D;0EAC0E;AAC1E,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAQnD,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,UAAU,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8EAA8E;IAC9E,EAAE,CAAC,EAAE,WAAW,CAAA;CACjB,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,GAAY,EACjB,EAAE,WAAW,+BAEb"}

package/dist/esm/domain/figure/index.js

@@ -4,6 +4,7 @@ import { cn } from '../../lib/utils.js';
  *  invariants live here so they can never be forgotten at a call site. */
 export const FIGURE_CLASS = {
     hero: 'font-mono text-4xl font-semibold tracking-tight tabular-nums lg:text-5xl',
+    'money-hero': 'font-mono text-2xl font-semibold tracking-tight tabular-nums lg:text-3xl',
     panel: 'font-mono text-3xl font-semibold tracking-tight tabular-nums',
     count: 'font-mono text-2xl font-semibold tracking-tight tabular-nums',
     row: 'font-mono text-sm tabular-nums',

package/dist/esm/domain/section-label/index.d.ts

@@ -16,6 +16,12 @@ export type SectionLabelProps = {
     className?: string;
     /** Render element. Defaults to `h2` (the ledger-sheet cell heading). */
     as?: ElementType;
+    /**
+     * Rule the label as an entry-section head (hairline double border, `pb-2`)
+     * and stamp `data-variant="ruled"`. Mirrors `EmptyState.ruled`. Default off,
+     * so an unruled label renders exactly as before.
+     */
+    ruled?: boolean;
 } & Omit<HTMLAttributes<HTMLElement>, 'children' | 'className'>;
-export declare function SectionLabel({ children, className, as: Tag, ...rest }: SectionLabelProps): import("react").JSX.Element;
+export declare function SectionLabel({ children, className, as: Tag, ruled, ...rest }: SectionLabelProps): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/domain/section-label/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/domain/section-label/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKnE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wEAAwE;IACxE,EAAE,CAAC,EAAE,WAAW,CAAA;CACjB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,CAAA;AAE/D,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,GAAU,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,+BAUnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/domain/section-label/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAUnE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wEAAwE;IACxE,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,CAAA;AAE/D,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,GAAU,EACd,KAAa,EACb,GAAG,IAAI,EACR,EAAE,iBAAiB,+BAcnB"}

package/dist/esm/domain/section-label/index.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SECTION_LABEL_CLASS } from '../../lib/typography.js';
 import { cn } from '../../lib/utils.js';
-export function SectionLabel({ children, className, as: Tag = 'h2', ...rest }) {
+/** The entry-section head treatment: a hairline double rule under the label.
+ *  `border-border`, NOT the register head's ink — this is the quieter of the two
+ *  head rules. Pinned here because ~20 call sites were restating it. */
+const RULED_CLASS = 'border-b-[3px] border-double border-border pb-2';
+export function SectionLabel({ children, className, as: Tag = 'h2', ruled = false, ...rest }) {
     // The remaining element props reach the rendered tag, so a panel can point
     // `aria-labelledby` at this heading via `id`, and tests can hang a `data-*`
     // hook off it. Without the spread there was no way to reference the heading
     // from its own container.
-    return (_jsx(Tag, { className: cn(SECTION_LABEL_CLASS, className), ...rest, children: children }));
+    return (_jsx(Tag, { ...rest, "data-variant": ruled ? 'ruled' : undefined, className: cn(SECTION_LABEL_CLASS, ruled && RULED_CLASS, className), children: children }));
 }

package/dist/esm/enterprise/data-table/index.d.ts

@@ -81,8 +81,20 @@ type DataTableBaseProps<TData> = {
      */
     rowHref?: (row: TData) => string;
     className?: string;
+    /**
+     * Extra classes merged onto every header cell, after the kit label voice —
+     * so a caller can override the voice's size/tracking/color for one table
+     * without restating the cluster. Per-column alignment stays `meta.numeric`.
+     */
+    headClassName?: string;
+    /**
+     * Footed-total row(s) rendered inside the kit `TableFooter` after the body.
+     * The caller supplies the row markup (`<tr><td>…</td></tr>`) so the footer
+     * can span, align and format its own figures. Omitted → no `tfoot`.
+     */
+    footer?: React.ReactNode;
 };
 export type DataTableProps<TData> = DataTableBaseProps<TData> & RowSelectionProps<TData>;
-export declare function DataTable<TData>({ columns, data, loading, skeletonRows, loadingLabel, empty, getRowId, flush, density, enableRowSelection, rowSelection, onRowSelectionChange, getRowSelectionLabel, onRowActivate, rowHref, className }: DataTableProps<TData>): import("react").JSX.Element;
+export declare function DataTable<TData>({ columns, data, loading, skeletonRows, loadingLabel, empty, getRowId, flush, density, enableRowSelection, rowSelection, onRowSelectionChange, getRowSelectionLabel, onRowActivate, rowHref, className, headClassName, footer }: DataTableProps<TData>): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/data-table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/data-table/index.tsx"],"names":[],"mappings":"AAmCA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,UAAU,EAEf,KAAK,OAAO,EACZ,KAAK,iBAAiB,EAEvB,MAAM,uBAAuB,CAAA;AAY9B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAEjE;;;;GAIG;AACH,OAAO,QAAQ,uBAAuB,CAAC;IAIrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,OAAO,CAAC,EAAE,OAAO,CAAA;KAClB;CACF;AAED;;;;;;;;GAQG;AACH,KAAK,iBAAiB,CAAC,KAAK,IACxB;IACE,kBAAkB,CAAC,EAAE,KAAK,CAAA;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,oBAAoB,CAAC,EAAE,KAAK,CAAA;IAC5B,oBAAoB,CAAC,EAAE,KAAK,CAAA;CAC7B,GACD;IACE,kBAAkB,EAAE,IAAI,CAAA;IACxB,kFAAkF;IAClF,YAAY,EAAE,iBAAiB,CAAA;IAC/B,4DAA4D;IAC5D,oBAAoB,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACnD;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;CAC9C,CAAA;AAEL,KAAK,kBAAkB,CAAC,KAAK,IAAI;IAC/B,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAA;IACpC,IAAI,EAAE,KAAK,EAAE,CAAA;IACb,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iGAAiG;IACjG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;IACnC;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IACpC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,KAAK,IAAI,kBAAkB,CAAC,KAAK,CAAC,GAC3D,iBAAiB,CAAC,KAAK,CAAC,CAAA;AA4E1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,EAC/B,OAAO,EACP,IAAI,EACJ,OAAe,EACf,YAAgB,EAChB,YAAmC,EACnC,KAAK,EACL,QAAQ,EACR,KAAa,EACb,OAAuB,EACvB,kBAA0B,EAC1B,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACb,OAAO,EACP,SAAS,EACV,EAAE,cAAc,CAAC,KAAK,CAAC,+BA+RvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/data-table/index.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,UAAU,EAEf,KAAK,OAAO,EACZ,KAAK,iBAAiB,EAEvB,MAAM,uBAAuB,CAAA;AAc9B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAEjE;;;;GAIG;AACH,OAAO,QAAQ,uBAAuB,CAAC;IAIrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,OAAO,CAAC,EAAE,OAAO,CAAA;KAClB;CACF;AAED;;;;;;;;GAQG;AACH,KAAK,iBAAiB,CAAC,KAAK,IACxB;IACE,kBAAkB,CAAC,EAAE,KAAK,CAAA;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,oBAAoB,CAAC,EAAE,KAAK,CAAA;IAC5B,oBAAoB,CAAC,EAAE,KAAK,CAAA;CAC7B,GACD;IACE,kBAAkB,EAAE,IAAI,CAAA;IACxB,kFAAkF;IAClF,YAAY,EAAE,iBAAiB,CAAA;IAC/B,4DAA4D;IAC5D,oBAAoB,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACnD;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;CAC9C,CAAA;AAEL,KAAK,kBAAkB,CAAC,KAAK,IAAI;IAC/B,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAA;IACpC,IAAI,EAAE,KAAK,EAAE,CAAA;IACb,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iGAAiG;IACjG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;IACnC;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IACpC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,KAAK,IAAI,kBAAkB,CAAC,KAAK,CAAC,GAC3D,iBAAiB,CAAC,KAAK,CAAC,CAAA;AA4E1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,EAC/B,OAAO,EACP,IAAI,EACJ,OAAe,EACf,YAAgB,EAChB,YAAmC,EACnC,KAAK,EACL,QAAQ,EACR,KAAa,EACb,OAAuB,EACvB,kBAA0B,EAC1B,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACb,OAAO,EACP,SAAS,EACT,aAAa,EACb,MAAM,EACP,EAAE,cAAc,CAAC,KAAK,CAAC,+BAiSvB"}

package/dist/esm/enterprise/data-table/index.js

@@ -10,6 +10,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   - empty    → EmptyState (data resolved, zero rows)
  *   - data     → semantic table rows; cells own any links/actions
  *
+ * Column heads speak the kit's LABEL_VOICE_CLASS; `headClassName` overrides it
+ * per table. An optional `footer` node renders in a `tfoot` for footed totals.
+ *
  * Columns are standard TanStack `ColumnDef<T>`; cells receive the row's
  * `original` value, so screens compose money / date / status cells directly in
  * their column `cell` renderers.
@@ -34,8 +37,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../components/ui/table/index.js';
+import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '../../components/ui/table/index.js';
 import { Skeleton } from '../../components/ui/skeleton/index.js';
+import { LABEL_VOICE_CLASS } from '../../lib/typography.js';
 import { cn } from '../../lib/utils.js';
 import { EmptyState } from '../empty-state/index.js';
 const SELECTION_COLUMN_ID = '__select__';
@@ -75,7 +79,7 @@ function createSelectionColumn(getLabel) {
         cell: ({ row }) => _jsx(RowSelectionCheckbox, { row: row, getLabel: getLabel })
     };
 }
-export function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLabel = 'Loading table rows', empty, getRowId, flush = false, density = 'comfortable', enableRowSelection = false, rowSelection, onRowSelectionChange, getRowSelectionLabel, onRowActivate, rowHref, className }) {
+export function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLabel = 'Loading table rows', empty, getRowId, flush = false, density = 'comfortable', enableRowSelection = false, rowSelection, onRowSelectionChange, getRowSelectionLabel, onRowActivate, rowHref, className, headClassName, footer }) {
     const tableColumns = useMemo(() => enableRowSelection
         ? [createSelectionColumn(getRowSelectionLabel), ...columns]
         : columns, [columns, enableRowSelection, getRowSelectionLabel]);
@@ -213,7 +217,7 @@ export function DataTable({ columns, data, loading = false, skeletonRows = 8, lo
                         ? 'No rows'
                         : `${rowCount} rows` }), _jsxs(Table, { "aria-busy": loading ? 'true' : undefined, children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header) => {
                                 const numeric = header.column.columnDef.meta?.numeric;
-                                return (_jsx(TableHead, { align: numeric ? 'right' : undefined, className: cn('tracking-wide uppercase', headDensityClass, header.column.id === SELECTION_COLUMN_ID && 'w-10'), children: header.isPlaceholder
+                                return (_jsx(TableHead, { align: numeric ? 'right' : undefined, className: cn(LABEL_VOICE_CLASS, headDensityClass, header.column.id === SELECTION_COLUMN_ID && 'w-10', headClassName), children: header.isPlaceholder
                                         ? null
                                         : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
                             }) }, headerGroup.id))) }), _jsx(TableBody, { children: loading ? (Array.from({ length: skeletonRows }).map((_, rowIndex) => (_jsx(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: colCount }).map((__, cellIndex) => (_jsx(TableCell, { className: cellDensityClass, children: _jsx(Skeleton, { className: "h-4 w-full max-w-[160px]" }) }, `skeleton-${rowIndex}-${cellIndex}`))) }, `skeleton-${rowIndex}`)))) : rowCount === 0 ? (_jsx(TableRow, { className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: colCount, className: "p-0", children: _jsx(EmptyState, { title: empty?.title ?? 'Nothing here yet', description: empty?.description, icon: empty?.icon, action: empty?.action, 
@@ -238,5 +242,5 @@ export function DataTable({ columns, data, loading = false, skeletonRows = 8, lo
                                 ? 'selected'
                                 : undefined, children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { className: cn(cell.column.columnDef.meta?.numeric && NUMERIC_CELL_CLASS, cellDensityClass, cell.column.id === SELECTION_COLUMN_ID && 'w-10'), onClick: cell.column.id === SELECTION_COLUMN_ID
                                     ? stopPropagation
-                                    : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) })] })] }));
+                                    : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) }), footer ? _jsx(TableFooter, { children: footer }) : null] })] }));
 }

package/dist/esm/enterprise/search-input/index.d.ts

@@ -27,6 +27,12 @@ export type SearchInputProps = {
     disabled?: boolean;
     className?: string;
     id?: string;
+    /**
+     * Key events on the field, passed straight through. The component adds no
+     * Escape behaviour of its own: Escape-to-clear is a consumer gesture (some
+     * filter rows clear the field, others close a popover), so it owns it.
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
 };
-export declare function SearchInput({ value, onValueChange, debounceMs, placeholder, 'aria-label': ariaLabel, clearLabel, disabled, className, id }: SearchInputProps): React.JSX.Element;
+export declare function SearchInput({ value, onValueChange, debounceMs, placeholder, 'aria-label': ariaLabel, clearLabel, disabled, className, id, onKeyDown }: SearchInputProps): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/search-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/search-input/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gFAAgF;IAChF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,UAAgB,EAChB,WAAuB,EACvB,YAAY,EAAE,SAAS,EACvB,UAA2B,EAC3B,QAAgB,EAChB,SAAS,EACT,EAAE,EACH,EAAE,gBAAgB,qBAsGlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/search-input/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gFAAgF;IAChF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAA;CACzD,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,UAAgB,EAChB,WAAuB,EACvB,YAAY,EAAE,SAAS,EACvB,UAA2B,EAC3B,QAAgB,EAChB,SAAS,EACT,EAAE,EACF,SAAS,EACV,EAAE,gBAAgB,qBAuGlB"}

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

@@ -23,7 +23,7 @@ import { cn } from '../../lib/utils.js';
  * string: any string sentinel is a value a parent could legitimately pass.
  */
 const NO_PENDING_ECHO = Symbol('no pending echo');
-export function SearchInput({ value, onValueChange, debounceMs = 250, placeholder = 'Search…', 'aria-label': ariaLabel, clearLabel = 'Clear search', disabled = false, className, id }) {
+export function SearchInput({ value, onValueChange, debounceMs = 250, placeholder = 'Search…', 'aria-label': ariaLabel, clearLabel = 'Clear search', disabled = false, className, id, onKeyDown }) {
     // Local draft keeps typing instant; the controlled `value` is the source of
     // truth between edits. When the parent changes `value` out of band (reset,
     // programmatic set), the draft follows.
@@ -79,7 +79,7 @@ export function SearchInput({ value, onValueChange, debounceMs = 250, placeholde
         onValueChange('');
     };
     const hasValue = draft.length > 0;
-    return (_jsx("div", { className: cn('relative w-full sm:w-64', className), children: _jsx(Input, { id: id, type: "search", role: "searchbox", value: draft, onChange: handleChange, placeholder: placeholder, "aria-label": ariaLabel ?? placeholder ?? 'Search', disabled: disabled, 
+    return (_jsx("div", { className: cn('relative w-full sm:w-64', className), children: _jsx(Input, { id: id, type: "search", role: "searchbox", value: draft, onChange: handleChange, onKeyDown: onKeyDown, placeholder: placeholder, "aria-label": ariaLabel ?? placeholder ?? 'Search', disabled: disabled, 
             // The native search clear glyph would duplicate our button.
             className: "[&::-webkit-search-cancel-button]:appearance-none", startAdornment: _jsx(InputAdornment, { position: "start", children: _jsx(Search, { "aria-hidden": true }) }), endAdornment: hasValue ? (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { type: "button", variant: "plain", size: "small", "aria-label": clearLabel, disabled: disabled, onClick: handleClear, className: "text-muted-foreground hover:text-foreground", children: _jsx(X, { className: "size-4", "aria-hidden": true }) }) })) : undefined }) }));
 }

package/dist/esm/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;AAG5C,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"}

package/dist/esm/lib/utils.js

@@ -1,5 +1,31 @@
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
+/**
+ * The kit's button variants are component classes in `@layer components`, not
+ * Tailwind utilities, so stock tailwind-merge has no group for them: it kept
+ * `button-primary button-destructive` together and let stylesheet source order
+ * pick the winner. Declaring the group makes the last one win, like every other
+ * conflict `cn` resolves.
+ *
+ * Variant classes only. `button-base`, `button-disabled`, `button-read-only`
+ * and `button-small` compose with a variant instead of conflicting with it, so
+ * they stay out of the group and are never merged away.
+ */
+const twMerge = extendTailwindMerge({
+    extend: {
+        classGroups: {
+            'sindarian-button-variant': [
+                'button-plain',
+                'button-primary',
+                'button-secondary',
+                'button-tertiary',
+                'button-outline',
+                'button-link',
+                'button-destructive'
+            ]
+        }
+    }
+});
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }

package/dist/globals.css

@@ -13,7 +13,8 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-  --font-sans: var(--font-inter), Inter, ui-sans-serif, system-ui, sans-serif;
+  --font-sans:
+    var(--font-inter, 'Inter'), 'Inter', ui-sans-serif, system-ui, sans-serif;
 
   --shadow-sidebar: 5px 0px 15px -3px hsl(var(--shadow-color) / 0.05);
   --shadow-data-table:
@@ -358,6 +359,17 @@
     --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 */
@@ -396,9 +408,23 @@
     /* Shadow color for dark mode */
     --shadow-color: 0 0% 100%;
 
-    /* Ledger credit semantic — lifted for the dark canvas; foreground mirrors. */
-    --credit: 0 91% 71%; /* red/400 = #F87171 */
-    --credit-foreground: 0 91% 71%; /* mirrors --credit */
+    /*
+      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 */
@@ -433,21 +459,30 @@
     0 4px 6px -4px rgba(0, 0, 0, 0.1);
 }
 
+/*
+  Type fills come from the system token families, so a toast themes with the
+  rest of the app. Ink is picked per family by polarity, not per theme:
+  --primary-foreground is the ink that sits on a solid fill and already
+  inverts (white in light, base/800 in dark), which is what the success and
+  error fills need — they darken in light and lift in dark. --system-alert is
+  bright in BOTH themes, so warning takes --accent-foreground, the token that
+  means "ink on yellow" and is near-black in both.
+*/
 [data-sonner-toast][data-type='success'] {
-  --normal-bg: #22c55e;
-  --normal-text: #ffffff;
+  --normal-bg: hsl(var(--system-success));
+  --normal-text: hsl(var(--primary-foreground));
   --normal-border: transparent;
 }
 
 [data-sonner-toast][data-type='error'] {
-  --normal-bg: #ef4444;
-  --normal-text: #ffffff;
+  --normal-bg: hsl(var(--system-error));
+  --normal-text: hsl(var(--primary-foreground));
   --normal-border: transparent;
 }
 
 [data-sonner-toast][data-type='warning'] {
-  --normal-bg: #f59e0b;
-  --normal-text: #422006;
+  --normal-bg: hsl(var(--system-alert));
+  --normal-text: hsl(var(--accent-foreground));
   --normal-border: transparent;
 }
 
@@ -476,42 +511,35 @@
   display: none !important;
 }
 
+/*
+  The close button derives from the toast's own --normal-text, so it is legible
+  on every fill and in both themes by construction. That is what replaced the
+  six rules previously here: one per-theme pair plus one pair per coloured
+  type, each hardcoding the ink it assumed the fill needed.
+
+  Both rules keep !important. Sonner's own resting rule is
+  `[data-sonner-toast][data-styled='true'] [data-close-button]` (0,3,0,
+  color: var(--gray12)) and its dark rule adds a fourth compound, so a plain
+  descendant selector here cannot win the cascade against a stylesheet that is
+  injected at runtime — the fade this rule intends was previously decided by
+  source order rather than by the sheet.
+*/
 [data-sonner-toast] [data-close-button] {
-  color: hsl(var(--foreground) / 0.5);
+  color: color-mix(in srgb, var(--normal-text) 50%, transparent) !important;
 }
 
 [data-sonner-toast] [data-close-button]:hover {
-  color: #ffffff !important;
-  background-color: hsl(var(--foreground)) !important;
-  border-color: hsl(var(--foreground)) !important;
-}
-
-.dark [data-sonner-toast] [data-close-button]:hover {
-  color: #ffffff !important;
-  background-color: hsl(240 5% 26%) !important;
-  border-color: hsl(240 5% 26%) !important;
-}
-
-[data-sonner-toast][data-type='success'] [data-close-button],
-[data-sonner-toast][data-type='error'] [data-close-button] {
-  color: rgba(255, 255, 255, 0.6);
-}
-
-[data-sonner-toast][data-type='success'] [data-close-button]:hover,
-[data-sonner-toast][data-type='error'] [data-close-button]:hover {
-  color: #ffffff !important;
-  background-color: hsl(var(--foreground)) !important;
-  border-color: hsl(var(--foreground)) !important;
-}
-
-[data-sonner-toast][data-type='warning'] [data-close-button] {
-  color: rgba(66, 32, 6, 0.5);
-}
-
-[data-sonner-toast][data-type='warning'] [data-close-button]:hover {
-  color: #422006 !important;
-  background-color: rgba(66, 32, 6, 0.15) !important;
-  border-color: rgba(66, 32, 6, 0.15) !important;
+  color: var(--normal-text) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--normal-text) 15%,
+    transparent
+  ) !important;
+  border-color: color-mix(
+    in srgb,
+    var(--normal-text) 15%,
+    transparent
+  ) !important;
 }
 
 .dark [data-sonner-toast] {
@@ -557,22 +585,6 @@
   }
 }
 
-@keyframes caret-blink {
-  0%,
-  70%,
-  100% {
-    opacity: 1;
-  }
-  20%,
-  50% {
-    opacity: 0;
-  }
-}
-
-@utility animate-caret-blink {
-  animation: caret-blink 1.25s ease-out infinite;
-}
-
 .ticket {
   mask: radial-gradient(21px 13px at 50% 102%, #0000 98%, #000) 50%
     calc(100% - 16px) / 64px 100% repeat-x;

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;AAG5C,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"}

package/dist/lib/utils.js

@@ -3,6 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.cn = cn;
 const clsx_1 = require("clsx");
 const tailwind_merge_1 = require("tailwind-merge");
+/**
+ * The kit's button variants are component classes in `@layer components`, not
+ * Tailwind utilities, so stock tailwind-merge has no group for them: it kept
+ * `button-primary button-destructive` together and let stylesheet source order
+ * pick the winner. Declaring the group makes the last one win, like every other
+ * conflict `cn` resolves.
+ *
+ * Variant classes only. `button-base`, `button-disabled`, `button-read-only`
+ * and `button-small` compose with a variant instead of conflicting with it, so
+ * they stay out of the group and are never merged away.
+ */
+const twMerge = (0, tailwind_merge_1.extendTailwindMerge)({
+    extend: {
+        classGroups: {
+            'sindarian-button-variant': [
+                'button-plain',
+                'button-primary',
+                'button-secondary',
+                'button-tertiary',
+                'button-outline',
+                'button-link',
+                'button-destructive'
+            ]
+        }
+    }
+});
 function cn(...inputs) {
-    return (0, tailwind_merge_1.twMerge)((0, clsx_1.clsx)(inputs));
+    return twMerge((0, clsx_1.clsx)(inputs));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "1.3.0-beta.2",
+  "version": "1.3.0-beta.4",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {