pixelize-design-library 2.1.20 → 2.1.21

package/dist/Pages/multiSelect.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 MultiSelect_1 = __importDefault(require("../Components/MultiSelect/MultiSelect"));
+var MultiSelectPage = function () {
+    var _a = (0, react_1.useState)([
+        {
+            id: "1721664346718-1",
+            label: "Testing",
+        },
+    ]), selectedOptions = _a[0], setSelectedOptions = _a[1];
+    var handleValueSelectChange = function (options) {
+        setSelectedOptions(options);
+        console.log("Selected options updated:", options);
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(MultiSelect_1.default, { value: selectedOptions, onValueChange: handleValueSelectChange })));
+};
+exports.default = MultiSelectPage;

package/dist/Pages/noteArea.d.ts

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

package/dist/Pages/noteArea.js

@@ -0,0 +1,49 @@
+"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 NoteTextArea_1 = __importDefault(require("../Components/NoteTextArea/NoteTextArea"));
+var NoteAreaPage = function () {
+    var _a = (0, react_1.useState)(false), saveButtonLoading = _a[0], setSaveButtonLoading = _a[1];
+    var handleNoteValue = function (noteValue, titleValue, file) {
+        console.log("Title: ", titleValue);
+        console.log("Note: ", noteValue);
+        console.log("File: ", file);
+        setSaveButtonLoading(true);
+        setTimeout(function () {
+            setSaveButtonLoading(false);
+        }, 2000);
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(NoteTextArea_1.default, { width: "720px", handleSubmit: function (noteValue, titleValue, file) {
+                handleNoteValue(noteValue, titleValue, file);
+            }, value: "text", title: "hello", isEditable: false, saveButtonLoading: saveButtonLoading, handleCancel: function (isActive) {
+                console.log("isActive", isActive);
+            } })));
+};
+exports.default = NoteAreaPage;

package/dist/Pages/numberInput.d.ts

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

package/dist/Pages/numberInput.js

@@ -0,0 +1,39 @@
+"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 NumberInput_1 = __importDefault(require("../Components/NumberInput/NumberInput"));
+var NumberInputPage = function () {
+    var _a = (0, react_1.useState)("0"), numbetInputValue = _a[0], setNumbetInputValue = _a[1];
+    var handleNumberinput = function (value) {
+        setNumbetInputValue(value);
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(NumberInput_1.default, { min: 0, max: 20, value: numbetInputValue, onChange: handleNumberinput })));
+};
+exports.default = NumberInputPage;

package/dist/Pages/photoViewer.d.ts

@@ -0,0 +1,3 @@
+export default PhotoViewer;
+declare function PhotoViewer(): React.JSX.Element;
+import React from "react";

package/dist/Pages/photoViewer.js

@@ -0,0 +1,12 @@
+"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 ProfilePhotoViewer_1 = __importDefault(require("../Components/ProfilePhotoViewer/ProfilePhotoViewer"));
+var PhotoViewer = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(ProfilePhotoViewer_1.default, { photoUrl: "https://media.istockphoto.com/id/2000672702/photo/happy-smiling-mature-indian-or-latin-business-man-ceo-trader-using-computer-typing-working-in.jpg?s=1024x1024&w=is&k=20&c=D1vOFvPH5YG87jlDs8g9THoClPfmdbAsHx2J4PdDtcI=" !== null && "https://media.istockphoto.com/id/2000672702/photo/happy-smiling-mature-indian-or-latin-business-man-ceo-trader-using-computer-typing-working-in.jpg?s=1024x1024&w=is&k=20&c=D1vOFvPH5YG87jlDs8g9THoClPfmdbAsHx2J4PdDtcI=" !== void 0 ? "https://media.istockphoto.com/id/2000672702/photo/happy-smiling-mature-indian-or-latin-business-man-ceo-trader-using-computer-typing-working-in.jpg?s=1024x1024&w=is&k=20&c=D1vOFvPH5YG87jlDs8g9THoClPfmdbAsHx2J4PdDtcI=" : "https://bit.ly/dan-abramov", onPhotoChange: function (file) { return console.log(file); }, isEditable: true, isView: true, fallbackText: "" })));
+};
+exports.default = PhotoViewer;

package/dist/Pages/pinInputs.d.ts

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

package/dist/Pages/pinInputs.js

@@ -0,0 +1,12 @@
+"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 PinInput_1 = __importDefault(require("../Components/PinInput/PinInput"));
+var PinInputPage = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(PinInput_1.default, { pins: 5, label: "Enter pin" })));
+};
+exports.default = PinInputPage;

package/dist/Pages/productCaard.d.ts

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

package/dist/Pages/productCaard.js

