pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

package/dist/esm/Pages/tier1.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, useState } from "react";
+import { Box, Button, Flex, Heading, SimpleGrid, Text } from "@chakra-ui/react";
+import { FolderSearch, Users } from "lucide-react";
+import EmptyState from "../Components/EmptyState/EmptyState";
+import MoreItems from "../Components/MoreItems/MoreItems";
+import ScrollToTop from "../Components/ScrollToTop/ScrollToTop";
+import CopyButton from "../Components/CopyButton/CopyButton";
+import FieldSelectModal from "../Components/FieldSelectModal/FieldSelectModal";
+import PdfViewer from "../Components/PdfViewer/PdfViewer";
+import LazyWrapper from "../Components/LazyWrapper/LazyWrapper";
+import FilePreview, { FilePreviewTrigger, } from "../Components/FilePreview/FilePreview";
+import { useCustomTheme } from "../Theme/useCustomTheme";
+const Section = ({ title, children, }) => {
+    var _a, _b, _c, _d;
+    const theme = useCustomTheme();
+    return (_jsxs(Box, { mb: 10, p: 6, borderRadius: "16px", border: "1px solid", borderColor: (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : "#E2E8F0", bg: theme.colors.background[50], children: [_jsx(Heading, { size: "sm", mb: 4, color: (_d = (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[900]) !== null && _d !== void 0 ? _d : "gray.700", children: title }), children] }));
+};
+const SAMPLE_IMAGE = "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1766229935/main_sweets/1766229934288-Winter_Delghts.webp";
+const FIELDS = [
+    { field_name: "name", field_label: "Full Name" },
+    { field_name: "email", field_label: "Email Address" },
+    { field_name: "phone", field_label: "Phone Number" },
+    { field_name: "company", field_label: "Company" },
+    { field_name: "title", field_label: "Job Title" },
+    { field_name: "source", field_label: "Lead Source" },
+    { field_name: "stage", field_label: "Stage" },
+    { field_name: "owner", field_label: "Owner" },
+    { field_name: "created", field_label: "Created Date" },
+    { field_name: "updated", field_label: "Updated Date" },
+];
+const TAGS = [
+    { id: 1, label: "Enterprise", color: "#6366F1" },
+    { id: 2, label: "High Priority", color: "#EF4444" },
+    { id: 3, label: "Renewal", color: "#10B981" },
+    { id: 4, label: "Newsletter", color: "#F59E0B" },
+    { id: 5, label: "Partner", color: "#06B6D4" },
+];
+const Tier1Page = () => {
+    const theme = useCustomTheme();
+    const [previewOpen, setPreviewOpen] = useState(false);
+    const [fieldModalOpen, setFieldModalOpen] = useState(false);
+    return (_jsx(ScrollToTop, { children: _jsxs(Box, { maxW: "1000px", mx: "auto", py: 4, children: [_jsx(Heading, { size: "lg", mb: 6, children: "Tier 1 Components" }), _jsx(Section, { title: "EmptyState \u2014 variants, sizes & actions", children: _jsxs(SimpleGrid, { columns: { base: 1, md: 3 }, spacing: 4, children: [_jsx(Box, { border: "1px dashed #E2E8F0", borderRadius: "12px", children: _jsx(EmptyState, { size: "sm" }) }), _jsx(Box, { border: "1px dashed #E2E8F0", borderRadius: "12px", children: _jsx(EmptyState, { variant: "subtle", icon: FolderSearch, title: "No results", description: "Try adjusting your filters or search terms.", animate: true }) }), _jsx(Box, { border: "1px dashed #E2E8F0", borderRadius: "12px", children: _jsx(EmptyState, { variant: "dashed", colorScheme: "success", icon: Users, title: "No team members yet", description: "Invite people to start collaborating.", action: _jsx(Button, { size: "sm", colorScheme: "primary", children: "Invite member" }) }) })] }) }), _jsx(Section, { title: "MoreItems \u2014 overflow popover", children: _jsxs(Flex, { direction: "column", gap: 4, children: [_jsx(MoreItems, { triggerText: "Enterprise", items: TAGS, moreCount: TAGS.length - 1 }), _jsx(MoreItems, { triggerText: "Owners", items: TAGS, hideDots: true, trigger: "click" })] }) }), _jsx(Section, { title: "CopyButton \u2014 icon / button / menu-item", children: _jsxs(Flex, { align: "center", gap: 6, wrap: "wrap", children: [_jsx(CopyButton, { value: "https://app.example.com/leads/123" }), _jsx(CopyButton, { value: "hello@example.com", variant: "button", label: "Copy email" }), _jsx(Box, { w: "220px", border: "1px solid #E2E8F0", borderRadius: "8px", p: 1, children: _jsx(CopyButton, { value: "https://app.example.com", variant: "menu-item", label: "Copy URL" }) })] }) }), _jsxs(Section, { title: "FilePreview \u2014 modal + thumbnail trigger", children: [_jsxs(Flex, { align: "center", gap: 6, wrap: "wrap", children: [_jsx(Button, { size: "sm", onClick: () => setPreviewOpen(true), children: "Open image preview" }), _jsx(FilePreviewTrigger, { fileUrl: SAMPLE_IMAGE, fileName: "winter-delights.webp" }), _jsx(Text, { fontSize: "sm", color: "gray.500", children: "\u2190 hover the thumbnail" })] }), _jsx(FilePreview, { isOpen: previewOpen, onClose: () => setPreviewOpen(false), fileUrl: SAMPLE_IMAGE, fileName: "winter-delights.webp" })] }), _jsxs(Section, { title: "FieldSelectModal \u2014 searchable multi-select", children: [_jsx(Button, { size: "sm", colorScheme: "primary", onClick: () => setFieldModalOpen(true), children: "Choose fields to export" }), _jsx(FieldSelectModal, { isOpen: fieldModalOpen, onClose: () => setFieldModalOpen(false), fields: FIELDS, title: "Select Fields to Export", confirmText: "Download", onConfirm: (selected) => {
+                                console.log("selected", selected);
+                                setFieldModalOpen(false);
+                            } })] }), _jsx(Section, { title: "LazyWrapper \u2014 Suspense fallback", children: _jsx(Box, { border: "1px solid #E2E8F0", borderRadius: "12px", children: _jsx(LazyWrapper, { minHeight: "160px", children: _jsx(Suspense, { fallback: null, children: _jsx(Box, { p: 6, children: "Lazy content loaded." }) }) }) }) }), _jsx(Section, { title: "PdfViewer", children: _jsx(PdfViewer, { pdfUrl: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", fileName: "dummy.pdf", height: "360px" }) }), _jsx(Box, { h: "600px" }), _jsx(Text, { textAlign: "center", color: theme.colors.gray[500], fontSize: "sm", children: "Scroll up to see the ScrollToTop button \u2192" })] }) }));
+};
+export default Tier1Page;

package/dist/esm/Pages/timeline.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Timeline from '../Components/Timeline/Timeline';
+const TimelinePage = () => {
+    const timeline = [
+        {
+            logs_id: 1,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Accounts",
+            action_by: "pixelize technology",
+            created_at: 1723104998797,
+            changes: null,
+        },
+        {
+            logs_id: 2,
+            title: "Updated",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Accounts",
+            action_by: "pixelize technology",
+            created_at: 1723105040247,
+            changes: null,
+        },
+        {
+            logs_id: 10,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723202829694,
+            changes: null,
+        },
+        {
+            logs_id: 3,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723105099207,
+            changes: null,
+        },
+        {
+            logs_id: 7,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723105603033,
+            changes: null,
+        },
+        {
+            logs_id: 8,
+            title: "Delete",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723202829694,
+            changes: '{"shipping_code":{"original":null,"updated":"aaa"},"shipping_country":{"original":null,"updated":"QQdd"},"description":{"original":null,"updated":"ssAA"},"profile":{"updated":"profile updated"}}',
+        },
+    ];
+    return (_jsx("div", { children: _jsx(Timeline, { timelineEvents: timeline }) }));
+};
+export default TimelinePage;

package/dist/esm/Pages/tooltip.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ToolTip from "../Components/ToolTip/ToolTip";
+const TooltipPage = () => {
+    return (_jsx("div", { children: _jsx(ToolTip, { label: "Hello", placement: "top", hasArrow: true, children: "hai" }) }));
+};
+export default TooltipPage;

package/dist/esm/Pages/toster.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "../Components/Button/Button";
+import { useToaster } from "../Components/Toaster/Toaster";
+const TosterPage = () => {
+    const { showToast } = useToaster();
+    const handleOnclick = () => {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "success",
+        });
+        //setIsOpen(true);
+    };
+    const handleOnclick1 = () => {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "error",
+        });
+        //setIsOpen(true);
+    };
+    const handleOnclick2 = () => {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "warning",
+        });
+        //setIsOpen(true);
+    };
+    const handleOnclick3 = () => {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "info",
+        });
+        //setIsOpen(true);
+    };
+    const handleOnclick4 = () => {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "loading",
+        });
+        //setIsOpen(true);
+    };
+    return (_jsxs("div", { children: [_jsx(Button, { label: "Success", onClick: handleOnclick, variant: "solid", size: "md", width: 100 }), _jsx("br", {}), _jsx(Button, { label: "Success", onClick: handleOnclick1, variant: "solid", size: "md", width: 100 }), _jsx("br", {}), _jsx(Button, { label: "Success", onClick: handleOnclick2, variant: "solid", size: "md", width: 100 }), _jsx("br", {}), _jsx(Button, { label: "Success", onClick: handleOnclick3, variant: "solid", size: "md", width: 100 }), _jsx("br", {}), _jsx(Button, { label: "Success", onClick: handleOnclick4, variant: "solid", size: "md", width: 100 }), _jsx("br", {}), _jsx("br", {}), " ", _jsx("br", {}), " ", _jsx("br", {})] }));
+};
+export default TosterPage;

package/dist/esm/Pages/upgradeButton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Heading, Text } from "@chakra-ui/react";
+import { Crown, Rocket, Sparkles } from "lucide-react";
+import UpgradeButton from "../Components/UpgradeButton/UpgradeButton";
+import { useCustomTheme } from "../Theme/useCustomTheme";
+const Section = ({ title, children, }) => {
+    var _a, _b, _c, _d;
+    const theme = useCustomTheme();
+    return (_jsxs(Box, { mb: 8, p: 6, borderRadius: "16px", border: "1px solid", borderColor: (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : "#E2E8F0", bg: theme.colors.background[50], children: [_jsx(Heading, { size: "sm", mb: 4, color: (_d = (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[900]) !== null && _d !== void 0 ? _d : "gray.700", children: title }), children] }));
+};
+const UpgradeButtonPage = () => (_jsxs(Box, { maxW: "900px", mx: "auto", py: 4, children: [_jsx(Heading, { size: "lg", mb: 6, children: "Upgrade Button" }), _jsx(Section, { title: "Plan states (label + subtitle, sparkle, hover sheen)", children: _jsxs(Flex, { gap: 5, align: "center", wrap: "wrap", children: [_jsx(UpgradeButton, { label: "Free Trial", mobileLabel: "Free Trial", subtitle: "12 days left", onClick: () => console.log("trial") }), _jsx(UpgradeButton, { label: "Choose Your Plan", mobileLabel: "Choose", subtitle: "No active plan", onClick: () => console.log("choose") }), _jsx(UpgradeButton, { label: "Upgrade Your Plan", mobileLabel: "Upgrade", subtitle: "Expires on 30 Jun", onClick: () => console.log("upgrade") })] }) }), _jsx(Section, { title: "Sizes", children: _jsxs(Flex, { gap: 5, align: "center", wrap: "wrap", children: [_jsx(UpgradeButton, { label: "Upgrade", size: "sm" }), _jsx(UpgradeButton, { label: "Upgrade", size: "md" }), _jsx(UpgradeButton, { label: "Upgrade", size: "lg" })] }) }), _jsx(Section, { title: "Theme variants (blend with the active theme)", children: _jsxs(Flex, { gap: 5, align: "center", wrap: "wrap", children: [_jsx(UpgradeButton, { label: "Brand", variant: "brand" }), _jsx(UpgradeButton, { label: "Primary", variant: "primary" }), _jsx(UpgradeButton, { label: "Secondary", variant: "secondary" }), _jsx(UpgradeButton, { label: "Success", variant: "success" }), _jsx(UpgradeButton, { label: "Warning", variant: "warning" }), _jsx(UpgradeButton, { label: "Danger", variant: "danger" }), _jsx(UpgradeButton, { label: "Info", variant: "info" })] }) }), _jsx(Section, { title: "Custom gradients & icons (explicit gradient overrides variant)", children: _jsxs(Flex, { gap: 5, align: "center", wrap: "wrap", children: [_jsx(UpgradeButton, { label: "Go Pro", icon: Crown, gradient: { from: "#f7971e", to: "#ffd200" }, iconColor: "#7a4f01" }), _jsx(UpgradeButton, { label: "Boost", icon: Rocket, gradient: { from: "#11998e", to: "#38ef7d" }, iconColor: "#ffffff" }), _jsx(UpgradeButton, { label: "Premium", icon: Sparkles, gradient: { from: "#ee0979", to: "#ff6a00" } })] }) }), _jsx(Section, { title: "Loading / disabled / no shimmer", children: _jsxs(Flex, { gap: 5, align: "center", wrap: "wrap", children: [_jsx(UpgradeButton, { label: "Upgrading\u2026", isLoading: true }), _jsx(UpgradeButton, { label: "Unavailable", isDisabled: true }), _jsx(UpgradeButton, { label: "No shimmer", shimmer: false })] }) }), _jsx(Text, { fontSize: "sm", color: "gray.500", children: "Hover any enabled button to see the light sweep." })] }));
+export default UpgradeButtonPage;

package/dist/esm/Pages/userDetails.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { BriefcaseBusiness, Mail, UserRound } from "lucide-react";
+import UserDetails from "../Components/UserDetails/UserDetails";
+const demoUsers = [
+    {
+        id: 1,
+        firstName: "Aisha",
+        lastName: "Khan",
+        email: "aisha.khan@pixelize.dev",
+        role: "Super Admin",
+        isActive: true,
+        isCurrent: true,
+        isSuperAdmin: true,
+    },
+    {
+        id: 2,
+        firstName: "Marcus",
+        lastName: "Reed",
+        email: "marcus.reed@pixelize.dev",
+        role: "Sales Manager",
+        isActive: true,
+    },
+    {
+        id: 3,
+        firstName: "Lena",
+        lastName: "Fischer",
+        email: "lena.fischer@pixelize.dev",
+        role: "Support Agent",
+        isActive: false,
+        isPending: true,
+    },
+    {
+        id: 4,
+        firstName: "Diego",
+        lastName: "Santos",
+        email: "diego.santos@pixelize.dev",
+        role: "Marketing",
+        isActive: true,
+    },
+];
+const demoRoleOptions = [
+    { id: 10, label: "Super Admin" },
+    { id: 11, label: "Sales Manager" },
+    { id: 12, label: "Support Agent" },
+    { id: 13, label: "Marketing" },
+];
+function buildSelectedUser(user) {
+    return {
+        userId: user.id,
+        name: `${user.firstName} ${user.lastName}`,
+        role: user.role,
+        email: user.email,
+        isActive: user.isActive,
+        isPending: user.isPending,
+        isCurrent: user.isCurrent,
+        isSuperAdmin: user.isSuperAdmin,
+        details: [
+            { label: "First Name", value: user.firstName, icon: UserRound },
+            { label: "Last Name", value: user.lastName, icon: UserRound },
+            { label: "Email", value: user.email, icon: Mail },
+            { label: "Role", value: user.role, icon: BriefcaseBusiness },
+        ],
+    };
+}
+const UserDetailsPage = () => {
+    const [selectedId, setSelectedId] = useState(demoUsers[0].id);
+    const selectedUser = useMemo(() => {
+        const user = demoUsers.find((u) => u.id === selectedId);
+        return user ? buildSelectedUser(user) : null;
+    }, [selectedId]);
+    return (_jsx(UserDetails, { users: demoUsers, selectedUser: selectedUser, selectedUserId: selectedId, roleOptions: demoRoleOptions, canManageUsers: true, onSelectUser: (user) => setSelectedId(user.id), onRefresh: () => console.log("[UserDetailsPage] refresh"), onAddUserSubmit: (values) => console.log("[UserDetailsPage] add user", values), onChangeRoleSubmit: (payload) => console.log("[UserDetailsPage] change role", payload), onReinvite: (userId) => console.log("[UserDetailsPage] reinvite", userId), onDeactivate: (userId) => console.log("[UserDetailsPage] deactivate", userId), onAddRoleClick: () => console.log("[UserDetailsPage] add role"), minHeight: "70vh" }));
+};
+export default UserDetailsPage;

package/dist/esm/Pages/verifyEmail.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import VerifyEmailOtp from "../Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp";
+const VerifyEmailPage = () => {
+    return (_jsx("div", { children: _jsx(VerifyEmailOtp, { resendMail: () => {
+                console.log("hello");
+            }, onChange: (val) => {
+                console.log("onchange", val);
+            }, onComplete: (val) => {
+                console.log("onComplete", val);
+            }, pins: 6, title: "Please Verify Account", description: "Enter the six digit code we sent to your email address to verify", styles: { width: "70%", padding: "2px" } }) }));
+};
+export default VerifyEmailPage;

package/dist/esm/Theme/chakra/Avatar.styles.js

@@ -0,0 +1,25 @@
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { avatarAnatomy } from "@chakra-ui/anatomy";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(avatarAnatomy.keys);
+const $badgeBorder = cssVar("avatar-border-color");
+/**
+ * Same bug class as Menu/Modal/Popover: Chakra's own Avatar baseStyle hardcodes the badge/
+ * container border color to `colors.white` outside `_dark` (it's a cutout ring meant to match
+ * the surface the avatar sits on), gated behind `_dark`, which this theme-swap app never
+ * triggers. Every bare `<Avatar>`/`<AvatarBadge>` renders a white ring on the dark canvas.
+ */
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const border = (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff";
+    return {
+        badge: {
+            [$badgeBorder.variable]: border,
+        },
+        container: {
+            [$badgeBorder.variable]: border,
+        },
+    };
+});
+export const Avatar = defineMultiStyleConfig({
+    baseStyle,
+});

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

@@ -0,0 +1,23 @@
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { drawerAnatomy } from "@chakra-ui/anatomy";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(drawerAnatomy.keys);
+const $bg = 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 }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    return ({
+        dialog: {
+            [$bg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
+            bg: $bg.reference,
+            color: (_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.text) === null || _h === void 0 ? void 0 : _h[900]) !== null && _j !== void 0 ? _j : "inherit",
+        },
+    });
+});
+export const Drawer = defineMultiStyleConfig({
+    baseStyle,
+});

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

