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

package/dist/esm/Components/Toaster/Toaster.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState, } from "react";
+import { Box, CloseButton, Flex, Spinner, Text, useToast, useTheme, } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import { motion } from "framer-motion";
+import { CheckCircle2, AlertTriangle, Info, XCircle, } from "lucide-react";
+const ToasterContext = createContext(undefined);
+const shrink = keyframes `
+  from { transform: scaleX(1); }
+  to { transform: scaleX(0); }
+`;
+// One-shot ring pulse on the status icon — a subtle "just happened" beat.
+const iconPulse = keyframes `
+  0%   { box-shadow: 0 0 0 0 var(--toast-pulse-color); }
+  70%  { box-shadow: 0 0 0 0.5rem transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
+`;
+const MotionBox = motion(Box);
+/**
+ * Presentational toast card. Owns hover state so the auto-dismiss countdown
+ * pauses while the pointer is over the toast — the user can read and click an
+ * action without the toast vanishing mid-reach.
+ */
+function ToastCard({ onClose, title, description, actions, isClosable, duration, meta, colors: c, shadowLg, }) {
+    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 [paused, setPaused] = useState(false);
+    const solid = (_b = (_a = meta.scale) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : (_c = c === null || c === void 0 ? void 0 : c.gray) === null || _c === void 0 ? void 0 : _c[500];
+    const soft = (_e = (_d = meta.scale) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : (_f = c === null || c === void 0 ? void 0 : c.gray) === null || _f === void 0 ? void 0 : _f[50];
+    const accent = (_h = (_g = meta.scale) === null || _g === void 0 ? void 0 : _g[600]) !== null && _h !== void 0 ? _h : solid;
+    const ringTint = (_k = (_j = meta.scale) === null || _j === void 0 ? void 0 : _j[200]) !== null && _k !== void 0 ? _k : soft;
+    const showProgress = typeof duration === "number" && duration > 0;
+    return (_jsxs(MotionBox
+    // Refined entrance — slides in from the right and settles, never a hard pop.
+    // framer owns ALL transform animation; the CSS transition below is limited to
+    // box-shadow so it never tweens the same `transform` framer is driving frame
+    // by frame (that double-drive is what caused the ~200ms entry flicker). A
+    // tween (not spring) lands on an exact end transform, so there's no residual
+    // sub-pixel settle to shimmer.
+    , { 
+        // Refined entrance — slides in from the right and settles, never a hard pop.
+        // framer owns ALL transform animation; the CSS transition below is limited to
+        // box-shadow so it never tweens the same `transform` framer is driving frame
+        // by frame (that double-drive is what caused the ~200ms entry flicker). A
+        // tween (not spring) lands on an exact end transform, so there's no residual
+        // sub-pixel settle to shimmer.
+        initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24 }, transition: { duration: 0.24, ease: [0.22, 1, 0.36, 1] }, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", 
+        // Surface token, not `colors.white`: `white` is a foreground token and stays
+        // white in dark mode. `background[50]` is #ffffff in light, near-black in dark.
+        bg: (_l = c === null || c === void 0 ? void 0 : c.background) === null || _l === void 0 ? void 0 : _l[50], border: `0.063rem solid ${(_o = (_m = c === null || c === void 0 ? void 0 : c.boxborder) === null || _m === void 0 ? void 0 : _m[300]) !== null && _o !== void 0 ? _o : (_p = c === null || c === void 0 ? void 0 : c.gray) === null || _p === void 0 ? void 0 : _p[200]}`, boxShadow: shadowLg !== null && shadowLg !== void 0 ? shadowLg : "lg", borderRadius: "2xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", willChange: "transform, opacity", sx: {
+            transition: "box-shadow 0.18s ease",
+            _hover: { boxShadow: "xl" },
+        }, children: [_jsxs(Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", bg: soft, color: accent, sx: {
+                            ["--toast-pulse-color"]: ringTint,
+                            animation: `${iconPulse} 900ms ease-out 1`,
+                        }, children: meta.icon }), _jsxs(Box, { flex: "1", minW: 0, children: [title && (_jsx(Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: (_r = (_q = c === null || c === void 0 ? void 0 : c.text) === null || _q === void 0 ? void 0 : _q[800]) !== null && _r !== void 0 ? _r : (_s = c === null || c === void 0 ? void 0 : c.gray) === null || _s === void 0 ? void 0 : _s[800], children: title })), description && (_jsx(Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: (_u = (_t = c === null || c === void 0 ? void 0 : c.gray) === null || _t === void 0 ? void 0 : _t[600]) !== null && _u !== void 0 ? _u : (_v = c === null || c === void 0 ? void 0 : c.text) === null || _v === void 0 ? void 0 : _v[600], mt: title ? "0.125rem" : 0, children: description })), actions && (_jsx(Flex, { gap: 2, mt: 2.5, align: "center", wrap: "wrap", children: actions(onClose) }))] }), isClosable && (_jsx(CloseButton, { onClick: onClose, size: "sm", color: (_w = c === null || c === void 0 ? void 0 : c.gray) === null || _w === void 0 ? void 0 : _w[400], borderRadius: "md", alignSelf: "flex-start", _hover: {
+                            bg: (_x = c === null || c === void 0 ? void 0 : c.gray) === null || _x === void 0 ? void 0 : _x[100],
+                            color: (_y = c === null || c === void 0 ? void 0 : c.gray) === null || _y === void 0 ? void 0 : _y[700],
+                        } }))] }), showProgress && (_jsx(Box, { position: "absolute", bottom: 0, left: 0, right: 0, h: "0.1875rem", bg: solid, opacity: 0.85, transformOrigin: "left", sx: {
+                    animation: `${shrink} ${duration}ms linear forwards`,
+                    animationPlayState: paused ? "paused" : "running",
+                } }))] }));
+}
+export default function ToasterProvider({ children }) {
+    var _a;
+    const toast = useToast();
+    const theme = useTheme();
+    const colors = theme.colors;
+    const shadowLg = (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.lg;
+    // Keyed off `theme.colors`, not the `?? {}` fallback: dark mode swaps the palette object, so
+    // this must re-derive per mode or a toast fired after a switch paints the old mode's colors.
+    const statusConfig = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const c = colors !== null && colors !== void 0 ? colors : {};
+        return {
+            success: {
+                scale: (_b = (_a = c.semantic) === null || _a === void 0 ? void 0 : _a.success) !== null && _b !== void 0 ? _b : c.green,
+                icon: _jsx(CheckCircle2, { size: 18 }),
+            },
+            error: {
+                scale: (_d = (_c = c.semantic) === null || _c === void 0 ? void 0 : _c.error) !== null && _d !== void 0 ? _d : c.red,
+                icon: _jsx(XCircle, { size: 18 }),
+            },
+            warning: {
+                scale: (_g = (_f = (_e = c.semantic) === null || _e === void 0 ? void 0 : _e.warning) !== null && _f !== void 0 ? _f : c.yellow) !== null && _g !== void 0 ? _g : c.orange,
+                icon: _jsx(AlertTriangle, { size: 18 }),
+            },
+            info: {
+                scale: (_j = (_h = c.semantic) === null || _h === void 0 ? void 0 : _h.info) !== null && _j !== void 0 ? _j : c.blue,
+                icon: _jsx(Info, { size: 18 }),
+            },
+            loading: {
+                scale: ((_k = c.primary) !== null && _k !== void 0 ? _k : c.gray),
+                icon: _jsx(Spinner, { size: "sm", thickness: "0.125rem", speed: "0.7s" }),
+            },
+        };
+    }, [colors]);
+    const showToast = useCallback(({ title, description, status = "info", duration = 5000, isClosable = true, position = "top-right", onClose, actions, }) => {
+        var _a;
+        const meta = (_a = statusConfig[status]) !== null && _a !== void 0 ? _a : statusConfig.info;
+        toast({
+            duration,
+            isClosable,
+            position,
+            onCloseComplete: onClose,
+            render: ({ onClose }) => (_jsx(ToastCard, { onClose: onClose, title: title, description: description, actions: actions, isClosable: isClosable, duration: duration, meta: meta, colors: colors !== null && colors !== void 0 ? colors : {}, shadowLg: shadowLg })),
+        });
+    }, [toast, statusConfig, colors, shadowLg]);
+    // Memoized because this provider wraps the whole app: an unstable value re-renders every
+    // `useToaster()` consumer (92 files in crm-frontend) on each provider render, defeating the
+    // stable-children bail-out the consuming apps rely on.
+    const value = useMemo(() => ({ showToast }), [showToast]);
+    return (_jsx(ToasterContext.Provider, { value: value, children: children }));
+}
+export const useToaster = () => {
+    const context = useContext(ToasterContext);
+    if (!context) {
+        throw new Error("useToaster must be used within a ToasterProvider");
+    }
+    return context;
+};

