pixelize-design-library 2.3.22 → 2.4.1-beta.1

package/dist/Pages/table.js

@@ -0,0 +1,182 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableExample = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const Table_1 = __importDefault(require("../Components/Table/Table"));
+const Button_1 = __importDefault(require("../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 ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.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 : "")) }), (0, jsx_runtime_1.jsx)(react_2.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" },
+        ],
+    },
+];
+const TableExample = () => {
+    const [data] = (0, react_1.useState)(makeData);
+    const [page, setPage] = (0, react_1.useState)(1);
+    const [pageSize, setPageSize] = (0, react_1.useState)(20);
+    const [reqToken, setReqToken] = (0, react_1.useState)(0); // mimics LeadTable's payload churn
+    const [isLoadingMore, setIsLoadingMore] = (0, react_1.useState)(false);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [isFilterSidebar, setIsFilterSidebar] = (0, react_1.useState)(false);
+    const [selected, setSelected] = (0, react_1.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 = (0, react_1.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 = (0, react_1.useMemo)(() => STATUS_COLORS, []);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, mb: 3, flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: "gray.600", children: ["Open ", (0, jsx_runtime_1.jsx)("b", { children: "Settings \u2699 \u2192 Group" }), " to group by a column. Grouped \u2192 \u201CLoad more\u201D (accumulates pages); ungrouped \u2192 pager."] }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", onClick: () => {
+                            setPageSize((s) => (s === 20 ? 100 : 20));
+                            setPage(1);
+                            setReqToken((t) => t + 1);
+                        }, label: `Page size: ${pageSize}` }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", onClick: reload, label: "Reload" })] }), (0, jsx_runtime_1.jsx)(Table_1.default, { 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),
+                } })] }));
+};
+exports.TableExample = TableExample;
+exports.default = exports.TableExample;

package/dist/Pages/tag.d.ts

@@ -0,0 +1,3 @@
+declare const TagPage: () => import("react/jsx-runtime").JSX.Element;
+export default TagPage;
+//# sourceMappingURL=tag.d.ts.map

package/dist/Pages/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/Pages/tag.tsx"],"names":[],"mappings":"AA4BA,QAAA,MAAM,OAAO,+CAqDZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/Pages/tag.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Tag_1 = __importDefault(require("../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 }) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 8, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 600, color: "gray.500", mb: 3, children: title }), children] }));
+const TagPage = () => {
+    const onSelect = (msg) => () => console.log(msg);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Stack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(Section, { title: "Variants (md)", children: (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", gap: 3, flexWrap: "wrap", children: variants.map((variant) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: variant, variant: variant, onTagClick: onSelect(`tag ${variant}`) }, variant))) }) }), (0, jsx_runtime_1.jsx)(Section, { title: "Sizes (subtle)", children: (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", gap: 3, flexWrap: "wrap", children: sizes.map((size) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: `Size ${size}`, size: size, variant: "subtle" }, size))) }) }), (0, jsx_runtime_1.jsx)(Section, { title: "Color schemes", children: variants.map((variant) => ((0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", gap: 3, flexWrap: "wrap", mb: 3, children: colorSchemes.map((colorScheme) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: colorScheme, variant: variant, colorScheme: colorScheme }, `${variant}-${colorScheme}`))) }, variant))) }), (0, jsx_runtime_1.jsx)(Section, { title: "With removable icon", children: (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", gap: 3, flexWrap: "wrap", children: colorSchemes.slice(0, 5).map((colorScheme) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: colorScheme, variant: "subtle", colorScheme: colorScheme, icon: lucide_react_1.X, onIconClick: onSelect(`remove ${colorScheme}`), onTagClick: onSelect(`tag ${colorScheme}`) }, colorScheme))) }) })] }));
+};
+exports.default = TagPage;

package/dist/Pages/textArea.d.ts

@@ -0,0 +1,3 @@
+declare const TextAreaPage: () => import("react/jsx-runtime").JSX.Element;
+export default TextAreaPage;
+//# sourceMappingURL=textArea.d.ts.map

package/dist/Pages/textArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textArea.d.ts","sourceRoot":"","sources":["../../src/Pages/textArea.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY,+CAYjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Pages/textArea.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const InputTextArea_1 = __importDefault(require("../Components/InputTextArea/InputTextArea"));
+const TextAreaPage = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(InputTextArea_1.default, { label: "hello", helperText: "Hello", 
+            // errorMessage="Required"
+            // error={true}
+            rows: 5 }) }));
+};
+exports.default = TextAreaPage;

package/dist/Pages/tier1.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const Tier1Page: React.FC;
+export default Tier1Page;
+//# sourceMappingURL=tier1.d.ts.map

