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

package/dist/esm/Hooks/useIsTruncated.js

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+/**
+ * Detects whether an element's text is *actually* visually truncated — i.e. the
+ * ellipsis is active. Works for both single-line clamps
+ * (`overflow: hidden; white-space: nowrap; text-overflow: ellipsis`) and
+ * multi-line clamps (`-webkit-line-clamp` / Chakra `noOfLines`), by comparing
+ * the scroll size against the visible client size.
+ *
+ * Attach the returned `ref` to the element that clamps the text, then read
+ * `isTruncated` to decide whether a tooltip is worth showing. Re-measures on
+ * element resize (via `ResizeObserver`) and whenever `content` changes.
+ *
+ * @param content Pass the rendered text (or anything that changes with it) so
+ *   the measurement re-runs when the content changes — the clamp box can keep
+ *   the same size while the text length changes, which a `ResizeObserver` alone
+ *   would not catch.
+ * @param enabled Set to `false` to fully disable measurement — no layout reads,
+ *   no `ResizeObserver`, no state updates. Use it to keep the hook cheap when
+ *   the caller isn't in truncation mode (`isTruncated` stays `false`).
+ *
+ * Performance: measurement runs only on mount, on element **resize**, and when
+ * `content` changes — never on hover, scroll, or re-render. Each run does a
+ * single batched layout read (four properties) on one element. When `enabled`
+ * is `false` the hook does nothing at all.
+ *
+ * @example
+ * const { ref, isTruncated } = useIsTruncated(title);
+ * <ToolTip label={title} isDisabled={!isTruncated}>
+ *   <Text ref={ref} noOfLines={1}>{title}</Text>
+ * </ToolTip>
+ */
+export function useIsTruncated(content, enabled = true) {
+    const ref = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    const measure = useCallback(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        setIsTruncated(el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight);
+    }, []);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        measure();
+        const el = ref.current;
+        if (!el || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [measure, content, enabled]);
+    return { ref, isTruncated };
+}
+export default useIsTruncated;

package/dist/esm/Hooks/usePreferences.js

@@ -0,0 +1,74 @@
+import { useEffect, useState, useCallback, useRef } from "react";
+const constructUrl = ({ baseUrl, key, page, name, orgId }) => {
+    const params = new URLSearchParams();
+    if (orgId) {
+        params.append("orgId", orgId);
+    }
+    if (page) {
+        params.append("page", page);
+    }
+    if (key) {
+        params.append("key", key);
+    }
+    if (name) {
+        params.append("name", name);
+    }
+    const queryString = params.toString();
+    return `${baseUrl}${queryString ? `?${queryString}` : ""}`;
+};
+const useGetPreferences = ({ baseUrl = "", key = "", page = "", name = "", authToken = "", orgId = "", }) => {
+    const [preferences, setPreferences] = useState([]);
+    // Must start true (not false) whenever a fetch is about to happen: this is
+    // read by consumers (KanbanBoard's preferences-hydration effect) on their
+    // very first render, before this hook's own mount effect has run. Starting
+    // false let that first render look like "nothing loading, nothing saved",
+    // which permanently skipped hydration once the real data arrived.
+    const [loading, setLoading] = useState(() => Boolean(baseUrl));
+    useEffect(() => {
+        if (!baseUrl) {
+            return;
+        }
+        setLoading(true);
+        const url = constructUrl({ baseUrl, key, page, name, orgId });
+        fetch(url, {
+            headers: {
+                Authorization: authToken,
+            },
+        })
+            .then((response) => response.json())
+            .then((data) => setPreferences(data))
+            .catch((error) => console.error(error))
+            .finally(() => setLoading(false));
+        /* eslint-disable */
+    }, [baseUrl]);
+    return { preferences, loading };
+};
+const useSavePreferences = ({ baseUrl = "", key = "", page = "", name = "", authToken = "", orgId = "", }) => {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const savePreferences = useCallback((data = {}) => {
+        if (!baseUrl)
+            return;
+        setLoading(true);
+        fetch(`${baseUrl}?orgId=${orgId}`, {
+            method: "POST",
+            headers: {
+                Authorization: authToken,
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ key, page, name, json: data }),
+        })
+            .then((r) => r.json())
+            .then((d) => console.log(d))
+            .catch((e) => setError(e))
+            .finally(() => setLoading(false));
+    }, [baseUrl, orgId, authToken, key, page, name]);
+    const debounceRef = useRef(null);
+    const savePreferencesDebounced = useCallback((data = {}, wait = 500) => {
+        if (debounceRef.current)
+            window.clearTimeout(debounceRef.current);
+        debounceRef.current = window.setTimeout(() => savePreferences(data), wait);
+    }, [savePreferences]);
+    return { savePreferences, savePreferencesDebounced, loading, error };
+};
+export { useGetPreferences, useSavePreferences };