package/dist/esm/Components/Toaster/ToasterProps.js

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

package/dist/esm/Components/Toggle/TableToggle.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, IconButton } from "@chakra-ui/react";
+import { Columns3, Table2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+const TableToggle = ({ value, onChange }) => {
+    const theme = useCustomTheme();
+    const styles = {
+        container: {
+            display: "flex",
+            alignItems: "center",
+            bg: theme.colors.background[600],
+            p: "0.125rem",
+            borderRadius: "md",
+            height: "2rem",
+            gap: "0.125rem",
+            width: "6.3rem",
+        },
+        button: (mode) => ({
+            bg: value === mode ? theme.colors.background[50] : "transparent",
+            boxShadow: value === mode ? "md" : "none",
+            color: value === mode ? theme.colors.text[900] : theme.colors.background[800],
+            borderRadius: "base",
+            height: "1.75rem",
+            border: "0.031rem solid",
+            borderColor: value === mode ? theme.colors.background[400] : "transparent",
+            padding: "0.313rem 0.813rem",
+            _hover: {
+                bg: value === mode
+                    ? theme.colors.background[50]
+                    : theme.colors.background[400],
+                color: value === mode ? theme.colors.text[900] : theme.colors.background[900],
+            },
+            transition: "all 0.3s ease-in-out",
+        }),
+    };
+    return (_jsxs(Box, { ...styles.container, children: [_jsx(ToolTip, { label: "Table View", placement: "top", fontSize: 12, hasArrow: true, children: _jsx(IconButton, { "aria-label": "Grid View", icon: _jsx(Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), _jsx(ToolTip, { label: "Kanban View", placement: "top", fontSize: 12, hasArrow: true, children: _jsx(IconButton, { "aria-label": "List View", icon: _jsx(Columns3, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("list"), ...styles.button("list") }) })] }));
+};
+export default TableToggle;

package/dist/esm/Components/Toggle/TableToggleProps.js

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

package/dist/esm/Components/ToolTip/OverflowToolTip.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ToolTip from "./ToolTip.js";
+/**
+ * A tooltip that only appears when its child text is actually truncated
+ * (ellipsis active) — no tooltip when the text fully fits. Thin sugar over
+ * `<ToolTip overflowOnly>`; use it wherever you clamp text with `noOfLines` /
+ * ellipsis and want the full text revealed only when it's cut off.
+ *
+ * The child must be the single element that clamps the text (e.g. a Chakra
+ * `Text` with `noOfLines`); its ref is managed internally. Works for both
+ * single-line and multi-line clamps.
+ *
+ * @example
+ * <OverflowToolTip label={title}>
+ *   <Text noOfLines={1}>{title}</Text>
+ * </OverflowToolTip>
+ */
+export default function OverflowToolTip(props) {
+    return _jsx(ToolTip, { ...props, overflowOnly: true });
+}

package/dist/esm/Components/ToolTip/ToolTip.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from "react";
+import { Tooltip as ChakraTooltip } from "@chakra-ui/react";
+import { useIsTruncated } from "../../Hooks/useIsTruncated.js";
+import { mergeRefs } from "../../Utils/mergeRefs.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+// Surface used when no Pixelize palette is in context — a bare `ChakraProvider`, or no
+// provider at all (Chakra's `useTheme()` yields `{}` there rather than throwing). Keeps
+// tooltips outside the Pixelize theme rendering exactly as they did before theming.
+const FALLBACK_SURFACE = "#12161B";
+export default function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize = "14px", bg, color = "white", isDisabled, overflowOnly = false, isOpen, defaultIsOpen, openDelay = 0, closeDelay = 0, arrowSize = 10, closeOnClick = false, size, width, height, arrowPadding, arrowShadowColor, direction, gutter = 8, onClose, modifiers, closeOnPointerDown, styles, }) {
+    var _a, _b, _c, _d;
+    // Measure the child for `overflowOnly`. The hook is always called (Rules of
+    // Hooks) but is fully inert unless `overflowOnly` is set — no layout reads,
+    // no ResizeObserver, no re-renders for ordinary tooltips. Measurement never
+    // runs on hover/scroll, so showing the tooltip stays as cheap as before.
+    const { ref, isTruncated } = useIsTruncated(label, overflowOnly && isValidElement(children));
+    // A tooltip is an INVERTED surface: near-black under a light canvas, carrying a white
+    // label. `sidebar.background` is the only ramp `buildDarkPalette` deliberately leaves
+    // un-inverted, so it stays near-black in dark mode and the white label stays legible —
+    // every other surface ramp flips light and would render the label invisible.
+    const theme = useCustomTheme();
+    const surface = (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.sidebar) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[500]) !== null && _d !== void 0 ? _d : FALLBACK_SURFACE;
+    let content = children;
+    let effectiveDisabled = isDisabled;
+    if (overflowOnly && isValidElement(children)) {
+        const child = children;
+        const childRef = child.ref;
+        content = cloneElement(child, {
+            ref: mergeRefs(ref, childRef),
+        });
+        effectiveDisabled = Boolean(isDisabled) || !isTruncated;
+    }
+    return (_jsx(ChakraTooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg !== null && bg !== void 0 ? bg : surface, color: color, isDisabled: effectiveDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: modifiers, closeOnPointerDown: closeOnPointerDown, style: styles, px: 3, py: 2, borderRadius: "lg", fontWeight: "400", lineHeight: "1.5", maxW: "300px", children: content }));
+}

package/dist/esm/Components/ToolTip/ToolTipProps.js

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

package/dist/esm/Components/Trail/EditableCell.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Box, Input, Button, Menu, MenuButton, MenuList, MenuItem, useOutsideClick, } from "@chakra-ui/react";
+import { ChevronDown } from "lucide-react";
+export const EditableCell = ({ row, column, isEditable, handleCellClick, handleCellChange, }) => {
+    const cellRef = useRef(null);
+    useOutsideClick({
+        ref: cellRef,
+        handler: () => {
+            var _a;
+            return handleCellChange(row.id, column.label, String((_a = row[column.label]) !== null && _a !== void 0 ? _a : ""));
+        },
+    });
+    const value = row[column.label] || "-";
+    if (isEditable) {
+        if (column.label === "dueDate") {
+            return (_jsx(Box, { width: "50%", ref: cellRef, children: _jsx(Input, { type: "date", value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));
+        }
+        else if (column.label === "priority") {
+            return (_jsx(Box, { width: "100%", ref: cellRef, children: _jsxs(Menu, { isOpen: true, children: [_jsx(MenuButton, { as: Button, rightIcon: _jsx(ChevronDown, {}), bg: "teal.50", color: "teal.900", _hover: { bg: "teal.100" }, _active: { bg: "teal.200" }, children: value }), _jsxs(MenuList, { children: [_jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), _hover: { bg: "teal.100" }, children: "Low" }), _jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), _hover: { bg: "teal.100" }, children: "Medium" }), _jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), _hover: { bg: "teal.100" }, children: "High" })] })] }) }));
+        }
+        else {
+            return (_jsx(Box, { width: "100%", ref: cellRef, children: _jsx(Input, { value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));
+        }
+    }
+    return (_jsx("span", { onClick: () => handleCellClick(row.id, column.id), children: value }));
+};

package/dist/esm/Components/Trail/SelectAllCheckbox.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from "@chakra-ui/react";
+export const SelectAllCheckbox = ({ isAllSelected, isIndeterminate, handleSelectAll, }) => {
+    return (_jsx(Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: handleSelectAll }));
+};