@@ -0,0 +1,32 @@
+"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 ProductCard_1 = __importDefault(require("../Components/ProductCard/ProductCard"));
+var react_2 = require("@chakra-ui/react");
+var productCaard = function () {
+    var option = [{
+            label: "100 G",
+            weight: 100,
+            price: 149,
+            offer: 2,
+        },
+        {
+            label: "200 G",
+            weight: 200,
+            price: 250,
+            offer: 50,
+        }
+    ];
+    return (react_1.default.createElement(react_2.SimpleGrid, { columns: [1, 2, 3], spacing: 6, p: 4 },
+        react_1.default.createElement(ProductCard_1.default, { label: "Ghee Mysorepaku (Soft)", description: "Special Ghee mysorepaku", productImage: {
+                visibile: "https://www.sreeannapoorna.com/cdn/shop/files/80A4644.jpg?v=1752466892&width=1946",
+                hover: "https://www.sreeannapoorna.com/cdn/shop/files/80A4658.jpg?v=1752466430&width=1946",
+            }, tags: ['Melt in Mouth', 'Authentic Taste', 'No Preservatives'], rating: 4.76, reviews: 596, options: option, onAddToCart: function () { }, onClick: function () { }, bag: {
+                label: "Special",
+                color: "red",
+            } })));
+};
+exports.default = productCaard;

package/dist/Pages/progressbar.d.ts

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

package/dist/Pages/progressbar.js

@@ -0,0 +1,12 @@
+"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 ProgressBar_1 = __importDefault(require("../Components/ProgressBar/ProgressBar"));
+var ProgressbarPage = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(ProgressBar_1.default, { min: 10, max: 0, isIndeterminate: true, size: "xs" })));
+};
+exports.default = ProgressbarPage;

package/dist/Pages/radioButton.d.ts

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

package/dist/Pages/radioButton.js

@@ -0,0 +1,44 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var RadioButton_1 = require("../Components/RadioButton/RadioButton");
+var RadioButtonPage = function () {
+    var _a = (0, react_1.useState)("1"), selectedValue = _a[0], setSelectedValue = _a[1];
+    var radioOptions = [
+        { label: "Option 1", id: "1" },
+        { label: "Option 2", id: "2" },
+        { label: "Option 3", id: "3" },
+    ];
+    var handleChange = function (value) {
+        setSelectedValue(value);
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(RadioButton_1.RadioButton, { label: "dinesh" }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(RadioButton_1.RadioButtonGroup, { options: radioOptions, value: selectedValue, onChange: handleChange, colorScheme: "blue", size: "md" })));
+};
+exports.default = RadioButtonPage;

package/dist/Pages/search.d.ts

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

package/dist/Pages/search.js

@@ -0,0 +1,44 @@
+"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 Search_1 = __importDefault(require("../Components/Search/Search"));
+var SearchPage = function () {
+    var _a = (0, react_1.useState)(""), searchQuery = _a[0], setSearchQuery = _a[1];
+    var handleSearch = function (event) {
+        console.log("Search query:", event.target.value);
+        setSearchQuery(event.target.value);
+    };
+    var handleRemoveSearch = function () {
+        console.log("Search query removed");
+        setSearchQuery("");
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Search_1.default, { onSearch: handleSearch, onclose: handleRemoveSearch, query: searchQuery })));
+};
+exports.default = SearchPage;

package/dist/Pages/searchSelect.d.ts

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

package/dist/Pages/searchSelect.js

@@ -0,0 +1,151 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 SearchSelect_1 = __importDefault(require("../Components/SearchSelect/SearchSelect"));
+var react_2 = require("@chakra-ui/react");
+var max = 149;
+var rrr = function (start, limit) {
+    var end = Math.min(start + limit, max + 1); // +1 to include `max` as valid
+    return Array.from({ length: end - start }, function (_, index) { return ({
+        id: (start + index).toString(),
+        label: "Option ".concat(start + index),
+        view: (react_1.default.createElement(react_2.Box, null, " demo"))
+    }); });
+};
+var delay = function (ms) { return new Promise(function (resolve) { return setTimeout(resolve, ms); }); };
+var SearchSelect = function () {
+    var _a = (0, react_1.useState)({}), selectedOptions = _a[0], setselectedOptions = _a[1];
+    var _b = (0, react_1.useState)(rrr(1, 50)), soptions = _b[0], setSoptions = _b[1]; // initial 50
+    var _c = (0, react_1.useState)(""), search = _c[0], setSearch = _c[1];
+    var _d = (0, react_1.useState)(false), paginationLoading = _d[0], setpaginationLoading = _d[1];
+    var _e = (0, react_1.useState)({}), customSelectValue = _e[0], setCustomSelectValue = _e[1];
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(SearchSelect_1.default
+        // width={"250px"}
+        , { 
+            // width={"250px"}
+            label: "Users", id: "user-select", options: soptions, value: selectedOptions, 
+            // isMultiple
+            onSelect: function (val) {
+                console.log("val", val);
+                setselectedOptions(val);
+            }, onSearch: function (query) { return setSearch(query); }, searchQuery: search, isOptionLoading: false, placeholder: "Search users...", chip: {
+                maxChips: 3,
+                onClick: function () { return console.log("chip removed"); },
+            }, isSelectAll: true, pagination: {
+                limit: 50,
+                scrollLoading: paginationLoading,
+                onScroll: function (startIndex, limit, query) { return __awaiter(void 0, void 0, void 0, function () {
+                    var newOptions;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                console.log("Fetching:", startIndex, limit, query);
+                                if (startIndex > max) {
+                                    console.log("No more data to load.");
+                                    return [2 /*return*/];
+                                }
+                                setpaginationLoading(true);
+                                return [4 /*yield*/, delay(1000)];
+                            case 1:
+                                _a.sent();
+                                newOptions = rrr(startIndex, limit);
+                                setpaginationLoading(false);
+                                if (newOptions.length === 0) {
+                                    console.log("No new options returned.");
+                                    return [2 /*return*/];
+                                }
+                                setSoptions(function (prev) { return __spreadArray(__spreadArray([], prev, true), newOptions, true); });
+                                return [2 /*return*/];
+                        }
+                    });
+                }); },
+            }, 
+            // width={"500px"}
+            addNew: {
+                enabled: true,
+                text: "Add new user",
+                onClick: function () { return console.log("Add New User"); },
+            }, 
+            // rightIcon={{
+            //   icon: <Plus size={16} />,
+            //   onClick: () => console.log("Clicked Right Icon"),
+            // }}
+            // error={true}
+            // errorMessage="hello"
+            // isRemoveAllIcon
+            // dropdownProfileView
+            virtualization: true })));
+};
+exports.default = SearchSelect;

