pixelize-design-library 1.1.94 → 2.0.1

package/dist/Layout.js

@@ -147,41 +147,42 @@ var Layout = function () {
     };
     return (react_2.default.createElement("div", null,
         react_2.default.createElement("nav", null,
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/"); } }, "Home"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/alertdialog"); } }, "AlertDialog"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/accordion"); } }, "Accordion"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/selectsearch"); } }, "Selectsearch"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/timeline"); } }, "Timeline"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/search"); } }, "Search"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/datepicker"); } }, "Datepicker"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/multiselect"); } }, "Multiselect"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/drawer"); } }, "Drawer"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/verifyEmail"); } }, "VerifyEmail"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/editor"); } }, "Editor"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/dropdown"); } }, "Dropdown"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/notearea"); } }, "Notearea"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/switch"); } }, "Switch"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/photoViewer"); } }, "PhotoViewer"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/charts"); } }, "Charts"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tooltip"); } }, "Tooltip"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/card"); } }, "Card"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/pininput"); } }, "PinInputs"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/numberinput"); } }, "NumberInput"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/progressbar"); } }, "Progressbar"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/button"); } }, "Button"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/radio"); } }, "RadioButton"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/skeleton"); } }, "Skeleton"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/textarea"); } }, "Textarea"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/select"); } }, "Select"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/modal"); } }, "Modal"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/checkbox"); } }, "Checkbox"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/toster"); } }, "Toster"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/InputPage"); } }, "Input"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/table"); } }, "Table"),
+            react_2.default.createElement(react_1.HStack, { spacing: 3, flexWrap: "wrap", alignItems: "center" },
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/"); }, variant: "outline" }, "Home"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/alertdialog"); }, variant: "outline" }, "AlertDialog"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/accordion"); }, variant: "outline" }, "Accordion"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/selectsearch"); }, variant: "outline" }, "Selectsearch"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/timeline"); }, variant: "outline" }, "Timeline"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/search"); }, variant: "outline" }, "Search"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/datepicker"); }, variant: "outline" }, "Datepicker"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/multiselect"); }, variant: "outline" }, "Multiselect"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/drawer"); }, variant: "outline" }, "Drawer"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/verifyEmail"); }, variant: "outline" }, "VerifyEmail"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/editor"); }, variant: "outline" }, "Editor"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/dropdown"); }, variant: "outline" }, "Dropdown"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/notearea"); }, variant: "outline" }, "Notearea"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/switch"); }, variant: "outline" }, "Switch"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/photoViewer"); }, variant: "outline" }, "PhotoViewer"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/charts"); }, variant: "outline" }, "Charts"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tooltip"); }, variant: "outline" }, "Tooltip"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/card"); }, variant: "outline" }, "Card"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/pininput"); }, variant: "outline" }, "PinInputs"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/numberinput"); }, variant: "outline" }, "NumberInput"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/progressbar"); }, variant: "outline" }, "Progressbar"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/button"); }, variant: "outline" }, "Button"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/radio"); }, variant: "outline" }, "RadioButton"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/skeleton"); }, variant: "outline" }, "Skeleton"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/textarea"); }, variant: "outline" }, "Textarea"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/select"); }, variant: "outline" }, "Select"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/modal"); }, variant: "outline" }, "Modal"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/checkbox"); }, variant: "outline" }, "Checkbox"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/toster"); }, variant: "outline" }, "Toster"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/InputPage"); }, variant: "outline" }, "Input"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/table"); }, variant: "outline" }, "Table")),
             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"); } }, "Input"),
+            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tinput"); }, variant: "outline" }, "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),

package/dist/Pages/TInput.js

@@ -33,7 +33,10 @@ 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 _c = (0, react_1.useState)({ email: "ddd", password: "" }), errors = _c[0], setErrors = _c[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" }),

package/dist/Pages/button.js

@@ -24,6 +24,6 @@ var ButtonPage = function () {
         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", color: "blue", size: "md", width: 360, padding: "22px" })));
+        react_1.default.createElement(Button_1.default, { label: "Button", onClick: function () { }, variant: "solid", size: "xs" })));
 };
 exports.default = ButtonPage;

package/dist/Pages/input.js

