pixelize-design-library 2.1.4 → 2.1.6

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

@@ -1,3 +1,4 @@
 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;
+declare const ProductCard: ({ label, productImage, rating, reviews, tags, options, onAddToCart, bag, description, }: ProductCardProps) => React.JSX.Element;
+export default ProductCard;

package/dist/Components/ProductCard/ProductCard.js

@@ -26,7 +26,6 @@ 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"));
@@ -49,4 +48,4 @@ var ProductCard = function (_a) {
             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;
+exports.default = ProductCard;

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, isRemoveAllIcon, dropdownProfileView }: 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 }: 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, isRemoveAllIcon = _a.isRemoveAllIcon, dropdownProfileView = _a.dropdownProfileView;
+    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;
     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];
@@ -189,7 +189,7 @@ var SearchSelect = function (_a) {
                         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" }),
                         customSelectOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })),
                     customSelectOpen && (react_1.default.createElement(react_2.Portal, null,
-                        react_1.default.createElement(react_2.Box, { id: "custom-select-portal", position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 20, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (_f = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _f === void 0 ? void 0 : _f.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, display: "flex", alignItems: "center", height: "2.5rem", px: "0.75rem", fontSize: "sm", _hover: { bg: theme.colors.gray[100] }, cursor: "pointer", onClick: function (e) {
+                        react_1.default.createElement(react_2.Box, { id: "custom-select-portal", position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 1400, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (_f = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _f === void 0 ? void 0 : _f.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, display: "flex", alignItems: "center", height: "2.5rem", px: "0.75rem", fontSize: "sm", _hover: { bg: theme.colors.gray[100] }, cursor: "pointer", onClick: function (e) {
                                 e.stopPropagation();
                                 handleCustomSelect(item);
                             } }, item.label)); })))))),
@@ -225,16 +225,9 @@ 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) {
-                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)));
-            }))),
+                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" })),
+                option.view ? react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 3 }, option.view) : 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,12 +52,9 @@ export type SearchSelectProps = {
         option?: Options[];
         width?: string;
     };
-    dropdownProfileView?: boolean;
 };
 export type Options = {
     id: string | number;
     label: string;
-    email?: string;
-    profileUrl?: string;
-    color?: string;
+    view?: React.ReactNode;
 };

package/dist/Components/Toaster/Toaster.js

