pixelize-design-library 2.4.2-beta.61 → 2.4.2-beta.62

package/dist/Theme/tokens/brands/skyline/palette.dark.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

package/dist/Theme/tokens/brands/slate/palette.dark.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

package/dist/Theme/tokens/brands/storefront/palette.dark.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

package/dist/Theme/tokens/brands/zinc/palette.dark.js

@@ -7,9 +7,9 @@ const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
 const brandInk_1 = require("../../builders/brandInk");
 const buildBrandTokens_1 = require("../../builders/buildBrandTokens");
 const accentText_1 = require("../../builders/accentText");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
 // NOTE: zinc dark INVERTS the primary (near-white fill, dark label) to match shadcn — every other brand lifts its own hue instead. Most ramps below are literals ported from Mobile-Components.
-const derived = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
 const PRIMARY_500 = "#e4e4e7";
 const SECONDARY_500 = "#a1a1aa";
 const primary = {
@@ -151,28 +151,32 @@ const table = {
         900: "#a1a1aa",
     },
 };
-const palette = {
-    ...derived,
-    gradient: { from: PRIMARY_500, to: "#a1a1aa" },
-    primary,
-    secondary,
-    tertiary: { ...(0, brandInk_1.rotateScaleHue)(secondary), opacity: secondary.opacity },
-    // NOTE: backgroundColor/sidebar fall through to `...derived` — mobile's literals collapse distinct elevation steps, breaking darkSurfaces.test.ts.
-    background,
-    text,
-    header,
-    gray,
-    border,
-    boxborder,
-    placeholder,
-    disabled,
-    table,
-    accentText: (0, accentText_1.pickAccentText)(primary, derived.backgroundColor.main),
-    onPrimary: (0, accentText_1.onFilled)(PRIMARY_500, derived.white, derived.black),
-    boxShadow: {
-        primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
-        error: derived.boxShadow.error,
-        default: "#00000080",
-    },
+const buildPalette = () => {
+    const derived = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+    return {
+        ...derived,
+        gradient: { from: PRIMARY_500, to: "#a1a1aa" },
+        primary,
+        secondary,
+        tertiary: { ...(0, brandInk_1.rotateScaleHue)(secondary), opacity: secondary.opacity },
+        // NOTE: backgroundColor/sidebar fall through to `...derived` — mobile's literals collapse distinct elevation steps, breaking darkSurfaces.test.ts.
+        background,
+        text,
+        header,
+        gray,
+        border,
+        boxborder,
+        placeholder,
+        disabled,
+        table,
+        accentText: (0, accentText_1.pickAccentText)(primary, derived.backgroundColor.main),
+        onPrimary: (0, accentText_1.onFilled)(PRIMARY_500, derived.white, derived.black),
+        boxShadow: {
+            primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
+            error: derived.boxShadow.error,
+            default: "#00000080",
+        },
+    };
 };
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, buildPalette);
 exports.default = palette;

package/dist/Theme/tokens/builders/color.js

@@ -1,5 +1,4 @@
 "use strict";
-// Pure color math, no dependencies or platform APIs — safe for the mobile port.
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hslToHex = exports.hexToHsl = void 0;
 exports.hexToRgb = hexToRgb;
@@ -12,6 +11,8 @@ exports.withLightness = withLightness;
 exports.mix = mix;
 exports.relativeLuminance = relativeLuminance;
 exports.contrastRatio = contrastRatio;
+// Pure color math, no dependencies or platform APIs — safe for the mobile port.
+const memo_1 = require("./memo");
 const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
 // NOTE: #rrggbbaa throws on purpose — alpha over an unknown backdrop has no defined luminance; composite first.
 function hexToRgb(hex) {
@@ -120,14 +121,17 @@ function mix(a, b, weight) {
         b: ca.b + (cb.b - ca.b) * w,
     });
 }
