pixelize-design-library 2.2.198 → 2.3.1-beta.1

package/dist/Components/Table/settings/TableSettings.js

@@ -0,0 +1,141 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 });
+var react_1 = require("@chakra-ui/react");
+var react_2 = __importStar(require("react"));
+var framer_motion_1 = require("framer-motion");
+var ManageColumns_1 = __importDefault(require("./ManageColumns"));
+var Button_1 = __importDefault(require("../../Button/Button"));
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var lucide_react_1 = require("lucide-react");
+var MotionModalContent = (0, framer_motion_1.motion)(react_1.ModalContent);
+var DENSITY_OPTIONS = [
+    { value: "compact", label: "Compact", desc: "Tight rows — fit more data on screen" },
+    { value: "normal", label: "Normal", desc: "Balanced default spacing" },
+    { value: "comfortable", label: "Comfortable", desc: "Roomy rows, easier scanning" },
+];
+var TableSettings = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var columns = _a.columns, onSave = _a.onSave, _p = _a.density, density = _p === void 0 ? "normal" : _p, onDensityChange = _a.onDensityChange;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var childInputMethodsRef = (0, react_2.useRef)({});
+    var _q = (0, react_2.useState)(false), settingsOpen = _q[0], setSettingsOpen = _q[1];
+    var _r = (0, react_2.useState)(0), selectedIndex = _r[0], setSelectedIndex = _r[1];
+    var _s = (0, react_2.useState)(columns), items = _s[0], setItems = _s[1];
+    var handleSave = (0, react_2.useCallback)(function () {
+        onSave(items);
+        setSettingsOpen(false);
+    }, [onSave, items]);
+    var handleOpen = (0, react_2.useCallback)(function () {
+        setItems(columns);
+        setSettingsOpen(true);
+    }, [columns]);
+    var tabStyle = {
+        fontSize: "13px",
+        fontWeight: 500,
+        px: 4,
+        py: 2,
+        borderBottom: "2px solid transparent",
+        color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[400],
+        _selected: {
+            borderBottom: "2px solid ".concat(theme.colors.primary[600]),
+            color: theme.colors.primary[600],
+            fontWeight: 600,
+        },
+        _hover: { color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e[600] },
+    };
+    return (react_2.default.createElement(react_1.Box, null,
+        react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", _hover: { transform: "scale(1.1)" } },
+            react_2.default.createElement(lucide_react_1.Settings, { onClick: handleOpen, size: "1.25rem", color: (_g = (_f = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _f === void 0 ? void 0 : _f.text) === null || _g === void 0 ? void 0 : _g[500] })),
+        react_2.default.createElement(react_1.Modal, { isOpen: settingsOpen, onClose: function () { return setSettingsOpen(false); }, size: "md" },
+            react_2.default.createElement(react_1.ModalOverlay, null),
+            react_2.default.createElement(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "0", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.background) === null || _j === void 0 ? void 0 : _j[50], overflow: "hidden" },
+                react_2.default.createElement(react_1.ModalCloseButton, { top: 3, right: 3, zIndex: 2 }),
+                react_2.default.createElement(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0 },
+                    react_2.default.createElement(react_1.Box, { pt: 4, px: 4 },
+                        react_2.default.createElement(react_1.Text, { fontWeight: 600, fontSize: "md", mb: 3 }, "Table Settings"),
+                        react_2.default.createElement(react_1.TabList, { gap: 0, borderBottom: "1px solid", borderColor: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.border) === null || _l === void 0 ? void 0 : _l[200] },
+                            react_2.default.createElement(react_1.Tab, __assign({}, tabStyle), "Density"),
+                            react_2.default.createElement(react_1.Tab, __assign({}, tabStyle), "Manage Columns"))),
+                    react_2.default.createElement(react_1.ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: {
+                            "&::-webkit-scrollbar": { width: "3px", height: "3px" },
+                            "&::-webkit-scrollbar-track": { background: theme.colors.gray[100], borderRadius: "2px" },
+                            "&::-webkit-scrollbar-thumb": { background: theme.colors.gray[400], borderRadius: "2px" },
+                            "&::-webkit-scrollbar-thumb:hover": { background: theme.colors.gray[500] },
+                            scrollbarWidth: "thin",
+                            scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
+                        } },
+                        react_2.default.createElement(react_1.TabPanels, null,
+                            react_2.default.createElement(react_1.TabPanel, { px: 0, py: 1 },
+                                react_2.default.createElement(react_1.Flex, { direction: "column", gap: 2 }, DENSITY_OPTIONS.map(function (opt) {
+                                    var _a;
+                                    var selected = density === opt.value;
+                                    return (react_2.default.createElement(react_1.Flex, { as: "button", type: "button", key: opt.value, align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "0.5rem", border: "1px solid", borderColor: selected ? theme.colors.primary[500] : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300], bg: selected ? theme.colors.primary.opacity[8] : "transparent", transition: "all 0.15s", _hover: { borderColor: theme.colors.primary[400] }, onClick: function () { return onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value); } },
+                                        react_2.default.createElement(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.primary[500] : theme.colors.gray[400], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }, selected && react_2.default.createElement(lucide_react_1.Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 })),
+                                        react_2.default.createElement(react_1.Box, { textAlign: "left" },
+                                            react_2.default.createElement(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700] }, opt.label),
+                                            react_2.default.createElement(react_1.Text, { fontSize: "11px", color: theme.colors.gray[500] }, opt.desc))));
+                                }))),
+                            react_2.default.createElement(react_1.TabPanel, { px: 0, py: 0 },
+                                react_2.default.createElement(react_1.Box, { sx: {
+                                        "& [role='listitem'], & > div > div": {
+                                            py: "4px !important",
+                                            minHeight: "unset !important",
+                                        },
+                                        "& label": { fontSize: "13px !important" },
+                                        "& .chakra-checkbox": { gap: "8px !important" },
+                                        "& .chakra-checkbox__label": { fontSize: "13px !important" },
+                                        "& [draggable]": { py: "5px !important" },
+                                    } },
+                                    react_2.default.createElement(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef })))))),
+                react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.border) === null || _o === void 0 ? void 0 : _o[200], pt: 3, pb: 3, px: 4 },
+                    react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, variant: "outline", colorScheme: "red" }),
+                    react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: handleSave }))))));
+};
+exports.default = TableSettings;

