pixelize-design-library 2.1.11 → 2.1.13

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -0,0 +1,274 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 styled_1 = __importDefault(require("@emotion/styled"));
+var react_2 = require("@chakra-ui/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var lucide_react_1 = require("lucide-react");
+var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: 5px;\n  box-shadow: ", ";\n"], ["\n  border: ", ";\n  border-radius: 5px;\n  box-shadow: ", ";\n"])), function (_a) {
+    var isActive = _a.isActive;
+    return isActive ? "1px solid #3182ce" : "1px solid #c0c6cc";
+}, function (_a) {
+    var isActive = _a.isActive;
+    return isActive
+        ? "-1px 1px 8px 4px rgb(49 130 206 / 24%), 0px 2px 6px 0 rgb(49 130 206 / 19%)"
+        : "none";
+});
+var TextAreaContainer = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  cursor: text;\n  padding: 12px 15px;\n  display: ", ";\n"], ["\n  width: 100%;\n  cursor: text;\n  padding: 12px 15px;\n  display: ", ";\n"])), function (_a) {
+    var isActive = _a.isActive;
+    return (isActive ? "block" : "none");
+});
+var PlaceholderText = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: #c0c6cc;\n  width: 100%;\n  cursor: text;\n  display: ", ";\n  padding: 12px 15px;\n"], ["\n  color: #c0c6cc;\n  width: 100%;\n  cursor: text;\n  display: ", ";\n  padding: 12px 15px;\n"])), function (_a) {
+    var isActive = _a.isActive;
+    return (isActive ? "block" : "none");
+});
+var InputTitle = styled_1.default.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border: none;\n  outline: none;\n  background: none;\n  color: black;\n  fontsize: 1rem;\n  fontweight: 500;\n  marginbottom: 2px;\n"], ["\n  width: 100%;\n  height: auto;\n  border: none;\n  outline: none;\n  background: none;\n  color: black;\n  fontsize: 1rem;\n  fontweight: 500;\n  marginbottom: 2px;\n"])));
+var NotesTextArea = styled_1.default.textarea(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n  width: 100%;\n  height: auto;\n  border: none;\n  outline: none;\n  background: none;\n  fontweight: 300;\n"], ["\n  color: ", ";\n  width: 100%;\n  height: auto;\n  border: none;\n  outline: none;\n  background: none;\n  fontweight: 300;\n"])), function (_a) {
+    var isActive = _a.isActive, noteValue = _a.noteValue;
+    return isActive && noteValue ? "#000000" : "#c0c6cc";
+});
+var FileUploadLabel = styled_1.default.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
+var AddTitleButton = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: #616e88;\n  cursor: pointer;\n  fontsize: 0.8rem;\n"], ["\n  color: #616e88;\n  cursor: pointer;\n  fontsize: 0.8rem;\n"])));
+var Button = styled_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: none;\n  padding: 3px 15px;\n  text-align: center;\n  text-decoration: none;\n  background: ", ";\n  color: ", ";\n  font-size: 1rem;\n  margin-right: 5px;\n  border-radius: 5px;\n  opacity: ", ";\n  cursor: ", ";\n  pointer-events: ", ";\n"], ["\n  border: none;\n  padding: 3px 15px;\n  text-align: center;\n  text-decoration: none;\n  background: ", ";\n  color: ", ";\n  font-size: 1rem;\n  margin-right: 5px;\n  border-radius: 5px;\n  opacity: ", ";\n  cursor: ", ";\n  pointer-events: ", ";\n"])), function (_a) {
+    var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading, theme = _a.theme;
+    return isSaveButton
+        ? noteValue && !isLoading
+            ? theme.colors.primary[500]
+            : theme.colors.primary[500]
+        : "white";
+}, function (_a) {
+    var isSaveButton = _a.isSaveButton, isLoading = _a.isLoading;
+    return isSaveButton && !isLoading ? "white" : "white";
+}, function (_a) {
+    var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading, disabled = _a.disabled;
+    return isSaveButton && (!noteValue || isLoading || disabled) ? "0.5" : "1";
+}, function (_a) {
+    var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading, disabled = _a.disabled;
+    return isSaveButton && (!noteValue || isLoading || disabled)
+        ? "initial"
+        : "pointer";
+}, function (_a) {
+    var isLoading = _a.isLoading;
+    return (isLoading ? "none" : "auto");
+});
+var CancelButton = styled_1.default.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  border: none;\n  color: #5e5c5c;\n  padding: 3px 15px;\n  text-align: center;\n  text-decoration: none;\n  background: white;\n  font-size: 1rem;\n  margin-right: 5px;\n  border-radius: 5px;\n"], ["\n  border: none;\n  color: #5e5c5c;\n  padding: 3px 15px;\n  text-align: center;\n  text-decoration: none;\n  background: white;\n  font-size: 1rem;\n  margin-right: 5px;\n  border-radius: 5px;\n"])));
+var FileViewer = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 300px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 300px;\n"])));
+var FileEdit = (0, styled_1.default)(lucide_react_1.X)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  cursor: pointer;\n  color: #ff0000;\n"], ["\n  cursor: pointer;\n  color: #ff0000;\n"])));
+var ErrorText = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  color: #ff0000;\n  font-size: 0.8rem;\n  margin-top: 8px;\n"], ["\n  color: #ff0000;\n  font-size: 0.8rem;\n  margin-top: 8px;\n"])));
+var countWords = function (text) {
+    return text.trim().split(/\s+/).length;
+};
+function NoteTextArea(_a) {
+    var _b = _a.width, width = _b === void 0 ? "100%" : _b, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _c = _a.isEditable, isEditable = _c === void 0 ? false : _c, saveButtonLoading = _a.saveButtonLoading, _d = _a.maxFileSize, maxFileSize = _d === void 0 ? 1 * 1024 * 1024 : _d, _e = _a.maxFilesSizeError, maxFilesSizeError = _e === void 0 ? "Some files are too large. Maximum allowed size is" : _e, _f = _a.maxNoteWordCount, maxNoteWordCount = _f === void 0 ? 15 : _f, onChange = _a.onChange, ref = _a.ref;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var noteAreaRef = (0, react_1.useRef)(null);
+    var _g = (0, react_1.useState)(false), isActive = _g[0], setIsActive = _g[1];
+    var _h = (0, react_1.useState)(""), noteValue = _h[0], setNoteValue = _h[1];
+    var _j = (0, react_1.useState)(""), titleValue = _j[0], setTitleValue = _j[1];
+    var _k = (0, react_1.useState)(false), titleShow = _k[0], setTitleShow = _k[1];
+    var _l = (0, react_1.useState)([]), files = _l[0], setFiles = _l[1];
+    var _m = (0, react_1.useState)(""), fileError = _m[0], setFileError = _m[1];
+    var _o = (0, react_1.useState)(false), isSaveDisabled = _o[0], setIsSaveDisabled = _o[1];
+    (0, react_1.useEffect)(function () {
+        var titleWordCount = countWords(titleValue);
+        setIsSaveDisabled(titleWordCount > maxNoteWordCount);
+    }, [titleValue, maxNoteWordCount]);
+    (0, react_1.useEffect)(function () {
+        var noteWordCount = countWords(noteValue);
+        setIsSaveDisabled(noteWordCount > maxNoteWordCount);
+    }, [noteValue, maxNoteWordCount]);
+    (0, react_1.useEffect)(function () {
+        if (isEditable) {
+            setIsActive(true);
+            if (value) {
+                setNoteValue(value);
+            }
+            if (title) {
+                setTitleValue(title);
+                setTitleShow(true);
+            }
+            if (file) {
+                setFiles(file);
+            }
+        }
+    }, [value, title, file, isEditable]);
+    (0, react_1.useEffect)(function () {
+        if (!saveButtonLoading) {
+            setIsActive(false);
+            if (!isEditable) {
+                setNoteValue("");
+                setTitleValue("");
+                setTitleShow(false);
+                setFiles([]);
+            }
+        }
+        if (isEditable) {
+            setIsActive(true);
+        }
+    }, [saveButtonLoading, isEditable]);
+    var handleTextArea = function () {
+        setIsActive(true);
+        if (!isEditable) {
+            setNoteValue("");
+            setTitleValue("");
+            setTitleShow(false);
+            setFiles([]);
+        }
+    };
+    var handleCloseTextArea = function () {
+        setIsActive(false);
+        if (handleCancel) {
+            handleCancel(!isActive);
+        }
+        if (!isEditable) {
+            setNoteValue("");
+            setTitleValue("");
+            setTitleShow(false);
+            setFiles([]);
+        }
+        setFileError("");
+    };
+    var handleNoteChange = function (event) {
+        setNoteValue(event.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value);
+        adjustHeight();
+    };
+    (0, react_1.useEffect)(function () {
+        if (isActive && noteAreaRef.current) {
+            noteAreaRef.current.focus();
+        }
+    }, [isActive]);
+    var adjustHeight = function () {
+        var textarea = noteAreaRef.current;
+        if (!textarea)
+            return;
+        textarea.style.height = "auto";
+        textarea.style.height = "".concat(textarea.scrollHeight, "px");
+    };
+    var handleSetTitle = function () {
+        setTitleShow(true);
+    };
+    var handleTitleChange = function (event) {
+        event.target.value.length === 0 && setTitleShow(false);
+        setTitleValue(event.target.value);
+    };
+    var formatBytes = function (bytes, decimals) {
+        if (decimals === void 0) { decimals = 2; }
+        if (bytes === 0)
+            return "0 Bytes";
+        var k = 1024;
+        var dm = decimals < 0 ? 0 : decimals;
+        var sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+        var i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+    };
+    var shortenFileName = function (name, maxLength) {
+        if (maxLength === void 0) { maxLength = 20; }
+        var extension = name.substring(name.lastIndexOf("."));
+        if (name.length <= maxLength)
+            return name;
+        var nameWithoutExtension = name.replace(extension, "");
+        var start = nameWithoutExtension.substring(0, maxLength - extension.length - 3);
+        return "".concat(start, "...").concat(extension, " ");
+    };
+    return (react_1.default.createElement(Container, { style: { width: width }, isActive: isActive },
+        react_1.default.createElement(PlaceholderText, { isActive: !isActive, onClick: handleTextArea },
+            react_1.default.createElement("span", null, "Add a note...")),
+        react_1.default.createElement(TextAreaContainer, { isActive: isActive },
+            titleShow && (react_1.default.createElement(InputTitle, { value: titleValue, onChange: handleTitleChange, placeholder: "Add a title...", ref: ref })),
+            react_1.default.createElement(NotesTextArea, { ref: noteAreaRef, isActive: isActive, noteValue: noteValue, value: noteValue, onChange: handleNoteChange, placeholder: "Add a note..." })),
+        isActive && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("hr", { style: { margin: 0 } }),
+            react_1.default.createElement("div", { style: { padding: "12px 15px" } },
+                react_1.default.createElement("div", { style: { display: "flex", alignItems: "center" } },
+                    react_1.default.createElement(FileUploadLabel, { htmlFor: "file-upload" },
+                        react_1.default.createElement(lucide_react_1.Paperclip, { size: 17 }),
+                        react_1.default.createElement("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: function (e) {
+                                var newFiles = Array.from(e.target.files || []);
+                                var validFiles = newFiles.filter(function (file) { return file.size <= maxFileSize; });
+                                var invalidFiles = newFiles.filter(function (file) { return file.size > maxFileSize; });
+                                if (invalidFiles.length > 0) {
+                                    setFileError("".concat(maxFilesSizeError, " ").concat(formatBytes(maxFileSize), "."));
+                                }
+                                else {
+                                    setFileError("");
+                                }
+                                if (validFiles.length > 0) {
+                                    setFiles(function (prevFiles) { return __spreadArray(__spreadArray([], prevFiles, true), validFiles, true); });
+                                }
+                            }, multiple: true })),
+                    !titleShow && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("div", { style: {
+                                height: "15px",
+                                width: "1px",
+                                backgroundColor: "#c0c6cc",
+                                marginRight: "5px",
+                                marginLeft: "5px",
+                            } }),
+                        react_1.default.createElement(AddTitleButton, { onClick: handleSetTitle }, "Add a Title"))),
+                    react_1.default.createElement("div", { style: { marginLeft: "auto" } },
+                        react_1.default.createElement(CancelButton, { onClick: handleCloseTextArea }, "Cancel"),
+                        react_1.default.createElement(Button, { isSaveButton: true, noteValue: noteValue, isLoading: saveButtonLoading, disabled: !noteValue || isSaveDisabled, theme: theme, onClick: function () {
+                                handleSubmit(noteValue, titleValue, files);
+                                // handleCloseTextArea();
+                            } },
+                            saveButtonLoading && (react_1.default.createElement("span", { style: { marginRight: "6px" } },
+                                react_1.default.createElement(react_2.Spinner, { thickness: "2px", speed: "0.75s", emptyColor: "gray.200", color: "blue.500", size: "xs" }))),
+                            "Save"))),
+                react_1.default.createElement("div", { style: { display: "flex", gap: "10px" } },
+                    react_1.default.createElement("div", null, "Note:"),
+                    react_1.default.createElement("div", null,
+                        "You can add up to ",
+                        maxNoteWordCount,
+                        " words only")),
+                fileError && react_1.default.createElement(ErrorText, null, fileError),
+                " ",
+                files.length > 0 && (react_1.default.createElement("div", null, files.map(function (item, index) { return (react_1.default.createElement(FileViewer, { key: index },
+                    react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("span", null, shortenFileName(item.name)),
+                        react_1.default.createElement("span", null, formatBytes(item.size))),
+                    react_1.default.createElement(FileEdit, { onClick: function () {
+                            return setFiles(files.filter(function (fileItem) { return fileItem !== item; }));
+                        } }))); }))))))));
+}
+exports.default = NoteTextArea;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;

