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

package/dist/Theme/chakra/Menu.styles.js

@@ -6,6 +6,7 @@ const anatomy_1 = require("@chakra-ui/anatomy");
 const rowStates_1 = require("../tokens/builders/rowStates");
 const optionRowSizes_1 = require("../tokens/primitives/optionRowSizes");
 const paletteFromTheme_1 = require("./paletteFromTheme");
+const overlay_styles_1 = require("./overlay.styles");
 const itemRowSpec = optionRowSizes_1.OPTION_ROW_SIZES.sm;
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.menuAnatomy.keys);
 const $bg = (0, react_1.cssVar)("menu-bg");
@@ -24,12 +25,14 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderWidth: "1px",
             borderStyle: "solid",
             borderColor: colors.boxborder[200],
+            ...overlay_styles_1.POPUP_SURFACE,
         },
         item: {
             minH: itemRowSpec.minH,
             px: itemRowSpec.px,
             py: itemRowSpec.py,
             mx: itemRowSpec.mx,
+            width: `calc(100% - 2 * ${itemRowSpec.mx})`,
             fontSize: itemRowSpec.fontSize,
             borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS,
             bg: "transparent",

package/dist/Theme/chakra/Popover.styles.d.ts

@@ -1,17 +1,9 @@
 import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $popperBg: {
-    variable: string;
-    reference: string;
-};
-declare const $arrowShadowColor: {
-    variable: string;
-    reference: string;
-};
 export declare const Popover: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         content: {
-            [$popperBg.variable]: string;
-            [$arrowShadowColor.variable]: string;
+            borderRadius: "xl";
+            boxShadow: "md";
             bg: string;
             color: string;
             borderWidth: string;
@@ -36,4 +28,3 @@ export declare const Popover: {
     } | undefined;
     parts: ("header" | "content" | "body" | "footer" | "closeButton" | "popper" | "arrow")[];
 };
-export {};

package/dist/Theme/chakra/Popover.styles.js

@@ -4,6 +4,7 @@ exports.Popover = void 0;
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
 const paletteFromTheme_1 = require("./paletteFromTheme");
+const overlay_styles_1 = require("./overlay.styles");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.popoverAnatomy.keys);
 const $popperBg = (0, react_1.cssVar)("popper-bg");
 const $arrowShadowColor = (0, react_1.cssVar)("popper-arrow-shadow-color");
@@ -19,6 +20,7 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderWidth: "1px",
             borderStyle: "solid",
             borderColor: colors.boxborder[200],
+            ...overlay_styles_1.POPUP_SURFACE,
         },
     };
 });

package/dist/Theme/chakra/common.web.d.ts

@@ -132,6 +132,10 @@ declare const common: {
         inner: string;
         none: string;
         darkLg: string;
+        card: string;
+        float: string;
+        dialog: string;
+        sheet: string;
     };
     radii: {
         none: string;
@@ -155,6 +159,7 @@ declare const common: {
         overlay: number;
         modal: number;
         popover: number;
+        popoverNested: number;
         skipLink: number;
         toast: number;
         tooltip: number;

package/dist/Theme/chakra/componentStyles.d.ts

@@ -94,10 +94,15 @@ export declare const componentStyles: {
                     [x: string]: string;
                 };
             };
+            elevated: {
+                container: {
+                    [x: string]: string;
+                };
+            };
         } | undefined;
         defaultProps?: {
             size?: "sm" | "md" | "lg" | undefined;
-            variant?: "outline" | undefined;
+            variant?: "elevated" | "outline" | undefined;
             colorScheme?: string | undefined;
         } | undefined;
         parts: ("header" | "container" | "body" | "footer")[];
