pixelize-design-library 1.1.92 → 1.1.93

package/dist/Components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { ButtonProps } from "./ButtonProps";
-declare function Button({ label, onClick, color, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, padding, sx, }: ButtonProps): React.JSX.Element;
+declare function Button({ label, onClick, color, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, sx, }: ButtonProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Button>;
 export default _default;

package/dist/Components/Button/Button.js

@@ -38,7 +38,7 @@ var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function Button(_a) {
-    var label = _a.label, onClick = _a.onClick, color = _a.color, _b = _a.variant, variant = _b === void 0 ? "solid" : _b, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, size = _a.size, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.loadingText, loadingText = _e === void 0 ? "Loading" : _e, type = _a.type, width = _a.width, padding = _a.padding, sx = _a.sx;
+    var label = _a.label, onClick = _a.onClick, color = _a.color, _b = _a.variant, variant = _b === void 0 ? "solid" : _b, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, size = _a.size, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.loadingText, loadingText = _e === void 0 ? "Loading" : _e, type = _a.type, sx = _a.sx;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var buttonColor = !color ? theme.colors.primary[500] : color;
     var variantStyles = {
@@ -78,12 +78,12 @@ function Button(_a) {
         },
     };
     var appliedVariantStyle = !color ? variantStyles[variant] : {};
-    return (react_1.default.createElement(react_2.Button, __assign({ type: type, onClick: onClick, width: width || "fit-content", padding: padding, borderRadius: "4px", bg: "#9A4FE5", color: "white", _hover: { bg: "#8847C5" }, variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, sx: sx }, appliedVariantStyle),
-        react_1.default.createElement(react_2.Text, { sx: {
+    return (react_1.default.createElement(react_2.Button, __assign({ type: type, onClick: onClick, width: "fit-content", colorScheme: buttonColor, variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon }, appliedVariantStyle, { sx: sx }),
+        react_1.default.createElement(react_2.Box, { sx: {
                 overflow: "hidden",
                 textOverflow: "ellipsis",
                 whiteSpace: "nowrap",
                 maxWidth: "100%",
-            }, fontSize: "1rem", fontWeight: 500 }, label)));
+            } }, label)));
 }
 exports.default = (0, react_1.memo)(Button);

package/dist/Components/Button/ButtonProps.d.ts

@@ -6,5 +6,4 @@ export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "righ
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
     color?: string;
     type?: "button" | "submit" | "reset";
-    padding?: string;
 };

package/dist/Components/Common/ErrorMessage.js

@@ -5,12 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
-var lucide_react_1 = require("lucide-react");
 var ErrorMessage = function (_a) {
     var errorMessage = _a.errorMessage;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.FormErrorMessage, { fontSize: "14px" },
-            react_1.default.createElement(lucide_react_1.Info, { width: "14px" }),
-            react_1.default.createElement(react_2.Text, { ml: "3px" }, errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error"))));
+    return (react_1.default.createElement(react_2.FormErrorMessage, { fontSize: 14 }, errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error"));
 };
 exports.default = ErrorMessage;

package/dist/Components/Common/FormLabel.js

@@ -7,12 +7,16 @@ exports.TextLabel = void 0;
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var lucide_react_1 = require("lucide-react");
 var TextLabel = function (_a) {
     var label = _a.label, id = _a.id, _b = _a.isRequired, isRequired = _b === void 0 ? false : _b, _c = _a.isInformation, isInformation = _c === void 0 ? false : _c, _d = _a.informationMessage, informationMessage = _d === void 0 ? "" : _d;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: "3px" },
-        react_1.default.createElement(react_2.FormLabel, { htmlFor: id !== null && id !== void 0 ? id : label, color: theme.colors.gray[600], mb: "0.375rem", fontWeight: 400, fontSize: "0.875rem" },
+        react_1.default.createElement(react_2.FormLabel, { htmlFor: id !== null && id !== void 0 ? id : label, color: theme.colors.gray[600], mb: "0.1rem", fontWeight: 600, fontSize: 14 },
             label,
-            isRequired && react_1.default.createElement("span", { style: { color: "red", paddingLeft: "0.4rem" } }, "*"))));
+            isRequired && react_1.default.createElement("span", { style: { color: "red" } }, "*")),
+        isInformation && informationMessage && (react_1.default.createElement(react_2.Tooltip, { label: informationMessage, hasArrow: true, placement: "top", bg: "gray.600", color: "white", fontSize: "10px" },
+            react_1.default.createElement(react_2.Box, { cursor: "pointer" },
+                react_1.default.createElement(react_2.Icon, { as: lucide_react_1.InfoIcon, color: "gray.500", boxSize: 4 }))))));
 };
 exports.TextLabel = TextLabel;

