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

package/dist/esm/Utils/table.js

@@ -0,0 +1,321 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import { onFilled } from "../Theme/tokens/builders/accentText";
+// Built once, not per comparison: sorting 10k rows runs this ~130k times, and constructing a
+// collator is orders of magnitude dearer than using one.
+const COLLATOR = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: "base",
+});
+const HAS_DIGIT = /\d/;
+/**
+ * Type-aware, null-safe comparison. Detects numbers and dates; otherwise falls
+ * back to a numeric-aware locale string compare. Empty/null values sort last.
+ */
+export function compareValues(aRaw, bRaw, direction) {
+    if (direction === "none")
+        return 0;
+    const dir = direction === "asc" ? 1 : -1;
+    const a = getStringValue(aRaw);
+    const b = getStringValue(bRaw);
+    const aEmpty = a === "";
+    const bEmpty = b === "";
+    if (aEmpty && bEmpty)
+        return 0;
+    if (aEmpty)
+        return 1; // nulls/empties always last
+    if (bEmpty)
+        return -1;
+    const an = Number(a);
+    const bn = Number(b);
+    if (!Number.isNaN(an) && !Number.isNaN(bn))
+        return (an - bn) * dir;
+    // No digit means no date, so this skips two Date.parse calls per comparison on the common
+    // text columns (names, emails, statuses) without changing which strings parse as dates.
+    if (HAS_DIGIT.test(a) && HAS_DIGIT.test(b)) {
+        const ad = Date.parse(a);
+        const bd = Date.parse(b);
+        if (!Number.isNaN(ad) && !Number.isNaN(bd))
+            return (ad - bd) * dir;
+    }
+    return COLLATOR.compare(a, b) * dir;
+}
+export function SortMultiColumnData(data, sortConfig) {
+    const active = sortConfig.filter((s) => s.direction !== "none");
+    if (!active.length)
+        return data;
+    return [...data].sort((a, b) => {
+        for (const { column, direction } of active) {
+            const r = compareValues(a[column], b[column], direction);
+            if (r !== 0)
+                return r;
+        }
+        return 0;
+    });
+}
+const withAlpha = (hex, aa) => /^#([0-9a-fA-F]{6})$/.test(hex) ? `${hex}${aa}` : hex;
+const FALLBACK_SOLID = "#8B3FC8";
+/** Deterministic, theme-aware color palette for groups + status pills. */
+export function buildTablePalette(theme) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const c = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) !== null && _a !== void 0 ? _a : {};
+    const white = c.white || "#FFFFFF";
+    const black = c.black || "#000000";
+    const bases = [
+        (_b = c.primary) === null || _b === void 0 ? void 0 : _b[500],
+        (_d = (_c = c.semantic) === null || _c === void 0 ? void 0 : _c.success) === null || _d === void 0 ? void 0 : _d[500],
+        (_f = (_e = c.semantic) === null || _e === void 0 ? void 0 : _e.info) === null || _f === void 0 ? void 0 : _f[500],
+        (_h = (_g = c.semantic) === null || _g === void 0 ? void 0 : _g.warning) === null || _h === void 0 ? void 0 : _h[500],
+        (_j = c.teal) === null || _j === void 0 ? void 0 : _j[500],
+        (_k = c.blue) === null || _k === void 0 ? void 0 : _k[500],
+        (_l = c.pink) === null || _l === void 0 ? void 0 : _l[500],
+        (_o = (_m = c.semantic) === null || _m === void 0 ? void 0 : _m.error) === null || _o === void 0 ? void 0 : _o[500],
+        (_p = c.orange) === null || _p === void 0 ? void 0 : _p[500],
+        (_q = c.purple) === null || _q === void 0 ? void 0 : _q[500],
+    ];
+    const list = bases.filter(Boolean);
+    const fallback = [FALLBACK_SOLID];
+    return (list.length ? list : fallback).map((solid) => ({
+        solid,
+        soft: withAlpha(solid, "22"),
+        text: solid,
+        onSolid: onFilled(solid, white, black),
+    }));
+}
+const hashKey = (value) => {
+    const s = String(value);
+    let h = 0;
+    for (let i = 0; i < s.length; i++)
+        h = (h * 31 + s.charCodeAt(i)) >>> 0;
+    return h;
+};
+/**
+ * Pick a deterministic palette color for a value, with optional override hex.
+ *
+ * `theme` is optional so existing callers that don't have it keep compiling — when omitted,
+ * `onSolid` falls back to the mode-stable absolutes ("#FFFFFF"/"#000000", same value
+ * `theme.colors.white`/`black` resolve to for every brand) instead of going undefined.
+ */
+export function pickTableColor(value, palette, override, theme) {
+    var _a, _b;
+    const white = ((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.white) || "#FFFFFF";
+    const black = ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.black) || "#000000";
+    if (override) {
+        return { solid: override, soft: withAlpha(override, "22"), text: override, onSolid: onFilled(override, white, black) };
+    }
+    if (!palette.length) {
+        return { solid: FALLBACK_SOLID, soft: withAlpha(FALLBACK_SOLID, "22"), text: FALLBACK_SOLID, onSolid: onFilled(FALLBACK_SOLID, white, black) };
+    }
+    return palette[hashKey(value) % palette.length];
+}
+/**
+ * Partition rows by a column, preserving first-seen group order. The group key is
+ * a normalized string so object/array values (e.g. a `user` field that is an object
+ * or an array of users) group together by their readable text instead of by object
+ * identity.
+ */
+export function groupRows(data, groupBy) {
+    const order = [];
+    const map = new Map();
+    for (const row of data) {
+        const text = getStringValue(row[groupBy]);
+        const key = text === "" ? "—" : text;
+        if (!map.has(key)) {
+            map.set(key, []);
+            order.push(key);
+        }
+        map.get(key).push(row);
+    }
+    return order.map((value) => ({ value, label: String(value), rows: map.get(value) }));
+}
+export const calculateLeftOffset = (columns, index) => {
+    return columns.slice(0, index).reduce((sum, width) => sum + width, 0);
+};
+const extractTextFromReactNode = (node) => {
+    if (typeof node === "string" || typeof node === "number") {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(extractTextFromReactNode).join(" ");
+    }
+    if (React.isValidElement(node)) {
+        const element = node;
+        return extractTextFromReactNode(element.props.children);
+    }
+    return "";
+};
+/** Best-effort readable text for an entity object (user/relation/option/etc.). */
+const objectToText = (o) => {
+    var _a, _b;
+    if (typeof o.label === "string" || typeof o.label === "number")
+        return String(o.label);
+    if (typeof o.name === "string" || typeof o.name === "number")
+        return String(o.name);
+    const first = (_a = o.first_name) !== null && _a !== void 0 ? _a : o.firstName;
+    const last = (_b = o.last_name) !== null && _b !== void 0 ? _b : o.lastName;
+    if (typeof first === "string" || typeof last === "string") {
+        return `${first !== null && first !== void 0 ? first : ""} ${last !== null && last !== void 0 ? last : ""}`.trim();
+    }
+    if (typeof o.full_name === "string")
+        return o.full_name;
+    if (typeof o.title === "string")
+        return o.title;
+    if (typeof o.company_name === "string")
+        return o.company_name;
+    if (typeof o.email === "string")
+        return o.email;
+    if (typeof o.value === "string" || typeof o.value === "number")
+        return String(o.value);
+    return "";
+};
+/**
+ * Readable string for any cell value. Handles primitives, React elements, entity
+ * objects (e.g. `user`: `{ name }` / `{ first_name, last_name }`), and arrays of
+ * any of those (e.g. a multi-user field) by joining their texts.
+ */
+const getStringValue = (value) => {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+        return String(value);
+    }
+    if (React.isValidElement(value)) {
+        return extractTextFromReactNode(value);
+    }
+    if (Array.isArray(value)) {
+        return value.map(getStringValue).filter((s) => s !== "").join(", ");
+    }
+    if (typeof value === "object") {
+        return objectToText(value);
+    }
+    return "";
+};
+/**
+ * When a column has no `node`, raw cell values are rendered; plain objects
+ * (e.g. relation/user fields) must not be passed as React children.
+ */
+export function normalizeTableCellValue(value) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "string" ||
+        typeof value === "number" ||
+        typeof value === "boolean") {
+        return value;
+    }
+    if (React.isValidElement(value)) {
+        return value;
+    }
+    // Objects (relation/user) and arrays (multi-user / multi-select) → readable text.
+    return getStringValue(value);
+}
+export const searchAndSortData = (data, searchValues) => {
+    const filteredData = data.filter((item) => {
+        return Object.keys(searchValues).every((key) => {
+            const searchValue = searchValues[key].toLowerCase();
+            const itemValue = getStringValue(item[key]).toLowerCase();
+            return itemValue.includes(searchValue);
+        });
+    });
+    return filteredData.sort((a, b) => {
+        let aMatchCount = 0;
+        let bMatchCount = 0;
+        Object.keys(searchValues).forEach((key) => {
+            const searchValue = searchValues[key].toLowerCase();
+            const aValue = getStringValue(a[key]).toLowerCase();
+            const bValue = getStringValue(b[key]).toLowerCase();
+            if (aValue === searchValue)
+                aMatchCount++;
+            if (bValue === searchValue)
+                bMatchCount++;
+            if (aValue.includes(searchValue))
+                aMatchCount += 0.5;
+            if (bValue.includes(searchValue))
+                bMatchCount += 0.5;
+        });
+        return bMatchCount - aMatchCount;
+    });
+};
+export function debounce(func, delay) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            func(...args);
+        }, delay);
+    };
+}
+export function useDebounce(callback, delay) {
+    const callbackRef = useRef(callback);
+    const timerRef = useRef(null);
+    useEffect(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+    const debouncedFn = useCallback((...args) => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        timerRef.current = setTimeout(() => {
+            callbackRef.current(...args);
+        }, delay);
+    }, [delay]);
+    return debouncedFn;
+}
+export const pageSizeCalculation = (records) => {
+    const pageSize = [5, 10];
+    if (records > 100) {
+        return [25, 50, 100];
+    }
+    else if (records > 50) {
+        return [5, 10, 20];
+    }
+    return pageSize;
+};
+export const TableCellCalculation = ({ isFrozen, columnWidths, headerIndex, isCheckbox, header, row, freezedBgColor, index, theme, }) => {
+    var _a, _b, _c, _d;
+    const leftOffset = isFrozen
+        ? calculateLeftOffset(columnWidths, headerIndex) + (isCheckbox ? 50 : 0)
+        : 0;
+    const cellStyles = row.cellStyle;
+    const rowStyle = row.rowStyle;
+    let cellBgColor = undefined;
+    let cellTextColor = undefined;
+    if (cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) {
+        cellBgColor =
+            (_b = (_a = cellStyles[header.id]) === null || _a === void 0 ? void 0 : _a.bg) !== null && _b !== void 0 ? _b : theme.colors.backgroundColor.light;
+        cellTextColor = (_d = (_c = cellStyles[header.id]) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : undefined;
+    }
+    else if (isFrozen) {
+        cellBgColor = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : undefined;
+        cellTextColor = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : undefined;
+    }
+    else if (index % 2 === 1) {
+        cellBgColor = theme.colors.backgroundColor.light;
+    }
+    let rowBgColor = undefined;
+    let rowTextColor = undefined;
+    if (rowStyle) {
+        rowBgColor = rowStyle.bg;
+        rowTextColor = rowStyle.color;
+    }
+    return { leftOffset, cellBgColor, rowBgColor, cellTextColor, rowTextColor };
+};
+/**
+ * Filters array of objects by checking all property values against the search query.
+ *
+ * @param data - Array of objects
+ * @param query - Search string
+ * @returns Filtered data
+ */
+export function globalSearchFilter(data, query) {
+    if (!query.trim())
+        return data;
+    const lowerQuery = query.toLowerCase();
+    return data.filter((item) => Object.values(item).some((val) => {
+        if (val === null ||
+            val === undefined ||
+            typeof val === "object" ||
+            typeof val === "function") {
+            return false;
+        }
+        return String(val).toLowerCase().includes(lowerQuery);
+    }));
+}

package/dist/esm/bootstrap.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import { PixelizeThemeProvider } from "./Theme/provider";
+import "./index.css";
+const root = ReactDOM.createRoot(document.getElementById("root"));
+// The playground uses the provider (rather than the legacy `withTheme` HOC) so the
+// light/dark/brand switcher is exercisable here. `withTheme` is still the shipped
+// default export and is unchanged.
+root.render(_jsx(React.StrictMode, { children: _jsx(PixelizeThemeProvider, { children: _jsx(App, {}) }) }));

package/dist/esm/index.js

@@ -0,0 +1,133 @@
+// import "./bootstrap";
+import Accordian from "./Components/Accordion/Accordion";
+import AlertDialog from "./Components/AlertDialog/AlertDialog";
+import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";
+import ApexPieChart from "./Components/Apexcharts/ApexPieChart/ApexPieChart";
+import ApexPolarChart from "./Components/Apexcharts/ApexPolarCharts/ApexPolarCharts";
+import Breadcrumbs from "./Components/Breadcrumbs/Breadcrumbs";
+import Button from "./Components/Button/Button";
+import ButtonGroupIcon from "./Components/ButtonGroupIcon/ButtonGroupIcon";
+import Card from "./Components/Card/Card";
+import Checkbox from "./Components/Checkbox/Checkbox";
+import ContactForm from "./Components/ContactForm/ContactForm";
+// import DatePicker from "./Components/DatePicker/DatePicker";
+import Drawer, { DrawerHeader, DrawerBody, DrawerFooter, } from "./Components/Drawer/Drawer";
+import Dropdown from "./Components/Dropdown/DropDown";
+import Editor from "./Components/Editor/Editor";
+import FileUpload from "./Components/FileUpload/FileUpload";
+import FileUploader from "./Components/FileUploader/FileUploader";
+import FormWrapper from "./Components/Form/FormWrapper";
+import Header from "./Components/Header/Header";
+import HeaderActions from "./Components/Header/HeaderActions";
+import InputTextArea from "./Components/InputTextArea/InputTextArea";
+import KanbanBoard from "./Components/KanbanBoard/KanbanBoard";
+import Loading from "./Components/Loading/Loading";
+import Modal, { ModalHeader, ModalBody, ModalFooter, } from "./Components/Modal/Modal";
+import MultiSelect from "./Components/MultiSelect/MultiSelect";
+import NavigationBar from "./Components/NavigationBar/NavigationBar";
+import NoteTextArea from "./Components/NoteTextArea/NoteTextArea";
+import NumberInput from "./Components/NumberInput/NumberInput";
+import PinInput from "./Components/PinInput/PinInput";
+import ProfileCard, { ProfileCardHeader, ProfileCardBody, ProfileCardFooter, } from "./Components/ProfileCard/ProfileCard";
+import ProfilePhotoViewer from "./Components/ProfilePhotoViewer/ProfilePhotoViewer";
+import ProgressBar from "./Components/ProgressBar/ProgressBar";
+import { RadioButton, RadioButtonGroup, } from "./Components/RadioButton/RadioButton";
+import Reorder from "./Components/Reorder/Reorder";
+import Search from "./Components/Search/Search";
+import Select from "./Components/Select/Select";
+import SelectV2 from "./Components/SelectV2/SelectV2";
+import SearchSelect from "./Components/SearchSelect/SearchSelect";
+import SelectSearch from "./Components/SelectSearch/SelectSearch";
+import SideBar from "./Components/SideBar/SideBar";
+import Slider from "./Components/Slider/Slider";
+import Skeletons from "./Components/Skeletons/Skeletons";
+import Switch from "./Components/Switch/Switch";
+import Table from "./Components/Table/Table";
+import Tag from "./Components/Tag/Tag";
+import TextInput from "./Components/Input/TextInput";
+import Timeline from "./Components/Timeline/Timeline";
+import Toaster, { useToaster } from "./Components/Toaster/Toaster";
+import ToolTip from "./Components/ToolTip/ToolTip";
+import OverflowToolTip from "./Components/ToolTip/OverflowToolTip";
+import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp";
+import TableToggle from "./Components/Toggle/TableToggle";
+import withTheme from "./withTheme";
+import { useCustomTheme } from "./Theme/useCustomTheme";
+import { useSidebarPrefs } from "./Hooks/useSidebarPrefs";
+import { useIsTruncated } from "./Hooks/useIsTruncated";
+import { ThemesList } from "./Theme";
+import { debounce } from "./Utils/table";
+// Cross-app Account handoff — shared deep-link contract so apps stop copy-pasting it.
+import { isAllowedReturnUrl, resolveReturnUrl, createAccountHandoff, } from "./Utils/accountHandoff";
+import ProductCard from "./Components/ProductCard/ProductCard";
+import ProductDetails from "./Components/ProductDetails/ProductDetails";
+import PhoneNumberInput from "./Components/Input/PhoneNumberInput";
+import { InputSwitch } from "./Components/Input/Switch/InputSwitch";
+import PaymentCard from "./Components/Card/PaymentCard/PaymentCard";
+import ApexLineChart from "./Components/Apexcharts/ApexLineChart/ApexLineChart";
+import Notification from "./Components/Notification/Notification";
+import DatePicker from "./Components/DatePicker/ThemeDatePicker";
+import FilterSidebar from "./Components/FilterSidebar/FilterSidebar";
+import EmptyState from "./Components/EmptyState/EmptyState";
+import WorkspaceWindow, { WorkspaceTray, } from "./Components/WorkspaceWindow/WorkspaceWindow";
+import WorkspaceTrayPreview from "./Components/WorkspaceWindow/WorkspaceTrayPreview";
+import MoreItems from "./Components/MoreItems/MoreItems";
+import ScrollToTop from "./Components/ScrollToTop/ScrollToTop";
+import CopyButton from "./Components/CopyButton/CopyButton";
+import FieldSelectModal from "./Components/FieldSelectModal/FieldSelectModal";
+import PdfViewer from "./Components/PdfViewer/PdfViewer";
+import LazyWrapper from "./Components/LazyWrapper/LazyWrapper";
+import FilePreview, { FilePreviewTrigger, } from "./Components/FilePreview/FilePreview";
+import StageProgress from "./Components/StageProgress/StageProgress";
+import StageItem from "./Components/StageProgress/StageItem";
+import OrgSwitcher from "./Components/OrgSwitcher/OrgSwitcher";
+import UpgradeButton from "./Components/UpgradeButton/UpgradeButton";
+import PlanPill from "./Components/PlanPill/PlanPill";
+import PlanBadge from "./Components/PlanBadge/PlanBadge";
+import LimitReachedModal from "./Components/LimitReachedModal/LimitReachedModal";
+import { formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, splitMonthsAndDays, } from "./Utils/planExpiry";
+import { resolvePlanBadge } from "./Utils/planBadge";
+import UserDetails from "./Components/UserDetails/UserDetails";
+import RolesPermission from "./Components/RolesPermission/RolesPermission";
+import CustomModulesTable from "./Components/CustomModulesTable/CustomModulesTable";
+import SignInActivityTable from "./Components/SignInActivityTable/SignInActivityTable";
+import OrganizationDetails from "./Components/OrganizationDetails/OrganizationDetails";
+export { 
+// components
+Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, LimitReachedModal, UpgradeButton, PlanPill, PlanBadge, formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, resolvePlanBadge, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SelectV2, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, 
+// hooks
+useSidebarPrefs, useIsTruncated, 
+// themes
+useCustomTheme, ThemesList, 
+// functions
+debounce, 
+// account handoff
+isAllowedReturnUrl, resolveReturnUrl, createAccountHandoff, };
+export default withTheme;
+// ---------------------------------------------------------------------------
+// Theme switching (added in 2.4.0) — additive only.
+//
+// Opt-in: `withTheme` is unchanged and stays light-only, so existing apps render
+// exactly as before. Wrap an app in `PixelizeThemeProvider` to get light/dark/system.
+// ---------------------------------------------------------------------------
+export { PixelizeThemeProvider, useThemeMode, ThemeSwitcher, } from "./Theme/provider";
+/** Light + dark Chakra theme per brand. `ThemesList` remains the light-only list. */
+export { brandThemes } from "./Theme";
+// Pure, platform-agnostic tokens — also consumed by the Pixelize mobile design library.
+export { lightPalettes, darkPalettes, palettes, themeNames, } from "./Theme/tokens/brands";
+export { buildDarkPalette } from "./Theme/tokens/builders/buildDarkPalette";
+// Contrast-resolved recipes for the two surfaces apps kept hand-rolling (and failing AA on):
+// status chips and generated avatars. Consumers pass a scale/seed and get tokens that already
+// clear the bar, instead of pinning hexes that go stale when a palette moves.
+export { AA_NON_TEXT, liftToContrast, withOutlineRung, } from "./Theme/tokens/builders/outlineRung";
+export { AVATAR_SEEDS, avatarFillFor, meetsBodyText, resolveAvatarFill, resolveStatusTone, } from "./Theme/tokens/builders/statusTone";
+// WCAG contrast + accent-picking helpers this library uses internally to keep text readable
+// against any canvas/fill a palette produces. Pure and dependency-free — consumers building
+// custom components against `ColorScale`/`PaletteProps` tokens can reuse the same logic instead
+// of re-deriving contrast math themselves.
+export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, pickAccentText, AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE, } from "./Theme/tokens/builders/accentText";
+// Pure color math backing the helpers above (and `buildDarkPalette`) — no Chakra/React/DOM
+// dependency, safe for the mobile port. `relativeLuminance`/`contrastRatio` are the WCAG 2.1
+// primitives; `compositeOver` flattens a translucent color onto a backdrop first (an alpha
+// color has no defined luminance on its own, so measure the composited result, not the tint).
+export { hexToRgb, hexToRgba, compositeOver, rgbToHex, rgbToHsl, hslToRgb, hexToHsl, hslToHex, withLightness, mix, relativeLuminance, contrastRatio, } from "./Theme/tokens/builders/color";

