pixelize-design-library 2.3.31 → 2.4.1-beta.10

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

@@ -0,0 +1,43 @@
+"use strict";
+/**
+ * Pure typography tokens. Platform-agnostic.
+ *
+ * NOTE: the web build must additionally load the Inter Variable font face
+ * (`Theme/chakra/fonts.web.ts` does the CSS side-effect import). That import is
+ * deliberately NOT here — a CSS import would break the mobile port of this folder.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fontWeights = exports.fontSizes = exports.fonts = void 0;
+exports.fonts = {
+    body: "Inter Variable, sans-serif",
+    heading: "Inter Variable, sans-serif",
+    mono: "Inter Variable, sans-serif",
+};
+exports.fontSizes = {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem",
+    "6xl": "3.75rem",
+    "7xl": "4.5rem",
+    "8xl": "6rem",
+    "9xl": "8rem",
+};
+exports.fontWeights = {
+    hairline: 100,
+    thin: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900,
+};
+const typography = { fonts: exports.fonts, fontSizes: exports.fontSizes, fontWeights: exports.fontWeights };
+exports.default = typography;

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

@@ -0,0 +1,17 @@
+declare const zIndices: {
+    hide: number;
+    auto: string;
+    base: number;
+    docked: number;
+    dropdown: number;
+    sticky: number;
+    banner: number;
+    overlay: number;
+    modal: number;
+    popover: number;
+    skipLink: number;
+    toast: number;
+    tooltip: number;
+};
+export default zIndices;
+//# sourceMappingURL=zIndices.d.ts.map

package/dist/Theme/tokens/primitives/zIndices.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zIndices.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/primitives/zIndices.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;CAcb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const zIndices = {
+    hide: -1,
+    auto: "auto",
+    base: 0,
+    docked: 10,
+    dropdown: 1000,
+    sticky: 1100,
+    banner: 1200,
+    overlay: 1300,
+    modal: 1400,
+    popover: 1500,
+    skipLink: 1600,
+    toast: 1700,
+    tooltip: 1800,
+};
+exports.default = zIndices;

package/dist/Theme/tokens/types.d.ts

@@ -0,0 +1,116 @@
+/**
+ * Pure token types — shared by web (Chakra) and mobile design libraries.
+ *
+ * PURITY RULE: nothing under `Theme/tokens/**` may import Chakra, React, or CSS.
+ * This folder is copy-paste portable to the mobile design library as-is.
+ */
+/** A 50→900 color ramp. Index roles are stable across light and dark. */
+export type ColorScale = {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+};
+/** Alpha steps derived from a brand's 500 anchor. */
+export type OpacityScale = {
+    4: string;
+    8: string;
+    16: string;
+    24: string;
+    32: string;
+    40: string;
+    48: string;
+};
+export type BrandScale = ColorScale & {
+    opacity: OpacityScale;
+};
+export type SemanticColors = {
+    success: ColorScale;
+    error: ColorScale;
+    warning: ColorScale;
+    info: ColorScale;
+};
+/** Named (non-numeric) surface keys. Elevation order inverts between light and dark. */
+export type NamedSurfaces = {
+    main: string;
+    secondary: string;
+    tertiary: string;
+    quaternary: string;
+    light: string;
+    medium: string;
+    accent: string;
+    subtle: string;
+    muted: string;
+    neutral: string;
+    base: string;
+    tableHeader: string;
+};
+export type BoxShadowTokens = {
+    primary: string;
+    error: string;
+    default: string;
+};
+/**
+ * The full per-brand color palette. One of these exists per brand per color mode
+ * (`palette.light.ts` / `palette.dark.ts`).
+ */
+export type PaletteProps = {
+    gradient: {
+        from: string;
+        to: string;
+    };
+    primary: BrandScale;
+    secondary: BrandScale;
+    tertiary: BrandScale;
+    transparent: string;
+    black: string;
+    white: string;
+    semantic: SemanticColors;
+    gray: ColorScale;
+    red: ColorScale;
+    orange: ColorScale;
+    yellow: ColorScale;
+    green: ColorScale;
+    teal: ColorScale;
+    blue: ColorScale;
+    cyan: ColorScale;
+    purple: ColorScale;
+    pink: ColorScale;
+    backgroundColor: NamedSurfaces;
+    background: ColorScale;
+    text: ColorScale;
+    header: ColorScale;
+    placeholder: ColorScale;
+    boxShadow: BoxShadowTokens;
+    sidebar: {
+        background: ColorScale;
+    };
+    boxborder: ColorScale;
+    border: ColorScale;
+    table: {
+        hover: ColorScale;
+    };
+    disabled: ColorScale;
+    /**
+     * Accent color for accent-COLORED TEXT on the canvas. Distinct from `primary[500]`, which
+     * must stay dark enough to carry a white label on a filled button and therefore cannot also
+     * be light enough to read as text on a dark canvas. Derived per brand (see `pickAccentText`).
+     *
+     * Optional so that a consumer who hand-builds a palette object against this type keeps
+     * compiling; every shipped brand palette always populates it.
+     */
+    accentText?: string;
+};
+/** Brand identities shipped by the library. */
+export type ThemeName = "lavender" | "meadow" | "radiant" | "skyline" | "slate" | "emerald" | "rosewood" | "storefront" | "zinc";
+/** User-selectable color mode. `system` follows the OS setting. */
+export type ColorMode = "light" | "dark" | "system";
+/** Color mode after `system` has been resolved against the OS. */
+export type ResolvedColorMode = "light" | "dark";
+//# sourceMappingURL=types.d.ts.map

