@beweco/aurora-ui 0.1.13 → 0.1.15

package/dist/index.esm.js

@@ -1,5 +1,6 @@
-import { Button as Button$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, Input as Input$1, RadioGroup, Radio, cn, Card as Card$1, Spacer, Tabs, Tab, Chip as Chip$1, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Autocomplete, Breadcrumbs, BreadcrumbItem, DropdownSection, ListboxItem, Popover, PopoverTrigger, Tooltip as Tooltip$1, PopoverContent, Listbox, Accordion, AccordionItem, ListboxSection, Avatar, CardBody, CardFooter, Pagination as Pagination$1, Link, Switch as Switch$1, TimeInput as TimeInput$1, Select as Select$1, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Textarea as Textarea$1, Alert, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, Slider, ModalFooter as ModalFooter$1, Spinner } from '@heroui/react';
+import { Button as Button$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, Input as Input$1, RadioGroup, Radio, cn, Card as Card$1, Spacer, Tabs, Tab, Chip as Chip$1, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Autocomplete, Breadcrumbs, BreadcrumbItem, DropdownSection, ListboxItem, Popover, PopoverTrigger, Tooltip as Tooltip$1, PopoverContent, Listbox, Accordion, AccordionItem, ListboxSection, Avatar, CardBody, CardFooter, Pagination as Pagination$1, Link, Switch as Switch$1, TimeInput as TimeInput$1, Select as Select$1, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Textarea as Textarea$1, Alert, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, Slider, ModalFooter as ModalFooter$1, Spinner, SelectItem, Drawer, DrawerContent, DrawerBody } from '@heroui/react';
 export * from '@heroui/react';
+export { Slider } from '@heroui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useId, useState, useCallback, useMemo, createContext, useContext, createElement, useRef, useEffect, useLayoutEffect } from 'react';
 import { Icon } from '@iconify/react';
