pixelize-design-library 2.1.20 → 2.1.22

package/dist/Constants/Sidebar.d.ts

@@ -0,0 +1,38 @@
+export declare const FlexCss: {
+    "&::-webkit-scrollbar": {
+        width: string;
+    };
+    "&::-webkit-scrollbar-track": {
+        background: string;
+    };
+    "&::-webkit-scrollbar-thumb": {
+        background: string;
+        transition: string;
+    };
+    "&:hover::-webkit-scrollbar-thumb": {
+        background: string;
+    };
+};
+export declare const cssForScrollBar: (theme: any) => {
+    "&::-webkit-scrollbar": {
+        width: string;
+    };
+    "&::-webkit-scrollbar-track": {
+        background: any;
+    };
+    "&::-webkit-scrollbar-thumb": {
+        background: string;
+        borderRadius: string;
+    };
+    "&:hover::-webkit-scrollbar-thumb": {
+        background: any;
+    };
+    "&:hover::-webkit-scrollbar-thumb:hover": {
+        background: any;
+    };
+    scrollbarWidth: string;
+    "&:hover": {
+        scrollbarWidth: string;
+        scrollbarColor: string;
+    };
+};

package/dist/Constants/Sidebar.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cssForScrollBar = exports.FlexCss = void 0;
+exports.FlexCss = {
+    "&::-webkit-scrollbar": {
+        width: "0.188rem",
+    },
+    "&::-webkit-scrollbar-track": {
+        background: "transparent",
+    },
+    "&::-webkit-scrollbar-thumb": {
+        background: "transparent",
+        transition: "background 0.5s",
+    },
+    "&:hover::-webkit-scrollbar-thumb": {
+        background: "#9A4FE5",
+    },
+};
+var cssForScrollBar = function (theme) { return ({
+    "&::-webkit-scrollbar": {
+        width: "0.125rem",
+    },
+    "&::-webkit-scrollbar-track": {
+        background: theme.colors.sidebar.background[500],
+    },
+    "&::-webkit-scrollbar-thumb": {
+        background: "transparent",
+        borderRadius: "0.5rem",
+    },
+    "&:hover::-webkit-scrollbar-thumb": {
+        background: theme.colors.primary[500],
+    },
+    "&:hover::-webkit-scrollbar-thumb:hover": {
+        background: theme.colors.primary[700],
+    },
+    scrollbarWidth: "none",
+    "&:hover": {
+        scrollbarWidth: "thin",
+        scrollbarColor: "".concat(theme.colors.primary[500], " ").concat(theme.colors.sidebar.background[500]),
+    },
+}); };
+exports.cssForScrollBar = cssForScrollBar;

package/dist/Hooks/usePreferences.d.ts

@@ -0,0 +1,24 @@
+type PreferencesProps = {
+    baseUrl: string;
+    key?: string;
+    page?: string;
+    name?: string;
+    authToken?: string;
+};
+type PreferencesResponseProps = {
+    json: Record<string, any>;
+    key: string;
+    name: string;
+    page: string;
+    preference_id: string;
+};
+declare const useGetPreferences: ({ baseUrl, key, page, name, authToken, }: PreferencesProps) => {
+    preferences: PreferencesResponseProps[];
+    loading: boolean;
+};
+declare const useSavePreferences: ({ baseUrl, key, page, name, authToken, }: PreferencesProps) => {
+    savePreferences: (data?: Record<string, any>) => void;
+    loading: boolean;
+    error: null;
+};
+export { useGetPreferences, useSavePreferences };