@@ -0,0 +1,47 @@
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { menuAnatomy } from "@chakra-ui/anatomy";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(menuAnatomy.keys);
+const $bg = 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.
+ */
+const $itemBg = cssVar("menu-item-bg");
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    const hoverBg = (_g = (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.opacity) === null || _c === void 0 ? void 0 : _c[8]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray) === null || _f === void 0 ? void 0 : _f[100]) !== null && _g !== void 0 ? _g : "#f7fafc";
+    const activeBg = (_p = (_l = (_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray) === null || _o === void 0 ? void 0 : _o[200]) !== null && _p !== void 0 ? _p : "#edf2f7";
+    return {
+        list: {
+            [$bg.variable]: (_v = (_s = (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.backgroundColor) === null || _r === void 0 ? void 0 : _r.light) !== null && _s !== void 0 ? _s : (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.background) === null || _u === void 0 ? void 0 : _u[50]) !== null && _v !== void 0 ? _v : "#fff",
+            bg: $bg.reference,
+            color: (_y = (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.text) === null || _x === void 0 ? void 0 : _x[900]) !== null && _y !== void 0 ? _y : "inherit",
+        },
+        // 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: {
+            bg: "transparent",
+            _focus: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
+            _hover: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
+            _active: { [$itemBg.variable]: activeBg, bg: $itemBg.reference },
+            _expanded: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
+        },
+    };
+});
+export const Menu = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/esm/Theme/chakra/Modal.styles.js