package/dist/Layout.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Layout: () => React.JSX.Element;
+export default Layout;

package/dist/Layout.js

@@ -0,0 +1,292 @@
+"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 });
+var react_1 = require("@chakra-ui/react");
+var react_2 = __importStar(require("react"));
+var accordion_1 = __importDefault(require("./Pages/accordion"));
+var searchSelect_1 = __importDefault(require("./Pages/searchSelect"));
+var search_1 = __importDefault(require("./Pages/search"));
+var timeline_1 = __importDefault(require("./Pages/timeline"));
+var datePick_1 = __importDefault(require("./Pages/datePick"));
+var multiSelect_1 = __importDefault(require("./Pages/multiSelect"));
+var drawer_1 = __importDefault(require("./Pages/drawer"));
+var verifyEmail_1 = __importDefault(require("./Pages/verifyEmail"));
+var editor_1 = __importDefault(require("./Pages/editor"));
+var dropdown_1 = __importDefault(require("./Pages/dropdown"));
+var noteArea_1 = __importDefault(require("./Pages/noteArea"));
+var switch_1 = __importDefault(require("./Pages/switch"));
+var photoViewer_1 = __importDefault(require("./Pages/photoViewer"));
+var chart_1 = __importDefault(require("./Pages/chart"));
+var tooltip_1 = __importDefault(require("./Pages/tooltip"));
+var card_1 = __importDefault(require("./Pages/card"));
+var pinInputs_1 = __importDefault(require("./Pages/pinInputs"));
+var numberInput_1 = __importDefault(require("./Pages/numberInput"));
+var progressbar_1 = __importDefault(require("./Pages/progressbar"));
+var button_1 = __importDefault(require("./Pages/button"));
+var radioButton_1 = __importDefault(require("./Pages/radioButton"));
+var skeleton_1 = __importDefault(require("./Pages/skeleton"));
+var textArea_1 = __importDefault(require("./Pages/textArea"));
+var select_1 = __importDefault(require("./Pages/select"));
+var modal_1 = __importDefault(require("./Pages/modal"));
+var checkbox_1 = __importDefault(require("./Pages/checkbox"));
+var toster_1 = __importDefault(require("./Pages/toster"));
+var input_1 = __importDefault(require("./Pages/input"));
+var alertdialog_1 = __importDefault(require("./Pages/alertdialog"));
+var productCaard_1 = __importDefault(require("./Pages/productCaard"));
+var table_1 = require("./Pages/table");
+var TInput_1 = __importDefault(require("./Pages/TInput"));
+var kanbanboard_1 = __importDefault(require("./Pages/kanbanboard"));
+var Tag_1 = __importDefault(require("./Components/Tag/Tag"));
+var lucide_react_1 = require("lucide-react");
+var Header_1 = __importDefault(require("./Components/Header/Header"));
+var fileUpload_1 = require("./Pages/fileUpload");
+// import SelectSelect from "./Pages/selectSearch";
+var Slider_1 = __importDefault(require("./Components/Slider/Slider"));
+var contactForm_1 = __importDefault(require("./Pages/contactForm"));
+var productDetailCard_1 = __importDefault(require("./Pages/productDetailCard"));
+var notification_1 = __importDefault(require("./Pages/notification"));
+var FeedbackForm_1 = __importDefault(require("./Components/FeedbackForm/FeedbackForm"));
+var productFilter_1 = __importDefault(require("./Pages/productFilter"));
+var Layout = function () {
+    var _a = (0, react_2.useState)(window.location.pathname), currentPath = _a[0], setCurrentPath = _a[1];
+    var navigate = function (path) {
+        window.history.pushState({}, "", path);
+        setCurrentPath(path);
+    };
+    (0, react_2.useEffect)(function () {
+        var handlePopState = function () {
+            setCurrentPath(window.location.pathname);
+        };
+        window.addEventListener("popstate", handlePopState);
+        return function () {
+            window.removeEventListener("popstate", handlePopState);
+        };
+    }, []);
+    var renderPage = function () {
+        switch (currentPath) {
+            case "/alertdialog":
+                return react_2.default.createElement(alertdialog_1.default, null);
+            case "/accordion":
+                return react_2.default.createElement(accordion_1.default, null);
+            case "/searchSelect":
+                return react_2.default.createElement(searchSelect_1.default, null);
+            case "/timeline":
+                return react_2.default.createElement(timeline_1.default, null);
+            case "/search":
+                return react_2.default.createElement(search_1.default, null);
+            case "/datepicker":
+                return react_2.default.createElement(datePick_1.default, null);
+            case "/multiselect":
+                return react_2.default.createElement(multiSelect_1.default, null);
+            case "/drawer":
+                return react_2.default.createElement(drawer_1.default, null);
+            case "/verifyEmail":
+                return react_2.default.createElement(verifyEmail_1.default, null);
+            case "/editor":
+                return react_2.default.createElement(editor_1.default, null);
+            case "/dropdown":
+                return react_2.default.createElement(dropdown_1.default, null);
+            case "/notearea":
+                return react_2.default.createElement(noteArea_1.default, null);
+            case "/notification":
+                return react_2.default.createElement(notification_1.default, null);
+            case "/switch":
+                return react_2.default.createElement(switch_1.default, null);
+            case "/photoViewer":
+                return react_2.default.createElement(photoViewer_1.default, null);
+            case "/charts":
+                return react_2.default.createElement(chart_1.default, null);
+            case "/tooltip":
+                return react_2.default.createElement(tooltip_1.default, null);
+            case "/card":
+                return react_2.default.createElement(card_1.default, null);
+            case "/pininput":
+                return react_2.default.createElement(pinInputs_1.default, null);
+            case "/numberinput":
+                return react_2.default.createElement(numberInput_1.default, null);
+            case "/progressbar":
+                return react_2.default.createElement(progressbar_1.default, null);
+            case "/button":
+                return react_2.default.createElement(button_1.default, null);
+            case "/radio":
+                return react_2.default.createElement(radioButton_1.default, null);
+            case "/skeleton":
+                return react_2.default.createElement(skeleton_1.default, null);
+            case "/textarea":
+                return react_2.default.createElement(textArea_1.default, null);
+            case "/select":
+                return react_2.default.createElement(select_1.default, null);
+            case "/modal":
+                return react_2.default.createElement(modal_1.default, null);
+            case "/checkbox":
+                return react_2.default.createElement(checkbox_1.default, null);
+            case "/toster":
+                return react_2.default.createElement(toster_1.default, null);
+            case "/InputPage":
+                return react_2.default.createElement(input_1.default, null);
+            case "/table":
+                return react_2.default.createElement(table_1.TableExample, null);
+            case "/tinput":
+                return react_2.default.createElement(TInput_1.default, null);
+            case "/kanban":
+                return react_2.default.createElement(kanbanboard_1.default, null);
+            case "/contactForm":
+                return react_2.default.createElement(contactForm_1.default, null);
+            case "/header":
+                return (react_2.default.createElement(Header_1.default, { logo: react_2.default.createElement(react_1.Box, { fontSize: "xl", fontWeight: "bold" }, "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: react_2.default.createElement(react_2.default.Fragment, null,
+                        react_2.default.createElement(react_1.Button, { variant: "ghost", colorScheme: "purple" }, "Login"),
+                        react_2.default.createElement(react_1.Button, { colorScheme: "purple" }, "Sign Up")) }));
+            case "/upload":
+                return react_2.default.createElement(fileUpload_1.FileUploader, null);
+            case "/slider":
+                return (react_2.default.createElement(Slider_1.default, { 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 react_2.default.createElement(productCaard_1.default, null);
+            case "/productDetails":
+                return react_2.default.createElement(productDetailCard_1.default, null);
+            case "/productFilter":
+                return react_2.default.createElement(productFilter_1.default, null);
+            case "/feedbackForm":
+                return react_2.default.createElement(FeedbackForm_1.default, null);
+            case "/tag":
+                return (react_2.default.createElement(Tag_1.default, { label: "tag", icon: lucide_react_1.Home, size: "md", 
+                    // colorScheme="gray"
+                    onIconClick: function () { return console.log("Icon"); }, onTagClick: function () { return console.log("Tag"); } }));
+            case "/":
+            default:
+        }
+    };
+    return (react_2.default.createElement("div", null,
+        react_2.default.createElement("nav", null,
+            react_2.default.createElement(react_1.HStack, { spacing: 1, flexWrap: "wrap", alignItems: "center" },
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/"); }, variant: "outline", size: "xs" }, "Home"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/alertdialog"); }, variant: "outline", size: "xs" }, "AlertDialog"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/accordion"); }, variant: "outline", size: "xs" }, "Accordion"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/searchSelect"); }, variant: "outline", size: "xs" }, "searchSelect"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/timeline"); }, variant: "outline", size: "xs" }, "Timeline"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/search"); }, variant: "outline", size: "xs" }, "Search"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/datepicker"); }, variant: "outline", size: "xs" }, "Datepicker"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/multiselect"); }, variant: "outline", size: "xs" }, "Multiselect"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/drawer"); }, variant: "outline", size: "xs" }, "Drawer"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/verifyEmail"); }, variant: "outline", size: "xs" }, "VerifyEmail"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/editor"); }, variant: "outline", size: "xs" }, "Editor"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/dropdown"); }, variant: "outline", size: "xs" }, "Dropdown"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/notearea"); }, variant: "outline", size: "xs" }, "Notearea"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/notification"); }, variant: "outline", size: "xs" }, "Notification"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/switch"); }, variant: "outline", size: "xs" }, "Switch"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/photoViewer"); }, variant: "outline", size: "xs" }, "PhotoViewer"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/charts"); }, variant: "outline", size: "xs" }, "Charts"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tooltip"); }, variant: "outline", size: "xs" }, "Tooltip"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/card"); }, variant: "outline", size: "xs" }, "Card"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/pininput"); }, variant: "outline", size: "xs" }, "PinInputs"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/numberinput"); }, variant: "outline", size: "xs" }, "NumberInput"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/progressbar"); }, variant: "outline", size: "xs" }, "Progressbar"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/button"); }, variant: "outline", size: "xs" }, "Button"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/radio"); }, variant: "outline", size: "xs" }, "RadioButton"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/skeleton"); }, variant: "outline", size: "xs" }, "Skeleton"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/textarea"); }, variant: "outline", size: "xs" }, "Textarea"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/select"); }, variant: "outline", size: "xs" }, "Select"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/modal"); }, variant: "outline", size: "xs" }, "Modal"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/checkbox"); }, variant: "outline", size: "xs" }, "Checkbox"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/toster"); }, variant: "outline", size: "xs" }, "Toster"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/InputPage"); }, variant: "outline", size: "xs" }, "Input"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/table"); }, variant: "outline", size: "xs" }, "Table"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/kanban"); }, variant: "outline", size: "xs" }, "Kanban"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tag"); }, variant: "outline", size: "xs" }, "Tag"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/header"); }, variant: "outline", size: "xs" }, "Header"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/upload"); }, variant: "outline", size: "xs" }, "File Upload"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/slider"); }, variant: "outline", size: "xs" }, "Slider"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/productCard"); }, variant: "outline", size: "xs" }, "Product Card"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/productDetails"); }, variant: "outline", size: "xs" }, "Product Detail Card"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/productFilter"); }, variant: "outline", size: "xs" }, "Product Filter"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/contactForm"); }, variant: "outline", size: "xs" }, "contactForm"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/feedbackForm"); }, variant: "outline", size: "xs" }, "Feedback Form")),
+            react_2.default.createElement("br", null),
+            react_2.default.createElement("br", null)),
+        react_2.default.createElement("br", null),
+        react_2.default.createElement("br", null),
+        renderPage()));
+};
+exports.default = Layout;