@@ -29,25 +29,51 @@ var react_2 = require("@chakra-ui/react");
 var ToasterContext = (0, react_1.createContext)(undefined);
 function ToasterProvider(_a) {
     var children = _a.children;
-    // console.log(children, 'childrenchildren----');  // eslint-disable-line no-console
     var toast = (0, react_2.useToast)();
+    var theme = (0, react_2.useTheme)();
     var showToast = function (_a) {
-        var title = _a.title, description = _a.description, status = _a.status, _b = _a.duration, duration = _b === void 0 ? 5000 : _b, _c = _a.isClosable, isClosable = _c === void 0 ? true : _c, _d = _a.position, position = _d === void 0 ? "top-right" : _d, onClose = _a.onClose;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var title = _a.title, description = _a.description, _m = _a.status, status = _m === void 0 ? "info" : _m, _o = _a.duration, duration = _o === void 0 ? 5000 : _o, _p = _a.isClosable, isClosable = _p === void 0 ? true : _p, _q = _a.position, position = _q === void 0 ? "top-right" : _q, onClose = _a.onClose;
+        var statusColors = {
+            success: {
+                bg: (_b = theme.colors.green) === null || _b === void 0 ? void 0 : _b[50],
+                border: (_c = theme.colors.green) === null || _c === void 0 ? void 0 : _c[300],
+            },
+            error: {
+                bg: (_d = theme.colors.red) === null || _d === void 0 ? void 0 : _d[50],
+                border: (_e = theme.colors.red) === null || _e === void 0 ? void 0 : _e[300],
+            },
+            warning: {
+                bg: (_f = theme.colors.yellow) === null || _f === void 0 ? void 0 : _f[50],
+                border: (_g = theme.colors.yellow) === null || _g === void 0 ? void 0 : _g[300],
+            },
+            info: {
+                bg: (_h = theme.colors.blue) === null || _h === void 0 ? void 0 : _h[50],
+                border: (_j = theme.colors.blue) === null || _j === void 0 ? void 0 : _j[300],
+            },
+            loading: {
+                bg: (_k = theme.colors.gray) === null || _k === void 0 ? void 0 : _k[50],
+                border: (_l = theme.colors.gray) === null || _l === void 0 ? void 0 : _l[300],
+            },
+        };
+        var colors = statusColors[status];
         toast({
-            title: title,
-            description: description,
-            status: status,
             duration: duration,
             isClosable: isClosable,
             position: position,
             onCloseComplete: onClose,
+            render: function (_a) {
+                var onClose = _a.onClose;
+                return (react_1.default.createElement(react_2.Box, { bg: colors.bg, border: "0.063rem solid", borderColor: colors.border, boxShadow: "md", borderRadius: "md", p: 4, minW: "22.5rem" },
+                    react_1.default.createElement(react_2.Flex, { justify: "space-between", align: "flex-start" },
+                        react_1.default.createElement(react_2.Box, null,
+                            react_1.default.createElement(react_2.Text, { fontWeight: "semibold", mb: "0.25rem" }, title),
+                            react_1.default.createElement(react_2.Text, { fontSize: "sm" }, description)),
+                        isClosable && (react_1.default.createElement(react_2.CloseButton, { onClick: onClose, size: "sm", mt: 1, ml: 4 })))));
+            },
         });
     };
-    return (
-    // <ChakraProvider>
-    react_1.default.createElement(ToasterContext.Provider, { value: { showToast: showToast } }, children)
-    // {/* </ChakraProvider> */ }
-    );
+    return (react_1.default.createElement(ToasterContext.Provider, { value: { showToast: showToast } }, children));
 }
 exports.default = ToasterProvider;
 var useToaster = function () {

package/dist/Pages/productCaard.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var ProductCard_1 = require("../Components/ProductCard/ProductCard");
+var ProductCard_1 = __importDefault(require("../Components/ProductCard/ProductCard"));
 var react_2 = require("@chakra-ui/react");
 var productCaard = function () {
     var option = [{
@@ -21,7 +21,7 @@ var productCaard = function () {
         }
     ];
     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: {
+        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: {

package/dist/Pages/searchSelect.js

@@ -73,15 +73,24 @@ var __importDefault = (this && this.__importDefault) || function (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),
-        email: "text@123",
-        color: "red",
-    }); });
+    return Array.from({ length: end - start }, function (_, index) {
+        var _a, _b;
+        return ({
+            id: (start + index).toString(),
+            label: "Option ".concat(start + index),
+            view: react_1.default.createElement(react_2.Box, null,
+                react_1.default.createElement(react_2.Box, { w: "2rem", h: "2rem", borderRadius: "full", bg: 'gray.300', color: "white", display: "flex", justifyContent: "center", alignItems: "center", fontSize: "sm", fontWeight: "medium", overflow: "hidden" }, (_b = (_a = "Option ".concat(start + index)) === 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 ",
+                        start + index),
+                    react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500" }, "test@gmail.com")))
+        });
+    });
 };
 var delay = function (ms) { return new Promise(function (resolve) { return setTimeout(resolve, ms); }); };
 var SearchSelect = function () {
@@ -145,6 +154,7 @@ var SearchSelect = function () {
             // error={true}
             // errorMessage="hello"
             // isRemoveAllIcon
-            dropdownProfileView: true, virtualization: true })));
+            // dropdownProfileView
+            virtualization: true })));
 };
 exports.default = SearchSelect;

package/dist/Pages/toster.js

@@ -16,7 +16,48 @@ var TosterPage = function () {
         });
         //setIsOpen(true);
     };
