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

package/dist/Pages/table.js

@@ -1,182 +0,0 @@
-"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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,27 +0,0 @@
-"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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,14 +0,0 @@
-"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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,86 +0,0 @@
-"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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,73 +0,0 @@
-"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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,11 +0,0 @@
-"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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,53 +0,0 @@
-"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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,17 +0,0 @@
-"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

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

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

@@ -1 +0,0 @@
-{"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"}