pixelize-design-library 2.1.16 → 2.1.18

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/dist/Theme/Dark/theme.js

@@ -0,0 +1,283 @@
+"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",
+    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
+};
+var darkTheme = (0, react_1.extendTheme)({
+    initialColorMode: "dark",
+    useSystemColorMode: false,
+    styles: {
+        global: function (props) { return ({
+            body: {
+                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",
+        black: "#000",
+        white: "#fff",
+        gray: {
+            50: "#f7fafc",
+            100: "#edf2f7",
+            200: "#e2e8f0",
+            300: "#cbd5e0",
+            400: "#a0aec0",
+            500: "#718096",
+            600: "#4a5568",
+            700: "#2d3748",
+            800: "#1a202c",
+            900: "#171923",
+        },
+        red: {
+            50: "#fff5f5",
+            100: "#fed7d7",
+            200: "#feb2b2",
+            300: "#fc8181",
+            400: "#f56565",
+            500: "#e53e3e",
+            600: "#c53030",
+            700: "#9b2c2c",
+            800: "#822727",
+            900: "#63171b",
+        },
+        orange: {
+            50: "#fffaf0",
+            100: "#feebc8",
+            200: "#fbd38d",
+            300: "#f6ad55",
+            400: "#ed8936",
+            500: "#dd6b20",
+            600: "#c05621",
+            700: "#9c4221",
+            800: "#7b341e",
+            900: "#652b19",
+        },
+        yellow: {
+            50: "#fffff0",
+            100: "#fefcbf",
+            200: "#faf089",
+            300: "#f6e05e",
+            400: "#ecc94b",
+            500: "#d69e2e",
+            600: "#b7791f",
+            700: "#975a16",
+            800: "#744210",
+            900: "#5f370e",
+        },
+        green: {
+            50: "#f0fff4",
+            100: "#c6f6d5",
+            200: "#9ae6b4",
+            300: "#68d391",
+            400: "#48bb78",
+            500: "#38a169",
+            600: "#2f855a",
+            700: "#276749",
+            800: "#22543d",
+            900: "#1c4532",
+        },
+        teal: {
+            50: "#e6fffa",
+            100: "#b2f5ea",
+            200: "#81e6d9",
+            300: "#4fd1c5",
+            400: "#38b2ac",
+            500: "#319795",
+            600: "#2c7a7b",
+            700: "#285e61",
+            800: "#234e52",
+            900: "#1d4044",
+        },
+        blue: {
+            50: "#ebf8ff",
+            100: "#bee3f8",
+            200: "#90cdf4",
+            300: "#63b3ed",
+            400: "#4299e1",
+            500: "#3182ce",
+            600: "#2b6cb0",
+            700: "#2c5282",
+            800: "#2a4365",
+            900: "#1a365d",
+        },
+        cyan: {
+            50: "#edfdfd",
+            100: "#c4f1f9",
+            200: "#9decf9",
+            300: "#76e4f7",
+            400: "#0bc5ea",
+            500: "#00b5d8",
+            600: "#00a3c4",
+            700: "#0987a0",
+            800: "#086f83",
+            900: "#065666",
+        },
+        purple: {
+            50: "#faf5ff",
+            100: "#e9d8fd",
+            200: "#d6bcfa",
+            300: "#b794f4",
+            400: "#9f7aea",
+            500: "#805ad5",
+            600: "#6b46c1",
+            700: "#553c9a",
+            800: "#44337a",
+            900: "#322659",
+        },
+        pink: {
+            50: "#fff5f7",
+            100: "#fed7e2",
+            200: "#fbb6ce",
+            300: "#f687b3",
+            400: "#ed64a6",
+            500: "#d53f8c",
+            600: "#b83280",
+            700: "#97266d",
+            800: "#702459",
+            900: "#521b41",
+        },
+    },
+    space: {
+        px: "1px",
+        0: "0",
+        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",
+    },
+    fontSizes: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem",
+        "2xl": "1.5rem",
+        "3xl": "1.875rem",
+        "4xl": "2.25rem",
+        "5xl": "3rem",
+        "6xl": "3.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6rem",
+        "9xl": "8rem",
+    },
+    breakpoints: {
+        sm: "30em",
+        md: "48em",
+        lg: "62em",
+        xl: "80em",
+        "2xl": "96em",
+    },
+    shadows: {
+        xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
+        sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+        base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+        md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+        lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+        xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+        "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        outline: "0 0 0 3px rgba(66, 153, 225, 0.6)",
+        inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+        none: "none",
+        "dark-lg": "rgba(0, 0, 0, 0.25) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -2px",
+    },
+    radii: {
+        none: "0",
+        sm: "0.125rem",
+        base: "0.25rem",
+        md: "0.375rem",
+        lg: "0.5rem",
+        xl: "0.75rem",
+        "2xl": "1rem",
+        "3xl": "1.5rem",
+        full: "9999px",
+    },
+    zIndices: {
+        hide: -1,
+        auto: "auto",
+        base: 0,
+        docked: 10,
+        dropdown: 1000,
+        sticky: 1100,
+        banner: 1200,
+        overlay: 1300,
+        modal: 1400,
+        popover: 1500,
+        skipLink: 1600,
+        toast: 1700,
+        tooltip: 1800,
+    },
+});
+exports.default = darkTheme;

package/dist/Theme/Default/fonts.d.ts

@@ -0,0 +1,35 @@
+import "@fontsource/ubuntu-sans";
+declare const fontOptions: {
+    fonts: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+    fontWeights: {
+        hairline: number;
+        thin: number;
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+        black: number;
+    };
+};
+export default fontOptions;

package/dist/Theme/Default/fonts.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@fontsource/ubuntu-sans");
+var fontOptions = {
+    fonts: {
+        body: "Ubuntu Sans, serif",
+        heading: "Ubuntu Sans, serif",
+        mono: "Ubuntu Sans, monospace",
+    },
+    fontSizes: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem",
+        "2xl": "1.5rem",
+        "3xl": "1.875rem",
+        "4xl": "2.25rem",
+        "5xl": "3rem",
+        "6xl": "3.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6rem",
+        "9xl": "8rem",
+    },
+    fontWeights: {
+        hairline: 100,
+        thin: 200,
+        light: 300,
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+        extrabold: 800,
+        black: 900,
+    },
+};
+exports.default = fontOptions;