@@ -168,7 +173,8 @@ export declare const componentStyles: {
     Menu: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             list: {
-                [x: string]: string;
+                borderRadius: "xl";
+                boxShadow: "md";
                 bg: string;
                 color: string;
                 borderWidth: string;
@@ -180,8 +186,9 @@ export declare const componentStyles: {
                 px: string;
                 py: string;
                 mx: string;
+                width: string;
                 fontSize: string;
-                borderRadius: string;
+                borderRadius: "md";
                 bg: string;
                 _focus: {
                     [x: string]: string;
@@ -284,7 +291,8 @@ export declare const componentStyles: {
     Popover: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             content: {
-                [x: string]: string;
+                borderRadius: "xl";
+                boxShadow: "md";
                 bg: string;
                 color: string;
                 borderWidth: string;

package/dist/Theme/chakra/componentStyles.js

@@ -15,6 +15,7 @@ const accentText_1 = require("../tokens/builders/accentText");
 const filledSurface_1 = require("../tokens/builders/filledSurface");
 const outlineRung_1 = require("../tokens/builders/outlineRung");
 const tone_1 = require("../tokens/builders/tone");
+const skeletonShimmer_1 = require("../tokens/builders/skeletonShimmer");
 const tooltipSurface_1 = require("../tokens/builders/tooltipSurface");
 const Drawer_styles_1 = require("./Drawer.styles");
 const Menu_styles_1 = require("./Menu.styles");
@@ -145,12 +146,15 @@ const $skeletonStart = (0, react_1.cssVar)("skeleton-start-color");
 const $skeletonEnd = (0, react_1.cssVar)("skeleton-end-color");
 // NOTE: fixes Chakra's Skeleton hardcoding gray.100/.400 via `_dark` (dead here) — an explicit startColor/endColor prop still wins.
 const Skeleton = {
-    baseStyle: ({ theme }) => ({
-        [$skeletonStart.variable]: (0, paletteFromTheme_1.paletteOf)(theme).gray[100],
-        [$skeletonEnd.variable]: (0, paletteFromTheme_1.paletteOf)(theme).gray[300],
-        background: $skeletonStart.reference,
-        borderColor: $skeletonEnd.reference,
-    }),
+    baseStyle: ({ theme }) => {
+        const shimmer = (0, skeletonShimmer_1.skeletonShimmer)((0, paletteFromTheme_1.paletteOf)(theme));
+        return {
+            [$skeletonStart.variable]: shimmer.start,
+            [$skeletonEnd.variable]: shimmer.end,
+            background: $skeletonStart.reference,
+            borderColor: $skeletonEnd.reference,
+        };
+    },
 };
 // NOTE: uses Chakra's own shorthand style keys (bg/w/h/pos) + !important — extendTheme deep-merges by key, so mismatched keys let Chakra's stock value win.
 const Radio = {

package/dist/Theme/chakra/createBrandTheme.d.ts

@@ -1,7 +1,10 @@
 import type { PaletteProps, ResolvedColorMode } from "../tokens/types";
+import { type ReducedMotionScope } from "./motion";
 export interface CreateBrandThemeOptions {
     /** Which palette this theme represents. Defaults to `light`. */
     colorMode?: ResolvedColorMode;
+    /** `"global"` adds one document-wide reduced-motion rule; the default leaves it to each component. */
+    reducedMotion?: ReducedMotionScope;
 }
 export declare const createBrandTheme: (palette: PaletteProps, options?: CreateBrandThemeOptions) => Record<string, any>;
 export default createBrandTheme;

package/dist/Theme/chakra/createBrandTheme.js

@@ -11,18 +11,44 @@ const componentStyles_1 = require("./componentStyles");
 const filledSurface_1 = require("../tokens/builders/filledSurface");
 const scrollbar_1 = require("../tokens/builders/scrollbar");
 const focusRing_styles_1 = require("./focusRing.styles");
+const shadows_1 = require("../tokens/primitives/shadows");
+const motion_1 = require("./motion");
+const typography_1 = require("../tokens/primitives/typography");
+const memoByReads_1 = require("../tokens/builders/memoByReads");
+const memoisedStyle = (value) => typeof value === "function" ? (0, memoByReads_1.memoiseByReads)(value) : value;
+const memoisedGroup = (group) => Object.fromEntries(Object.entries(group).map(([key, value]) => [key, memoisedStyle(value)]));
+const memoisedConfig = (config) => Object.fromEntries(Object.entries(config).map(([key, value]) => [
+    key,
+    key === "baseStyle"
+        ? memoisedStyle(value)
+        : key === "variants" || key === "sizes"
+            ? memoisedGroup(value)
+            : value,
+]));
+// NOTE: extendTheme deep-merges Chakra's and our style output on every call; cache it per theme.
+const withMemoisedStyles = (theme) => {
+    const components = theme.components;
+    return {
+        ...theme,
+        components: {
+            ...components,
+            ...Object.fromEntries(Object.keys(componentStyles_1.componentStyles).map((name) => [name, memoisedConfig(components[name])])),
+        },
+    };
+};
 // Builds a Chakra theme from a pure brand palette — dark mode works by swapping which palette it carries.
 const createBrandTheme = (palette, options = {}) => {
     var _a;
     const colorMode = (_a = options.colorMode) !== null && _a !== void 0 ? _a : "light";
+    const motionRule = options.reducedMotion === "global" ? motion_1.reducedMotionGlobalStyles : {};
     const brand = {
         colors: palette,
         ...fonts_web_1.default,
         ...common_web_1.default,
         // NOTE: binds the palette-derived ring to shadows.outline — Chakra's stock one failed 1.4.11 on every brand.
-        shadows: { ...common_web_1.default.shadows, outline: (0, focusRing_styles_1.focusRingShadow)(palette) },
+        shadows: { ...(0, shadows_1.shadowsFor)(colorMode), outline: (0, focusRing_styles_1.focusRingShadow)(palette) },
     };
-    return (0, react_1.extendTheme)({
+    return withMemoisedStyles((0, react_1.extendTheme)({
         ...brand,
         config: {
             ...common_web_1.default.config,
@@ -70,12 +96,16 @@ const createBrandTheme = (palette, options = {}) => {
                             WebkitTextFillColor: palette.text[900],
                             caretColor: palette.text[900],
                         },
+                        ...motionRule,
                     },
                 },
             }
-            : {}),
+            : options.reducedMotion === "global"
+                ? { styles: { global: motionRule } }
+                : {}),
+        textStyles: typography_1.TEXT_STYLES,
         components: componentStyles_1.componentStyles,
-    });
+    }));
 };
 exports.createBrandTheme = createBrandTheme;
 exports.default = exports.createBrandTheme;

package/dist/Theme/chakra/focusRing.styles.d.ts

@@ -10,6 +10,8 @@ type WithBrandGlow = {
     primary: BrandScale;
 };
 export declare const focusRingShadow: (colors: WithFocusRing) => string;
+/** For controls whose rounded shell clips overflow: the same halo and ring, drawn inside the border box. */
+export declare const insetFocusRingShadow: (colors: WithFocusRing) => string;
 export declare const FOCUS_VISIBLE_OVER_STATE = "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible";
 export declare const focusVisibleRing: (colors: WithFocusRing) => {
     outline: string;

package/dist/Theme/chakra/focusRing.styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.focusVisibleStyles = exports.fieldFocusVisible = exports.focusGlowShadow = exports.FOCUS_GLOW_ALPHA = exports.FOCUS_GLOW_SPREAD = exports.FOCUS_GLOW_BLUR = exports.focusVisibleRing = exports.FOCUS_VISIBLE_OVER_STATE = exports.focusRingShadow = exports.FOCUS_RING_WIDTH = exports.FOCUS_HALO_WIDTH = void 0;
+exports.focusVisibleStyles = exports.fieldFocusVisible = exports.focusGlowShadow = exports.FOCUS_GLOW_ALPHA = exports.FOCUS_GLOW_SPREAD = exports.FOCUS_GLOW_BLUR = exports.focusVisibleRing = exports.FOCUS_VISIBLE_OVER_STATE = exports.insetFocusRingShadow = exports.focusRingShadow = exports.FOCUS_RING_WIDTH = exports.FOCUS_HALO_WIDTH = void 0;
 // Web binding for the focusRing token pair — colors come from tokens/builders/focusRing.ts; CSS shape is web-only.
 /** Inner band, in the surface tone: separates the ring from the control's own fill. */
 exports.FOCUS_HALO_WIDTH = 2;
@@ -10,6 +10,10 @@ exports.FOCUS_RING_WIDTH = 4;
 const focusRingShadow = (colors) => `0 0 0 ${exports.FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
     `0 0 0 ${exports.FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
 exports.focusRingShadow = focusRingShadow;
+/** For controls whose rounded shell clips overflow: the same halo and ring, drawn inside the border box. */
+const insetFocusRingShadow = (colors) => `inset 0 0 0 ${exports.FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
+    `inset 0 0 0 ${exports.FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
+exports.insetFocusRingShadow = insetFocusRingShadow;
 // NOTE: stacked pseudo-classes raise specificity above Chakra's _hover, so a hovered+focused button keeps its ring.
 exports.FOCUS_VISIBLE_OVER_STATE = "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible";
 // NOTE: transparent outline isn't decorative — forced-colors mode drops box-shadow but repaints an outline.

package/dist/Theme/chakra/fonts.web.d.ts

@@ -7,7 +7,9 @@ declare const fonts: {
         mono: string;
     };
     fontSizes: {
+        "xs-minus": string;
         xs: string;
+        "xs-plus": string;
         sm: string;
         md: string;
         lg: string;

package/dist/Theme/chakra/motion.d.ts

@@ -1,5 +1,20 @@
 import type { SystemStyleObject } from "@chakra-ui/react";
 export declare const REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: reduce)";
+export declare const MOTION_OK_QUERY = "@media (prefers-reduced-motion: no-preference)";
 export declare const usePrefersReducedMotion: () => boolean;
 /** Spread into `sx`: drops transitions and animations when the user asks for less motion. */
 export declare const reducedMotionSx: (overrides?: SystemStyleObject) => SystemStyleObject;
+/** Add to an element whose loop is essential feedback; it and its subtree keep moving. */
+export declare const MOTION_KEEP_CLASS = "pz-motion-keep";
+export declare const REDUCED_MOTION_SELECTOR: string;
+export declare const reducedMotionGlobalStyles: {
+    "@media (prefers-reduced-motion: reduce)": {
+        [REDUCED_MOTION_SELECTOR]: {
+            transitionDuration: string;
+            animationDuration: string;
+            animationIterationCount: string;
+            scrollBehavior: string;
+        };
+    };
+};
+export type ReducedMotionScope = "components" | "global";

package/dist/Theme/chakra/motion.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reducedMotionSx = exports.usePrefersReducedMotion = exports.REDUCED_MOTION_QUERY = void 0;
+exports.reducedMotionGlobalStyles = exports.REDUCED_MOTION_SELECTOR = exports.MOTION_KEEP_CLASS = exports.reducedMotionSx = exports.usePrefersReducedMotion = exports.MOTION_OK_QUERY = exports.REDUCED_MOTION_QUERY = void 0;
 const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 exports.REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: reduce)";
+exports.MOTION_OK_QUERY = "@media (prefers-reduced-motion: no-preference)";
 const MEDIA = "(prefers-reduced-motion: reduce)";
 const usePrefersReducedMotion = () => (0, useMatchMedia_1.useMatchMedia)(MEDIA, false);
 exports.usePrefersReducedMotion = usePrefersReducedMotion;
@@ -11,3 +12,28 @@ const reducedMotionSx = (overrides = {}) => ({
     [exports.REDUCED_MOTION_QUERY]: { transition: "none", animation: "none", ...overrides },
 });
 exports.reducedMotionSx = reducedMotionSx;
+/** Add to an element whose loop is essential feedback; it and its subtree keep moving. */
+exports.MOTION_KEEP_CLASS = "pz-motion-keep";
+const KEPT = [
+    ".chakra-spinner",
+    ".chakra-progress",
+    ".chakra-progress *",
+    `.${exports.MOTION_KEEP_CLASS}`,
+    `.${exports.MOTION_KEEP_CLASS} *`,
+];
+const notKept = KEPT.map((selector) => `:not(${selector})`).join("");
+exports.REDUCED_MOTION_SELECTOR = [
+    `*${notKept}`,
+    `*${notKept}::before`,
+    `*${notKept}::after`,
+].join(", ");
+exports.reducedMotionGlobalStyles = {
+    [exports.REDUCED_MOTION_QUERY]: {
+        [exports.REDUCED_MOTION_SELECTOR]: {
+            transitionDuration: "0.01ms !important",
+            animationDuration: "0.01ms !important",
+            animationIterationCount: "1 !important",
+            scrollBehavior: "auto !important",
+        },
+    },
+};

package/dist/Theme/chakra/overlay.styles.d.ts

@@ -1,5 +1,10 @@
 import type { PaletteProps } from "../tokens/types";
 export declare const OVERLAY_BLUR = "blur(4px)";
+/** Radius and elevation every anchored popup shares: menus, popovers, selects, dropdowns. */
+export declare const POPUP_SURFACE: {
+    readonly borderRadius: "xl";
+    readonly boxShadow: "md";
+};
 /** The one Modal/Drawer backdrop; reuse it for any custom full-screen scrim. */
 export declare const overlayScrimStyles: (colors: Pick<PaletteProps, "black">) => {
     bg: string;

package/dist/Theme/chakra/overlay.styles.js

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dialogPartStyles = exports.overlayScrimStyles = exports.OVERLAY_BLUR = void 0;
+exports.dialogPartStyles = exports.overlayScrimStyles = exports.POPUP_SURFACE = exports.OVERLAY_BLUR = void 0;
 const scrim_1 = require("../tokens/builders/scrim");
 const surfaceRaised_1 = require("../tokens/builders/surfaceRaised");
+const radii_1 = require("../tokens/primitives/radii");
 exports.OVERLAY_BLUR = "blur(4px)";
+/** Radius and elevation every anchored popup shares: menus, popovers, selects, dropdowns. */
+exports.POPUP_SURFACE = { borderRadius: radii_1.RADIUS_ROLE.float, boxShadow: "md" };
 /** The one Modal/Drawer backdrop; reuse it for any custom full-screen scrim. */
 const overlayScrimStyles = (colors) => ({
     bg: (0, scrim_1.overlayScrim)(colors),

package/dist/Theme/index.d.ts

@@ -1,5 +1,6 @@
 import createBrandTheme from "./chakra/createBrandTheme";
 import type { ResolvedColorMode, ThemeName } from "./tokens/types";
+type BrandTheme = ReturnType<typeof createBrandTheme>;
 declare const lavender: Record<string, any>;
 declare const meadow: Record<string, any>;
 declare const radiant: Record<string, any>;
@@ -21,6 +22,6 @@ export declare const ThemesList: {
     storefront: Record<string, any>;
     zinc: Record<string, any>;
 };
-export type BrandThemes = Record<ThemeName, Record<ResolvedColorMode, ReturnType<typeof createBrandTheme>>>;
+export type BrandThemes = Record<ThemeName, Record<ResolvedColorMode, BrandTheme>>;
 /** Light + dark theme per brand. `PixelizeThemeProvider` swaps between these. */
 export declare const brandThemes: BrandThemes;

package/dist/Theme/index.js

@@ -6,24 +6,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.brandThemes = exports.ThemesList = exports.zinc = exports.storefront = exports.rosewood = exports.emerald = exports.slate = exports.lavender = exports.radiant = exports.meadow = exports.skyline = void 0;
 const createBrandTheme_1 = __importDefault(require("./chakra/createBrandTheme"));
 const brands_1 = require("./tokens/brands");
-// Chakra themes per brand, built from the pure palettes in tokens/brands via createBrandTheme.
+const lazy_1 = require("./tokens/builders/lazy");
+// NOTE: lavender is built at import as the shape template — every light theme shares its keys.
 const lavender = (0, createBrandTheme_1.default)(brands_1.lightPalettes.lavender);
 exports.lavender = lavender;
-const meadow = (0, createBrandTheme_1.default)(brands_1.lightPalettes.meadow);
+const lightThemeKeys = Object.keys(lavender);
+const lazyLightTheme = (brand) => (0, lazy_1.lazyObject)(lightThemeKeys, () => (0, createBrandTheme_1.default)(brands_1.lightPalettes[brand]));
+const meadow = lazyLightTheme("meadow");
 exports.meadow = meadow;
-const radiant = (0, createBrandTheme_1.default)(brands_1.lightPalettes.radiant);
+const radiant = lazyLightTheme("radiant");
 exports.radiant = radiant;
-const skyline = (0, createBrandTheme_1.default)(brands_1.lightPalettes.skyline);
+const skyline = lazyLightTheme("skyline");
 exports.skyline = skyline;
-const slate = (0, createBrandTheme_1.default)(brands_1.lightPalettes.slate);
+const slate = lazyLightTheme("slate");
 exports.slate = slate;
-const emerald = (0, createBrandTheme_1.default)(brands_1.lightPalettes.emerald);
+const emerald = lazyLightTheme("emerald");
 exports.emerald = emerald;
-const rosewood = (0, createBrandTheme_1.default)(brands_1.lightPalettes.rosewood);
+const rosewood = lazyLightTheme("rosewood");
 exports.rosewood = rosewood;
-const storefront = (0, createBrandTheme_1.default)(brands_1.lightPalettes.storefront);
+const storefront = lazyLightTheme("storefront");
 exports.storefront = storefront;
-const zinc = (0, createBrandTheme_1.default)(brands_1.lightPalettes.zinc);
+const zinc = lazyLightTheme("zinc");
 exports.zinc = zinc;
 // NOTE: consumers iterate this to render theme pickers — key order is load-bearing. Stays light-only.
 exports.ThemesList = {

package/dist/Theme/provider/PixelizeThemeProvider.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import type { ColorMode, ResolvedColorMode, ThemeName } from "../tokens/types";
+import { type ReducedMotionScope } from "../chakra/motion";
 export type ThemeModeContextValue = {
     mode: ColorMode;
     resolvedMode: ResolvedColorMode;
@@ -17,6 +18,8 @@ export type PixelizeThemeProviderProps = {
     storageKey?: string;
     disablePersistence?: boolean;
     themeOverrides?: Record<string, unknown>;
+    /** `"global"` opts the whole document into one reduced-motion rule; default is per component. */
+    reducedMotion?: ReducedMotionScope;
 };
 export declare const ThemeModeContext: React.Context<ThemeModeContextValue | undefined>;
-export declare const PixelizeThemeProvider: ({ children, brand: brandProp, onBrandChange, defaultMode, onModeChange, storageKey, disablePersistence, themeOverrides, }: PixelizeThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PixelizeThemeProvider: ({ children, brand: brandProp, onBrandChange, defaultMode, onModeChange, storageKey, disablePersistence, themeOverrides, reducedMotion, }: PixelizeThemeProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Theme/provider/PixelizeThemeProvider.js

@@ -9,6 +9,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const index_1 = require("../index");
 const Toaster_1 = __importDefault(require("../../Components/Toaster/Toaster"));
+const motion_1 = require("../chakra/motion");
 const colorModeStorage_1 = require("./colorModeStorage");
 const DEFAULT_BRAND = "lavender";
 const DEFAULT_MODE = "system";
@@ -22,7 +23,7 @@ const forcedLightColorModeManager = {
 };
 exports.ThemeModeContext = (0, react_1.createContext)(undefined);
 // NOTE: Chakra's own color mode stays unsynced from resolvedMode — its built-in `_dark:` blocks assume the opposite ramp direction. Read mode via useThemeMode(), not useColorModeValue().
-const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, }) => {
+const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, reducedMotion = "components", }) => {
     const [mode, setModeState] = (0, react_1.useState)(() => { var _a; return (_a = (disablePersistence ? undefined : (0, colorModeStorage_1.readStoredTheme)(storageKey).mode)) !== null && _a !== void 0 ? _a : defaultMode; });
     const [brand, setBrandState] = (0, react_1.useState)(() => { var _a; return (_a = (disablePersistence ? undefined : (0, colorModeStorage_1.readStoredTheme)(storageKey).brand)) !== null && _a !== void 0 ? _a : brandProp; });
     const [systemMode, setSystemMode] = (0, react_1.useState)(colorModeStorage_1.getSystemColorMode);
@@ -64,14 +65,17 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
         (0, colorModeStorage_1.writeStoredTheme)(storageKey, { mode, brand });
     }, [mode, brand, disablePersistence, storageKey]);
     const resolvedMode = mode === "system" ? systemMode : mode;
+    // NOTE: the page re-themes in an interruptible second commit; the switcher paints first.
+    const appliedMode = (0, react_1.useDeferredValue)(resolvedMode);
+    const appliedBrand = (0, react_1.useDeferredValue)(brand);
     // NOTE: sets CSS color-scheme so native chrome (select popups, date pickers) matches the mode.
     (0, react_1.useLayoutEffect)(() => {
-        document.documentElement.style.colorScheme = resolvedMode;
-    }, [resolvedMode]);
+        document.documentElement.style.colorScheme = appliedMode;
+    }, [appliedMode]);
     // NOTE: re-asserted after Chakra's own ColorModeProvider effect overwrites it back to "light".
     (0, react_1.useEffect)(() => {
-        document.documentElement.style.colorScheme = resolvedMode;
-    }, [resolvedMode]);
+        document.documentElement.style.colorScheme = appliedMode;
+    }, [appliedMode]);
     const onModeChangeRef = (0, react_1.useRef)(onModeChange);
     const onBrandChangeRef = (0, react_1.useRef)(onBrandChange);
     (0, react_1.useLayoutEffect)(() => {
@@ -93,14 +97,18 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
     // NOTE: keyed by value, not identity — themeOverrides is usually an inline literal.
     const overridesKey = themeOverrides ? JSON.stringify(themeOverrides) : "";
     const resolvedTheme = (0, react_1.useMemo)(() => {
-        const base = index_1.brandThemes[brand][resolvedMode];
-        return themeOverrides ? (0, react_2.extendTheme)(base, themeOverrides) : base;
+        const base = index_1.brandThemes[appliedBrand][appliedMode];
+        const extensions = [
+            ...(reducedMotion === "global" ? [{ styles: { global: motion_1.reducedMotionGlobalStyles } }] : []),
+            ...(themeOverrides ? [themeOverrides] : []),
+        ];
+        return extensions.length ? (0, react_2.extendTheme)(base, ...extensions) : base;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [brand, resolvedMode, overridesKey]);
+    }, [appliedBrand, appliedMode, overridesKey, reducedMotion]);
     // NOTE: global.css ships var(--color-*) light-only — re-point them here in dark, clear in light.
     (0, react_1.useLayoutEffect)(() => {
         const root = document.documentElement;
-        root.dataset.mode = resolvedMode;
+        root.dataset.mode = appliedMode;
         const { colors } = resolvedTheme;
         const { gray, semantic } = colors;
         const HUE_SCALES = [
@@ -124,7 +132,7 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
         const set = (name, val) => root.style.setProperty(`--color-${name}`, val);
         const clear = (name) => root.style.removeProperty(`--color-${name}`);
         const allRampNames = [...HUE_SCALES, ...SEMANTIC_SCALES].flatMap((s) => RUNGS.map((r) => `${s}-${r}`));
-        if (resolvedMode === "dark") {
+        if (appliedMode === "dark") {
             for (const s of HUE_SCALES)
                 for (const r of RUNGS)
                     set(`${s}-${r}`, colors[s][r]);
@@ -140,7 +148,8 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
             for (const name of Object.keys(SEMANTIC_VARS))
                 clear(name);
         }
-    }, [resolvedMode, resolvedTheme]);
-    return ((0, jsx_runtime_1.jsx)(exports.ThemeModeContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(react_2.ChakraProvider, { theme: resolvedTheme, colorModeManager: forcedLightColorModeManager, children: (0, jsx_runtime_1.jsx)(Toaster_1.default, { children: children }) }) }));
+    }, [appliedMode, resolvedTheme]);
+    const themedTree = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(react_2.ChakraProvider, { theme: resolvedTheme, colorModeManager: forcedLightColorModeManager, children: (0, jsx_runtime_1.jsx)(Toaster_1.default, { children: children }) })), [resolvedTheme, children]);
+    return (0, jsx_runtime_1.jsx)(exports.ThemeModeContext.Provider, { value: value, children: themedTree });
 };
 exports.PixelizeThemeProvider = PixelizeThemeProvider;

package/dist/Theme/provider/ThemeSwitcher.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const index_1 = require("../index");
+const brands_1 = require("../tokens/brands");
 const useCustomTheme_1 = require("../useCustomTheme");
 const useThemeMode_1 = require("./useThemeMode");
 const focusRing_styles_1 = require("../chakra/focusRing.styles");
@@ -21,8 +22,8 @@ const SIZES = {
     lg: { control: "lg", icon: 18 },
 };
 const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
-// NOTE: resolved from each brand's OWN palette so the dot matches that brand, regardless of the active one.
-const brandSwatchColor = (brand) => index_1.brandThemes[brand].light.colors.primary[500];
+// NOTE: reads the brand's own palette, not its Chakra theme, so the picker builds no themes.
+const brandSwatchColor = (brand) => brands_1.lightPalettes[brand].primary[500];
 const BrandSwatch = ({ brand }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0 }));