package/dist/esm/Components/Trail/TrailWorks.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Thead, Table, Tr, Th, Tbody, Td, Checkbox, useTheme, } from "@chakra-ui/react";
+const TrailWorks = () => {
+    var _a, _b, _c;
+    const theme = useTheme();
+    const cellBorder = (_b = (_a = theme.colors.border) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[300];
+    const data = [
+        {
+            contact: "John Doe",
+            type: "Customer",
+            deals: 5,
+            phone: "555-555-5555",
+            email: "hhhhh@gmail.com",
+        },
+        {
+            contact: "John Doe",
+            type: "Customer",
+            deals: 5,
+            phone: "555-555-5555",
+            email: "hhhhh@gmail.com",
+        },
+    ];
+    const columns = [
+        {
+            Header: "Contact",
+            accessor: "contact",
+        },
+        {
+            Header: "Type",
+            accessor: "type",
+        },
+        {
+            Header: "Deals",
+            accessor: "deals",
+        },
+        {
+            Header: "Phone",
+            accessor: "phone",
+        },
+        {
+            Header: "Email",
+            accessor: "email",
+        },
+    ];
+    const renderRow = (row, index) => {
+        return (_jsxs(Tr, { border: "1px solid", borderColor: cellBorder, children: [_jsx(Td, { border: "1px solid", borderColor: cellBorder, padding: "5px", children: _jsx(Checkbox, {}) }), columns.map((column, colIndex) => {
+                    return (_jsx(Td, { border: "1px solid", borderColor: cellBorder, children: row[column.accessor] }, colIndex));
+                })] }, index));
+    };
+    return (_jsx(Box, { width: "100%", overflowX: "auto", children: _jsxs(Table, { variant: "simple", size: "md", border: "1px solid", borderColor: cellBorder, children: [_jsx(Thead, { border: "1px solid", borderColor: cellBorder, children: _jsxs(Tr, { border: "1px solid", borderColor: cellBorder, children: [_jsx(Th, { border: "1px solid", borderColor: cellBorder, padding: "5px", children: _jsx(Checkbox, {}) }), columns.map((column, index) => {
+                                return (_jsx(Th, { border: "1px solid", borderColor: cellBorder, children: column.Header }, index));
+                            })] }) }), _jsx(Tbody, { border: "1px solid", borderColor: cellBorder, children: data.map((row, index) => renderRow(row, index)) })] }) }));
+};
+export default TrailWorks;

package/dist/esm/Components/Trail/data.js

@@ -0,0 +1,26 @@
+export const initialColumns = [
+    { id: 1, label: "project" },
+    { id: 2, label: "owner" },
+    { id: 3, label: "status" },
+    { id: 4, label: "priority" },
+    { id: 5, label: "dueDate" },
+];
+export const initialRows = [
+    {
+        id: 1,
+        project: "Project A",
+        owner: "Owner A",
+        status: "In Progress",
+        priority: "High",
+        dueDate: "2023-12-31",
+    },
+    {
+        id: 2,
+        project: "Project B",
+        owner: "Owner B",
+        status: "Completed",
+        priority: "Medium",
+        dueDate: "2023-11-30",
+    },
+    // Add more initial rows as needed
+];

package/dist/esm/Components/UpgradeButton/UpgradeButton.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Spinner, Text } from "@chakra-ui/react";
+import { Sparkles } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { onGradient } from "../../Theme/tokens/builders/accentText.js";
+import { contrastRatio } from "../../Theme/tokens/builders/color.js";
+import { AA_NON_TEXT } from "../../Theme/tokens/builders/outlineRung.js";
+/** The brand's gold sparkle accent, kept only where it clears 3:1 on the button's own fill. */
+const ACCENT_GOLD = "#FFD66B";
+const sizeMap = {
+    // Compact, not tiny: an 8px subtitle was unreadable, so `sm` sits deliberately
+    // close to `md` — it's the dense variant of the same badge, not a smaller one.
+    sm: { px: "14px", py: "4px", font: "13px", sub: "9px", icon: 12, radius: "full" },
+    md: { px: "20px", py: "5px", font: "14px", sub: "10px", icon: 13, radius: "full" },
+    lg: { px: "26px", py: "8px", font: "16px", sub: "11px", icon: 16, radius: "full" },
+};
+const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColor, variant = "brand", gradient, size = "md", shimmer = true, isLoading = false, isDisabled = false, maxLabelWidth = "160px", ariaLabel, onClick, }) => {
+    var _a, _b;
+    const theme = useCustomTheme();
+    const c = theme.colors;
+    // Only reachable if a consumer hand-builds a palette without `gradient`; every shipped brand sets it.
+    const themeGradient = (_a = c.gradient) !== null && _a !== void 0 ? _a : { from: c.primary[500], to: c.primary[700] };
+    // `primary`/`secondary` at [500]->[700] / [400]->[600] sit in the mid-luminance band where
+    // neither white nor black ink clears AA at both ends at once (measured worst-case as low as
+    // 2.72:1 across brands — no ink choice fixes a gradient with no readable ink at all). One rung
+    // darker moves both stops onto the same side of that divide; verified universally >=4.5 at
+    // both ends across all 9 brands x both modes. `success`/`warning`/`danger`/`info` already sit
+    // there at [400]->[600] and don't need the shift.
+    const variantGradient = {
+        brand: themeGradient,
+        primary: { from: c.primary[600], to: c.primary[800] },
+        secondary: { from: c.secondary[600], to: c.secondary[800] },
+        success: { from: c.semantic.success[400], to: c.semantic.success[600] },
+        warning: { from: c.semantic.warning[400], to: c.semantic.warning[600] },
+        danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
+        info: { from: c.semantic.info[400], to: c.semantic.info[600] },
+    };
+    const resolved = (_b = gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant]) !== null && _b !== void 0 ? _b : themeGradient;
+    // `iconColor`'s gold default fails AA as body text against this gradient (measured ~1.4-3.3
+    // across brands) — the label/subtitle share this computed ink instead.
+    const ink = onGradient(resolved.from, resolved.to, c.white, c.black);
+    // The gold only clears 1.4.11's 3:1 on a DARK gradient. zinc dark inverts `primary` to a
+    // near-white fill, where gold-on-near-white measures ~1.3:1 and the icon vanishes, so fall
+    // back to the label's ink whenever the gold misses either stop.
+    const resolvedIconColor = iconColor !== null && iconColor !== void 0 ? iconColor : (contrastRatio(ACCENT_GOLD, resolved.from) >= AA_NON_TEXT &&
+        contrastRatio(ACCENT_GOLD, resolved.to) >= AA_NON_TEXT
+        ? ACCENT_GOLD
+        : ink);
+    const s = sizeMap[size];
+    const Icon = icon;
+    const blocked = isLoading || isDisabled;
+    const g = `linear-gradient(135deg, ${resolved.from} 0%, ${resolved.to} 100%)`;
+    const gReversed = `linear-gradient(135deg, ${resolved.to} 0%, ${resolved.from} 100%)`;
+    const hasMobile = !!mobileLabel && mobileLabel !== label;
+    return (_jsxs(Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: ink, borderRadius: s.radius, fontWeight: "bold", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _focusVisible: { outline: "none", boxShadow: `0 0 0 3px ${resolved.from}55` }, _hover: blocked
+            ? undefined
+            : {
+                transform: "translateY(-2px)",
+                bgImage: gReversed,
+                boxShadow: `0 10px 30px ${resolved.from}66`,
+                ...(shimmer ? { _before: { left: "130%" } } : {}),
+            }, sx: shimmer
+            ? {
+                _before: {
+                    content: '""',
+                    position: "absolute",
+                    top: 0,
+                    left: "-75%",
+                    width: "55%",
+                    height: "100%",
+                    background: "linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent)",
+                    transform: "skewX(-20deg)",
+                    transition: "left 0.7s ease",
+                    pointerEvents: "none",
+                },
+            }
+            : undefined, children: [_jsxs(Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && (_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor })) : (Icon && _jsx(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && (_jsx(Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
+};
+export default UpgradeButton;

package/dist/esm/Components/UpgradeButton/UpgradeButtonProps.js

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

package/dist/esm/Components/UserDetails/AddUserModal.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, FormControl, VStack, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import Button from "../Button/Button.js";
+import TextInput from "../Input/TextInput.js";
+import SearchSelect from "../SearchSelect/SearchSelect.js";
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const emptyValues = {
+    firstName: "",
+    lastName: "",
+    email: "",
+    role: null,
+};
+const AddUserModal = ({ isOpen, onClose, roleOptions, isLoading, onSubmit, onAddRoleClick, upgradeNotice, labels, }) => {
+    var _a, _b, _c, _d;
+    const { colors } = useCustomTheme();
+    const [values, setValues] = useState(emptyValues);
+    const [errors, setErrors] = useState({});
+    useEffect(() => {
+        if (!isOpen) {
+            setValues(emptyValues);
+            setErrors({});
+        }
+    }, [isOpen]);
+    const validate = () => {
+        const nextErrors = {};
+        if (!values.firstName.trim())
+            nextErrors.firstName = labels.firstNameRequired;
+        if (!values.lastName.trim())
+            nextErrors.lastName = labels.lastNameRequired;
+        if (!values.email.trim()) {
+            nextErrors.email = labels.emailRequired;
+        }
+        else if (!EMAIL_REGEX.test(values.email.trim())) {
+            nextErrors.email = labels.emailInvalid;
+        }
+        if (!values.role)
+            nextErrors.role = labels.roleRequired;
+        return nextErrors;
+    };
+    const handleChange = (field) => (event) => {
+        const value = event.target.value;
+        setValues((prev) => ({ ...prev, [field]: value }));
+        setErrors((prev) => ({ ...prev, [field]: undefined }));
+    };
+    const handleSubmit = async () => {
+        const nextErrors = validate();
+        if (Object.keys(nextErrors).length > 0) {
+            setErrors(nextErrors);
+            return;
+        }
+        await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
+            firstName: values.firstName.trim(),
+            lastName: values.lastName.trim(),
+            email: values.email.trim(),
+            role: values.role,
+        }));
+    };
+    const textFields = [
+        {
+            id: "firstName",
+            label: labels.firstName,
+            placeholder: labels.firstNamePlaceholder,
+        },
+        {
+            id: "lastName",
+            label: labels.lastName,
+            placeholder: labels.lastNamePlaceholder,
+        },
+        {
+            id: "email",
+            label: labels.email,
+            placeholder: labels.emailPlaceholder,
+            type: "email",
+        },
+    ];
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200], children: [labels.addNewUser, upgradeNotice] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => (_jsx(FormControl, { isInvalid: !!errors[field.id], children: _jsx(TextInput, { id: field.id, name: field.id, type: field.type, label: field.label, placeholder: field.placeholder, value: values[field.id], onChange: handleChange(field.id), isRequired: true, error: !!errors[field.id], errorMessage: errors[field.id], width: "100%" }) }, field.id))), _jsx(FormControl, { isInvalid: !!errors.role, isRequired: true, children: _jsx(SearchSelect, { label: labels.role, options: roleOptions.map((item) => ({
+                                            id: item.id,
+                                            label: item.label,
+                                        })), value: (_d = values.role) !== null && _d !== void 0 ? _d : undefined, onSelect: (option) => {
+                                            if (!option) {
+                                                setValues((prev) => ({ ...prev, role: null }));
+                                            }
+                                            else if (!Array.isArray(option)) {
+                                                const role = {
+                                                    id: Number(option.id),
+                                                    label: option.label,
+                                                };
+                                                setValues((prev) => ({ ...prev, role }));
+                                                setErrors((prev) => ({ ...prev, role: undefined }));
+                                            }
+                                        }, isRequired: true, isRemoveAllIcon: true, error: !!errors.role, errorMessage: errors.role, addNew: onAddRoleClick
+                                            ? {
+                                                enabled: true,
+                                                text: labels.addNewRole,
+                                                onClick: onAddRoleClick,
+                                            }
+                                            : undefined }) })] }) }), _jsxs(ModalFooter, { children: [_jsx(Button, { label: labels.cancel, onClick: onClose, colorScheme: "red", size: "sm", variant: "outline" }), _jsx(Button, { label: labels.save, type: "submit", colorScheme: "primary", size: "sm", sx: { ml: 3 }, isLoading: isLoading, onClick: handleSubmit })] })] })] }));
+};
+export default AddUserModal;

