pixelize-design-library 2.1.2 → 2.1.4

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

@@ -1,4 +1,3 @@
 import React from "react";
 import { TableProps } from "./TableProps";
-import "./Table.css";
 export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferencesUrl, preferencesKey, preferencesName, preferencesPage, authToken, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -34,7 +34,6 @@ var TableHeader_1 = __importDefault(require("./Components/TableHeader"));
 var TableBody_1 = __importDefault(require("./Components/TableBody"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var useTable_1 = __importDefault(require("./Components/useTable"));
-require("./Table.css");
 var table_1 = require("../../Utils/table");
 var usePreferences_1 = require("../../Hooks/usePreferences");
 var TableSettings_1 = __importDefault(require("./TableSettings/TableSettings"));
@@ -104,7 +103,20 @@ function Table(_a) {
             (isPagination || isServerPagination) && (react_1.default.createElement(react_2.Box, { ml: "auto" },
                 react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, isVisiblity: true })))),
         react_1.default.createElement(react_2.TableContainer, { maxH: 500, overflowY: "auto" },
-            react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "table_wrapper" },
+            react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "table_wrapper", sx: {
+                    width: "100%",
+                    borderCollapse: "collapse",
+                    "th .resize-handle": {
+                        position: "absolute",
+                        top: 0,
+                        right: 0,
+                        width: "8px",
+                        height: "100%",
+                        cursor: "col-resize",
+                        backgroundColor: "transparent",
+                        zIndex: 999,
+                    },
+                } },
                 react_1.default.createElement(react_3.Thead, { position: "sticky", top: -0.5, zIndex: 2 },
                     react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
                             ? true

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

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