package/dist/Pages/tier1.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tier1.d.ts","sourceRoot":"","sources":["../../src/Pages/tier1.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AA6DlD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EA2HtB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/Pages/tier1.js

@@ -0,0 +1,86 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const EmptyState_1 = __importDefault(require("../Components/EmptyState/EmptyState"));
+const MoreItems_1 = __importDefault(require("../Components/MoreItems/MoreItems"));
+const ScrollToTop_1 = __importDefault(require("../Components/ScrollToTop/ScrollToTop"));
+const CopyButton_1 = __importDefault(require("../Components/CopyButton/CopyButton"));
+const FieldSelectModal_1 = __importDefault(require("../Components/FieldSelectModal/FieldSelectModal"));
+const PdfViewer_1 = __importDefault(require("../Components/PdfViewer/PdfViewer"));
+const LazyWrapper_1 = __importDefault(require("../Components/LazyWrapper/LazyWrapper"));
+const FilePreview_1 = __importStar(require("../Components/FilePreview/FilePreview"));
+const useCustomTheme_1 = require("../Theme/useCustomTheme");
+const Section = ({ title, children, }) => {
+    var _a, _b, _c, _d;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(react_2.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 SAMPLE_IMAGE = "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1766229935/main_sweets/1766229934288-Winter_Delghts.webp";
+const FIELDS = [
+    { field_name: "name", field_label: "Full Name" },
+    { field_name: "email", field_label: "Email Address" },
+    { field_name: "phone", field_label: "Phone Number" },
+    { field_name: "company", field_label: "Company" },
+    { field_name: "title", field_label: "Job Title" },
+    { field_name: "source", field_label: "Lead Source" },
+    { field_name: "stage", field_label: "Stage" },
+    { field_name: "owner", field_label: "Owner" },
+    { field_name: "created", field_label: "Created Date" },
+    { field_name: "updated", field_label: "Updated Date" },
+];
+const TAGS = [
+    { id: 1, label: "Enterprise", color: "#6366F1" },
+    { id: 2, label: "High Priority", color: "#EF4444" },
+    { id: 3, label: "Renewal", color: "#10B981" },
+    { id: 4, label: "Newsletter", color: "#F59E0B" },
+    { id: 5, label: "Partner", color: "#06B6D4" },
+];
+const Tier1Page = () => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const [previewOpen, setPreviewOpen] = (0, react_1.useState)(false);
+    const [fieldModalOpen, setFieldModalOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)(ScrollToTop_1.default, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "1000px", mx: "auto", py: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "lg", mb: 6, children: "Tier 1 Components" }), (0, jsx_runtime_1.jsx)(Section, { title: "EmptyState \u2014 variants, sizes & actions", children: (0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: { base: 1, md: 3 }, spacing: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { border: "1px dashed #E2E8F0", borderRadius: "12px", children: (0, jsx_runtime_1.jsx)(EmptyState_1.default, { size: "sm" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { border: "1px dashed #E2E8F0", borderRadius: "12px", children: (0, jsx_runtime_1.jsx)(EmptyState_1.default, { variant: "subtle", icon: lucide_react_1.FolderSearch, title: "No results", description: "Try adjusting your filters or search terms.", animate: true }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { border: "1px dashed #E2E8F0", borderRadius: "12px", children: (0, jsx_runtime_1.jsx)(EmptyState_1.default, { variant: "dashed", colorScheme: "success", icon: lucide_react_1.Users, title: "No team members yet", description: "Invite people to start collaborating.", action: (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", children: "Invite member" }) }) })] }) }), (0, jsx_runtime_1.jsx)(Section, { title: "MoreItems \u2014 overflow popover", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 4, children: [(0, jsx_runtime_1.jsx)(MoreItems_1.default, { triggerText: "Enterprise", items: TAGS, moreCount: TAGS.length - 1 }), (0, jsx_runtime_1.jsx)(MoreItems_1.default, { triggerText: "Owners", items: TAGS, hideDots: true, trigger: "click" })] }) }), (0, jsx_runtime_1.jsx)(Section, { title: "CopyButton \u2014 icon / button / menu-item", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 6, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(CopyButton_1.default, { value: "https://app.example.com/leads/123" }), (0, jsx_runtime_1.jsx)(CopyButton_1.default, { value: "hello@example.com", variant: "button", label: "Copy email" }), (0, jsx_runtime_1.jsx)(react_2.Box, { w: "220px", border: "1px solid #E2E8F0", borderRadius: "8px", p: 1, children: (0, jsx_runtime_1.jsx)(CopyButton_1.default, { value: "https://app.example.com", variant: "menu-item", label: "Copy URL" }) })] }) }), (0, jsx_runtime_1.jsxs)(Section, { title: "FilePreview \u2014 modal + thumbnail trigger", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 6, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", onClick: () => setPreviewOpen(true), children: "Open image preview" }), (0, jsx_runtime_1.jsx)(FilePreview_1.FilePreviewTrigger, { fileUrl: SAMPLE_IMAGE, fileName: "winter-delights.webp" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: "gray.500", children: "\u2190 hover the thumbnail" })] }), (0, jsx_runtime_1.jsx)(FilePreview_1.default, { isOpen: previewOpen, onClose: () => setPreviewOpen(false), fileUrl: SAMPLE_IMAGE, fileName: "winter-delights.webp" })] }), (0, jsx_runtime_1.jsxs)(Section, { title: "FieldSelectModal \u2014 searchable multi-select", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", onClick: () => setFieldModalOpen(true), children: "Choose fields to export" }), (0, jsx_runtime_1.jsx)(FieldSelectModal_1.default, { isOpen: fieldModalOpen, onClose: () => setFieldModalOpen(false), fields: FIELDS, title: "Select Fields to Export", confirmText: "Download", onConfirm: (selected) => {
+                                console.log("selected", selected);
+                                setFieldModalOpen(false);
+                            } })] }), (0, jsx_runtime_1.jsx)(Section, { title: "LazyWrapper \u2014 Suspense fallback", children: (0, jsx_runtime_1.jsx)(react_2.Box, { border: "1px solid #E2E8F0", borderRadius: "12px", children: (0, jsx_runtime_1.jsx)(LazyWrapper_1.default, { minHeight: "160px", children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(react_2.Box, { p: 6, children: "Lazy content loaded." }) }) }) }) }), (0, jsx_runtime_1.jsx)(Section, { title: "PdfViewer", children: (0, jsx_runtime_1.jsx)(PdfViewer_1.default, { pdfUrl: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", fileName: "dummy.pdf", height: "360px" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "600px" }), (0, jsx_runtime_1.jsx)(react_2.Text, { textAlign: "center", color: theme.colors.gray[500], fontSize: "sm", children: "Scroll up to see the ScrollToTop button \u2192" })] }) }));
+};
+exports.default = Tier1Page;

package/dist/Pages/timeline.d.ts

@@ -0,0 +1,3 @@
+declare const TimelinePage: () => import("react/jsx-runtime").JSX.Element;
+export default TimelinePage;
+//# sourceMappingURL=timeline.d.ts.map

package/dist/Pages/timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../src/Pages/timeline.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY,+CAyEjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/Pages/timeline.js

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Timeline_1 = __importDefault(require("../Components/Timeline/Timeline"));
+const TimelinePage = () => {
+    const timeline = [
+        {
+            logs_id: 1,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Accounts",
+            action_by: "pixelize technology",
+            created_at: 1723104998797,
+            changes: null,
+        },
+        {
+            logs_id: 2,
+            title: "Updated",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Accounts",
+            action_by: "pixelize technology",
+            created_at: 1723105040247,
+            changes: null,
+        },
+        {
+            logs_id: 10,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723202829694,
+            changes: null,
+        },
+        {
+            logs_id: 3,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723105099207,
+            changes: null,
+        },
+        {
+            logs_id: 7,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723105603033,
+            changes: null,
+        },
+        {
+            logs_id: 8,
+            title: "Delete",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723202829694,
+            changes: '{"shipping_code":{"original":null,"updated":"aaa"},"shipping_country":{"original":null,"updated":"QQdd"},"description":{"original":null,"updated":"ssAA"},"profile":{"updated":"profile updated"}}',
+        },
+    ];
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Timeline_1.default, { timelineEvents: timeline }) }));
+};
+exports.default = TimelinePage;

package/dist/Pages/tooltip.d.ts

@@ -0,0 +1,3 @@
+declare const TooltipPage: () => import("react/jsx-runtime").JSX.Element;
+export default TooltipPage;
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/Pages/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/Pages/tooltip.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,+CAgBhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Pages/tooltip.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ToolTip_1 = __importDefault(require("../Components/ToolTip/ToolTip"));
+const TooltipPage = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Hello", placement: "top", hasArrow: true, children: "hai" }) }));
+};
+exports.default = TooltipPage;

package/dist/Pages/toster.d.ts

@@ -0,0 +1,3 @@
+declare const TosterPage: () => import("react/jsx-runtime").JSX.Element;
+export default TosterPage;
+//# sourceMappingURL=toster.d.ts.map

package/dist/Pages/toster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toster.d.ts","sourceRoot":"","sources":["../../src/Pages/toster.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,UAAU,+CA+Ff,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/Pages/toster.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = __importDefault(require("../Components/Button/Button"));
+const Toaster_1 = require("../Components/Toaster/Toaster");
+const TosterPage = () => {
+    const { showToast } = (0, Toaster_1.useToaster)();
+    const handleOnclick = () => {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "success",
+        });
+        //setIsOpen(true);
+    };
+    const handleOnclick1 = () => {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "error",
+        });
+        //setIsOpen(true);
+    };
+    const handleOnclick2 = () => {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "warning",
+        });
+        //setIsOpen(true);
+    };
+    const handleOnclick3 = () => {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "info",
+        });
+        //setIsOpen(true);
+    };
+    const handleOnclick4 = () => {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "loading",
+        });
+        //setIsOpen(true);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: "Success", onClick: handleOnclick, variant: "solid", size: "md", width: 100 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Success", onClick: handleOnclick1, variant: "solid", size: "md", width: 100 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Success", onClick: handleOnclick2, variant: "solid", size: "md", width: 100 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Success", onClick: handleOnclick3, variant: "solid", size: "md", width: 100 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Success", onClick: handleOnclick4, variant: "solid", size: "md", width: 100 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), " ", (0, jsx_runtime_1.jsx)("br", {}), " ", (0, jsx_runtime_1.jsx)("br", {})] }));
+};
+exports.default = TosterPage;

