pixelize-design-library 2.2.95 → 2.2.97

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/Header/components/desktopMenu.js

@@ -19,7 +19,7 @@ var DesktopMenu = function (_a) {
                 // bg={isActive(item.href) ? activeBg : "transparent"}
                 borderBottom: "2px solid ".concat(isActive(item.href) ? activeBg : "transparent"), borderRadius: 0, _hover: { bg: hoverBg, color: hoverTextColor }, color: isActive(item.href) ? activeBg : color },
                 react_2.default.createElement(react_1.VStack, { spacing: 0 },
-                    item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, (_c = item.badge) === null || _c === void 0 ? void 0 : _c.label)),
+                    item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em", borderRadius: "full" }, (_c = item.badge) === null || _c === void 0 ? void 0 : _c.label)),
                     react_2.default.createElement(react_1.Text, null, item.label))),
             hasChildren && (react_2.default.createElement(react_1.Collapse, { in: isHovered, animateOpacity: true },
                 react_2.default.createElement(react_1.Box, { position: "absolute", top: "100%", bg: colors === null || colors === void 0 ? void 0 : colors.white, color: colors === null || colors === void 0 ? void 0 : colors.black, rounded: "md", shadow: "md", minW: "10rem", zIndex: 10 },
@@ -27,7 +27,7 @@ var DesktopMenu = function (_a) {
                         var _a, _b, _c, _d;
                         return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor } },
                             react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
-                                subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em", alignItems: "end" }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
+                                subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em", alignItems: "end", borderRadius: "full" }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
                                 react_2.default.createElement(react_1.Text, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.text) === null || _d === void 0 ? void 0 : _d[800], _hover: { color: hoverTextColor } }, subItem.label))));
                     })))))));
     })));

package/dist/Components/Header/components/mobileMenu.js

@@ -43,7 +43,7 @@ var MobileMenu = function (_a) {
                                             react_2.default.createElement(react_1.Text, { fontSize: "sm" }, subItem.label)))));
                             }))))) : (react_2.default.createElement(react_1.Button, { key: item.label, onClick: function () { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
                         react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
-                            item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", fontSize: "0.6em" }, (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label)),
+                            item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", fontSize: "0.6em", borderRadius: "full" }, (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label)),
                             react_2.default.createElement(react_1.Text, null, item.label))));
                 }),
                 rightSlot && react_2.default.createElement(react_1.Box, { mt: 4 }, rightSlot)))));

package/dist/Components/Slider/Slider.js

@@ -74,6 +74,6 @@ var Slider = function (_a) {
         isArrow && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[800] }), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[200] } }),
             react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.ChevronRight, { color: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[800] }), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[200] } }))),
-        react_1.default.createElement(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2 }, slides.map(function (_, idx) { return (react_1.default.createElement(react_2.Box, { key: idx, w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, bg: idx === currentIndex ? "white" : "whiteAlpha.600", borderRadius: "full", cursor: "pointer", onClick: function () { return setCurrentIndex(idx); }, transition: "all 0.3s" })); }))));
+        slides.length > 1 && (react_1.default.createElement(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2 }, slides.map(function (_, idx) { return (react_1.default.createElement(react_2.Box, { key: idx, w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, bg: idx === currentIndex ? "white" : "whiteAlpha.600", borderRadius: "full", cursor: "pointer", onClick: function () { return setCurrentIndex(idx); }, transition: "all 0.3s" })); })))));
 };
 exports.default = Slider;

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

@@ -84,8 +84,8 @@ var ActiveFilters = function (_a) {
                             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, { 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: {
+            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")))));
+                }, flexShrink: 0, whiteSpace: "nowrap" }, "Clear All")))));
 };
 exports.default = ActiveFilters;

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.95",
+  "version": "2.2.97",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",