+    var handleOnclick1 = function () {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "error",
+        });
+        //setIsOpen(true);
+    };
+    var handleOnclick2 = function () {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "warning",
+        });
+        //setIsOpen(true);
+    };
+    var handleOnclick3 = function () {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "info",
+        });
+        //setIsOpen(true);
+    };
+    var handleOnclick4 = function () {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "loading",
+        });
+        //setIsOpen(true);
+    };
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(Button_1.default, { label: "Tosterbutton", onClick: handleOnclick, variant: "solid", size: "md", width: 100 })));
+        react_1.default.createElement(Button_1.default, { label: "Success", onClick: handleOnclick, variant: "solid", size: "md", width: 100 }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(Button_1.default, { label: "Success", onClick: handleOnclick1, variant: "solid", size: "md", width: 100 }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(Button_1.default, { label: "Success", onClick: handleOnclick2, variant: "solid", size: "md", width: 100 }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(Button_1.default, { label: "Success", onClick: handleOnclick3, variant: "solid", size: "md", width: 100 }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(Button_1.default, { label: "Success", onClick: handleOnclick4, variant: "solid", size: "md", width: 100 }),
+        react_1.default.createElement("br", null)));
 };
 exports.default = TosterPage;

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

@@ -48,5 +48,6 @@ import withTheme from "./withTheme";
 import { useCustomTheme } from "./Theme/useCustomTheme";
 import { ThemesList } from "./Theme";
 import { debounce } from "./Utils/table";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+import ProductCard from "./Components/ProductCard/ProductCard";
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProductCard, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = void 0;
+exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
+exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -139,4 +139,6 @@ var Theme_1 = require("./Theme");
 Object.defineProperty(exports, "ThemesList", { enumerable: true, get: function () { return Theme_1.ThemesList; } });
 var table_1 = require("./Utils/table");
 Object.defineProperty(exports, "debounce", { enumerable: true, get: function () { return table_1.debounce; } });
+var ProductCard_1 = __importDefault(require("./Components/ProductCard/ProductCard"));
+exports.ProductCard = ProductCard_1.default;
 exports.default = withTheme_1.default;

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "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",

package/dist/Components/KaTable/CustomHeader.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-type CustomHeaderProps = {
-    column: any;
-    onSortChange?: (sortState: string, columnName: string) => void;
-    menuItems?: Array<{
-        label: string;
-        onClick: () => void;
-        submenu?: any[];
-    }>;
-    isSort?: boolean;
-    sortDirection: string;
-};
-declare const CustomHeader: React.MemoExoticComponent<({ column, onSortChange, menuItems, isSort, sortDirection, }: CustomHeaderProps) => React.JSX.Element>;
-export default CustomHeader;

package/dist/Components/KaTable/CustomHeader.js

@@ -1,69 +0,0 @@
-"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 bs_1 = require("react-icons/bs");
-var fa_1 = require("react-icons/fa");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var CustomHeader = (0, react_1.memo)(function (_a) {
-    var column = _a.column, onSortChange = _a.onSortChange, menuItems = _a.menuItems, isSort = _a.isSort, sortDirection = _a.sortDirection;
-    var handleSortClick = (0, react_1.useCallback)(function () {
-        var sortOrder = "none";
-        if (sortDirection === "none")
-            sortOrder = "asc";
-        else if (sortDirection === "asc")
-            sortOrder = "desc";
-        onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(sortOrder, column.key);
-    }, [sortDirection, column.key, onSortChange]);
-    return (react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center" },
-        react_1.default.createElement(react_2.Box, { fontWeight: "bold" }, column.title),
-        react_1.default.createElement(react_2.Flex, { alignItems: "center" },
-            isSort && (react_1.default.createElement(SortingIcon, { sortState: sortDirection, handleSortClick: handleSortClick })),
-            menuItems && (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (react_1.default.createElement(react_2.Menu, null,
-                react_1.default.createElement(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Options", icon: react_1.default.createElement(bs_1.BsThreeDots, null), size: "sm", variant: "ghost", _hover: { bg: "none" }, _active: { bg: "none" } }),
-                react_1.default.createElement(react_2.Portal, null,
-                    react_1.default.createElement(react_2.MenuList, null, menuItems.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index },
-                        react_1.default.createElement(react_2.MenuItem, { onClick: function () { return item === null || item === void 0 ? void 0 : item.onClick(); } }, item.label),
-                        item.submenu && react_1.default.createElement(Submenu, { items: item.submenu }))); }))))) : null)));
-});
-var SortingIcon = (0, react_1.memo)(function (_a) {
-    var sortState = _a.sortState, handleSortClick = _a.handleSortClick;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", bg: theme.colors.white, borderRadius: "full", cursor: "pointer", w: "24px", h: "24px", onClick: handleSortClick, transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
-        sortState === "none" && react_1.default.createElement(fa_1.FaSort, { size: 14 }),
-        sortState === "asc" && react_1.default.createElement(fa_1.FaCaretUp, { size: 14 }),
-        sortState === "desc" && react_1.default.createElement(fa_1.FaCaretDown, { size: 14 })));
-});
-var Submenu = (0, react_1.memo)(function (_a) {
-    var items = _a.items;
-    return (react_1.default.createElement(react_2.MenuGroup, null, items.map(function (subItem, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function () { return (subItem === null || subItem === void 0 ? void 0 : subItem.onClick) && (subItem === null || subItem === void 0 ? void 0 : subItem.onClick()); }, sx: {
-            pl: 6,
-            fontSize: "sm",
-            color: "gray.600",
-            _hover: { bg: "gray.100", color: "gray.800" }, // Hover styles
-        } }, subItem.label)); })));
-});
-exports.default = CustomHeader;

