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

package/dist/esm/Pages/rolesPermission.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import RolesPermission from "../Components/RolesPermission/RolesPermission";
+const basePermissions = [
+    {
+        module: "Leads",
+        read: true,
+        create: true,
+        edit: true,
+        delete: false,
+        import: false,
+        export: false,
+    },
+    {
+        module: "Contacts",
+        read: true,
+        create: true,
+        edit: false,
+        delete: false,
+        import: true,
+        export: true,
+    },
+    {
+        module: "Deals",
+        read: true,
+        create: false,
+        edit: false,
+        delete: false,
+        import: false,
+        export: false,
+    },
+    {
+        module: "Automation",
+        read: false,
+        create: false,
+        edit: false,
+        delete: false,
+        automation: true,
+    },
+];
+const demoRoles = [
+    {
+        roleName: "Super Admin",
+        createdBy: "Aisha Khan",
+        created_at: "Jun 6, 2026 10:00 AM",
+        permission: basePermissions,
+        roles_id: "1",
+        designation: "Army",
+        makeSuperAdmin: true,
+    },
+    {
+        roleName: "Sales Manager",
+        createdBy: "Marcus Reed",
+        created_at: "Jun 5, 2026 09:12 AM",
+        permission: basePermissions,
+        roles_id: "2",
+        designation: "Army",
+        trackLocation: true,
+    },
+    {
+        roleName: "Support Agent",
+        createdBy: "Lena Fischer",
+        created_at: "Jun 4, 2026 04:45 PM",
+        permission: basePermissions,
+        roles_id: "3",
+        designation: "Army",
+    },
+];
+const RolesPermissionPage = () => {
+    const [view, setView] = useState("list");
+    const [mode, setMode] = useState("create");
+    const [roleName, setRoleName] = useState("");
+    const [roleNameError, setRoleNameError] = useState("");
+    const [isSuperAdmin, setIsSuperAdmin] = useState(false);
+    const [isTrackLocation, setIsTrackLocation] = useState(false);
+    const [isShowRecords, setIsShowRecords] = useState(false);
+    const [permissions, setPermissions] = useState(basePermissions);
+    const [editing, setEditing] = useState(false);
+    const resetForm = () => {
+        setRoleName("");
+        setRoleNameError("");
+        setIsSuperAdmin(false);
+        setIsTrackLocation(false);
+        setIsShowRecords(false);
+        setPermissions(basePermissions);
+        setEditing(false);
+    };
+    const openRole = (role, viewMode) => {
+        setRoleName(role.roleName);
+        setIsSuperAdmin(!!role.makeSuperAdmin);
+        setIsTrackLocation(!!role.trackLocation);
+        setIsShowRecords(!!role.show_records);
+        setPermissions(role.permission);
+        setEditing(true);
+        setMode(viewMode ? "view" : "edit");
+        setView("form");
+    };
+    const handlePermissionChange = (module, key) => {
+        setPermissions((prev) => prev.map((perm) => perm.module === module ? { ...perm, [key]: !perm[key] } : perm));
+        if (isSuperAdmin)
+            setIsSuperAdmin(false);
+    };
+    const roles = useMemo(() => demoRoles, []);
+    return (_jsx(RolesPermission, { view: view, mode: mode, roles: roles, permissions: permissions, roleName: roleName, roleNameError: roleNameError, isSuperAdmin: isSuperAdmin, isTrackLocation: isTrackLocation, isShowRecords: isShowRecords, isEditing: editing, onNewRole: () => {
+            resetForm();
+            setMode("create");
+            setView("form");
+        }, onViewRole: (role) => openRole(role, true), onEditRole: (role) => openRole(role, false), onDeleteRole: (id) => console.log("[RolesPermissionPage] delete", id), onBack: () => console.log("[RolesPermissionPage] back"), onRoleNameChange: (value) => {
+            setRoleName(value);
+            if (roleNameError)
+                setRoleNameError("");
+        }, onToggleSuperAdmin: (checked) => {
+            setIsSuperAdmin(checked);
+            if (checked) {
+                setPermissions((prev) => prev.map((perm) => ({
+                    ...perm,
+                    read: true,
+                    create: true,
+                    edit: true,
+                    delete: true,
+                    import: true,
+                    export: true,
+                    automation: true,
+                })));
+            }
+        }, onToggleTrackLocation: setIsTrackLocation, onToggleShowRecords: setIsShowRecords, onPermissionChange: handlePermissionChange, onSave: () => {
+            if (!roleName.trim()) {
+                setRoleNameError("Role name is required");
+                return;
+            }
+            console.log("[RolesPermissionPage] save", {
+                roleName,
+                isSuperAdmin,
+                permissions,
+            });
+            setView("list");
+        }, onCancelForm: () => setView("list") }));
+};
+export default RolesPermissionPage;

