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

package/dist/esm/Components/Dropdown/DropDown.js

@@ -0,0 +1,249 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
+import { Box, Flex, Button, useDisclosure, List, ListItem, Portal, } from "@chakra-ui/react";
+import { motion } from "framer-motion";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { ChevronDown } from "lucide-react";
+import { rafThrottle } from "../../Utils/rafThrottle";
+const MotionBox = motion(forwardRef((props, ref) => (_jsx(Box, { ref: ref, ...props }))));
+// Size scale (mirrors the Button sizes). `btn` is the Chakra Button size.
+const SIZE_MAP = {
+    xs: { btn: "xs", fontSize: "0.75rem", py: 1, px: 2.5, img: "1rem", chevron: 13, minW: "8rem", gap: 1.5 },
+    sm: { btn: "sm", fontSize: "0.8125rem", py: 1.5, px: 3, img: "1.05rem", chevron: 14, minW: "9rem", gap: 2 },
+    md: { btn: "md", fontSize: "0.875rem", py: 2, px: 3, img: "1.15rem", chevron: 16, minW: "11rem", gap: 2 },
+    lg: { btn: "lg", fontSize: "0.9375rem", py: 2.5, px: 3.5, img: "1.25rem", chevron: 18, minW: "12rem", gap: 2.5 },
+    xl: { btn: "lg", fontSize: "1.0625rem", py: 3, px: 4, img: "1.4rem", chevron: 20, minW: "13rem", gap: 3 },
+};
+const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType = "button", text, DropdownIcon, isVisibleIconShow = true, buttonProps, headStyle, ListStyle, ItemStyle, LabelStyle, ImageStyle, size, optionsSize, divider = false, ariaLabel, }, ref) => {
+    var _a, _b;
+    const theme = useCustomTheme();
+    const { isOpen, onOpen, onToggle, onClose } = useDisclosure();
+    const dropdownRef = useRef(null);
+    const menuRef = useRef(null);
+    const [menuPos, setMenuPos] = useState({ top: 0, left: 0, width: 0 });
+    const s = (_b = SIZE_MAP[(_a = size !== null && size !== void 0 ? size : optionsSize) !== null && _a !== void 0 ? _a : "md"]) !== null && _b !== void 0 ? _b : SIZE_MAP.md;
+    const menuId = useId();
+    // Roving-tabindex keyboard nav for the menu (ARIA APG menu-button pattern):
+    // real DOM focus moves through the items, so no aria-activedescendant is needed.
+    const buttonTriggerRef = useRef(null);
+    const textTriggerRef = useRef(null);
+    const itemRefs = useRef([]);
+    const pendingFocusIndex = useRef(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    // The trigger is never unmounted, so — unlike focusing into the portaled
+    // menu on open — this can focus synchronously.
+    const focusTrigger = () => {
+        var _a, _b;
+        (_b = ((_a = buttonTriggerRef.current) !== null && _a !== void 0 ? _a : textTriggerRef.current)) === null || _b === void 0 ? void 0 : _b.focus();
+    };
+    const openAndFocus = (index) => {
+        var _a;
+        if (isOpen) {
+            // Already open (trigger still holds focus, e.g. after Enter/Space) — the
+            // portal is already mounted, so focus directly; no need to wait a frame,
+            // and the effect below only reacts to isOpen *changing* anyway.
+            setActiveIndex(index);
+            (_a = itemRefs.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            pendingFocusIndex.current = index;
+            onOpen();
+        }
+    };
+    useEffect(() => {
+        if (isOpen) {
+            const idx = pendingFocusIndex.current;
+            pendingFocusIndex.current = null;
+            if (idx !== null) {
+                setActiveIndex(idx);
+                // Chakra's <Portal> mounts its children a tick after this effect runs
+                // (it resolves its target node via its own effect first), so the menu
+                // item ref isn't attached yet here — a frame gets us past that.
+                requestAnimationFrame(() => { var _a; return (_a = itemRefs.current[idx]) === null || _a === void 0 ? void 0 : _a.focus(); });
+            }
+        }
+        else {
+            setActiveIndex(0);
+        }
+    }, [isOpen]);
+    const handleListItemClick = (optionId, optionLabel) => {
+        onClose();
+        handleOptionSelect(optionId, optionLabel);
+    };
+    const handleTriggerKeyDown = (e) => {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            openAndFocus(0);
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            openAndFocus(options.length - 1);
+        }
+        else if (e.key === "Escape" && isOpen) {
+            e.preventDefault();
+            onClose();
+        }
+        else if (e.key === "Enter" || e.key === " ") {
+            // Explicit rather than relying on native button activation: the text
+            // trigger is a styled Flex (no default action to rely on), and jsdom's
+            // `fireEvent` does not simulate a real browser's Enter/Space-activates-
+            // button default action either.
+            e.preventDefault();
+            onToggle();
+        }
+    };
+    const handleMenuKeyDown = (e) => {
+        var _a, _b, _c;
+        if (options.length === 0)
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            const step = e.key === "ArrowDown" ? 1 : -1;
+            const next = (activeIndex + step + options.length) % options.length;
+            setActiveIndex(next);
+            (_a = itemRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            setActiveIndex(0);
+            (_b = itemRefs.current[0]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            const last = options.length - 1;
+            setActiveIndex(last);
+            (_c = itemRefs.current[last]) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            onClose();
+            focusTrigger();
+        }
+        else if (e.key === "Tab") {
+            onClose();
+        }
+    };
+    const handleItemKeyDown = (e, optionId, optionLabel) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleListItemClick(optionId, optionLabel);
+            focusTrigger();
+        }
+    };
+    // The menu is portaled to <body> (so it sits above everything). Anchor it to
+    // the trigger, then clamp to the viewport so it never overflows off-screen
+    // (e.g. when the trigger sits near the right or bottom edge).
+    const updateMenuPos = useCallback(() => {
+        var _a, _b;
+        if (!dropdownRef.current)
+            return;
+        const r = dropdownRef.current.getBoundingClientRect();
+        const gutter = 8;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        // Use the rendered menu size when available; fall back to trigger width.
+        const menuW = ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || r.width;
+        const menuH = ((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
+        // Horizontal: prefer left-aligned to trigger; if it overflows the right
+        // edge, right-align to the trigger, then clamp within [gutter, vw-gutter].
+        let left = r.left;
+        if (left + menuW > vw - gutter)
+            left = r.right - menuW;
+        left = Math.min(Math.max(left, gutter), Math.max(gutter, vw - menuW - gutter));
+        // Vertical: prefer below the trigger; flip above when it would overflow the
+        // bottom and there is more room above. Clamp within the viewport.
+        let top = r.bottom;
+        const spaceBelow = vh - r.bottom;
+        const spaceAbove = r.top;
+        if (menuH && top + menuH > vh - gutter && spaceAbove > spaceBelow) {
+            top = r.top - menuH;
+        }
+        top = Math.min(Math.max(top, gutter), Math.max(gutter, vh - menuH - gutter));
+        setMenuPos({ top, left, width: r.width });
+    }, []);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        updateMenuPos();
+        const onReposition = rafThrottle(updateMenuPos);
+        window.addEventListener("scroll", onReposition, {
+            capture: true,
+            passive: true,
+        });
+        window.addEventListener("resize", onReposition);
+        return () => {
+            onReposition.cancel();
+            window.removeEventListener("scroll", onReposition, true);
+            window.removeEventListener("resize", onReposition);
+        };
+    }, [isOpen, updateMenuPos]);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            var _a, _b;
+            const target = event.target;
+            // Ignore clicks on the trigger or inside the (portaled) menu.
+            if ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))
+                return;
+            if ((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))
+                return;
+            onClose();
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [onClose]);
+    const setMenuRef = (node) => {
+        menuRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+        // Recompute once the menu has mounted so clamping uses its real size.
+        if (node)
+            updateMenuPos();
+    };
+    const Chevron = isVisibleIconShow ? (_jsx(Box, { as: "span", display: "inline-flex", transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", children: _jsx(ChevronDown, { size: s.chevron }) })) : undefined;
+    const dropDownToggleOption = () => {
+        var _a, _b, _c, _d;
+        const ButtonToggle = (_jsx(Button, { ref: buttonTriggerRef, onClick: onToggle, onKeyDown: handleTriggerKeyDown, size: s.btn, colorScheme: "primary", borderRadius: "0.5rem", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (ButtonText ? undefined : "Open menu"), rightIcon: Chevron, sx: { transition: "all 0.15s ease", ...(dropDownButtonStyle) }, ...buttonProps, children: _jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
+        const TextToggle = (_jsxs(Flex, { ref: textTriggerRef, onClick: onToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700], transition: "color 0.15s ease", _hover: { color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[600] }, style: dropDownButtonStyle, role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (text ? undefined : "Open menu"), children: [DropdownIcon, text, Chevron] }));
+        return dropdownType === "button" ? ButtonToggle : TextToggle;
+    };
+    const DropdownContentRender = () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        return (_jsx(List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, bg: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#fff", border: `0.063rem solid ${(_f = (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.boxborder) === null || _e === void 0 ? void 0 : _e[200]) !== null && _f !== void 0 ? _f : (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[200]}`, borderRadius: "0.625rem", boxShadow: (_h = theme.shadows) === null || _h === void 0 ? void 0 : _h.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: {
+                scrollbarWidth: "thin",
+                scrollbarColor: `${(_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[300]} transparent`,
+                "&::-webkit-scrollbar": { width: "6px" },
+                "&::-webkit-scrollbar-thumb": {
+                    background: (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray) === null || _m === void 0 ? void 0 : _m[300],
+                    borderRadius: "3px",
+                },
+                "&::-webkit-scrollbar-thumb:hover": {
+                    background: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray) === null || _p === void 0 ? void 0 : _p[400],
+                },
+            }, style: ListStyle, children: options.map((option, index) => {
+                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, _5, _6;
+                return (_jsxs(ListItem, { ref: (node) => {
+                        itemRefs.current[index] = node;
+                    }, role: "menuitem", tabIndex: index === activeIndex ? 0 : -1, onClick: () => {
+                        handleListItemClick(option.id, option.label);
+                        focusTrigger();
+                    }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: 1.5, px: s.px, py: s.py, borderRadius: "0.375rem", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700]) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[700], transition: "background 0.12s ease, color 0.12s ease", _hover: {
+                        bg: (_j = (_h = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[8]) !== null && _j !== void 0 ? _j : (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray[100],
+                        color: (_o = (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.primary) === null || _m === void 0 ? void 0 : _m[700]) !== null && _o !== void 0 ? _o : (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.primary) === null || _q === void 0 ? void 0 : _q[600],
+                    }, _focus: {
+                        bg: (_u = (_t = (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.primary) === null || _s === void 0 ? void 0 : _s.opacity) === null || _t === void 0 ? void 0 : _t[8]) !== null && _u !== void 0 ? _u : (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.gray[100],
+                        color: (_y = (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.primary) === null || _x === void 0 ? void 0 : _x[700]) !== null && _y !== void 0 ? _y : (_0 = (_z = theme.colors) === null || _z === void 0 ? void 0 : _z.primary) === null || _0 === void 0 ? void 0 : _0[600],
+                    }, borderBottom: divider
+                        ? `0.063rem solid ${(_3 = (_2 = (_1 = theme.colors) === null || _1 === void 0 ? void 0 : _1.boxborder) === null || _2 === void 0 ? void 0 : _2[100]) !== null && _3 !== void 0 ? _3 : (_4 = theme.colors) === null || _4 === void 0 ? void 0 : _4.gray[200]}`
+                        : undefined, sx: { "&:last-child": { borderBottom: "none" } }, style: ItemStyle, fontWeight: 500, children: [(option === null || option === void 0 ? void 0 : option.image) && (_jsx(Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: (_6 = (_5 = theme.colors) === null || _5 === void 0 ? void 0 : _5.gray) === null || _6 === void 0 ? void 0 : _6[500], style: ImageStyle })), _jsx(Box, { as: "span", fontSize: s.fontSize, isTruncated: true, 
+                            // fontWeight={400}
+                            style: LabelStyle, children: option.label })] }, option.id));
+            }) }));
+    };
+    return (_jsxs(Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && (_jsx(Portal, { children: _jsx(MotionBox, { ref: setMenuRef, position: "fixed", top: `${menuPos.top}px`, left: `${menuPos.left}px`, minW: `${menuPos.width}px`, zIndex: 1500, initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: headStyle, children: DropdownContentRender() }) }))] }));
+});
+Dropdown.displayName = "Dropdown";
+export default Dropdown;