package/dist/Theme/tokens/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/Theme/tokens/types.ts"],"names":[],"mappings":"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"}

package/dist/Theme/tokens/types.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * Pure token types — shared by web (Chakra) and mobile design libraries.
+ *
+ * PURITY RULE: nothing under `Theme/tokens/**` may import Chakra, React, or CSS.
+ * This folder is copy-paste portable to the mobile design library as-is.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Utils/planBadge.d.ts

@@ -0,0 +1,39 @@
+import { PlanPillTone } from "../Components/PlanPill/PlanPillProps";
+import { PlanExpiryInput } from "./planExpiry";
+export type PlanBadgeInput = {
+    /**
+     * Whether the org is on any plan at all. Defaults to true, so a caller that
+     * only knows the plan's name/code can omit it.
+     */
+    hasPlan?: boolean;
+    planName?: string | null;
+    /** Plan code, e.g. `"free"`. Used to detect the free plan when `isFreePlan` is omitted. */
+    planCode?: string | null;
+    /** Legacy numeric plan id, where `1` is the free plan. */
+    planId?: number | null;
+    /** Explicit free-plan flag. Overrides detection from `planCode`/`planId`/`planName`. */
+    isFreePlan?: boolean;
+    isTrial?: boolean;
+    isExpired?: boolean;
+    expiryDate?: PlanExpiryInput;
+    /** The badge is hidden entirely for anyone who cannot act on it. */
+    canManageBilling?: boolean;
+    /** Injectable clock, for tests. */
+    now?: Date;
+};
+export type PlanBadgeResult = {
+    visible: boolean;
+    label: string;
+    mobileLabel: string;
+    subtitle: string;
+    tone: PlanPillTone;
+};
+/**
+ * Turns an org's plan state into the label, urgency tone and inset-chip text for
+ * a `PlanPill` — the "Upgrade your plan" badge in an app's top bar.
+ *
+ * Copy and thresholds are centralized here so every app shows the same badge for
+ * the same org.
+ */
+export declare function resolvePlanBadge(input: PlanBadgeInput): PlanBadgeResult;
+//# sourceMappingURL=planBadge.d.ts.map

package/dist/Utils/planBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"planBadge.d.ts","sourceRoot":"","sources":["../../src/Utils/planBadge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EACL,eAAe,EAGhB,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,wFAAwF;IACxF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mCAAmC;IACnC,GAAG,CAAC,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,YAAY,CAAC;CACpB,CAAC;AA0DF;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,GAAG,eAAe,CAuDvE"}