@@ -0,0 +1,23 @@
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { modalAnatomy } from "@chakra-ui/anatomy";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(modalAnatomy.keys);
+const $bg = cssVar("modal-bg");
+/**
+ * Chakra's own Modal baseStyle hardcodes `--modal-bg` to "colors.white" (gated behind `_dark`,
+ * which this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
+ * `<ModalContent>` in every consuming app renders a white dialog on the dark canvas — the same
+ * bug class `Menu.styles.ts` already fixes for dropdowns.
+ */
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    return ({
+        dialog: {
+            [$bg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
+            bg: $bg.reference,
+            color: (_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.text) === null || _h === void 0 ? void 0 : _h[900]) !== null && _j !== void 0 ? _j : "inherit",
+        },
+    });
+});
+export const Modal = defineMultiStyleConfig({
+    baseStyle,
+});

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

@@ -0,0 +1,27 @@
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { popoverAnatomy } from "@chakra-ui/anatomy";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(popoverAnatomy.keys);
+const $popperBg = cssVar("popper-bg");
+const $arrowShadowColor = cssVar("popper-arrow-shadow-color");
+/**
+ * Same bug class as Menu (Wave G): Chakra's own Popover baseStyle hardcodes `--popper-bg` to
+ * "#fff" and `--popper-arrow-shadow-color` to `colors.gray.200`, both gated behind `_dark`, which
+ * this theme-swap app never triggers (see Menu.styles.ts / createBrandTheme's colorMode comment).
+ * Every bare `<PopoverContent>` renders a white card with a light arrow shadow on the dark canvas.
+ * `--popper-arrow-bg` is left alone — Chakra's own baseStyle already points it at `$popperBg`, so
+ * fixing `$popperBg` here fixes the arrow fill too.
+ */
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    return ({
+        content: {
+            [$popperBg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
+            bg: $popperBg.reference,
+            [$arrowShadowColor.variable]: (_m = (_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.border) === null || _h === void 0 ? void 0 : _h[200]) !== null && _j !== void 0 ? _j : (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray) === null || _l === void 0 ? void 0 : _l[200]) !== null && _m !== void 0 ? _m : "#e2e8f0",
+            color: (_q = (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.text) === null || _p === void 0 ? void 0 : _p[900]) !== null && _q !== void 0 ? _q : "inherit",
+        },
+    });
+});
+export const Popover = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/esm/Theme/chakra/Slider.styles.js