package/dist/Components/Input/TextInput.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { TextInputProps } from "./TextInputProps";
-declare function TextInput({ label, type, id, name, onChange, onBlur, onFocus, isDisabled, isReadOnly, isRequired, value, placeholder, width, height, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputLeftIcon, onLeftIconClick, inputGroupStyle, inputStyle, size, isInformation, informationMessage, leftElementStyle, rightElementStyle, }: TextInputProps): React.JSX.Element;
+declare function TextInput({ label, type, id, name, onChange, onBlur, onFocus, isDisabled, isReadOnly, isRequired, value, placeholder, width, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputLeftIcon, onLeftIconClick, inputGroupStyle, inputStyle, size, isInformation, informationMessage, leftElementStyle, rightElementStyle, }: TextInputProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof TextInput>;
 export default _default;

package/dist/Components/Input/TextInput.js

@@ -21,29 +21,30 @@ var FormLabel_1 = require("../Common/FormLabel");
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 function TextInput(_a) {
-    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "360px" : _g, _h = _a.height, height = _h === void 0 ? "44px" : _h, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputLeftIcon = _a.inputLeftIcon, onLeftIconClick = _a.onLeftIconClick, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _j = _a.size, size = _j === void 0 ? "md" : _j, _k = _a.isInformation, isInformation = _k === void 0 ? false : _k, informationMessage = _a.informationMessage, leftElementStyle = _a.leftElementStyle, rightElementStyle = _a.rightElementStyle;
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "250px" : _g, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputLeftIcon = _a.inputLeftIcon, onLeftIconClick = _a.onLeftIconClick, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _h = _a.size, size = _h === void 0 ? "sm" : _h, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage, leftElementStyle = _a.leftElementStyle, rightElementStyle = _a.rightElementStyle;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var getPadding = function () {
         if (inputLeftIcon && inputRightIcon) {
-            return { pl: "1.9rem", pr: "1.9rem" };
+            return "0 1.6rem 0 1.6rem";
         }
         else if (inputLeftIcon) {
-            return { pl: "1.9rem", pr: "1rem" };
+            return "0 0.5rem 0 1.6rem";
         }
         else if (inputRightIcon) {
-            return { pl: "1rem", pr: "1.9rem" };
+            return "0 1.6rem 0 0.5rem";
         }
         else {
-            return { pl: "1rem", pr: "1rem" };
+            return "0 0.5rem";
         }
     };
-    var padding = getPadding();
-    return (react_1.default.createElement(react_2.FormControl, { isInvalid: error, w: width },
+    return (react_1.default.createElement(react_2.FormControl, { isInvalid: error },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
-        react_1.default.createElement(react_2.InputGroup, { width: "100%", style: inputGroupStyle, height: height },
-            inputLeftIcon && (react_1.default.createElement(react_2.InputLeftElement, __assign({ onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none", display: "flex", alignItems: "center", justifyContent: "center", height: height, width: "2rem", cursor: onLeftIconClick ? "pointer" : "default" }, leftElementStyle), inputLeftIcon)),
-            react_1.default.createElement(react_2.Input, __assign({ type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, errorBorderColor: error ? "crimson" : "", isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, height: height, fontWeight: 500, color: "#161B25", bg: "gray.50", fontSize: "0.875rem", letterSpacing: "0.7px", borderRadius: "0.25rem", border: "1px", borderColor: error ? "#F2463A" : "#D6D8DB", _placeholder: { color: "gray.400", fontStyle: "italic" }, pt: "13px", pb: "13px" }, padding, inputStyle)),
-            inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, __assign({ onClick: onRightIconclick, pointerEvents: onRightIconclick ? "auto" : "none", display: "flex", alignItems: "center", justifyContent: "center", height: height, width: "2rem" }, rightElementStyle), inputRightIcon))),
+        react_1.default.createElement(react_2.InputGroup, { width: width, style: inputGroupStyle },
+            inputLeftIcon && (react_1.default.createElement(react_2.InputLeftElement, { onClick: onLeftIconClick, style: __assign(__assign({}, leftElementStyle), { height: "1.8rem", width: "1.8rem", cursor: "pointer" }) }, inputLeftIcon)),
+            react_1.default.createElement(react_2.Input, { type: type, 
+                // variant={variant}
+                placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, errorBorderColor: error ? "crimson" : "", isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.light, fontWeight: 600, color: theme.colors.gray[600], padding: getPadding(), fontSize: 15, letterSpacing: 0.7 }) }),
+            inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, { onClick: onRightIconclick, style: __assign(__assign({}, rightElementStyle), { height: "1.8rem", width: "1.8rem" }) }, inputRightIcon))),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }

package/dist/Components/Input/TextInputProps.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { InputProps } from "@chakra-ui/react";
-export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "placeholder" | "onBlur" | "onFocus" | "isDisabled" | "isRequired" | "isReadOnly" | "width" | "height" | "errorBorderColor" | "size"> & {
+export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "placeholder" | "onBlur" | "onFocus" | "isDisabled" | "isRequired" | "isReadOnly" | "width" | "errorBorderColor" | "size"> & {
     label?: string;
     id?: string;
     name?: string;
@@ -7,9 +8,9 @@ export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "p
     errorMessage?: string;
     helperText?: string;
     onRightIconclick?: () => void;
-    inputRightIcon?: any;
+    inputRightIcon?: JSX.Element | string;
     onLeftIconClick?: () => void;
-    inputLeftIcon?: any;
+    inputLeftIcon?: JSX.Element | string;
     inputStyle?: {};
     inputGroupStyle?: {};
     isInformation?: boolean;

package/dist/Pages/button.js

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

package/dist/Pages/input.js

@@ -12,22 +12,17 @@ var InputPage = function () {
             //helperText="Hello"
             //errorMessage="Required"
             //error={true}
-            type: "email", inputRightIcon: react_1.default.createElement(lucide_react_1.User, { color: "#FF0000" }), onRightIconclick: function () {
+            type: "text", inputRightIcon: react_1.default.createElement(lucide_react_1.User, { color: "gray.300" }), onRightIconclick: function () {
                 console.log("icon click");
-            }, 
-            // inputLeftIcon={<User color="#FF0000"/>}
-            // onLeftIconClick={() => {
-            //   console.log("icon click");
-            // }}
-            key: "input", 
+            }, inputLeftIcon: react_1.default.createElement(lucide_react_1.User, { color: "gray.300" }), onLeftIconClick: function () {
+                console.log("icon click");
+            }, key: "input", 
             // border={"0px solid"}
             // padding={"0px"}
             // inputStyle={{ border: "0px solid", padding: "0px" }}
             // inputGroupStyle={{ border: "0px solid", padding: "0px" }}
             error: true, errorMessage: "Required", onChange: function (e) {
                 console.log(e.target.files);
-            }, 
-            // helperText="sometibg"
-            isRequired: true, informationMessage: "This is information", isInformation: true })));
+            }, helperText: "sometibg", isRequired: true, informationMessage: "This is information", isInformation: true })));
 };
 exports.default = InputPage;

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import "./bootstrap";
 import Accordian from "./Components/Accordion/Accordion";
 import AlertDialog from "./Components/AlertDialog/AlertDialog";
 import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";

package/dist/index.js

@@ -1,4 +1,5 @@
 "use strict";
+// import "./bootstrap";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -28,7 +29,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
 exports.debounce = void 0;
-require("./bootstrap");
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.1.92",
+  "version": "1.1.93",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",