package/dist/Utils/planBadge.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolvePlanBadge = resolvePlanBadge;
+const planExpiry_1 = require("./planExpiry");
+const UPGRADE_LABEL = "Upgrade your plan";
+const UPGRADE_MOBILE_LABEL = "Upgrade";
+const EXPIRED_MOBILE_LABEL = "Expired";
+const TRIAL_LABEL = "Trial";
+const GENERIC_PLAN_NAME = "Plan";
+const LEGACY_FREE_PLAN_ID = 1;
+const TRIAL_DANGER_DAYS = 3;
+const ACTIVE_WARNING_DAYS = 15;
+const HIDDEN = {
+    visible: false,
+    label: "",
+    mobileLabel: "",
+    subtitle: "",
+    tone: "normal",
+};
+const upgrade = (subtitle, tone = "normal") => ({
+    visible: true,
+    label: UPGRADE_LABEL,
+    mobileLabel: UPGRADE_MOBILE_LABEL,
+    subtitle,
+    tone,
+});
+const normalize = (value) => String(value !== null && value !== void 0 ? value : "")
+    .trim()
+    .toLowerCase();
+function isFreePlan(input, planName) {
+    if (input.isFreePlan !== undefined)
+        return input.isFreePlan;
+    if (normalize(input.planCode) === "free")
+        return true;
+    if (input.planId !== null && input.planId !== undefined) {
+        return Number(input.planId) === LEGACY_FREE_PLAN_ID;
+    }
+    return normalize(planName) === "free";
+}
+/** Whole days from today to the expiry day; null when there is no usable date. */
+function daysUntil(expiryDate, now) {
+    if (expiryDate === null || expiryDate === undefined || expiryDate === "") {
+        return null;
+    }
+    const expiry = expiryDate instanceof Date ? expiryDate : new Date(expiryDate);
+    if (isNaN(expiry.getTime()))
+        return null;
+    const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+    return Math.round((startOfDay(expiry).getTime() - startOfDay(now).getTime()) / 86400000);
+}
+/**
+ * Turns an org's plan state into the label, urgency tone and inset-chip text for
+ * a `PlanPill` — the "Upgrade your plan" badge in an app's top bar.
+ *
+ * Copy and thresholds are centralized here so every app shows the same badge for
+ * the same org.
+ */
+function resolvePlanBadge(input) {
+    var _a, _b;
+    if (!input.canManageBilling)
+        return HIDDEN;
+    const now = (_a = input.now) !== null && _a !== void 0 ? _a : new Date();
+    const planName = ((_b = input.planName) === null || _b === void 0 ? void 0 : _b.trim()) || "";
+    const daysLeft = daysUntil(input.expiryDate, now);
+    const remaining = (0, planExpiry_1.formatPlanRemaining)(input.expiryDate, now);
+    const elapsed = (0, planExpiry_1.formatPlanElapsed)(input.expiryDate, now);
+    // Checked before the expiry branch: a lapsed org is downgraded to free, and
+    // "Free expired" is not a state worth shouting about.
+    if (isFreePlan(input, planName))
+        return upgrade("");
+    if (input.isExpired || elapsed !== "") {
+        // "<plan> expired" as the label with the elapsed time in the inset chip —
+        // folding both behind "Upgrade your plan" made the pill wide enough to
+        // crowd the header.
+        return {
+            visible: true,
+            label: `${planName || GENERIC_PLAN_NAME} expired`,
+            mobileLabel: EXPIRED_MOBILE_LABEL,
+            subtitle: elapsed,
+            tone: "danger",
+        };
+    }
+    if (input.hasPlan === false)
+        return upgrade("");
+    if (input.isTrial) {
+        return {
+            visible: true,
+            label: TRIAL_LABEL,
+            mobileLabel: TRIAL_LABEL,
+            subtitle: remaining,
+            tone: daysLeft !== null && daysLeft <= TRIAL_DANGER_DAYS
+                ? "danger"
+                : "warning",
+        };
+    }
+    const tone = daysLeft !== null && daysLeft < ACTIVE_WARNING_DAYS ? "warning" : "normal";
+    // An active paid plan names itself — falling through to "Upgrade your plan"
+    // told users with years remaining that they were on nothing.
+    if (!planName)
+        return upgrade(remaining, tone);
+    return {
+        visible: true,
+        label: planName,
+        mobileLabel: planName,
+        subtitle: remaining,
+        tone,
+    };
+}

package/dist/Utils/planExpiry.d.ts