package/dist/esm/Hooks/useSidebarPrefs.js

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useState } from "react";
+const DEFAULT_KEY = "pixelize:sidebar-prefs:v1";
+const readPrefs = (key, defaults) => {
+    if (typeof window === "undefined" || !window.localStorage)
+        return defaults;
+    try {
+        const raw = window.localStorage.getItem(key);
+        if (!raw)
+            return defaults;
+        const parsed = JSON.parse(raw);
+        return {
+            mobileNav: typeof parsed.mobileNav === "boolean" ? parsed.mobileNav : defaults.mobileNav,
+            collapsed: typeof parsed.collapsed === "boolean" ? parsed.collapsed : defaults.collapsed,
+            mobileOpen: typeof parsed.mobileOpen === "boolean" ? parsed.mobileOpen : defaults.mobileOpen,
+        };
+    }
+    catch {
+        // Corrupt / unreadable value — fall back to defaults rather than throwing.
+        return defaults;
+    }
+};
+export const useSidebarPrefs = (options = {}) => {
+    var _a, _b, _c;
+    const { storageKey = DEFAULT_KEY, defaults } = options;
+    const resolvedDefaults = {
+        mobileNav: (_a = defaults === null || defaults === void 0 ? void 0 : defaults.mobileNav) !== null && _a !== void 0 ? _a : false,
+        collapsed: (_b = defaults === null || defaults === void 0 ? void 0 : defaults.collapsed) !== null && _b !== void 0 ? _b : false,
+        mobileOpen: (_c = defaults === null || defaults === void 0 ? void 0 : defaults.mobileOpen) !== null && _c !== void 0 ? _c : false,
+    };
+    // Lazy initializer so the synchronous read happens once, on the client.
+    const [prefs, setPrefs] = useState(() => readPrefs(storageKey, resolvedDefaults));
+    useEffect(() => {
+        if (typeof window === "undefined" || !window.localStorage)
+            return;
+        try {
+            window.localStorage.setItem(storageKey, JSON.stringify(prefs));
+        }
+        catch {
+            // Storage full / disabled (private mode) — preference simply won't persist.
+        }
+    }, [storageKey, prefs]);
+    const setMobileNav = useCallback((next) => setPrefs((p) => ({ ...p, mobileNav: next })), []);
+    const setCollapsed = useCallback((next) => setPrefs((p) => ({ ...p, collapsed: next })), []);
+    const setMobileOpen = useCallback((next) => setPrefs((p) => ({ ...p, mobileOpen: next })), []);
+    const toggleMobileNav = useCallback(() => setPrefs((p) => ({ ...p, mobileNav: !p.mobileNav })), []);
+    const toggleCollapsed = useCallback(() => setPrefs((p) => ({ ...p, collapsed: !p.collapsed })), []);
+    const toggleMobileOpen = useCallback(() => setPrefs((p) => ({ ...p, mobileOpen: !p.mobileOpen })), []);
+    // Composed handlers — map directly onto SideBar props so apps don't re-implement
+    // the navbar-mode/drawer behavior (the part that's easy to get wrong per app).
+    const onToggleMobileNav = useCallback(() => setPrefs((p) => {
+        const next = !p.mobileNav;
+        // Entering navbar mode opens the drawer; leaving docks it.
+        return { ...p, mobileNav: next, mobileOpen: next };
+    }), []);
+    const closeMobile = useCallback(() => setPrefs((p) => ({ ...p, mobileOpen: false })), []);
+    return {
+        ...prefs,
+        setMobileNav,
+        setCollapsed,
+        setMobileOpen,
+        toggleMobileNav,
+        toggleCollapsed,
+        toggleMobileOpen,
+        onToggleMobileNav,
+        closeMobile,
+    };
+};
+export default useSidebarPrefs;

