pixelize-design-library 2.1.3 → 2.1.5

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

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

package/dist/Components/ProductCard/ProductCard.js

@@ -0,0 +1,52 @@
+"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 });
+exports.ProductCard = void 0;
+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.ProductCard = 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;

package/dist/Components/ProductCard/ProductPrice.js

@@ -0,0 +1,88 @@
+"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 react_2 = require("@chakra-ui/react");
+var ProductPrice = function (_a) {
+    var options = _a.options;
+    var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = (0, react_1.useState)(options[0]), selected = _c[0], setSelected = _c[1];
+    var _d = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), dropdownPosition = _d[0], setDropdownPosition = _d[1];
+    var buttonRef = (0, react_1.useRef)(null);
+    var dropdownRef = (0, react_1.useRef)(null);
+    var isSingleOption = options.length === 1;
+    (0, react_2.useOutsideClick)({
+        ref: dropdownRef,
+        handler: function () { return setIsOpen(false); },
+    });
+    var getDiscountedPrice = function (option) {
+        return Math.round(option.price - (option.price * option.offer) / 100);
+    };
+    (0, react_1.useEffect)(function () {
+        if (isOpen && buttonRef.current) {
+            var rect = buttonRef.current.getBoundingClientRect();
+            setDropdownPosition({
+                top: rect.bottom + window.scrollY,
+                left: rect.left + window.scrollX,
+                width: rect.width,
+            });
+        }
+    }, [isOpen]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        isSingleOption ? (react_1.default.createElement(react_2.Box, { border: "0.063rem solid", borderColor: "orange.300", bg: "#FFFCF5", px: 3, py: 1, rounded: "md", display: "inline-block", w: "100%" },
+            react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "medium" }, options[0].label))) : (react_1.default.createElement(react_2.Box, { ref: buttonRef, onClick: function () { return setIsOpen(!isOpen); }, border: "0.063rem solid", borderColor: "orange.300", bg: "#FFFCF5", px: 3, py: 1, rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%" },
+            react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "medium" }, selected.label),
+            react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "orange.400", transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s" }, "\u25BE"))),
+        !isSingleOption && isOpen && (react_1.default.createElement(react_2.Portal, null,
+            react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "absolute", top: "".concat(dropdownPosition.top, "px"), left: "".concat(dropdownPosition.left, "px"), width: "".concat(dropdownPosition.width, "px"), bg: "white", border: "0.063rem solid", borderColor: "orange.300", shadow: "md", zIndex: 9999 }, options.map(function (option) {
+                var discounted = getDiscountedPrice(option);
+                var isSelected = selected.weight === option.weight;
+                return (react_1.default.createElement(react_2.Box, { key: option.weight, px: 4, h: "2.5rem", cursor: "pointer", bg: isSelected ? 'orange.50' : 'white', _hover: { bg: 'orange.100' }, onClick: function () {
+                        setSelected(option);
+                        setIsOpen(false);
+                    }, display: "flex", alignItems: "center", justifyContent: "space-between" },
+                    react_1.default.createElement(react_2.Box, null,
+                        react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "medium" }, option.label),
+                        option.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "green.600", fontWeight: "semibold" },
+                            option.offer,
+                            "% OFF"))),
+                    react_1.default.createElement(react_2.Box, { textAlign: "right" },
+                        react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "semibold", color: "orange.500" },
+                            "\u20B9",
+                            discounted),
+                        option.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.400", textDecoration: "line-through" },
+                            "\u20B9",
+                            option.price))),
+                    react_1.default.createElement(react_2.Box, { ml: 4, w: "1rem", h: "1rem", minW: "1rem", borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? 'orange.400' : 'gray.300', display: "flex", alignItems: "center", justifyContent: "center" }, isSelected && (react_1.default.createElement(react_2.Box, { w: "0.5rem", h: "0.5rem", bg: "orange.400", borderRadius: "full" })))));
+            })))),
+        react_1.default.createElement(react_2.Box, { mt: 2, display: "flex", alignItems: "center", fontSize: "sm", gap: 2 },
+            selected.offer > 0 && (react_1.default.createElement(react_2.Text, { color: "gray.400", textDecoration: "line-through" },
+                "\u20B9",
+                selected.price)),
+            react_1.default.createElement(react_2.Text, { color: "orange.500", fontWeight: "semibold" },
+                "\u20B9",
+                getDiscountedPrice(selected)))));
+};
+exports.default = ProductPrice;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+type ProductReviewProps = {
+    rating: string | number;
+    reviewCount: string | number;
+};
+declare const ProductReview: ({ rating, reviewCount }: ProductReviewProps) => React.JSX.Element;
+export default ProductReview;

