pixelize-design-library 1.1.89 → 1.1.92

package/dist/App.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
+import './global.css';
 declare function App(): React.JSX.Element;
 export default App;

package/dist/App.js

@@ -34,6 +34,7 @@ var NavigationBar_1 = __importDefault(require("./Components/NavigationBar/Naviga
 var Breadcrumbs_1 = __importDefault(require("./Components/Breadcrumbs/Breadcrumbs"));
 var Layout_1 = __importDefault(require("./Layout"));
 var lucide_react_1 = require("lucide-react");
+require("./global.css");
 function App() {
     function useWindowSize() {
         var _a = (0, react_1.useState)({

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, sx, }: ButtonProps): React.JSX.Element;
+declare function Button({ label, onClick, color, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, padding, 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, 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, width = _a.width, padding = _a.padding, 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: "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: {
+    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: {
                 overflow: "hidden",
                 textOverflow: "ellipsis",
                 whiteSpace: "nowrap",
                 maxWidth: "100%",
-            } }, label)));
+            }, fontSize: "1rem", fontWeight: 500 }, label)));
 }
 exports.default = (0, react_1.memo)(Button);

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

@@ -6,4 +6,5 @@ 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/Buttons/Buttons.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ButtonsProps } from './ButtonsProps';
+declare const Buttons: ({ onClick, label, className, disabled }: ButtonsProps) => React.JSX.Element;
+export default Buttons;

package/dist/Components/Buttons/Buttons.js

@@ -0,0 +1,11 @@
+"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 Buttons = function (_a) {
+    var onClick = _a.onClick, label = _a.label, className = _a.className, disabled = _a.disabled;
+    return (react_1.default.createElement("button", { onClick: onClick, className: "bg-purple-600 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-offset-2  ".concat(className, " ").concat(disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'), disabled: disabled }, label));
+};
+exports.default = Buttons;

package/dist/Components/Buttons/ButtonsProps.d.ts

@@ -0,0 +1,6 @@
+export type ButtonsProps = {
+    label: string;
+    onClick: () => void;
+    className?: string;
+    disabled?: boolean;
+};

package/dist/Components/Buttons/ButtonsProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Common/ErrorComponent.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const ErrorComponent: ({ error, errorClassName }: {
+    error: string;
+    errorClassName?: string | undefined;
+}) => React.JSX.Element;
+export default ErrorComponent;

package/dist/Components/Common/ErrorComponent.js

@@ -0,0 +1,16 @@
+"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 ErrorComponent = function (_a) {
+    var error = _a.error, errorClassName = _a.errorClassName;
+    return (react_1.default.createElement("p", { className: "mt-1 text-sm text-[#F2463A] flex items-center gap-1 ".concat(errorClassName) },
+        react_1.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
+            react_1.default.createElement("circle", { cx: "50", cy: "50", r: "50", fill: "#EF4444" }),
+            react_1.default.createElement("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: "white" }),
+            react_1.default.createElement("circle", { cx: "50", cy: "28", r: "4", fill: "white" })),
+        error));
+};
+exports.default = ErrorComponent;

package/dist/Components/Common/ErrorMessage.js

@@ -5,8 +5,12 @@ 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_2.FormErrorMessage, { fontSize: 14 }, errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error"));
+    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"))));
 };
 exports.default = ErrorMessage;

package/dist/Components/Common/FormLabel.js

@@ -7,16 +7,12 @@ 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.1rem", fontWeight: 600, fontSize: 14 },
+        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" },
             label,
-            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 }))))));
+            isRequired && react_1.default.createElement("span", { style: { color: "red", paddingLeft: "0.4rem" } }, "*"))));
 };
 exports.TextLabel = TextLabel;

package/dist/Components/Common/Label.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const Label: ({ label, labelClassName, isRequired }: {
+    label: string;
+    labelClassName?: string | undefined;
+    isRequired?: boolean | undefined;
+}) => React.JSX.Element;
+export default Label;