package/dist/esm/services/feedback.js

@@ -0,0 +1,15 @@
+export async function submitFeedback(options) {
+    const { endpoint, payload, headers } = options;
+    const res = await fetch(endpoint, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            ...(headers !== null && headers !== void 0 ? headers : {}),
+        },
+        body: JSON.stringify(payload),
+    });
+    if (!res.ok) {
+        const text = await res.text().catch(() => "");
+        throw new Error(`Feedback submit failed: ${res.status} ${text}`);
+    }
+}

package/dist/esm/withTheme.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
+import { lavender } from "./Theme"; // Import your custom theme
+import ToasterProvider from "./Components/Toaster/Toaster";
+const withTheme = (Component, theme) => {
+    const customTheme = theme !== null && theme !== void 0 ? theme : lavender;
+    return (props) => (_jsx(ChakraProvider, { theme: customTheme, children: _jsxs(ToasterProvider, { children: [_jsx(ColorModeScript, { initialColorMode: customTheme.config.initialColorMode }), _jsx(Component, { ...props })] }) }));
+};
+export default withTheme;

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.1-beta.11",
+  "version": "2.4.1-beta.13",
   "private": false,
   "main": "dist/index.js",
-  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
@@ -12,16 +11,16 @@
   "dependencies": {
     "@fontsource-variable/inter": "^5.2.8",
     "@hello-pangea/dnd": "^18.0.1",
+    "date-fns": "^3.6.0",
     "jodit-react": "^5.2.38",
     "lucide-react": "^0.487.0",
     "react-apexcharts": "^1.4.1",
-    "react-datepicker": "^7.3.0",
     "react-dropzone": "^14.3.8",
     "react-window": "^1.8.11"
   },
   "scripts": {
     "start": "vite",
-    "build": "tsc && copyfiles -u 1 src/**/*.css src/assets/**/* dist/",
+    "build": "tsc -p tsconfig.build.json && tsc -p tsconfig.esm.json && copyfiles -u 1 src/**/*.css src/assets/**/* dist/",
     "test": "jest",
     "test:watch": "jest --watch",
     "remove": "rm -rf dist/Pages dist/App.js dist/App.d.ts dist/Layout.js dist/Layout.d.ts dist/bootstrap.js dist/bootstrap.d.ts",
@@ -44,7 +43,9 @@
       }
     },
     "setupFilesAfterEnv": [
-      "@testing-library/jest-dom/extend-expect"
+      "<rootDir>/src/testUtils/jest.setup.ts",
+      "@testing-library/jest-dom/extend-expect",
+      "jest-axe/extend-expect"
     ],
     "transform": {
       "^.+\\.(ts|tsx)$": [
@@ -100,6 +101,7 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^27.5.2",
+    "@types/jest-axe": "^3.5.9",
     "@types/leaflet": "^1.9.21",
     "@types/leaflet-routing-machine": "^3.2.9",
     "@types/node": "^20.0.0",
@@ -118,6 +120,7 @@
     "framer-motion": "^10.18.0",
     "globals": "^17.6.0",
     "jest": "^29.7.0",
+    "jest-axe": "^11.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "path": "^0.12.7",
     "postcss": "^8.5.4",
@@ -136,5 +139,9 @@
     "framer-motion": "^10.18.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
-  }
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/fonts.web.js"
+  ]
 }