+const linearChannel = (v) => {
+    const c = v / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+};
+const luminanceOf = (0, memo_1.memoize)((hex) => {
+    const { r, g, b } = hexToRgb(hex);
+    return 0.2126 * linearChannel(r) + 0.7152 * linearChannel(g) + 0.0722 * linearChannel(b);
+}, (hex) => hex, 4096);
 /** WCAG 2.1 relative luminance. */
 function relativeLuminance(hex) {
-    const { r, g, b } = hexToRgb(hex);
-    const channel = (v) => {
-        const c = v / 255;
-        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-    };
-    return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+    return luminanceOf(hex);
 }
 /** WCAG 2.1 contrast ratio, 1–21. AA body text needs >= 4.5. */
 function contrastRatio(a, b) {

package/dist/Theme/tokens/builders/filledSurface.d.ts

@@ -16,4 +16,6 @@ export declare const solidFillRung: (scale: ColorScale, white: string, canvas?:
 export declare const darkerFillRung: (scale: ColorScale, canvas: string, white: string, step: 0 | 1) => keyof ColorScale;
 /** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */
 export declare const labelOnFill: (fill: string, white: string, black: string) => string;
-export declare const resolveFilledSurface: (scale: ColorScale, colors: Pick<PaletteProps, "white" | "black" | "backgroundColor" | "background">) => FilledSurface;
+type SurfaceColors = Pick<PaletteProps, "white" | "black" | "backgroundColor" | "background">;
+export declare const resolveFilledSurface: (scale: ColorScale, colors: SurfaceColors) => FilledSurface;
+export {};

package/dist/Theme/tokens/builders/filledSurface.js

@@ -4,6 +4,7 @@ exports.resolveFilledSurface = exports.labelOnFill = exports.darkerFillRung = ex
 const color_1 = require("./color");
 const accentText_1 = require("./accentText");
 const outlineRung_1 = require("./outlineRung");
+const memo_1 = require("./memo");
 const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
 // NOTE: "darker than [500]" is [600]/[700] in light but [400]/[300] in dark, since dark ramps run dark -> light.
 const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
@@ -57,12 +58,8 @@ exports.darkerFillRung = darkerFillRung;
 /** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */
 const labelOnFill = (fill, white, black) => (0, accentText_1.onFilled)(fill, white, black);
 exports.labelOnFill = labelOnFill;
-// Consumer-facing helper: fill rung + ink for solid/hover/active. Never pair scale[500] with onFilled by hand.
-const resolveFilledSurface = (scale, colors) => {
-    const { white, black, backgroundColor, background } = colors;
-    const canvas = (0, color_1.contrastRatio)(scale[500], backgroundColor.main) <= (0, color_1.contrastRatio)(scale[500], background[50])
-        ? backgroundColor.main
-        : background[50];
+const filledSurfaceMemo = (0, memo_1.memoize)((scale, white, black, main, card) => {
+    const canvas = (0, color_1.contrastRatio)(scale[500], main) <= (0, color_1.contrastRatio)(scale[500], card) ? main : card;
     const rung = (0, exports.solidFillRung)(scale, white, canvas);
     const fill = scale[rung];
     const hoverRung = (0, exports.darkerFillRung)(scale, canvas, white, 0);
@@ -80,5 +77,8 @@ const resolveFilledSurface = (scale, colors) => {
         activeFill,
         activeColor: (0, exports.labelOnFill)(activeFill, white, black),
     };
-};
+}, (scale, white, black, main, card) => `${(0, memo_1.scaleKey)(scale)}|${white}|${black}|${main}|${card}`);
+const resolveFilledSurface = (scale, colors) => ({
+    ...filledSurfaceMemo(scale, colors.white, colors.black, colors.backgroundColor.main, colors.background[50]),
+});
 exports.resolveFilledSurface = resolveFilledSurface;

package/dist/Theme/tokens/builders/lazy.d.ts

@@ -0,0 +1,5 @@
+import type { BrandPaletteSource, PaletteProps } from "../types";
+export declare const lazyObject: <T extends object>(keys: ReadonlyArray<keyof T>, build: () => T) => T;
+export declare const paletteKeys: (source: BrandPaletteSource) => Array<keyof PaletteProps>;
+/** A palette derived from `source` on its first read; same keys, order and values as `build()`. */
+export declare const lazyPalette: <T extends PaletteProps>(source: BrandPaletteSource, build: () => T) => T;

package/dist/Theme/tokens/builders/lazy.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lazyPalette = exports.paletteKeys = exports.lazyObject = void 0;
+const dataProperty = (value) => ({
+    value,
+    writable: true,
+    enumerable: true,
+    configurable: true,
+});
+// NOTE: first read of any key builds once and swaps every getter for a plain data property.
+const lazyObject = (keys, build) => {
+    const target = {};
+    let built;
+    const materialise = () => {
+        if (built)
+            return built;
+        const value = build();
+        built = value;
+        if (!Object.isSealed(target)) {
+            keys.forEach((key) => Object.defineProperty(target, key, dataProperty(value[key])));
+        }
+        return value;
+    };
+    keys.forEach((key) => Object.defineProperty(target, key, {
+        enumerable: true,
+        configurable: true,
+        get: () => materialise()[key],
+        set: (next) => {
+            materialise();
+            Object.defineProperty(target, key, dataProperty(next));
+        },
+    }));
+    return target;
+};
+exports.lazyObject = lazyObject;
+// NOTE: order matches finalizeLightPalette and buildDarkPalette, which append these after the source keys.
+const DERIVED = {
+    accentText: true,
+    textMuted: true,
+    semanticText: true,
+    onPrimary: true,
+    onSemantic: true,
+    focusRing: true,
+    surfaceRaised: true,
+    star: true,
+};
+const DERIVED_KEYS = Object.keys(DERIVED);
+const paletteKeys = (source) => [
+    ...Object.keys(source),
+    ...DERIVED_KEYS.filter((key) => !(key in source)),
+];
+exports.paletteKeys = paletteKeys;
+/** A palette derived from `source` on its first read; same keys, order and values as `build()`. */
+const lazyPalette = (source, build) => (0, exports.lazyObject)((0, exports.paletteKeys)(source), build);
+exports.lazyPalette = lazyPalette;

package/dist/Theme/tokens/builders/memo.d.ts

@@ -0,0 +1,9 @@
+import type { ColorScale } from "../types";
+export declare const MEMO_LIMIT = 1024;
+export declare const memoize: <A extends unknown[], R>(fn: (...args: A) => R, keyOf: (...args: A) => string, limit?: number) => ((...args: A) => R);
+export declare const scaleKey: (s: ColorScale) => string;
+export declare const memoCaches: () => ReadonlyArray<{
+    size: number;
+    limit: number;
+}>;
+export declare const clearMemoCaches: () => void;

package/dist/Theme/tokens/builders/memo.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clearMemoCaches = exports.memoCaches = exports.scaleKey = exports.memoize = exports.MEMO_LIMIT = void 0;
+const registry = [];
+exports.MEMO_LIMIT = 1024;
+// NOTE: clear-on-overflow, not LRU — a hit stays one Map lookup; contrast walks mint many one-off keys.
+const memoize = (fn, keyOf, limit = exports.MEMO_LIMIT) => {
+    const cache = new Map();
+    registry.push({ cache, limit });
+    return (...args) => {
+        const key = keyOf(...args);
+        const hit = cache.get(key);
+        if (hit !== undefined)
+            return hit;
+        const value = fn(...args);
+        if (cache.size >= limit)
+            cache.clear();
+        cache.set(key, value);
+        return value;
+    };
+};
+exports.memoize = memoize;
+const scaleKey = (s) => `${s[50]}|${s[100]}|${s[200]}|${s[300]}|${s[400]}|${s[500]}|${s[600]}|${s[700]}|${s[800]}|${s[900]}`;
+exports.scaleKey = scaleKey;
+const memoCaches = () => registry.map(({ cache, limit }) => ({ size: cache.size, limit }));
+exports.memoCaches = memoCaches;
+const clearMemoCaches = () => registry.forEach(({ cache }) => cache.clear());
+exports.clearMemoCaches = clearMemoCaches;

package/dist/Theme/tokens/builders/memoByReads.d.ts

@@ -0,0 +1,2 @@
+export declare const READS_MEMO_LIMIT = 16;
+export declare const memoiseByReads: <P extends object, R>(fn: (props: P) => R, limit?: number) => ((props: P) => R);

package/dist/Theme/tokens/builders/memoByReads.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.memoiseByReads = exports.READS_MEMO_LIMIT = void 0;
+exports.READS_MEMO_LIMIT = 16;
+// NOTE: keyed on exactly the props a call read; a call that enumerates or probes props is never cached.
+const memoiseByReads = (fn, limit = exports.READS_MEMO_LIMIT) => {
+    const entries = [];
+    return (props) => {
+        const source = props;
+        const hit = entries.find((entry) => entry.keys.every((key, i) => Object.is(source[key], entry.values[i])));
+        if (hit)
+            return hit.result;
+        const reads = new Map();
+        let opaque = false;
+        const tracked = new Proxy(props, {
+            get(target, key, receiver) {
+                const value = Reflect.get(target, key, receiver);
+                if (typeof key !== "string")
+                    opaque = true;
+                else if (!reads.has(key))
+                    reads.set(key, value);
+                return value;
+            },
+            has(target, key) {
+                opaque = true;
+                return Reflect.has(target, key);
+            },
+            ownKeys(target) {
+                opaque = true;
+                return Reflect.ownKeys(target);
+            },
+            getOwnPropertyDescriptor(target, key) {
+                opaque = true;
+                return Reflect.getOwnPropertyDescriptor(target, key);
+            },
+        });
+        const result = fn(tracked);
+        if (!opaque) {
+            if (entries.length >= limit)
+                entries.shift();
+            entries.push({
+                keys: [...reads.keys()],
+                values: [...reads.values()],
+                result,
+            });
+        }
+        return result;
+    };
+};
+exports.memoiseByReads = memoiseByReads;

package/dist/Theme/tokens/builders/outlineRung.js

@@ -10,6 +10,7 @@ exports.resolveHoverTint = resolveHoverTint;
 exports.settleAcross = settleAcross;
 exports.neutralStep = neutralStep;
 const color_1 = require("./color");
+const memo_1 = require("./memo");
 exports.MIN_PERCEPTIBLE_STEP = 1.15;
 exports.AA_NON_TEXT = 3;
 // NOTE: settles below AA_NON_TEXT — focusRing.ts covers the 1.4.11 gate instead.
@@ -33,7 +34,8 @@ function tintStep(seed, backdrop, target) {
     }
     return (0, color_1.withLightness)(seed, away > 0 ? 100 : 0, s);
 }
-function liftToContrast(hex, backdrop, target = exports.AA_NON_TEXT) {
+const contrastKey = (hex, backdrop, target) => `${hex}|${backdrop}|${target}`;
+const liftMemo = (0, memo_1.memoize)((hex, backdrop, target) => {
     if ((0, color_1.contrastRatio)(hex, backdrop) >= target)
         return hex;
     const { s, l: start } = (0, color_1.hexToHsl)(hex);
@@ -49,8 +51,11 @@ function liftToContrast(hex, backdrop, target = exports.AA_NON_TEXT) {
     }
     const ends = [(0, color_1.withLightness)(hex, 100, s), (0, color_1.withLightness)(hex, 0, s)];
     return (0, color_1.contrastRatio)(ends[0], backdrop) >= (0, color_1.contrastRatio)(ends[1], backdrop) ? ends[0] : ends[1];
+}, contrastKey);
+function liftToContrast(hex, backdrop, target = exports.AA_NON_TEXT) {
+    return liftMemo(hex, backdrop, target);
 }
-function softenToContrast(hex, backdrop, target) {
+const softenMemo = (0, memo_1.memoize)((hex, backdrop, target) => {
     if ((0, color_1.contrastRatio)(hex, backdrop) <= target)
         return hex;
     const { s, l: start } = (0, color_1.hexToHsl)(hex);
@@ -63,6 +68,9 @@ function softenToContrast(hex, backdrop, target) {
         softest = next;
     }
     return softest;
+}, contrastKey);
+function softenToContrast(hex, backdrop, target) {
+    return softenMemo(hex, backdrop, target);
 }
 // NOTE: border[*] is untouched — it draws decorative table gridlines, outside 1.4.11.
 function withOutlineRung(palette) {

package/dist/Theme/tokens/builders/tone.js

@@ -4,6 +4,7 @@ exports.resolveSoftTone = exports.toneInk = exports.toneScale = exports.isTone =
 const accentText_1 = require("./accentText");
 const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
+const memo_1 = require("./memo");
 exports.TONES = ["neutral", "info", "success", "warning", "error"];
 exports.toneToColorScheme = {
     neutral: "gray",
@@ -32,10 +33,8 @@ const SOFT_INK_TARGET = 6.5;
 const withAlpha = (hex, alpha) => `${hex}${Math.round(Math.min(1, Math.max(0, alpha)) * 255)
     .toString(16)
     .padStart(2, "0")}`;
-/** Translucent tint of the scale's own `[500]` hue — one rung for every scheme, any surface. */
-const resolveSoftTone = (colors, scale, surface = colors.backgroundColor.main) => {
+const softToneMemo = (0, memo_1.memoize)((hue, surface) => {
     const dark = (0, accentText_1.isDarkCanvas)(surface);
-    const hue = scale[500];
     const bgAlpha = dark ? BG_ALPHA.dark : BG_ALPHA.light;
     const ringAlpha = dark ? RING_ALPHA.dark : RING_ALPHA.light;
     const bg = withAlpha(hue, bgAlpha);
@@ -50,5 +49,7 @@ const resolveSoftTone = (colors, scale, surface = colors.backgroundColor.main) =
         activeBg: withAlpha(hue, bgAlpha + STATE_STEP * 1.75),
         activeBorder: withAlpha(hue, ringAlpha + STATE_STEP * 2),
     };
-};
+}, (hue, surface) => `${hue}|${surface}`);
+/** Translucent tint of the scale's own `[500]` hue — one rung for every scheme, any surface. */
+const resolveSoftTone = (colors, scale, surface = colors.backgroundColor.main) => ({ ...softToneMemo(scale[500], surface) });
 exports.resolveSoftTone = resolveSoftTone;

package/dist/Theme/tokens/primitives/borderWidths.d.ts

@@ -0,0 +1,6 @@
+/** Stroke widths in px on purpose: a rem hairline grows with the user's root font size. */
+export declare const BORDER_WIDTHS: {
+    readonly hairline: "1px";
+    readonly thick: "2px";
+};
+export type BorderWidthRole = keyof typeof BORDER_WIDTHS;

package/dist/Theme/tokens/primitives/borderWidths.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BORDER_WIDTHS = void 0;
+/** Stroke widths in px on purpose: a rem hairline grows with the user's root font size. */
+exports.BORDER_WIDTHS = { hairline: "1px", thick: "2px" };

package/dist/Theme/tokens/primitives/index.d.ts

@@ -1,11 +1,16 @@
 export { default as space } from "./space";
 export { default as sizes } from "./sizes";
-export { default as radii } from "./radii";
-export { default as shadows } from "./shadows";
+export { default as radii, RADIUS_ROLE } from "./radii";
+export type { RadiusToken, RadiusRole } from "./radii";
+export * from "./borderWidths";
+export * from "./states";
+export { default as shadows, shadowsDark, shadowsFor } from "./shadows";
+export type { ShadowRamp } from "./shadows";
 export { default as zIndices } from "./zIndices";
 export { default as breakpoints } from "./breakpoints";
 export { default as lineHeights } from "./lineHeights";
 export { default as letterSpacings } from "./letterSpacings";
-export { default as typography, fonts, fontSizes, fontWeights } from "./typography";
+export { default as typography, fonts, fontSizes, fontWeights, NUMERIC_TEXT, TEXT_STYLES } from "./typography";
+export type { TextStyleName, TextStyleSpec } from "./typography";
 export * from "./controlSizes";
 export * from "./motion";

package/dist/Theme/tokens/primitives/index.js

@@ -17,15 +17,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fontWeights = exports.fontSizes = exports.fonts = exports.typography = exports.letterSpacings = exports.lineHeights = exports.breakpoints = exports.zIndices = exports.shadows = exports.radii = exports.sizes = exports.space = void 0;
+exports.TEXT_STYLES = exports.NUMERIC_TEXT = exports.fontWeights = exports.fontSizes = exports.fonts = exports.typography = exports.letterSpacings = exports.lineHeights = exports.breakpoints = exports.zIndices = exports.shadowsFor = exports.shadowsDark = exports.shadows = exports.RADIUS_ROLE = exports.radii = exports.sizes = exports.space = void 0;
 var space_1 = require("./space");
 Object.defineProperty(exports, "space", { enumerable: true, get: function () { return __importDefault(space_1).default; } });
 var sizes_1 = require("./sizes");
 Object.defineProperty(exports, "sizes", { enumerable: true, get: function () { return __importDefault(sizes_1).default; } });
 var radii_1 = require("./radii");
 Object.defineProperty(exports, "radii", { enumerable: true, get: function () { return __importDefault(radii_1).default; } });
+Object.defineProperty(exports, "RADIUS_ROLE", { enumerable: true, get: function () { return radii_1.RADIUS_ROLE; } });
+__exportStar(require("./borderWidths"), exports);
+__exportStar(require("./states"), exports);
 var shadows_1 = require("./shadows");
 Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return __importDefault(shadows_1).default; } });
+Object.defineProperty(exports, "shadowsDark", { enumerable: true, get: function () { return shadows_1.shadowsDark; } });
+Object.defineProperty(exports, "shadowsFor", { enumerable: true, get: function () { return shadows_1.shadowsFor; } });
 var zIndices_1 = require("./zIndices");
 Object.defineProperty(exports, "zIndices", { enumerable: true, get: function () { return __importDefault(zIndices_1).default; } });
 var breakpoints_1 = require("./breakpoints");
@@ -39,5 +44,7 @@ Object.defineProperty(exports, "typography", { enumerable: true, get: function (
 Object.defineProperty(exports, "fonts", { enumerable: true, get: function () { return typography_1.fonts; } });
 Object.defineProperty(exports, "fontSizes", { enumerable: true, get: function () { return typography_1.fontSizes; } });
 Object.defineProperty(exports, "fontWeights", { enumerable: true, get: function () { return typography_1.fontWeights; } });
+Object.defineProperty(exports, "NUMERIC_TEXT", { enumerable: true, get: function () { return typography_1.NUMERIC_TEXT; } });
+Object.defineProperty(exports, "TEXT_STYLES", { enumerable: true, get: function () { return typography_1.TEXT_STYLES; } });
 __exportStar(require("./controlSizes"), exports);
 __exportStar(require("./motion"), exports);

package/dist/Theme/tokens/primitives/motion.d.ts

@@ -1,8 +1,31 @@
 export declare const MOTION_MS: {
     readonly fast: 150;
     readonly base: 200;
+    readonly enter: 200;
+    readonly exit: 200;
 };
 export type MotionSpeed = keyof typeof MOTION_MS;
-export declare const MOTION_EASE = "cubic-bezier(0.2, 0, 0, 1)";
+export type CubicBezier = readonly [number, number, number, number];
+/** Pebble easing curves (mobile `pebble-spec.json` motion.easing); `in` is Pebble's `accelerate`. */
+export declare const MOTION_BEZIER: {
+    readonly standard: readonly [0.2, 0, 0, 1];
+    readonly out: readonly [0.16, 1, 0.3, 1];
+    readonly in: readonly [0.3, 0, 1, 1];
+};
+export type MotionCurve = keyof typeof MOTION_BEZIER;
+export declare const cubicBezierCss: (curve: CubicBezier) => string;
+export declare const MOTION_EASE: string;
+export declare const MOTION_EASE_OUT: string;
+export declare const MOTION_EASE_IN: string;
+/** Periods for loops that are feedback, not transitions: skeleton pulse, spinner turn, progress sweep. */
+export declare const MOTION_LOOP_MS: {
+    readonly pulse: 700;
+    readonly spin: 800;
+    readonly sweep: 1200;
+};
 /** A `transition` value for named properties only — `all` also animates layout and colour flips. */
-export declare const transitionFor: (properties: readonly string[], speed?: MotionSpeed) => string;
+export declare const transitionFor: (properties: readonly string[], speed?: MotionSpeed, curve?: MotionCurve) => string;
+export declare const motionTransition: (speed?: MotionSpeed, curve?: MotionCurve) => {
+    duration: number;
+    ease: [number, number, number, number];
+};

package/dist/Theme/tokens/primitives/motion.js

@@ -1,12 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transitionFor = exports.MOTION_EASE = exports.MOTION_MS = void 0;
-exports.MOTION_MS = { fast: 150, base: 200 };
-exports.MOTION_EASE = "cubic-bezier(0.2, 0, 0, 1)";
+exports.motionTransition = exports.transitionFor = exports.MOTION_LOOP_MS = exports.MOTION_EASE_IN = exports.MOTION_EASE_OUT = exports.MOTION_EASE = exports.cubicBezierCss = exports.MOTION_BEZIER = exports.MOTION_MS = void 0;
+exports.MOTION_MS = { fast: 150, base: 200, enter: 200, exit: 200 };
+/** Pebble easing curves (mobile `pebble-spec.json` motion.easing); `in` is Pebble's `accelerate`. */
+exports.MOTION_BEZIER = {
+    standard: [0.2, 0, 0, 1],
+    out: [0.16, 1, 0.3, 1],
+    in: [0.3, 0, 1, 1],
+};
+const cubicBezierCss = (curve) => `cubic-bezier(${curve.join(", ")})`;
+exports.cubicBezierCss = cubicBezierCss;
+exports.MOTION_EASE = (0, exports.cubicBezierCss)(exports.MOTION_BEZIER.standard);
+exports.MOTION_EASE_OUT = (0, exports.cubicBezierCss)(exports.MOTION_BEZIER.out);
+exports.MOTION_EASE_IN = (0, exports.cubicBezierCss)(exports.MOTION_BEZIER.in);
+/** Periods for loops that are feedback, not transitions: skeleton pulse, spinner turn, progress sweep. */
+exports.MOTION_LOOP_MS = { pulse: 700, spin: 800, sweep: 1200 };
 /** A `transition` value for named properties only — `all` also animates layout and colour flips. */
-const transitionFor = (properties, speed = "fast") => {
+const transitionFor = (properties, speed = "fast", curve = "standard") => {
     if (properties.includes("all"))
         throw new Error("transitionFor: name the properties, never `all`");
-    return properties.map((p) => `${p} ${exports.MOTION_MS[speed]}ms ${exports.MOTION_EASE}`).join(", ");
+    const ease = (0, exports.cubicBezierCss)(exports.MOTION_BEZIER[curve]);
+    return properties.map((p) => `${p} ${exports.MOTION_MS[speed]}ms ${ease}`).join(", ");
 };
 exports.transitionFor = transitionFor;
+const motionTransition = (speed = "base", curve = "standard") => {
+    const [x1, y1, x2, y2] = exports.MOTION_BEZIER[curve];
+    return { duration: exports.MOTION_MS[speed] / 1000, ease: [x1, y1, x2, y2] };
+};
+exports.motionTransition = motionTransition;

package/dist/Theme/tokens/primitives/optionRowSizes.d.ts

@@ -16,5 +16,5 @@ export type OptionRowSpec = {
 };
 /** One density for every option row — Select, SearchSelect, SelectSearch, table filters and Chakra's MenuItem. */
 export declare const OPTION_ROW_SIZES: Readonly<Record<ControlSize, OptionRowSpec>>;
-export declare const OPTION_ROW_RADIUS = "md";
+export declare const OPTION_ROW_RADIUS: "md";
 export declare const optionRowSpec: (size: ControlSize) => OptionRowSpec;

package/dist/Theme/tokens/primitives/optionRowSizes.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.optionRowSpec = exports.OPTION_ROW_RADIUS = exports.OPTION_ROW_SIZES = void 0;
+const radii_1 = require("./radii");
 /** One density for every option row — Select, SearchSelect, SelectSearch, table filters and Chakra's MenuItem. */
 exports.OPTION_ROW_SIZES = {
     xs: {
@@ -24,6 +25,6 @@ exports.OPTION_ROW_SIZES = {
         avatarSize: "sm", virtualRowHeightPx: 40,
     },
 };
-exports.OPTION_ROW_RADIUS = "md";
+exports.OPTION_ROW_RADIUS = radii_1.RADIUS_ROLE.option;
 const optionRowSpec = (size) => exports.OPTION_ROW_SIZES[size];
 exports.optionRowSpec = optionRowSpec;

package/dist/Theme/tokens/primitives/radii.d.ts

@@ -9,4 +9,19 @@ declare const radii: {
     "3xl": string;
     full: string;
 };
+export type RadiusToken = keyof typeof radii;
+/** Radius by the role a surface plays; read this instead of picking a scale step. */
+export declare const RADIUS_ROLE: {
+    readonly control: "lg";
+    readonly field: "lg";
+    readonly option: "md";
+    readonly tooltip: "lg";
+    readonly chip: "full";
+    readonly card: "xl";
+    readonly float: "xl";
+    readonly dialog: "xl";
+    readonly sheet: "xl";
+    readonly media: "lg";
+};
+export type RadiusRole = keyof typeof RADIUS_ROLE;
 export default radii;

package/dist/Theme/tokens/primitives/radii.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RADIUS_ROLE = void 0;
 const radii = {
     none: "0",
     sm: "0.125rem",
@@ -11,4 +12,17 @@ const radii = {
     "3xl": "1.5rem",
     full: "9999px",
 };
+/** Radius by the role a surface plays; read this instead of picking a scale step. */
+exports.RADIUS_ROLE = {
+    control: "lg",
+    field: "lg",
+    option: "md",
+    tooltip: "lg",
+    chip: "full",
+    card: "xl",
+    float: "xl",
+    dialog: "xl",
+    sheet: "xl",
+    media: "lg",
+};
 exports.default = radii;

package/dist/Theme/tokens/primitives/shadows.d.ts

@@ -1,4 +1,5 @@
-/** Light-mode shadow ramp. Dark mode deepens these — see `builders/buildDarkShadows`. */
+import type { ResolvedColorMode } from "../types";
+/** Light-mode ramp. A theme should carry `shadowsFor(mode)`, never this one in dark. */
 declare const shadows: {
     xs: string;
     sm: string;
@@ -12,4 +13,7 @@ declare const shadows: {
     none: string;
     darkLg: string;
 };
+export type ShadowRamp = typeof shadows;
+export declare const shadowsDark: ShadowRamp;
+export declare const shadowsFor: (mode: ResolvedColorMode) => ShadowRamp;
 export default shadows;