pixelize-design-library 1.0.36 → 1.0.38

package/README.md

@@ -36,6 +36,7 @@ PixelizeDesign Library Components Are Below
 - InputTextArea,
 - Loading,
 - Modal,
+- MultiSelect, \* New
 - NavigationBar,
 - NoteTextArea,
 - NumberInput,
@@ -54,4 +55,4 @@ PixelizeDesign Library Components Are Below
 - Toaster,
   - useToaster,
 - ToolTip,
-- VerifyEmailOtp \* New
+- VerifyEmailOtp 

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { VerifyEmailOtpProps } from "./VerifyEmailOtpProps";
-export default function VerifyEmailOtp({ resendMaill, onChange, onComplete, placeholder, pins, description, title, }: VerifyEmailOtpProps): React.JSX.Element;
+export default function VerifyEmailOtp({ resendMaill, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, }: VerifyEmailOtpProps): React.JSX.Element;

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -7,7 +7,7 @@ var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lu_1 = require("react-icons/lu");
 function VerifyEmailOtp(_a) {
-    var resendMaill = _a.resendMaill, onChange = _a.onChange, onComplete = _a.onComplete, _b = _a.placeholder, placeholder = _b === void 0 ? "" : _b, _c = _a.pins, pins = _c === void 0 ? 5 : _c, description = _a.description, title = _a.title;
+    var resendMaill = _a.resendMaill, onChange = _a.onChange, onComplete = _a.onComplete, _b = _a.placeholder, placeholder = _b === void 0 ? "" : _b, _c = _a.pins, pins = _c === void 0 ? 5 : _c, description = _a.description, title = _a.title, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isInvalid, isInvalid = _e === void 0 ? false : _e;
     return (react_1.default.createElement(react_2.Card, { style: {
             display: "flex",
             justifyContent: "center",
@@ -23,7 +23,7 @@ function VerifyEmailOtp(_a) {
             " your new Pixel Account"),
         react_1.default.createElement("div", { style: { marginBottom: "2%" } },
             react_1.default.createElement(react_2.HStack, null,
-                react_1.default.createElement(react_2.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index })); })))),
+                react_1.default.createElement(react_2.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index })); })))),
         react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
             "Didn't receive the code?",
             " ",

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.d.ts

@@ -6,4 +6,6 @@ export type VerifyEmailOtpProps = {
     pins: number;
     title: string;
     description: string;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
 };

package/dist/Components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { MultiSelectProps } from "./MultiSelectProps";
+export default function MultiSelect({ value, onValueChange, }: MultiSelectProps): React.JSX.Element;

package/dist/Components/MultiSelect/MultiSelect.js

@@ -0,0 +1,99 @@
+"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 Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 4px;\n  padding: 5px;\n  background-color: white;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n"], ["\n  width: 100%;\n  border-radius: 4px;\n  padding: 5px;\n  background-color: white;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n"])));
+var SelectedItems = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n"])));
+var Chip = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  background-color: #e0e0e0;\n  border-radius: 16px;\n  padding: 5px 10px;\n"], ["\n  display: flex;\n  align-items: center;\n  background-color: #e0e0e0;\n  border-radius: 16px;\n  padding: 5px 10px;\n"])));
+var CloseButton = styled_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 5px;\n  cursor: pointer;\n  font-weight: bold;\n"], ["\n  margin-left: 5px;\n  cursor: pointer;\n  font-weight: bold;\n"])));
+var Input = styled_1.default.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  border: none;\n  outline: none;\n  margin-left: 5px;\n"], ["\n  flex: 1;\n  border: none;\n  outline: none;\n  margin-left: 5px;\n"])));
+var generateUniqueId = (function () {
+    var counter = 0;
+    return function () {
+        counter += 1;
+        return "".concat(Date.now(), "-").concat(counter);
+    };
+})();
+function MultiSelect(_a) {
+    var value = _a.value, onValueChange = _a.onValueChange;
+    var _b = (0, react_1.useState)(value), options = _b[0], setOptions = _b[1];
+    var _c = (0, react_1.useState)(""), inputValue = _c[0], setInputValue = _c[1];
+    var inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        setOptions(value);
+    }, [value]);
+    var handleInputChange = function (e) {
+        setInputValue(e.target.value);
+    };
+    var handleKeyDown = function (e) {
+        if (e.key === "Enter" && inputValue.trim() !== "") {
+            var existingOption = options.find(function (option) { return option.label === inputValue; });
+            if (!existingOption) {
+                var newOption = { id: generateUniqueId(), label: inputValue };
+                var updatedOptions = __spreadArray(__spreadArray([], options, true), [newOption], false);
+                setOptions(updatedOptions);
+                onValueChange(updatedOptions);
+                setInputValue("");
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                }
+            }
+        }
+        else if (e.key === "Backspace" && inputValue === "") {
+            var updatedOptions = options.slice(0, -1); // Remove the last item
+            setOptions(updatedOptions);
+            onValueChange(updatedOptions);
+        }
+    };
+    var handleRemove = function (optionToRemove) {
+        var updatedOptions = options.filter(function (option) { return option.id !== optionToRemove.id; });
+        setOptions(updatedOptions);
+        onValueChange(updatedOptions);
+    };
+    return (react_1.default.createElement(Container, null,
+        react_1.default.createElement(SelectedItems, null, options.map(function (option) { return (react_1.default.createElement(Chip, { key: option.id },
+            option.label,
+            react_1.default.createElement(CloseButton, { onClick: function () { return handleRemove(option); } }, "\u00D7"))); })),
+        react_1.default.createElement(Input, { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: "Type and press enter" })));
+}
+exports.default = MultiSelect;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/Components/MultiSelect/MultiSelectProps.d.ts