package/dist/Pages/TInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TInput: () => React.JSX.Element;
+export default TInput;

package/dist/Pages/TInput.js

@@ -0,0 +1,56 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var Input_1 = __importDefault(require("../Components/Input/Input/Input"));
+var Buttons_1 = __importDefault(require("../Components/Buttons/Buttons"));
+var PinInputs_1 = __importDefault(require("../Components/PinInputs/PinInputs"));
+var TInput = function () {
+    var _a = (0, react_1.useState)(""), email = _a[0], setEmail = _a[1];
+    var _b = (0, react_1.useState)(""), password = _b[0], setPassword = _b[1];
+    var errors = (0, react_1.useState)({
+        email: "ddd",
+        password: "",
+    })[0];
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Input_1.default, { label: "Email Address", type: "email", value: email, onChange: setEmail, error: errors.email, placeholder: "Email Address", inputBoxClassName: "w-1/6" }),
+        react_1.default.createElement(Input_1.default, { label: "Password", type: "password", value: password, onChange: setPassword, error: errors.password, placeholder: "Password", inputBoxClassName: "w-1/6" }),
+        react_1.default.createElement(PinInputs_1.default, { length: 6, error: "", onComplete: function (value) { console.log(value, "value"); } }),
+        react_1.default.createElement(Buttons_1.default, { label: "Sign In", onClick: function () { } })));
+};
+exports.default = TInput;

