pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/Hooks/useIsTruncated.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsTruncated = useIsTruncated;
+const react_1 = require("react");
+const sharedResizeObserver_1 = require("./sharedResizeObserver");
+// NOTE: compares scrollWidth/Height vs clientWidth/Height to detect real ellipsis truncation; re-measures via ResizeObserver.
+function useIsTruncated(content, enabled = true) {
+    const ref = (0, react_1.useRef)(null);
+    const [isTruncated, setIsTruncated] = (0, react_1.useState)(false);
+    const measure = (0, react_1.useCallback)(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        setIsTruncated(el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!enabled)
+            return;
+        measure();
+        const el = ref.current;
+        if (!el)
+            return;
+        return (0, sharedResizeObserver_1.observeResize)(el, measure);
+    }, [measure, content, enabled]);
+    return { ref, isTruncated };
+}
+exports.default = useIsTruncated;

package/dist/Hooks/useMatchMedia.d.ts

@@ -0,0 +1,2 @@
+/** `matches` for a media query, sharing one listener per query; `fallback` where matchMedia is missing (SSR, jsdom). */
+export declare const useMatchMedia: (query: string, fallback?: boolean) => boolean;

package/dist/Hooks/useMatchMedia.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMatchMedia = void 0;
+const react_1 = require("react");
+const entries = new Map();
+const supported = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+const subscriberFor = (query) => (notify) => {
+    if (!supported())
+        return () => undefined;
+    let entry = entries.get(query);
+    if (!entry) {
+        const list = window.matchMedia(query);
+        const created = { list, listeners: new Set(), onChange: () => created.listeners.forEach((fn) => fn()) };
+        list.addEventListener("change", created.onChange);
+        entries.set(query, created);
+        entry = created;
+    }
+    entry.listeners.add(notify);
+    return () => {
+        const current = entries.get(query);
+        if (!current)
+            return;
+        current.listeners.delete(notify);
+        if (current.listeners.size === 0) {
+            current.list.removeEventListener("change", current.onChange);
+            entries.delete(query);
+        }
+    };
+};
+/** `matches` for a media query, sharing one listener per query; `fallback` where matchMedia is missing (SSR, jsdom). */
+const useMatchMedia = (query, fallback = false) => {
+    const subscribe = (0, react_1.useMemo)(() => subscriberFor(query), [query]);
+    const read = () => { var _a, _b; return (_b = (_a = entries.get(query)) === null || _a === void 0 ? void 0 : _a.list.matches) !== null && _b !== void 0 ? _b : (supported() ? window.matchMedia(query).matches : fallback); };
+    return (0, react_1.useSyncExternalStore)(subscribe, read, () => fallback);
+};
+exports.useMatchMedia = useMatchMedia;

package/dist/Hooks/useOutsideMouseDown.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from "react";
+interface OutsideMouseDownOptions {
+    enabled?: boolean;
+    /** Listen in the capture phase, so a descendant's `stopPropagation` cannot hide the press. */
+    capture?: boolean;
+    /** Also fire on `click`, for pickers that must finalise on either event. */
+    includeClick?: boolean;
+}
+/** Calls `onOutside` for a document `mousedown` outside every ref; a null ref contains nothing. Unlike Chakra's `useOutsideClick` it never waits for `mouseup`. */
+export declare const useOutsideMouseDown: (refs: readonly RefObject<Element | null>[], onOutside: (event: MouseEvent) => void, { enabled, capture, includeClick }?: OutsideMouseDownOptions) => void;
+export {};