@@ -5,27 +5,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var TextInput_1 = __importDefault(require("../Components/Input/TextInput"));
-var lucide_react_1 = require("lucide-react");
 var InputPage = function () {
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(TextInput_1.default, { label: "My Label", id: "hello", name: "hello", 
+        react_1.default.createElement(TextInput_1.default, { label: "My Label", id: "input1", name: "hello", 
             //helperText="Hello"
             //errorMessage="Required"
-            //error={true}
-            type: "email", inputRightIcon: react_1.default.createElement(lucide_react_1.User, { color: "#FF0000" }), onRightIconclick: function () {
-                console.log("icon click");
-            }, 
-            // inputLeftIcon={<User color="#FF0000"/>}
+            // error={true}
+            type: "email", 
+            // inputRightIcon={<User color="#FF0000" />}
+            // onRightIconclick={() => {
+            //   console.log("icon click");
+            // }}
+            // inputLeftIcon={<User color="#FF0000" />}
             // onLeftIconClick={() => {
             //   console.log("icon click");
             // }}
-            key: "input", 
+            key: "input1", 
             // border={"0px solid"}
             // padding={"0px"}
             // inputStyle={{ border: "0px solid", padding: "0px" }}
             // inputGroupStyle={{ border: "0px solid", padding: "0px" }}
-            error: true, errorMessage: "Required", onChange: function (e) {
+            // error={true}
+            // errorMessage="Required"
+            onChange: function (e) {
                 console.log(e.target.files);
+            }, onKeyDown: function () {
+                console.log("keydown");
+            }, onBlur: function () {
+                console.log("blur");
             }, 
             // helperText="sometibg"
             isRequired: true, informationMessage: "This is information", isInformation: true })));

package/dist/Pages/modal.js

@@ -43,7 +43,7 @@ var ModalPage = function () {
         setIsOpen(true);
     };
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(Button_1.default, { label: "ModelButton", onClick: handleOnclick2, width: 250, variant: "solid", color: "blue" }),
+        react_1.default.createElement(Button_1.default, { label: "ModelButton", onClick: handleOnclick2, width: 250, variant: "solid" }),
         react_1.default.createElement(Modal_1.default, { isOpen: isOpen, onClose: function () { return setIsOpen(false); }, 
             // overlaybg={"blackAlpha.300"}
             // overlaybackdropFilter={"blur(10px) hue-rotate(90deg)"}

package/dist/Pages/toster.js

@@ -17,6 +17,6 @@ var TosterPage = function () {
         //setIsOpen(true);
     };
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(Button_1.default, { label: "Tosterbutton", onClick: handleOnclick, variant: "solid", color: "blue", size: "md", width: 100 })));
+        react_1.default.createElement(Button_1.default, { label: "Tosterbutton", onClick: handleOnclick, variant: "solid", size: "md", width: 100 })));
 };
 exports.default = TosterPage;

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

@@ -297,6 +297,25 @@ declare const palette: {
         800: string;
         900: string;
     };
+    boxShadow: {
+        primary: string;
+        error: string;
+        default: string;
+    };
+    sidebar: {
+        background: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
     boxborder: {
         50: string;
         100: string;

package/dist/Theme/Default/palette.js

@@ -299,6 +299,25 @@ var palette = {
         800: "#3e4146",
         900: "#2f3236",
     },
+    boxShadow: {
+        primary: "#9A52E247",
+        error: "#F2463A47",
+        default: "",
+    },
+    sidebar: {
+        background: {
+            50: "#e9eaf0",
+            100: "#d4d6e0",
+            200: "#212747",
+            300: "#7d84a2",
+            400: "#525b83",
+            500: "#161B32",
+            600: "#12162a",
+            700: "#0e1221",
+            800: "#0a0d19",
+            900: "#060911",
+        }
+    },
     boxborder: {
         50: "#fbfbfb",
         100: "#f2f3f4",

package/dist/Theme/Default/theme.js

@@ -18,5 +18,6 @@ var react_1 = require("@chakra-ui/react");
 var palette_1 = __importDefault(require("./palette"));
 var common_1 = __importDefault(require("../common"));
 var fonts_1 = __importDefault(require("../fonts"));
+var componentStyles_1 = require("../componentStyles");
 var lavender = __assign(__assign({ colors: palette_1.default }, fonts_1.default), common_1.default);
-exports.default = (0, react_1.extendTheme)(lavender);
+exports.default = (0, react_1.extendTheme)(__assign(__assign({}, lavender), { components: componentStyles_1.componentStyles }));

package/dist/Theme/Meadow/palette.d.ts

@@ -10,6 +10,57 @@ declare const palette: {
         700: string;
         800: string;
         900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
+    };
+    secondary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
+    };
+    tertiary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
     };
     transparent: string;
     black: string;
@@ -184,6 +235,18 @@ declare const palette: {
         800: string;
         900: string;
     };
+    background: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
     backgroundColor: {
         main: string;
         secondary: string;
@@ -196,5 +259,110 @@ declare const palette: {
         muted: string;
         neutral: string;
     };
+    text: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    header: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    placeholder: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    boxShadow: {
+        primary: string;
+        error: string;
+        default: string;
+    };
+    sidebar: {
+        background: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    boxborder: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    border: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    table: {
+        hover: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    disabled: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
 };
 export default palette;