@@ -0,0 +1,22 @@
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { sliderAnatomy } from "@chakra-ui/anatomy";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(sliderAnatomy.keys);
+const $thumbBg = cssVar("slider-thumb-bg");
+/**
+ * Chakra's own Slider thumb baseStyle hardcodes `bg: "white"` with no `_dark` gate at all (unlike
+ * track/filledTrack, which at least have one Chakra's own colorMode never triggers here) — so
+ * every bare `<SliderThumb>` renders a literal white circle on the dark canvas regardless of mode,
+ * same bug class as Menu/Modal but without even the dead `_dark` branch.
+ */
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f;
+    return ({
+        thumb: {
+            [$thumbBg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
+            bg: $thumbBg.reference,
+        },
+    });
+});
+export const Slider = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/esm/Theme/chakra/Switch.styles.js

@@ -0,0 +1,21 @@
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { switchAnatomy } from "@chakra-ui/anatomy";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(switchAnatomy.keys);
+const $thumbBg = cssVar("switch-thumb-bg");
+/**
+ * Same bug as Slider's thumb: Chakra's own Switch thumb baseStyle hardcodes `bg: "white"` with no
+ * `_dark` gate at all, so every bare `<Switch>` renders a literal white knob on the dark canvas
+ * regardless of mode.
+ */
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f;
+    return ({
+        thumb: {
+            [$thumbBg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
+            bg: $thumbBg.reference,
+        },
+    });
+});
+export const Switch = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/esm/Theme/chakra/Tabs.styles.js