package/dist/Components/Common/Label.js

@@ -0,0 +1,13 @@
+"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 Label = function (_a) {
+    var label = _a.label, labelClassName = _a.labelClassName, isRequired = _a.isRequired;
+    return (react_1.default.createElement("label", { className: "block text-sm font-medium text-[#434853] mb-1 ".concat(labelClassName), htmlFor: label },
+        label,
+        isRequired && react_1.default.createElement("span", { className: "text-[#F2463A] ml-1" }, "*")));
+};
+exports.default = Label;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { InputProps } from "./InputProps";
+declare const _default: React.MemoExoticComponent<({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired }: InputProps) => React.JSX.Element>;
+export default _default;

package/dist/Components/Input/Input/Input.js

@@ -0,0 +1,45 @@
+"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 lucide_react_1 = require("lucide-react");
+var Label_1 = __importDefault(require("../../Common/Label"));
+var ErrorComponent_1 = __importDefault(require("../../Common/ErrorComponent"));
+var Input = function (_a) {
+    var label = _a.label, type = _a.type, value = _a.value, onChange = _a.onChange, error = _a.error, placeholder = _a.placeholder, className = _a.className, inputBoxClassName = _a.inputBoxClassName, isRequired = _a.isRequired;
+    var _b = (0, react_1.useState)(false), showPassword = _b[0], setShowPassword = _b[1];
+    var isPassword = type === "password";
+    var inputType = isPassword ? (showPassword ? "text" : "password") : type;
+    return (react_1.default.createElement("div", { className: "mb-4 ".concat(inputBoxClassName !== null && inputBoxClassName !== void 0 ? inputBoxClassName : "") },
+        react_1.default.createElement(Label_1.default, { label: label, isRequired: isRequired }),
+        react_1.default.createElement("div", { className: "relative w-full overflow-hidden" },
+            react_1.default.createElement("input", { type: inputType, value: value, onChange: function (e) { return onChange(e.target.value); }, placeholder: placeholder, className: "".concat(className && " ".concat(className), " w-full px-4 py-2 rounded-md border focus:outline-none focus:ring-purple-500\n                    ").concat(error ? "border-red-500 text-[#161B25]" : '', "\n                    ").concat(value ? "border-purple-500 text-gray-900" : "border-gray-300 text-gray-900", "\n                    ").concat(error ? "focus:ring-red-400" : '', "\n                    ").concat(value ? "focus:ring-purple-500" : "focus:ring-indigo-300", "\n                    ").concat(isPassword ? "pr-10" : "", "\n                    "), required: isRequired }),
+            isPassword && (react_1.default.createElement("button", { type: "button", className: "absolute inset-y-0 right-3 flex items-center text-gray-400", onClick: function () { return setShowPassword(function (prev) { return !prev; }); } }, showPassword ? (react_1.default.createElement(lucide_react_1.Eye, { className: "h-5 w-5" })) : (react_1.default.createElement(lucide_react_1.EyeOff, { className: "h-5 w-5" }))))),
+        error && (react_1.default.createElement(ErrorComponent_1.default, { error: error }))));
+};
+exports.default = react_1.default.memo(Input);

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

@@ -0,0 +1,17 @@
+export type InputProps = {
+    label: string;
+    type?: "email" | "password" | "text" | "number";
+    value: string;
+    onChange: (val: string) => void;
+    error?: string;
+    placeholder?: string;
+    className?: string;
+    inputBoxClassName?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    disabled?: boolean;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    isRequired?: boolean;
+};

