pixelize-design-library 1.1.93 → 1.1.95

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

@@ -12,14 +12,18 @@ var ButtonPage = function () {
         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" }
+                {
+                    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", color: "blue", size: "md", width: 100 })));
+        react_1.default.createElement(Button_1.default, { label: "Button", onClick: function () { }, variant: "solid", size: "xs" })));
 };
 exports.default = ButtonPage;

package/dist/Pages/input.js

@@ -5,24 +5,36 @@ 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: "text", inputRightIcon: react_1.default.createElement(lucide_react_1.User, { color: "gray.300" }), onRightIconclick: function () {
-                console.log("icon click");
-            }, inputLeftIcon: react_1.default.createElement(lucide_react_1.User, { color: "gray.300" }), onLeftIconClick: function () {
-                console.log("icon click");
-            }, key: "input", 
+            // error={true}
+            type: "email", 
+            // inputRightIcon={<User color="#FF0000" />}
+            // onRightIconclick={() => {
+            //   console.log("icon click");
+            // }}
+            // inputLeftIcon={<User color="#FF0000" />}
+            // onLeftIconClick={() => {
+            //   console.log("icon click");
+            // }}
+            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);
-            }, helperText: "sometibg", isRequired: true, informationMessage: "This is information", isInformation: true })));
+            }, onKeyDown: function () {
+                console.log("keydown");
+            }, onBlur: function () {
+                console.log("blur");
+            }, 
+            // helperText="sometibg"
+            isRequired: true, informationMessage: "This is information", isInformation: true })));
 };
 exports.default = InputPage;

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

@@ -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;
@@ -199,14 +262,109 @@ declare const palette: {
         tableHeader: string;
     };
     text: {
-        heading: string;
-        body: string;
-        subtle: string;
-        input: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
     };
-    border: {
+    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;
-        light: 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;