package/dist/Components/ProductCard/ProductReview.js

@@ -0,0 +1,23 @@
+"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");
+var lucide_react_1 = require("lucide-react");
+var ProductReview = function (_a) {
+    var rating = _a.rating, reviewCount = _a.reviewCount;
+    return (react_1.default.createElement(react_2.Flex, { align: "center", gap: 2 },
+        react_1.default.createElement(react_2.Flex, { align: "center", gap: "1", bg: "teal.900", color: "white", px: 2, borderRadius: "md", fontSize: "sm", fontWeight: "bold" },
+            react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Star, boxSize: 3.5 }),
+            react_1.default.createElement(react_2.Text, null, rating)),
+        react_1.default.createElement(react_2.Box, { h: "4", w: "0.063rem", bg: "gray.400" }),
+        react_1.default.createElement(react_2.Flex, { align: "center", gap: "1" },
+            react_1.default.createElement(react_2.Icon, { as: lucide_react_1.BookCheck, boxSize: 3.5 }),
+            react_1.default.createElement(react_2.Text, { fontSize: "sm", color: "gray.600" },
+                "(",
+                reviewCount,
+                ")"))));
+};
+exports.default = ProductReview;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+type ProductTagsProps = {
+    tags: string[];
+    className?: string;
+};
+declare const ProductTags: ({ tags, className }: ProductTagsProps) => React.JSX.Element;
+export default ProductTags;

package/dist/Components/ProductCard/ProductTags.js

@@ -0,0 +1,30 @@
+"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");
+var ProductTags = function (_a) {
+    var tags = _a.tags, className = _a.className;
+    var getRows = function (tags) {
+        var count = tags.length;
+        if (count === 1)
+            return [tags];
+        if (count === 2)
+            return [tags];
+        if (count === 3)
+            return [[tags[0]], tags.slice(1)];
+        if (count === 4)
+            return [tags.slice(0, 2), tags.slice(2, 4)];
+        return [];
+    };
+    return (react_1.default.createElement(react_2.Flex, { direction: "column", gap: "1", className: className, w: "full" }, getRows(tags).map(function (row, rowIndex) { return (react_1.default.createElement(react_2.Flex, { key: rowIndex, gap: "1" }, row.map(function (tag, tagIndex) { return (
+    // <></>
+    react_1.default.createElement(Tag, { key: tagIndex, fullWidth: row.length === 1 }, tag)); }))); })));
+};
+var Tag = function (_a) {
+    var children = _a.children, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b;
+    return (react_1.default.createElement(react_2.Box, { flex: fullWidth ? '1' : '1', border: "0.063rem solid #f89f24", color: "black", fontSize: "0.625rem", fontWeight: "semibold", borderRadius: "full", px: "0.5rem", py: "0.125rem", textAlign: "center", whiteSpace: "nowrap", backgroundColor: "orange.100" }, children));
+};
+exports.default = ProductTags;

package/dist/Components/SearchSelect/SearchSelect.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { SearchSelectProps } from './SearchSelectProps';
-declare const SearchSelect: ({ id, label, options, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, height, size, chip, information, rightIcon, addNew, isSelectAll, pagination, insideSelect }: SearchSelectProps) => React.JSX.Element;
+declare const SearchSelect: ({ id, label, options, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, height, size, chip, information, rightIcon, addNew, isSelectAll, pagination, insideSelect, isRemoveAllIcon, dropdownProfileView }: SearchSelectProps) => React.JSX.Element;
 export default SearchSelect;

package/dist/Components/SearchSelect/SearchSelect.js