package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts

@@ -0,0 +1,16 @@
+import { LegacyRef } from "react";
+export type NoteTextAreaProps = {
+    width: number | string;
+    handleSubmit: (noteValue: string, titleValue: string, file: File[], resetState: void) => void;
+    value?: string;
+    title?: string;
+    file?: File[];
+    isEditable?: boolean;
+    handleCancel?: (isActive: boolean) => void;
+    saveButtonLoading: boolean;
+    maxFileSize?: number;
+    maxFilesSizeError?: string;
+    maxNoteWordCount?: number;
+    onChange?: (value: string) => void;
+    ref?: LegacyRef<HTMLInputElement>;
+};

package/dist/Components/NoteTextArea/NoteTextAreaProps.js

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

package/dist/Components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { NumberInputProps } from "./NumberInputProps";
+export default function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, }: NumberInputProps): React.JSX.Element;

package/dist/Components/NumberInput/NumberInput.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 react_2 = require("@chakra-ui/react");
+function NumberInput(_a) {
+    var defaultValue = _a.defaultValue, min = _a.min, max = _a.max, precision = _a.precision, step = _a.step, clampValueOnBlur = _a.clampValueOnBlur, keepWithinRange = _a.keepWithinRange, value = _a.value, onChange = _a.onChange, size = _a.size, maxW = _a.maxW, allowMouseWheel = _a.allowMouseWheel, NumberIncrementStepperBg = _a.NumberIncrementStepperBg, NumberIncrementStepperActive = _a.NumberIncrementStepperActive, NumberIncrementStepperChildren = _a.NumberIncrementStepperChildren, NumberDecrementStepperBg = _a.NumberDecrementStepperBg, NumberDecrementStepperChildren = _a.NumberDecrementStepperChildren, NumberDecrementStepperActive = _a.NumberDecrementStepperActive;
+    return (react_1.default.createElement(react_2.NumberInput, { defaultValue: defaultValue, min: min, max: max, step: step, precision: precision, clampValueOnBlur: clampValueOnBlur, keepWithinRange: keepWithinRange, value: value, onChange: onChange, size: size, maxW: maxW, allowMouseWheel: allowMouseWheel },
+        react_1.default.createElement(react_2.NumberInputField, null),
+        react_1.default.createElement(react_2.NumberInputStepper, null,
+            react_1.default.createElement(react_2.NumberIncrementStepper, { bg: NumberIncrementStepperBg, _active: NumberIncrementStepperActive }, NumberIncrementStepperChildren),
+            react_1.default.createElement(react_2.NumberDecrementStepper, { bg: NumberDecrementStepperBg, _active: NumberDecrementStepperActive }, NumberDecrementStepperChildren))));
+}
+exports.default = NumberInput;

