pixelize-design-library 2.1.20 → 2.1.22

package/dist/Pages/skeleton.js

@@ -0,0 +1,22 @@
+"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 = require("@chakra-ui/react");
+var react_2 = __importDefault(require("react"));
+var Skeletons_1 = __importDefault(require("../Components/Skeletons/Skeletons"));
+var SkeletonPage = function () {
+    return (react_2.default.createElement("div", null,
+        react_2.default.createElement(react_1.Box, null,
+            react_2.default.createElement(Skeletons_1.default, { type: "skeleton" }),
+            react_2.default.createElement("br", null),
+            react_2.default.createElement(Skeletons_1.default, { type: "circle" }),
+            react_2.default.createElement("br", null),
+            react_2.default.createElement(Skeletons_1.default, { type: "text", mt: 4 }),
+            react_2.default.createElement("br", null),
+            react_2.default.createElement("br", null),
+            react_2.default.createElement(Skeletons_1.default, { height: "10px", isLoaded: false, fadeDuration: 4, bg: "blue.500", color: "white", type: "skeleton" },
+                react_2.default.createElement(react_1.Box, null, "Hello ChakraUI!")))));
+};
+exports.default = SkeletonPage;

package/dist/Pages/switch.d.ts

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

package/dist/Pages/switch.js

@@ -0,0 +1,40 @@
+"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 Switch_1 = __importDefault(require("../Components/Switch/Switch"));
+var SwitchPage = function () {
+    var _a = (0, react_1.useState)("left"), switchActive = _a[0], setSwitchActive = _a[1];
+    var handleSwitchToggle = function (value) {
+        // console.log(value);
+        setSwitchActive(value);
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Switch_1.default, { leftText: "Overview", rightText: "Timeline", switchActive: switchActive, onSwitchToggle: handleSwitchToggle })));
+};
+exports.default = SwitchPage;

package/dist/Pages/table.d.ts

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

package/dist/Pages/table.js

@@ -0,0 +1,144 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableExample = void 0;
+var react_1 = __importDefault(require("react"));
+var Table_1 = __importDefault(require("../Components/Table/Table"));
+var tableData = [
+    {
+        id: 1,
+        name: "John Doe",
+        age: 30,
+        gender: "Male",
+        onLink: function (url) {
+            console.log("URL", url);
+        },
+    },
+    {
+        id: 2,
+        name: "Jane Doe",
+        age: 25,
+        gender: "Female",
+        content: function () {
+            return (react_1.default.createElement("div", null,
+                react_1.default.createElement(Table_1.default, { columns: column, data: [] })));
+        },
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Bob Smitha",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Bobe Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "crushmika",
+        age: 33,
+        gender: "Female",
+    },
+    {
+        id: 33,
+        name: "Shree",
+        age: 30,
+        gender: "Female",
+    },
+    {
+        id: 33,
+        name: "Shree",
+        age: 25,
+        gender: "Female",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Waquima gaabi",
+        age: 40,
+        gender: "female",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Johny",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+];
+var column = [
+    {
+        label: "Name",
+        id: "name",
+        isFreeze: false,
+        isSort: true,
+    },
+    {
+        label: "Age",
+        id: "age",
+        isFreeze: false,
+        isSort: true,
+    },
+    {
+        label: "Gender",
+        id: "gender",
+    },
+    {
+        label: "Action",
+        id: "action",
+        isVisiblity: true,
+        node: function (props) {
+            return props.name;
+        },
+    },
+];
+var TableExample = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Table_1.default, { columns: column, data: tableData, isCheckbox: true, isVisiblity: false, isLoading: false, noBorders: false, onSelection: function (checked) { return console.log(checked); }, onRowClick: function (row, header) { return console.log(row, header); }, isPagination: false })));
+};
+exports.TableExample = TableExample;

package/dist/Pages/textArea.d.ts

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

package/dist/Pages/textArea.js

@@ -0,0 +1,12 @@
+"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 InputTextArea_1 = __importDefault(require("../Components/InputTextArea/InputTextArea"));
+var TextAreaPage = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(InputTextArea_1.default, { label: "hello", helperText: "Hello", errorMessage: "Required", error: true, rows: 5 })));
+};
+exports.default = TextAreaPage;

package/dist/Pages/timeline.d.ts

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

package/dist/Pages/timeline.js