package/dist/esm/Pages/search.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import Search from "../Components/Search/Search";
+const SearchPage = () => {
+    const [searchQuery, setSearchQuery] = useState("");
+    const handleSearch = (event) => {
+        console.log("Search query:", event.target.value);
+        setSearchQuery(event.target.value);
+    };
+    const handleRemoveSearch = () => {
+        console.log("Search query removed");
+        setSearchQuery("");
+    };
+    return (_jsx("div", { children: _jsx(Search, { onSearch: handleSearch, onclose: handleRemoveSearch, query: searchQuery, label: "Search", placeholder: "Search...", isRequired: true, error: false, errorMessage: "Error message", helperText: "Helper text", isInformation: true, informationMessage: "Information message", shortcut: "Ctrl+K" }) }));
+};
+export default SearchPage;

package/dist/esm/Pages/searchSelect.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import SearchSelectComponent from "../Components/SearchSelect/SearchSelect";
+// import { Plus } from "lucide-react";
+import { Box } from "@chakra-ui/react";
+import TextInput from "../Components/Input/TextInput";
+const max = 3;
+const rrr = (start, limit) => {
+    const end = Math.min(start + limit, max + 1); // +1 to include `max` as valid
+    return Array.from({ length: end - start }, (_, index) => ({
+        id: (start + index).toString(),
+        label: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.   ${start + index}`,
+        view: (_jsx(Box, { children: " demo" }))
+    }));
+};
+const SearchSelect = () => {
+    const [selectedOptions, setselectedOptions] = useState(undefined);
+    const [insideSelectValue, setInsideSelectValue] = useState(undefined);
+    const [soptions] = useState(rrr(1, 50)); // initial 50
+    const [search, setSearch] = useState("");
+    // const [customSelectValue, setCustomSelectValue] = useState<any>({});
+    return (_jsxs("div", { style: { width: "250px" }, children: [_jsx(SearchSelectComponent
+            // width={"250px"}
+            , { 
+                // width={"250px"}
+                label: "Users", id: "user-select", options: soptions, value: selectedOptions, isMultiple: true, onSelect: (val) => {
+                    console.log("val", val);
+                    setselectedOptions(val);
+                }, onSearch: (query) => setSearch(query), searchQuery: search, isOptionLoading: false, placeholder: "Search users...", chip: {
+                    maxChips: 3,
+                    onClick: () => console.log("chip removed"),
+                }, isSelectAll: true, isRequired: true, size: "sm", 
+                // onSearch={(query) => setSearch(query)}
+                insideSelect: {
+                    width: "5rem",
+                    placeholder: "Type",
+                    onSelect: (val) => setInsideSelectValue(val),
+                    value: insideSelectValue,
+                    option: [
+                        { id: 1, label: "Option 1" },
+                        { id: 2, label: "Option 2" },
+                    ],
+                }, 
+                // pagination={{
+                //   limit: 50,
+                //   scrollLoading: paginationLoading,
+                //   onScroll: async (startIndex, limit, query) => {
+                //     console.log("Fetching:", startIndex, limit, query);
+                //     if (startIndex > max) {
+                //       console.log("No more data to load.");
+                //       return;
+                //     }
+                //     setpaginationLoading(true);
+                //     await delay(1000);
+                //     const newOptions = rrr(startIndex, limit);
+                //     setpaginationLoading(false);
+                //     if (newOptions.length === 0) {
+                //       console.log("No new options returned.");
+                //       return;
+                //     }
+                //     setSoptions((prev: any[]) => [...prev, ...newOptions]);
+                //   },
+                // }}
+                // width={"500px"}
+                addNew: {
+                    enabled: true,
+                    text: "Add new user",
+                    onClick: () => console.log("Add New User"),
+                } }), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(TextInput, { label: "My Label", id: "input1", name: "hello", 
+                //helperText="Hello"
+                // errorMessage="Required"
+                // error={true}
+                type: "email", 
+                // border={"0px solid"}
+                // padding={"0px"}
+                // inputStyle={{ border: "0px solid", padding: "0px" }}
+                // inputGroupStyle={{ border: "0px solid", padding: "0px" }}
+                // error={true}
+                // errorMessage="Required"
+                onChange: (e) => {
+                    console.log(e.target.files);
+                }, onKeyDown: () => {
+                    console.log("keydown");
+                }, onBlur: () => {
+                    console.log("blur");
+                }, 
+                // helperText="sometibg"
+                isRequired: true, informationMessage: "This is information", isInformation: true, 
+                // isDisabled
+                minW: "200px", maxW: "300px" }, "input1")] }));
+};
+export default SearchSelect;

package/dist/esm/Pages/select.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import Select from '../Components/Select/Select';
+const SelectPage = () => {
+    const [selected, setSelected] = useState("");
+    const handleOnChange = (selectedOption) => {
+        const checked = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id;
+        setSelected(checked != null ? String(checked) : "");
+    };
+    return (_jsx("div", { children: _jsx(Select, { options: [
+                { id: 1, label: "magesssssss" },
+                { id: 2, label: "sjdfg" },
+            ], onChange: handleOnChange, value: selected }) }));
+};
+export default SelectPage;

package/dist/esm/Pages/selectSearch.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import SelectSearch from "../Components/SelectSearch/SelectSearch";
+import { User } from "lucide-react";
+const SelectSearchs = () => {
+    const [selectSearchText, setSelectSearchText] = useState("Option 1");
+    const [selectedOption, setSelectedOption] = useState({
+        id: "1",
+        label: "Option 1",
+    });
+    const [multiSelectSearchText, setMultiSelectSearchText] = useState("Option 1");
+    const [multiselectedOption, setMultiSelectedOption] = useState([{ id: "1", label: "Option 1" }]);
+    return (_jsxs("div", { children: [_jsx("div", { children: _jsx(SelectSearch, { BottomText: "Add Check", isBottomIcon: true, isProfile: true, isOptionLoading: false, loadingText: "Loading...", BottomIcon: false, options: [
+                        {
+                            id: "1",
+                            label: "Option 1",
+                            profileUrl: "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo",
+                            email: "kavinKumar0298@gggmail.com",
+                        },
+                        {
+                            id: "2",
+                            label: "select 2",
+                            profileUrl: "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo",
+                            email: "kavinKumar0298@gggmail.com",
+                        },
+                        {
+                            id: "3",
+                            label: "clone 3",
+                            profileUrl: "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo",
+                            email: "kavinKumar0298@gggmail.com",
+                        },
+                    ], inputOnchange: (value) => {
+                        setSelectSearchText(value.toString());
+                        console.log(value);
+                    }, initialSelectedOption: selectedOption, onOptionSelect: (data) => {
+                        setSelectSearchText(data.label);
+                        setSelectedOption(data);
+                    }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: _jsx(User, { color: "gray.300" }), isMultipleSelect: false, handleBottomClick: () => console.log("clg") }) }), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("div", { children: _jsx(SelectSearch, { BottomText: "Add Check", options: [
+                        { id: "1", label: "Option 1jhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh" },
+                        { id: "2", label: "select 2" },
+                        { id: "3", label: "clone 3" },
+                    ], inputOnchange: (value) => {
+                        setMultiSelectSearchText(value.toString());
+                        // console.log(value);
+                    }, initialSelectedOption: multiselectedOption[0], 
+                    // onOptionSelect={(data) => {
+                    //   setMultiSelectSearchText(data.label);
+                    // }}
+                    name: "hai", label: "MultiSelectSearch", searchQuery: multiSelectSearchText, rightIcon: _jsx(User, { color: "gray.300" }), isMultipleSelect: true, onOptionMultiSelect: (data) => {
+                        setMultiSelectedOption(data);
+                    } }) })] }));
+};
+export default SelectSearchs;

package/dist/esm/Pages/signInActivityTable.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import SignInActivityTable from "../Components/SignInActivityTable/SignInActivityTable";
+const demoDevices = [
+    { browser: "Chrome 124", device: "MacBook Pro", activity: "2 minutes ago" },
+    { browser: "Safari 17", device: "iPhone 15 Pro", activity: "Yesterday, 8:14 PM" },
+    { browser: "Edge 124", device: "Windows 11", activity: "Jun 3, 2026 10:02 AM" },
+];
+const SignInActivityTablePage = () => {
+    return (_jsx(Box, { maxW: "720px", children: _jsx(SignInActivityTable, { devices: demoDevices }) }));
+};
+export default SignInActivityTablePage;

package/dist/esm/Pages/skeleton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import Skeletons from "../Components/Skeletons/Skeletons";
+const SkeletonPage = () => {
+    return (_jsx("div", { children: _jsxs(Box, { children: [_jsx(Skeletons, { type: "skeleton" }), _jsx("br", {}), _jsx(Skeletons, { type: "circle" }), _jsx("br", {}), _jsx(Skeletons, { type: "text", mt: 4 }), _jsx("br", {}), _jsx("br", {}), _jsx(Skeletons, { height: "10px", isLoaded: false, fadeDuration: 4, bg: "blue.500", color: "white", type: "skeleton", children: _jsx(Box, { children: "Hello ChakraUI!" }) })] }) }));
+};
+export default SkeletonPage;

package/dist/esm/Pages/stageProgress.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Heading, Text } from "@chakra-ui/react";
+import StageProgress from "../Components/StageProgress/StageProgress";
+import { useCustomTheme } from "../Theme/useCustomTheme";
+const DEAL_STAGES = [
+    { id: "qualification", label: "Qualification" },
+    { id: "needs", label: "Needs Analysis" },
+    { id: "proposal", label: "Value Proposition" },
+    { id: "decision", label: "Identify Decision Makers" },
+    { id: "quote", label: "Proposal / Price Quote" },
+    { id: "negotiation", label: "Negotiation / Review" },
+    { id: "won", label: "Closed Won" },
+];
+const Section = ({ title, children, }) => {
+    var _a, _b, _c, _d;
+    const theme = useCustomTheme();
+    return (_jsxs(Box, { mb: 10, p: 6, borderRadius: "16px", border: "1px solid", borderColor: (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : "#E2E8F0", bg: theme.colors.background[50], children: [_jsx(Heading, { size: "sm", mb: 4, color: (_d = (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[900]) !== null && _d !== void 0 ? _d : "gray.700", children: title }), children] }));
+};
+const StageProgressPage = () => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const theme = useCustomTheme();
+    const [dealStage, setDealStage] = useState("proposal");
+    return (_jsxs(Box, { maxW: "1000px", mx: "auto", py: 4, children: [_jsx(Heading, { size: "lg", mb: 6, children: "Stage Progress" }), _jsxs(Section, { title: "Variants \u2014 all interactive, click a stage", children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: 7, children: [_jsxs(Box, { children: [_jsx(Text, { fontSize: "xs", fontWeight: 600, color: (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : "gray.500", mb: 2, children: "chevron" }), _jsx(StageProgress, { stages: DEAL_STAGES, variant: "chevron", value: dealStage, onChange: (id) => setDealStage(id), showCheck: true })] }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "xs", fontWeight: 600, color: (_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[500]) !== null && _d !== void 0 ? _d : "gray.500", mb: 2, children: "bar" }), _jsx(StageProgress, { stages: DEAL_STAGES, variant: "bar", value: dealStage, onChange: (id) => setDealStage(id) })] }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "xs", fontWeight: 600, color: (_f = (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[500]) !== null && _f !== void 0 ? _f : "gray.500", mb: 2, children: "pills" }), _jsx(StageProgress, { stages: DEAL_STAGES, variant: "pills", value: dealStage, onChange: (id) => setDealStage(id) })] }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "xs", fontWeight: 600, color: (_h = (_g = theme.colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "gray.500", mb: 2, children: "stepper" }), _jsx(StageProgress, { stages: DEAL_STAGES, variant: "stepper", value: dealStage, onChange: (id) => setDealStage(id), showCheck: true })] })] }), _jsxs(Text, { mt: 4, fontSize: "sm", color: "gray.500", children: ["Active: ", _jsx("b", { children: dealStage })] })] }), _jsx(Section, { title: "Sizes", children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 5, children: [_jsx(StageProgress, { stages: DEAL_STAGES.slice(0, 5), value: "proposal", size: "sm", isReadOnly: true }), _jsx(StageProgress, { stages: DEAL_STAGES.slice(0, 5), value: "proposal", size: "md", isReadOnly: true }), _jsx(StageProgress, { stages: DEAL_STAGES.slice(0, 5), value: "proposal", size: "lg", isReadOnly: true })] }) }), _jsx(Section, { title: "Color schemes", children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 4, children: [_jsx(StageProgress, { stages: DEAL_STAGES.slice(0, 5), value: "proposal", colorScheme: "primary", isReadOnly: true }), _jsx(StageProgress, { stages: DEAL_STAGES.slice(0, 5), value: "proposal", colorScheme: "success", isReadOnly: true, showCheck: true }), _jsx(StageProgress, { stages: DEAL_STAGES.slice(0, 5), value: "proposal", colorScheme: "warning", isReadOnly: true })] }) }), _jsx(Section, { title: "Loading", children: _jsx(StageProgress, { stages: [], isLoading: true }) })] }));
+};
+export default StageProgressPage;

package/dist/esm/Pages/switch.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import Switch from "../Components/Switch/Switch";
+const SwitchPage = () => {
+    const [switchActive, setSwitchActive] = useState("left");
+    const handleSwitchToggle = (value) => {
+        // console.log(value);
+        setSwitchActive(value);
+    };
+    return (_jsx("div", { children: _jsx(Switch, { leftText: "Overview", rightText: "Timeline", switchActive: switchActive, onSwitchToggle: handleSwitchToggle }) }));
+};
+export default SwitchPage;

package/dist/esm/Pages/table.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import Table from "../Components/Table/Table";
+import Button from "../Components/Button/Button";
+// ---------------------------------------------------------------------------
+// Demo data
+// ---------------------------------------------------------------------------
+const STATUSES = ["Working on it", "Done", "Stuck", "Not started"];
+const PRIORITIES = ["High", "Medium", "Low"];
+const OWNERS = ["Alex Rowe", "Jamie Soto", "Priya Nair", "Chen Wei"];
+const STATUS_COLORS = {
+    Done: "#23b85c",
+    "Working on it": "#f59e0b",
+    Stuck: "#e2483d",
+    "Not started": "#7d6ea0",
+};
+const PRIORITY_COLORS = {
+    High: "#e2483d",
+    Medium: "#f59e0b",
+    Low: "#23b85c",
+};
+const initials = (name) => name.split(" ").map((p) => p[0]).slice(0, 2).join("").toUpperCase();
+// ~600 rows so grouped virtualization is exercised. NOTE: expandable `content`
+// is intentionally omitted here — expandable rows have variable height and
+// disable virtualization (use a smaller dataset if you want expandable rows).
+const makeData = () => Array.from({ length: 600 }, (_, i) => ({
+    id: i + 1,
+    name: `Deal ${i + 1}`,
+    status: STATUSES[i % STATUSES.length],
+    priority: PRIORITIES[i % PRIORITIES.length],
+    owner: OWNERS[i % OWNERS.length],
+    amount: 500 + ((i * 137) % 9500),
+    date: new Date(2026, i % 12, ((i * 7) % 27) + 1).toISOString().slice(0, 10),
+    // Row actions (auto-renders the kebab action column)
+    onLink: (row) => console.log("view", row.id),
+    onEdit: (row) => console.log("edit", row.id),
+    onDelete: (row) => console.log("delete", row.id),
+    // content: () => <>Hello</>
+}));
+const columns = [
+    { label: "Name", id: "name", isFreeze: true, isSort: true, isSearch: true },
+    { label: "Status", id: "status", type: "status", statusColors: STATUS_COLORS, columnType: 'date' },
+    { label: "Priority", id: "priority", type: "status", statusColors: PRIORITY_COLORS },
+    {
+        label: "Owner",
+        id: "owner",
+        node: (row) => {
+            var _a, _b;
+            return (_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Box, { boxSize: "1.5rem", borderRadius: "full", bg: "primary.opacity.16", color: "primary.600", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.625rem", fontWeight: 700, children: initials(String((_a = row.owner) !== null && _a !== void 0 ? _a : "")) }), _jsx(Text, { fontSize: "0.8125rem", children: String((_b = row.owner) !== null && _b !== void 0 ? _b : "") })] }));
+        },
+    },
+    { label: "Amount", id: "amount", isSort: true, node: (row) => { var _a; return `$${Number((_a = row.amount) !== null && _a !== void 0 ? _a : 0).toLocaleString()}`; } },
+    { label: "Date", id: "date", isSort: true },
+    { label: "Date 2", id: "date2", isSort: true },
+    { label: "Date 3", id: "date3", isSort: true },
+    { label: "Date 4", id: "date4", isSort: true },
+    { label: "Date 5", id: "date5", isSort: true },
+    { label: "Date 6", id: "date6", isSort: true },
+];
+const users = [
+    { id: "1", label: "User 1" },
+    { id: "2", label: "User 2" },
+    { id: "3", label: "User 3" },
+];
+const defaultSections = [
+    {
+        id: "system",
+        label: "System Defined Filters",
+        initiallyExpanded: true,
+        items: [
+            { id: "touched", label: "Touched Records", type: "text" },
+            { id: "untouched", label: "Untouched Records", type: "select", option: users },
+            { id: "record_action", label: "Record Action", type: "user", option: users },
+            { id: "latest_email", label: "Latest Email Status", type: "date" },
+        ],
+    },
+    {
+        id: "fields",
+        label: "Filter By Fields",
+        radio: true,
+        items: [
+            { id: "status", label: "Status", type: "select", option: STATUSES.map((s) => ({ id: s, label: s })) },
+            { id: "owner", label: "Owner" },
+        ],
+    },
+];
+export const TableExample = () => {
+    const [data] = useState(makeData);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(20);
+    const [reqToken, setReqToken] = useState(0); // mimics LeadTable's payload churn
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isFilterSidebar, setIsFilterSidebar] = useState(false);
+    const [selected, setSelected] = useState({});
+    const reload = () => {
+        setIsLoading(true);
+        setTimeout(() => setIsLoading(false), 600);
+    };
+    const handleRefresh = () => {
+        console.log("Refreshing table data...");
+        setIsLoading(true);
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                setIsLoading(false);
+                console.log("Table data refreshed!");
+                resolve(true);
+            }, 1000);
+        });
+    };
+    // Server-style pagination: each fetch returns ONLY the requested page and
+    // REPLACES `data` (like a real API / LeadTable). `reqToken` re-creates the array
+    // reference the instant a request starts (before the next page arrives) to mimic
+    // LeadTable's payload/refetch churn — exercising the accumulation timing.
+    // PINNED rows repeat on EVERY page (like pinned leads) so pages overlap —
+    // this is what made the page index get stuck.
+    const PINNED = 8;
+    const displayData = useMemo(() => {
+        const perPage = pageSize - PINNED;
+        const start = PINNED + (page - 1) * perPage;
+        const slice = data.slice(start, start + perPage);
+        if (slice.length === 0)
+            return []; // past the end → empty page (no more)
+        return [...data.slice(0, PINNED), ...slice];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data, page, pageSize, reqToken]);
+    // Mirror LeadTable: signal end-of-data from the response (empty page = no more).
+    const hasMore = displayData.length > 0;
+    const handlePagination = (p, size) => {
+        if (isLoadingMore)
+            return;
+        setReqToken((t) => t + 1); // new `data` reference now, before the page changes
+        setIsLoadingMore(true);
+        setTimeout(() => {
+            if (size !== pageSize) {
+                setPageSize(size);
+                setPage(1);
+            }
+            else {
+                setPage(p);
+            }
+            setIsLoadingMore(false);
+            // Simulate LeadTable re-emitting the current page reference after the fetch
+            // settles (a non-load-more re-render) — must NOT collapse the accumulation.
+            setTimeout(() => setReqToken((t) => t + 1), 500);
+        }, 600);
+    };
+    const groupColors = useMemo(() => STATUS_COLORS, []);
+    return (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 3, mb: 3, flexWrap: "wrap", children: [_jsxs(Text, { fontSize: "sm", color: "gray.600", children: ["Open ", _jsx("b", { children: "Settings \u2699 \u2192 Group" }), " to group by a column. Grouped \u2192 \u201CLoad more\u201D (accumulates pages); ungrouped \u2192 pager."] }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", onClick: () => {
+                            setPageSize((s) => (s === 20 ? 100 : 20));
+                            setPage(1);
+                            setReqToken((t) => t + 1);
+                        }, label: `Page size: ${pageSize}` }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", onClick: reload, label: "Reload" })] }), _jsx(Table, { columns: columns, data: displayData, isCheckbox: true, density: "compact", groupColors: groupColors, onAddItem: (group) => console.log("add item to", group), groupLoadMore: true, loadMorePosition: "top", loadMoreText: "Load more", isLoading: isLoading, loadingSkeletonRows: 6, isPagination: true, paginationMode: "server", 
+                // Intentionally larger than what's actually loadable (like Leads' totalRecords
+                // vs. untouched) so the button must rely on `hasMore`, not the total.
+                totalRecords: 99999, hasMore: hasMore, onPagination: handlePagination, isLoadingMore: isLoadingMore, noOfRowsPerPage: pageSize, onSelection: (sel) => console.log("selection", sel), onRowClick: (row, header) => console.log("row click", row, header), onGlobalSearch: (v) => console.log("search", v), isTableSettings: true, onRefresh: handleRefresh, 
+                // emptyState={{ title: "No deals yet", description: "Create your first deal to get started." }}
+                headerActions: {
+                    isDelete: { enabled: true, onClick: (s) => console.log("delete", s) },
+                    isUpdate: { enabled: true, onClick: (s) => console.log("update", s) },
+                }, filterSidebar: {
+                    isFilterSidebar,
+                    filterSidebarToggle: () => setIsFilterSidebar((v) => !v),
+                    sidebarOptions: defaultSections,
+                    onApply: (filters) => { console.log("apply", filters); setSelected(filters); },
+                    onClearAllHandler: () => setSelected({}),
+                    selected,
+                }, tableSettings: {
+                    filters: ["status", "priority", "owner"],
+                    filterSelected: ["status"],
+                    onFilterSelection: (f) => console.log("settings filters", f),
+                } })] }));
+};
+export default TableExample;

package/dist/esm/Pages/tag.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text, Stack } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import Tag from "../Components/Tag/Tag";
+const sizes = ["xs", "sm", "md", "lg"];
+const variants = ["solid", "subtle", "outline"];
+const colorSchemes = [
+    "primary",
+    "secondary",
+    "gray",
+    "green",
+    "red",
+    "orange",
+    "blue",
+    "purple",
+];
+const Section = ({ title, children }) => (_jsxs(Box, { mb: 8, children: [_jsx(Text, { fontSize: "sm", fontWeight: 600, color: "gray.500", mb: 3, children: title }), children] }));
+const TagPage = () => {
+    const onSelect = (msg) => () => console.log(msg);
+    return (_jsxs(Stack, { spacing: 2, children: [_jsx(Section, { title: "Variants (md)", children: _jsx(Flex, { align: "center", gap: 3, flexWrap: "wrap", children: variants.map((variant) => (_jsx(Tag, { label: variant, variant: variant, onTagClick: onSelect(`tag ${variant}`) }, variant))) }) }), _jsx(Section, { title: "Sizes (subtle)", children: _jsx(Flex, { align: "center", gap: 3, flexWrap: "wrap", children: sizes.map((size) => (_jsx(Tag, { label: `Size ${size}`, size: size, variant: "subtle" }, size))) }) }), _jsx(Section, { title: "Color schemes", children: variants.map((variant) => (_jsx(Flex, { align: "center", gap: 3, flexWrap: "wrap", mb: 3, children: colorSchemes.map((colorScheme) => (_jsx(Tag, { label: colorScheme, variant: variant, colorScheme: colorScheme }, `${variant}-${colorScheme}`))) }, variant))) }), _jsx(Section, { title: "With removable icon", children: _jsx(Flex, { align: "center", gap: 3, flexWrap: "wrap", children: colorSchemes.slice(0, 5).map((colorScheme) => (_jsx(Tag, { label: colorScheme, variant: "subtle", colorScheme: colorScheme, icon: X, onIconClick: onSelect(`remove ${colorScheme}`), onTagClick: onSelect(`tag ${colorScheme}`) }, colorScheme))) }) })] }));
+};
+export default TagPage;

package/dist/esm/Pages/textArea.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import InputTextArea from "../Components/InputTextArea/InputTextArea";
+const TextAreaPage = () => {
+    return (_jsx("div", { children: _jsx(InputTextArea, { label: "hello", helperText: "Hello", 
+            // errorMessage="Required"
+            // error={true}
+            rows: 5 }) }));
+};
+export default TextAreaPage;