@@ -0,0 +1,35 @@
+export type PlanExpiryInput = string | number | Date | null | undefined;
+/**
+ * Calendar months + leftover days between two dates.
+ * Anchoring on a real month boundary keeps "1 month" honest across 28/30/31-day
+ * months, so Jan 31 → Feb 28 reads as 28 days rather than a whole month.
+ */
+export declare function splitMonthsAndDays(from: Date, to: Date): {
+    months: number;
+    days: number;
+};
+/**
+ * Time left on a plan, compactly: `"3mo left"` once a whole month remains,
+ * `"18d left"` below that. Intended for `UpgradeButton`'s `subtitle`, so it
+ * stays one short line. Returns `""` when there is no usable date or the plan
+ * has already lapsed — an expired plan is a different message, which the
+ * consuming app owns.
+ */
+export declare function formatPlanExpiry(expiryDate: PlanExpiryInput, now?: Date): string;
+/**
+ * Time left on a plan, to the minute in the final day: `"3mo left"`, `"18d left"`,
+ * then `"23h 45m left"` down to `"1m left"`. `""` once lapsed.
+ *
+ * Differs from `formatPlanExpiry` only in that last day: a calendar-day count
+ * reads as "Expires today" for the whole day, which goes stale next to a live
+ * countdown. Prefer this for a badge that sits on screen; `formatPlanExpiry`
+ * stays the cheaper day-granular option.
+ */
+export declare function formatPlanRemaining(expiryDate: PlanExpiryInput, now?: Date): string;
+/**
+ * How long ago a plan lapsed: `"1h 10m ago"` under a day, `"2d ago"` / `"1mo ago"`
+ * beyond it. `""` while the plan is still live — so a badge can say how stale a
+ * lapse is rather than a bare "expired".
+ */
+export declare function formatPlanElapsed(expiryDate: PlanExpiryInput, now?: Date): string;
+//# sourceMappingURL=planExpiry.d.ts.map

package/dist/Utils/planExpiry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"planExpiry.d.ts","sourceRoot":"","sources":["../../src/Utils/planExpiry.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;AAoCxE;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,IAAI,GACP;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAOlC;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,UAAU,EAAE,eAAe,EAC3B,GAAG,CAAC,EAAE,IAAI,GACT,MAAM,CAaR;AAYD;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,eAAe,EAC3B,GAAG,CAAC,EAAE,IAAI,GACT,MAAM,CAgBR;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,eAAe,EAC3B,GAAG,CAAC,EAAE,IAAI,GACT,MAAM,CAgBR"}