package/dist/Pages/accordion.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Accordions: () => React.JSX.Element;
+export default Accordions;

package/dist/Pages/accordion.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Accordion_1 = __importDefault(require("../Components/Accordion/Accordion"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var Accordions = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Accordion_1.default, { allowToggle: true, items: [
+                {
+                    header: (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left" }, "Section 1 title"),
+                        react_1.default.createElement(lucide_react_1.ChevronDown, { style: { marginRight: "8px" } }))),
+                    content: (react_1.default.createElement("div", null,
+                        react_1.default.createElement(react_2.Text, null, "This is text inside Section 1."),
+                        react_1.default.createElement(react_2.Box, { bg: "gray.200", p: 4, mt: 2 }, "This is a box with more content inside Section 1."),
+                        react_1.default.createElement(react_2.Flex, { mt: 2 },
+                            react_1.default.createElement(react_2.Box, { flex: "1", bg: "blue.200", p: 4 }, "Box 1"),
+                            react_1.default.createElement(react_2.Box, { flex: "1", bg: "green.200", p: 4, ml: 2 }, "Box 2")))),
+                    customStyles: {
+                        buttonStyle: { backgroundColor: "yellow" },
+                        hoverbuttonStyle: { backgroundColor: "orange" },
+                    },
+                    // buttonProps: { backgroundColor: "red" }
+                },
+                {
+                    header: (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left" }, "Section 1 title"),
+                        react_1.default.createElement(lucide_react_1.ChevronDown, { style: { marginRight: "8px" } }))),
+                    content: (react_1.default.createElement("div", null,
+                        react_1.default.createElement(react_2.Text, null, "This is text inside Section 1."),
+                        react_1.default.createElement(react_2.Box, { bg: "gray.200", p: 4, mt: 2 }, "This is a box with more content inside Section 1."),
+                        react_1.default.createElement(react_2.Flex, { mt: 2 },
+                            react_1.default.createElement(react_2.Box, { flex: "1", bg: "blue.200", p: 4 }, "Box 1"),
+                            react_1.default.createElement(react_2.Box, { flex: "1", bg: "green.200", p: 4, ml: 2 }, "Box 2")))),
+                },
+            ] })));
+};
+exports.default = Accordions;

package/dist/Pages/alertdialog.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const AlertdialogBox: () => React.JSX.Element;
+export default AlertdialogBox;

package/dist/Pages/alertdialog.js

@@ -0,0 +1,54 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var AlertDialog_1 = __importDefault(require("../Components/AlertDialog/AlertDialog"));
+var react_2 = require("@chakra-ui/react");
+var AlertdialogBox = function () {
+    var _a = (0, react_1.useState)(false), alertActive = _a[0], setAlertActive = _a[1];
+    var leastDestructiveRef = react_1.default.useRef();
+    var handleAlert = function () {
+        setAlertActive(!alertActive);
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_2.Button, { onClick: function () {
+                setAlertActive(true);
+            } }, "AlertDialog"),
+        react_1.default.createElement(AlertDialog_1.default, { isOpen: alertActive, onClose: handleAlert, leastDestructiveRef: leastDestructiveRef, title: "hello", content: react_1.default.createElement("div", { style: { color: "red", height: "200px" } }, "hellobody"), onConfirm: function () { return handleAlert(); }, size: "500" })));
+};
+exports.default = AlertdialogBox;

package/dist/Pages/button.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const ButtonPage: () => React.JSX.Element;
+export default ButtonPage;