@@ -0,0 +1,74 @@
+"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 Timeline_1 = __importDefault(require("../Components/Timeline/Timeline"));
+var TimelinePage = function () {
+    var timeline = [
+        {
+            logs_id: 1,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Accounts",
+            action_by: "pixelize technology",
+            created_at: 1723104998797,
+            changes: null,
+        },
+        {
+            logs_id: 2,
+            title: "Updated",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Accounts",
+            action_by: "pixelize technology",
+            created_at: 1723105040247,
+            changes: null,
+        },
+        {
+            logs_id: 10,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723202829694,
+            changes: null,
+        },
+        {
+            logs_id: 3,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723105099207,
+            changes: null,
+        },
+        {
+            logs_id: 7,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723105603033,
+            changes: null,
+        },
+        {
+            logs_id: 8,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723202829694,
+            changes: '{"shipping_code":{"original":null,"updated":"aaa"},"shipping_country":{"original":null,"updated":"QQdd"},"description":{"original":null,"updated":"ssAA"},"profile":{"updated":"profile updated"}}',
+        },
+    ];
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Timeline_1.default, { timelineEvents: timeline })));
+};
+exports.default = TimelinePage;

package/dist/Pages/tooltip.d.ts

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

package/dist/Pages/tooltip.js

@@ -0,0 +1,12 @@
+"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 ToolTip_1 = __importDefault(require("../Components/ToolTip/ToolTip"));
+var TooltipPage = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(ToolTip_1.default, { label: "Hello", placement: "top", hasArrow: true }, "hai")));
+};
+exports.default = TooltipPage;

package/dist/Pages/toster.d.ts

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

package/dist/Pages/toster.js

@@ -0,0 +1,63 @@
+"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 Button_1 = __importDefault(require("../Components/Button/Button"));
+var Toaster_1 = require("../Components/Toaster/Toaster");
+var TosterPage = function () {
+    var showToast = (0, Toaster_1.useToaster)().showToast;
+    var handleOnclick = function () {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "success",
+        });
+        //setIsOpen(true);
+    };
+    var handleOnclick1 = function () {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "error",
+        });
+        //setIsOpen(true);
+    };
+    var handleOnclick2 = function () {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "warning",
+        });
+        //setIsOpen(true);
+    };
+    var handleOnclick3 = function () {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "info",
+        });
+        //setIsOpen(true);
+    };
+    var handleOnclick4 = function () {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "loading",
+        });
+        //setIsOpen(true);
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Button_1.default, { label: "Success", onClick: handleOnclick, variant: "solid", size: "md", width: 100 }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(Button_1.default, { label: "Success", onClick: handleOnclick1, variant: "solid", size: "md", width: 100 }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(Button_1.default, { label: "Success", onClick: handleOnclick2, variant: "solid", size: "md", width: 100 }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(Button_1.default, { label: "Success", onClick: handleOnclick3, variant: "solid", size: "md", width: 100 }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(Button_1.default, { label: "Success", onClick: handleOnclick4, variant: "solid", size: "md", width: 100 }),
+        react_1.default.createElement("br", null)));
+};
+exports.default = TosterPage;

package/dist/Pages/verifyEmail.d.ts

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

package/dist/Pages/verifyEmail.js

@@ -0,0 +1,18 @@
+"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 VerifyEmailOtp_1 = __importDefault(require("../Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp"));
+var VerifyEmailPage = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(VerifyEmailOtp_1.default, { resendMail: function () {
+                console.log("hello");
+            }, onChange: function (val) {
+                console.log("onchange", val);
+            }, onComplete: function (val) {
+                console.log("onComplete", val);
+            }, pins: 6, title: "Please Verify Account", description: "Enter the six digit code we sent to your email address to verify", styles: { width: "70%", padding: "2px" } })));
+};
+exports.default = VerifyEmailPage;

package/dist/Theme/Dark/theme.d.ts

@@ -0,0 +1,2 @@
+declare const darkTheme: Record<string, any>;
+export default darkTheme;

package/{src/Theme/Dark/theme.ts → dist/Theme/Dark/theme.js}