@@ -0,0 +1,38 @@
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { tabsAnatomy } from "@chakra-ui/anatomy";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(tabsAnatomy.keys);
+const $bg = cssVar("tabs-bg");
+const $border = cssVar("tabs-border-color");
+/**
+ * Same bug class as Menu/Modal/Popover: Chakra's own Tabs baseStyle hardcodes the selected tab's
+ * "cutout" color to `colors.white` outside `_dark` for two variants — `enclosed`'s selected border
+ * (meant to match the panel it sits against) and `enclosed-colored`'s selected background — both
+ * gated behind `_dark`, which this theme-swap app never triggers. Every selected `enclosed`/
+ * `enclosed-colored` tab renders a white seam/fill on the dark canvas.
+ */
+const variantEnclosed = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f;
+    return ({
+        tab: {
+            _selected: {
+                [$border.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
+            },
+        },
+    });
+});
+const variantEnclosedColored = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f;
+    return ({
+        tab: {
+            _selected: {
+                [$bg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
+            },
+        },
+    });
+});
+export const Tabs = defineMultiStyleConfig({
+    variants: {
+        enclosed: variantEnclosed,
+        "enclosed-colored": variantEnclosedColored,
+    },
+});

package/dist/esm/Theme/chakra/common.web.js

@@ -0,0 +1,22 @@
+import { space, sizes, radii, shadows, zIndices, breakpoints, lineHeights, letterSpacings, } from "../tokens/primitives";
+/**
+ * Web (Chakra) assembly of the pure primitives. `config.cssVarPrefix` is a Chakra
+ * concern, which is why this assembly lives here and not in `tokens/`.
+ */
+const common = {
+    lineHeights,
+    letterSpacings,
+    space,
+    sizes,
+    breakpoints,
+    shadows,
+    radii,
+    zIndices,
+    config: {
+        // Chakra's default, and it must stay that way. A custom prefix silently breaks every
+        // `var(--chakra-colors-*)` an app writes in plain CSS: the variable simply does not
+        // exist, so the fallback (usually #fff) wins and the surface renders white in dark mode.
+        cssVarPrefix: "chakra",
+    },
+};
+export default common;