package/dist/Components/NumberInput/NumberInput.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/NumberInput/NumberInput.stories.js

@@ -0,0 +1,5 @@
+"use strict";
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import NumberInputs from './NumberInput';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/NumberInput/NumberInputProps.d.ts

@@ -0,0 +1,12 @@
+import { NumberInputProps as chakraNumbetInpurProps } from "@chakra-ui/react";
+export type NumberInputProps = Pick<chakraNumbetInpurProps, "defaultValue" | "min" | "max" | "precision" | "step" | "clampValueOnBlur" | "keepWithinRange" | "value" | "onChange" | "size" | "maxW" | "allowMouseWheel"> & {
+    NumberIncrementStepperBg?: string;
+    NumberIncrementStepperActive?: ActiveStyle;
+    NumberIncrementStepperChildren?: string;
+    NumberDecrementStepperBg?: string;
+    NumberDecrementStepperChildren?: string;
+    NumberDecrementStepperActive?: ActiveStyle;
+};
+export type ActiveStyle = {
+    bg: string;
+};

package/dist/Components/NumberInput/NumberInputProps.js

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

package/dist/Components/PinInput/PinInput.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ChakraPinInputProps } from "./PinInputProps";
+export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color, variant, pins, label, }: ChakraPinInputProps): React.JSX.Element;

