pixelize-design-library 2.4.1 → 2.4.2-beta.0

package/dist/esm/Components/Apexcharts/chartBase.js

@@ -0,0 +1,69 @@
+import { chartInk, chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
+const FONT = "inherit";
+/**
+ * Animations are the single biggest cost on a weak device, and ApexCharts re-runs them on
+ * every data change. Gate them on the same signals a browser already exposes rather than
+ * shipping a prop nobody sets: reduced-motion intent, core count, and device memory.
+ */
+export function prefersLightweightRendering() {
+    var _a, _b;
+    if (typeof window === "undefined")
+        return true;
+    const reduced = (_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)")) === null || _b === void 0 ? void 0 : _b.matches;
+    if (reduced)
+        return true;
+    const nav = window.navigator;
+    if (typeof nav.deviceMemory === "number" && nav.deviceMemory <= 4)
+        return true;
+    return typeof nav.hardwareConcurrency === "number" && nav.hardwareConcurrency <= 4;
+}
+export function baseChart(palette, overrides = {}) {
+    const ink = chartInk(palette);
+    const lightweight = prefersLightweightRendering();
+    return {
+        fontFamily: FONT,
+        foreColor: ink.muted,
+        background: "transparent",
+        toolbar: { show: false },
+        zoom: { enabled: false },
+        animations: lightweight
+            ? { enabled: false }
+            : { enabled: true, speed: 320, animateGradually: { enabled: false } },
+        redrawOnParentResize: true,
+        redrawOnWindowResize: true,
+        ...overrides,
+    };
+}
+export function baseGrid(palette, horizontal = false) {
+    const ink = chartInk(palette);
+    return {
+        borderColor: ink.grid,
+        strokeDashArray: 4,
+        xaxis: { lines: { show: horizontal } },
+        yaxis: { lines: { show: !horizontal } },
+        padding: { top: 8, right: 12, bottom: 0, left: 8 },
+    };
+}
+export function baseLegend(palette, position = "bottom") {
+    const ink = chartInk(palette);
+    return {
+        position,
+        horizontalAlign: position === "bottom" || position === "top" ? "center" : "left",
+        fontSize: "12px",
+        fontFamily: FONT,
+        labels: { colors: ink.muted, useSeriesColors: false },
+        markers: { size: 6, strokeWidth: 0, shape: "circle", offsetX: -3 },
+        itemMargin: { horizontal: 10, vertical: 4 },
+    };
+}
+export function baseTooltip(palette) {
+    return {
+        theme: chartMode(palette),
+        style: { fontSize: "12px", fontFamily: FONT },
+        fillSeriesColor: false,
+    };
+}
+export function baseAxisLabels(palette) {
+    const ink = chartInk(palette);
+    return { colors: ink.axis, fontSize: "12px", fontFamily: FONT };
+}

package/dist/esm/Components/AppearanceSettings/AppearanceSettings.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Box, Text, VStack } from "@chakra-ui/react";
+import { ThemesList } from "../../Theme/index.js";
+import { ThemeSwitcher } from "../../Theme/provider/index.js";
+import { FONT_SIZE_OPTIONS } from "../../Theme/provider/fontSize.js";
+import SelectV2 from "../SelectV2/SelectV2.js";
+const FieldLabel = ({ children }) => (_jsx(Text, { fontSize: "sm", fontWeight: "medium", color: "gray.600", mb: 2, children: children }));
+const brandSwatch = (name) => {
+    var _a, _b, _c;
+    const brand = ThemesList[name];
+    return (_jsx(Box, { w: "14px", h: "14px", borderRadius: "full", bg: (_c = (_b = (_a = brand === null || brand === void 0 ? void 0 : brand.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "gray.300", border: "1px solid", borderColor: "whiteAlpha.300" }));
+};
+export const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeChange, showBrand = true, showColorMode = true, showFontSize = true, size = "sm", labels, }) => {
+    var _a, _b, _c;
+    const brandOptions = useMemo(() => Object.keys(ThemesList).map((name) => ({
+        id: name,
+        label: name.charAt(0).toUpperCase() + name.slice(1),
+        icon: brandSwatch(name),
+    })), []);
+    const themeLabel = (_a = labels === null || labels === void 0 ? void 0 : labels.theme) !== null && _a !== void 0 ? _a : "Theme";
+    const colorModeLabel = (_b = labels === null || labels === void 0 ? void 0 : labels.colorMode) !== null && _b !== void 0 ? _b : "Color mode";
+    const fontSizeLabel = (_c = labels === null || labels === void 0 ? void 0 : labels.fontSize) !== null && _c !== void 0 ? _c : "Font Size";
+    return (_jsxs(VStack, { align: "stretch", spacing: 4, children: [showBrand && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: themeLabel }), _jsx(SelectV2, { options: brandOptions, value: brand, isSearchable: false, size: size, "aria-label": themeLabel, "data-testid": "appearance-brand-select", onChange: (option) => {
+                            if (!option)
+                                return;
+                            onBrandChange === null || onBrandChange === void 0 ? void 0 : onBrandChange(String(option.id));
+                        } })] })), showColorMode && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: colorModeLabel }), _jsx(Box, { "data-testid": "appearance-mode-switcher", children: _jsx(ThemeSwitcher, { variant: "segmented", showBrandPicker: false, size: size, "aria-label": colorModeLabel }) })] })), showFontSize && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: fontSizeLabel }), _jsx(SelectV2, { options: FONT_SIZE_OPTIONS, value: fontSize, isSearchable: false, size: size, "aria-label": fontSizeLabel, "data-testid": "appearance-font-size-select", 
+                        // Each row previews the size it sets, so the list is self-explaining.
+                        renderOption: (option) => (_jsx(Text, { as: "span", style: { fontSize: String(option.id) }, children: option.label })), onChange: (option) => {
+                            if (!option)
+                                return;
+                            onFontSizeChange === null || onFontSizeChange === void 0 ? void 0 : onFontSizeChange(String(option.id));
+                        } })] }))] }));
+};
+export default AppearanceSettings;