@@ -59,7 +59,7 @@ var normalizeMultiValue = function (val) {
 };
 var SearchSelect = function (_a) {
     var _b, _c, _d, _e, _f;
-    var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _g = _a.isOptionLoading, isOptionLoading = _g === void 0 ? false : _g, _h = _a.isLoading, isLoading = _h === void 0 ? false : _h, _j = _a.loadingText, loadingText = _j === void 0 ? 'Loading...' : _j, _k = _a.placeholder, placeholder = _k === void 0 ? 'Select' : _k, value = _a.value, _l = _a.searchQuery, searchQuery = _l === void 0 ? '' : _l, _m = _a.isMultiple, isMultiple = _m === void 0 ? false : _m, _o = _a.isRequired, isRequired = _o === void 0 ? false : _o, _p = _a.error, error = _p === void 0 ? false : _p, errorMessage = _a.errorMessage, helperText = _a.helperText, _q = _a.width, width = _q === void 0 ? '100%' : _q, _r = _a.height, height = _r === void 0 ? "2.75rem" : _r, _s = _a.size, size = _s === void 0 ? 'md' : _s, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _t = _a.isSelectAll, isSelectAll = _t === void 0 ? false : _t, pagination = _a.pagination, insideSelect = _a.insideSelect;
+    var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _g = _a.isOptionLoading, isOptionLoading = _g === void 0 ? false : _g, _h = _a.isLoading, isLoading = _h === void 0 ? false : _h, _j = _a.loadingText, loadingText = _j === void 0 ? 'Loading...' : _j, _k = _a.placeholder, placeholder = _k === void 0 ? 'Select' : _k, value = _a.value, _l = _a.searchQuery, searchQuery = _l === void 0 ? '' : _l, _m = _a.isMultiple, isMultiple = _m === void 0 ? false : _m, _o = _a.isRequired, isRequired = _o === void 0 ? false : _o, _p = _a.error, error = _p === void 0 ? false : _p, errorMessage = _a.errorMessage, helperText = _a.helperText, _q = _a.width, width = _q === void 0 ? '100%' : _q, _r = _a.height, height = _r === void 0 ? "2.75rem" : _r, _s = _a.size, size = _s === void 0 ? 'md' : _s, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _t = _a.isSelectAll, isSelectAll = _t === void 0 ? false : _t, pagination = _a.pagination, insideSelect = _a.insideSelect, isRemoveAllIcon = _a.isRemoveAllIcon, dropdownProfileView = _a.dropdownProfileView;
     var _u = (0, react_1.useState)(searchQuery), inputValue = _u[0], setInputValue = _u[1];
     var _v = (0, react_1.useState)(false), isOpen = _v[0], setIsOpen = _v[1];
     var _w = (0, react_1.useState)(true), hasMore = _w[0], setHasMore = _w[1];
@@ -183,7 +183,7 @@ var SearchSelect = function (_a) {
     return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: information === null || information === void 0 ? void 0 : information.informationMessage })),
         react_1.default.createElement(react_2.InputGroup, { size: size },
-            react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: "2.375rem", px: 3, display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.375rem", border: "0.063rem solid", borderColor: error ? theme.colors.semantic.error[500] : theme.colors.primary[500], borderRadius: "0.25rem", bg: "white", boxShadow: focused ? error ? "0 0 0 0.125rem ".concat((_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.error) : "0 0 0 0.125rem ".concat((_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary) : 'none', transition: "box-shadow 0.2s, border-color 0.2s" },
+            react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: "2.85rem", px: 3, display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.375rem", border: "0.063rem solid", borderColor: error ? theme.colors.semantic.error[500] : theme.colors.primary[500], borderRadius: "0.25rem", bg: "white", boxShadow: focused ? error ? "0 0 0 0.125rem ".concat((_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.error) : "0 0 0 0.125rem ".concat((_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary) : 'none', transition: "box-shadow 0.2s, border-color 0.2s" },
                 insideSelect && (react_1.default.createElement(react_2.Box, { position: "relative", ref: customSelectRef, backgroundColor: theme.colors.gray[200], ml: "-0.75rem", h: "-webkit-fill-available", borderRadius: "0.25rem 0 0 0.25rem", onClick: function () { return setCustomSelectOpen(function (prev) { return !prev; }); } },
                     react_1.default.createElement(react_2.Box, { minW: "5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", width: insideSelect.width, height: height, pl: "0.5rem", pr: "0.5rem" },
                         react_1.default.createElement(SelectTruncatedLabel_1.default, { label: (_e = (_d = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.value) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : "", maxWidth: (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.width) || "6rem" }),
@@ -202,12 +202,12 @@ var SearchSelect = function (_a) {
                 (chip === null || chip === void 0 ? void 0 : chip.maxChips) &&
                     isMultiple &&
                     selectedValues.length > chip.maxChips && (react_1.default.createElement(Tag_1.default, { key: "extra-count", label: "+ ".concat(selectedValues.length - chip.maxChips), colorScheme: "gray", size: "sm" })),
-                (!selectedValues.length || isMultiple || inputValue) && (react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "unstyled", flex: "1", minW: "5rem", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onFocus: function () {
+                (isMultiple || inputValue || !selectedValues.length || !isMultiple) && (react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "unstyled", flex: "1", minW: "5rem", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onFocus: function () {
                         setFocused(true);
                         setIsOpen(true);
                     }, onBlur: function () { return setFocused(false); }, placeholder: placeholder })),
                 react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 1 },
-                    selectedValues.length > 0 && (react_1.default.createElement(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
+                    isRemoveAllIcon && selectedValues.length > 0 && (react_1.default.createElement(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
                         react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.X, { size: 12, color: theme.colors.black }), "aria-label": "Clear all", variant: "ghost", size: "sm", onClick: handleClearAll, sx: {
                                 bg: 'transparent',
                                 _hover: { bg: 'transparent' },
@@ -225,9 +225,16 @@ var SearchSelect = function (_a) {
                 react_1.default.createElement(react_2.Text, { fontSize: "sm" }, allFilteredSelected ? 'Unselect All' : 'Select All'))),
             react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200] }, isOptionLoading ? (react_1.default.createElement(react_2.Box, { p: 3, display: "flex", alignItems: "center", gap: 2 },
                 react_1.default.createElement(react_2.Spinner, { size: "sm" }),
-                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, loadingText))) : filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: "sm", color: theme.colors.gray[500] }, "No results found")) : (filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, p: 2, px: 3, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : 'transparent', _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
-                isMultiple && (react_1.default.createElement(react_2.Checkbox, { isChecked: isSelected(option.id), pointerEvents: "none", colorScheme: "blue" })),
-                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, option.label))); }))),
+                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, loadingText))) : filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: "sm", color: theme.colors.gray[500] }, "No results found")) : (filteredOptions.map(function (option) {
+                var _a, _b;
+                return (react_1.default.createElement(react_2.Box, { key: option.id, p: 2, px: 3, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : 'transparent', _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
+                    isMultiple && (react_1.default.createElement(react_2.Checkbox, { isChecked: isSelected(option.id), pointerEvents: "none", colorScheme: "blue" })),
+                    dropdownProfileView ? react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 3 },
+                        react_1.default.createElement(react_2.Box, { w: "2rem", h: "2rem", borderRadius: "full", bg: option.color || 'gray.300', color: "white", display: "flex", justifyContent: "center", alignItems: "center", fontSize: "sm", fontWeight: "medium", overflow: "hidden" }, option.profileUrl ? (react_1.default.createElement(react_2.Box, { as: "img", src: option.profileUrl, alt: option.label, w: "100%", h: "100%", objectFit: "cover" })) : ((_b = (_a = option.label) === null || _a === void 0 ? void 0 : _a.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase())),
+                        react_1.default.createElement(react_2.Box, null,
+                            react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "semibold", color: "gray.800" }, option.label),
+                            option.email && (react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500" }, option.email)))) : react_1.default.createElement(react_2.Text, { fontSize: "sm" }, option.label)));
+            }))),
             (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { p: 2, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: "white", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
                 addNew.icon || react_1.default.createElement(lucide_react_1.Plus, { size: 16 }),
                 react_1.default.createElement(react_2.Text, { fontSize: "sm" }, addNew.text || 'Add New'))))),