package/dist/Components/PinInput/PinInput.js

@@ -0,0 +1,15 @@
+"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 react_2 = require("@chakra-ui/react");
+function PinInputs(_a) {
+    var otp = _a.otp, mask = _a.mask, defaultValue = _a.defaultValue, placeholder = _a.placeholder, manageFocus = _a.manageFocus, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, onChange = _a.onChange, onComplete = _a.onComplete, type = _a.type, color = _a.color, variant = _a.variant, _b = _a.pins, pins = _b === void 0 ? 3 : _b, label = _a.label;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        label && (react_1.default.createElement(react_2.Text, { fontWeight: "bold", marginBottom: "8px" }, label)),
+        react_1.default.createElement(react_2.HStack, null,
+            react_1.default.createElement(react_2.PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index })); })))));
+}
+exports.default = PinInputs;

package/dist/Components/PinInput/PinInput.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/PinInput/PinInput.stories.js

@@ -0,0 +1,6 @@
+"use strict";
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import PinInput from './PinInput';
+// import { ChakraPinInputProps } from './PinInputProps';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/PinInput/PinInputProps.d.ts

@@ -0,0 +1,9 @@
+import { PinInputProps } from "@chakra-ui/react";
+export type ChakraPinInputProps = Pick<PinInputProps, "otp" | "mask" | "defaultValue" | "placeholder" | "manageFocus" | "errorBorderColor" | "focusBorderColor" | "onChange" | "onComplete"> & {
+    type?: "alphanumeric" | "number";
+    size?: "xs" | "sm" | "md" | "lg";
+    variant?: "flushed" | "outline" | "filled" | "unstyled";
+    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    pins: number;
+    label?: string;
+};