package/dist/Utils/planExpiry.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitMonthsAndDays = splitMonthsAndDays;
+exports.formatPlanExpiry = formatPlanExpiry;
+exports.formatPlanRemaining = formatPlanRemaining;
+exports.formatPlanElapsed = formatPlanElapsed;
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+function toDate(value) {
+    if (value === null || value === undefined || value === "")
+        return null;
+    const date = value instanceof Date ? new Date(value.getTime()) : new Date(value);
+    return isNaN(date.getTime()) ? null : date;
+}
+function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function addCalendarMonths(date, months) {
+    const lastDayOfTarget = new Date(date.getFullYear(), date.getMonth() + months + 1, 0).getDate();
+    return new Date(date.getFullYear(), date.getMonth() + months, Math.min(date.getDate(), lastDayOfTarget));
+}
+function daysBetween(from, to) {
+    return Math.round((to.getTime() - from.getTime()) / MS_PER_DAY);
+}
+/** Compact units (`2mo`, `5d`) — this reads inside a badge subtitle, where
+ * "2 months 5 days left" wraps. */
+function unit(count, suffix) {
+    return `${count}${suffix}`;
+}
+/**
+ * Calendar months + leftover days between two dates.
+ * Anchoring on a real month boundary keeps "1 month" honest across 28/30/31-day
+ * months, so Jan 31 → Feb 28 reads as 28 days rather than a whole month.
+ */
+function splitMonthsAndDays(from, to) {
+    let months = (to.getFullYear() - from.getFullYear()) * 12 +
+        (to.getMonth() - from.getMonth());
+    if (to.getDate() < from.getDate())
+        months -= 1;
+    if (months < 0)
+        months = 0;
+    return { months, days: daysBetween(addCalendarMonths(from, months), to) };
+}
+/**
+ * Time left on a plan, compactly: `"3mo left"` once a whole month remains,
+ * `"18d left"` below that. Intended for `UpgradeButton`'s `subtitle`, so it
+ * stays one short line. Returns `""` when there is no usable date or the plan
+ * has already lapsed — an expired plan is a different message, which the
+ * consuming app owns.
+ */
+function formatPlanExpiry(expiryDate, now) {
+    const expiry = toDate(expiryDate);
+    if (!expiry)
+        return "";
+    const expiryDay = startOfDay(expiry);
+    const today = startOfDay(now !== null && now !== void 0 ? now : new Date());
+    const daysLeft = daysBetween(today, expiryDay);
+    if (daysLeft < 0)
+        return "";
+    if (daysLeft === 0)
+        return "Expires today";
+    const { months, days } = splitMonthsAndDays(today, expiryDay);
+    return months > 0 ? `${unit(months, "mo")} left` : `${unit(days, "d")} left`;
+}
+/** Never reports `0m`; the final stretch reads `1m`. */
+function formatHoursMinutes(ms, suffix) {
+    const totalMinutes = Math.floor(ms / 60000);
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    return hours > 0
+        ? `${unit(hours, "h")} ${unit(minutes, "m")} ${suffix}`
+        : `${unit(Math.max(minutes, 1), "m")} ${suffix}`;
+}
+/**
+ * Time left on a plan, to the minute in the final day: `"3mo left"`, `"18d left"`,
+ * then `"23h 45m left"` down to `"1m left"`. `""` once lapsed.
+ *
+ * Differs from `formatPlanExpiry` only in that last day: a calendar-day count
+ * reads as "Expires today" for the whole day, which goes stale next to a live
+ * countdown. Prefer this for a badge that sits on screen; `formatPlanExpiry`
+ * stays the cheaper day-granular option.
+ */
+function formatPlanRemaining(expiryDate, now) {
+    const expiry = toDate(expiryDate);
+    if (!expiry)
+        return "";
+    const referenceNow = now !== null && now !== void 0 ? now : new Date();
+    const msLeft = expiry.getTime() - referenceNow.getTime();
+    if (msLeft < 0)
+        return "";
+    if (msLeft < MS_PER_DAY) {
+        return msLeft === 0 ? "Expires today" : formatHoursMinutes(msLeft, "left");
+    }
+    const { months, days } = splitMonthsAndDays(startOfDay(referenceNow), startOfDay(expiry));
+    return months > 0 ? `${unit(months, "mo")} left` : `${unit(days, "d")} left`;
+}
+/**
+ * How long ago a plan lapsed: `"1h 10m ago"` under a day, `"2d ago"` / `"1mo ago"`
+ * beyond it. `""` while the plan is still live — so a badge can say how stale a
+ * lapse is rather than a bare "expired".
+ */
+function formatPlanElapsed(expiryDate, now) {
+    const expiry = toDate(expiryDate);
+    if (!expiry)
+        return "";
+    const referenceNow = now !== null && now !== void 0 ? now : new Date();
+    const msAgo = referenceNow.getTime() - expiry.getTime();
+    if (msAgo <= 0)
+        return "";
+    if (msAgo < MS_PER_DAY)
+        return formatHoursMinutes(msAgo, "ago");
+    const { months, days } = splitMonthsAndDays(startOfDay(expiry), startOfDay(referenceNow));
+    return months > 0
+        ? `${unit(months, "mo")} ago`
+        : `${unit(Math.max(days, 1), "d")} ago`;
+}

package/dist/Utils/table.d.ts

@@ -14,11 +14,18 @@ export type TablePaletteColor = {
     solid: string;
     soft: string;
     text: string;
+    onSolid?: string;
 };
 /** Deterministic, theme-aware color palette for groups + status pills. */
 export declare function buildTablePalette(theme: CustomThemeProps): TablePaletteColor[];