package/dist/Components/Input/Input/InputProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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, 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, height, 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,30 +21,29 @@ 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 ? "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 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 theme = (0, useCustomTheme_1.useCustomTheme)();
     var getPadding = function () {
         if (inputLeftIcon && inputRightIcon) {
-            return "0 1.6rem 0 1.6rem";
+            return { pl: "1.9rem", pr: "1.9rem" };
         }
         else if (inputLeftIcon) {
-            return "0 0.5rem 0 1.6rem";
+            return { pl: "1.9rem", pr: "1rem" };
         }
         else if (inputRightIcon) {
-            return "0 1.6rem 0 0.5rem";
+            return { pl: "1rem", pr: "1.9rem" };
         }
         else {
-            return "0 0.5rem";
+            return { pl: "1rem", pr: "1rem" };
         }
     };
-    return (react_1.default.createElement(react_2.FormControl, { isInvalid: error },
+    var padding = getPadding();
+    return (react_1.default.createElement(react_2.FormControl, { isInvalid: error, w: width },
         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: 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))),
+        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))),
         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,6 +1,5 @@
-/// <reference types="react" />
 import { InputProps } from "@chakra-ui/react";
-export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "placeholder" | "onBlur" | "onFocus" | "isDisabled" | "isRequired" | "isReadOnly" | "width" | "errorBorderColor" | "size"> & {
+export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "placeholder" | "onBlur" | "onFocus" | "isDisabled" | "isRequired" | "isReadOnly" | "width" | "height" | "errorBorderColor" | "size"> & {
     label?: string;
     id?: string;
     name?: string;
@@ -8,9 +7,9 @@ export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "p
     errorMessage?: string;
     helperText?: string;
     onRightIconclick?: () => void;
-    inputRightIcon?: JSX.Element | string;
+    inputRightIcon?: any;
     onLeftIconClick?: () => void;
-    inputLeftIcon?: JSX.Element | string;
+    inputLeftIcon?: any;
     inputStyle?: {};
     inputGroupStyle?: {};
     isInformation?: boolean;

package/dist/Components/PinInputs/PinInputs.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PinInputsProps } from './PinInputsProps';
+declare const PinInputs: ({ length, label, error, onChange, onComplete, mask, placeholder, }: PinInputsProps) => React.JSX.Element;
+export default PinInputs;

package/dist/Components/PinInputs/PinInputs.js

@@ -0,0 +1,71 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 Label_1 = __importDefault(require("../Common/Label"));
+var ErrorComponent_1 = __importDefault(require("../Common/ErrorComponent"));
+var PinInputs = function (_a) {
+    var _b = _a.length, length = _b === void 0 ? 3 : _b, label = _a.label, error = _a.error, onChange = _a.onChange, onComplete = _a.onComplete, _c = _a.mask, mask = _c === void 0 ? false : _c, _d = _a.placeholder, placeholder = _d === void 0 ? "*" : _d;
+    var _e = (0, react_1.useState)(Array(length).fill("")), values = _e[0], setValues = _e[1];
+    var inputsRef = (0, react_1.useRef)([]);
+    var handleChange = function (index, value) {
+        var _a;
+        if (!/^[0-9]?$/.test(value))
+            return;
+        var newValues = __spreadArray([], values, true);
+        newValues[index] = value;
+        setValues(newValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(""));
+        if (value && index < length - 1) {
+            (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (newValues.every(function (v) { return v !== ""; })) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValues.join(""));
+        }
+    };
+    var handleKeyDown = function (e, index) {
+        var _a;
+        if (e.key === "Backspace" && !values[index] && index > 0) {
+            (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    return (react_1.default.createElement("div", null,
+        label && react_1.default.createElement(Label_1.default, { label: label }),
+        react_1.default.createElement("div", { className: "flex space-x-2" }, Array.from({ length: length }).map(function (_, index) { return (react_1.default.createElement("input", { key: index, ref: function (el) { return (inputsRef.current[index] = el); }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(e, index); }, className: "w-12 h-12 text-center border rounded-md text-lg focus:outline-none focus:ring-2 ".concat(error ? "border-red-500 focus:ring-red-300" : "border-gray-300 focus:ring-blue-500") })); })),
+        error && react_1.default.createElement(ErrorComponent_1.default, { error: error })));
+};
+exports.default = PinInputs;

package/dist/Components/PinInputs/PinInputsProps.d.ts

@@ -0,0 +1,9 @@
+export type PinInputsProps = {
+    length?: number;
+    label?: string;
+    error?: string;
+    mask?: boolean;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+};

package/dist/Components/PinInputs/PinInputsProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Layout.js

@@ -58,6 +58,7 @@ var toster_1 = __importDefault(require("./Pages/toster"));
 var input_1 = __importDefault(require("./Pages/input"));
 var alertdialog_1 = __importDefault(require("./Pages/alertdialog"));
 var table_1 = require("./Pages/table");
+var TInput_1 = __importDefault(require("./Pages/TInput"));
 var Layout = function () {
     var _a = (0, react_2.useState)(window.location.pathname), currentPath = _a[0], setCurrentPath = _a[1];
     var navigate = function (path) {
@@ -73,6 +74,9 @@ var Layout = function () {
             window.removeEventListener("popstate", handlePopState);
         };
     }, []);
+    var switchTheme = function (themeName) {
+        document.documentElement.setAttribute('data-theme', themeName);
+    };
     var renderPage = function () {
         switch (currentPath) {
             case "/alertdialog":
@@ -131,10 +135,12 @@ var Layout = function () {
                 return react_2.default.createElement(checkbox_1.default, null);
             case "/toster":
                 return react_2.default.createElement(toster_1.default, null);
-            case "/input":
+            case "/InputPage":
                 return react_2.default.createElement(input_1.default, null);
             case "/table":
                 return react_2.default.createElement(table_1.TableExample, null);
+            case "/tinput":
+                return react_2.default.createElement(TInput_1.default, null);
             case "/":
             default:
         }
@@ -170,8 +176,13 @@ var Layout = function () {
             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("/input"); } }, "Input"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/table"); } }, "Table")),
+            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("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("button", { onClick: function () { return switchTheme('theme2'); } }, "Switch to Theme 2")),
         react_2.default.createElement("br", null),
         react_2.default.createElement("br", null),
         renderPage()));

package/dist/Pages/TInput.d.ts

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

package/dist/Pages/TInput.js

@@ -0,0 +1,43 @@
+"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 Input_1 = __importDefault(require("../Components/Input/Input/Input"));
+var Buttons_1 = __importDefault(require("../Components/Buttons/Buttons"));
+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];
+    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" }),
+        react_1.default.createElement(PinInputs_1.default, { length: 6, error: "", onComplete: function (value) { console.log(value, "value"); } }),
+        react_1.default.createElement(Buttons_1.default, { label: "Sign In", onClick: function () { } })));
+};
+exports.default = TInput;

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", color: "blue", size: "md", width: 360, padding: "22px" })));
 };
 exports.default = ButtonPage;

package/dist/Pages/input.js

@@ -12,17 +12,22 @@ var InputPage = function () {
             //helperText="Hello"
             //errorMessage="Required"
             //error={true}
-            type: "text", inputRightIcon: react_1.default.createElement(lucide_react_1.User, { color: "gray.300" }), onRightIconclick: function () {
+            type: "email", inputRightIcon: react_1.default.createElement(lucide_react_1.User, { color: "#FF0000" }), 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", 
+            }, 
+            // inputLeftIcon={<User color="#FF0000"/>}
+            // onLeftIconClick={() => {
+            //   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/Theme/Default/palette.d.ts

@@ -195,6 +195,18 @@ declare const palette: {
         subtle: string;
         muted: string;
         neutral: string;
+        base: string;
+        tableHeader: string;
+    };
+    text: {
+        heading: string;
+        body: string;
+        subtle: string;
+        input: string;
+    };
+    border: {
+        default: string;
+        light: string;
     };
 };
 export default palette;