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

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

@@ -2,9 +2,9 @@ import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
 import { rotateScaleHue } from "../../builders/brandInk.js";
 import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
 import { pickAccentText, onFilled } from "../../builders/accentText.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
 // 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 = buildDarkPalette(light);
 const PRIMARY_500 = "#e4e4e7";
 const SECONDARY_500 = "#a1a1aa";
 const primary = {
@@ -146,28 +146,32 @@ const table = {
         900: "#a1a1aa",
     },
 };
-const palette = {
-    ...derived,
-    gradient: { from: PRIMARY_500, to: "#a1a1aa" },
-    primary,
-    secondary,
-    tertiary: { ...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: pickAccentText(primary, derived.backgroundColor.main),
-    onPrimary: onFilled(PRIMARY_500, derived.white, derived.black),
-    boxShadow: {
-        primary: buildPrimaryShadowTint(PRIMARY_500),
-        error: derived.boxShadow.error,
-        default: "#00000080",
-    },
+const buildPalette = () => {
+    const derived = buildDarkPalette(light);
+    return {
+        ...derived,
+        gradient: { from: PRIMARY_500, to: "#a1a1aa" },
+        primary,
+        secondary,
+        tertiary: { ...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: pickAccentText(primary, derived.backgroundColor.main),
+        onPrimary: onFilled(PRIMARY_500, derived.white, derived.black),
+        boxShadow: {
+            primary: buildPrimaryShadowTint(PRIMARY_500),
+            error: derived.boxShadow.error,
+            default: "#00000080",
+        },
+    };
 };
+const palette = lazyPalette(light, buildPalette);
 export default palette;

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

@@ -1,4 +1,5 @@
 // Pure color math, no dependencies or platform APIs — safe for the mobile port.
+import { memoize } from "./memo.js";
 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.
 export function hexToRgb(hex) {
@@ -105,14 +106,17 @@ export 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 = 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. */
 export 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. */
 export function contrastRatio(a, b) {

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

@@ -1,6 +1,7 @@
 import { contrastRatio } from "./color.js";
 import { AA_NORMAL_TEXT, isDarkCanvas, onFilled } from "./accentText.js";
 import { AA_NON_TEXT } from "./outlineRung.js";
+import { memoize, scaleKey } from "./memo.js";
 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] };
@@ -51,12 +52,8 @@ export const darkerFillRung = (scale, canvas, white, step) => {
 };
 /** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */
 export const labelOnFill = (fill, white, black) => onFilled(fill, white, black);
-// Consumer-facing helper: fill rung + ink for solid/hover/active. Never pair scale[500] with onFilled by hand.
-export const resolveFilledSurface = (scale, colors) => {
-    const { white, black, backgroundColor, background } = colors;
-    const canvas = contrastRatio(scale[500], backgroundColor.main) <= contrastRatio(scale[500], background[50])
-        ? backgroundColor.main
-        : background[50];
+const filledSurfaceMemo = memoize((scale, white, black, main, card) => {
+    const canvas = contrastRatio(scale[500], main) <= contrastRatio(scale[500], card) ? main : card;
     const rung = solidFillRung(scale, white, canvas);
     const fill = scale[rung];
     const hoverRung = darkerFillRung(scale, canvas, white, 0);
@@ -74,4 +71,7 @@ export const resolveFilledSurface = (scale, colors) => {
         activeFill,
         activeColor: labelOnFill(activeFill, white, black),
     };
-};
+}, (scale, white, black, main, card) => `${scaleKey(scale)}|${white}|${black}|${main}|${card}`);
+export const resolveFilledSurface = (scale, colors) => ({
+    ...filledSurfaceMemo(scale, colors.white, colors.black, colors.backgroundColor.main, colors.background[50]),
+});

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

@@ -0,0 +1,49 @@
+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.
+export 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;
+};
+// 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);
+export const paletteKeys = (source) => [
+    ...Object.keys(source),
+    ...DERIVED_KEYS.filter((key) => !(key in source)),
+];
+/** A palette derived from `source` on its first read; same keys, order and values as `build()`. */
+export const lazyPalette = (source, build) => lazyObject(paletteKeys(source), build);

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

@@ -0,0 +1,21 @@
+const registry = [];
+export const MEMO_LIMIT = 1024;
+// NOTE: clear-on-overflow, not LRU — a hit stays one Map lookup; contrast walks mint many one-off keys.
+export const memoize = (fn, keyOf, limit = 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;
+    };
+};
+export const scaleKey = (s) => `${s[50]}|${s[100]}|${s[200]}|${s[300]}|${s[400]}|${s[500]}|${s[600]}|${s[700]}|${s[800]}|${s[900]}`;
+export const memoCaches = () => registry.map(({ cache, limit }) => ({ size: cache.size, limit }));
+export const clearMemoCaches = () => registry.forEach(({ cache }) => cache.clear());

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

@@ -0,0 +1,46 @@
+export const READS_MEMO_LIMIT = 16;
+// NOTE: keyed on exactly the props a call read; a call that enumerates or probes props is never cached.
+export const memoiseByReads = (fn, limit = 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;
+    };
+};

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