@@ -0,0 +1,8 @@
+export type MultiSelectProps = {
+    value: MultiSelctOPtions[];
+    onValueChange: (options: MultiSelctOPtions[]) => void;
+};
+export type MultiSelctOPtions = {
+    id: string;
+    label: string;
+};

package/dist/Components/MultiSelect/MultiSelectProps.js

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

package/dist/Layout.js

@@ -68,6 +68,7 @@ var DropDown_1 = __importDefault(require("./Components/Dropdown/DropDown"));
 var Editor_1 = __importDefault(require("./Components/Editor/Editor"));
 var VerifyEmailOtp_1 = __importDefault(require("./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp"));
 var Drawer_1 = __importDefault(require("./Components/Drawer/Drawer"));
+var MultiSelect_1 = __importDefault(require("./Components/MultiSelect/MultiSelect"));
 var Layout = function () {
     var navmenus = [
         { title: "Account Settings", url: "myaccount" },
@@ -276,6 +277,16 @@ var Layout = function () {
     var handleOnclick4 = function () {
         setDrawerOpen(false);
     };
+    var _k = (0, react_2.useState)([
+        {
+            id: "1721664346718-1",
+            label: "Testing",
+        },
+    ]), selectedOptions = _k[0], setSelectedOptions = _k[1];
+    var handleValueSelectChange = function (options) {
+        setSelectedOptions(options);
+        console.log("Selected options updated:", options);
+    };
     return (react_2.default.createElement(react_1.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden" },
         react_2.default.createElement(Loading_1.default, { text: "Loading", isLoading: false }),
         react_2.default.createElement(react_1.Flex, null,
@@ -405,7 +416,9 @@ var Layout = function () {
                     react_2.default.createElement(DropDown_1.default, { ButtonText: "Vibility", options: exportOptionss, handleOptionSelect: function (id) {
                             console.log("optionid", id);
                         } }),
-                    react_2.default.createElement("br", null),
+                    react_2.default.createElement("div", null,
+                        react_2.default.createElement("br", null),
+                        react_2.default.createElement("br", null)),
                     react_2.default.createElement(Editor_1.default, { value: "heeeeejhbjhvbjhvbhj jbhkjhbiubviu iuhiuhiuhiu", config: { readonly: false, width: "900px" }, onChange: function (val) {
                             console.log(val);
                         } }),
@@ -422,6 +435,9 @@ var Layout = function () {
                     react_2.default.createElement(Drawer_1.default, { isOpen: drawerOpen, onClose: handleOnclick4, size: "xl" },
                         react_2.default.createElement("header", null, "Drawer Header"),
                         react_2.default.createElement("body", null, "Drawer Body"),
-                        react_2.default.createElement("footer", null, "Drawer Footer")))))));
+                        react_2.default.createElement("footer", null, "Drawer Footer")),
+                    react_2.default.createElement("br", null),
+                    react_2.default.createElement("br", null),
+                    react_2.default.createElement(MultiSelect_1.default, { value: selectedOptions, onValueChange: handleValueSelectChange }))))));
 };
 exports.default = Layout;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import "./bootstrap";
 import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";
 import ApexPieChart from "./Components/Apexcharts/ApexPieChart/ApexPieChart";
 import Breadcrumbs from "./Components/Breadcrumbs/Breadcrumbs";
@@ -11,6 +12,7 @@ import Editor from "./Components/Editor/Editor";
 import InputTextArea from "./Components/InputTextArea/InputTextArea";
 import Loading from "./Components/Loading/Loading";
 import Modal from "./Components/Modal/Modal";
+import MultiSelect from "./Components/MultiSelect/MultiSelect";
 import NavigationBar from "./Components/NavigationBar/NavigationBar";
 import NoteTextArea from "./Components/NoteTextArea/NoteTextArea";
 import NumberInput from "./Components/NumberInput/NumberInput";
@@ -28,4 +30,4 @@ import TextInput from "./Components/Input/TextInput";
 import Toaster, { useToaster } from "./Components/Toaster/Toaster";
 import ToolTip from "./Components/ToolTip/ToolTip";
 import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp";
-export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, Drawer, Dropdown, Editor, InputTextArea, Loading, Modal, NavigationBar, NoteTextArea, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Select, SideBar, Skeletons, Switch, Table, TextInput, Toaster, ToolTip, useToaster, VerifyEmailOtp, };
+export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, Drawer, Dropdown, Editor, InputTextArea, Loading, Modal, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Select, SideBar, Skeletons, Switch, Table, TextInput, Toaster, ToolTip, useToaster, VerifyEmailOtp, };

package/dist/index.js

@@ -1,5 +1,4 @@
 "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);
@@ -27,7 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.Select = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.NoteTextArea = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.Drawer = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
+exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.Select = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.Drawer = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
+require("./bootstrap");
 var ApexBarChart_1 = __importDefault(require("./Components/Apexcharts/ApexBarChart/ApexBarChart"));
 exports.ApexBarChart = ApexBarChart_1.default;
 var ApexPieChart_1 = __importDefault(require("./Components/Apexcharts/ApexPieChart/ApexPieChart"));
@@ -54,6 +54,8 @@ var Loading_1 = __importDefault(require("./Components/Loading/Loading"));
 exports.Loading = Loading_1.default;
 var Modal_1 = __importDefault(require("./Components/Modal/Modal"));
 exports.Modal = Modal_1.default;
+var MultiSelect_1 = __importDefault(require("./Components/MultiSelect/MultiSelect"));
+exports.MultiSelect = MultiSelect_1.default;
 var NavigationBar_1 = __importDefault(require("./Components/NavigationBar/NavigationBar"));
 exports.NavigationBar = NavigationBar_1.default;
 var NoteTextArea_1 = __importDefault(require("./Components/NoteTextArea/NoteTextArea"));

package/package.json

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