package/dist/esm/Components/Dropdown/DropdownProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Editor/Editor.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo, useState } from "react";
+import { Box } from "@chakra-ui/react";
+import JoditEditor from "jodit-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { isDarkCanvas } from "../../Theme/tokens/builders/accentText";
+import { getJoditThemeVars } from "./joditThemeVars";
+const Editor = React.memo(function Editor({ value, key, config, editorRef, className, onChange, onBlur, }) {
+    const theme = useCustomTheme();
+    // Jodit portals dialogs/toolbar-dropdown popups (search & replace, image/link properties,
+    // font-size list, ...) to `document.body` by default (`Dialog.destination` /
+    // `getPopupViewRoot`), outside this wrapper's DOM subtree — so the CSS custom properties
+    // `themeVars` sets below never reach them and they render in Jodit's default light styling
+    // even in dark mode. Pointing Jodit's own `popupRoot` config at this wrapper keeps popups
+    // inside the subtree those variables cascade into.
+    const [popupRoot, setPopupRoot] = useState(null);
+    const stableConfig = useMemo(() => {
+        var _a, _b;
+        return ({
+            theme: isDarkCanvas((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff") ? "dark" : "default",
+            popupRoot,
+            // `config` spread as `Record<string, unknown>`: mixing a literal `popupRoot` key with a
+            // spread of the raw `DeepPartial<Config>` type (Jodit's huge recursive config type) blows
+            // past TS's type-instantiation depth limit (TS2589) — the cast avoids that without
+            // weakening the memo's actual return type, which is still asserted below.
+            ...config,
+        });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(config), theme, popupRoot]);
+    // Jodit's own `theme: "dark"|"default"` only switches which of ITS selectors apply — those
+    // are still driven by Jodit's hardcoded gray/blue CSS variables, not this app's palette. This
+    // feeds our actual active colors into those variables, scoped to this instance (see
+    // `joditThemeVars.ts`).
+    const themeVars = useMemo(() => { var _a, _b; return getJoditThemeVars(theme.colors, isDarkCanvas((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff")); }, [theme]);
+    return (_jsx(Box, { ref: setPopupRoot, sx: themeVars, children: _jsx(JoditEditor, { config: stableConfig, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }, key) }));
+});
+export default Editor;

package/dist/esm/Components/Editor/EditorProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Editor/joditThemeVars.js

@@ -0,0 +1,75 @@
+/**
+ * Maps this library's active palette to the CSS custom properties Jodit's own light/dark theme
+ * CSS reads (`node_modules/jodit/es2021/jodit.css`). Jodit's `theme: "dark" | "default"` config
+ * only toggles which of ITS OWN selectors apply (`.jodit_theme_dark`, `.jodit-ui-input_theme_dark`,
+ * …) — those selectors are still driven by Jodit's own hardcoded `--jd-dark-*` / `--jd-color-*`
+ * custom properties (a generic mid-gray `#575757` canvas, a blue `#1e88e5` accent, …), so toggling
+ * the theme alone renders the editor in Jodit's palette instead of ours. This is what shipped the
+ * reported "editor is not black" bug in dark mode.
+ *
+ * `PaletteProps.background`/`.text` are role-stable ColorScales whose LIGHTNESS (not index)
+ * flips between modes — e.g. `background[50]` is `#ffffff` in light and near-black in dark, and
+ * `text[900]` is near-black ink in light and near-white ink in dark (see
+ * `Theme/tokens/builders/buildDarkPalette.ts`). So the *same* token expression already resolves
+ * correctly in both modes; only the Jodit CSS-variable NAME differs (`--jd-dark-*` only takes
+ * effect inside `.jodit_theme_dark`, `--jd-color-*` is what the default theme reads), which is why
+ * this still branches on `isDark`.
+ */
+export const getJoditThemeVars = (colors, isDark) => {
+    const shared = {
+        // Not remapped by `.jodit_theme_dark` in Jodit's own CSS, so one declaration covers both modes.
+        "--jd-color-border-selected": colors.primary[500],
+        // `--jd-color-panel` backs the search & replace box (`.jodit-ui-search__box`) and any other
+        // panel that isn't re-themed under `.jodit_theme_dark` (that scope overrides `--jd-color-border`
+        // itself to a hardcoded `#6b6b6b`, but never touches `--jd-color-panel`) — unset in dark mode it
+        // fell back to Jodit's own `#f9f9f9`, the reported "Search & Replace panel white" bug. Role-stable
+        // like `background`/`text`: the SAME expression already resolved correctly for the light branch.
+        "--jd-color-panel": colors.backgroundColor.secondary,
+        // Dialog/insert-link/insert-image inputs (`.jodit-ui-input__input`, `.jodit-ui-select__input`)
+        // read `--jd-color-white` as their OWN background regardless of theme unless Jodit applied its
+        // `_theme_dark` modifier class to that specific element (which reads `--jd-color-gray` instead,
+        // set below) — leaving either unset is what shipped the "white inputs" bug, since portalled
+        // dialog inputs don't reliably get the modifier class. `background[50]` is this library's
+        // established "white surface, darkens in dark mode" token (same pattern as the DatePicker
+        // month/year `<select>`), so one declaration is correct in both modes.
+        "--jd-color-white": colors.background[50],
+    };
+    if (isDark) {
+        return {
+            ...shared,
+            // `.jodit-workplace`'s own background rule in jodit.css (`.jodit-container:not(.jodit_inline)
+            // .jodit-workplace { background-color: var(--jd-color-background-default) }`) is NOT scoped
+            // under `.jodit_theme_dark` — that scope only re-themes the *border* on this selector, never
+            // the background. `--jd-color-background-default` itself is declared once, at `:root`, as
+            // `var(--jd-color-white)`, and our `--jd-color-white` override lives on this instance's wrapper
+            // (a descendant), so it never reaches `:root`'s own computed value. Left unset here, the
+            // workplace canvas fell back to Jodit's own white default even with `.jodit_theme_dark` active
+            // — this is the reported "canvas renders white in dark mode" bug.
+            "--jd-color-background-default": colors.backgroundColor.main, // .jodit-workplace canvas bg
+            "--jd-dark-background-color": colors.backgroundColor.main, // canvas / toolbar-box / wysiwyg bg
+            "--jd-dark-toolbar-color": colors.backgroundColor.secondary, // toolbar + status-bar bg
+            "--jd-dark-text-color": colors.text[900], // body/button/status-bar ink
+            "--jd-dark-icon-color": colors.text[700], // toolbar icon fill/stroke
+            // Was `colors.backgroundColor.muted` — computed at ~1.3:1 against the canvas (a near-miss
+            // that shipped: both values sit within ~11 lightness points of each other down near L7-18,
+            // where WCAG contrast collapses non-linearly). This backs BOTH the toolbar/dialog-button
+            // hover fill (paired with `--jd-dark-background-color` as the flipped-to-dark hover text —
+            // see `.jodit_theme_dark .jodit-ui-button:hover` in jodit.css) and the `.jodit-select`/
+            // `.jodit-input` background (paired with `--jd-dark-border-color` as its text). `background[900]`
+            // is this palette's dark-mode "bright highlight" rung (~9.7-10.7:1 against the canvas across
+            // brands) — verified numerically before this change, not assumed.
+            "--jd-dark-background-ligher": colors.background[900],
+            "--jd-dark-border-color": colors.boxborder[500], // select/input/dialog-header border
+            // `_theme_dark`-suffixed input/select variants read this instead of `--jd-color-white` above.
+            "--jd-color-gray": colors.background[50],
+        };
+    }
+    return {
+        ...shared,
+        "--jd-color-background-default": colors.backgroundColor.main, // workplace/popup bg
+        "--jd-color-text": colors.text[900], // base button/status-bar ink
+        "--jd-color-icon": colors.text[700], // base icon fill/stroke
+        "--jd-color-button-background-hover": colors.backgroundColor.muted, // hover bg
+        "--jd-color-border": colors.boxborder[500], // container/workplace border
+    };
+};

package/dist/esm/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HStack, PinInput, PinInputField, Box, Text, Button, Flex, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import { MailCheck } from "lucide-react";
+export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pins = 5, description, title, isDisabled = false, isInvalid = false, styles, }) {
+    const theme = useCustomTheme();
+    return (_jsxs(Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", borderColor: theme.colors.gray[200], borderRadius: "lg", children: [_jsx(Box, { mb: 4, children: _jsx(MailCheck, { size: 80, color: theme.colors.primary[500] }) }), _jsx(Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), _jsxs(Text, { fontSize: "md", textAlign: "center", color: theme.colors.gray[600], mb: 6, children: [description, _jsx("br", {}), "your new Pixel Account"] }), _jsx(HStack, { spacing: 3, mb: 6, children: _jsx(PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { borderRadius: "md", border: "0.063rem solid", 
+                        // [800], not [300]: WCAG 1.4.11 needs >=3.0 for a control boundary against any
+                        // named surface up to `muted` (lightest); [300] fails there, [800] clears all
+                        // with margin.
+                        borderColor: theme.colors.boxborder[800], backgroundColor: theme.colors.background[200], _focus: {
+                            borderColor: theme.colors.primary[500],
+                            boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
+                        } }, index))) }) }), _jsx(Flex, { justify: "center", children: _jsxs(Text, { fontSize: "sm", color: theme.colors.gray[600], children: ["Didn\u2019t receive the code?", " ", _jsx(Button, { variant: "link", color: theme.colors.primary[700], fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));
+}

package/dist/esm/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/EmptyState/EmptyState.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Image, Text } from "@chakra-ui/react";
+import { Inbox } from "lucide-react";
+import { keyframes } from "@emotion/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+const float = keyframes `
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+`;
+const sizeMap = {
+    sm: { badge: "48px", icon: 20, title: "0.95rem", desc: "0.8rem", gap: 2, pad: 6 },
+    md: { badge: "72px", icon: 30, title: "1.1rem", desc: "0.9rem", gap: 3, pad: 10 },
+    lg: { badge: "96px", icon: 40, title: "1.35rem", desc: "1rem", gap: 4, pad: 14 },
+};
+const EmptyState = ({ title = "No data found", description, icon: IconComp = Inbox, image, size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "240px", sx, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const theme = useCustomTheme();
+    const s = sizeMap[size];
+    // Resolve accent palette: theme.colors[colorScheme] or theme.colors.semantic[*]
+    const semantic = ["success", "error", "warning", "info"];
+    const palette = semantic.includes(colorScheme)
+        ? theme.colors.semantic[colorScheme]
+        : theme.colors[colorScheme];
+    const accent = (_a = palette === null || palette === void 0 ? void 0 : palette[500]) !== null && _a !== void 0 ? _a : theme.colors.primary[500];
+    const accentSoft = (_b = palette === null || palette === void 0 ? void 0 : palette[50]) !== null && _b !== void 0 ? _b : theme.colors.primary[50];
+    const containerStyles = variant === "subtle"
+        ? { bg: (_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : theme.colors.backgroundColor.subtle, borderRadius: "16px" }
+        : variant === "dashed"
+            ? {
+                border: "2px dashed",
+                borderColor: (_f = (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[200]) !== null && _f !== void 0 ? _f : theme.colors.border[500],
+                borderRadius: "16px",
+                bg: "transparent",
+            }
+            : {};
+    return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", textAlign: "center", minH: minH, px: s.pad, py: s.pad, gap: s.gap, width: "100%", sx: { ...containerStyles, ...sx }, children: [image ? (_jsx(Image, { src: image, alt: title, boxSize: s.badge, objectFit: "contain", animation: animate ? `${float} 3s ease-in-out infinite` : undefined })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.badge, borderRadius: "full", bg: accentSoft, color: accent, animation: animate ? `${float} 3s ease-in-out infinite` : undefined, sx: {
+                    boxShadow: `0 0 0 8px ${accentSoft}55`,
+                }, children: _jsx(IconComp, { size: s.icon, strokeWidth: 1.75 }) })), _jsxs(Box, { children: [_jsx(Text, { fontSize: s.title, fontWeight: 600, color: (_h = (_g = theme.colors.gray) === null || _g === void 0 ? void 0 : _g[800]) !== null && _h !== void 0 ? _h : theme.colors.text[900], mt: 1, children: title }), description && (_jsx(Text, { fontSize: s.desc, color: (_k = (_j = theme.colors.gray) === null || _j === void 0 ? void 0 : _j[500]) !== null && _k !== void 0 ? _k : theme.colors.text[400], mt: 1, maxW: "380px", children: description }))] }), action && (_jsx(Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
+};
+export default EmptyState;

package/dist/esm/Components/EmptyState/EmptyStateProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/FeedbackForm/FeedbackForm.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Box, Button, FormControl, FormLabel, FormErrorMessage, Grid, Input, Radio, RadioGroup, Stack, Textarea, useToast, } from "@chakra-ui/react";
+// eslint-disable-next-line no-control-regex, no-useless-escape
+const emailRegex = /^(?:[a-zA-Z0-9_'^&\/+{}=?`|~!-]+(?:\.[a-zA-Z0-9_'^&\/+{}=?`|~!-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z-]*[a-zA-Z]:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]+)\])$/;
+export default function FeedbackForm(props) {
+    var _a, _b, _c, _d, _e;
+    const { onSubmit, submitUrl, isDisabled, defaultValues, submitText = "Submit", isSubmittingText = "Submitting..." } = props;
+    const toast = useToast();
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [type, setType] = useState((_a = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.type) !== null && _a !== void 0 ? _a : "comments");
+    const [message, setMessage] = useState((_b = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.message) !== null && _b !== void 0 ? _b : "");
+    const [firstName, setFirstName] = useState((_c = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.firstName) !== null && _c !== void 0 ? _c : "");
+    const [lastName, setLastName] = useState((_d = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.lastName) !== null && _d !== void 0 ? _d : "");
+    const [email, setEmail] = useState((_e = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.email) !== null && _e !== void 0 ? _e : "");
+    const errors = useMemo(() => {
+        return {
+            message: message.trim().length === 0 ? "Please describe your feedback" : "",
+            firstName: firstName.trim().length === 0 ? "First name is required" : "",
+            lastName: lastName.trim().length === 0 ? "Last name is required" : "",
+            email: email.trim().length === 0 ? "Email is required" : !emailRegex.test(email) ? "Enter a valid email" : "",
+        };
+    }, [message, firstName, lastName, email]);
+    const hasErrors = Object.values(errors).some(Boolean);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (hasErrors) {
+            toast({ status: "error", title: "Please fix the errors in the form" });
+            return;
+        }
+        const payload = { type, message: message.trim(), firstName: firstName.trim(), lastName: lastName.trim(), email: email.trim() };
+        try {
+            setIsSubmitting(true);
+            if (onSubmit) {
+                await onSubmit(payload);
+            }
+            else if (submitUrl) {
+                const res = await fetch(submitUrl, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify(payload),
+                });
+                if (!res.ok)
+                    throw new Error(`Request failed: ${res.status}`);
+            }
+            toast({ status: "success", title: "Thank you for your feedback" });
+            setMessage("");
+            setFirstName("");
+            setLastName("");
+            setEmail("");
+            setType("comments");
+        }
+        catch (err) {
+            toast({
+                status: "error",
+                title: "Could not submit feedback",
+                description: err instanceof Error ? err.message : String(err),
+            });
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    return (_jsxs(Box, { as: "form", onSubmit: handleSubmit, width: "100%", children: [_jsxs(FormControl, { as: Box, mb: 6, isDisabled: isDisabled, children: [_jsx(FormLabel, { children: "Feedback Type" }), _jsx(RadioGroup, { value: type, onChange: (v) => setType(v), children: _jsxs(Stack, { direction: "row", spacing: 8, children: [_jsx(Radio, { value: "comments", children: "Comments" }), _jsx(Radio, { value: "suggestions", children: "Suggestions" }), _jsx(Radio, { value: "questions", children: "Questions" })] }) })] }), _jsxs(FormControl, { mb: 6, isInvalid: !!errors.message, isRequired: true, isDisabled: isDisabled, children: [_jsx(FormLabel, { children: "Describe Your Feedback" }), _jsx(Textarea, { value: message, onChange: (e) => setMessage(e.target.value), rows: 6, placeholder: "Tell us more..." }), _jsx(FormErrorMessage, { children: errors.message })] }), _jsxs(Grid, { templateColumns: { base: "1fr", md: "1fr 1fr" }, gap: 4, mb: 6, children: [_jsxs(FormControl, { isInvalid: !!errors.firstName, isRequired: true, isDisabled: isDisabled, children: [_jsx(FormLabel, { children: "First Name" }), _jsx(Input, { value: firstName, onChange: (e) => setFirstName(e.target.value), placeholder: "First name" }), _jsx(FormErrorMessage, { children: errors.firstName })] }), _jsxs(FormControl, { isInvalid: !!errors.lastName, isRequired: true, isDisabled: isDisabled, children: [_jsx(FormLabel, { children: "Last Name" }), _jsx(Input, { value: lastName, onChange: (e) => setLastName(e.target.value), placeholder: "Last name" }), _jsx(FormErrorMessage, { children: errors.lastName })] })] }), _jsxs(FormControl, { mb: 6, isInvalid: !!errors.email, isRequired: true, isDisabled: isDisabled, children: [_jsx(FormLabel, { children: "E-mail" }), _jsx(Input, { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "ex: myname@example.com" }), _jsx(FormErrorMessage, { children: errors.email })] }), _jsx(Button, { type: "submit", colorScheme: "primary", isLoading: isSubmitting, loadingText: isSubmittingText, isDisabled: isDisabled, children: submitText })] }));
+}

package/dist/esm/Components/FieldSelectModal/FieldSelectModal.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Button, Checkbox, Flex, Input, InputGroup, InputLeftElement, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, SimpleGrid, Text, } from "@chakra-ui/react";
+import { motion } from "framer-motion";
+import { Search } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+const MotionModalContent = motion(ModalContent);
+const FieldSelectModal = ({ isOpen, onClose, fields, onConfirm, title = "Select Fields", confirmText = "Apply", loadingText = "Applying...", isLoading = false, defaultSelected, columns = 2, searchable, }) => {
+    const theme = useCustomTheme();
+    const [selected, setSelected] = useState([]);
+    const [query, setQuery] = useState("");
+    useEffect(() => {
+        if (isOpen) {
+            setSelected(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : fields.map((f) => f.field_name));
+            setQuery("");
+        }
+    }, [isOpen, fields, defaultSelected]);
+    const showSearch = searchable !== null && searchable !== void 0 ? searchable : fields.length >= 8;
+    const visibleFields = useMemo(() => {
+        if (!query.trim())
+            return fields;
+        const q = query.toLowerCase();
+        return fields.filter((f) => f.field_label.toLowerCase().includes(q));
+    }, [fields, query]);
+    const toggle = (name) => setSelected((prev) => prev.includes(name) ? prev.filter((f) => f !== name) : [...prev, name]);
+    const isAllSelected = selected.length === fields.length && fields.length > 0;
+    const isIndeterminate = selected.length > 0 && selected.length < fields.length;
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, size: "xl", isCentered: true, children: [_jsx(ModalOverlay, { bg: "blackAlpha.400", backdropFilter: "blur(4px)" }), _jsxs(MotionModalContent, { borderRadius: "16px", overflow: "hidden", maxH: "85vh", 
+                // Chakra's default dialog bg (`colors.white`, or `gray.700` under `_dark`) resolves to a
+                // white/light-grey panel against our palettes, so the surface must be set explicitly.
+                bg: theme.colors.background[50], initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [_jsxs(ModalHeader, { pb: 2, children: [_jsx(Text, { fontSize: "lg", fontWeight: 600, children: title }), _jsxs(Text, { fontSize: "sm", color: theme.colors.gray[500], fontWeight: 400, children: [selected.length, " of ", fields.length, " selected"] })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { overflowY: "auto", children: [_jsxs(Flex, { align: "center", justify: "space-between", mb: 3, gap: 3, wrap: "wrap", children: [_jsx(Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: (e) => setSelected(e.target.checked ? fields.map((f) => f.field_name) : []), fontWeight: 500, children: "Select all" }), showSearch && (_jsxs(InputGroup, { size: "sm", maxW: "220px", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.gray[400] }) }), _jsx(Input, { placeholder: "Search fields", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "8px" })] }))] }), _jsx(SimpleGrid, { columns: columns, spacingX: 4, spacingY: 3, children: visibleFields.map((field) => (_jsx(Checkbox, { isChecked: selected.includes(field.field_name), onChange: () => toggle(field.field_name), children: _jsx(Text, { fontSize: "sm", children: field.field_label }) }, field.field_name))) }), visibleFields.length === 0 && (_jsxs(Text, { fontSize: "sm", color: theme.colors.gray[500], textAlign: "center", py: 6, children: ["No fields match \"", query, "\""] }))] }), _jsxs(ModalFooter, { gap: 3, children: [_jsx(Button, { variant: "outline", colorScheme: "gray", size: "sm", onClick: onClose, children: "Cancel" }), _jsx(Button, { colorScheme: "primary", size: "sm", isLoading: isLoading, loadingText: loadingText, isDisabled: selected.length === 0, onClick: () => onConfirm(selected), children: confirmText })] })] })] }));
+};
+export default FieldSelectModal;