package/dist/esm/Components/AppearanceSettings/AppearanceSettingsProps.js

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

package/dist/esm/Components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, useTheme } from "@chakra-ui/react";
+export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }) {
+    const theme = useTheme();
+    return (_jsx(Breadcrumb, { spacing: spacing, separator: separator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, children: items.map((item, index) => (_jsx(BreadcrumbItem, { isCurrentPage: isCurrentPage && index === items.length - 1, children: _jsx(BreadcrumbLink, { href: item.path, sx: { "&:hover, &:active": { textDecoration: "none" } }, onClick: (event) => {
+                    event.preventDefault();
+                    handleClick(item.path);
+                }, children: item.label }) }, index))) }));
+}

package/dist/esm/Components/Breadcrumbs/BreadcrumbsProps.js

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

package/dist/esm/Components/Button/Button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Button as ChakraButton } from "@chakra-ui/react";
+function Button({ label, children, onClick, opacity, variant = "solid", leftIcon, rightIcon, size, isDisabled = false, isLoading = false, loadingText = "Loading", type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }) {
+    return (_jsx(ChakraButton, { ...aria, type: type, onClick: onClick, width: width || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));
+}
+export default memo(Button);

package/dist/esm/Components/Button/Button.styles.js

@@ -0,0 +1,204 @@
+import { accentTextOnCanvas, isDarkCanvas, onFilled, onGradient } from "../../Theme/tokens/builders/accentText.js";
+/**
+ * Outline/ghost/link text sits ON the canvas, so it needs a rung that stays readable there —
+ * `[500]` is pinned dark enough to carry a white label on the solid variant and measures only
+ * ~4.2 against the dark canvas. Returns `[500]` unchanged on light canvases, so existing apps
+ * are pixel-identical.
+ */
+const onCanvasText = (theme, colorScheme) => accentTextOnCanvas(theme.colors[colorScheme], theme.colors.backgroundColor.main);
+/**
+ * Ghost hover tint: translucent accent composited over whatever is behind it, so one value works
+ * on either canvas. The `[50]` rung it replaces sits ~1.04 against its own canvas in BOTH modes —
+ * a hover state you cannot see. Utility scales (red, green…) carry no `opacity` ramp, so they keep
+ * `[50]`.
+ */
+const onCanvasHoverBg = (theme, colorScheme, step) => {
+    var _a, _b;
+    const scale = theme.colors[colorScheme];
+    return (_b = (_a = scale.opacity) === null || _a === void 0 ? void 0 : _a[step]) !== null && _b !== void 0 ? _b : scale[50];
+};
+/**
+ * The rung one/two steps DARKER than the accent — what a filled button's hover/active needs so its
+ * white label stays legible.
+ *
+ * Every dark scale runs dark -> light across 50 -> 900 (brand scales are rebuilt that way, utility
+ * hues are reversed), the mirror of light mode. So "darker than [500]" is [600]/[700] in light but
+ * [400]/[300] in dark. Hardcoding [600] would hand the label a LIGHTER fill in dark and drop it to
+ * ~3.2 contrast.
+ */
+const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+const darkerFill = (theme, colorScheme, step) => {
+    const mode = isDarkCanvas(theme.colors.backgroundColor.main) ? "dark" : "light";
+    return theme.colors[colorScheme][FILL_STEP_RUNGS[mode][step]];
+};
+/** Label for the solid variant's filled bg — derived from THAT fill, since hover/active swap it. */
+const labelFor = (theme, fill) => onFilled(fill, theme.colors.white, theme.colors.black);
+export const Button = {
+    baseStyle: () => ({
+        borderRadius: "lg",
+        fontWeight: 500,
+        fontSize: "1rem",
+        transition: "all 0.2s",
+        _disabled: {
+            opacity: 0.6,
+            cursor: "not-allowed",
+        },
+    }),
+    variants: {
+        solid: ({ theme, colorScheme = "primary" }) => {
+            const fill = theme.colors[colorScheme][500];
+            const hoverFill = darkerFill(theme, colorScheme, 0);
+            const activeFill = darkerFill(theme, colorScheme, 1);
+            const hoverLabel = labelFor(theme, hoverFill);
+            return {
+                bg: fill,
+                color: labelFor(theme, fill),
+                _hover: {
+                    bg: hoverFill,
+                    color: hoverLabel,
+                    boxShadow: "sm",
+                    _disabled: {
+                        bg: hoverFill, // keep hover color on loading
+                        color: hoverLabel,
+                    },
+                },
+                _active: {
+                    bg: activeFill,
+                    color: labelFor(theme, activeFill),
+                    boxShadow: "none",
+                },
+                _loading: {
+                    bg: hoverFill, // keep hover color while loading
+                    color: hoverLabel,
+                    _hover: {
+                        bg: hoverFill,
+                        color: hoverLabel,
+                    },
+                },
+            };
+        },
+        outline: ({ theme, colorScheme = "primary" }) => {
+            const hoverFill = theme.colors[colorScheme][500];
+            const activeFill = darkerFill(theme, colorScheme, 0);
+            return {
+                border: "0.1rem solid",
+                borderColor: theme.colors[colorScheme][500],
+                color: onCanvasText(theme, colorScheme),
+                bg: "transparent",
+                _hover: {
+                    bg: hoverFill,
+                    borderColor: activeFill,
+                    // Was a hardcoded `theme.colors.white` — fails AA for any colorScheme whose [500]
+                    // doesn't clear white contrast (e.g. emerald/rosewood primary in dark, 3.38/3.46).
+                    color: labelFor(theme, hoverFill),
+                    _disabled: {
+                        //  bg: theme.colors[colorScheme][500],
+                        color: onCanvasText(theme, colorScheme),
+                    },
+                },
+                _active: {
+                    bg: activeFill,
+                    color: labelFor(theme, activeFill),
+                },
+                _loading: {
+                    // bg: theme.colors[colorScheme][500],
+                    color: onCanvasText(theme, colorScheme),
+                },
+            };
+        },
+        ghost: ({ theme, colorScheme = "primary" }) => ({
+            color: onCanvasText(theme, colorScheme),
+            bg: "transparent",
+            _hover: {
+                bg: onCanvasHoverBg(theme, colorScheme, 16),
+                color: onCanvasText(theme, colorScheme),
+            },
+            _active: {
+                bg: onCanvasHoverBg(theme, colorScheme, 24),
+            },
+        }),
+        link: ({ theme, colorScheme = "primary" }) => ({
+            color: onCanvasText(theme, colorScheme),
+            textDecoration: "underline",
+            bg: "transparent",
+            _hover: {
+                color: onCanvasText(theme, colorScheme),
+                textDecoration: "none",
+            },
+            _active: {
+                color: onCanvasText(theme, colorScheme),
+            },
+        }),
+        unstyled: () => ({
+            bg: "transparent",
+            color: "inherit",
+            _hover: {
+                bg: "transparent",
+            },
+        }),
+        // Theme-based two-tone gradient: each theme defines its own `gradient`
+        // {from,to} pair (see palettes); falls back to the primary scale. Ignores
+        // colorScheme. Hover/active shift brightness so it works for any pair.
+        gradient: ({ theme }) => {
+            var _a;
+            const g = (_a = theme.colors.gradient) !== null && _a !== void 0 ? _a : {
+                from: theme.colors.primary[400],
+                to: theme.colors.primary[700],
+            };
+            const bg = `linear-gradient(135deg, ${g.from} 0%, ${g.to} 100%)`;
+            return {
+                bgImage: bg,
+                color: onGradient(g.from, g.to, theme.colors.white, theme.colors.black),
+                border: "none",
+                _hover: {
+                    bgImage: bg,
+                    filter: "brightness(0.92)",
+                    boxShadow: "md",
+                    _disabled: { bgImage: bg, filter: "none" },
+                },
+                _active: {
+                    bgImage: bg,
+                    filter: "brightness(0.85)",
+                    boxShadow: "none",
+                },
+                _loading: {
+                    bgImage: bg,
+                    filter: "brightness(0.92)",
+                    _hover: { bgImage: bg, filter: "brightness(0.92)" },
+                },
+            };
+        },
+    },
+    sizes: {
+        xs: {
+            h: "1.5rem",
+            fontSize: "0.75rem",
+            px: "0.5rem",
+        },
+        sm: {
+            h: "2rem",
+            fontSize: "0.875rem",
+            px: "0.75rem",
+        },
+        md: {
+            h: "2.5rem",
+            fontSize: "1rem",
+            px: "1rem",
+        },
+        lg: {
+            h: "3rem",
+            fontSize: "1.125rem",
+            px: "1.5rem",
+        },
+        xl: {
+            h: "3.5rem",
+            fontSize: "1.25rem",
+            px: "2rem",
+        },
+    },
+    defaultProps: {
+        size: "md",
+        variant: "solid",
+        colorScheme: "primary",
+    },
+};

package/dist/esm/Components/Button/ButtonProps.js

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

package/dist/esm/Components/ButtonGroupIcon/ButtonGoupIconProps.js

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

package/dist/esm/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { Box, Button, ButtonGroup, IconButton, Menu, MenuButton, MenuItem, MenuList, Tooltip, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { onGradient } from "../../Theme/tokens/builders/accentText.js";
+import { rafThrottle } from "../../Utils/rafThrottle.js";
+export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
+onDropdownOptionClick, // New prop to handle option clicks
+rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, leftIconLoading, RightIconLoading, }) {
+    var _a;
+    const theme = useCustomTheme();
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const textRef = useRef(null);
+    const [isTextTruncated, setIsTextTruncated] = useState(false);
+    useEffect(() => {
+        const checkTruncation = () => {
+            if (textRef.current) {
+                const isTruncated = textRef.current.scrollWidth > textRef.current.clientWidth;
+                setIsTextTruncated(isTruncated);
+            }
+        };
+        // Use setTimeout to ensure DOM is fully rendered
+        const timeoutId = setTimeout(checkTruncation, 0);
+        const onResize = rafThrottle(checkTruncation);
+        window.addEventListener("resize", onResize);
+        return () => {
+            clearTimeout(timeoutId);
+            onResize.cancel();
+            window.removeEventListener("resize", onResize);
+        };
+    }, [buttonText]);
+    const handleRightIconClick = () => {
+        setIsDropdownOpen(!isDropdownOpen);
+        if (onRightIconClick) {
+            onRightIconClick();
+        }
+    };
+    const handleMenuClick = (event, option) => {
+        setIsDropdownOpen(false);
+        // console.log("Option clicked:", option,event)
+        if (onDropdownOptionClick) {
+            onDropdownOptionClick(event, option);
+        }
+    };
+    // For the gradient variant we paint ONE continuous gradient on the group and
+    // keep the segments transparent (so it doesn't restart per button/icon), with a
+    // translucent-white hover overlay for per-segment feedback.
+    const isGradient = variant === "gradient";
+    const gradientStops = (_a = theme.colors.gradient) !== null && _a !== void 0 ? _a : {
+        from: theme.colors.primary[400],
+        to: theme.colors.primary[700],
+    };
+    const gradientBg = `linear-gradient(135deg, ${gradientStops.from} 0%, ${gradientStops.to} 100%)`;
+    const gradientInk = onGradient(gradientStops.from, gradientStops.to, theme.colors.white, theme.colors.black);
+    const gradientItemSx = isGradient
+        ? {
+            color: gradientInk,
+            bg: "transparent",
+            bgImage: "none",
+            boxShadow: "none",
+            _hover: { bg: "whiteAlpha.200", boxShadow: "none" },
+            _active: { bg: "whiteAlpha.300" },
+        }
+        : undefined;
+    return (_jsxs(ButtonGroup, { size: size, isAttached: true, variant: isGradient ? "solid" : variant, onClick: onButtongroupClick, colorScheme: color, style: buttonGroupStyle, sx: isGradient
+            ? { bgImage: gradientBg, color: gradientInk, borderRadius: "lg", overflow: "hidden" }
+            : undefined, children: [leftIcon && (_jsx(IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), _jsx(Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: _jsx(Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: "whiteAlpha.400", maxW: "200px", sx: gradientItemSx, children: _jsx(Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? (_jsxs(Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [_jsx(MenuButton, { as: IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), _jsx(Box, { sx: { zIndex: 99 }, children: _jsx(MenuList, { style: menulistStyle, bg: theme.colors.backgroundColor.light, 
+                            // Chakra's own MenuItem renders `background: var(--menu-bg)` at rest, and its
+                            // MenuList baseStyle sets that var to a hardcoded "#fff" (never our `_dark`, which
+                            // this theme-swap app never triggers) — our `bg` prop above only recolors the list
+                            // itself, not the inherited var, so items fell back to white until hover/focus (which
+                            // our own sx already overrides). Setting the var here fixes the rest state too.
+                            sx: { "--menu-bg": theme.colors.backgroundColor.light }, border: "1px solid", borderColor: "blackAlpha.100", borderRadius: "xl", boxShadow: "lg", py: "0.375rem", minW: "12rem", overflow: "hidden", children: dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => (_jsxs(MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "0.5rem",
+                                    mx: "0.375rem",
+                                    px: "0.625rem",
+                                    py: "0.5rem",
+                                    borderRadius: "lg",
+                                    fontSize: "13px",
+                                    fontWeight: 500,
+                                    color: theme.colors.gray[700],
+                                    transition: "background 0.12s",
+                                    "& svg": { width: "16px", height: "16px" },
+                                    ...(divider
+                                        ? {
+                                            mx: 0,
+                                            borderRadius: "none",
+                                            borderBottom: "1px solid",
+                                            borderColor: "blackAlpha.100",
+                                        }
+                                        : {}),
+                                    _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
+                                    _focus: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
+                                    "&:last-child": { borderBottom: "none" },
+                                }, children: [option === null || option === void 0 ? void 0 : option.image, option.label] }, index))) }) })] })) : (rightIcon && (_jsx(IconButton, { "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx })))] }));
+}

package/dist/esm/Components/Buttons/Buttons.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Buttons = ({ onClick, label, className, disabled }) => {
+    return (_jsx("button", { onClick: onClick, className: `bg-purple-600 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-offset-2  ${className} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`, disabled: disabled, children: label }));
+};
+export default Buttons;

package/dist/esm/Components/Buttons/ButtonsProps.js

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

package/dist/esm/Components/Card/Card.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card as ChakraCard } from "@chakra-ui/react";
+export default function Card({ key, maxW, align, variant, direction, justify, children, size, color, overflow, sx, }) {
+    return (_jsx(ChakraCard, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, p: 4, sx: sx, children: children }, key));
+}

package/dist/esm/Components/Card/CardProps.js

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

package/dist/esm/Components/Card/PaymentCard/PaymentCard.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Badge, Flex, GridItem, Heading, Icon, Text, VStack, Skeleton, SkeletonText, } from "@chakra-ui/react";
+import { Check } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { onFilled } from "../../../Theme/tokens/builders/accentText.js";
+import Button from "../../Button/Button.js";
+const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
+    const withOnButtonColor = (styles) => ({
+        ...styles,
+        onButtonColor: onFilled(styles.buttonColor, theme.colors.white, theme.colors.black),
+    });
+    if (isActive) {
+        return withOnButtonColor({
+            badgeText: "Active Plan",
+            badgeColor: `0.125rem solid ${theme.colors.green[500]}`,
+            buttonColor: theme.colors.green[500],
+            buttonColor50: theme.colors.green[50],
+        });
+    }
+    if (isNextUpgrade) {
+        return withOnButtonColor({
+            badgeText: "Upgrade Your Plan",
+            badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
+            buttonColor: theme.colors.primary[500],
+            buttonColor50: theme.colors.primary[50],
+        });
+    }
+    if (popular) {
+        return withOnButtonColor({
+            badgeText: "Most Popular",
+            badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
+            buttonColor: theme.colors.primary[500],
+            buttonColor50: theme.colors.primary[50],
+        });
+    }
+    return withOnButtonColor({
+        badgeText: "",
+        badgeColor: "",
+        buttonColor: theme.colors.primary[500],
+        buttonColor50: theme.colors.primary[50],
+    });
+};
+const PaymentCard = ({ plan, isActive = false, isNextUpgrade = false, billingCycle, onSelect, onHover, buttonLoading, isLoading = false, isRenewal = false, }) => {
+    const theme = useCustomTheme();
+    const { badgeText, badgeColor, buttonColor, buttonColor50, onButtonColor } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);
+    const variantStyles = plan.buttonVariant === "outline"
+        ? {
+            borderColor: buttonColor,
+            color: buttonColor,
+            _hover: { bg: buttonColor50 },
+        }
+        : {
+            bg: buttonColor,
+            color: onButtonColor,
+            _hover: { bg: buttonColor },
+        };
+    return (_jsx(GridItem, { children: _jsx(Box, { bg: theme.colors.background[50], minH: "100%", borderRadius: "lg", p: 8, borderWidth: "0.063rem", borderColor: theme.colors.gray[200], boxShadow: "md", position: "relative", transition: "all 0.2s", transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "xl" }, children: isLoading ? (
+            // 🔹 Skeleton Loader Layout
+            _jsxs(_Fragment, { children: [_jsx(Skeleton, { height: "24px", width: "120px", mx: "auto", mb: 4 }), _jsx(Skeleton, { height: "50px", width: "50px", borderRadius: "lg", mx: "auto", mb: 4 }), _jsx(Skeleton, { height: "24px", width: "100px", mx: "auto", mb: 3 }), _jsx(Skeleton, { height: "30px", width: "160px", mx: "auto", mb: 4 }), _jsx(SkeletonText, { noOfLines: 2, spacing: "2" }), _jsx(Skeleton, { height: "44px", width: "full", mt: 6, borderRadius: "md" }), _jsx(VStack, { align: "start", spacing: 3, mt: 6, children: [1, 2, 3, 4].map((i) => (_jsx(Skeleton, { height: "16px", width: "80%" }, i))) })] })) : (
+            // 🔹 Actual Card Content
+            _jsxs(_Fragment, { children: [badgeText && (_jsx(Badge, { position: "absolute", top: "-0.75rem", left: "50%", transform: "translateX(-50%)", bg: buttonColor, color: onButtonColor, fontSize: "sm", px: 4, py: 1, borderRadius: "full", children: badgeText })), _jsxs(Box, { textAlign: "center", mb: 6, children: [_jsx(Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: buttonColor, mx: "auto", mb: 4, children: plan.icon }), _jsx(Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.gray[800], children: plan.name }), (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && (_jsxs(Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.gray[800], display: "flex", justifyContent: "center", children: [_jsx(Box, { fontSize: "1.5rem", children: "\u20B9" }), billingCycle === "yearly"
+                                        ? plan.yearlyPrice
+                                        : plan.monthlyPrice, _jsxs(Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1, children: [_jsx(Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.billing }), _jsx(Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.tax })] })] })), plan.priceDescription && (_jsx(Text, { color: theme.colors.green[800], mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), _jsx(Text, { color: theme.colors.gray[600], mt: 2, children: plan.description })] }), ((!isActive && plan.buttonText) || isRenewal) && (_jsx(Button, { isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id), onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true), onMouseLeave: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false), ...variantStyles, children: plan.buttonText })), _jsx(VStack, { align: "start", spacing: 3, mt: 6, children: plan.features.map((feature, i) => (_jsxs(Flex, { align: "center", children: [_jsx(Icon, { as: Check, color: theme.colors.green[500], mr: 2 }), _jsx(Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
+};
+export default PaymentCard;

package/dist/esm/Components/Card/PaymentCard/PaymentCardProps.js

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

package/dist/esm/Components/Checkbox/Checkbox.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox as ChakraCheckbox, Box } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import ErrorMessage from "../Common/ErrorMessage.js";
+import HelperText from "../Common/HelperText.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size = "md", value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, ...aria }) {
+    const theme = useCustomTheme();
+    const controlSize = size === "sm" ? "1rem"
+        : size === "md" ? "1.25rem"
+            : size === "lg" ? "1.5rem"
+                : size; // pass-through if already a CSS value
+    const clampStyles = labelClampLines
+        ? {
+            display: "-webkit-box",
+            WebkitLineClamp: labelClampLines,
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "normal",
+            ...labelSx,
+        }
+        : { ...labelSx };
+    return (_jsxs(_Fragment, { children: [_jsx(ChakraCheckbox, { ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], display: "flex", alignItems: "center", sx: {
+                    ...sx,
+                    ".chakra-checkbox__control": { w: controlSize, h: controlSize },
+                }, children: label && (showLabelTooltip ? (_jsx(ToolTip, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }) })) : (_jsx(Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+}

package/dist/esm/Components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,69 @@
+import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+export const Checkbox = {
+    baseStyle: ({ theme, colorScheme = "primary" }) => {
+        var _a;
+        const palette = (_a = theme.colors[colorScheme]) !== null && _a !== void 0 ? _a : theme.colors.primary;
+        // A browser probe found the checked checkbox's hover repeating its own resting `[600]` fill.
+        // Chakra's stock control also carries a checked-hover at `_checked._hover` (this override
+        // nests the other way, `_hover._checked`) — two different key paths landing on the same
+        // selector, so whichever one the cascade picks must still differ from resting. Setting both
+        // paths to the same lifted value removes that ambiguity outright.
+        const hoverChecked = resolveHoverTint(palette[600], palette[600]);
+        return {
+            control: {
+                width: "1.25rem",
+                height: "1.25rem",
+                borderWidth: "1.6px",
+                borderRadius: "base",
+                transition: "background 0.15s, border-color 0.15s, box-shadow 0.15s",
+                _disabled: {
+                    bg: theme.colors.background[50],
+                    borderColor: theme.colors.boxborder[500],
+                    cursor: "not-allowed",
+                },
+                _indeterminate: {
+                    bg: theme.colors.background[50],
+                    borderColor: palette[500],
+                    svg: {
+                        color: palette[500],
+                    },
+                },
+                _checked: {
+                    bg: palette[600],
+                    borderColor: palette[600],
+                    _hover: {
+                        bg: hoverChecked,
+                        borderColor: hoverChecked,
+                    },
+                },
+                _hover: {
+                    bg: theme.colors.background[100],
+                    borderColor: palette[400],
+                    _checked: {
+                        bg: hoverChecked,
+                        borderColor: hoverChecked,
+                    },
+                    _indeterminate: {
+                        bg: "none",
+                        borderColor: palette[600],
+                    },
+                },
+                _focus: {
+                    boxShadow: `0 0 0 2px ${palette[300]}`,
+                    borderColor: palette[500],
+                },
+                _active: {
+                    bg: palette[600],
+                    borderColor: palette[600],
+                },
+            },
+            icon: {
+                color: theme.colors.background[50],
+            },
+        };
+    },
+    defaultProps: {
+        colorScheme: "primary",
+        size: "md",
+    },
+};

package/dist/esm/Components/Checkbox/CheckboxProps.js

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