package/dist/Components/SearchSelect/SearchSelectProps.d.ts

@@ -52,6 +52,7 @@ export type SearchSelectProps = {
         option?: Options[];
         width?: string;
     };
+    dropdownProfileView?: boolean;
 };
 export type Options = {
     id: string | number;

package/dist/Layout.js

@@ -57,6 +57,7 @@ var checkbox_1 = __importDefault(require("./Pages/checkbox"));
 var toster_1 = __importDefault(require("./Pages/toster"));
 var input_1 = __importDefault(require("./Pages/input"));
 var alertdialog_1 = __importDefault(require("./Pages/alertdialog"));
+var productCaard_1 = __importDefault(require("./Pages/productCaard"));
 var table_1 = require("./Pages/table");
 var TInput_1 = __importDefault(require("./Pages/TInput"));
 var kanbanboard_1 = __importDefault(require("./Pages/kanbanboard"));
@@ -188,6 +189,8 @@ var Layout = function () {
                         react_2.default.createElement(react_1.Button, { colorScheme: "purple" }, "Sign Up")) }));
             case "/upload":
                 return react_2.default.createElement(fileUpload_1.FileUploader, null);
+            case "/productCard":
+                return react_2.default.createElement(productCaard_1.default, null);
             case "/tag":
                 return (react_2.default.createElement(Tag_1.default, { label: "tag", icon: lucide_react_1.Home, size: "md", colorScheme: "gray", onIconClick: function () { return console.log("Icon"); }, onTagClick: function () { return console.log("Tag"); } }));
             case "/":