package/dist/esm/Components/UserDetails/ChangeRoleModal.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, FormControl, VStack, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import Button from "../Button/Button.js";
+import TextInput from "../Input/TextInput.js";
+import SearchSelect from "../SearchSelect/SearchSelect.js";
+const ChangeRoleModal = ({ isOpen, onClose, userId, email, currentRole, roleOptions, isLoading, onSubmit, onAddRoleClick, labels, }) => {
+    var _a, _b, _c, _d, _e;
+    const { colors } = useCustomTheme();
+    const [selectedRole, setSelectedRole] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (isOpen && currentRole) {
+            const match = roleOptions.find((role) => role.label.toLowerCase() === currentRole.toLowerCase());
+            setSelectedRole(match ? { id: match.id, label: match.label } : null);
+            setError(null);
+        }
+        else if (!isOpen) {
+            setSelectedRole(null);
+            setError(null);
+        }
+    }, [isOpen, currentRole, roleOptions]);
+    const isUnchanged = ((_a = selectedRole === null || selectedRole === void 0 ? void 0 : selectedRole.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (currentRole === null || currentRole === void 0 ? void 0 : currentRole.toLowerCase());
+    const handleSubmit = async () => {
+        if (!selectedRole) {
+            setError(labels.roleRequired);
+            return;
+        }
+        if (userId == null)
+            return;
+        await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({ userId, roleId: selectedRole.id }));
+    };
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[50], borderRadius: "2xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[200], children: labels.changeRoleTitle }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), _jsx(FormControl, { isInvalid: !!error, isRequired: true, children: _jsx(SearchSelect, { label: labels.role, options: roleOptions.map((item) => ({
+                                            id: item.id,
+                                            label: item.label,
+                                        })), value: selectedRole !== null && selectedRole !== void 0 ? selectedRole : undefined, onSelect: (option) => {
+                                            if (!option) {
+                                                setSelectedRole(null);
+                                            }
+                                            else if (!Array.isArray(option)) {
+                                                setSelectedRole({
+                                                    id: Number(option.id),
+                                                    label: option.label,
+                                                });
+                                                setError(null);
+                                            }
+                                        }, isRequired: true, isRemoveAllIcon: true, error: !!error, errorMessage: error !== null && error !== void 0 ? error : undefined, addNew: onAddRoleClick
+                                            ? {
+                                                enabled: true,
+                                                text: labels.addNewRole,
+                                                onClick: onAddRoleClick,
+                                            }
+                                            : undefined }) })] }) }), _jsxs(ModalFooter, { children: [_jsx(Button, { label: labels.cancel, onClick: onClose, colorScheme: "red", size: "sm", variant: "outline" }), _jsx(Button, { label: labels.save, type: "submit", colorScheme: "primary", size: "sm", sx: { ml: 3 }, isLoading: isLoading, isDisabled: isUnchanged || !selectedRole, onClick: handleSubmit })] })] })] }));
+};
+export default ChangeRoleModal;

package/dist/esm/Components/UserDetails/DeactivateConfirmModal.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, HStack, VStack, Text, Flex, Box, } from "@chakra-ui/react";
+import { AlertTriangle, Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import Button from "../Button/Button.js";
+const DeactivateConfirmModal = ({ isOpen, onClose, userName, isLoading, onConfirm, labels, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const { colors } = useCustomTheme();
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", 
+                                // `red` reverses in dark (50 → deep red); `semantic.error` does not, so it would
+                                // leave this disc pale pink on a near-black modal. Identical values in light.
+                                bg: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[50], color: (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[500], children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeactivation })] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 6, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(Text, { fontSize: "md", fontWeight: 500, color: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[800], children: labels.deactivateConfirmQuestion }), _jsx(Box, { bg: (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _j === void 0 ? void 0 : _j[200]) !== null && _k !== void 0 ? _k : (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[200], children: _jsxs(Text, { color: (_m = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _m === void 0 ? void 0 : _m[600], fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, pt: 2, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }), _jsx(Button, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 16 }) })] })] }) })] })] }));
+};
+export default DeactivateConfirmModal;