@@ -1402,12 +1403,15 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
     return (jsx("nav", { "aria-label": "Progress", className: "max-w-fit", children: jsx("ol", { className: cn("flex flex-col gap-y-3", colors, className), children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
                 var status = currentStep === stepIdx
                     ? "active"
-                    : currentStep < stepIdx
-                        ? "inactive"
-                        : "complete";
+                    : step.isCompleted
+                        ? "complete"
+                        : "inactive";
+                var isDisabled = status === "inactive";
                 return (
                 // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-                jsxs("li", { className: "relative", children: [jsx("div", { className: "flex w-full max-w-full items-center", children: jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: cn("group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5", stepClassName), onClick: function () { return setCurrentStep(stepIdx); } }, props, { children: [jsx("div", { className: "flex h-full items-center", children: jsx(LazyMotion, { features: domAnimation, children: jsx("div", { className: "relative", children: jsx(m.div, { animate: status, className: cn("border-medium text-large text-default-600 relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", {
+                jsxs("li", { className: "relative", children: [jsx("div", { className: "flex w-full max-w-full items-center", children: jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: cn("group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5", stepClassName, {
+                                    "cursor-not-allowed": isDisabled,
+                                }), onClick: function () { return setCurrentStep(stepIdx); }, disabled: isDisabled }, props, { children: [jsx("div", { className: "flex h-full items-center", children: jsx(LazyMotion, { features: domAnimation, children: jsx("div", { className: "relative", children: jsx(m.div, { animate: status, className: cn("border-medium text-large text-default-600 relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", {
                                                         "shadow-lg": status === "complete",
                                                     }), "data-status": status, initial: false, transition: { duration: 0.25 }, variants: {
                                                         inactive: {
@@ -2203,7 +2207,7 @@ function GlobalToast() {
     if (!toast.isVisible) {
         return null;
     }
-    return (jsx("div", { className: "fixed top-4 right-4 z-50 w-full max-w-sm", children: jsx(Alert, { hideIconWrapper: true, color: toast.color, variant: "flat", title: toast.title, description: toast.description, isClosable: true, onClose: hideToast }) }));
+    return (jsx("div", { className: "fixed top-4 right-4 z-[2000] w-full max-w-sm", children: jsx(Alert, { hideIconWrapper: true, color: toast.color, variant: "flat", title: toast.title, description: toast.description, isClosable: true, onClose: hideToast }) }));
 }
 
 // Traducciones por defecto en español
@@ -2715,6 +2719,371 @@ var NavigationLoadingOverlay = function (_a) {
     return (jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [jsx("div", { className: "absolute inset-0 bg-black/10 backdrop-blur-sm" }), jsx("div", { className: "flex flex-col items-center gap-4", children: jsx(Spinner, { size: "lg", color: "primary", className: "drop-shadow-sm" }) })] }));
 };
 
+/**
+ * Footer of the DrawerFilters with action buttons.
+ */
+var DrawerFiltersFooter = function (_a) {
+    var onClearFilters = _a.onClearFilters, onCancel = _a.onCancel, onApplyFilters = _a.onApplyFilters, _b = _a.translations, translations = _b === void 0 ? {} : _b;
+    var _c = translations.clearFilters, clearFilters = _c === void 0 ? "Limpiar filtro" : _c, _d = translations.cancel, cancel = _d === void 0 ? "Cancelar" : _d, _e = translations.applyFilters, applyFilters = _e === void 0 ? "Aplicar filtro" : _e;
+    return (jsxs("div", { className: "flex items-center justify-between px-6 py-10 bg-content1", children: [jsx(Button, { variant: "light", color: "primary", onPress: onClearFilters, className: "text-primary", children: clearFilters }), jsxs("div", { className: "flex items-center gap-3", children: [jsx(Button, { variant: "bordered", color: "primary", onPress: onCancel, children: cancel }), jsx(Button, { variant: "solid", color: "primary", onPress: onApplyFilters, children: applyFilters })] })] }));
+};
+
+/**
+ * Header of the DrawerFilters with title and description.
+ */
+var DrawerFiltersHeader = function (_a) {
+    var title = _a.title, description = _a.description;
+    return (jsxs("div", { className: "px-6 pt-10", children: [jsx(H2, { className: "text-xl font-semibold text-foreground mb-2", children: title }), jsx(P, { className: "text-default-500", children: description })] }));
+};
+
+/**
+ * RangeFilter component with histogram visualization for range selection.
+ */
+var RangeFilter = function (_a) {
+    var title = _a.title, description = _a.description, value = _a.value, onChange = _a.onChange, minValue = _a.minValue, maxValue = _a.maxValue, _b = _a.step, step = _b === void 0 ? 1000 : _b, data = _a.data, _c = _a.formatValue, formatValue = _c === void 0 ? function (val) { return val.toString(); } : _c, _d = _a.bins, bins = _d === void 0 ? 20 : _d, _e = _a.translations, translations = _e === void 0 ? {} : _e, _f = _a.sliderProps, sliderProps = _f === void 0 ? {} : _f, _g = _a.className, className = _g === void 0 ? "" : _g;
+    // If no value is provided or is empty, use the default range
+    var initialValue = value || [minValue, maxValue];
+    // Internal state to handle the slider value
+    var _h = useState(initialValue), currentValue = _h[0], setCurrentValue = _h[1];
+    // Synchronize with the external value when it changes
+    useEffect(function () {
+        if (value) {
+            setCurrentValue(value);
+        }
+    }, [value]);
+    // Default translations
+    var defaultTranslations = {
+        title: title,
+        description: description || "",
+        minLabel: "Mínimo",
+        maxLabel: "Máximo",
+        tooltipProducts: "productos",
+        tooltipProduct: "producto",
+    };
+    var t = __assign(__assign({}, defaultTranslations), translations);
+    // Function to check if a bar is in the selected range
+    var isBarInRange = function (barStart, barEnd) {
+        return barStart >= currentValue[0] && barEnd <= currentValue[1];
+    };
+    // Generate data for the histogram
+    var histogramData = useMemo(function () {
+        var binWidth = (maxValue - minValue) / bins;
+        var histogram = new Array(bins).fill(0);
+        // Count elements in each range
+        for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
+            var item = data_1[_i];
+            var binIndex = Math.min(Math.floor((item - minValue) / binWidth), bins - 1);
+            histogram[binIndex]++;
+        }
+        return histogram.map(function (count, index) {
+            var binStart = minValue + index * binWidth;
+            var binEnd = minValue + (index + 1) * binWidth;
+            var binMidPoint = (binStart + binEnd) / 2;
+            // Calculate height based on the value (the higher the value, the higher the height)
+            // Normalize the middle value of the bin with respect to the total range
+            var valueRatio = (binMidPoint - minValue) / (maxValue - minValue);
+            // The height goes from 20% (minimum value) to 100% (maximum value)
+            // All bars maintain visual height, regardless of whether they have data
+            var heightPercentage = Math.max(20, valueRatio * 80 + 20);
+            return {
+                height: heightPercentage,
+                binStart: binStart,
+                binEnd: binEnd,
+                count: count,
+                priceRange: "".concat(formatValue(binStart), " - ").concat(formatValue(binEnd)),
+                midPrice: binMidPoint,
+            };
+        });
+    }, [data, minValue, maxValue, bins, formatValue]);
+    return (jsxs("div", { className: "flex flex-col gap-4 ".concat(className), children: [jsx("div", { className: "flex flex-col gap-1", children: t.description && (jsx("p", { className: "text-xs text-default-500", children: t.description })) }), jsx("div", { className: "relative h-16 bg-default-50 rounded-lg p-2", children: jsx("div", { className: "flex items-end h-full", style: { gap: "1px" }, children: histogramData.map(function (bar, _index) {
+                        var inRange = isBarInRange(bar.binStart, bar.binEnd);
+                        return (jsx("div", { className: "flex-1 rounded-t-sm transition-all duration-200 group relative ".concat(inRange ? "bg-primary-400" : "bg-default-300"), style: {
+                                height: "".concat(bar.height, "%"),
+                                alignSelf: "flex-end",
+                                opacity: inRange ? 1 : 0.4,
+                            }, title: "".concat(bar.priceRange, ": ").concat(bar.count, " ").concat(bar.count !== 1 ? t.tooltipProducts : t.tooltipProduct), children: jsx("div", { className: "absolute bottom-full left-1/2 transform -translate-x-1/2 mb-1 px-2 py-1 bg-default-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-10", children: jsxs("div", { className: "text-center", children: [jsx("div", { className: "font-medium", children: formatValue(bar.midPrice) }), jsxs("div", { className: "text-xs opacity-75", children: [bar.count, " ", bar.count !== 1 ? t.tooltipProducts : t.tooltipProduct] })] }) }) }, "".concat(bar.binStart, "-").concat(bar.binEnd)));
+                    }) }) }), jsx("div", { className: "px-2", children: jsx(Slider, __assign({ step: step, minValue: minValue, maxValue: maxValue, defaultValue: [minValue, maxValue], value: currentValue, onChange: function (newValue) {
+                        var _a = newValue, min = _a[0], max = _a[1];
+                        setCurrentValue([min, max]);
+                        onChange([min, max]);
+                    }, className: "w-full", isDisabled: false, showSteps: false, showOutline: false, showTooltip: false }, sliderProps)) }), jsxs("div", { className: "flex justify-between items-center text-sm", children: [jsxs("div", { className: "flex flex-col items-start", children: [jsx("span", { className: "text-xs text-default-500", children: t.minLabel }), jsx("span", { className: "font-medium text-default-700", children: formatValue(currentValue[0]) })] }), jsxs("div", { className: "flex flex-col items-end", children: [jsx("span", { className: "text-xs text-default-500", children: t.maxLabel }), jsx("span", { className: "font-medium text-default-700", children: formatValue(currentValue[1]) })] })] })] }));
+};
+
+// =========================================================================
+// BASE FILTER SECTION COMPONENT
+// =========================================================================
+var FilterSection = function (_a) {
+    var filter = _a.filter, value = _a.value, onChange = _a.onChange, _b = _a.isExpanded, isExpanded = _b === void 0 ? false : _b, onToggleExpanded = _a.onToggleExpanded;
+    var _c = useState(isExpanded), internalExpanded = _c[0], setInternalExpanded = _c[1];
+    var handleToggleExpanded = function () {
+        var newExpanded = !internalExpanded;
+        setInternalExpanded(newExpanded);
+        onToggleExpanded === null || onToggleExpanded === void 0 ? void 0 : onToggleExpanded();
+    };
+    var hasActiveFilter = function () {
+        if (!value) {
+            return false;
+        }
+        switch (filter.type) {
+            case "select":
+                return value && "value" in value && value.value !== "";
+            case "multiselect":
+                return (value &&
+                    "values" in value &&
+                    Array.isArray(value.values) &&
+                    value.values.length > 0);
+            case "range":
+                return (value &&
+                    "min" in value &&
+                    "max" in value &&
+                    (value.min !== undefined || value.max !== undefined));
+            case "date":
+                return (value &&
+                    "type" in value &&
+                    value.type &&
+                    ((value.type === "singleDay" && value.date) ||
+                        (value.type === "dateRange" &&
+                            value.dateRange &&
+                            value.dateRange.start &&
+                            value.dateRange.end)));
+            default:
+                return false;
+        }
+    };
+    var getActiveFilterCount = function () {
+        if (!value) {
+            return 0;
+        }
+        switch (filter.type) {
+            case "select":
+                return value && "value" in value && value.value !== "" ? 1 : 0;
+            case "multiselect":
+                return value && "values" in value && Array.isArray(value.values)
+                    ? value.values.length
+                    : 0;
+            case "range":
+                return value &&
+                    "min" in value &&
+                    "max" in value &&
+                    (value.min !== undefined || value.max !== undefined)
+                    ? 1
+                    : 0;
+            case "date":
+                return value &&
+                    "type" in value &&
+                    value.type &&
+                    ((value.type === "singleDay" && value.date) ||
+                        (value.type === "dateRange" &&
+                            value.dateRange &&
+                            value.dateRange.start &&
+                            value.dateRange.end))
+                    ? 1
+                    : 0;
+            default:
+                return 0;
+        }
+    };
+    var renderFilterContent = function () {
+        switch (filter.type) {
+            case "select":
+                return (jsx(SelectFilter, { filter: filter, value: value, onChange: onChange }));
+            case "multiselect":
+                return (jsx(MultiSelectFilter, { filter: filter, value: value, onChange: onChange }));
+            case "range":
+                return (jsx(RangeFilterComponent, { filter: filter, value: value, onChange: onChange }));
+            case "date":
+                return (jsx(DateFilter, { filter: filter, value: value, onChange: onChange }));
+            default:
+                return null;
+        }
+    };
+    return (jsxs("div", { className: "bg-white rounded-xl max-w-sm", style: {
+            border: "0 solid #e5e7eb",
+            boxShadow: "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
+            "--tw-shadow": "var(--heroui-box-shadow-medium)",
+            "--tw-shadow-colored": "var(--heroui-box-shadow-medium)",
+        }, children: [jsxs("button", { type: "button", className: "flex items-center justify-between w-full text-left p-4", onClick: handleToggleExpanded, children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx(H2, { className: "text-base font-normal text-foreground", children: filter.title }), hasActiveFilter() && (jsx("span", { className: "text-xs px-2 py-1 rounded-full text-black dark:text-white", style: {
+                                    backgroundColor: "hsl(var(--heroui-default) / var(--heroui-default-opacity, var(--tw-bg-opacity)))",
+                                }, children: getActiveFilterCount() }))] }), jsx(IconComponent, { icon: internalExpanded
+                            ? "solar:alt-arrow-down-outline"
+                            : "solar:alt-arrow-right-outline", size: "sm", className: "text-default-500" })] }), internalExpanded && (jsxs("div", { className: "px-4 pb-4", onClick: function (e) { return e.stopPropagation(); }, children: [filter.description && (jsx(P, { className: "text-default-500 mb-4", children: filter.description })), renderFilterContent()] }))] }));
+};
+// =========================================================================
+// SELECT FILTER
+// =========================================================================
+var SelectFilter = function (_a) {
+    var filter = _a.filter, value = _a.value, onChange = _a.onChange;
+    var currentValue = (value === null || value === void 0 ? void 0 : value.value) || "";
+    return (jsx(Select, { placeholder: "Seleccionar ".concat(filter.title.toLowerCase()), selectedKeys: currentValue ? [currentValue] : [], onSelectionChange: function (keys) {
+            var selectedKey = Array.from(keys)[0];
+            onChange({ value: selectedKey || "" });
+        }, className: "w-full", children: filter.data.map(function (item) { return (jsx(SelectItem, { children: item.label }, item.value)); }) }));
+};
+// =========================================================================
+// MULTISELECT FILTER
+// =========================================================================
+var MultiSelectFilter = function (_a) {
+    var filter = _a.filter, value = _a.value, onChange = _a.onChange;
+    var currentValues = (value === null || value === void 0 ? void 0 : value.values) || [];
+    return (jsx(Select, { placeholder: "Seleccionar ".concat(filter.title.toLowerCase()), selectedKeys: currentValues, onSelectionChange: function (keys) {
+            var selectedKeys = Array.from(keys);
+            onChange({ values: selectedKeys });
+        }, selectionMode: "multiple", className: "w-full", children: filter.data.map(function (item) { return (jsx(SelectItem, { children: item.label }, item.value)); }) }));
+};
+// =========================================================================
+// RANGE FILTER
+// =========================================================================
+var RangeFilterComponent = function (_a) {
+    var filter = _a.filter, value = _a.value, onChange = _a.onChange;
+    var currentValue = value || { min: filter.data.min, max: filter.data.max };
+    var rangeValue = [currentValue.min, currentValue.max];
+    var handleChange = function (newValue) {
+        var min = newValue[0], max = newValue[1];
+        onChange({ min: min, max: max });
+    };
+    // Generate data array for histogram (simple implementation)
+    var data = Array.from({
+        length: Math.ceil((filter.data.max - filter.data.min) / (filter.data.step || 1)) + 1,
+    }, function (_, i) { return filter.data.min + i * (filter.data.step || 1); });
+    return (jsx(RangeFilter, { title: "Rango de ".concat(filter.title.toLowerCase()), minValue: filter.data.min, maxValue: filter.data.max, step: filter.data.step || 1, data: data, value: rangeValue, onChange: handleChange, className: "w-full" }));
+};
+// =========================================================================
+// DATE FILTER
+// =========================================================================
+var DateFilter = function (_a) {
+    _a.filter; var value = _a.value, onChange = _a.onChange;
+    var handleDateSelectorChange = function (dateSelectorValue) {
+        onChange({
+            type: dateSelectorValue.type === HolidayType.SingleDay
+                ? "singleDay"
+                : "dateRange",
+            date: dateSelectorValue.date ? dateSelectorValue.date.toString() : null,
+            dateRange: dateSelectorValue.dateRange
+                ? {
+                    start: dateSelectorValue.dateRange.start
+                        ? dateSelectorValue.dateRange.start.toString()
+                        : null,
+                    end: dateSelectorValue.dateRange.end
+                        ? dateSelectorValue.dateRange.end.toString()
+                        : null,
+                }
+                : null,
+        });
+    };
+    // Convert our internal format to DateSelector format
+    var getInitialType = function () {
+        if ((value === null || value === void 0 ? void 0 : value.type) === "dateRange") {
+            return HolidayType.DateRange;
+        }
+        return HolidayType.SingleDay;
+    };
+    // For now, we'll let DateSelector handle its own state
+    // The component will reset when the filter value changes
+    var getInitialDate = function () {
+        return undefined;
+    };
+    var getInitialDateRange = function () {
+        return undefined;
+    };
+    return (jsx(DateSelector, { initialType: getInitialType(), initialDate: getInitialDate(), initialDateRange: getInitialDateRange(), onChange: handleDateSelectorChange, className: "w-full" }));
+};
+
+/**
+ * DrawerFilters - Generic component for dynamic filters in drawer.
+ *
+ * Características:
+ * - Dynamic header with title and description
+ * - Body with configurable filters (select, multiselect, range, date)
+ * - Footer with action buttons (clear, cancel, apply)
+ * - Internal state management of filters
+ * - Callback for applying filters with processed values
+ */
+var DrawerFilters = function (_a) {
+    var isOpen = _a.isOpen, onOpenChange = _a.onOpenChange, config = _a.config, onApplyFilters = _a.onApplyFilters, onClearFilters = _a.onClearFilters, onCancel = _a.onCancel, className = _a.className, translations = _a.translations;
+    var _b = useState({}), filterValues = _b[0], setFilterValues = _b[1];
+    // Handle changes in individual filters
+    var handleFilterChange = useCallback(function (filterKey, value) {
+        setFilterValues(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[filterKey] = value, _a)));
+        });
+    }, []);
+    // Clear all filters
+    var handleClearFilters = useCallback(function () {
+        setFilterValues({});
+        onClearFilters === null || onClearFilters === void 0 ? void 0 : onClearFilters();
+    }, [onClearFilters]);
+    // Handle drawer open/close changes
+    var handleOpenChange = useCallback(function (open) {
+        // Only close if explicitly requested (not from internal interactions)
+        if (!open) {
+            onOpenChange(false);
+        }
+    }, [onOpenChange]);
+    // Cancel and close drawer
+    var handleCancel = useCallback(function () {
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        onOpenChange(false);
+    }, [onCancel, onOpenChange]);
+    // Apply filters and process values
+    var handleApplyFilters = useCallback(function () {
+        var processedFilters = {};
+        var _loop_1 = function (key, value) {
+            if (value === undefined || value === null) {
+                return "continue";
+            }
+            var filterConfig = config.data.find(function (f) { return f.key === key; });
+            if (!filterConfig) {
+                return "continue";
+            }
+            switch (filterConfig.type) {
+                case "select":
+                    processedFilters[key] = value.value;
+                    break;
+                case "date":
+                    if (value && "type" in value) {
+                        if (value.type === "singleDay" && value.date) {
+                            processedFilters[key] = value.date;
+                        }
+                        else if (value.type === "dateRange" &&
+                            value.dateRange &&
+                            value.dateRange.start &&
+                            value.dateRange.end) {
+                            processedFilters[key] =
+                                "".concat(value.dateRange.start, "-").concat(value.dateRange.end);
+                        }
+                    }
+                    break;
+                case "multiselect":
+                    if ("values" in value &&
+                        Array.isArray(value.values) &&
+                        value.values.length > 0) {
+                        processedFilters[key] = value.values.join(",");
+                    }
+                    break;
+                case "range":
+                    if ("min" in value &&
+                        "max" in value &&
+                        (value.min !== undefined || value.max !== undefined)) {
+                        processedFilters[key] = "".concat(value.min || 0, "-").concat(value.max || 0);
+                    }
+                    break;
+            }
+        };
+        // Procesar cada filtro según su tipo
+        for (var _i = 0, _a = Object.entries(filterValues); _i < _a.length; _i++) {
+            var _b = _a[_i], key = _b[0], value = _b[1];
+            _loop_1(key, value);
+        }
+        onApplyFilters(processedFilters);
+        onOpenChange(false);
+    }, [filterValues, config.data, onApplyFilters, onOpenChange]);
+    return (jsx(Drawer, { isOpen: isOpen, onOpenChange: handleOpenChange, placement: "right", size: "md", className: cn("drawer-filters", className), isDismissable: false, hideCloseButton: false, children: jsxs(DrawerContent, { children: [jsx(DrawerFiltersHeader, { title: config.title, description: config.description }), jsx(DrawerBody, { className: "px-6 py-10", children: jsx("div", { className: "space-y-3", children: config.data.map(function (filter) {
+                            return (jsx(FilterSection, { filter: filter, value: filterValues[filter.key], onChange: function (value) { return handleFilterChange(filter.key, value); } }, filter.key));
+                        }) }) }), jsx(DrawerFiltersFooter, { onClearFilters: handleClearFilters, onCancel: handleCancel, onApplyFilters: handleApplyFilters, translations: translations })] }) }));
+};
+DrawerFilters.displayName = "DrawerFilters";
+
 var Modal = function (props) {
     return (jsx(Modal$1, __assign({ shouldBlockScroll: true, radius: "lg", className: "py-9 px-6" }, props)));
 };
@@ -2886,4 +3255,4 @@ var NavigationLoadingProvider = function (_a) {
     return (jsxs(NavigationLoadingContext.Provider, { value: value, children: [children, jsx(NavigationLoadingOverlay, { isVisible: isVisible })] }));
 };
 
-export { AddHolidayForm, AnalyticsCard, AuraAutocomplete, AuraTable, AuraToastProvider, BreadcrumbsComponent, Button, Card, Chip, ColorSelector, DatePicker, DateRangePicker, DateSelector, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, Input, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, RowSteps, ScheduleRow, SearchInput, Select, StepIndicator, Switch as SwitchComponent, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, UploadFile, VerticalSteps, sizeMap, themeColors, useAuraToast, useNavigationLoading, useThemeContext };
+export { AddHolidayForm, AnalyticsCard, AuraAutocomplete, AuraTable, AuraToastProvider, BreadcrumbsComponent, Button, Card, Chip, ColorSelector, DatePicker, DateRangePicker, DateSelector, DrawerFilters, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, Input, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, RangeFilter, RowSteps, ScheduleRow, SearchInput, Select, StepIndicator, Switch as SwitchComponent, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, UploadFile, VerticalSteps, sizeMap, themeColors, useAuraToast, useNavigationLoading, useThemeContext };

package/dist/types/components/drawer-filters/DrawerFilters.d.ts

@@ -0,0 +1,14 @@
+import type React from "react";
+import type { DrawerFiltersProps } from "./DrawerFilters.types";
+/**
+ * DrawerFilters - Generic component for dynamic filters in drawer.
+ *
+ * Características:
+ * - Dynamic header with title and description
+ * - Body with configurable filters (select, multiselect, range, date)
+ * - Footer with action buttons (clear, cancel, apply)
+ * - Internal state management of filters
+ * - Callback for applying filters with processed values
+ */
+export declare const DrawerFilters: React.FC<DrawerFiltersProps>;
+//# sourceMappingURL=DrawerFilters.d.ts.map

package/dist/types/components/drawer-filters/DrawerFilters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerFilters.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer-filters/DrawerFilters.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAEX,kBAAkB,EAKlB,MAAM,uBAAuB,CAAC;AAK/B;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyJtD,CAAC"}

package/dist/types/components/drawer-filters/DrawerFilters.types.d.ts

@@ -0,0 +1,101 @@
+export type FilterType = "select" | "multiselect" | "range" | "date";
+export interface BaseFilterData {
+    key: string;
+    title: string;
+    description?: string;
+    type: FilterType;
+}
+export interface SelectFilterData extends BaseFilterData {
+    type: "select";
+    data: Array<{
+        label: string;
+        value: string;
+    }>;
+}
+export interface MultiSelectFilterData extends BaseFilterData {
+    type: "multiselect";
+    data: Array<{
+        label: string;
+        value: string;
+    }>;
+}
+export interface RangeFilterData extends BaseFilterData {
+    type: "range";
+    data: {
+        min: number;
+        max: number;
+        step?: number;
+        unit?: string;
+    };
+}
+export interface DateFilterData extends BaseFilterData {
+    type: "date";
+    data: {
+        min?: string;
+        max?: string;
+        placeholder?: string;
+    };
+}
+export type FilterData = SelectFilterData | MultiSelectFilterData | RangeFilterData | DateFilterData;
+export interface DrawerFiltersConfig {
+    title: string;
+    description: string;
+    data: FilterData[];
+}
+export interface DrawerFiltersProps {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    config: DrawerFiltersConfig;
+    onApplyFilters: (filters: Record<string, SelectFilterValue | MultiSelectFilterValue | RangeFilterValue | DateFilterValue>) => void;
+    onClearFilters?: () => void;
+    onCancel?: () => void;
+    className?: string;
+    translations?: {
+        clearFilters?: string;
+        cancel?: string;
+        applyFilters?: string;
+    };
+}
+export interface FilterSectionProps {
+    filter: FilterData;
+    value?: SelectFilterValue | MultiSelectFilterValue | RangeFilterValue | DateFilterValue;
+    onChange: (value: SelectFilterValue | MultiSelectFilterValue | RangeFilterValue | DateFilterValue) => void;
+    isExpanded?: boolean;
+    onToggleExpanded?: () => void;
+}
+export interface DrawerFiltersHeaderProps {
+    title: string;
+    description: string;
+}
+export interface DrawerFiltersFooterProps {
+    onClearFilters: () => void;
+    onCancel: () => void;
+    onApplyFilters: () => void;
+    translations?: {
+        clearFilters?: string;
+        cancel?: string;
+        applyFilters?: string;
+    };
+}
+export interface FilterValues {
+    [key: string]: SelectFilterValue | MultiSelectFilterValue | RangeFilterValue | DateFilterValue;
+}
+export interface SelectFilterValue {
+    value: string;
+}
+export interface MultiSelectFilterValue {
+    values: string[];
+}
+export interface RangeFilterValue {
+    min: number;
+    max: number;
+}
+export interface DateFilterValue {
+    type: "singleDay" | "dateRange";
+    date: string | null;
+    dateRange: {
+        start: string | null;
+        end: string | null;
+    } | null;
+}
+//# sourceMappingURL=DrawerFilters.types.d.ts.map

package/dist/types/components/drawer-filters/DrawerFilters.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerFilters.types.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer-filters/DrawerFilters.types.ts"],"names":[],"mappings":"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"}

package/dist/types/components/drawer-filters/_internal/DrawerFiltersFooter.d.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+import type { DrawerFiltersFooterProps } from "../DrawerFilters.types";
+/**
+ * Footer of the DrawerFilters with action buttons.
+ */
+export declare const DrawerFiltersFooter: React.FC<DrawerFiltersFooterProps>;
+//# sourceMappingURL=DrawerFiltersFooter.d.ts.map

package/dist/types/components/drawer-filters/_internal/DrawerFiltersFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerFiltersFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer-filters/_internal/DrawerFiltersFooter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAEvE;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAiClE,CAAC"}

package/dist/types/components/drawer-filters/_internal/DrawerFiltersHeader.d.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+import type { DrawerFiltersHeaderProps } from "../DrawerFilters.types";
+/**
+ * Header of the DrawerFilters with title and description.
+ */
+export declare const DrawerFiltersHeader: React.FC<DrawerFiltersHeaderProps>;
+//# sourceMappingURL=DrawerFiltersHeader.d.ts.map

package/dist/types/components/drawer-filters/_internal/DrawerFiltersHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerFiltersHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer-filters/_internal/DrawerFiltersHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAEvE;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAUlE,CAAC"}

package/dist/types/components/drawer-filters/_internal/FilterSection.d.ts

@@ -0,0 +1,4 @@
+import type React from "react";
+import type { FilterSectionProps } from "../DrawerFilters.types";
+export declare const FilterSection: React.FC<FilterSectionProps>;
+//# sourceMappingURL=FilterSection.d.ts.map

package/dist/types/components/drawer-filters/_internal/FilterSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer-filters/_internal/FilterSection.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAGX,kBAAkB,EAOlB,MAAM,wBAAwB,CAAC;AAMhC,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsLtD,CAAC"}

package/dist/types/components/drawer-filters/index.d.ts

@@ -0,0 +1,3 @@
+export { DrawerFilters } from "./DrawerFilters";
+export type { DrawerFiltersProps, DrawerFiltersConfig, FilterData, FilterType, FilterValues, SelectFilterData, MultiSelectFilterData, RangeFilterData, DateFilterData, } from "./DrawerFilters.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/drawer-filters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer-filters/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,YAAY,EACX,kBAAkB,EAClB,mBAAmB,EACnB,UAAU,EACV,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,eAAe,EACf,cAAc,GACd,MAAM,uBAAuB,CAAC"}

package/dist/types/components/modal/_internal/ModalBody.d.ts

@@ -1,3 +1,3 @@
-declare const ModalBody: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"div", import("@heroui/react").ModalBodyProps, never>;
+declare const ModalBody: import("@heroui/react").InternalForwardRefRenderFunction<"div", import("@heroui/react").ModalBodyProps, never>;
 export default ModalBody;
 //# sourceMappingURL=ModalBody.d.ts.map

package/dist/types/components/modal/_internal/ModalBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBody.d.ts","sourceRoot":"","sources":["../../../../../src/components/modal/_internal/ModalBody.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,SAAS,qHAAkB,CAAC;AAElC,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ModalBody.d.ts","sourceRoot":"","sources":["../../../../../src/components/modal/_internal/ModalBody.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,SAAS,gHAAkB,CAAC;AAElC,eAAe,SAAS,CAAC"}

package/dist/types/components/modal/_internal/ModalFooter.d.ts

@@ -1,3 +1,3 @@
-declare const ModalFooter: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"footer", import("@heroui/react").ModalFooterProps, never>;
+declare const ModalFooter: import("@heroui/react").InternalForwardRefRenderFunction<"footer", import("@heroui/react").ModalFooterProps, never>;
 export default ModalFooter;
 //# sourceMappingURL=ModalFooter.d.ts.map

package/dist/types/components/modal/_internal/ModalFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/modal/_internal/ModalFooter.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,0HAAoB,CAAC;AAEtC,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ModalFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/modal/_internal/ModalFooter.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,qHAAoB,CAAC;AAEtC,eAAe,WAAW,CAAC"}

package/dist/types/components/modal/_internal/ModalHeader.d.ts

@@ -1,3 +1,3 @@
-declare const ModalHeader: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"header", import("@heroui/react").ModalHeaderProps, never>;
+declare const ModalHeader: import("@heroui/react").InternalForwardRefRenderFunction<"header", import("@heroui/react").ModalHeaderProps, never>;
 export default ModalHeader;
 //# sourceMappingURL=ModalHeader.d.ts.map

package/dist/types/components/modal/_internal/ModalHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/modal/_internal/ModalHeader.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,0HAAoB,CAAC;AAEtC,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/modal/_internal/ModalHeader.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,qHAAoB,CAAC;AAEtC,eAAe,WAAW,CAAC"}

package/dist/types/components/multi-step-wizard/MultiStepWizard.types.d.ts

@@ -4,6 +4,7 @@ export interface Step {
     description: string;
     content: React.ReactNode;
     isStepValid?: boolean;
+    isCompleted?: boolean;
 }
 export interface MultiStepWizardProps {
     isOpen?: boolean;