package/dist/Components/PinInput/PinInputProps.js

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

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/Components/ProductCard/ProductCard.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ProductCardProps } from './ProductCardProps';
+declare const ProductCard: ({ label, productImage, rating, reviews, tags, options, onAddToCart, bag, description, }: ProductCardProps) => React.JSX.Element;
+export default ProductCard;

package/dist/Components/ProductCard/ProductCard.js

@@ -0,0 +1,51 @@
+"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 react_2 = require("@chakra-ui/react");
+var ProductTags_1 = __importDefault(require("./ProductTags"));
+var ProductReview_1 = __importDefault(require("./ProductReview"));
+var ProductPrice_1 = __importDefault(require("./ProductPrice"));
+var Button_1 = __importDefault(require("../Button/Button"));
+var ProductLabel_1 = __importDefault(require("./ProductLabel"));
+var ProductCard = function (_a) {
+    var label = _a.label, productImage = _a.productImage, rating = _a.rating, reviews = _a.reviews, tags = _a.tags, options = _a.options, onAddToCart = _a.onAddToCart, bag = _a.bag, description = _a.description;
+    var _b = (0, react_1.useState)(false), hover = _b[0], setHover = _b[1];
+    return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063 rem", borderRadius: "lg", overflow: "hidden", p: 3, w: "16.25rem", position: "relative", bg: "white", boxShadow: "lg" },
+        react_1.default.createElement(react_2.Box, { onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, h: "11.25rem", w: "full", overflow: "hidden" },
+            react_1.default.createElement(react_2.Image, { src: hover && productImage.hover ? productImage.hover : productImage.visibile, alt: label, w: "full", h: "full", objectFit: "cover" }),
+            bag && (react_1.default.createElement(react_2.Badge, { colorScheme: bag.color || "red", position: "absolute", top: 2, right: 2 }, bag.label))),
+        react_1.default.createElement(react_2.VStack, { spacing: 2, align: "start", mt: 3 },
+            react_1.default.createElement(ProductLabel_1.default, { label: label, description: description }),
+            tags && react_1.default.createElement(ProductTags_1.default, { tags: tags }),
+            rating && reviews &&
+                react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews }),
+            options && react_1.default.createElement(ProductPrice_1.default, { options: options }),
+            onAddToCart && react_1.default.createElement(Button_1.default, { colorScheme: "orange", size: "sm", width: "100%", onClick: onAddToCart }, "Add to Cart"))));
+};
+exports.default = ProductCard;