package/dist/Hooks/usePreferences.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSavePreferences = exports.useGetPreferences = void 0;
+var react_1 = require("react");
+var constructUrl = function (_a) {
+    var baseUrl = _a.baseUrl, key = _a.key, page = _a.page, name = _a.name;
+    var params = new URLSearchParams();
+    if (page) {
+        params.append("page", page);
+    }
+    if (key) {
+        params.append("key", key);
+    }
+    if (name) {
+        params.append("name", name);
+    }
+    var queryString = params.toString();
+    return "".concat(baseUrl).concat(queryString ? "?".concat(queryString) : "");
+};
+var useGetPreferences = function (_a) {
+    var _b = _a.baseUrl, baseUrl = _b === void 0 ? "" : _b, _c = _a.key, key = _c === void 0 ? "" : _c, _d = _a.page, page = _d === void 0 ? "" : _d, _e = _a.name, name = _e === void 0 ? "" : _e, _f = _a.authToken, authToken = _f === void 0 ? "" : _f;
+    var _g = (0, react_1.useState)([]), preferences = _g[0], setPreferences = _g[1];
+    var _h = (0, react_1.useState)(false), loading = _h[0], setLoading = _h[1];
+    (0, react_1.useEffect)(function () {
+        if (!baseUrl) {
+            return;
+        }
+        setLoading(true);
+        var url = constructUrl({ baseUrl: baseUrl, key: key, page: page, name: name });
+        fetch(url, {
+            headers: {
+                Authorization: authToken,
+            },
+        })
+            .then(function (response) { return response.json(); })
+            .then(function (data) { return setPreferences(data); })
+            .catch(function (error) { return console.error(error); })
+            .finally(function () { return setLoading(false); });
+        /* eslint-disable */
+    }, [baseUrl]);
+    return { preferences: preferences, loading: loading };
+};
+exports.useGetPreferences = useGetPreferences;
+var useSavePreferences = function (_a) {
+    var _b = _a.baseUrl, baseUrl = _b === void 0 ? "" : _b, _c = _a.key, key = _c === void 0 ? "" : _c, _d = _a.page, page = _d === void 0 ? "" : _d, _e = _a.name, name = _e === void 0 ? "" : _e, _f = _a.authToken, authToken = _f === void 0 ? "" : _f;
+    var _g = (0, react_1.useState)(false), loading = _g[0], setLoading = _g[1];
+    var _h = (0, react_1.useState)(null), error = _h[0], setError = _h[1];
+    var savePreferences = function (data) {
+        if (data === void 0) { data = {}; }
+        if (!baseUrl)
+            return;
+        setLoading(true);
+        fetch(baseUrl, {
+            method: "POST",
+            headers: {
+                Authorization: authToken,
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                key: key,
+                page: page,
+                name: name,
+                json: data,
+            }),
+        })
+            .then(function (response) { return response.json(); })
+            .then(function (data) { return console.log(data); })
+            .catch(function (error) { return setError(error); })
+            .finally(function () { return setLoading(false); });
+    };
+    return { savePreferences: savePreferences, loading: loading, error: error };
+};
+exports.useSavePreferences = useSavePreferences;

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,269 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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");
+var selectSearch_1 = __importDefault(require("./Pages/selectSearch"));
+var Slider_1 = __importDefault(require("./Components/Slider/Slider"));
+var contactForm_1 = __importDefault(require("./Pages/contactForm"));
+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 switchTheme = function (themeName) {
+        document.documentElement.setAttribute("data-theme", themeName);
+    };
+    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 "/selectSearch":
+                return react_2.default.createElement(selectSearch_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 "/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: [
+                        "https://picsum.photos/id/1011/600/400",
+                        "https://picsum.photos/id/1012/600/400",
+                        "https://picsum.photos/id/1013/600/400",
+                        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUgffoihYPEcEZH4D24OA-1Hnwz-SRN4DOmcABM6nro6l2D_yLYjNNFy_pOpOC9ABjXY2_",
+                        "https://beam-images.warnermediacdn.com/BEAM_LWM_DELIVERABLES/4f6b4985-2dc9-4ab6-ac79-d60f0860b0ac/87240dbd-5c19-11f0-b655-025327c09033?host=wbd-images.prod-vod.h264.io&partner=beamcom",
+                    ] }));
+            case "/productCard":
+                return react_2.default.createElement(productCaard_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(Slider_1.default, { images: [
+                "https://picsum.photos/id/1011/600/400",
+                "https://picsum.photos/id/1012/600/400",
+                "https://picsum.photos/id/1013/600/400",
+            ] }),
+        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("/selectsearch"); }, variant: "outline", size: "xs" }, "Selectsearch"),
+                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("/selectSearch"); }, variant: "outline", size: "xs" }, "selectSearch"),
+                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("/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" }, "Product Card"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/contactForm"); }, variant: "outline" }, "contactForm")),
+            react_2.default.createElement("br", null),
+            react_2.default.createElement("br", null),
+            react_2.default.createElement("h2", { className: "text-3xl" }, " TailWindCss"),
+            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tinput"); }, variant: "outline", size: "xs" }, "Input"),
+            react_2.default.createElement("button", { onClick: function () { return switchTheme("theme2"); } }, "Switch to Theme 2")),
+        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,46 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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,44 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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;

package/dist/Pages/button.js

@@ -0,0 +1,29 @@
+"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 ButtonGroupIcon_1 = __importDefault(require("../Components/ButtonGroupIcon/ButtonGroupIcon"));
+var Button_1 = __importDefault(require("../Components/Button/Button"));
+var lucide_react_1 = require("lucide-react");
+var ButtonPage = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(ButtonGroupIcon_1.default, { buttonText: "hello", rightIcon: react_1.default.createElement(lucide_react_1.House, null), leftIcon: react_1.default.createElement(lucide_react_1.House, null), size: "md", variant: "solid", 
+            // color="red"
+            rightIconDropdown: true, dropdownOptions: [
+                {
+                    label: "123",
+                    id: "1",
+                    image: react_1.default.createElement(lucide_react_1.House, { style: { marginRight: "20px" } }),
+                },
+                { label: "456", id: "2" },
+            ], onDropdownOptionClick: function (e, option) {
+                console.log(e, option);
+            } }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(Button_1.default, { label: "Button", onClick: function () { }, variant: "solid", size: "xs" })));
+};
+exports.default = ButtonPage;