pixelize-design-library 2.3.21 → 2.4.1-beta.1

package/dist/Theme/index.js

@@ -3,27 +3,59 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemesList = exports.rosewood = exports.emerald = exports.slate = exports.lavender = exports.radiant = exports.meadow = exports.skyline = void 0;
-const theme_1 = __importDefault(require("./Default/theme"));
-exports.lavender = theme_1.default;
-const theme_2 = __importDefault(require("./Meadow/theme"));
-exports.meadow = theme_2.default;
-const theme_3 = __importDefault(require("./Radiant/theme"));
-exports.radiant = theme_3.default;
-const theme_4 = __importDefault(require("./Skyline/theme"));
-exports.skyline = theme_4.default;
-const theme_5 = __importDefault(require("./Slate/theme"));
-exports.slate = theme_5.default;
-const theme_6 = __importDefault(require("./Emerald/theme"));
-exports.emerald = theme_6.default;
-const theme_7 = __importDefault(require("./Rosewood/theme"));
-exports.rosewood = theme_7.default;
+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`.
+ *
+ * These used to be seven near-identical `<Brand>/theme.ts` files that differed only in
+ * which palette they imported; `createBrandTheme` is that shared body.
+ */
+const lavender = (0, createBrandTheme_1.default)(brands_1.lightPalettes.lavender);
+exports.lavender = lavender;
+const meadow = (0, createBrandTheme_1.default)(brands_1.lightPalettes.meadow);
+exports.meadow = meadow;
+const radiant = (0, createBrandTheme_1.default)(brands_1.lightPalettes.radiant);
+exports.radiant = radiant;
+const skyline = (0, createBrandTheme_1.default)(brands_1.lightPalettes.skyline);
+exports.skyline = skyline;
+const slate = (0, createBrandTheme_1.default)(brands_1.lightPalettes.slate);
+exports.slate = slate;
+const emerald = (0, createBrandTheme_1.default)(brands_1.lightPalettes.emerald);
+exports.emerald = emerald;
+const rosewood = (0, createBrandTheme_1.default)(brands_1.lightPalettes.rosewood);
+exports.rosewood = rosewood;
+const storefront = (0, createBrandTheme_1.default)(brands_1.lightPalettes.storefront);
+exports.storefront = storefront;
+const zinc = (0, createBrandTheme_1.default)(brands_1.lightPalettes.zinc);
+exports.zinc = zinc;
+/**
+ * Published contract — consumers iterate this to render theme pickers, so both the keys
+ * and their order are load-bearing. Stays light-only: these are the exact theme objects
+ * apps already pass to `withTheme`, and dark is opt-in via `PixelizeThemeProvider`.
+ * `storefront`/`zinc` are appended at the end — additive, doesn't reorder existing entries.
+ */
 exports.ThemesList = {
-    lavender: theme_1.default,
-    meadow: theme_2.default,
-    skyline: theme_4.default,
-    emerald: theme_6.default,
-    rosewood: theme_7.default,
-    slate: theme_5.default,
-    radiant: theme_3.default,
+    lavender: lavender,
+    meadow: meadow,
+    skyline: skyline,
+    emerald: emerald,
+    rosewood: rosewood,
+    slate: slate,
+    radiant: radiant,
+    storefront: storefront,
+    zinc: zinc,
+};
+/** Light + dark theme per brand. `PixelizeThemeProvider` swaps between these. */
+exports.brandThemes = {
+    lavender: { light: lavender, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.lavender, { colorMode: "dark" }) },
+    meadow: { light: meadow, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.meadow, { colorMode: "dark" }) },
+    radiant: { light: radiant, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.radiant, { colorMode: "dark" }) },
+    skyline: { light: skyline, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.skyline, { colorMode: "dark" }) },
+    slate: { light: slate, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.slate, { colorMode: "dark" }) },
+    emerald: { light: emerald, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.emerald, { colorMode: "dark" }) },
+    rosewood: { light: rosewood, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.rosewood, { colorMode: "dark" }) },
+    storefront: { light: storefront, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.storefront, { colorMode: "dark" }) },
+    zinc: { light: zinc, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.zinc, { colorMode: "dark" }) },
 };

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

@@ -0,0 +1,36 @@
+import React from "react";
+import type { ColorMode, ResolvedColorMode, ThemeName } from "../tokens/types";
+export type ThemeModeContextValue = {
+    mode: ColorMode;
+    resolvedMode: ResolvedColorMode;
+    setMode: (mode: ColorMode) => void;
+    toggle: () => void;
+    brand: ThemeName;
+    setBrand: (brand: ThemeName) => void;
+};
+export type PixelizeThemeProviderProps = {
+    children: React.ReactNode;
+    /** Initial brand. A persisted brand wins over this. */
+    brand?: ThemeName;
+    /** Initial color mode. A persisted mode wins over this. */
+    defaultMode?: ColorMode;
+    storageKey?: string;
+    disablePersistence?: boolean;
+};
+export declare const ThemeModeContext: React.Context<ThemeModeContextValue | undefined>;
+/**
+ * Chakra's own color mode is deliberately NOT synced to `resolvedMode`, and must not be.
+ *
+ * This provider adapts for dark by swapping the palette, so `theme.colors` is already correct for
+ * the active mode. Putting Chakra into dark mode on top of that adapts a second time: its built-in
+ * `_dark` blocks reach for `gray.700`/`gray.800` expecting those rungs to be dark, but our dark
+ * ramp runs dark -> light, so they resolve LIGHT — a white Card/Skeleton/Menu on a dark canvas.
+ * A previous revision synced it to keep `useColorModeValue()` working and shipped exactly that.
+ *
+ * Consequence for consumers: `useColorModeValue(light, dark)` always returns its LIGHT argument.
+ * That is correct here — the palette has already resolved the mode, so the "light" argument is
+ * whatever the active palette says. Read the mode from `useThemeMode()` instead. Existing apps are
+ * unaffected: they are light-only, where that argument was always the one returned anyway.
+ */
+export declare const PixelizeThemeProvider: ({ children, brand: brandProp, defaultMode, storageKey, disablePersistence, }: PixelizeThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PixelizeThemeProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PixelizeThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/PixelizeThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAU/E,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,iBAAiB,CAAC;IAChC,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AA2BF,eAAO,MAAM,gBAAgB,kDAE5B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,qBAAqB,GAAI,8EAMnC,0BAA0B,4CA0D5B,CAAC"}

package/dist/Theme/provider/PixelizeThemeProvider.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PixelizeThemeProvider = exports.ThemeModeContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 colorModeStorage_1 = require("./colorModeStorage");
+const DEFAULT_BRAND = "lavender";
+const DEFAULT_MODE = "system";
+const DEFAULT_STORAGE_KEY = "pixelize-theme";
+/**
+ * Chakra's default `colorModeManager` reads/writes its OWN `localStorage["chakra-ui-color-mode"]`
+ * key — entirely separate from this app's `storageKey` above — and that stored value wins over
+ * `theme.config.initialColorMode` on every load. `createBrandTheme` sets `initialColorMode: "light"`
+ * on every theme object specifically so Chakra's native dark mode (and every un-migrated built-in
+ * `_dark:` block — Card's "elevated" variant reaches for `gray.700`, which our reversed dark ramp
+ * makes LIGHT) never fires. But a stale `"dark"` value in that key — from Chakra's own toggle ever
+ * having been used on this origin, by this app or a prior version of it — silently overrides that
+ * default and reintroduces exactly the bug `initialColorMode: "light"` was meant to prevent: a
+ * washed-out light Card on an otherwise-correct dark canvas, while everything reading the palette
+ * directly (i.e. everything else) stays right. Forcing this manager to always report `"light"` and
+ * never persist removes Chakra's native color mode from the equation entirely, so no stray
+ * `_dark:` block anywhere (present or future) can ever fire, regardless of what's in storage.
+ */
+const forcedLightColorModeManager = {
+    type: "localStorage",
+    ssr: false,
+    get: () => "light",
+    set: () => { },
+};
+exports.ThemeModeContext = (0, react_1.createContext)(undefined);
+/**
+ * Chakra's own color mode is deliberately NOT synced to `resolvedMode`, and must not be.
+ *
+ * This provider adapts for dark by swapping the palette, so `theme.colors` is already correct for
+ * the active mode. Putting Chakra into dark mode on top of that adapts a second time: its built-in
+ * `_dark` blocks reach for `gray.700`/`gray.800` expecting those rungs to be dark, but our dark
+ * ramp runs dark -> light, so they resolve LIGHT — a white Card/Skeleton/Menu on a dark canvas.
+ * A previous revision synced it to keep `useColorModeValue()` working and shipped exactly that.
+ *
+ * Consequence for consumers: `useColorModeValue(light, dark)` always returns its LIGHT argument.
+ * That is correct here — the palette has already resolved the mode, so the "light" argument is
+ * whatever the active palette says. Read the mode from `useThemeMode()` instead. Existing apps are
+ * unaffected: they are light-only, where that argument was always the one returned anyway.
+ */
+const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, defaultMode = DEFAULT_MODE, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, }) => {
+    const [mode, setModeState] = (0, react_1.useState)(defaultMode);
+    const [brand, setBrandState] = (0, react_1.useState)(brandProp);
+    // Deterministic on the server and on the first client render — the real OS value lands in
+    // the effect below, so hydration always matches.
+    const [systemMode, setSystemMode] = (0, react_1.useState)("light");
+    (0, react_1.useEffect)(() => {
+        setSystemMode((0, colorModeStorage_1.getSystemColorMode)());
+        return (0, colorModeStorage_1.subscribeToSystemColorMode)(setSystemMode);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (disablePersistence)
+            return;
+        const stored = (0, colorModeStorage_1.readStoredTheme)(storageKey);
+        if (stored.mode)
+            setModeState(stored.mode);
+        if (stored.brand)
+            setBrandState(stored.brand);
+    }, [disablePersistence, storageKey]);
+    // Skipping the mount run keeps the defaults from being written over a stored value before
+    // the rehydrate effect above has applied it.
+    const isFirstPersistRun = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        if (isFirstPersistRun.current) {
+            isFirstPersistRun.current = false;
+            return;
+        }
+        if (disablePersistence)
+            return;
+        (0, colorModeStorage_1.writeStoredTheme)(storageKey, { mode, brand });
+    }, [mode, brand, disablePersistence, storageKey]);
+    const resolvedMode = mode === "system" ? systemMode : mode;
+    const setMode = (0, react_1.useCallback)((next) => setModeState(next), []);
+    const setBrand = (0, react_1.useCallback)((next) => setBrandState(next), []);
+    // From "system", flip to the opposite of what the OS currently gives, so a click always
+    // visibly changes the UI.
+    const toggle = (0, react_1.useCallback)(() => setModeState(resolvedMode === "dark" ? "light" : "dark"), [resolvedMode]);
+    const value = (0, react_1.useMemo)(() => ({ mode, resolvedMode, setMode, toggle, brand, setBrand }), [mode, resolvedMode, setMode, toggle, brand, setBrand]);
+    return ((0, jsx_runtime_1.jsx)(exports.ThemeModeContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(react_2.ChakraProvider, { theme: index_1.brandThemes[brand][resolvedMode], colorModeManager: forcedLightColorModeManager, children: (0, jsx_runtime_1.jsx)(Toaster_1.default, { children: children }) }) }));
+};
+exports.PixelizeThemeProvider = PixelizeThemeProvider;

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

@@ -0,0 +1,8 @@
+export type ThemeSwitcherProps = {
+    variant?: "icon" | "segmented" | "menu";
+    showBrandPicker?: boolean;
+    size?: "sm" | "md" | "lg";
+    "aria-label"?: string;
+};
+export declare const ThemeSwitcher: ({ variant, showBrandPicker, size, "aria-label": ariaLabel, }: ThemeSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeSwitcher.d.ts.map

package/dist/Theme/provider/ThemeSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/ThemeSwitcher.tsx"],"names":[],"mappings":"AAoBA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAgQF,eAAO,MAAM,aAAa,GAAI,8DAK3B,kBAAkB,4CAuBpB,CAAC"}

package/dist/Theme/provider/ThemeSwitcher.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeSwitcher = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 useCustomTheme_1 = require("../useCustomTheme");
+const useThemeMode_1 = require("./useThemeMode");
+const MODE_OPTIONS = [
+    { value: "light", label: "Light", Icon: lucide_react_1.Sun },
+    { value: "system", label: "System", Icon: lucide_react_1.Monitor },
+    { value: "dark", label: "Dark", Icon: lucide_react_1.Moon },
+];
+const SIZES = {
+    sm: { control: "sm", icon: 14 },
+    md: { control: "md", icon: 16 },
+    lg: { control: "lg", icon: 18 },
+};
+const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
+/**
+ * Palette values already differ per color mode (`brandThemes[brand].light|dark`), so tokens
+ * are read straight from the active theme — no `useColorModeValue` pairing needed here.
+ * Fallbacks are Chakra token names, never literal colors, for themes without a brand palette.
+ */
+const useSwitcherColors = () => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+    const colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    return {
+        trackBg: (_d = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.secondary) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[100]) !== null && _d !== void 0 ? _d : "gray.100",
+        activeBg: (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : colors === null || colors === void 0 ? void 0 : colors.white) !== null && _g !== void 0 ? _g : "white",
+        activeColor: (_l = (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500]) !== null && _j !== void 0 ? _j : (_k = colors === null || colors === void 0 ? void 0 : colors.text) === null || _k === void 0 ? void 0 : _k[900]) !== null && _l !== void 0 ? _l : "inherit",
+        mutedColor: (_q = (_o = (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[600]) !== null && _o !== void 0 ? _o : (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[600]) !== null && _q !== void 0 ? _q : "gray.600",
+        hoverBg: (_s = (_r = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _r === void 0 ? void 0 : _r[100]) !== null && _s !== void 0 ? _s : "gray.100",
+        borderColor: (_w = (_u = (_t = colors === null || colors === void 0 ? void 0 : colors.border) === null || _t === void 0 ? void 0 : _t[200]) !== null && _u !== void 0 ? _u : (_v = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _v === void 0 ? void 0 : _v[200]) !== null && _w !== void 0 ? _w : "gray.200",
+        // Chakra's MenuList baseStyle hardcodes `--menu-bg` to "#fff" (gated behind `_dark`,
+        // which this theme-swap app never triggers) — same bug class already fixed in
+        // NavigationBar/ButtonGroupIcon. `bg` alone only recolors the list's own box, not the
+        // var other pseudo-states read, so both must be set.
+        menuBg: (_0 = (_y = (_x = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _x === void 0 ? void 0 : _x.light) !== null && _y !== void 0 ? _y : (_z = colors === null || colors === void 0 ? void 0 : colors.background) === null || _z === void 0 ? void 0 : _z[50]) !== null && _0 !== void 0 ? _0 : "white",
+        menuColor: (_4 = (_2 = (_1 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _1 === void 0 ? void 0 : _1[900]) !== null && _2 !== void 0 ? _2 : (_3 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _3 === void 0 ? void 0 : _3[900]) !== null && _4 !== void 0 ? _4 : "gray.900",
+    };
+};
+const BrandMenu = ({ size }) => {
+    const { brand, setBrand } = (0, useThemeMode_1.useThemeMode)();
+    const { mutedColor, menuBg, menuColor } = useSwitcherColors();
+    const brands = Object.keys(index_1.brandThemes);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", fontWeight: 500, "aria-label": `Brand theme, current ${toBrandLabel(brand)}`, _focusVisible: { boxShadow: "outline" }, children: toBrandLabel(brand) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "9rem", bg: menuBg, sx: { "--menu-bg": menuBg }, color: menuColor, children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: toBrandLabel(option) }, option))) }) })] }));
+};
+const IconVariant = ({ size, label, }) => {
+    const { resolvedMode, toggle } = (0, useThemeMode_1.useThemeMode)();
+    const { mutedColor, hoverBg } = useSwitcherColors();
+    const isDark = resolvedMode === "dark";
+    const Icon = isDark ? lucide_react_1.Moon : lucide_react_1.Sun;
+    const accessibleLabel = label !== null && label !== void 0 ? label : `Switch to ${isDark ? "light" : "dark"} mode`;
+    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: accessibleLabel, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": accessibleLabel, "aria-pressed": isDark, icon: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }), onClick: toggle, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: { boxShadow: "outline" } }) }));
+};
+const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
+    const { mode, setMode } = (0, useThemeMode_1.useThemeMode)();
+    const { trackBg, activeBg, activeColor, mutedColor, borderColor } = useSwitcherColors();
+    const optionRefs = (0, react_1.useRef)([]);
+    // APG radiogroup behavior: arrows move focus and selection together.
+    const handleKeyDown = (event, index) => {
+        var _a;
+        const forward = event.key === "ArrowRight" || event.key === "ArrowDown";
+        const backward = event.key === "ArrowLeft" || event.key === "ArrowUp";
+        if (!forward && !backward)
+            return;
+        event.preventDefault();
+        const next = (index + (forward ? 1 : -1) + MODE_OPTIONS.length) % MODE_OPTIONS.length;
+        setMode(MODE_OPTIONS[next].value);
+        (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.HStack, { role: "radiogroup", "aria-label": label !== null && label !== void 0 ? label : "Color mode", display: "inline-flex", spacing: 1, p: "0.25rem", bg: trackBg, border: "0.063rem solid", borderColor: borderColor, borderRadius: "full", children: [MODE_OPTIONS.map(({ value, label: optionLabel, Icon }, index) => {
+                const isSelected = mode === value;
+                return ((0, jsx_runtime_1.jsx)(react_2.Button, { ref: (node) => {
+                        optionRefs.current[index] = node;
+                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, onClick: () => setMode(value), onKeyDown: (event) => handleKeyDown(event, index), size: SIZES[size].control, variant: "ghost", borderRadius: "full", bg: isSelected ? activeBg : "transparent", color: isSelected ? activeColor : mutedColor, boxShadow: isSelected ? "sm" : "none", _hover: { color: activeColor }, _focusVisible: { boxShadow: "outline" }, children: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
+            }), showBrandPicker && (0, jsx_runtime_1.jsx)(BrandMenu, { size: size })] }));
+};
+const MenuVariant = ({ size, label, showBrandPicker, }) => {
+    var _a;
+    const { mode, brand, setMode, setBrand } = (0, useThemeMode_1.useThemeMode)();
+    const { mutedColor, hoverBg, menuBg, menuColor } = useSwitcherColors();
+    const active = (_a = MODE_OPTIONS.find((option) => option.value === mode)) !== null && _a !== void 0 ? _a : MODE_OPTIONS[0];
+    const brands = Object.keys(index_1.brandThemes);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": label !== null && label !== void 0 ? label : `Color mode, current ${active.label}`, icon: (0, jsx_runtime_1.jsx)(active.Icon, { size: SIZES[size].icon, "aria-hidden": true }), size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: { boxShadow: "outline" } }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { minW: "10rem", bg: menuBg, sx: { "--menu-bg": menuBg }, color: menuColor, children: [(0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Appearance", type: "radio", value: mode, onChange: (value) => setMode(value), children: MODE_OPTIONS.map(({ value, label: optionLabel, Icon }) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: value, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: optionLabel })] }) }, value))) }), showBrandPicker && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuDivider, {}), (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: toBrandLabel(option) }, option))) })] }))] })] }));
+};
+const ThemeSwitcher = ({ variant = "icon", showBrandPicker = false, size = "md", "aria-label": ariaLabel, }) => {
+    if (variant === "segmented") {
+        return ((0, jsx_runtime_1.jsx)(SegmentedVariant, { size: size, label: ariaLabel, showBrandPicker: showBrandPicker }));
+    }
+    if (variant === "menu") {
+        return ((0, jsx_runtime_1.jsx)(MenuVariant, { size: size, label: ariaLabel, showBrandPicker: showBrandPicker }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, display: "inline-flex", children: [(0, jsx_runtime_1.jsx)(IconVariant, { size: size, label: ariaLabel }), showBrandPicker && (0, jsx_runtime_1.jsx)(BrandMenu, { size: size })] }));
+};
+exports.ThemeSwitcher = ThemeSwitcher;

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

@@ -0,0 +1,10 @@
+import type { ColorMode, ResolvedColorMode, ThemeName } from "../tokens/types";
+export type StoredTheme = {
+    mode?: ColorMode;
+    brand?: ThemeName;
+};
+export declare const readStoredTheme: (storageKey: string) => StoredTheme;
+export declare const writeStoredTheme: (storageKey: string, value: StoredTheme) => void;
+export declare const getSystemColorMode: () => ResolvedColorMode;
+export declare const subscribeToSystemColorMode: (callback: (mode: ResolvedColorMode) => void) => (() => void);
+//# sourceMappingURL=colorModeStorage.d.ts.map

package/dist/Theme/provider/colorModeStorage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorModeStorage.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/colorModeStorage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE/E,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAiCF,eAAO,MAAM,eAAe,GAAI,YAAY,MAAM,KAAG,WAmBpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,YAAY,MAAM,EAAE,OAAO,WAAW,KAAG,IASzE,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAAO,iBASrC,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,UAAU,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,KAC1C,CAAC,MAAM,IAAI,CA0Bb,CAAC"}

package/dist/Theme/provider/colorModeStorage.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribeToSystemColorMode = exports.getSystemColorMode = exports.writeStoredTheme = exports.readStoredTheme = void 0;
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+/**
+ * Stored values are untrusted input — a stale or hand-edited entry must never reach
+ * `brandThemes[brand]` and hand Chakra an `undefined` theme.
+ */
+const VALID_MODES = ["light", "dark", "system"];
+const VALID_BRANDS = [
+    "lavender",
+    "meadow",
+    "radiant",
+    "skyline",
+    "slate",
+    "emerald",
+    "rosewood",
+    "storefront",
+    "zinc",
+];
+const noop = () => { };
+/** Safari private mode throws on `localStorage` access rather than returning null. */
+const getStorage = () => {
+    var _a;
+    try {
+        if (typeof window === "undefined")
+            return null;
+        return (_a = window.localStorage) !== null && _a !== void 0 ? _a : null;
+    }
+    catch {
+        return null;
+    }
+};
+const readStoredTheme = (storageKey) => {
+    const storage = getStorage();
+    if (!storage)
+        return {};
+    try {
+        const raw = storage.getItem(storageKey);
+        if (!raw)
+            return {};
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== "object")
+            return {};
+        const { mode, brand } = parsed;
+        const stored = {};
+        if (mode && VALID_MODES.includes(mode))
+            stored.mode = mode;
+        if (brand && VALID_BRANDS.includes(brand))
+            stored.brand = brand;
+        return stored;
+    }
+    catch {
+        return {};
+    }
+};
+exports.readStoredTheme = readStoredTheme;
+const writeStoredTheme = (storageKey, value) => {
+    const storage = getStorage();
+    if (!storage)
+        return;
+    try {
+        storage.setItem(storageKey, JSON.stringify(value));
+    }
+    catch {
+        // Quota / private mode. Persistence is best-effort — never break the app over it.
+    }
+};
+exports.writeStoredTheme = writeStoredTheme;
+const getSystemColorMode = () => {
+    try {
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+            return "light";
+        }
+        return window.matchMedia(DARK_QUERY).matches ? "dark" : "light";
+    }
+    catch {
+        return "light";
+    }
+};
+exports.getSystemColorMode = getSystemColorMode;
+const subscribeToSystemColorMode = (callback) => {
+    try {
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+            return noop;
+        }
+        const query = window.matchMedia(DARK_QUERY);
+        const handler = (event) => {
+            callback(event.matches ? "dark" : "light");
+        };
+        if (typeof query.addEventListener === "function") {
+            query.addEventListener("change", handler);
+            return () => query.removeEventListener("change", handler);
+        }
+        // Safari < 14 only has the deprecated listener API.
+        if (typeof query.addListener === "function") {
+            query.addListener(handler);
+            return () => query.removeListener(handler);
+        }
+        return noop;
+    }
+    catch {
+        return noop;
+    }
+};
+exports.subscribeToSystemColorMode = subscribeToSystemColorMode;

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

@@ -0,0 +1,6 @@
+export { PixelizeThemeProvider } from "./PixelizeThemeProvider";
+export type { PixelizeThemeProviderProps, ThemeModeContextValue, } from "./PixelizeThemeProvider";
+export { useThemeMode } from "./useThemeMode";
+export { ThemeSwitcher } from "./ThemeSwitcher";
+export type { ThemeSwitcherProps } from "./ThemeSwitcher";
+//# sourceMappingURL=index.d.ts.map

package/dist/Theme/provider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EACV,0BAA0B,EAC1B,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/Theme/provider/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = void 0;
+var PixelizeThemeProvider_1 = require("./PixelizeThemeProvider");
+Object.defineProperty(exports, "PixelizeThemeProvider", { enumerable: true, get: function () { return PixelizeThemeProvider_1.PixelizeThemeProvider; } });
+var useThemeMode_1 = require("./useThemeMode");
+Object.defineProperty(exports, "useThemeMode", { enumerable: true, get: function () { return useThemeMode_1.useThemeMode; } });
+var ThemeSwitcher_1 = require("./ThemeSwitcher");
+Object.defineProperty(exports, "ThemeSwitcher", { enumerable: true, get: function () { return ThemeSwitcher_1.ThemeSwitcher; } });

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

@@ -0,0 +1,3 @@
+import { ThemeModeContextValue } from "./PixelizeThemeProvider";
+export declare const useThemeMode: () => ThemeModeContextValue;
+//# sourceMappingURL=useThemeMode.d.ts.map

package/dist/Theme/provider/useThemeMode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeMode.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/useThemeMode.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAElF,eAAO,MAAM,YAAY,QAAO,qBAU/B,CAAC"}

package/dist/Theme/provider/useThemeMode.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThemeMode = void 0;
+const react_1 = require("react");
+const PixelizeThemeProvider_1 = require("./PixelizeThemeProvider");
+const useThemeMode = () => {
+    const context = (0, react_1.useContext)(PixelizeThemeProvider_1.ThemeModeContext);
+    if (!context) {
+        throw new Error("useThemeMode must be used inside <PixelizeThemeProvider>. Wrap your app (or at least the subtree that calls useThemeMode) in <PixelizeThemeProvider> from pixelize-design-library.");
+    }
+    return context;
+};
+exports.useThemeMode = useThemeMode;