package/dist/esm/Layout.js

@@ -0,0 +1,281 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, SimpleGrid, Text } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import Accordions from "./Pages/accordion";
+import SearchSelect from "./Pages/searchSelect";
+import SearchPage from "./Pages/search";
+import TimelinePage from "./Pages/timeline";
+import DatePick from "./Pages/datePick";
+import MultiSelectPage from "./Pages/multiSelect";
+import DrawerPage from "./Pages/drawer";
+import VerifyEmailPage from "./Pages/verifyEmail";
+import EditorPage from "./Pages/editor";
+import DropdownPage from "./Pages/dropdown";
+import NoteAreaPage from "./Pages/noteArea";
+import SwitchPage from "./Pages/switch";
+import PhotoViewer from "./Pages/photoViewer";
+import ChartPage from "./Pages/chart";
+import TooltipPage from "./Pages/tooltip";
+import CardPage from "./Pages/card";
+import PinInputPage from "./Pages/pinInputs";
+import NumberInputPage from "./Pages/numberInput";
+import ProgressbarPage from "./Pages/progressbar";
+import ButtonPage from "./Pages/button";
+import RadioButtonPage from "./Pages/radioButton";
+import SkeletonPage from "./Pages/skeleton";
+import TextAreaPage from "./Pages/textArea";
+import SelectPage from "./Pages/select";
+import ModalPage from "./Pages/modal";
+import CheckboxPage from "./Pages/checkbox";
+import TosterPage from "./Pages/toster";
+import InputPage from "./Pages/input";
+import AlertdialogBox from "./Pages/alertdialog";
+import ProductCardPage from "./Pages/productCaard";
+import { TableExample } from "./Pages/table";
+import TInput from "./Pages/TInput";
+import KanbanBoardExample from "./Pages/kanbanboard";
+import TagPage from "./Pages/tag";
+import Header from "./Components/Header/Header";
+import { FileUploader } from "./Pages/fileUpload";
+// import SelectSelect from "./Pages/selectSearch";
+import Slider from "./Components/Slider/Slider";
+import ContactForm from "./Pages/contactForm";
+import ProductDetailCard from "./Pages/productDetailCard";
+import NotificationPage from "./Pages/notification";
+import FeedbackForm from "./Components/FeedbackForm/FeedbackForm";
+import ProductFilterPage from "./Pages/productFilter";
+import Tier1Page from "./Pages/tier1";
+import StageProgressPage from "./Pages/stageProgress";
+import OrgSwitcherPage from "./Pages/orgSwitcher";
+import UpgradeButtonPage from "./Pages/upgradeButton";
+import UserDetailsPage from "./Pages/userDetails";
+import RolesPermissionPage from "./Pages/rolesPermission";
+import CustomModulesTablePage from "./Pages/customModulesTable";
+import SignInActivityTablePage from "./Pages/signInActivityTable";
+import OrganizationDetailsPage from "./Pages/organizationDetails";
+// All component demo routes — sorted alphabetically by label for the nav grid.
+const componentLinks = [
+    { label: "Accordion", path: "/accordion" },
+    { label: "Alert Dialog", path: "/alertdialog" },
+    { label: "Button", path: "/button" },
+    { label: "Card", path: "/card" },
+    { label: "Charts", path: "/charts" },
+    { label: "Checkbox", path: "/checkbox" },
+    { label: "Contact Form", path: "/contactForm" },
+    { label: "Datepicker", path: "/datepicker" },
+    { label: "Drawer", path: "/drawer" },
+    { label: "Dropdown", path: "/dropdown" },
+    { label: "Editor", path: "/editor" },
+    { label: "Feedback Form", path: "/feedbackForm" },
+    { label: "File Upload", path: "/upload" },
+    { label: "Header", path: "/header" },
+    { label: "Input", path: "/InputPage" },
+    { label: "Kanban", path: "/kanban" },
+    { label: "Modal", path: "/modal" },
+    { label: "Multiselect", path: "/multiselect" },
+    { label: "Note Area", path: "/notearea" },
+    { label: "Notification", path: "/notification" },
+    { label: "Number Input", path: "/numberinput" },
+    { label: "Photo Viewer", path: "/photoViewer" },
+    { label: "Pin Input", path: "/pininput" },
+    { label: "Product Card", path: "/productCard" },
+    { label: "Product Detail Card", path: "/productDetails" },
+    { label: "Product Filter", path: "/productFilter" },
+    { label: "Progressbar", path: "/progressbar" },
+    { label: "Radio Button", path: "/radio" },
+    { label: "Search", path: "/search" },
+    { label: "Search Select", path: "/searchSelect" },
+    { label: "Select", path: "/select" },
+    { label: "Skeleton", path: "/skeleton" },
+    { label: "Slider", path: "/slider" },
+    { label: "Switch", path: "/switch" },
+    { label: "Table", path: "/table" },
+    { label: "Tag", path: "/tag" },
+    { label: "Tier 1 (New)", path: "/tier1" },
+    { label: "Stage Progress", path: "/stageProgress" },
+    { label: "Org Switcher", path: "/orgSwitcher" },
+    { label: "Upgrade Button", path: "/upgradeButton" },
+    { label: "User Details", path: "/userDetails" },
+    { label: "Roles & Permissions", path: "/rolesPermission" },
+    { label: "Custom Modules", path: "/customModulesTable" },
+    { label: "Sign-in Activity", path: "/signInActivityTable" },
+    { label: "Organization Details", path: "/organizationDetails" },
+    { label: "Text Area", path: "/textarea" },
+    { label: "Timeline", path: "/timeline" },
+    { label: "Toaster", path: "/toster" },
+    { label: "Tooltip", path: "/tooltip" },
+    { label: "Verify Email", path: "/verifyEmail" },
+].sort((a, b) => a.label.localeCompare(b.label));
+const Layout = () => {
+    const [currentPath, setCurrentPath] = useState(window.location.pathname);
+    const navigate = (path) => {
+        window.history.pushState({}, "", path);
+        setCurrentPath(path);
+    };
+    useEffect(() => {
+        const handlePopState = () => {
+            setCurrentPath(window.location.pathname);
+        };
+        window.addEventListener("popstate", handlePopState);
+        return () => {
+            window.removeEventListener("popstate", handlePopState);
+        };
+    }, []);
+    const renderPage = () => {
+        switch (currentPath) {
+            case "/alertdialog":
+                return _jsx(AlertdialogBox, {});
+            case "/accordion":
+                return _jsx(Accordions, {});
+            case "/searchSelect":
+                return _jsx(SearchSelect, {});
+            case "/timeline":
+                return _jsx(TimelinePage, {});
+            case "/search":
+                return _jsx(SearchPage, {});
+            case "/datepicker":
+                return _jsx(DatePick, {});
+            case "/multiselect":
+                return _jsx(MultiSelectPage, {});
+            case "/drawer":
+                return _jsx(DrawerPage, {});
+            case "/verifyEmail":
+                return _jsx(VerifyEmailPage, {});
+            case "/editor":
+                return _jsx(EditorPage, {});
+            case "/dropdown":
+                return _jsx(DropdownPage, {});
+            case "/notearea":
+                return _jsx(NoteAreaPage, {});
+            case "/notification":
+                return _jsx(NotificationPage, {});
+            case "/switch":
+                return _jsx(SwitchPage, {});
+            case "/photoViewer":
+                return _jsx(PhotoViewer, {});
+            case "/charts":
+                return _jsx(ChartPage, {});
+            case "/tooltip":
+                return _jsx(TooltipPage, {});
+            case "/card":
+                return _jsx(CardPage, {});
+            case "/pininput":
+                return _jsx(PinInputPage, {});
+            case "/numberinput":
+                return _jsx(NumberInputPage, {});
+            case "/progressbar":
+                return _jsx(ProgressbarPage, {});
+            case "/button":
+                return _jsx(ButtonPage, {});
+            case "/radio":
+                return _jsx(RadioButtonPage, {});
+            case "/skeleton":
+                return _jsx(SkeletonPage, {});
+            case "/textarea":
+                return _jsx(TextAreaPage, {});
+            case "/select":
+                return _jsx(SelectPage, {});
+            case "/modal":
+                return _jsx(ModalPage, {});
+            case "/checkbox":
+                return _jsx(CheckboxPage, {});
+            case "/toster":
+                return _jsx(TosterPage, {});
+            case "/InputPage":
+                return _jsx(InputPage, {});
+            case "/table":
+                return _jsx(TableExample, {});
+            case "/tinput":
+                return _jsx(TInput, {});
+            case "/kanban":
+                return _jsx(KanbanBoardExample, {});
+            case "/contactForm":
+                return _jsx(ContactForm, {});
+            case "/header":
+                return (_jsx(Header, { logo: _jsx(Box, { fontSize: "xl", fontWeight: "bold", children: "MyApp" }), 
+                    // colorScheme="gray"
+                    active: "/", menuItems: [
+                        { label: "Home", href: "/" },
+                        {
+                            label: "Products",
+                            // badge: {
+                            //   label: "new",
+                            //   colorScheme: "red",
+                            // },
+                            children: [
+                                {
+                                    label: "AI Tools",
+                                    href: "/products/ai",
+                                    badge: {
+                                        label: "new",
+                                        colorScheme: "blackAlpha",
+                                    },
+                                },
+                                {
+                                    label: "APIs",
+                                    href: "/products/apis",
+                                    badge: { label: "coming soon", colorScheme: "green" },
+                                },
+                            ],
+                        },
+                        {
+                            label: "Docs",
+                            href: "/docs",
+                            badge: { label: "updated", colorScheme: "yellow" },
+                        },
+                    ], rightSlot: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", colorScheme: "purple", children: "Login" }), _jsx(Button, { colorScheme: "purple", children: "Sign Up" })] }) }));
+            case "/upload":
+                return _jsx(FileUploader, {});
+            case "/slider":
+                return (_jsx(Slider, { images: [
+                        {
+                            "id": 5,
+                            "previewUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1766229935/main_sweets/1766229934288-Winter_Delghts.webp",
+                            "order": 1
+                        },
+                        {
+                            "id": 6,
+                            "previewUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1766229935/main_sweets/1766229935008-Shree_M_-_Desktop_Banner_1.jpg",
+                            "order": 2
+                        },
+                        {
+                            "id": 7,
+                            "previewUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1766649309/main_sweets/1766649308634-muthukavitha_laddu_banner_unde.jpg",
+                            "order": 3
+                        }
+                    ] }));
+            case "/productCard":
+                return _jsx(ProductCardPage, {});
+            case "/productDetails":
+                return _jsx(ProductDetailCard, {});
+            case "/productFilter":
+                return _jsx(ProductFilterPage, {});
+            case "/tier1":
+                return _jsx(Tier1Page, {});
+            case "/stageProgress":
+                return _jsx(StageProgressPage, {});
+            case "/orgSwitcher":
+                return _jsx(OrgSwitcherPage, {});
+            case "/upgradeButton":
+                return _jsx(UpgradeButtonPage, {});
+            case "/userDetails":
+                return _jsx(UserDetailsPage, {});
+            case "/rolesPermission":
+                return _jsx(RolesPermissionPage, {});
+            case "/customModulesTable":
+                return _jsx(CustomModulesTablePage, {});
+            case "/signInActivityTable":
+                return _jsx(SignInActivityTablePage, {});
+            case "/organizationDetails":
+                return _jsx(OrganizationDetailsPage, {});
+            case "/feedbackForm":
+                return _jsx(FeedbackForm, {});
+            case "/tag":
+                return _jsx(TagPage, {});
+            case "/":
+            default:
+        }
+    };
+    return (_jsxs("div", { children: [_jsxs(Box, { as: "nav", mb: 8, children: [_jsxs(Text, { fontSize: "sm", fontWeight: 600, color: "gray.500", mb: 3, children: ["Components (", componentLinks.length, ")"] }), _jsxs(SimpleGrid, { minChildWidth: "8rem", spacing: 2, children: [_jsx(Button, { onClick: () => navigate("/"), variant: currentPath === "/" ? "solid" : "outline", size: "xs", w: "100%", children: "Home" }), componentLinks.map((link) => (_jsx(Button, { onClick: () => navigate(link.path), variant: currentPath === link.path ? "solid" : "outline", size: "xs", w: "100%", children: link.label }, link.path)))] })] }), renderPage()] }));
+};
+export default Layout;

package/dist/esm/Pages/TInput.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Input from '../Components/Input/Input/Input';
+import Buttons from '../Components/Buttons/Buttons';
+import PinInputs from '../Components/PinInputs/PinInputs';
+const TInput = () => {
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [errors] = useState({
+        email: "ddd",
+        password: "",
+    });
+    return (_jsxs("div", { children: [_jsx(Input, { label: "Email Address", type: "email", value: email, onChange: setEmail, error: errors.email, placeholder: "Email Address", inputBoxClassName: "w-1/6" }), _jsx(Input, { label: "Password", type: "password", value: password, onChange: setPassword, error: errors.password, placeholder: "Password", inputBoxClassName: "w-1/6" }), _jsx(PinInputs, { length: 6, error: "", onComplete: (value) => { console.log(value, "value"); } }), _jsx(Buttons, { label: "Sign In", onClick: () => { } })] }));
+};
+export default TInput;

package/dist/esm/Pages/accordion.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Accordion from '../Components/Accordion/Accordion';
+import { Box, Flex, Text } from '@chakra-ui/react';
+const Accordions = () => {
+    return (_jsx(Box, { maxW: "40rem", mx: "auto", py: 6, px: 4, children: _jsx(Accordion, { allowToggle: true, items: [
+                {
+                    header: "Section 1 title",
+                    content: (_jsxs("div", { children: [_jsx(Text, { children: "This is text inside Section 1." }), _jsx(Box, { bg: "gray.100", borderRadius: "md", p: 4, mt: 2, children: "This is a box with more content inside Section 1." }), _jsxs(Flex, { mt: 2, gap: 2, children: [_jsx(Box, { flex: "1", bg: "blue.100", borderRadius: "md", p: 4, children: "Box 1" }), _jsx(Box, { flex: "1", bg: "green.100", borderRadius: "md", p: 4, children: "Box 2" })] })] })),
+                },
+                {
+                    header: "Section 2 title",
+                    content: (_jsx(Text, { children: "This is text inside Section 2. The chevron rotates and the header tints when the section is expanded." })),
+                },
+            ] }) }));
+};
+export default Accordions;

package/dist/esm/Pages/alertdialog.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import AlertDialog from "../Components/AlertDialog/AlertDialog";
+import { Button as ChakraButton } from "@chakra-ui/react";
+const AlertdialogBox = () => {
+    const [alertActive, setAlertActive] = useState(false);
+    const leastDestructiveRef = React.useRef();
+    const handleAlert = () => {
+        setAlertActive(!alertActive);
+    };
+    return (_jsxs("div", { children: [_jsx(ChakraButton, { onClick: () => {
+                    setAlertActive(true);
+                }, children: "AlertDialog" }), _jsx(AlertDialog, { isOpen: alertActive, onClose: handleAlert, leastDestructiveRef: leastDestructiveRef, title: "hello", content: _jsx("div", { style: { color: "red", height: "200px" }, children: "hellobody" }), onConfirm: () => handleAlert(), size: "500" })] }));
+};
+export default AlertdialogBox;

package/dist/esm/Pages/button.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ButtonGroupIcon from "../Components/ButtonGroupIcon/ButtonGroupIcon";
+import Button from "../Components/Button/Button";
+import { House } from "lucide-react";
+const ButtonPage = () => {
+    return (_jsxs("div", { children: [_jsx(ButtonGroupIcon
+            // isLoading={true}
+            // leftIconLoading={true}
+            // RightIconLoading={true}
+            , { 
+                // isLoading={true}
+                // leftIconLoading={true}
+                // RightIconLoading={true}
+                buttonText: "ellipsis ellipsis ellipsis", rightIcon: _jsx(House, {}), leftIcon: _jsx(House, {}), size: "md", 
+                // variant="gradient"
+                color: "primary", rightIconDropdown: true, dropdownOptions: [
+                    {
+                        label: "123",
+                        id: "1",
+                        image: _jsx(House, {}),
+                    },
+                    { label: "456", id: "2" },
+                ], onDropdownOptionClick: (e, option) => {
+                    console.log(e, option);
+                } }), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(Button, { label: "Button", onClick: () => { }, variant: "solid", size: "xs" }), _jsx("br", {}), _jsx("br", {}), _jsxs("div", { style: { display: "flex", gap: "1rem", alignItems: "center", flexWrap: "wrap" }, children: [_jsx(Button, { label: "Gradient", onClick: () => { }, variant: "gradient", size: "md" }), _jsx(Button, { label: "Gradient XL", onClick: () => { }, variant: "gradient", size: "xl", leftIcon: _jsx(House, {}) }), _jsx(Button, { label: "Loading", onClick: () => { }, variant: "gradient", isLoading: true }), _jsx(Button, { label: "Disabled", onClick: () => { }, variant: "gradient", isDisabled: true }), _jsx(Button, { label: "Ghost", onClick: () => { }, variant: "ghost" }), _jsx(Button, { label: "Outline XL", onClick: () => { }, variant: "outline", size: "xl" })] })] }));
+};
+export default ButtonPage;

package/dist/esm/Pages/card.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Card from "../Components/Card/Card";
+import ProfileCard, { ProfileCardBody, ProfileCardFooter, ProfileCardHeader, } from "../Components/ProfileCard/ProfileCard";
+import { SimpleGrid, Text } from "@chakra-ui/react";
+import Button from "../Components/Button/Button";
+import { Star, Zap } from "lucide-react";
+import PricingCard from "../Components/Card/PaymentCard/PaymentCard";
+const plans = [
+    {
+        plan_id: 1,
+        name: "Free",
+        description: "Basic features for small teams",
+        monthlyPrice: 0,
+        yearlyPrice: 0,
+        billing: "per month",
+        tax: "+ GST",
+        features: ["User Management (1 User)", "Single Pipeline", "500 Records", "Contacts, Products & Activities Management", "Automations (3)"],
+        icon: _jsx(Star, { size: 20 }),
+        buttonText: "Choose Starter",
+        buttonVariant: "solid",
+        priceDescription: "Ideal for individuals and small teams starting out.",
+    },
+    {
+        plan_id: 2,
+        name: "Pro",
+        description: "Perfect for small teams and growing businesses.",
+        monthlyPrice: 499,
+        yearlyPrice: 399,
+        billing: "per month",
+        tax: "+ GST",
+        features: ["User Management (5 User)", "Everything in Free Edition +", "Team Pipelines (3)", "50,000 Records", "Email & WhatsApp Business Integration", "Automations (30)", "Mass emails with email insights", "10 custom fields/module"],
+        icon: _jsx(Zap, { size: 20 }),
+        buttonText: "Choose Pro",
+        buttonVariant: "outline",
+        popular: true,
+        priceDescription: "Ideal for individuals and small teams starting out.",
+    },
+    // {
+    //   plan_id: 3,
+    //   name: "Enterprise",
+    //   description: "Unlimited access for large organizations",
+    //   monthlyPrice: 1499,
+    //   yearlyPrice: 1399,
+    //   billing: "per month",
+    //   tax: "+ GST",
+    //   features: ["User Management (Unlimited Users)", "Everything in Premier Edition +", "Team Pipelines (15)","1 Million Records","Advanced Automation Rules (100)","File Cabinet pre-installed with 5 GB storage","50 custom fields/module","1000 mass mails/day","Highest limits for features"],
+    //   icon: <Gem size={20} />,
+    //   buttonText: "Contact Sales",
+    //   buttonVariant: "solid" as const,
+    // },
+];
+const CardPage = () => {
+    const activePlanId = 1; // Example: current active plan
+    const nextUpgradeId = 2; // Example: suggest upgrade
+    const handleSelect = (planId) => {
+        console.log("Selected plan:", planId);
+    };
+    const handleHover = (planId, type, state) => {
+        console.log(`${type} hover ${state ? "enter" : "leave"} on plan`, planId);
+    };
+    // console.log(activePlanId,"activePlanId",nextUpgradeId,"nextUpgradeId");
+    return (_jsxs("div", { children: [_jsx(Card, { children: _jsx("div", { children: "hello" }) }), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsxs(ProfileCard, { children: [_jsx(ProfileCardHeader, { children: "Customer dashboard" }), _jsx(ProfileCardBody, { children: _jsx(Text, { children: "View a summary of all your customers over the last month." }) }), _jsx(ProfileCardFooter, { children: _jsx(Button, { colorScheme: "primary", children: "View here" }) })] }), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 6, children: plans.map((plan) => (_jsx(PricingCard, { plan: plan, billingCycle: "monthly", isActive: plan.plan_id === activePlanId, isNextUpgrade: plan.plan_id === nextUpgradeId, onSelect: handleSelect, onHover: handleHover, buttonLoading: 2 }, plan.plan_id))) })] }));
+};
+export default CardPage;

package/dist/esm/Pages/chart.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ApexBarChart from "../Components/Apexcharts/ApexBarChart/ApexBarChart";
+import ApexPieChart from "../Components/Apexcharts/ApexPieChart/ApexPieChart";
+import ApexLineChart from "../Components/Apexcharts/ApexLineChart/ApexLineChart";
+import ApexPolarChart from "../Components/Apexcharts/ApexPolarCharts/ApexPolarCharts";
+/** Demo page: charts use theme-derived defaults unless a prop overrides styling. */
+const ChartPage = () => {
+    const data = Array.from({ length: 10 }, () => Math.floor(Math.random() * 100));
+    const categories = data.map((_, index) => `Category ${index + 1}`);
+    const data1 = Array.from({ length: 10 }, () => Math.floor(Math.random() * 100));
+    const categories1 = data.map((_, index) => `Category ${index + 1}`);
+    return (_jsxs("div", { children: [_jsx(ApexBarChart, { data: data, labels: categories, title: "Bar Chart", titlePosition: "left" }), _jsx(ApexPieChart, { data: data1, labels: categories1, title: "Pie Chart", titlePosition: "left", variant: "pie" }), _jsx(ApexPieChart, { data: data1, labels: categories1, title: "donut Chart", titlePosition: "left", variant: "donut", legendPosition: "bottom", legendStyle: {
+                    horizontalGap: 5,
+                    verticalGap: 3,
+                    markerSize: 10,
+                    markerOffsetX: -5,
+                    markerOffsetY: 0,
+                } }), _jsx(ApexPieChart, { data: data1, labels: categories1, title: "update-donut", variant: "update-donut" }), _jsx(ApexPieChart, { data: data1, labels: categories1, title: "Monochrome Pie", variant: "monochrome-pie" }), _jsx(ApexPieChart, { data: data1, labels: categories1, title: "Gradient Donut", variant: "gradient-donut" }), _jsx(ApexPieChart, { data: data1, labels: categories1, title: "Semi Donut", variant: "semi-donut", titlePosition: "left" }), _jsx(ApexPieChart, { data: data1, labels: categories1, title: "donut-with-pattern", variant: "donut-with-pattern", titlePosition: "left" }), _jsx(ApexPieChart, { data: data1, labels: categories1, title: "pie-with-image", variant: "pie-with-image", titlePosition: "left", width: 300 }), _jsx(ApexLineChart, { variant: "basic", data: [10, 20, 30, 40, 50], labels: ["Jan", "Feb", "Mar", "Apr", "May"], series: ["basic 1", "basic 2", "basic 3", "basic 4", "basic 5"], title: "Basic Line Chart ghghjhgjkgkj kjhkjhkjhkjhkj", width: "25%" }), _jsx(ApexLineChart, { variant: "realtime", data: [15, 25, 35], title: "Realtime Line Chart", height: 300, width: 600 }), _jsx(ApexPolarChart, { data: [21, 23, 19, 14, 6], labels: ["Apple", "Mango", "Orange", "Watermelon", "Banana"], variant: "basic" }), _jsx(ApexPolarChart, { data: [21, 23, 19, 14, 6], labels: ["Apple", "Mango", "Orange", "Watermelon", "Banana"], variant: "monochrome" })] }));
+};
+export default ChartPage;