package/dist/Hooks/useOutsideMouseDown.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOutsideMouseDown = void 0;
+const react_1 = require("react");
+/** Calls `onOutside` for a document `mousedown` outside every ref; a null ref contains nothing. Unlike Chakra's `useOutsideClick` it never waits for `mouseup`. */
+const useOutsideMouseDown = (refs, onOutside, { enabled = true, capture = false, includeClick = false } = {}) => {
+    const latest = (0, react_1.useRef)({ refs, onOutside });
+    (0, react_1.useEffect)(() => {
+        latest.current = { refs, onOutside };
+    });
+    (0, react_1.useEffect)(() => {
+        if (!enabled)
+            return;
+        const handle = (event) => {
+            const target = event.target;
+            if (latest.current.refs.some((ref) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(target); }))
+                return;
+            latest.current.onOutside(event);
+        };
+        document.addEventListener("mousedown", handle, capture);
+        if (includeClick)
+            document.addEventListener("click", handle, capture);
+        return () => {
+            document.removeEventListener("mousedown", handle, capture);
+            if (includeClick)
+                document.removeEventListener("click", handle, capture);
+        };
+    }, [enabled, capture, includeClick]);
+};
+exports.useOutsideMouseDown = useOutsideMouseDown;

package/dist/Hooks/usePreferences.d.ts

