pixelize-design-library 2.2.94 → 2.2.96

package/dist/Components/Checkbox/Checkbox.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { CheckboxProps } from "./CheckboxProps";
-export default function CheckBox({ label, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, isRequired, error, errorMessage, isInformation, informationMessage, id, helperText, }: CheckboxProps): React.JSX.Element;
+export default function CheckBox({ label, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, isRequired, error, errorMessage, isInformation, informationMessage, id, helperText, onClick, }: CheckboxProps): React.JSX.Element;

package/dist/Components/Checkbox/Checkbox.js

@@ -10,12 +10,10 @@ var FormLabel_1 = require("../Common/FormLabel");
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 function CheckBox(_a) {
-    var label = _a.label, spacing = _a.spacing, isInvalid = _a.isInvalid, color = _a.color, iconColor = _a.iconColor, iconSize = _a.iconSize, isChecked = _a.isChecked, isIndeterminate = _a.isIndeterminate, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked, sx = _a.sx, isRequired = _a.isRequired, error = _a.error, errorMessage = _a.errorMessage, isInformation = _a.isInformation, informationMessage = _a.informationMessage, id = _a.id, helperText = _a.helperText;
+    var label = _a.label, spacing = _a.spacing, isInvalid = _a.isInvalid, color = _a.color, iconColor = _a.iconColor, iconSize = _a.iconSize, isChecked = _a.isChecked, isIndeterminate = _a.isIndeterminate, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked, sx = _a.sx, isRequired = _a.isRequired, error = _a.error, errorMessage = _a.errorMessage, isInformation = _a.isInformation, informationMessage = _a.informationMessage, id = _a.id, helperText = _a.helperText, onClick = _a.onClick;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.Checkbox, { spacing: spacing, isInvalid: isInvalid, 
-            // isRequired={isRequired}
-            colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], sx: sx, display: "flex", alignItems: "inherit" }, label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }))),
+        react_1.default.createElement(react_2.Checkbox, { onClick: onClick, spacing: spacing, isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], sx: sx, display: "flex", alignItems: "inherit" }, label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }))),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }

package/dist/Components/Checkbox/Checkbox.styles.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 exports.Checkbox = {
     baseStyle: function (_a) {
-        var theme = _a.theme;
+        var _b;
+        var theme = _a.theme, _c = _a.colorScheme, colorScheme = _c === void 0 ? "primary" : _c;
+        var palette = (_b = theme.colors[colorScheme]) !== null && _b !== void 0 ? _b : theme.colors.primary;
         return {
             control: {
                 width: "1.25rem",
@@ -16,34 +18,34 @@ exports.Checkbox = {
                 },
                 _indeterminate: {
                     bg: theme.colors.background[50],
-                    borderColor: theme.colors.primary[500],
+                    borderColor: palette[500],
                     svg: {
-                        color: theme.colors.primary[500],
+                        color: palette[500],
                     },
                 },
                 _checked: {
-                    bg: theme.colors.primary[600],
-                    borderColor: theme.colors.primary[600],
+                    bg: palette[600],
+                    borderColor: palette[600],
                 },
                 _hover: {
                     bg: theme.colors.background[100],
-                    borderColor: theme.colors.primary[400],
+                    borderColor: palette[400],
                     _checked: {
-                        bg: theme.colors.primary[600],
-                        borderColor: theme.colors.primary[600],
+                        bg: palette[600],
+                        borderColor: palette[600],
                     },
                     _indeterminate: {
                         bg: "none",
-                        borderColor: theme.colors.primary[600],
+                        borderColor: palette[600],
                     },
                 },
                 _focus: {
-                    boxShadow: "0 0 0 2px ".concat(theme.colors.primary[300]),
-                    borderColor: theme.colors.primary[500],
+                    boxShadow: "0 0 0 2px ".concat(palette[300]),
+                    borderColor: palette[500],
                 },
                 _active: {
-                    bg: theme.colors.primary[600],
-                    borderColor: theme.colors.primary[600],
+                    bg: palette[600],
+                    borderColor: palette[600],
                 },
             },
             icon: {
@@ -51,4 +53,8 @@ exports.Checkbox = {
             },
         };
     },
+    defaultProps: {
+        colorScheme: "primary",
+        size: "md",
+    },
 };

package/dist/Components/Checkbox/CheckboxProps.d.ts

@@ -1,5 +1,5 @@
 import { CheckboxProps as ChakraButtonProps } from "@chakra-ui/react";
-export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "size" | "iconColor" | "iconSize" | "isChecked" | "isIndeterminate" | "onChange" | "isDisabled" | "value" | "defaultChecked" | "sx"> & {
+export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "size" | "iconColor" | "iconSize" | "isChecked" | "isIndeterminate" | "onChange" | "isDisabled" | "value" | "defaultChecked" | "sx" | "onClick"> & {
     label?: string;
     width?: string | number;
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";

package/dist/Components/FilterSidebar/FilterSidebar.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+export type FilterOption = {
+    id: string;
+    label: string;
+    count?: number;
+};
+export type FilterSection = {
+    id: string;
+    label: string;
+    options?: FilterOption[];
+    searchable?: boolean;
+    range?: {
+        min: number;
+        max: number;
+        step?: number;
+        values?: number[];
+        unit?: string;
+    };
+    initiallyExpanded?: boolean;
+    type?: "checkboxes" | "radio";
+    checkboxes?: boolean;
+    radio?: boolean;
+};
+export type SelectedFilters = Record<string, any>;
+export type FilterSidebarProps = {
+    sidebarOptions: FilterSection[];
+    selected?: SelectedFilters;
+    onChange?: (selected: SelectedFilters) => void;
+    maxVisible?: number;
+    width?: string | number;
+    variant?: "minimal" | "cards";
+    containerHeight?: number | string;
+    containerPadding?: number | string;
+    headerPadding?: number;
+    panelPadding?: number;
+};
+declare const FilterSidebar: React.FC<FilterSidebarProps>;
+export default FilterSidebar;

package/dist/Components/FilterSidebar/FilterSidebar.js

@@ -0,0 +1,266 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var Accordion_1 = __importDefault(require("../Accordion/Accordion"));
+var Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var FilterSidebar = function (_a) {
+    var sidebarOptions = _a.sidebarOptions, selected = _a.selected, onChange = _a.onChange, _b = _a.maxVisible, maxVisible = _b === void 0 ? 10 : _b, _c = _a.width, width = _c === void 0 ? 280 : _c, _d = _a.variant, variant = _d === void 0 ? "minimal" : _d, containerPadding = _a.containerPadding, _e = _a.headerPadding, headerPadding = _e === void 0 ? 2 : _e, _f = _a.panelPadding, panelPadding = _f === void 0 ? 3 : _f;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    // Determine if the component is controlled (prop provided) or uncontrolled (internal state)
+    var isControlled = selected !== undefined;
+    // Local state for uncontrolled mode
+    var _g = (0, react_1.useState)(function () { return (__assign({}, (selected || {}))); }), localSelected = _g[0], setLocalSelected = _g[1];
+    // Derived state: use prop if controlled, otherwise local state
+    var internalSelected = (selected !== undefined ? selected : localSelected);
+    // Wrapper for state updates to handle both modes
+    var setInternalSelected = function (updater) {
+        var next = typeof updater === 'function' ? updater(internalSelected) : updater;
+        // In the existing code, the updater function often handles calling onChange.
+        // However, for safety in uncontrolled mode, we update local state.
+        if (!isControlled) {
+            setLocalSelected(next);
+        }
+    };
+    var _h = (0, react_1.useState)(function () {
+        var initial = {};
+        sidebarOptions.forEach(function (s) { return (initial[s.id] = !!s.initiallyExpanded); });
+        return initial;
+    }), expanded = _h[0], setExpanded = _h[1];
+    var _j = (0, react_1.useState)({}), searchTerms = _j[0], setSearchTerms = _j[1];
+    var activeCount = (0, react_1.useMemo)(function () {
+        return Object.values(internalSelected).reduce(function (acc, v) { return acc + (Array.isArray(v) ? v.length : 0); }, 0);
+    }, [internalSelected]);
+    var toggleOption = function (sectionId, optionId, checked) {
+        setInternalSelected(function (prev) {
+            var _a;
+            var current = new Set(prev[sectionId] || []);
+            if (checked)
+                current.add(optionId);
+            else
+                current.delete(optionId);
+            var next = __assign(__assign({}, prev), (_a = {}, _a[sectionId] = Array.from(current), _a));
+            onChange === null || onChange === void 0 ? void 0 : onChange(next);
+            return next;
+        });
+    };
+    var clearFilter = function (sectionId, optionId) {
+        setInternalSelected(function (prev) {
+            var next = __assign({}, prev);
+            if (optionId) {
+                var list = (next[sectionId] || []);
+                next[sectionId] = list.filter(function (id) { return id !== optionId; });
+            }
+            else {
+                delete next[sectionId];
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(next);
+            return next;
+        });
+    };
+    var clearAll = function () {
+        setInternalSelected(function () {
+            var next = {};
+            onChange === null || onChange === void 0 ? void 0 : onChange(next);
+            return next;
+        });
+    };
+    var items = sidebarOptions.map(function (section) { return ({
+        header: (react_1.default.createElement(react_2.Flex, { justify: "space-between", align: "center", w: "full", py: 1 },
+            react_1.default.createElement(react_2.Text, { fontWeight: "bold", fontSize: "md", color: theme.colors.gray[700] }, section.label),
+            (function () {
+                var sel = internalSelected[section.id];
+                var hasValue = Array.isArray(sel) ? sel.length > 0 : !!sel;
+                return hasValue;
+            })() ? (react_1.default.createElement(react_2.Badge, { colorScheme: "red", variant: "solid", fontSize: "xs", cursor: "pointer", onClick: function (e) {
+                    e.stopPropagation();
+                    clearFilter(section.id);
+                }, borderRadius: "full", px: 2 }, "Clear")) : null)),
+        content: (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 2, py: 1 }, section.range ? ((function () {
+            var _a, _b, _c, _d;
+            var range = section.range;
+            var step = range.step || 1;
+            var values = range.values || Array.from({ length: Math.floor((range.max - range.min) / (step || 100)) + 1 }, function (_, i) { return range.min + i * (step || 100); });
+            return (react_1.default.createElement(react_2.Box, { w: "full", px: 2 },
+                react_1.default.createElement(react_2.RangeSlider
+                // aria-label={["min", "max"]}
+                , { 
+                    // aria-label={["min", "max"]}
+                    min: range.min, max: range.max, step: step, value: internalSelected[section.id] || [range.min, range.max], onChange: function (val) {
+                        setInternalSelected(function (prev) {
+                            var _a;
+                            var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = val, _a));
+                            onChange === null || onChange === void 0 ? void 0 : onChange(next);
+                            return next;
+                        });
+                    }, mb: 4 },
+                    react_1.default.createElement(react_2.RangeSliderTrack, { bg: theme.colors.gray[200], h: 2, borderRadius: "full" },
+                        react_1.default.createElement(react_2.RangeSliderFilledTrack, { bg: theme.colors.red[500] })),
+                    react_1.default.createElement(react_2.RangeSliderThumb, { index: 0, boxSize: 5, borderColor: theme.colors.gray[300], boxShadow: "sm" }),
+                    react_1.default.createElement(react_2.RangeSliderThumb, { index: 1, boxSize: 5, borderColor: theme.colors.gray[300], boxShadow: "sm" })),
+                react_1.default.createElement(react_2.HStack, { w: "full", justify: "space-between" },
+                    react_1.default.createElement(react_2.Box, { className: "price-min", borderWidth: "1px", borderRadius: "md", p: 2, minW: "90px", textAlign: "center", bg: theme.colors.gray[50], borderColor: theme.colors.gray[200] },
+                        react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.600", mb: "-2px" }, "Min"),
+                        react_1.default.createElement(react_2.Select, { "aria-label": "Minimum price", className: "price-min-select", variant: "outline", size: "sm", textAlign: "center", borderColor: theme.colors.gray[300], bg: theme.colors.white, borderRadius: "full", _hover: { borderColor: theme.colors.gray[400] }, _focus: { borderColor: theme.colors.red[500], boxShadow: "none" }, value: ((_b = (_a = internalSelected[section.id]) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : range.min), onChange: function (e) {
+                                var _a, _b;
+                                var min = Number(e.target.value);
+                                var max = (_b = (_a = internalSelected[section.id]) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : range.max;
+                                var nextVal = [Math.min(min, max), Math.max(min, max)];
+                                setInternalSelected(function (prev) {
+                                    var _a;
+                                    var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = nextVal, _a));
+                                    onChange === null || onChange === void 0 ? void 0 : onChange(next);
+                                    return next;
+                                });
+                            } }, values.map(function (v) { return (react_1.default.createElement("option", { key: "min-".concat(v), value: v },
+                            v,
+                            range.unit ? " ".concat(range.unit) : "")); }))),
+                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: "gray.400" }, "-"),
+                    react_1.default.createElement(react_2.Box, { className: "price-max", borderWidth: "1px", borderRadius: "md", p: 2, minW: "100px", textAlign: "center", bg: theme.colors.gray[50], borderColor: theme.colors.gray[200] },
+                        react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.600", mb: "-2px" }, "Max"),
+                        react_1.default.createElement(react_2.Select, { "aria-label": "Maximum price", className: "price-max-select", variant: "outline", size: "sm", textAlign: "center", borderColor: theme.colors.gray[300], bg: theme.colors.white, borderRadius: "full", _hover: { borderColor: theme.colors.gray[400] }, _focus: { borderColor: theme.colors.red[500], boxShadow: "none" }, value: ((_d = (_c = internalSelected[section.id]) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : range.max), onChange: function (e) {
+                                var _a, _b;
+                                var max = Number(e.target.value);
+                                var min = (_b = (_a = internalSelected[section.id]) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : range.min;
+                                var nextVal = [Math.min(min, max), Math.max(min, max)];
+                                setInternalSelected(function (prev) {
+                                    var _a;
+                                    var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = nextVal, _a));
+                                    onChange === null || onChange === void 0 ? void 0 : onChange(next);
+                                    return next;
+                                });
+                            } }, values.map(function (v) { return (react_1.default.createElement("option", { key: "max-".concat(v), value: v },
+                            v,
+                            range.unit ? " ".concat(range.unit) : "")); }))))));
+        })()) : (react_1.default.createElement(react_1.default.Fragment, null,
+            section.id === "rating" ? (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, w: "full" }, [4, 3, 2, 1].map(function (r) { return (react_1.default.createElement(react_2.Flex, { key: "rating-".concat(r), align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", _hover: { bg: theme.colors.gray[50] }, onClick: function () {
+                    setInternalSelected(function (prev) {
+                        var _a;
+                        var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = String(r), _a));
+                        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+                        return next;
+                    });
+                } },
+                react_1.default.createElement(react_2.HStack, { spacing: 2, align: "center" },
+                    react_1.default.createElement(react_2.HStack, { spacing: 1 }, Array.from({ length: 5 }, function (_, i) { return (react_1.default.createElement(react_2.Box, { key: "star-".concat(r, "-").concat(i) },
+                        react_1.default.createElement(lucide_react_1.Star, { size: 16, color: theme.colors.orange[500], fill: i < r ? theme.colors.orange[500] : "none" }))); })),
+                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[700] }, "& Up")),
+                String(internalSelected[section.id] || "") === String(r) && (react_1.default.createElement(react_2.Badge, { fontSize: "xs", colorScheme: "red", borderRadius: "full", px: 2 }, "Selected")))); }))) : null,
+            section.searchable && (react_1.default.createElement(react_2.Input, { size: "sm", placeholder: "Search ".concat(section.label, "..."), borderRadius: "md", bg: theme.colors.gray[50], border: "1px solid", borderColor: theme.colors.gray[200], _focus: { borderColor: theme.colors.red[400], boxShadow: "none" }, value: searchTerms[section.id] || "", onChange: function (e) {
+                    var v = e.target.value;
+                    setSearchTerms(function (prev) {
+                        var _a;
+                        return (__assign(__assign({}, prev), (_a = {}, _a[section.id] = v, _a)));
+                    });
+                    if (v)
+                        setExpanded(function (prev) {
+                            var _a;
+                            return (__assign(__assign({}, prev), (_a = {}, _a[section.id] = true, _a)));
+                        });
+                } })),
+            section.id !== "rating" && (((section.type === "radio") || section.radio) ? (react_1.default.createElement(react_2.RadioGroup, { w: "full", value: internalSelected[section.id] || "", onChange: function (val) {
+                    setInternalSelected(function (prev) {
+                        var _a;
+                        var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = val, _a));
+                        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+                        return next;
+                    });
+                } },
+                react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, w: "full" }, ((expanded[section.id] ? (section.options || []) : (section.options || []).slice(0, maxVisible))
+                    .filter(function (opt) { return !section.searchable || !(searchTerms[section.id]) || opt.label.toLowerCase().includes((searchTerms[section.id] || "").toLowerCase()); })).map(function (opt) { return (react_1.default.createElement(react_2.Radio, { key: opt.id, value: opt.id, size: "md", colorScheme: "red" },
+                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[700] }, opt.label))); })))) : (((expanded[section.id] ? (section.options || []) : (section.options || []).slice(0, maxVisible))
+                .filter(function (opt) { return !section.searchable || !(searchTerms[section.id]) || opt.label.toLowerCase().includes((searchTerms[section.id] || "").toLowerCase()); })).map(function (opt) { return (react_1.default.createElement(react_2.Flex, { key: opt.id, align: "center", justify: "space-between", w: "full", _hover: { bg: theme.colors.gray[50], borderRadius: "md" }, p: 1 },
+                react_1.default.createElement(react_2.Flex, { align: "center", gap: 3 },
+                    react_1.default.createElement(Checkbox_1.default, { isChecked: Array.isArray(internalSelected[section.id]) && (internalSelected[section.id] || []).includes(opt.id), onChange: function (e) {
+                            toggleOption(section.id, opt.id, e.target.checked);
+                        }, size: "sm", color: "red" }),
+                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[700], cursor: "pointer", onClick: function () {
+                            var isChecked = Array.isArray(internalSelected[section.id]) && (internalSelected[section.id] || []).includes(opt.id);
+                            toggleOption(section.id, opt.id, !isChecked);
+                        } }, opt.label)),
+                typeof opt.count === "number" && (react_1.default.createElement(react_2.Badge, { fontSize: "xs", colorScheme: "gray", borderRadius: "full", px: 2 }, opt.count)))); }))),
+            (section.options && section.options.length > maxVisible) && (react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "medium", color: theme.colors.blue[600], cursor: "pointer", _hover: { textDecoration: "underline" }, onClick: function () { return setExpanded(function (prev) {
+                    var _a;
+                    return (__assign(__assign({}, prev), (_a = {}, _a[section.id] = !prev[section.id], _a)));
+                }); } }, expanded[section.id] ? "Show less" : "+ ".concat((section.options.length - maxVisible), " more"))))))),
+        itemProps: {
+            borderTop: "none",
+            borderBottom: "1px solid ".concat(theme.colors.gray[100]),
+            _last: { borderBottom: "none" }
+        },
+        buttonProps: {
+            _hover: { bg: theme.colors.gray[50] }
+        },
+        panelProps: {},
+        customStyles: {
+            buttonStyle: variant === "minimal"
+                ? {
+                    justifyContent: "space-between",
+                    padding: "8px 0",
+                    background: "transparent",
+                }
+                : {
+                    justifyContent: "space-between",
+                    padding: headerPadding,
+                    background: theme.colors.gray[50],
+                    borderRadius: 8,
+                    border: "1px solid ".concat(theme.colors.gray[200]),
+                    marginBottom: 6,
+                },
+            panelStyle: variant === "minimal"
+                ? {
+                    padding: "4px 0 8px 0",
+                }
+                : {
+                    padding: panelPadding,
+                    background: theme.colors.white || "#fff",
+                    borderRadius: 8,
+                },
+        },
+    }); });
+    return (react_1.default.createElement(react_2.Box, { w: width, bg: variant === "minimal" ? theme.colors.white || "#fff" : theme.colors.gray[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? "1px solid ".concat(theme.colors.gray[200]) : "none", h: "fit-content" },
+        react_1.default.createElement(react_2.Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.gray[100] },
+            react_1.default.createElement(react_2.Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.gray[800] }, "Filters"),
+            activeCount > 0 && (react_1.default.createElement(react_2.Button, { size: "xs", variant: "outline", leftIcon: react_1.default.createElement(lucide_react_1.X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red" }, "Clear All"))),
+        react_1.default.createElement(Accordion_1.default, { allowMultiple: true, defaultIndex: sidebarOptions.map(function (_, i) { return i; }), items: items })));
+};
+exports.default = FilterSidebar;

package/dist/Components/Table/Components/ActiveFilters.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { TableHeaderProps } from "../TableProps";
+interface ActiveFiltersProps {
+    columns: TableHeaderProps[];
+    columnsSearch: Record<string, string>;
+    setColumnsSearch: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+}
+declare const ActiveFilters: React.FC<ActiveFiltersProps>;
+export default ActiveFilters;

package/dist/Components/Table/Components/ActiveFilters.js

@@ -0,0 +1,91 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var Divider_1 = __importDefault(require("../../Divider/Divider"));
+var ActiveFilters = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var columns = _a.columns, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    // Get active filters (columns that have a search value)
+    var activeFilters = Object.entries(columnsSearch)
+        .filter(function (_a) {
+        var _ = _a[0], value = _a[1];
+        return value && value.trim() !== "";
+    })
+        .map(function (_a) {
+        var columnId = _a[0], value = _a[1];
+        var column = columns.find(function (col) { return col.id === columnId; });
+        return {
+            columnId: columnId,
+            label: (column === null || column === void 0 ? void 0 : column.label) || columnId,
+            value: value.trim(),
+        };
+    });
+    if (activeFilters.length === 0) {
+        return null;
+    }
+    var handleRemoveFilter = function (columnId) {
+        setColumnsSearch(function (prev) {
+            var newSearch = __assign({}, prev);
+            delete newSearch[columnId];
+            return newSearch;
+        });
+    };
+    var handleClearAll = function () {
+        setColumnsSearch({});
+    };
+    return (react_1.default.createElement(react_2.Box, { px: 2, py: 1, bg: ((_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[100]) || ((_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[50]), overflowX: "auto", sx: {
+            '&::-webkit-scrollbar': {
+                height: '6px',
+            },
+            '&::-webkit-scrollbar-track': {
+                background: theme.colors.gray[100],
+                borderRadius: '3px',
+            },
+            '&::-webkit-scrollbar-thumb': {
+                background: theme.colors.gray[400],
+                borderRadius: '3px',
+            },
+            '&::-webkit-scrollbar-thumb:hover': {
+                background: theme.colors.gray[500],
+            },
+            scrollbarWidth: 'thin',
+            scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
+        } },
+        react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content" },
+            activeFilters.length > 0 && react_1.default.createElement(Divider_1.default, null),
+            activeFilters.map(function (filter) {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+                return (react_1.default.createElement(react_2.Flex, { key: filter.columnId, alignItems: "center", gap: 1, px: 2, py: 1, bg: ((_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.blue) === null || _b === void 0 ? void 0 : _b[50]) || ((_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[50]), borderRadius: "md", border: "0.063rem solid ".concat(((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.blue) === null || _f === void 0 ? void 0 : _f[200]) || ((_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h[200])), flexShrink: 0 },
+                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[700], whiteSpace: "nowrap" },
+                        react_1.default.createElement(react_2.Text, { as: "span", fontWeight: 600 },
+                            filter.label,
+                            ":"),
+                        " ",
+                        filter.value),
+                    react_1.default.createElement(react_2.IconButton, { "aria-label": "Remove filter for ".concat(filter.label), icon: react_1.default.createElement(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", onClick: function () { return handleRemoveFilter(filter.columnId); }, _hover: {
+                            bg: ((_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.blue) === null || _m === void 0 ? void 0 : _m[100]) || ((_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.primary) === null || _p === void 0 ? void 0 : _p[100]),
+                        }, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })));
+            }),
+            activeFilters.length > 1 && (react_1.default.createElement(react_2.Text, { as: "p", className: "clear-all-text", "aria-label": "Clear All", fontSize: "sm", color: ((_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.blue) === null || _g === void 0 ? void 0 : _g[600]) || ((_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[600]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
+                    textDecoration: "underline",
+                }, flexShrink: 0, whiteSpace: "nowrap" }, "Clear All")))));
+};
+exports.default = ActiveFilters;

package/dist/Components/Table/Components/TableFilters.d.ts

@@ -1,4 +1,7 @@
 import React from "react";
 import { TableFiltersProps } from "../TableProps";
-declare const TableFilters: React.MemoExoticComponent<({ header, setColumnsSearch, columnsSearch, onClose }: TableFiltersProps) => React.JSX.Element>;
+declare const TableFilters: React.MemoExoticComponent<({ header, setColumnsSearch, columnsSearch, onClose, isOpen, onOpen, }: TableFiltersProps & {
+    isOpen?: boolean | undefined;
+    onOpen?: (() => void) | undefined;
+}) => React.JSX.Element>;
 export default TableFilters;

package/dist/Components/Table/Components/TableFilters.js

@@ -28,7 +28,7 @@ var react_2 = require("@chakra-ui/react");
 var table_1 = require("../../../Utils/table");
 var lucide_react_1 = require("lucide-react");
 var TableFilters = (0, react_1.memo)(function (_a) {
-    var header = _a.header, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, onClose = _a.onClose;
+    var header = _a.header, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, onClose = _a.onClose, isOpen = _a.isOpen, onOpen = _a.onOpen;
     var searchRef = (0, react_1.useRef)(null);
     var _b = (0, react_1.useState)(false), refreshDataOnOpen = _b[0], setRefreshDataOnOpen = _b[1];
     var debounceRef = (0, table_1.debounce)(function (value) {
@@ -40,9 +40,21 @@ var TableFilters = (0, react_1.memo)(function (_a) {
         }
         /* eslint-disable */
     }, [refreshDataOnOpen]);
-    return (react_1.default.createElement(react_2.Popover, { onClose: onClose, onOpen: function () {
-            setRefreshDataOnOpen(function (prev) { return !prev; });
-        } },
+    // Auto-focus input when popover opens
+    (0, react_1.useEffect)(function () {
+        if (isOpen && searchRef.current) {
+            // Small delay to ensure popover is fully rendered
+            setTimeout(function () {
+                var _a;
+                (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
+        }
+    }, [isOpen]);
+    var handleOpen = function () {
+        setRefreshDataOnOpen(function (prev) { return !prev; });
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    };
+    return (react_1.default.createElement(react_2.Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen },
         react_1.default.createElement(react_2.PopoverTrigger, null,
             react_1.default.createElement(react_2.IconButton, { "aria-label": "Search", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "xs", variant: "ghost", _hover: { bg: "none" } })),
         react_1.default.createElement(react_2.Portal, null,
@@ -50,7 +62,7 @@ var TableFilters = (0, react_1.memo)(function (_a) {
                 react_1.default.createElement(react_2.PopoverBody, { p: 2 },
                     react_1.default.createElement(react_2.InputGroup, { flex: "1", size: "xs" },
                         react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
-                            react_1.default.createElement(lucide_react_1.Search, { color: "gray.300" })),
+                            react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, color: "gray.400", boxSize: 4 })),
                         react_1.default.createElement(react_2.Input, { autoFocus: true, placeholder: "Search ".concat(header.label, "..."), size: "xs", ref: searchRef, onChange: function (e) {
                                 e.stopPropagation();
                                 debounceRef(e.target.value);

package/dist/Components/Table/Components/TableHeader.js

@@ -47,6 +47,7 @@ var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 var TableHeader = function (_a) {
     var columns = _a.columns, isCheckbox = _a.isCheckbox, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _b = (0, react_2.useState)(null), openFilterId = _b[0], setOpenFilterId = _b[1];
     var RenderCheckbox = (0, react_2.useCallback)(function () {
         var _a, _b, _c, _d;
         return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
@@ -73,7 +74,7 @@ var TableHeader = function (_a) {
         columns.map(function (header, index) {
             if (header === null || header === void 0 ? void 0 : header.isHidden)
                 return null;
-            return (react_2.default.createElement(ColumnHeader, { header: header, index: index, key: header.label, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor, headerTextColor: headerTextColor, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }));
+            return (react_2.default.createElement(ColumnHeader, { header: header, index: index, key: header.label, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor, headerTextColor: headerTextColor, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }));
         }),
         isLink && react_2.default.createElement(RenderView, null)));
 };
@@ -88,7 +89,7 @@ var SortingIcon = (0, react_2.memo)(function (_a) {
 });
 var ColumnHeader = (0, react_2.memo)(function (_a) {
     var _b, _c, _d, _e, _f, _g;
-    var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, columnsSort = _a.columnsSort, headerRefs = _a.headerRefs, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch, handleSort = _a.handleSort;
+    var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, columnsSort = _a.columnsSort, headerRefs = _a.headerRefs, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch, handleSort = _a.handleSort, openFilterId = _a.openFilterId, setOpenFilterId = _a.setOpenFilterId;
     var _h = (0, react_2.useState)(false), isHovered = _h[0], setIsHovered = _h[1];
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var isFrozen = header.isFreeze;
@@ -142,6 +143,9 @@ var ColumnHeader = (0, react_2.memo)(function (_a) {
                             var _a;
                             return (__assign(__assign({}, prev), (_a = {}, _a[header.id] = searchVal, _a)));
                         });
-                    }, columnsSearch: columnsSearch[header.id] || "", onClose: function () { return setIsHovered(false); } })),
+                    }, columnsSearch: columnsSearch[header.id] || "", onClose: function () {
+                        setIsHovered(false);
+                        setOpenFilterId(null);
+                    }, isOpen: openFilterId === header.id, onOpen: function () { return setOpenFilterId(header.id); } })),
             react_2.default.createElement("div", { className: "resize-handle", onMouseDown: handleMouseDown }))));
 });

package/dist/Components/Table/Table.js

@@ -40,6 +40,7 @@ var TableSettings_1 = __importDefault(require("./TableSettings/TableSettings"));
 var HeaderActions_1 = __importDefault(require("./Components/HeaderActions"));
 var Divider_1 = __importDefault(require("../Divider/Divider"));
 var TableSearch_1 = __importDefault(require("./Components/TableSearch"));
+var ActiveFilters_1 = __importDefault(require("./Components/ActiveFilters"));
 function Table(_a) {
     var _b, _c, _d, _e, _f, _g;
     var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _h = _a.isCheckbox, isCheckbox = _h === void 0 ? false : _h, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _j = _a.noBorders, noBorders = _j === void 0 ? false : _j, _k = _a.isPagination, isPagination = _k === void 0 ? true : _k, onRowClick = _a.onRowClick, selections = _a.selections, _l = _a.isActionFreeze, isActionFreeze = _l === void 0 ? true : _l, _m = _a.preferences, preferences = _m === void 0 ? {
@@ -52,11 +53,6 @@ function Table(_a) {
     } : _m, _o = _a.paginationMode, paginationMode = _o === void 0 ? "client" : _o, _p = _a.noOfRowsPerPage, noOfRowsPerPage = _p === void 0 ? 50 : _p, _q = _a.totalRecords, totalRecords = _q === void 0 ? 0 : _q, onPagination = _a.onPagination, _r = _a.isTableSettings, isTableSettings = _r === void 0 ? false : _r, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, tableSettings = _a.tableSettings;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _s = (0, react_1.useState)({}), columnsSearch = _s[0], setColumnsSearch = _s[1];
-    //   useEffect(() => {
-    //   if (onColumnFilter) {
-    //     onColumnFilter(columnsSearch);
-    //   }
-    // }, [columnsSearch, onColumnFilter]);
     var isServerPagination = paginationMode === "server";
     var _t = (0, usePreferences_1.useGetPreferences)({
         baseUrl: preferences.url,
@@ -114,7 +110,8 @@ function Table(_a) {
             selection.length ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(Divider_1.default, null),
                 react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))) : null,
-            (isPagination || isServerPagination) && (react_1.default.createElement(react_2.Box, { ml: "auto" },
+            react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
+            (isPagination || isServerPagination) && (react_1.default.createElement(react_2.Box, { ml: "auto", minW: 310 },
                 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", sx: {
                 '&::-webkit-scrollbar': {

package/dist/index.d.ts

@@ -59,5 +59,6 @@ import PaymentCard from "./Components/Card/PaymentCard/PaymentCard";
 import ApexLineChart from "./Components/Apexcharts/ApexLineChart/ApexLineChart";
 import Notification from "./Components/Notification/Notification";
 import DatePicker from "./Components/DatePicker/ThemeDatePicker";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FileUploader, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+import FilterSidebar from "./Components/FilterSidebar/FilterSidebar";
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FileUploader, FilterSidebar, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, 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.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUploader = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = 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 = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = void 0;
+exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = 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 = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -162,4 +162,6 @@ var Notification_1 = __importDefault(require("./Components/Notification/Notifica
 exports.Notification = Notification_1.default;
 var ThemeDatePicker_1 = __importDefault(require("./Components/DatePicker/ThemeDatePicker"));
 exports.DatePicker = ThemeDatePicker_1.default;
+var FilterSidebar_1 = __importDefault(require("./Components/FilterSidebar/FilterSidebar"));
+exports.FilterSidebar = FilterSidebar_1.default;
 exports.default = withTheme_1.default;

package/package.json

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