-/** Pick a deterministic palette color for a value, with optional override hex. */
-export declare function pickTableColor(value: string | number, palette: TablePaletteColor[], override?: string): TablePaletteColor;
+/**
+ * Pick a deterministic palette color for a value, with optional override hex.
+ *
+ * `theme` is optional so existing callers that don't have it keep compiling — when omitted,
+ * `onSolid` falls back to the mode-stable absolutes ("#FFFFFF"/"#000000", same value
+ * `theme.colors.white`/`black` resolve to for every brand) instead of going undefined.
+ */
+export declare function pickTableColor(value: string | number, palette: TablePaletteColor[], override?: string, theme?: CustomThemeProps): TablePaletteColor;
 export type TableGroup = {
     value: string | number;
     label: string;

package/dist/Utils/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/Utils/table.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/Utils/table.ts"],"names":[],"mappings":"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"}

package/dist/Utils/table.js

@@ -44,6 +44,7 @@ exports.debounce = debounce;
 exports.useDebounce = useDebounce;
 exports.globalSearchFilter = globalSearchFilter;
 const react_1 = __importStar(require("react"));
+const accentText_1 = require("../Theme/tokens/builders/accentText");
 /**
  * Type-aware, null-safe comparison. Detects numbers and dates; otherwise falls
  * back to a numeric-aware locale string compare. Empty/null values sort last.
@@ -86,10 +87,13 @@ function SortMultiColumnData(data, sortConfig) {
     });
 }
 const withAlpha = (hex, aa) => /^#([0-9a-fA-F]{6})$/.test(hex) ? `${hex}${aa}` : hex;
+const FALLBACK_SOLID = "#8B3FC8";
 /** Deterministic, theme-aware color palette for groups + status pills. */
 function buildTablePalette(theme) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const c = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) !== null && _a !== void 0 ? _a : {};
+    const white = c.white || "#FFFFFF";
+    const black = c.black || "#000000";
     const bases = [
         (_b = c.primary) === null || _b === void 0 ? void 0 : _b[500],
         (_d = (_c = c.semantic) === null || _c === void 0 ? void 0 : _c.success) === null || _d === void 0 ? void 0 : _d[500],
@@ -103,11 +107,12 @@ function buildTablePalette(theme) {
         (_q = c.purple) === null || _q === void 0 ? void 0 : _q[500],
     ];
     const list = bases.filter(Boolean);
-    const fallback = ["#8B3FC8"];
+    const fallback = [FALLBACK_SOLID];
     return (list.length ? list : fallback).map((solid) => ({
         solid,
         soft: withAlpha(solid, "22"),
         text: solid,
+        onSolid: (0, accentText_1.onFilled)(solid, white, black),
     }));
 }
 const hashKey = (value) => {
@@ -117,12 +122,23 @@ const hashKey = (value) => {
         h = (h * 31 + s.charCodeAt(i)) >>> 0;
     return h;
 };
-/** Pick a deterministic palette color for a value, with optional override hex. */
-function pickTableColor(value, palette, override) {
-    if (override)
-        return { solid: override, soft: withAlpha(override, "22"), text: override };
-    if (!palette.length)
-        return { solid: "#8B3FC8", soft: "#8B3FC822", text: "#8B3FC8" };
+/**
+ * Pick a deterministic palette color for a value, with optional override hex.
+ *
+ * `theme` is optional so existing callers that don't have it keep compiling — when omitted,
+ * `onSolid` falls back to the mode-stable absolutes ("#FFFFFF"/"#000000", same value
+ * `theme.colors.white`/`black` resolve to for every brand) instead of going undefined.
+ */
+function pickTableColor(value, palette, override, theme) {
+    var _a, _b;
+    const white = ((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.white) || "#FFFFFF";
+    const black = ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.black) || "#000000";
+    if (override) {
+        return { solid: override, soft: withAlpha(override, "22"), text: override, onSolid: (0, accentText_1.onFilled)(override, white, black) };
+    }
+    if (!palette.length) {
+        return { solid: FALLBACK_SOLID, soft: withAlpha(FALLBACK_SOLID, "22"), text: FALLBACK_SOLID, onSolid: (0, accentText_1.onFilled)(FALLBACK_SOLID, white, black) };
+    }
     return palette[hashKey(value) % palette.length];
 }
 /**

package/dist/bootstrap.d.ts

@@ -0,0 +1,2 @@
+import "./index.css";
+//# sourceMappingURL=bootstrap.d.ts.map

package/dist/bootstrap.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const client_1 = __importDefault(require("react-dom/client"));
+const App_1 = __importDefault(require("./App"));
+const provider_1 = require("./Theme/provider");
+require("./index.css");
+const root = client_1.default.createRoot(document.getElementById("root"));
+// The playground uses the provider (rather than the legacy `withTheme` HOC) so the
+// light/dark/brand switcher is exercisable here. `withTheme` is still the shipped
+// default export and is unchanged.
+root.render((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(provider_1.PixelizeThemeProvider, { children: (0, jsx_runtime_1.jsx)(App_1.default, {}) }) }));