@@ -1,49 +1,60 @@
-import { extendTheme } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
-
-const space = {
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@chakra-ui/react");
+var theme_tools_1 = require("@chakra-ui/theme-tools");
+var space = {
     px: "1px",
     0: "0",
-    1: "0.25rem", // 4px
-    2: "0.5rem",  // 8px
-    3: "0.75rem", // 12px
-    4: "1rem",    // 16px
-    5: "1.25rem", // 20px
-    6: "1.5rem",  // 24px
-    7: "1.75rem", // 28px
-    8: "2rem",    // 32px
-    9: "2.25rem", // 36px
-    10: "2.5rem", // 40px
-    12: "3rem",   // 48px
-    14: "3.5rem", // 56px
-    16: "4rem",   // 64px
-    20: "5rem",   // 80px
-    24: "6rem",   // 96px
-    28: "7rem",   // 112px
-    32: "8rem",   // 128px
-    36: "9rem",   // 144px
-    40: "10rem",  // 160px
-    44: "11rem",  // 176px
-    48: "12rem",  // 192px
-    52: "13rem",  // 208px
-    56: "14rem",  // 224px
-    60: "15rem",  // 240px
-    64: "16rem",  // 256px
-    72: "18rem",  // 288px
-    80: "20rem",  // 320px
-    96: "24rem",  // 384px
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    7: "1.75rem",
+    8: "2rem",
+    9: "2.25rem",
+    10: "2.5rem",
+    12: "3rem",
+    14: "3.5rem",
+    16: "4rem",
+    20: "5rem",
+    24: "6rem",
+    28: "7rem",
+    32: "8rem",
+    36: "9rem",
+    40: "10rem",
+    44: "11rem",
+    48: "12rem",
+    52: "13rem",
+    56: "14rem",
+    60: "15rem",
+    64: "16rem",
+    72: "18rem",
+    80: "20rem",
+    96: "24rem", // 384px
 };
-
-const darkTheme = extendTheme({
+var darkTheme = (0, react_1.extendTheme)({
     initialColorMode: "dark",
     useSystemColorMode: false,
     styles: {
-        global: (props: any) => ({
+        global: function (props) { return ({
             body: {
-                bg: mode("gray.100", "gray.900")(props),
-                color: mode("gray.800", "whiteAlpha.900")(props),
+                bg: (0, theme_tools_1.mode)("gray.100", "gray.900")(props),
+                color: (0, theme_tools_1.mode)("gray.800", "whiteAlpha.900")(props),
             },
-        }),
+        }); },
     },
     colors: {
         transparent: "transparent",
@@ -173,41 +184,36 @@ const darkTheme = extendTheme({
     space: {
         px: "1px",
         0: "0",
-        1: "0.25rem", // 4px
-        2: "0.5rem",  // 8px
-        3: "0.75rem", // 12px
-        4: "1rem",    // 16px
-        5: "1.25rem", // 20px
-        6: "1.5rem",  // 24px
-        7: "1.75rem", // 28px
-        8: "2rem",    // 32px
-        9: "2.25rem", // 36px
-        10: "2.5rem", // 40px
-        12: "3rem",   // 48px
-        14: "3.5rem", // 56px
-        16: "4rem",   // 64px
-        20: "5rem",   // 80px
-        24: "6rem",   // 96px
-        28: "7rem",   // 112px
-        32: "8rem",   // 128px
-        36: "9rem",   // 144px
-        40: "10rem",  // 160px
-        44: "11rem",  // 176px
-        48: "12rem",  // 192px
-        52: "13rem",  // 208px
-        56: "14rem",  // 224px
-        60: "15rem",  // 240px
-        64: "16rem",  // 256px
-        72: "18rem",  // 288px
-        80: "20rem",  // 320px
-        96: "24rem",  // 384px
-    },
-    sizes: {
-        ...space,
-        full: "100%",
-        screenW: "100vw",
-        screenH: "100vh",
+        1: "0.25rem",
+        2: "0.5rem",
+        3: "0.75rem",
+        4: "1rem",
+        5: "1.25rem",
+        6: "1.5rem",
+        7: "1.75rem",
+        8: "2rem",
+        9: "2.25rem",
+        10: "2.5rem",
+        12: "3rem",
+        14: "3.5rem",
+        16: "4rem",
+        20: "5rem",
+        24: "6rem",
+        28: "7rem",
+        32: "8rem",
+        36: "9rem",
+        40: "10rem",
+        44: "11rem",
+        48: "12rem",
+        52: "13rem",
+        56: "14rem",
+        60: "15rem",
+        64: "16rem",
+        72: "18rem",
+        80: "20rem",
+        96: "24rem", // 384px
     },
+    sizes: __assign(__assign({}, space), { full: "100%", screenW: "100vw", screenH: "100vh" }),
     fonts: {
         heading: "'Roboto', sans-serif",
         body: "'Open Sans', sans-serif",
@@ -274,5 +280,4 @@ const darkTheme = extendTheme({
         tooltip: 1800,
     },
 });
-
-export default darkTheme;
+exports.default = darkTheme;