package/dist/Pages/upgradeButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const UpgradeButtonPage: React.FC;
+export default UpgradeButtonPage;
+//# sourceMappingURL=upgradeButton.d.ts.map

package/dist/Pages/upgradeButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"upgradeButton.d.ts","sourceRoot":"","sources":["../../src/Pages/upgradeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA4B1B,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAqE9B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/Pages/upgradeButton.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const UpgradeButton_1 = __importDefault(require("../Components/UpgradeButton/UpgradeButton"));
+const useCustomTheme_1 = require("../Theme/useCustomTheme");
+const Section = ({ title, children, }) => {
+    var _a, _b, _c, _d;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 8, 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: [(0, jsx_runtime_1.jsx)(react_1.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 UpgradeButtonPage = () => ((0, jsx_runtime_1.jsxs)(react_1.Box, { maxW: "900px", mx: "auto", py: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { size: "lg", mb: 6, children: "Upgrade Button" }), (0, jsx_runtime_1.jsx)(Section, { title: "Plan states (label + subtitle, sparkle, hover sheen)", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 5, align: "center", wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Free Trial", mobileLabel: "Free Trial", subtitle: "12 days left", onClick: () => console.log("trial") }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Choose Your Plan", mobileLabel: "Choose", subtitle: "No active plan", onClick: () => console.log("choose") }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade Your Plan", mobileLabel: "Upgrade", subtitle: "Expires on 30 Jun", onClick: () => console.log("upgrade") })] }) }), (0, jsx_runtime_1.jsx)(Section, { title: "Sizes", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 5, align: "center", wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade", size: "sm" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade", size: "md" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade", size: "lg" })] }) }), (0, jsx_runtime_1.jsx)(Section, { title: "Theme variants (blend with the active theme)", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 5, align: "center", wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Brand", variant: "brand" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Primary", variant: "primary" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Secondary", variant: "secondary" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Success", variant: "success" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Warning", variant: "warning" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Danger", variant: "danger" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Info", variant: "info" })] }) }), (0, jsx_runtime_1.jsx)(Section, { title: "Custom gradients & icons (explicit gradient overrides variant)", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 5, align: "center", wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Go Pro", icon: lucide_react_1.Crown, gradient: { from: "#f7971e", to: "#ffd200" }, iconColor: "#7a4f01" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Boost", icon: lucide_react_1.Rocket, gradient: { from: "#11998e", to: "#38ef7d" }, iconColor: "#ffffff" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Premium", icon: lucide_react_1.Sparkles, gradient: { from: "#ee0979", to: "#ff6a00" } })] }) }), (0, jsx_runtime_1.jsx)(Section, { title: "Loading / disabled / no shimmer", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 5, align: "center", wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrading\u2026", isLoading: true }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Unavailable", isDisabled: true }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "No shimmer", shimmer: false })] }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: "gray.500", children: "Hover any enabled button to see the light sweep." })] }));
+exports.default = UpgradeButtonPage;

package/dist/Pages/userDetails.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const UserDetailsPage: React.FC;
+export default UserDetailsPage;
+//# sourceMappingURL=userDetails.d.ts.map

package/dist/Pages/userDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"userDetails.d.ts","sourceRoot":"","sources":["../../src/Pages/userDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AA0EjD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EA+B5B,CAAC;AAEF,eAAe,eAAe,CAAC"}