package/dist/Components/ProductCard/ProductCardProps.d.ts

@@ -0,0 +1,26 @@
+export type ProductCardProps = {
+    label: string;
+    description?: string;
+    productImage: productImage;
+    tags?: string[];
+    rating?: string | number;
+    reviews?: string | number;
+    options?: options[];
+    onClick?: () => void;
+    onAddToCart?: () => void;
+    bag?: bag;
+};
+export type options = {
+    label: string;
+    weight: number;
+    price: number;
+    offer: number;
+};
+export type bag = {
+    label: string;
+    color?: string;
+};
+export type productImage = {
+    visibile: string;
+    hover?: string;
+};

package/dist/Components/ProductCard/ProductCardProps.js

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

package/dist/Components/ProductCard/ProductLabel.d.ts

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

package/dist/Components/ProductCard/ProductLabel.js

@@ -0,0 +1,14 @@
+"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 = require("@chakra-ui/react");
+var react_2 = __importDefault(require("react"));
+var ProductLabel = function (_a) {
+    var label = _a.label, description = _a.description;
+    return (react_2.default.createElement(react_1.Box, null,
+        react_2.default.createElement(react_1.Text, { fontWeight: "bold" }, label),
+        description && react_2.default.createElement(react_1.Text, { fontSize: "xs", fontStyle: "italic" }, description)));
+};
+exports.default = ProductLabel;

package/dist/Components/ProductCard/ProductPrice.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { options } from './ProductCardProps';
+type ProductPriceProps = {
+    options: options[];
+};
+declare const ProductPrice: ({ options }: ProductPriceProps) => React.JSX.Element;
+export default ProductPrice;