@@ -7,7 +7,7 @@ type PreferencesProps = {
     orgId?: string;
 };
 type PreferencesResponseProps = {
-    json: Record<string, any>;
+    json: Record<string, unknown>;
     key: string;
     name: string;
     page: string;
@@ -18,8 +18,8 @@ declare const useGetPreferences: ({ baseUrl, key, page, name, authToken, orgId,
     loading: boolean;
 };
 declare const useSavePreferences: ({ baseUrl, key, page, name, authToken, orgId, }: PreferencesProps) => {
-    savePreferences: (data?: Record<string, any>) => void;
-    savePreferencesDebounced: (data?: Record<string, any>, wait?: number) => void;
+    savePreferences: (data?: Record<string, unknown>) => void;
+    savePreferencesDebounced: (data?: Record<string, unknown>, wait?: number) => void;
     loading: boolean;
     error: unknown;
 };

package/dist/Hooks/usePreferences.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSavePreferences = exports.useGetPreferences = void 0;
-var react_1 = require("react");
-var constructUrl = function (_a) {
-    var baseUrl = _a.baseUrl, key = _a.key, page = _a.page, name = _a.name, orgId = _a.orgId;
-    var params = new URLSearchParams();
+const react_1 = require("react");
+const constructUrl = ({ baseUrl, key, page, name, orgId }) => {
+    const params = new URLSearchParams();
     if (orgId) {
         params.append("orgId", orgId);
     }
@@ -17,63 +16,76 @@ var constructUrl = function (_a) {
     if (name) {
         params.append("name", name);
     }
-    var queryString = params.toString();
-    return "".concat(baseUrl).concat(queryString ? "?".concat(queryString) : "");
+    const queryString = params.toString();
+    return `${baseUrl}${queryString ? `?${queryString}` : ""}`;
 };
-var useGetPreferences = function (_a) {
-    var _b = _a.baseUrl, baseUrl = _b === void 0 ? "" : _b, _c = _a.key, key = _c === void 0 ? "" : _c, _d = _a.page, page = _d === void 0 ? "" : _d, _e = _a.name, name = _e === void 0 ? "" : _e, _f = _a.authToken, authToken = _f === void 0 ? "" : _f, _g = _a.orgId, orgId = _g === void 0 ? "" : _g;
-    var _h = (0, react_1.useState)([]), preferences = _h[0], setPreferences = _h[1];
-    var _j = (0, react_1.useState)(false), loading = _j[0], setLoading = _j[1];
-    (0, react_1.useEffect)(function () {
-        if (!baseUrl) {
+const NO_PREFERENCES = [];
+const useGetPreferences = ({ baseUrl = "", key = "", page = "", name = "", authToken = "", orgId = "", }) => {
+    const url = baseUrl ? constructUrl({ baseUrl, key, page, name, orgId }) : "";
+    const requestKey = url ? JSON.stringify([url, authToken]) : "";
+    const [settled, setSettled] = (0, react_1.useState)({
+        requestKey: "",
+        preferences: NO_PREFERENCES,
+    });
+    (0, react_1.useEffect)(() => {
+        if (!url) {
             return;
         }
-        setLoading(true);
-        var url = constructUrl({ baseUrl: baseUrl, key: key, page: page, name: name, orgId: orgId });
+        let cancelled = false;
         fetch(url, {
             headers: {
                 Authorization: authToken,
             },
         })
-            .then(function (response) { return response.json(); })
-            .then(function (data) { return setPreferences(data); })
-            .catch(function (error) { return console.error(error); })
-            .finally(function () { return setLoading(false); });
-        /* eslint-disable */
-    }, [baseUrl]);
-    return { preferences: preferences, loading: loading };
+            .then((response) => response.json())
+            .then((data) => {
+            if (!cancelled)
+                setSettled({ requestKey, preferences: data });
+        })
+            .catch((error) => {
+            if (cancelled)
+                return;
+            console.error(error);
+            setSettled({ requestKey, preferences: NO_PREFERENCES });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [url, authToken, requestKey]);
+    const isSettled = settled.requestKey === requestKey;
+    return {
+        preferences: isSettled ? settled.preferences : NO_PREFERENCES,
+        // NOTE: derived so KanbanBoard never reads a stale loading=false, on mount or re-key.
+        loading: Boolean(baseUrl) && !isSettled,
+    };
 };
 exports.useGetPreferences = useGetPreferences;
-var useSavePreferences = function (_a) {
-    var _b = _a.baseUrl, baseUrl = _b === void 0 ? "" : _b, _c = _a.key, key = _c === void 0 ? "" : _c, _d = _a.page, page = _d === void 0 ? "" : _d, _e = _a.name, name = _e === void 0 ? "" : _e, _f = _a.authToken, authToken = _f === void 0 ? "" : _f, _g = _a.orgId, orgId = _g === void 0 ? "" : _g;
-    var _h = (0, react_1.useState)(false), loading = _h[0], setLoading = _h[1];
-    var _j = (0, react_1.useState)(null), error = _j[0], setError = _j[1];
-    var savePreferences = (0, react_1.useCallback)(function (data) {
-        if (data === void 0) { data = {}; }
+const useSavePreferences = ({ baseUrl = "", key = "", page = "", name = "", authToken = "", orgId = "", }) => {
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const savePreferences = (0, react_1.useCallback)((data = {}) => {
         if (!baseUrl)
             return;
         setLoading(true);
-        fetch("".concat(baseUrl, "?orgId=").concat(orgId), {
+        fetch(`${baseUrl}?orgId=${orgId}`, {
             method: "POST",
             headers: {
                 Authorization: authToken,
                 "Content-Type": "application/json",
             },
-            body: JSON.stringify({ key: key, page: page, name: name, json: data }),
+            body: JSON.stringify({ key, page, name, json: data }),
         })
-            .then(function (r) { return r.json(); })
-            .then(function (d) { return console.log(d); })
-            .catch(function (e) { return setError(e); })
-            .finally(function () { return setLoading(false); });
+            .then((r) => r.json())
+            .then(() => setError(null))
+            .catch((e) => setError(e))
+            .finally(() => setLoading(false));
     }, [baseUrl, orgId, authToken, key, page, name]);
-    var debounceRef = (0, react_1.useRef)(null);
-    var savePreferencesDebounced = (0, react_1.useCallback)(function (data, wait) {
-        if (data === void 0) { data = {}; }
-        if (wait === void 0) { wait = 500; }
+    const debounceRef = (0, react_1.useRef)(null);
+    const savePreferencesDebounced = (0, react_1.useCallback)((data = {}, wait = 500) => {
         if (debounceRef.current)
             window.clearTimeout(debounceRef.current);
-        debounceRef.current = window.setTimeout(function () { return savePreferences(data); }, wait);
+        debounceRef.current = window.setTimeout(() => savePreferences(data), wait);
     }, [savePreferences]);
-    return { savePreferences: savePreferences, savePreferencesDebounced: savePreferencesDebounced, loading: loading, error: error };
+    return { savePreferences, savePreferencesDebounced, loading, error };
 };
 exports.useSavePreferences = useSavePreferences;

package/dist/Hooks/useScrollableRegion.d.ts

@@ -0,0 +1,17 @@
+/** `label` or `labelledBy` names the scroller; `keepRole` stops it taking role=region. */
+export type ScrollableRegionOptions = {
+    label?: string;
+    labelledBy?: string;
+    keepRole?: boolean;
+};
+/** Attributes to spread on a scroller; empty unless it overflows with nothing focusable inside. */
+export type ScrollableRegionProps = {
+    tabIndex?: 0;
+    role?: "region";
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+export declare function useScrollableRegion<T extends HTMLElement = HTMLElement>({ label, labelledBy, keepRole, }?: ScrollableRegionOptions): {
+    ref: (node: T | null) => void;
+    props: ScrollableRegionProps;
+};

package/dist/Hooks/useScrollableRegion.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollableRegion = useScrollableRegion;
+const react_1 = require("react");
+const sharedResizeObserver_1 = require("./sharedResizeObserver");
+const FOCUSABLE_CONTENT = 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), summary, iframe, [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
+const USER_SCROLLABLE = /auto|scroll/;
+const SLACK_PX = 1;
+const needsFocusStop = (el) => {
+    const { overflowX, overflowY } = getComputedStyle(el);
+    const scrollsX = USER_SCROLLABLE.test(overflowX) && el.scrollWidth > el.clientWidth + SLACK_PX;
+    const scrollsY = USER_SCROLLABLE.test(overflowY) && el.scrollHeight > el.clientHeight + SLACK_PX;
+    return (scrollsX || scrollsY) && !el.querySelector(FOCUSABLE_CONTENT);
+};
+function useScrollableRegion({ label, labelledBy, keepRole = false, } = {}) {
+    const [element, setElement] = (0, react_1.useState)(null);
+    const [isStop, setIsStop] = (0, react_1.useState)(false);
+    const measure = (0, react_1.useCallback)(() => setIsStop(element !== null && needsFocusStop(element)), [element]);
+    (0, react_1.useEffect)(() => {
+        if (!element)
+            return undefined;
+        return (0, sharedResizeObserver_1.observeResize)(element, measure);
+    }, [element, measure]);
+    // NOTE: also runs after every commit; an equal state bails out, so no loop.
+    (0, react_1.useEffect)(measure);
+    const named = Boolean(label || labelledBy);
+    const props = isStop
+        ? {
+            tabIndex: 0,
+            role: named && !keepRole ? "region" : undefined,
+            "aria-label": label,
+            "aria-labelledby": labelledBy,
+        }
+        : {};
+    return { ref: setElement, props };
+}

package/dist/Hooks/useSidebarPrefs.d.ts

@@ -0,0 +1,26 @@
+export type SidebarPrefs = {
+    mobileNav: boolean;
+    collapsed: boolean;
+    mobileOpen: boolean;
+};
+/** Persistence key and first-visit defaults for sidebar preferences. */
+export type UseSidebarPrefsOptions = {
+    /** localStorage key. Versioned so a future shape change can bump it. */
+    storageKey?: string;
+    /** Defaults used on first visit / when nothing is stored. */
+    defaults?: Partial<SidebarPrefs>;
+};
+export type UseSidebarPrefsResult = SidebarPrefs & {
+    setMobileNav: (next: boolean) => void;
+    setCollapsed: (next: boolean) => void;
+    setMobileOpen: (next: boolean) => void;
+    toggleMobileNav: () => void;
+    toggleCollapsed: () => void;
+    toggleMobileOpen: () => void;
+    /** Ready handler for SideBar's `onToggleMobileNav` — flips navbar mode and syncs the drawer. */
+    onToggleMobileNav: () => void;
+    /** Ready handler for SideBar's `onMobileClose` — closes the overlay drawer. */
+    closeMobile: () => void;
+};
+export declare const useSidebarPrefs: (options?: UseSidebarPrefsOptions) => UseSidebarPrefsResult;
+export default useSidebarPrefs;

package/dist/Hooks/useSidebarPrefs.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSidebarPrefs = void 0;
+const react_1 = require("react");
+const DEFAULT_KEY = "pixelize:sidebar-prefs:v1";
+const readPrefs = (key, defaults) => {
+    if (typeof window === "undefined" || !window.localStorage)
+        return defaults;
+    try {
+        const raw = window.localStorage.getItem(key);
+        if (!raw)
+            return defaults;
+        const parsed = JSON.parse(raw);
+        return {
+            mobileNav: typeof parsed.mobileNav === "boolean" ? parsed.mobileNav : defaults.mobileNav,
+            collapsed: typeof parsed.collapsed === "boolean" ? parsed.collapsed : defaults.collapsed,
+            mobileOpen: typeof parsed.mobileOpen === "boolean" ? parsed.mobileOpen : defaults.mobileOpen,
+        };
+    }
+    catch {
+        // Corrupt / unreadable value — fall back to defaults rather than throwing.
+        return defaults;
+    }
+};
+const useSidebarPrefs = (options = {}) => {
+    var _a, _b, _c;
+    const { storageKey = DEFAULT_KEY, defaults } = options;
+    const resolvedDefaults = {
+        mobileNav: (_a = defaults === null || defaults === void 0 ? void 0 : defaults.mobileNav) !== null && _a !== void 0 ? _a : false,
+        collapsed: (_b = defaults === null || defaults === void 0 ? void 0 : defaults.collapsed) !== null && _b !== void 0 ? _b : false,
+        mobileOpen: (_c = defaults === null || defaults === void 0 ? void 0 : defaults.mobileOpen) !== null && _c !== void 0 ? _c : false,
+    };
+    // Lazy initializer so the synchronous read happens once, on the client.
+    const [prefs, setPrefs] = (0, react_1.useState)(() => readPrefs(storageKey, resolvedDefaults));
+    (0, react_1.useEffect)(() => {
+        if (typeof window === "undefined" || !window.localStorage)
+            return;
+        try {
+            window.localStorage.setItem(storageKey, JSON.stringify(prefs));
+        }
+        catch {
+            // Storage full / disabled (private mode) — preference simply won't persist.
+        }
+    }, [storageKey, prefs]);
+    const setMobileNav = (0, react_1.useCallback)((next) => setPrefs((p) => ({ ...p, mobileNav: next })), []);
+    const setCollapsed = (0, react_1.useCallback)((next) => setPrefs((p) => ({ ...p, collapsed: next })), []);
+    const setMobileOpen = (0, react_1.useCallback)((next) => setPrefs((p) => ({ ...p, mobileOpen: next })), []);
+    const toggleMobileNav = (0, react_1.useCallback)(() => setPrefs((p) => ({ ...p, mobileNav: !p.mobileNav })), []);
+    const toggleCollapsed = (0, react_1.useCallback)(() => setPrefs((p) => ({ ...p, collapsed: !p.collapsed })), []);
+    const toggleMobileOpen = (0, react_1.useCallback)(() => setPrefs((p) => ({ ...p, mobileOpen: !p.mobileOpen })), []);
+    // Composed handlers, mapped directly onto SideBar props so apps don't re-implement drawer behavior.
+    const onToggleMobileNav = (0, react_1.useCallback)(() => setPrefs((p) => {
+        const next = !p.mobileNav;
+        // Entering navbar mode opens the drawer; leaving docks it.
+        return { ...p, mobileNav: next, mobileOpen: next };
+    }), []);
+    const closeMobile = (0, react_1.useCallback)(() => setPrefs((p) => ({ ...p, mobileOpen: false })), []);
+    return {
+        ...prefs,
+        setMobileNav,
+        setCollapsed,
+        setMobileOpen,
+        toggleMobileNav,
+        toggleCollapsed,
+        toggleMobileOpen,
+        onToggleMobileNav,
+        closeMobile,
+    };
+};
+exports.useSidebarPrefs = useSidebarPrefs;
+exports.default = exports.useSidebarPrefs;

package/dist/Theme/assertPalette.d.ts

@@ -0,0 +1,11 @@
+import type { PaletteProps } from "./tokens/types";
+declare const REQUIRED_GROUPS: readonly ["gradient", "primary", "secondary", "tertiary", "transparent", "black", "white", "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder", "boxShadow", "focusRing", "sidebar", "boxborder", "border", "table", "disabled", "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic", "surfaceRaised", "star"];
+type Unlisted = Exclude<keyof PaletteProps, (typeof REQUIRED_GROUPS)[number]>;
+export type AllPaletteTokensListed = Unlisted extends never ? true : ["unlisted token", Unlisted];
+export declare const allPaletteTokensListed: AllPaletteTokensListed;
+export declare const missingPaletteTokens: (colors: unknown) => string[];
+/** Fails once, loudly, at the theme boundary — never as a wrong colour 40 components deep. */
+export declare const assertPixelizePalette: (theme: {
+    colors?: unknown;
+}) => PaletteProps;
+export {};

package/dist/Theme/assertPalette.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assertPixelizePalette = exports.missingPaletteTokens = exports.allPaletteTokensListed = void 0;
+const REQUIRED_GROUPS = [
+    "gradient", "primary", "secondary", "tertiary", "transparent", "black", "white",
+    "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan",
+    "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder",
+    "boxShadow", "focusRing", "sidebar", "boxborder", "border", "table", "disabled",
+    "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic", "surfaceRaised", "star",
+];
+exports.allPaletteTokensListed = true;
+const NESTED = [
+    ["semantic", ["success", "error", "warning", "info"]],
+    ["sidebar", [
+            "background", "activeIcon", "activeLabel", "mutedIcon", "mutedLabel", "elevated",
+            "semanticText", "hoverBg", "activeBg", "divider",
+        ]],
+    ["semanticText", ["success", "error", "warning", "info"]],
+    ["onSemantic", ["success", "error", "warning", "info"]],
+    ["focusRing", ["ring", "halo"]],
+    ["backgroundColor", ["main", "base"]],
+    ["boxShadow", ["primary", "default"]],
+];
+const missingPaletteTokens = (colors) => {
+    if (!colors || typeof colors !== "object")
+        return ["(no colors object)"];
+    const c = colors;
+    const missing = REQUIRED_GROUPS.filter((k) => c[k] === undefined).map(String);
+    for (const [group, keys] of NESTED) {
+        const value = c[group];
+        if (!value)
+            continue;
+        for (const key of keys)
+            if (value[key] === undefined)
+                missing.push(`${group}.${key}`);
+    }
+    return missing;
+};
+exports.missingPaletteTokens = missingPaletteTokens;
+const checked = new WeakSet();
+/** Fails once, loudly, at the theme boundary — never as a wrong colour 40 components deep. */
+const assertPixelizePalette = (theme) => {
+    if (typeof theme === "object" && theme !== null && checked.has(theme)) {
+        return theme.colors;
+    }
+    const missing = (0, exports.missingPaletteTokens)(theme === null || theme === void 0 ? void 0 : theme.colors);
+    if (missing.length > 0) {
+        throw new Error(`pixelize-design-library: this theme is missing ${missing.length} palette token(s): ` +
+            `${missing.join(", ")}. Components read these directly and have no fallback by design. ` +
+            `Wrap the app in <PixelizeThemeProvider>, or build the theme with createBrandTheme(palette).`);
+    }
+    if (typeof theme === "object" && theme !== null)
+        checked.add(theme);
+    return theme.colors;
+};
+exports.assertPixelizePalette = assertPixelizePalette;

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

@@ -0,0 +1,84 @@
+import type { StyleFunctionProps } from "@chakra-ui/react";
+declare const $bg: {
+    variable: string;
+    reference: string;
+};
+declare const $padding: {
+    variable: string;
+    reference: string;
+};
+declare const $shadow: {
+    variable: string;
+    reference: string;
+};
+declare const $radius: {
+    variable: string;
+    reference: string;
+};
+declare const $border: {
+    variable: string;
+    reference: string;
+};
+declare const $borderColor: {
+    variable: string;
+    reference: string;
+};
+export declare const Card: {
+    baseStyle?: (({ theme }: StyleFunctionProps) => {
+        container: {
+            [$bg.variable]: string;
+            [$radius.variable]: string;
+            [$borderColor.variable]: string;
+            color: string;
+            "& > .chakra-card__header + .chakra-card__body, & > .chakra-card__body + .chakra-card__footer": {
+                paddingTop: number;
+            };
+        };
+        header: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+        };
+    }) | undefined;
+    sizes?: {
+        sm: {
+            container: {
+                [$radius.variable]: string;
+                [$padding.variable]: string;
+            };
+        };
+        md: {
+            container: {
+                [$radius.variable]: string;
+                [$padding.variable]: string;
+            };
+        };
+        lg: {
+            container: {
+                [$radius.variable]: string;
+                [$padding.variable]: string;
+            };
+        };
+    } | undefined;
+    variants?: {
+        outline: {
+            container: {
+                [$border.variable]: string;
+                [$shadow.variable]: string;
+            };
+        };
+        elevated: {
+            container: {
+                [$border.variable]: string;
+                [$shadow.variable]: string;
+            };
+        };
+    } | undefined;
+    defaultProps?: {
+        size?: "sm" | "md" | "lg" | undefined;
+        variant?: "elevated" | "outline" | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("header" | "container" | "body" | "footer")[];
+};
+export {};

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const anatomy_1 = require("@chakra-ui/anatomy");
+const react_1 = require("@chakra-ui/react");
+const paletteFromTheme_1 = require("./paletteFromTheme");
+const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.cardAnatomy.keys);
+const $bg = (0, react_1.cssVar)("card-bg");
+const $padding = (0, react_1.cssVar)("card-padding");
+const $shadow = (0, react_1.cssVar)("card-shadow");
+const $radius = (0, react_1.cssVar)("card-radius");
+const $border = (0, react_1.cssVar)("card-border-width");
+const $borderColor = (0, react_1.cssVar)("card-border-color");
+const baseStyle = definePartsStyle(({ theme }) => {
+    const colors = (0, paletteFromTheme_1.paletteOf)(theme);
+    return {
+        container: {
+            [$bg.variable]: colors.background[50],
+            [$radius.variable]: "radii.xl",
+            [$borderColor.variable]: colors.boxborder[200],
+            color: colors.text[900],
+            "& > .chakra-card__header + .chakra-card__body, & > .chakra-card__body + .chakra-card__footer": { paddingTop: 0 },
+        },
+        header: { color: colors.header[900], fontSize: "1rem", fontWeight: 600 },
+    };
+});
+const sizes = {
+    sm: definePartsStyle({
+        container: { [$radius.variable]: "radii.xl", [$padding.variable]: "0.75rem 1rem" },
+    }),
+    md: definePartsStyle({
+        container: { [$radius.variable]: "radii.xl", [$padding.variable]: "1rem 1.25rem" },
+    }),
+    lg: definePartsStyle({
+        container: { [$radius.variable]: "radii.xl", [$padding.variable]: "1.25rem 1.5rem" },
+    }),
+};
+const variants = {
+    outline: definePartsStyle({
+        container: { [$border.variable]: "1px", [$shadow.variable]: "none" },
+    }),
+    elevated: definePartsStyle({
+        container: { [$border.variable]: "0", [$shadow.variable]: "shadows.card" },
+    }),
+};
+exports.Card = defineMultiStyleConfig({
+    baseStyle,
+    sizes,
+    variants,
+    defaultProps: { variant: "elevated", size: "md" },
+});