package/dist/Components/KaTable/KaTable.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import * as TableEnums from "ka-table/enums";
-import * as TableProps from "ka-table/props";
-import * as TableActionCreator from "ka-table/actionCreators";
-import * as TableModel from "ka-table/models";
-import * as TableUtils from "ka-table/utils";
-import * as TableFun from "ka-table";
-import "ka-table/style.css";
-import "./ka-table.css";
-import { KaTableProps } from "./KaTableProps";
-declare const _default: React.MemoExoticComponent<({ columns, data, rowKey, Edit, format, filter, childComponents, columnReorder, columnResizing, editableCells, validation, loading, checkSelect, onRowClick, onSelectionChange, selected, columnVisibility, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, }: KaTableProps) => React.JSX.Element>;
-export default _default;
-export { TableEnums, TableActionCreator, TableProps, TableModel, TableUtils, TableFun, };

package/dist/Components/KaTable/KaTable.js

@@ -1,111 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableFun = exports.TableUtils = exports.TableModel = exports.TableProps = exports.TableActionCreator = exports.TableEnums = void 0;
-var react_1 = __importStar(require("react"));
-var ka_table_1 = require("ka-table");
-var TableEnums = __importStar(require("ka-table/enums"));
-exports.TableEnums = TableEnums;
-var TableProps = __importStar(require("ka-table/props"));
-exports.TableProps = TableProps;
-var TableActionCreator = __importStar(require("ka-table/actionCreators"));
-exports.TableActionCreator = TableActionCreator;
-var TableModel = __importStar(require("ka-table/models"));
-exports.TableModel = TableModel;
-var TableUtils = __importStar(require("ka-table/utils"));
-exports.TableUtils = TableUtils;
-var TableFun = __importStar(require("ka-table"));
-exports.TableFun = TableFun;
-require("ka-table/style.css");
-require("./ka-table.css");
-var useMergedChildComponents_1 = __importDefault(require("./useMergedChildComponents"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var table_1 = require("../../Utils/table");
-var selectionCellColumn = {
-    key: "select-cell",
-    width: 50,
-    columnFreeze: true,
-    customHeader: false,
-    className: "select-cell",
-};
-var KaTable = function (_a) {
-    var _b, _c;
-    var columns = _a.columns, data = _a.data, _d = _a.rowKey, rowKey = _d === void 0 ? "id" : _d, Edit = _a.Edit, 
-    // sorting,
-    format = _a.format, 
-    // paging,
-    filter = _a.filter, childComponents = _a.childComponents, columnReorder = _a.columnReorder, columnResizing = _a.columnResizing, editableCells = _a.editableCells, validation = _a.validation, loading = _a.loading, checkSelect = _a.checkSelect, onRowClick = _a.onRowClick, onSelectionChange = _a.onSelectionChange, selected = _a.selected, columnVisibility = _a.columnVisibility, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _e = (0, react_1.useState)([]), sortState = _e[0], setSortState = _e[1];
-    if (checkSelect &&
-        !columns.some(function (column) { return column.key === "select-cell"; })) {
-        columns.unshift(selectionCellColumn);
-    }
-    var dataLength = (_b = data === null || data === void 0 ? void 0 : data.length) !== null && _b !== void 0 ? _b : 0;
-    // const columnVisibilitys = columnVisibility ?? false;
-    var handleSort = function (sort) {
-        setSortState(sort);
-    };
-    var sortedData = (0, react_1.useMemo)(function () { return (0, table_1.SortMultiColumnData)(__spreadArray([], data, true), sortState); }, [sortState, data]);
-    var mergedChildComponents = (0, useMergedChildComponents_1.default)({
-        childComponents: childComponents,
-        onSortChange: handleSort,
-        handleSelection: onSelectionChange,
-        rowKey: rowKey,
-        onRowClick: onRowClick,
-        selected: selected,
-        dataLength: dataLength,
-        columns: columns,
-        headerBgColor: headerBgColor,
-        freezedBgColor: freezedBgColor,
-        headerTextColor: headerTextColor,
-        freezedTextColor: freezedTextColor,
-        sortState: sortState,
-    });
-    return (react_1.default.createElement("div", { style: {
-            borderRadius: "10px 0 0 10px",
-            borderWidth: "0px 0px 0px 5px",
-            borderColor: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[500],
-            boxShadow: theme.shadows.lg,
-        } },
-        react_1.default.createElement(ka_table_1.Table, { columns: columns, data: sortedData, rowKeyField: rowKey, editingMode: Edit, key: columns, sortingMode: TableEnums.SortingMode.MultipleRemote, format: format, 
-            // paging={paging}
-            filteringMode: undefined, childComponents: mergedChildComponents, columnReordering: columnReorder, columnResizing: columnResizing, editableCells: editableCells, validation: validation, loading: loading, virtualScrolling: {
-                enabled: true,
-            } })));
-};
-exports.default = react_1.default.memo(KaTable);

package/dist/Components/KaTable/KaTableProps.d.ts

@@ -1,23 +0,0 @@
-export type KaTableProps = {
-    columns: any;
-    data: any;
-    rowKey?: any;
-    Edit?: any;
-    format?: (props: any) => void;
-    validation?: (props: any) => void;
-    filter?: any;
-    childComponents?: any;
-    columnReorder?: any;
-    columnResizing?: any;
-    editableCells?: any;
-    loading?: any;
-    checkSelect?: any;
-    onRowClick?: (rowData: any, column: any) => void;
-    onSelectionChange?: (selectedIds: any[]) => void;
-    selected?: any;
-    columnVisibility?: boolean;
-    headerBgColor?: string;
-    headerTextColor?: string;
-    freezedBgColor?: string;
-    freezedTextColor?: string;
-};

package/dist/Components/KaTable/KaTableProps.js

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

package/dist/Components/KaTable/SelectionCell.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { TableProps } from "./KaTable";
-declare const _default: React.MemoExoticComponent<({ rowKeyValue, selectedRows, onSelectionChange, selected, }: TableProps.ICellTextProps<any> & {
-    onSelectionChange: (ids: any[], type: string) => void;
-    rowKey: any;
-    selected: any;
-}) => React.JSX.Element>;
-export default _default;

package/dist/Components/KaTable/SelectionCell.js

@@ -1,38 +0,0 @@
-"use strict";
-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 = __importDefault(require("react"));
-var KaTable_1 = require("./KaTable");
-var SelectionCell = function (_a) {
-    var rowKeyValue = _a.rowKeyValue, selectedRows = _a.selectedRows, onSelectionChange = _a.onSelectionChange, selected = _a.selected;
-    var table = KaTable_1.TableFun.useTableInstance();
-    var onChangeHandle = function (event) {
-        if (event.nativeEvent.shiftKey) {
-            table.selectRowsRange(rowKeyValue, __spreadArray([], selectedRows, true).pop());
-        }
-        else {
-            var isChecked = event.currentTarget.checked;
-            var action = isChecked ? "add" : "remove";
-            onSelectionChange(rowKeyValue, action);
-            if (isChecked) {
-                table.selectRow(rowKeyValue);
-            }
-            else {
-                table.deselectRow(rowKeyValue);
-            }
-        }
-    };
-    return react_1.default.createElement("input", { type: "checkbox", checked: selected, onChange: onChangeHandle, style: { marginLeft: "37%" } });
-};
-exports.default = react_1.default.memo(SelectionCell);

package/dist/Components/KaTable/SelectionHeader.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const _default: React.MemoExoticComponent<({ onSelectionChange, rowKey, selected }: any) => React.JSX.Element>;
-export default _default;