package/dist/Pages/select.d.ts

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

package/dist/Pages/select.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 Select_1 = __importDefault(require("../Components/Select/Select"));
+var SelectPage = function () {
+    var _a = (0, react_1.useState)(""), selected = _a[0], setSelected = _a[1];
+    var handleOnChange = function (selectedOption) {
+        var checked = selectedOption.id;
+        setSelected(checked);
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Select_1.default, { options: [
+                { id: 1, label: "magesssssss" },
+                { id: 2, label: "sjdfg" },
+            ], onChange: handleOnChange, value: selected })));
+};
+exports.default = SelectPage;

package/dist/Pages/selectSearch.d.ts

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

package/dist/Pages/selectSearch.js

@@ -0,0 +1,93 @@
+"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 SelectSearch_1 = __importDefault(require("../Components/SelectSearch/SelectSearch"));
+var lucide_react_1 = require("lucide-react");
+var SelectSearchs = function () {
+    var _a = (0, react_1.useState)("Option 1"), selectSearchText = _a[0], setSelectSearchText = _a[1];
+    var _b = (0, react_1.useState)({
+        id: "1",
+        label: "Option 1",
+    }), selectedOption = _b[0], setSelectedOption = _b[1];
+    var _c = (0, react_1.useState)("Option 1"), multiSelectSearchText = _c[0], setMultiSelectSearchText = _c[1];
+    var _d = (0, react_1.useState)({
+        id: "1",
+        label: "Option 1",
+    }), multiselectedOption = _d[0], setMultiSelectedOption = _d[1];
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(SelectSearch_1.default, { BottomText: "Add Check", isBottomIcon: true, isProfile: true, BottomIcon: false, options: [
+                    {
+                        id: "1",
+                        label: "Option 1",
+                        profileUrl: "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo",
+                        email: "kavinKumar0298@gggmail.com",
+                    },
+                    {
+                        id: "2",
+                        label: "select 2",
+                        profileUrl: "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo",
+                        email: "kavinKumar0298@gggmail.com",
+                    },
+                    {
+                        id: "3",
+                        label: "clone 3",
+                        profileUrl: "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo",
+                        email: "kavinKumar0298@gggmail.com",
+                    },
+                ], inputOnchange: function (value) {
+                    setSelectSearchText(value.toString());
+                    console.log(value);
+                }, initialSelectedOption: selectedOption, onOptionSelect: function (data) {
+                    setSelectSearchText(data.label);
+                }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(lucide_react_1.User, { color: "gray.300" }), isMultipleSelect: false, onOptionMultiSelect: function (data) {
+                    setSelectedOption(data);
+                }, handleBottomClick: function () { return console.log("clg"); } })),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(SelectSearch_1.default, { BottomText: "Add Check", options: [
+                    { id: "1", label: "Option 1" },
+                    { id: "2", label: "select 2" },
+                    { id: "3", label: "clone 3" },
+                ], inputOnchange: function (value) {
+                    setMultiSelectSearchText(value.toString());
+                    // console.log(value);
+                }, initialSelectedOption: multiselectedOption, 
+                // onOptionSelect={(data) => {
+                //   setMultiSelectSearchText(data.label);
+                // }}
+                name: "hai", label: "MultiSelectSearch", searchQuery: multiSelectSearchText, rightIcon: react_1.default.createElement(lucide_react_1.User, { color: "gray.300" }), isMultipleSelect: true, onOptionMultiSelect: function (data) {
+                    setMultiSelectedOption(data);
+                } }))));
+};
+exports.default = SelectSearchs;

package/dist/Pages/skeleton.d.ts

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