@@ -1,4 +1,5 @@
 import { contrastRatio, hexToHsl, relativeLuminance, withLightness } from "./color.js";
+import { memoize } from "./memo.js";
 export const MIN_PERCEPTIBLE_STEP = 1.15;
 export const AA_NON_TEXT = 3;
 // NOTE: settles below AA_NON_TEXT — focusRing.ts covers the 1.4.11 gate instead.
@@ -22,7 +23,8 @@ export function tintStep(seed, backdrop, target) {
     }
     return withLightness(seed, away > 0 ? 100 : 0, s);
 }
-export function liftToContrast(hex, backdrop, target = AA_NON_TEXT) {
+const contrastKey = (hex, backdrop, target) => `${hex}|${backdrop}|${target}`;
+const liftMemo = memoize((hex, backdrop, target) => {
     if (contrastRatio(hex, backdrop) >= target)
         return hex;
     const { s, l: start } = hexToHsl(hex);
@@ -38,8 +40,11 @@ export function liftToContrast(hex, backdrop, target = AA_NON_TEXT) {
     }
     const ends = [withLightness(hex, 100, s), withLightness(hex, 0, s)];
     return contrastRatio(ends[0], backdrop) >= contrastRatio(ends[1], backdrop) ? ends[0] : ends[1];
+}, contrastKey);
+export function liftToContrast(hex, backdrop, target = AA_NON_TEXT) {
+    return liftMemo(hex, backdrop, target);
 }
-export function softenToContrast(hex, backdrop, target) {
+const softenMemo = memoize((hex, backdrop, target) => {
     if (contrastRatio(hex, backdrop) <= target)
         return hex;
     const { s, l: start } = hexToHsl(hex);
@@ -52,6 +57,9 @@ export function softenToContrast(hex, backdrop, target) {
         softest = next;
     }
     return softest;
+}, contrastKey);
+export function softenToContrast(hex, backdrop, target) {
+    return softenMemo(hex, backdrop, target);
 }
 // NOTE: border[*] is untouched — it draws decorative table gridlines, outside 1.4.11.
 export function withOutlineRung(palette) {

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

@@ -1,6 +1,7 @@
 import { isDarkCanvas } from "./accentText.js";
 import { compositeOver } from "./color.js";
 import { liftToContrast } from "./outlineRung.js";
+import { memoize } from "./memo.js";
 export const TONES = ["neutral", "info", "success", "warning", "error"];
 export const toneToColorScheme = {
     neutral: "gray",
@@ -26,10 +27,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. */
-export const resolveSoftTone = (colors, scale, surface = colors.backgroundColor.main) => {
+const softToneMemo = memoize((hue, surface) => {
     const dark = 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);
@@ -44,4 +43,6 @@ export const resolveSoftTone = (colors, scale, surface = colors.backgroundColor.
         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. */
+export const resolveSoftTone = (colors, scale, surface = colors.backgroundColor.main) => ({ ...softToneMemo(scale[500], surface) });

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

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

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

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

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

@@ -1,8 +1,24 @@
-export const MOTION_MS = { fast: 150, base: 200 };
-export const MOTION_EASE = "cubic-bezier(0.2, 0, 0, 1)";
+export const MOTION_MS = { fast: 150, base: 200, enter: 200, exit: 200 };
+/** Pebble easing curves (mobile `pebble-spec.json` motion.easing); `in` is Pebble's `accelerate`. */
+export const MOTION_BEZIER = {
+    standard: [0.2, 0, 0, 1],
+    out: [0.16, 1, 0.3, 1],
+    in: [0.3, 0, 1, 1],
+};
+export const cubicBezierCss = (curve) => `cubic-bezier(${curve.join(", ")})`;
+export const MOTION_EASE = cubicBezierCss(MOTION_BEZIER.standard);
+export const MOTION_EASE_OUT = cubicBezierCss(MOTION_BEZIER.out);
+export const MOTION_EASE_IN = cubicBezierCss(MOTION_BEZIER.in);
+/** Periods for loops that are feedback, not transitions: skeleton pulse, spinner turn, progress sweep. */
+export const MOTION_LOOP_MS = { pulse: 700, spin: 800, sweep: 1200 };
 /** A `transition` value for named properties only — `all` also animates layout and colour flips. */
-export const transitionFor = (properties, speed = "fast") => {
+export 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} ${MOTION_MS[speed]}ms ${MOTION_EASE}`).join(", ");
+    const ease = cubicBezierCss(MOTION_BEZIER[curve]);
+    return properties.map((p) => `${p} ${MOTION_MS[speed]}ms ${ease}`).join(", ");
+};
+export const motionTransition = (speed = "base", curve = "standard") => {
+    const [x1, y1, x2, y2] = MOTION_BEZIER[curve];
+    return { duration: MOTION_MS[speed] / 1000, ease: [x1, y1, x2, y2] };
 };

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

@@ -1,3 +1,4 @@
+import { RADIUS_ROLE } from "./radii.js";
 /** One density for every option row — Select, SearchSelect, SelectSearch, table filters and Chakra's MenuItem. */
 export const OPTION_ROW_SIZES = {
     xs: {
@@ -21,5 +22,5 @@ export const OPTION_ROW_SIZES = {
         avatarSize: "sm", virtualRowHeightPx: 40,
     },
 };
-export const OPTION_ROW_RADIUS = "md";
+export const OPTION_ROW_RADIUS = RADIUS_ROLE.option;
 export const optionRowSpec = (size) => OPTION_ROW_SIZES[size];

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

@@ -9,4 +9,17 @@ const radii = {
     "3xl": "1.5rem",
     full: "9999px",
 };
+/** Radius by the role a surface plays; read this instead of picking a scale step. */
+export const RADIUS_ROLE = {
+    control: "lg",
+    field: "lg",
+    option: "md",
+    tooltip: "lg",
+    chip: "full",
+    card: "xl",
+    float: "xl",
+    dialog: "xl",
+    sheet: "xl",
+    media: "lg",
+};
 export default radii;

package/dist/esm/Theme/tokens/primitives/shadows.js

@@ -1,4 +1,4 @@
-/** Light-mode shadow ramp. Dark mode deepens these — see `builders/buildDarkShadows`. */
+/** Light-mode ramp. A theme should carry `shadowsFor(mode)`, never this one in dark. */
 const shadows = {
     xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
     sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
@@ -12,4 +12,6 @@ const shadows = {
     none: "none",
     darkLg: "0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5)",
 };
+export const shadowsDark = { ...shadows };
+export const shadowsFor = (mode) => mode === "dark" ? shadowsDark : shadows;
 export default shadows;

package/dist/esm/Theme/tokens/primitives/states.js

@@ -0,0 +1 @@
+export const DISABLED_OPACITY = 0.5;

package/dist/esm/Theme/tokens/primitives/typography.js

@@ -5,7 +5,9 @@ export const fonts = {
     mono: "Inter Variable, sans-serif",
 };
 export const fontSizes = {
+    "xs-minus": "0.6875rem",
     xs: "0.75rem",
+    "xs-plus": "0.8125rem",
     sm: "0.875rem",
     md: "1rem",
     lg: "1.125rem",
@@ -30,5 +32,23 @@ export const fontWeights = {
     extrabold: 800,
     black: 900,
 };
+export const NUMERIC_TEXT = { fontVariantNumeric: "tabular-nums" };
+/** Pebble's text variants at web density; bound to Chakra as `textStyle="<name>"`. */
+export const TEXT_STYLES = {
+    title: { fontSize: "1.5rem", lineHeight: "1.875rem", fontWeight: 700, letterSpacing: "-0.02em" },
+    heading: { fontSize: "1.25rem", lineHeight: "1.625rem", fontWeight: 600, letterSpacing: "-0.015em" },
+    subheading: { fontSize: "1rem", lineHeight: "1.375rem", fontWeight: 600, letterSpacing: "-0.006em" },
+    body: { fontSize: "0.875rem", lineHeight: "1.25rem", fontWeight: 400, letterSpacing: "0" },
+    ui: { fontSize: "0.8125rem", lineHeight: "1.125rem", fontWeight: 500, letterSpacing: "0" },
+    label: { fontSize: "0.8125rem", lineHeight: "1.125rem", fontWeight: 600, letterSpacing: "0" },
+    caption: { fontSize: "0.75rem", lineHeight: "1rem", fontWeight: 500, letterSpacing: "0" },
+    overline: {
+        fontSize: "0.6875rem",
+        lineHeight: "0.875rem",
+        fontWeight: 600,
+        letterSpacing: "0.06em",
+        textTransform: "uppercase",
+    },
+};
 const typography = { fonts, fontSizes, fontWeights };
 export default typography;

package/dist/esm/Theme/tokens/primitives/zIndices.js

@@ -9,6 +9,7 @@ const zIndices = {
     overlay: 1300,
     modal: 1400,
     popover: 1500,
+    popoverNested: 1510,
     skipLink: 1600,
     toast: 1700,
     tooltip: 1800,

package/dist/esm/Utils/formatDate.js

@@ -0,0 +1,138 @@
+import { DEFAULT_LOCALE } from "./price.js";
+export const DEFAULT_DATE_FALLBACK = "—";
+const DAY_KEY = /^(\d{4})-(\d{2})-(\d{2})$/;
+const EPOCH_DIGITS = /^-?\d+$/;
+const ENGLISH = /^en(?:-|$)/i;
+const RUNTIME_SPACES = /[\u2009\u202f]/g;
+const ONE_DIGIT = /^\d$/;
+const formatters = new Map();
+const build = (locale, options) => {
+    try {
+        return new Intl.DateTimeFormat(locale, options);
+    }
+    catch {
+        try {
+            return new Intl.DateTimeFormat(DEFAULT_LOCALE, options);
+        }
+        catch {
+            return new Intl.DateTimeFormat(DEFAULT_LOCALE, { ...options, timeZone: undefined });
+        }
+    }
+};
+const formatterFor = (locale, options) => {
+    const key = JSON.stringify([locale, options]);
+    let formatter = formatters.get(key);
+    if (!formatter) {
+        const format = build(locale, options);
+        formatter = { format, english: ENGLISH.test(format.resolvedOptions().locale) };
+        formatters.set(key, formatter);
+    }
+    return formatter;
+};
+const utcNoon = ({ year, month, day }) => {
+    const date = new Date(Date.UTC(2000, month, day, 12));
+    date.setUTCFullYear(year);
+    return date;
+};
+const isValidDay = (day) => {
+    const probe = utcNoon(day);
+    return probe.getUTCFullYear() === day.year && probe.getUTCMonth() === day.month && probe.getUTCDate() === day.day;
+};
+const resolve = (value) => {
+    let date;
+    if (value instanceof Date)
+        date = value;
+    else if (typeof value === "number")
+        date = new Date(value);
+    else if (typeof value === "string") {
+        const text = value.trim();
+        if (!text)
+            return null;
+        const key = DAY_KEY.exec(text);
+        if (key) {
+            const day = { year: Number(key[1]), month: Number(key[2]) - 1, day: Number(key[3]) };
+            return isValidDay(day) ? { kind: "day", day } : null;
+        }
+        date = new Date(EPOCH_DIGITS.test(text) ? Number(text) : text);
+    }
+    else
+        return null;
+    return Number.isNaN(date.getTime()) ? null : { kind: "instant", date };
+};
+const ZONE_PARTS = { year: "numeric", month: "numeric", day: "numeric" };
+const dayIn = (date, timeZone) => {
+    if (timeZone === undefined)
+        return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
+    const read = {};
+    for (const part of formatterFor("en-US", { ...ZONE_PARTS, timeZone }).format.formatToParts(date)) {
+        read[part.type] = Number(part.value);
+    }
+    return { year: read.year, month: read.month - 1, day: read.day };
+};
+const toDay = (resolved, timeZone) => resolved.kind === "day" ? resolved.day : dayIn(resolved.date, timeZone);
+const dayOrdinal = ({ year, month, day }) => year * 10000 + month * 100 + day;
+const dateFields = (options) => ({
+    day: "2-digit",
+    month: "short",
+    ...(options.year === "never" ? {} : { year: "numeric" }),
+});
+const join = (parts, english) => parts
+    .map(({ type, value }) => {
+    if (type === "day" && ONE_DIGIT.test(value))
+        return `0${value}`;
+    if (english && type === "month" && value === "Sept")
+        return "Sep";
+    return value;
+})
+    .join("")
+    .replace(RUNTIME_SPACES, " ");
+const dayFormatter = (options) => { var _a; return formatterFor((_a = options.locale) !== null && _a !== void 0 ? _a : DEFAULT_LOCALE, { ...dateFields(options), timeZone: "UTC" }); };
+const formatDay = (day, options) => {
+    const { format, english } = dayFormatter(options);
+    return join(format.formatToParts(utcNoon(day)), english);
+};
+/** "09 Oct 2026" in en-IN; locale order and month names otherwise. Null or invalid input gives `fallback`. */
+export function formatDate(value, options = {}) {
+    var _a;
+    const resolved = resolve(value);
+    if (!resolved)
+        return (_a = options.fallback) !== null && _a !== void 0 ? _a : DEFAULT_DATE_FALLBACK;
+    return formatDay(toDay(resolved, options.timeZone), options);
+}
+/** "09 Oct 2026, 2:05 pm" in en-IN; a bare `YYYY-MM-DD` has no time, so it prints the date alone. */
+export function formatDateTime(value, options = {}) {
+    var _a, _b;
+    const resolved = resolve(value);
+    if (!resolved)
+        return (_a = options.fallback) !== null && _a !== void 0 ? _a : DEFAULT_DATE_FALLBACK;
+    if (resolved.kind === "day")
+        return formatDay(resolved.day, options);
+    const { format, english } = formatterFor((_b = options.locale) !== null && _b !== void 0 ? _b : DEFAULT_LOCALE, {
+        ...dateFields(options),
+        hour: "numeric",
+        minute: "2-digit",
+        ...(options.time ? { hour12: options.time === "12h" } : {}),
+        ...(options.timeZone ? { timeZone: options.timeZone } : {}),
+    });
+    return join(format.formatToParts(resolved.date), english);
+}
+/** "09 – 24 Oct 2026": what both ends share is written once; reversed ends are reordered, one missing end prints the other. */
+export function formatDateRange(start, end, options = {}) {
+    var _a;
+    const first = resolve(start);
+    const second = resolve(end);
+    if (!first || !second) {
+        const only = first !== null && first !== void 0 ? first : second;
+        return only ? formatDay(toDay(only, options.timeZone), options) : ((_a = options.fallback) !== null && _a !== void 0 ? _a : DEFAULT_DATE_FALLBACK);
+    }
+    const a = toDay(first, options.timeZone);
+    const b = toDay(second, options.timeZone);
+    const [from, to] = dayOrdinal(a) <= dayOrdinal(b) ? [a, b] : [b, a];
+    if (dayOrdinal(from) === dayOrdinal(to))
+        return formatDay(from, options);
+    const { format, english } = dayFormatter(options);
+    if (typeof format.formatRangeToParts !== "function") {
+        return `${formatDay(from, options)} – ${formatDay(to, options)}`;
+    }
+    return join(format.formatRangeToParts(utcNoon(from), utcNoon(to)), english);
+}

package/dist/esm/index.js

@@ -170,13 +170,18 @@ export { scrollbarStyles, globalScrollbarStyles, SCROLLBAR_WIDTH, } from "./Them
 export { placeholderInk, placeholderInkOn, fieldSurfaces } from "./Theme/tokens/builders/placeholderInk.js";
 export { resolveGradient, gradientCss, inkSafeGradient as inkSafeGradientToken, } from "./Theme/tokens/builders/gradientInk.js";
 export { CONTROL_SIZES, CONTROL_SIZE_NAMES, DEFAULT_CONTROL_SIZE, isControlSize, } from "./Theme/tokens/primitives/controlSizes.js";
-export { MOTION_MS, MOTION_EASE, transitionFor } from "./Theme/tokens/primitives/motion.js";
+export { MOTION_MS, MOTION_EASE, MOTION_EASE_OUT, MOTION_EASE_IN, MOTION_BEZIER, MOTION_LOOP_MS, transitionFor, motionTransition, } from "./Theme/tokens/primitives/motion.js";
+export { RADIUS_ROLE } from "./Theme/tokens/primitives/radii.js";
+export { BORDER_WIDTHS } from "./Theme/tokens/primitives/borderWidths.js";
+export { DISABLED_OPACITY } from "./Theme/tokens/primitives/states.js";
+export { NUMERIC_TEXT, TEXT_STYLES } from "./Theme/tokens/primitives/typography.js";
+export { shadowsFor } from "./Theme/tokens/primitives/shadows.js";
 export { TONES, isTone, toneToColorScheme, toneToSemantic, toneScale, toneInk, resolveSoftTone, } from "./Theme/tokens/builders/tone.js";
 export { overlayScrim, SCRIM_OPACITY } from "./Theme/tokens/builders/scrim.js";
 export { tooltipSurface } from "./Theme/tokens/builders/tooltipSurface.js";
 export { buildSurfaceRaised, raisedRule, RAISED_OVERLAY } from "./Theme/tokens/builders/surfaceRaised.js";
 export { overlayScrimStyles, OVERLAY_BLUR } from "./Theme/chakra/overlay.styles.js";
-export { usePrefersReducedMotion, reducedMotionSx, REDUCED_MOTION_QUERY } from "./Theme/chakra/motion.js";
+export { usePrefersReducedMotion, reducedMotionSx, REDUCED_MOTION_QUERY, MOTION_KEEP_CLASS, } from "./Theme/chakra/motion.js";
 export { useFieldIds } from "./Components/Common/useFieldIds.js";
 export { default as FieldMessage } from "./Components/Common/FieldMessage.js";
 export { fieldControlStyles, controlSizeStyles } from "./Components/Common/fieldStyles.js";
@@ -276,3 +281,14 @@ export { default as PinToggle } from "./Components/NavLauncher/PinToggle.js";
 export { default as NewTabLink } from "./Components/NavLauncher/NewTabLink.js";
 export { searchLauncher, searchLauncherSections, flattenScreens } from "./Components/NavLauncher/match.js";
 export { default as WizardDialog, Wizard, wizardTransition, firstInvalidStep, } from "./Components/WizardDialog/WizardDialog.js";
+export { default as Pagination } from "./Components/Pagination/Pagination.js";
+export { defaultPaginationLabels } from "./Components/Pagination/PaginationProps.js";
+export { default as ChoiceCard } from "./Components/ChoiceCard/ChoiceCard.js";
+export { default as ChoiceCardGroup } from "./Components/ChoiceCard/ChoiceCardGroup.js";
+export { default as IconButton } from "./Components/IconButton/IconButton.js";
+export { default as FormField } from "./Components/FormField/FormField.js";
+export { default as VisuallyHidden } from "./Components/VisuallyHidden/VisuallyHidden.js";
+export { default as SkipLink } from "./Components/SkipLink/SkipLink.js";
+export { formatDate, formatDateTime, formatDateRange, DEFAULT_DATE_FALLBACK } from "./Utils/formatDate.js";
+export { default as TimePicker } from "./Components/TimePicker/TimePicker.js";
+export { default as TagInput } from "./Components/TagInput/TagInput.js";