@@ -233,7 +236,8 @@ var Layout = function () {
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/kanban"); }, variant: "outline", size: "sm" }, "Kanban"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tag"); }, variant: "outline", size: "sm" }, "Tag"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/header"); }, variant: "outline", size: "sm" }, "Header"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/upload"); }, variant: "outline", size: "sm" }, "File Upload")),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/upload"); }, variant: "outline", size: "sm" }, "File Upload"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/productCard"); }, variant: "outline" }, "Product Card")),
             react_2.default.createElement("br", null),
             react_2.default.createElement("br", null),
             react_2.default.createElement("h2", { className: "text-3xl" }, " TailWindCss"),

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 = 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.ProductCard, { 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/searchSelect.js

@@ -79,6 +79,8 @@ var rrr = function (start, limit) {
     return Array.from({ length: end - start }, function (_, index) { return ({
         id: (start + index).toString(),
         label: "Option ".concat(start + index),
+        email: "text@123",
+        color: "red",
     }); });
 };
 var delay = function (ms) { return new Promise(function (resolve) { return setTimeout(resolve, ms); }); };
@@ -142,40 +144,7 @@ var SearchSelect = function () {
             // }}
             // error={true}
             // errorMessage="hello"
-            virtualization: true, insideSelect: {
-                width: "50px",
-                onSelect: function (val) { return setCustomSelectValue(val); },
-                value: customSelectValue,
-                option: [
-                    {
-                        "id": 3,
-                        "label": "Hariharan J",
-                    },
-                    {
-                        "id": 1,
-                        "label": "Karuppusamy S",
-                    },
-                    {
-                        "id": 2,
-                        "label": "SasiKumar M",
-                    },
-                    {
-                        "id": 4,
-                        "label": "Hariharan  Jeganathan",
-                    },
-                    {
-                        "id": 5,
-                        "label": "Karuppusamy S",
-                    },
-                    {
-                        "id": 6,
-                        "label": "SasiKumar M",
-                    },
-                    {
-                        "id": 7,
-                        "label": "Hariharan  Jeganathan",
-                    }
-                ]
-            } })));
+            // isRemoveAllIcon
+            dropdownProfileView: true, virtualization: true })));
 };
 exports.default = SearchSelect;

package/dist/Theme/fonts.d.ts

@@ -1,4 +1,3 @@
-import "@fontsource-variable/inter";
 declare const fonts: {
     fonts: {
         body: string;

package/dist/Theme/fonts.js

@@ -1,7 +1,7 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 // Supports weights 100-900
-require("@fontsource-variable/inter");
+// import "@fontsource-variable/inter";
+Object.defineProperty(exports, "__esModule", { value: true });
 var fonts = {
     fonts: {
         body: "Inter Variable, sans-serif",

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
-    "@fontsource-variable/inter": "^5.1.0",
     "@hello-pangea/dnd": "^18.0.1",
     "framer-motion": "^11.2.2",
     "jodit-react": "^4.1.2",