pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/Hooks/useIsTruncated.d.ts

@@ -1,33 +1,3 @@
-/**
- * Detects whether an element's text is *actually* visually truncated — i.e. the
- * ellipsis is active. Works for both single-line clamps
- * (`overflow: hidden; white-space: nowrap; text-overflow: ellipsis`) and
- * multi-line clamps (`-webkit-line-clamp` / Chakra `noOfLines`), by comparing
- * the scroll size against the visible client size.
- *
- * Attach the returned `ref` to the element that clamps the text, then read
- * `isTruncated` to decide whether a tooltip is worth showing. Re-measures on
- * element resize (via `ResizeObserver`) and whenever `content` changes.
- *
- * @param content Pass the rendered text (or anything that changes with it) so
- *   the measurement re-runs when the content changes — the clamp box can keep
- *   the same size while the text length changes, which a `ResizeObserver` alone
- *   would not catch.
- * @param enabled Set to `false` to fully disable measurement — no layout reads,
- *   no `ResizeObserver`, no state updates. Use it to keep the hook cheap when
- *   the caller isn't in truncation mode (`isTruncated` stays `false`).
- *
- * Performance: measurement runs only on mount, on element **resize**, and when
- * `content` changes — never on hover, scroll, or re-render. Each run does a
- * single batched layout read (four properties) on one element. When `enabled`
- * is `false` the hook does nothing at all.
- *
- * @example
- * const { ref, isTruncated } = useIsTruncated(title);
- * <ToolTip label={title} isDisabled={!isTruncated}>
- *   <Text ref={ref} noOfLines={1}>{title}</Text>
- * </ToolTip>
- */
 export declare function useIsTruncated<T extends HTMLElement = HTMLElement>(content?: unknown, enabled?: boolean): {
     ref: React.MutableRefObject<T | null>;
     isTruncated: boolean;

package/dist/Hooks/useIsTruncated.js

@@ -2,36 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsTruncated = useIsTruncated;
 const react_1 = require("react");
-/**
- * Detects whether an element's text is *actually* visually truncated — i.e. the
- * ellipsis is active. Works for both single-line clamps
- * (`overflow: hidden; white-space: nowrap; text-overflow: ellipsis`) and
- * multi-line clamps (`-webkit-line-clamp` / Chakra `noOfLines`), by comparing
- * the scroll size against the visible client size.
- *
- * Attach the returned `ref` to the element that clamps the text, then read
- * `isTruncated` to decide whether a tooltip is worth showing. Re-measures on
- * element resize (via `ResizeObserver`) and whenever `content` changes.
- *
- * @param content Pass the rendered text (or anything that changes with it) so
- *   the measurement re-runs when the content changes — the clamp box can keep
- *   the same size while the text length changes, which a `ResizeObserver` alone
- *   would not catch.
- * @param enabled Set to `false` to fully disable measurement — no layout reads,
- *   no `ResizeObserver`, no state updates. Use it to keep the hook cheap when
- *   the caller isn't in truncation mode (`isTruncated` stays `false`).
- *
- * Performance: measurement runs only on mount, on element **resize**, and when
- * `content` changes — never on hover, scroll, or re-render. Each run does a
- * single batched layout read (four properties) on one element. When `enabled`
- * is `false` the hook does nothing at all.
- *
- * @example
- * const { ref, isTruncated } = useIsTruncated(title);
- * <ToolTip label={title} isDisabled={!isTruncated}>
- *   <Text ref={ref} noOfLines={1}>{title}</Text>
- * </ToolTip>
- */
+// 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);

package/dist/Hooks/usePreferences.js

@@ -21,11 +21,7 @@ const constructUrl = ({ baseUrl, key, page, name, orgId }) => {
 };
 const useGetPreferences = ({ baseUrl = "", key = "", page = "", name = "", authToken = "", orgId = "", }) => {
     const [preferences, setPreferences] = (0, react_1.useState)([]);
-    // Must start true (not false) whenever a fetch is about to happen: this is
-    // read by consumers (KanbanBoard's preferences-hydration effect) on their
-    // very first render, before this hook's own mount effect has run. Starting
-    // false let that first render look like "nothing loading, nothing saved",
-    // which permanently skipped hydration once the real data arrived.
+    // NOTE: must start true — KanbanBoard's hydration effect reads this before this hook's mount effect runs.
     const [loading, setLoading] = (0, react_1.useState)(() => Boolean(baseUrl));
     (0, react_1.useEffect)(() => {
         if (!baseUrl) {
@@ -63,7 +59,6 @@ const useSavePreferences = ({ baseUrl = "", key = "", page = "", name = "", auth
             body: JSON.stringify({ key, page, name, json: data }),
         })
             .then((r) => r.json())
-            .then((d) => console.log(d))
             .catch((e) => setError(e))
             .finally(() => setLoading(false));
     }, [baseUrl, orgId, authToken, key, page, name]);

package/dist/Hooks/useSidebarPrefs.d.ts

@@ -1,41 +1,3 @@
-/**
- * Persisted sidebar preferences (localStorage-backed, opt-in).
- *
- * Persists the user's explicit layout choices so they survive reloads and browser
- * restarts (restoring the sidebar to exactly the same state):
- *  - `mobileNav`   — "navbar mode" forced on a large screen via the Hide/Show toggle
- *  - `collapsed`   — the mini-rail (collapse) state
- *  - `mobileOpen`  — whether the overlay drawer is currently open
- *
- * It deliberately does NOT persist viewport-driven state (the `lg` breakpoint /
- * `belowLg`) — that must always reflect the live screen size, not a saved value.
- *
- * SSR-safe: reads/writes are guarded with `typeof window` so it no-ops during
- * server render and hydrates from storage on the client.
- *
- * Adoption — wire the returned values straight onto the library's `SideBar` +
- * `NavigationBar`; the composed handlers (`onToggleMobileNav`, `closeMobile`) mean
- * a consuming app does not re-implement the "entering navbar mode opens the drawer"
- * behavior itself:
- *
- * @example
- * const sb = useSidebarPrefs();
- * <SideBar
- *   toggle={sb.collapsed}
- *   changeToggle={sb.toggleCollapsed}
- *   mobileNav={sb.mobileNav}
- *   onToggleMobileNav={sb.onToggleMobileNav}
- *   mobileOpen={sb.mobileOpen}
- *   onMobileClose={sb.closeMobile}
- *   // ...your menus, user, etc.
- * />
- * <NavBar
- *   sideBarToggole={sb.mobileOpen}
- *   onSideBarToggole={sb.toggleMobileOpen}
- *   forceSideBarToggle={sb.mobileNav}
- *   // ...your nav props
- * />
- */
 export type SidebarPrefs = {
     mobileNav: boolean;
     collapsed: boolean;
@@ -54,10 +16,7 @@ export type UseSidebarPrefsResult = SidebarPrefs & {
     toggleMobileNav: () => void;
     toggleCollapsed: () => void;
     toggleMobileOpen: () => void;
-    /**
-     * Ready handler for SideBar's `onToggleMobileNav`. Flips navbar mode AND syncs
-     * the drawer (entering → open, leaving → docked) so apps get this right for free.
-     */
+    /** 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;

package/dist/Hooks/useSidebarPrefs.js

@@ -48,8 +48,7 @@ const useSidebarPrefs = (options = {}) => {
     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 — map directly onto SideBar props so apps don't re-implement
-    // the navbar-mode/drawer behavior (the part that's easy to get wrong per app).
+    // 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.

package/dist/Theme/assertPalette.d.ts

@@ -1,5 +1,5 @@
 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", "sidebar", "boxborder", "border", "table", "disabled", "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic"];
+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"];
 type Unlisted = Exclude<keyof PaletteProps, (typeof REQUIRED_GROUPS)[number]>;
 export type AllPaletteTokensListed = Unlisted extends never ? true : ["unlisted token", Unlisted];
 export declare const allPaletteTokensListed: AllPaletteTokensListed;

package/dist/Theme/assertPalette.js

@@ -5,18 +5,19 @@ 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", "sidebar", "boxborder", "border", "table", "disabled", "accentText",
-    "textMuted", "semanticText", "onPrimary", "onSemantic",
+    "boxShadow", "focusRing", "sidebar", "boxborder", "border", "table", "disabled",
+    "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic", "surfaceRaised",
 ];
 exports.allPaletteTokensListed = true;
 const NESTED = [
     ["semantic", ["success", "error", "warning", "info"]],
     ["sidebar", [
             "background", "activeIcon", "activeLabel", "mutedIcon", "mutedLabel", "elevated",
-            "semanticText",
+            "semanticText", "hoverBg", "activeBg", "divider",
         ]],
     ["semanticText", ["success", "error", "warning", "info"]],
     ["onSemantic", ["success", "error", "warning", "info"]],
+    ["focusRing", ["ring", "halo"]],
     ["backgroundColor", ["main", "base"]],
     ["boxShadow", ["primary", "default"]],
 ];

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

@@ -0,0 +1,78 @@
+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;
+            };
+        };
+    } | undefined;
+    defaultProps?: {
+        size?: "sm" | "md" | "lg" | undefined;
+        variant?: "outline" | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("header" | "container" | "body" | "footer")[];
+};
+export {};

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

@@ -0,0 +1,48 @@
+"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" },
+    }),
+};
+exports.Card = defineMultiStyleConfig({
+    baseStyle,
+    sizes,
+    variants,
+    defaultProps: { variant: "outline", size: "md" },
+});

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

@@ -1,24 +1,57 @@
 import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $bg: {
-    variable: string;
-    reference: string;
-};
 export declare const Drawer: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         dialog: {
-            [$bg.variable]: string;
             bg: string;
             color: string;
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
+            boxShadow: string;
+        };
+        overlay: {
+            bg: string;
+            backdropFilter: string;
+        };
+        header: {
+            px: number;
+            py: number;
+            pe: number;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: number;
+            color: string;
+            borderBottomWidth: string;
+            borderBottomStyle: string;
+            borderBottomColor: string;
+        };
+        closeButton: {
+            top: number;
+            insetEnd: number;
+        };
+        body: {
+            px: number;
+            py: number;
+        };
+        footer: {
+            px: number;
+            py: number;
+            display: string;
+            justifyContent: string;
+            gap: number;
+            borderTopWidth: string;
+            borderTopStyle: string;
+            borderTopColor: string;
         };
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+            keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+            keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -26,6 +59,5 @@ export declare const Drawer: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+    parts: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
 };
-export {};

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

@@ -4,21 +4,22 @@ exports.Drawer = void 0;
 const paletteFromTheme_1 = require("./paletteFromTheme");
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
+const overlay_styles_1 = require("./overlay.styles");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.drawerAnatomy.keys);
 const $bg = (0, react_1.cssVar)("drawer-bg");
-/**
- * Chakra's own Drawer baseStyle hardcodes `--drawer-bg` to "colors.white" (gated behind `_dark`,
- * which this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
- * `<DrawerContent>` in every consuming app renders a white panel on the dark canvas — the same
- * bug class `Menu.styles.ts`/`Modal.styles.ts` already fix.
- */
-const baseStyle = definePartsStyle(({ theme }) => ({
-    dialog: {
-        [$bg.variable]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
-        bg: $bg.reference,
-        color: (0, paletteFromTheme_1.paletteOf)(theme).text[900],
-    },
-}));
+// Chakra's stock `--drawer-bg` is a literal white behind `_dark`, which this palette-swap theme never enters.
+const baseStyle = definePartsStyle(({ theme }) => {
+    const colors = (0, paletteFromTheme_1.paletteOf)(theme);
+    const parts = (0, overlay_styles_1.dialogPartStyles)(colors);
+    return {
+        ...parts,
+        dialog: {
+            ...parts.dialog,
+            [$bg.variable]: colors.surfaceRaised,
+            bg: $bg.reference,
+        },
+    };
+});
 exports.Drawer = defineMultiStyleConfig({
     baseStyle,
 });

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

@@ -3,21 +3,6 @@ declare const $bg: {
     variable: string;
     reference: string;
 };
-/**
- * Chakra's own MenuList baseStyle hardcodes `--menu-bg` to "#fff" (gated behind `_dark`, which
- * this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
- * bare `<MenuList>` in every consuming app renders a white dropdown on the dark canvas. A `bg`
- * prop set by a call site only recolors the list's own box, not this var — which `MenuItem`'s
- * `_focus`/`_active`/`_expanded` states read — so both must come from the theme, not per call
- * site (already duplicated at every fix-it-locally call site: NavigationBar, ButtonGroupIcon,
- * ThemeSwitcher's BrandMenu/MenuVariant).
- *
- * Chakra's own MenuItem baseStyle then RE-hardcodes the same `--menu-bg` var on `_focus`/
- * `_active`/`_expanded` (to `colors.gray.100`/`.200`, also `_dark`-gated) — so even with `list`
- * fixed above, hovering/focusing an item snaps the var back to a near-white literal. Override
- * `item` here too, to a theme-driven hover tint, or every hover state stays white regardless of
- * the list fix.
- */
 declare const $itemBg: {
     variable: string;
     reference: string;
@@ -28,9 +13,17 @@ export declare const Menu: {
             [$bg.variable]: string;
             bg: string;
             color: string;
+            borderWidth: string;
+            borderStyle: string;
             borderColor: string;
         };
         item: {
+            minH: string;
+            px: string;
+            py: string;
+            mx: string;
+            fontSize: string;
+            borderRadius: string;
             bg: string;
             _focus: {
                 [$itemBg.variable]: string;
@@ -52,12 +45,12 @@ export declare const Menu: {
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
+            keys: ("divider" | "button" | "icon" | "list" | "command" | "item" | "groupTitle")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
+            keys: ("divider" | "button" | "icon" | "list" | "command" | "item" | "groupTitle")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -65,6 +58,6 @@ export declare const Menu: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
+    parts: ("divider" | "button" | "icon" | "list" | "command" | "item" | "groupTitle")[];
 };
 export {};

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

@@ -3,44 +3,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Menu = void 0;
 const react_1 = require("@chakra-ui/react");
 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 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");
-/**
- * Chakra's own MenuList baseStyle hardcodes `--menu-bg` to "#fff" (gated behind `_dark`, which
- * this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
- * bare `<MenuList>` in every consuming app renders a white dropdown on the dark canvas. A `bg`
- * prop set by a call site only recolors the list's own box, not this var — which `MenuItem`'s
- * `_focus`/`_active`/`_expanded` states read — so both must come from the theme, not per call
- * site (already duplicated at every fix-it-locally call site: NavigationBar, ButtonGroupIcon,
- * ThemeSwitcher's BrandMenu/MenuVariant).
- *
- * Chakra's own MenuItem baseStyle then RE-hardcodes the same `--menu-bg` var on `_focus`/
- * `_active`/`_expanded` (to `colors.gray.100`/`.200`, also `_dark`-gated) — so even with `list`
- * fixed above, hovering/focusing an item snaps the var back to a near-white literal. Override
- * `item` here too, to a theme-driven hover tint, or every hover state stays white regardless of
- * the list fix.
- */
+// NOTE: fixes Chakra's MenuList/MenuItem both hardcoding --menu-bg to white via dead _dark — item needs its own var too, or hover snaps back to white.
 const $itemBg = (0, react_1.cssVar)("menu-item-bg");
 const baseStyle = definePartsStyle(({ theme }) => {
     const colors = (0, paletteFromTheme_1.paletteOf)(theme);
-    const hoverBg = colors.primary.opacity[8];
-    const activeBg = colors.primary.opacity[16];
+    const rowBgs = (0, rowStates_1.listRowBackgrounds)(colors);
+    const hoverBg = rowBgs.active;
+    const activeBg = rowBgs.selectedActive;
     return {
         list: {
-            [$bg.variable]: colors.backgroundColor.light,
+            [$bg.variable]: colors.surfaceRaised,
             bg: $bg.reference,
             color: colors.text[900],
-            // Chakra's default is its own gray.200, which reads as a hard rule against our
-            // surfaces. The menu is already separated by its shadow.
-            borderColor: colors.border[200],
+            borderWidth: "1px",
+            borderStyle: "solid",
+            borderColor: colors.boxborder[200],
         },
-        // Own CSS var (`--menu-item-bg`), NOT the list's `--menu-bg` — Chakra's stock item
-        // baseStyle rewrites `--menu-bg` itself on hover/focus, so reusing that same var name
-        // here for the item's resting bg risked the two colliding under the same custom
-        // property. A dedicated var keeps the item's hover/focus tint fully independent of the
-        // list's background var.
         item: {
+            minH: itemRowSpec.minH,
+            px: itemRowSpec.px,
+            py: itemRowSpec.py,
+            mx: itemRowSpec.mx,
+            fontSize: itemRowSpec.fontSize,
+            borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS,
             bg: "transparent",
             _focus: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
             _hover: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },

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

@@ -1,24 +1,58 @@
 import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $bg: {
-    variable: string;
-    reference: string;
-};
 export declare const Modal: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         dialog: {
-            [$bg.variable]: string;
             bg: string;
+            borderRadius: string;
+            color: string;
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
+            boxShadow: string;
+        };
+        overlay: {
+            bg: string;
+            backdropFilter: string;
+        };
+        header: {
+            px: number;
+            py: number;
+            pe: number;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: number;
             color: string;
+            borderBottomWidth: string;
+            borderBottomStyle: string;
+            borderBottomColor: string;
+        };
+        closeButton: {
+            top: number;
+            insetEnd: number;
+        };
+        body: {
+            px: number;
+            py: number;
+        };
+        footer: {
+            px: number;
+            py: number;
+            display: string;
+            justifyContent: string;
+            gap: number;
+            borderTopWidth: string;
+            borderTopStyle: string;
+            borderTopColor: string;
         };
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+            keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+            keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -26,6 +60,5 @@ export declare const Modal: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+    parts: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
 };
-export {};