package/dist/Theme/themeProps.d.ts

@@ -16,7 +16,9 @@ export type CustomThemeProps = {
         mono: string;
     };
     fontSizes: {
+        "xs-minus": string;
         xs: string;
+        "xs-plus": string;
         sm: string;
         md: string;
         lg: string;
@@ -84,6 +86,10 @@ export type CustomThemeProps = {
         inner: string;
         none: string;
         darkLg: string;
+        card: string;
+        float: string;
+        dialog: string;
+        sheet: string;
     };
     radii: ChakraTheme["radii"] & {
         none: string;
@@ -107,6 +113,7 @@ export type CustomThemeProps = {
         overlay: number;
         modal: number;
         popover: number;
+        popoverNested: number;
         skipLink: number;
         toast: number;
         tooltip: number;

package/dist/Theme/tokens/brands/emerald/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/index.d.ts

@@ -17,11 +17,12 @@ import rosewoodDark from "./rosewood/palette.dark";
 import storefrontDark from "./storefront/palette.dark";
 import zincDark from "./zinc/palette.dark";
 import type { BrandPaletteSource, PaletteProps, ResolvedColorMode, ThemeName } from "../types";
+export declare const LIGHT_CANVAS_STEP = 1.09;
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 export declare const finalizeLightPalette: (source: BrandPaletteSource) => PaletteProps;
 export { lavender, meadow, radiant, skyline, slate, emerald, rosewood, storefront, zinc };
 export { lavenderDark, meadowDark, radiantDark, skylineDark, slateDark, emeraldDark, rosewoodDark, storefrontDark, zincDark, };
-/** Light palette per brand. `lavender` is the base the other six extend. */
+/** Light palette per brand, derived on first read. `lavender` is the base the other six extend. */
 export declare const lightPalettes: Record<ThemeName, PaletteProps>;
 export declare const darkPalettes: Record<ThemeName, PaletteProps>;
 export declare const palettes: Record<ThemeName, Record<ResolvedColorMode, PaletteProps>>;