@beweco/aurora-ui 0.1.14 → 0.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/css/styles.css +1 -1
- package/dist/index.cjs.js +509 -94
- package/dist/index.esm.js +412 -2
- package/dist/types/components/drawer-filters/DrawerFilters.d.ts +14 -0
- package/dist/types/components/drawer-filters/DrawerFilters.d.ts.map +1 -0
- package/dist/types/components/drawer-filters/DrawerFilters.types.d.ts +122 -0
- package/dist/types/components/drawer-filters/DrawerFilters.types.d.ts.map +1 -0
- package/dist/types/components/drawer-filters/_internal/DrawerFiltersFooter.d.ts +7 -0
- package/dist/types/components/drawer-filters/_internal/DrawerFiltersFooter.d.ts.map +1 -0
- package/dist/types/components/drawer-filters/_internal/DrawerFiltersHeader.d.ts +7 -0
- package/dist/types/components/drawer-filters/_internal/DrawerFiltersHeader.d.ts.map +1 -0
- package/dist/types/components/drawer-filters/_internal/FilterSection.d.ts +4 -0
- package/dist/types/components/drawer-filters/_internal/FilterSection.d.ts.map +1 -0
- package/dist/types/components/drawer-filters/index.d.ts +3 -0
- package/dist/types/components/drawer-filters/index.d.ts.map +1 -0
- package/dist/types/components/modal/_internal/ModalBody.d.ts +1 -1
- package/dist/types/components/modal/_internal/ModalBody.d.ts.map +1 -1
- package/dist/types/components/modal/_internal/ModalFooter.d.ts +1 -1
- package/dist/types/components/modal/_internal/ModalFooter.d.ts.map +1 -1
- package/dist/types/components/modal/_internal/ModalHeader.d.ts +1 -1
- package/dist/types/components/modal/_internal/ModalHeader.d.ts.map +1 -1
- package/dist/types/components/range-filter/RangeFilter.d.ts +7 -0
- package/dist/types/components/range-filter/RangeFilter.d.ts.map +1 -0
- package/dist/types/components/range-filter/RangeFilter.types.d.ts +33 -0
- package/dist/types/components/range-filter/RangeFilter.types.d.ts.map +1 -0
- package/dist/types/components/range-filter/index.d.ts +3 -0
- package/dist/types/components/range-filter/index.d.ts.map +1 -0
- package/dist/types/index.d.ts +4 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +4 -2
package/dist/index.cjs.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var react
|
|
3
|
+
var react = require('@heroui/react');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var react = require('@iconify/react');
|
|
6
|
+
var react$1 = require('@iconify/react');
|
|
7
7
|
var recharts = require('recharts');
|
|
8
8
|
var framerMotion = require('framer-motion');
|
|
9
9
|
var reactDom = require('react-dom');
|
|
@@ -83,14 +83,14 @@ exports.HolidayType = void 0;
|
|
|
83
83
|
*/
|
|
84
84
|
var Button = function (_a) {
|
|
85
85
|
var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, _e = _a.radius, radius = _e === void 0 ? "sm" : _e, startContent = _a.startContent, endContent = _a.endContent, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.isIconOnly, isIconOnly = _g === void 0 ? false : _g, props = __rest(_a, ["color", "size", "variant", "radius", "startContent", "endContent", "isLoading", "isIconOnly"]);
|
|
86
|
-
return (jsxRuntime.jsx(react
|
|
86
|
+
return (jsxRuntime.jsx(react.Button, __assign({}, props, { color: color, size: size, variant: variant, radius: radius, startContent: startContent, endContent: endContent, isLoading: isLoading, isIconOnly: isIconOnly })));
|
|
87
87
|
};
|
|
88
88
|
|
|
89
89
|
var DatePicker = function (_a) {
|
|
90
90
|
var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["label", "id", "size"]);
|
|
91
91
|
var generatedId = React.useId();
|
|
92
92
|
var autoId = id || generatedId;
|
|
93
|
-
return (jsxRuntime.jsx(react
|
|
93
|
+
return (jsxRuntime.jsx(react.DatePicker, __assign({ label: label, size: size, labelPlacement: "outside", classNames: {
|
|
94
94
|
label: "text-sm font-medium text-default-600",
|
|
95
95
|
segment: "focus:bg-primary-50",
|
|
96
96
|
}, id: autoId }, props)));
|
|
@@ -100,7 +100,7 @@ var DateRangePicker = function (_a) {
|
|
|
100
100
|
var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["label", "id", "size"]);
|
|
101
101
|
var generatedId = React.useId();
|
|
102
102
|
var autoId = id || generatedId;
|
|
103
|
-
return (jsxRuntime.jsx(react
|
|
103
|
+
return (jsxRuntime.jsx(react.DateRangePicker, __assign({ label: label, size: size, labelPlacement: "outside", classNames: {
|
|
104
104
|
label: "text-sm font-medium text-default-600",
|
|
105
105
|
segment: "focus:bg-primary-50",
|
|
106
106
|
} }, props, { id: autoId })));
|
|
@@ -116,7 +116,7 @@ var IconComponent = function (_a) {
|
|
|
116
116
|
var _b;
|
|
117
117
|
var icon = _a.icon, _c = _a.size, size = _c === void 0 ? "md" : _c, className = _a.className, style = _a.style, color = _a.color, hFlip = _a.hFlip, vFlip = _a.vFlip, flip = _a.flip, rotate = _a.rotate, nativeProps = __rest(_a, ["icon", "size", "className", "style", "color", "hFlip", "vFlip", "flip", "rotate"]);
|
|
118
118
|
var iconSize = (_b = sizeMap[size]) !== null && _b !== void 0 ? _b : sizeMap.md;
|
|
119
|
-
return (jsxRuntime.jsx("span", __assign({}, nativeProps, { children: jsxRuntime.jsx(react.Icon, { icon: icon, width: iconSize, height: iconSize, className: className, style: style, color: color, hFlip: hFlip, vFlip: vFlip, flip: flip, rotate: rotate }) })));
|
|
119
|
+
return (jsxRuntime.jsx("span", __assign({}, nativeProps, { children: jsxRuntime.jsx(react$1.Icon, { icon: icon, width: iconSize, height: iconSize, className: className, style: style, color: color, hFlip: hFlip, vFlip: vFlip, flip: flip, rotate: rotate }) })));
|
|
120
120
|
};
|
|
121
121
|
|
|
122
122
|
/**
|
|
@@ -132,7 +132,7 @@ var Input = function (_a) {
|
|
|
132
132
|
var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, placeholder = _a.placeholder, props = __rest(_a, ["label", "id", "size", "variant", "radius", "placeholder"]);
|
|
133
133
|
var generatedId = React.useId();
|
|
134
134
|
var inputId = id || generatedId;
|
|
135
|
-
return (jsxRuntime.jsx(react
|
|
135
|
+
return (jsxRuntime.jsx(react.Input, __assign({}, props, { id: inputId, label: label, labelPlacement: "outside", placeholder: placeholder, variant: variant, size: size, radius: radius, classNames: {
|
|
136
136
|
label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
|
|
137
137
|
inputWrapper: "focus-within:!border-primary-500",
|
|
138
138
|
errorMessage: "text-left",
|
|
@@ -214,9 +214,9 @@ var AddHolidayForm = function (_a) {
|
|
|
214
214
|
});
|
|
215
215
|
resetForm();
|
|
216
216
|
}, [newHoliday, onAddHoliday, resetForm, isDateSet]);
|
|
217
|
-
return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 ".concat(className), children: [jsxRuntime.jsx("h3", { className: "font-semibold text-small text-foreground", children: t.addHolidayTitle }), jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxRuntime.jsxs(react
|
|
217
|
+
return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 ".concat(className), children: [jsxRuntime.jsx("h3", { className: "font-semibold text-small text-foreground", children: t.addHolidayTitle }), jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxRuntime.jsxs(react.RadioGroup, __assign({ color: "primary", orientation: "horizontal", size: "sm", value: newHoliday.type, onValueChange: function (value) {
|
|
218
218
|
return setNewHoliday(__assign(__assign({}, INITIAL_HOLIDAY_STATE), { type: value }));
|
|
219
|
-
} }, radioGroupProps, { children: [jsxRuntime.jsx(react
|
|
219
|
+
} }, radioGroupProps, { children: [jsxRuntime.jsx(react.Radio, { value: exports.HolidayType.SingleDay, children: t.dayOption }), jsxRuntime.jsx(react.Radio, { value: exports.HolidayType.DateRange, children: t.dateRangeOption })] })), newHoliday.type === exports.HolidayType.DateRange ? (jsxRuntime.jsx(DateRangePicker, __assign({ className: "xs:w-full md:flex-1 md:max-w-xs", value: newHoliday.startDate && newHoliday.endDate
|
|
220
220
|
? { start: newHoliday.startDate, end: newHoliday.endDate }
|
|
221
221
|
: null, onChange: handleDateRangeChange, "aria-label": t.selectDateRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }) }, dateRangePickerProps))) : (jsxRuntime.jsx(DatePicker, { className: "xs:w-full md:flex-1 md:max-w-40", value: newHoliday.startDate, onChange: handleDateChange, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), "aria-label": t.selectDateAriaLabel }))] }), jsxRuntime.jsx(Input, { label: t.optionalTitle, placeholder: t.titlePlaceholder, className: "w-full", value: newHoliday.title, onValueChange: function (value) {
|
|
222
222
|
setNewHoliday(function (prev) { return (__assign(__assign({}, prev), { title: value })); });
|
|
@@ -225,12 +225,12 @@ var AddHolidayForm = function (_a) {
|
|
|
225
225
|
|
|
226
226
|
var H2 = function (_a) {
|
|
227
227
|
var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
|
|
228
|
-
return (jsxRuntime.jsx("h2", __assign({ className: react
|
|
228
|
+
return (jsxRuntime.jsx("h2", __assign({ className: react.cn("text-lg font-semibold", className) }, props, { children: children })));
|
|
229
229
|
};
|
|
230
230
|
|
|
231
231
|
var P = function (_a) {
|
|
232
232
|
var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
|
|
233
|
-
return (jsxRuntime.jsx("p", __assign({ className: react
|
|
233
|
+
return (jsxRuntime.jsx("p", __assign({ className: react.cn("text-tiny text-default-500 font-normal", className) }, props, { children: children })));
|
|
234
234
|
};
|
|
235
235
|
|
|
236
236
|
var defaultTranslations$6 = {
|
|
@@ -314,13 +314,13 @@ var AnalyticsCard = function (_a) {
|
|
|
314
314
|
var handleTimePeriodChange = function (period) {
|
|
315
315
|
onTimePeriodChange === null || onTimePeriodChange === void 0 ? void 0 : onTimePeriodChange(period);
|
|
316
316
|
};
|
|
317
|
-
return (jsxRuntime.jsx(react
|
|
317
|
+
return (jsxRuntime.jsx(react.Card, __assign({ as: "dl", className: "dark:border-default-100 border border-transparent" }, props, { children: jsxRuntime.jsxs("section", { className: "flex flex-col flex-nowrap", children: [jsxRuntime.jsx("div", { className: "flex flex-col justify-between gap-y-2 p-6", children: jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-2", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-0", children: [jsxRuntime.jsx(H2, { children: t.title }), jsxRuntime.jsx(P, { children: t.description })] }), jsxRuntime.jsx(react.Spacer, { y: 2 }), showTimePeriods && (jsxRuntime.jsxs(react.Tabs, { size: "md", className: " self-end", onSelectionChange: function (key) { return handleTimePeriodChange(String(key)); }, children: [jsxRuntime.jsx(react.Tab, { title: t.months6 }, "6-months"), jsxRuntime.jsx(react.Tab, { title: t.months3 }, "3-months"), jsxRuntime.jsx(react.Tab, { title: t.days30 }, "30-days"), jsxRuntime.jsx(react.Tab, { title: t.days7 }, "7-days"), jsxRuntime.jsx(react.Tab, { title: t.hours24 }, "24-hours")] })), showMetricCards && (jsxRuntime.jsx("div", { className: "mt-2 flex w-full items-center", children: jsxRuntime.jsx("div", { className: "-my-3 flex w-full max-w-[800px] items-center gap-x-3 overflow-x-auto py-3", children: data.map(function (_a) {
|
|
318
318
|
var key = _a.key, change = _a.change, changeType = _a.changeType, type = _a.type, value = _a.value, title = _a.title;
|
|
319
|
-
return (jsxRuntime.jsxs("button", { type: "button", className: react
|
|
319
|
+
return (jsxRuntime.jsxs("button", { type: "button", className: react.cn("rounded-medium flex w-full flex-col gap-2 p-3 transition-colors", {
|
|
320
320
|
"bg-default-100": activeChart === key,
|
|
321
|
-
}), onClick: function () { return handleChartChange(key); }, children: [jsxRuntime.jsx("span", { className: react
|
|
321
|
+
}), onClick: function () { return handleChartChange(key); }, children: [jsxRuntime.jsx("span", { className: react.cn("text-small text-default-500 font-medium transition-colors", {
|
|
322
322
|
"text-primary": activeChart === key,
|
|
323
|
-
}), children: title }), jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [jsxRuntime.jsx("span", { className: "text-foreground text-2xl font-bold", children: formatValue(value, type) }), jsxRuntime.jsx(react
|
|
323
|
+
}), children: title }), jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [jsxRuntime.jsx("span", { className: "text-foreground text-2xl font-bold", children: formatValue(value, type) }), jsxRuntime.jsx(react.Chip, { classNames: {
|
|
324
324
|
content: "font-medium",
|
|
325
325
|
}, color: changeType === "positive"
|
|
326
326
|
? "success"
|
|
@@ -352,11 +352,11 @@ var AnalyticsCard = function (_a) {
|
|
|
352
352
|
strokeWidth: 2,
|
|
353
353
|
fill: "hsl(var(--heroui-".concat(color, "))"),
|
|
354
354
|
r: 4,
|
|
355
|
-
}, animationDuration: 1000, animationEasing: "ease", dataKey: "value", fill: "url(#colorGradient)", stroke: "hsl(var(--heroui-".concat(color, "))"), strokeWidth: 2, type: "monotone" })] }) }), showDropdownMenu && (jsxRuntime.jsxs(react
|
|
355
|
+
}, animationDuration: 1000, animationEasing: "ease", dataKey: "value", fill: "url(#colorGradient)", stroke: "hsl(var(--heroui-".concat(color, "))"), strokeWidth: 2, type: "monotone" })] }) }), showDropdownMenu && (jsxRuntime.jsxs(react.Dropdown, { classNames: {
|
|
356
356
|
content: "min-w-[120px]",
|
|
357
|
-
}, placement: "bottom-end", children: [jsxRuntime.jsx(react
|
|
357
|
+
}, placement: "bottom-end", children: [jsxRuntime.jsx(react.DropdownTrigger, { children: jsxRuntime.jsx(react.Button, { isIconOnly: true, className: "absolute top-2 right-2 w-auto rounded-full", size: "lg", variant: "bordered", children: jsxRuntime.jsx(IconComponent, { icon: "solar:menu-dots-bold", size: "sm" }) }) }), jsxRuntime.jsxs(react.DropdownMenu, { itemClasses: {
|
|
358
358
|
title: "text-tiny",
|
|
359
|
-
}, variant: "bordered", onAction: function (key) { return handleMenuAction(String(key)); }, children: [jsxRuntime.jsx(react
|
|
359
|
+
}, variant: "bordered", onAction: function (key) { return handleMenuAction(String(key)); }, children: [jsxRuntime.jsx(react.DropdownItem, { children: t.viewDetails }, "view-details"), jsxRuntime.jsx(react.DropdownItem, { children: t.exportData }, "export-data"), jsxRuntime.jsx(react.DropdownItem, { children: t.setAlert }, "set-alert")] })] }))] }) })));
|
|
360
360
|
};
|
|
361
361
|
|
|
362
362
|
/**
|
|
@@ -372,7 +372,7 @@ var AuraAutocomplete = function (_a) {
|
|
|
372
372
|
var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, props = __rest(_a, ["label", "id", "size", "variant", "radius"]);
|
|
373
373
|
var generatedId = React.useId();
|
|
374
374
|
var autoId = id || generatedId;
|
|
375
|
-
return (jsxRuntime.jsxs("div", { children: [label && (jsxRuntime.jsx("label", { htmlFor: autoId, className: "block mb-2 text-tiny text-default-600", children: label })), jsxRuntime.jsx(react
|
|
375
|
+
return (jsxRuntime.jsxs("div", { children: [label && (jsxRuntime.jsx("label", { htmlFor: autoId, className: "block mb-2 text-tiny text-default-600", children: label })), jsxRuntime.jsx(react.Autocomplete, __assign({}, props, { id: autoId, label: undefined, labelPlacement: "outside", variant: variant, size: size, radius: radius, classNames: {
|
|
376
376
|
base: "[&_[data-slot=input-wrapper][data-focus=true]]:!border-primary-500",
|
|
377
377
|
popoverContent: "[&_li[data-hover=true]]:!bg-primary-50 [&_li[data-hover=true]]:!text-default-600 [&_li]:!text-default-500",
|
|
378
378
|
} }))] }));
|
|
@@ -908,10 +908,10 @@ var ColorSelector = function (_a) {
|
|
|
908
908
|
color: theme.colors.primary.DEFAULT,
|
|
909
909
|
});
|
|
910
910
|
});
|
|
911
|
-
return (jsxRuntime.jsx(react
|
|
911
|
+
return (jsxRuntime.jsx(react.RadioGroup, { value: selectedColor, onValueChange: onColorChange, orientation: "horizontal", className: "flex flex-wrap !gap-2", classNames: {
|
|
912
912
|
base: "flex flex-wrap !gap-2",
|
|
913
913
|
wrapper: "flex flex-wrap !gap-2",
|
|
914
|
-
}, children: colorOptions.map(function (color) { return (jsxRuntime.jsx(react
|
|
914
|
+
}, children: colorOptions.map(function (color) { return (jsxRuntime.jsx(react.Radio, { value: color.label, className: "p-0 m-0", classNames: {
|
|
915
915
|
base: "p-0 m-0",
|
|
916
916
|
wrapper: "hidden",
|
|
917
917
|
labelWrapper: "p-0 m-0",
|
|
@@ -937,7 +937,7 @@ var Chip = function (_a) {
|
|
|
937
937
|
];
|
|
938
938
|
// Si es un color estándar, usar HeroUI normalmente
|
|
939
939
|
if (standardColors.includes(color)) {
|
|
940
|
-
return (jsxRuntime.jsx(react
|
|
940
|
+
return (jsxRuntime.jsx(react.Chip, __assign({}, props, { color: color, onClose: props.onClose })));
|
|
941
941
|
}
|
|
942
942
|
// Si es un color personalizado, aplicar clases CSS específicas
|
|
943
943
|
var customColorClasses = {
|
|
@@ -948,7 +948,7 @@ var Chip = function (_a) {
|
|
|
948
948
|
orange: "bg-orange-100 text-orange-500",
|
|
949
949
|
};
|
|
950
950
|
var colorClasses = customColorClasses[color];
|
|
951
|
-
return (jsxRuntime.jsx(react
|
|
951
|
+
return (jsxRuntime.jsx(react.Chip, __assign({}, props, { onClose: props.onClose, classNames: __assign({ base: colorClasses }, props.classNames) })));
|
|
952
952
|
};
|
|
953
953
|
|
|
954
954
|
// Traducciones por defecto en español
|
|
@@ -1004,22 +1004,22 @@ var DateSelector = function (_a) {
|
|
|
1004
1004
|
dateRange: range,
|
|
1005
1005
|
});
|
|
1006
1006
|
};
|
|
1007
|
-
return (jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center ".concat(className), children: [jsxRuntime.jsxs(react
|
|
1007
|
+
return (jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center ".concat(className), children: [jsxRuntime.jsxs(react.RadioGroup, __assign({ color: "primary", orientation: "horizontal", size: "sm", value: type, onValueChange: handleTypeChange }, radioGroupProps, { children: [jsxRuntime.jsx(react.Radio, __assign({ value: exports.HolidayType.SingleDay }, radioItemProps, { children: t.dayOption })), jsxRuntime.jsx(react.Radio, __assign({ value: exports.HolidayType.DateRange }, radioItemProps, { children: t.dateRangeOption }))] })), type === exports.HolidayType.DateRange ? (jsxRuntime.jsx(react.DateRangePicker, __assign({ className: "xs:w-full md:flex-1 md:max-w-xs", value: dateRange || null, onChange: handleDateRangeChange, "aria-label": t.selectDateRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }) }, dateRangePickerProps))) : (jsxRuntime.jsx(react.DatePicker, __assign({ className: "xs:w-full md:flex-1 md:max-w-40", value: date || null, onChange: handleDateChange, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), "aria-label": t.selectDateAriaLabel }, datePickerProps)))] }));
|
|
1008
1008
|
};
|
|
1009
1009
|
|
|
1010
1010
|
var H1 = function (_a) {
|
|
1011
1011
|
var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
|
|
1012
|
-
return (jsxRuntime.jsx("h1", __assign({ className: react
|
|
1012
|
+
return (jsxRuntime.jsx("h1", __assign({ className: react.cn("text-xl font-bold", className) }, props, { children: children })));
|
|
1013
1013
|
};
|
|
1014
1014
|
|
|
1015
1015
|
var H3 = function (_a) {
|
|
1016
1016
|
var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
|
|
1017
|
-
return (jsxRuntime.jsx("h3", __assign({ className: react
|
|
1017
|
+
return (jsxRuntime.jsx("h3", __assign({ className: react.cn("text-base font-medium", className) }, props, { children: children })));
|
|
1018
1018
|
};
|
|
1019
1019
|
|
|
1020
1020
|
var H4 = function (_a) {
|
|
1021
1021
|
var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
|
|
1022
|
-
return (jsxRuntime.jsx("h4", __assign({ className: react
|
|
1022
|
+
return (jsxRuntime.jsx("h4", __assign({ className: react.cn("text-sm font-medium ", className) }, props, { children: children })));
|
|
1023
1023
|
};
|
|
1024
1024
|
|
|
1025
1025
|
/**
|
|
@@ -1049,17 +1049,17 @@ var H4 = function (_a) {
|
|
|
1049
1049
|
*/
|
|
1050
1050
|
var BreadcrumbsComponent = function (_a) {
|
|
1051
1051
|
var items = _a.items, children = _a.children, heroUIProps = __rest(_a, ["items", "children"]);
|
|
1052
|
-
return (jsxRuntime.jsx(react
|
|
1053
|
-
? items.map(function (item, index) { return (jsxRuntime.jsx(react
|
|
1052
|
+
return (jsxRuntime.jsx(react.Breadcrumbs, __assign({}, heroUIProps, { children: items
|
|
1053
|
+
? items.map(function (item, index) { return (jsxRuntime.jsx(react.BreadcrumbItem, { href: item.href, isCurrent: item.isCurrent, children: item.label }, "".concat(item.href || item.label, "-").concat(index))); })
|
|
1054
1054
|
: children })));
|
|
1055
1055
|
};
|
|
1056
1056
|
|
|
1057
1057
|
var ConfigMenu = function (_a) {
|
|
1058
1058
|
var _b;
|
|
1059
1059
|
var options = _a.options, onLogout = _a.onLogout, translations = _a.translations;
|
|
1060
|
-
return (jsxRuntime.jsxs(react
|
|
1060
|
+
return (jsxRuntime.jsxs(react.Dropdown, { className: "min-w-40", children: [jsxRuntime.jsx(react.DropdownTrigger, { children: jsxRuntime.jsx(react.Button, { isIconOnly: true, color: "default", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:settings-linear" }) }) }), jsxRuntime.jsxs(react.DropdownMenu, { "aria-label": "Configuration", children: [jsxRuntime.jsx(react.DropdownSection, { showDivider: true, className: "mb-0", children: options.map(function (item) { return (jsxRuntime.jsx(react.DropdownItem, { href: item.href, className: "data-[hover=true]:bg-primary-100 data-[hover=true]:text-default-700", classNames: {
|
|
1061
1061
|
base: "text-default-500",
|
|
1062
|
-
}, startContent: item.icon ? jsxRuntime.jsx(IconComponent, { icon: item.icon }) : undefined, children: item.label }, item.label)); }) }), jsxRuntime.jsx(react
|
|
1062
|
+
}, startContent: item.icon ? jsxRuntime.jsx(IconComponent, { icon: item.icon }) : undefined, children: item.label }, item.label)); }) }), jsxRuntime.jsx(react.DropdownSection, { children: jsxRuntime.jsx(react.DropdownItem, { onPress: onLogout, className: "data-[hover=true]:bg-primary-100 data-[hover=true]:text-default-700", classNames: {
|
|
1063
1063
|
base: "text-default-500",
|
|
1064
1064
|
}, startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:logout-2-linear" }), children: (_b = translations === null || translations === void 0 ? void 0 : translations.logout) !== null && _b !== void 0 ? _b : "Logout" }, "logout") })] })] }));
|
|
1065
1065
|
};
|
|
@@ -1067,13 +1067,13 @@ ConfigMenu.displayName = "ConfigMenu";
|
|
|
1067
1067
|
|
|
1068
1068
|
var NotificationButton = function (_a) {
|
|
1069
1069
|
var _b = _a.notificationCount, notificationCount = _b === void 0 ? 0 : _b;
|
|
1070
|
-
return (jsxRuntime.jsx(react
|
|
1070
|
+
return (jsxRuntime.jsx(react.Button, { isIconOnly: true, color: "secondary", variant: "flat", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:bell-bing-linear" }), children: notificationCount > 0 && (jsxRuntime.jsx("span", { className: "notification__alert", children: notificationCount })) }));
|
|
1071
1071
|
};
|
|
1072
1072
|
NotificationButton.displayName = "NotificationButton";
|
|
1073
1073
|
|
|
1074
1074
|
var HeaderComponent = function (_a) {
|
|
1075
1075
|
var notificationCount = _a.notificationCount, options = _a.options, onMenuClick = _a.onMenuClick, onLogout = _a.onLogout, translations = _a.translations, breadcrumbs = _a.breadcrumbs;
|
|
1076
|
-
return (jsxRuntime.jsx("header", { className: "header__container", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(react
|
|
1076
|
+
return (jsxRuntime.jsx("header", { className: "header__container", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(react.Button, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick }), breadcrumbs && breadcrumbs.length > 0 && (jsxRuntime.jsx(BreadcrumbsComponent, { items: breadcrumbs }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(NotificationButton, { notificationCount: notificationCount }), jsxRuntime.jsx(ConfigMenu, { options: options, onLogout: onLogout, translations: translations })] })] }) }));
|
|
1077
1077
|
};
|
|
1078
1078
|
HeaderComponent.displayName = "Header";
|
|
1079
1079
|
|
|
@@ -1091,11 +1091,11 @@ var getSectionClasses = function (isCollapsed, sectionClassesProp) {
|
|
|
1091
1091
|
return (__assign(__assign({}, Object.fromEntries(Object.entries(sectionClassesProp).map(function (_a) {
|
|
1092
1092
|
var k = _a[0], v = _a[1];
|
|
1093
1093
|
return [k, normalizeClass(v)];
|
|
1094
|
-
}))), { base: normalizeClass(react
|
|
1094
|
+
}))), { base: normalizeClass(react.cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.base, "w-full", {
|
|
1095
1095
|
"p-0 max-w-[44px]": isCollapsed,
|
|
1096
|
-
})), group: normalizeClass(react
|
|
1096
|
+
})), group: normalizeClass(react.cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.group, {
|
|
1097
1097
|
"flex flex-col gap-1": isCollapsed,
|
|
1098
|
-
})), heading: normalizeClass(react
|
|
1098
|
+
})), heading: normalizeClass(react.cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.heading, {
|
|
1099
1099
|
hidden: isCollapsed,
|
|
1100
1100
|
})) }));
|
|
1101
1101
|
};
|
|
@@ -1104,7 +1104,7 @@ var getItemClasses = function (isCollapsed, itemClassesProp) {
|
|
|
1104
1104
|
return (__assign(__assign({}, Object.fromEntries(Object.entries(itemClassesProp).map(function (_a) {
|
|
1105
1105
|
var k = _a[0], v = _a[1];
|
|
1106
1106
|
return [k, normalizeClass(v)];
|
|
1107
|
-
}))), { base: normalizeClass(react
|
|
1107
|
+
}))), { base: normalizeClass(react.cn(itemClassesProp === null || itemClassesProp === void 0 ? void 0 : itemClassesProp.base, {
|
|
1108
1108
|
"w-11 h-11 gap-0 p-0": isCollapsed,
|
|
1109
1109
|
})) }));
|
|
1110
1110
|
};
|
|
@@ -1152,7 +1152,7 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
|
|
|
1152
1152
|
// Renders the item displayed inside the Popover when the menu is collapsed.
|
|
1153
1153
|
var renderCompactItem = React.useCallback(function (item, parentKey) {
|
|
1154
1154
|
var _a, _b;
|
|
1155
|
-
return (React.createElement(react
|
|
1155
|
+
return (React.createElement(react.ListboxItem, __assign({}, item, { key: item.key, endContent: (_a = item.endContent) !== null && _a !== void 0 ? _a : null, startContent: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_b = item.startContent) !== null && _b !== void 0 ? _b : null)), textValue: item.title, title: item.title, className: "data-[hover=true]:text-default-600", onPress: function () { return handleItemPress(item, parentKey); } })));
|
|
1156
1156
|
}, [handleItemPress, iconClassName]);
|
|
1157
1157
|
// Renders a nested item, i.e., an item that has sub-items.
|
|
1158
1158
|
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
|
|
@@ -1164,8 +1164,8 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
|
|
|
1164
1164
|
if (isNestType) {
|
|
1165
1165
|
item.href = undefined;
|
|
1166
1166
|
}
|
|
1167
|
-
return (React.createElement(react
|
|
1168
|
-
base: react
|
|
1167
|
+
return (React.createElement(react.ListboxItem, __assign({}, item, { key: item.key, classNames: {
|
|
1168
|
+
base: react.cn({
|
|
1169
1169
|
"h-auto p-0": !isCollapsed && isNestType,
|
|
1170
1170
|
}, {
|
|
1171
1171
|
"inline-block w-11": isCollapsed && isNestType,
|
|
@@ -1174,20 +1174,20 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
|
|
|
1174
1174
|
}, "rounded-large"),
|
|
1175
1175
|
}, endContent: isCollapsed || isNestType || hideEndContent
|
|
1176
1176
|
? null
|
|
1177
|
-
: ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed || isNestType ? null : item.icon ? (jsxRuntime.jsx(IconComponent, { className: react
|
|
1178
|
-
isCollapsed && isNestType ? (jsxRuntime.jsxs(react
|
|
1177
|
+
: ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed || isNestType ? null : item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500 group-data-[selected=true]:text-foreground", iconClassName), icon: item.icon, size: "lg" })) : (((_c = item.startContent) !== null && _c !== void 0 ? _c : null)), title: isCollapsed || isNestType ? null : item.title }),
|
|
1178
|
+
isCollapsed && isNestType ? (jsxRuntime.jsxs(react.Popover, { placement: "right", offset: 10, children: [jsxRuntime.jsx(react.PopoverTrigger, { children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", children: jsxRuntime.jsx(react.Tooltip, { content: item.title, placement: "right", classNames: {
|
|
1179
1179
|
base: "text-default-500",
|
|
1180
|
-
}, children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react
|
|
1180
|
+
}, children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500 group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_d = item.startContent) !== null && _d !== void 0 ? _d : null)) }) }) }) }), jsxRuntime.jsx(react.PopoverContent, { className: "p-0", children: jsxRuntime.jsxs("div", { className: "min-w-[200px] rounded-large p-2", children: [jsxRuntime.jsx("div", { className: "p-2 text-small font-semibold text-default-500", children: item.title }), jsxRuntime.jsx(react.Listbox, { className: "mt-0.5 text-default-500", "aria-label": "Nested menu items", items: item.items, variant: "flat", children: item.items && ((_e = item.items) === null || _e === void 0 ? void 0 : _e.length) > 0
|
|
1181
1181
|
? item.items.map(function (child) {
|
|
1182
1182
|
return renderCompactItem(child, item.key);
|
|
1183
1183
|
})
|
|
1184
1184
|
: renderCompactItem(item) })] }) })] })) : null,
|
|
1185
|
-
!isCollapsed && isNestType ? (jsxRuntime.jsx(react
|
|
1185
|
+
!isCollapsed && isNestType ? (jsxRuntime.jsx(react.Accordion, { className: "p-0", children: jsxRuntime.jsx(react.AccordionItem, { "aria-label": item.title, classNames: {
|
|
1186
1186
|
heading: "pr-3 group-data-[selected=true]:bg-primary-100 rounded-large",
|
|
1187
1187
|
trigger: "p-0",
|
|
1188
1188
|
content: "py-0 pl-4",
|
|
1189
|
-
}, title: item.icon ? (jsxRuntime.jsxs("div", { className: "flex h-11 items-center gap-2 px-3 py-1.5", children: [jsxRuntime.jsx(IconComponent, { className: react
|
|
1190
|
-
list: react
|
|
1189
|
+
}, title: item.icon ? (jsxRuntime.jsxs("div", { className: "flex h-11 items-center gap-2 px-3 py-1.5", children: [jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500 group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" }), jsxRuntime.jsx("span", { className: "text-small font-medium text-default-500 group-data-[selected=true]:text-default-600", children: item.title })] })) : (((_f = item.startContent) !== null && _f !== void 0 ? _f : null)), children: item.items && ((_g = item.items) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (jsxRuntime.jsx(react.Listbox, { className: "mt-0.5 text-default-500", classNames: {
|
|
1190
|
+
list: react.cn("border-l border-default-200 pl-4"),
|
|
1191
1191
|
}, items: item.items, variant: "flat", children: item.items.map(function (child) { return renderItem(child, item.key); }) })) : (renderItem(item)) }, item.key) })) : null));
|
|
1192
1192
|
}, [isCollapsed, hideEndContent, iconClassName, items, selected]);
|
|
1193
1193
|
// Renders a simple item (without children) in the navigation list.
|
|
@@ -1201,17 +1201,17 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
|
|
|
1201
1201
|
return renderNestItem(item);
|
|
1202
1202
|
}
|
|
1203
1203
|
var isItemSelected = selected === item.key;
|
|
1204
|
-
return (React.createElement(react
|
|
1204
|
+
return (React.createElement(react.ListboxItem, __assign({}, item, { key: item.key, endContent: isCollapsed || hideEndContent ? null : ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed ? null : item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_c = item.startContent) !== null && _c !== void 0 ? _c : null)), textValue: item.title, title: isCollapsed ? null : item.title, onPress: function () { return handleItemPress(item, parentKey); }, "aria-selected": isItemSelected, "aria-label": item.title || "Menu item ".concat(item.key) }), isCollapsed ? (jsxRuntime.jsx(react.Tooltip, { content: item.title, placement: "right", closeDelay: 200, shouldCloseOnBlur: false, classNames: {
|
|
1205
1205
|
base: "text-default-500",
|
|
1206
|
-
}, children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react
|
|
1206
|
+
}, children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_d = item.startContent) !== null && _d !== void 0 ? _d : null)) }) })) : null));
|
|
1207
1207
|
},
|
|
1208
1208
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1209
1209
|
[isCollapsed, hideEndContent, iconClassName, itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.base]);
|
|
1210
|
-
return (jsxRuntime.jsx(react
|
|
1210
|
+
return (jsxRuntime.jsx(react.Listbox, __assign({ ref: ref, hideSelectedIcon: true, as: "nav", className: react.cn("list-none", className), classNames: __assign(__assign({}, classNames), { list: react.cn("items-center", classNames === null || classNames === void 0 ? void 0 : classNames.list) }), color: "default", itemClasses: __assign(__assign({}, itemClasses), { base: react.cn("px-3 min-h-11 rounded-large h-[44px] data-[selected=true]:bg-primary-100", itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.base), title: react.cn("text-small font-medium text-default-500 group-data-[selected=true]:text-default-600 ", itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.title) }), items: items, selectedKeys: [selected], selectionMode: "single", variant: "flat" }, props, { children: function (item) {
|
|
1211
1211
|
var _a, _b;
|
|
1212
1212
|
return item.items &&
|
|
1213
1213
|
((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
1214
|
-
(item === null || item === void 0 ? void 0 : item.type) === EnumMenuNavListItem.Nest ? (renderNestItem(item)) : item.items && ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxRuntime.jsx(react
|
|
1214
|
+
(item === null || item === void 0 ? void 0 : item.type) === EnumMenuNavListItem.Nest ? (renderNestItem(item)) : item.items && ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxRuntime.jsx(react.ListboxSection, { classNames: sectionClasses, showDivider: isCollapsed, title: item.title, children: item.items.map(renderItem) }, item.key)) : (renderItem(item));
|
|
1215
1215
|
} }), isCollapsed ? "compact" : "default"));
|
|
1216
1216
|
});
|
|
1217
1217
|
MenuNavList.displayName = "MenuNavList";
|
|
@@ -1251,7 +1251,7 @@ var MenuComponent = React.memo(function Menu(_a) {
|
|
|
1251
1251
|
? "container__menu--collapsed"
|
|
1252
1252
|
: "container__menu--expanded"), children: jsxRuntime.jsxs("div", { className: "content__menu", children: [jsxRuntime.jsxs("div", { className: "content__menu--header", style: { flexDirection: isCollapsed ? "column-reverse" : "row" }, children: [jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-center ".concat(isCollapsed ? "gap-0" : "gap-2"), children: [jsxRuntime.jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-foreground", children: jsxRuntime.jsx("img", { src: commerceInfo.logo, alt: "Logo of ".concat(commerceInfo.name) }) }), jsxRuntime.jsx("span", { className: "collapsible-item text-small font-bold ", children: commerceInfo.name })] }), jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "cursor-pointer block sm:hidden", onClick: handleSidebarClose }), jsxRuntime.jsx(IconComponent, { icon: isCollapsed
|
|
1253
1253
|
? "solar:alt-arrow-right-outline"
|
|
1254
|
-
: "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsxRuntime.jsx(react
|
|
1254
|
+
: "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsxRuntime.jsx(react.Spacer, { y: 6 }), jsxRuntime.jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsxRuntime.jsx(react.Avatar, { size: "md", src: userInfo.avatar, color: userInfo.avatar === "" ? "warning" : "default", name: userInfo.name }), jsxRuntime.jsxs("div", { className: "collapsible-item flex flex-col", children: [jsxRuntime.jsx("p", { className: "text-small font-medium text-default-900", children: userInfo.name }), jsxRuntime.jsx("p", { className: "text-tiny text-default-400", children: userInfo.role })] })] }), jsxRuntime.jsx("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6"), children: jsxRuntime.jsx("div", { className: "h-full overflow-y-auto pr-6 -mr-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: jsxRuntime.jsx(MenuNavList, { defaultSelectedKey: menuItems.selectedKey, items: menuItems.items, isCollapsed: isCollapsed }) }) }), upgradeCard && (jsxRuntime.jsxs("div", { className: "collapsible-item relative", children: [jsxRuntime.jsxs(react.Card, { className: "border-none overflow-visible shadow-none", shadow: "sm", children: [jsxRuntime.jsxs(react.CardBody, { className: "items-center py-5 text-center gap-1", children: [jsxRuntime.jsx("h3", { className: "text-medium font-medium text-default-900", children: upgradeCard.title }), jsxRuntime.jsx("p", { className: "text-small text-default-500 pb-3 whitespace-normal", children: upgradeCard.description })] }), jsxRuntime.jsx(react.CardFooter, { className: "absolute justify-center", style: { bottom: "-30px" }, children: jsxRuntime.jsx(react.Button, { className: "px-10 shadow-md", color: "primary", radius: "full", variant: "shadow", onPress: handleUpgradeClick, children: upgradeCard.buttonText }) })] }), jsxRuntime.jsx(react.Spacer, { y: 9 })] })), jsxRuntime.jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsxRuntime.jsx(react.Button, { fullWidth: true, className: " text-default-500 data-[hover=true]:text-default-600", startContent: jsxRuntime.jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (jsxRuntime.jsx("span", { className: "collapsible-item", children: helpButton.title })) }) })] }) })] }));
|
|
1255
1255
|
});
|
|
1256
1256
|
|
|
1257
1257
|
var StepIndicator = function (_a) {
|
|
@@ -1270,7 +1270,7 @@ var StepIndicator = function (_a) {
|
|
|
1270
1270
|
var stepText = stepTextFormatter
|
|
1271
1271
|
? stepTextFormatter(currentStep, totalSteps)
|
|
1272
1272
|
: defaultStepText(currentStep, totalSteps);
|
|
1273
|
-
return (jsxRuntime.jsxs("div", __assign({ className: react
|
|
1273
|
+
return (jsxRuntime.jsxs("div", __assign({ className: react.cn("w-full", className) }, props, { children: [showStepText && (jsxRuntime.jsx("div", { className: "text-center text-sm font-medium text-default-400 mb-3", children: stepText })), jsxRuntime.jsx("div", { className: "w-full bg-content2 rounded-full h-2 overflow-hidden", children: jsxRuntime.jsx("div", { className: react.cn("h-full transition-all duration-300 ease-out rounded-full", colorClasses[color]), style: { width: "".concat(progressPercentage, "%") } }) })] })));
|
|
1274
1274
|
};
|
|
1275
1275
|
|
|
1276
1276
|
/*
|
|
@@ -1399,7 +1399,7 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
|
|
|
1399
1399
|
}
|
|
1400
1400
|
return colorsVars;
|
|
1401
1401
|
}, [color, className]);
|
|
1402
|
-
return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "max-w-fit", children: jsxRuntime.jsx("ol", { className: react
|
|
1402
|
+
return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "max-w-fit", children: jsxRuntime.jsx("ol", { className: react.cn("flex flex-col gap-y-3", colors, className), children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
|
|
1403
1403
|
var status = currentStep === stepIdx
|
|
1404
1404
|
? "active"
|
|
1405
1405
|
: step.isCompleted
|
|
@@ -1408,9 +1408,9 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
|
|
|
1408
1408
|
var isDisabled = status === "inactive";
|
|
1409
1409
|
return (
|
|
1410
1410
|
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
|
|
1411
|
-
jsxRuntime.jsxs("li", { className: "relative", children: [jsxRuntime.jsx("div", { className: "flex w-full max-w-full items-center", children: jsxRuntime.jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: react
|
|
1411
|
+
jsxRuntime.jsxs("li", { className: "relative", children: [jsxRuntime.jsx("div", { className: "flex w-full max-w-full items-center", children: jsxRuntime.jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: react.cn("group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5", stepClassName, {
|
|
1412
1412
|
"cursor-not-allowed": isDisabled,
|
|
1413
|
-
}), onClick: function () { return setCurrentStep(stepIdx); }, disabled: isDisabled }, props, { children: [jsxRuntime.jsx("div", { className: "flex h-full items-center", children: jsxRuntime.jsx(framerMotion.LazyMotion, { features: framerMotion.domAnimation, children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx(framerMotion.m.div, { animate: status, className: react
|
|
1413
|
+
}), onClick: function () { return setCurrentStep(stepIdx); }, disabled: isDisabled }, props, { children: [jsxRuntime.jsx("div", { className: "flex h-full items-center", children: jsxRuntime.jsx(framerMotion.LazyMotion, { features: framerMotion.domAnimation, children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx(framerMotion.m.div, { animate: status, className: react.cn("border-medium text-large text-default-600 relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", {
|
|
1414
1414
|
"shadow-lg": status === "complete",
|
|
1415
1415
|
}), "data-status": status, initial: false, transition: { duration: 0.25 }, variants: {
|
|
1416
1416
|
inactive: {
|
|
@@ -1427,21 +1427,21 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
|
|
|
1427
1427
|
backgroundColor: "var(--complete-background-color)",
|
|
1428
1428
|
borderColor: "var(--complete-border-color)",
|
|
1429
1429
|
},
|
|
1430
|
-
}, children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { className: " text-[var(--active-fg-color)] font-bold", icon: "material-symbols:check-rounded", title: t.checkIconTitle })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), jsxRuntime.jsx("div", { className: "flex-1 text-left", children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: react
|
|
1430
|
+
}, children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { className: " text-[var(--active-fg-color)] font-bold", icon: "material-symbols:check-rounded", title: t.checkIconTitle })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), jsxRuntime.jsx("div", { className: "flex-1 text-left", children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: react.cn("text-medium text-default-600 font-medium transition-[color,opacity] duration-300 group-active:opacity-70", {
|
|
1431
1431
|
"text-default-300": status === "inactive",
|
|
1432
|
-
}), children: step.title }), jsxRuntime.jsx("div", { className: react
|
|
1432
|
+
}), children: step.title }), jsxRuntime.jsx("div", { className: react.cn("text-tiny text-default-600 lg:text-small transition-[color,opacity] duration-300 group-active:opacity-70", {
|
|
1433
1433
|
"text-default-300": status === "inactive",
|
|
1434
|
-
}), children: step.description })] }) })] }), stepIdx) }), stepIdx < steps.length - 1 && !hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: react
|
|
1434
|
+
}), children: step.description })] }) })] }), stepIdx) }), stepIdx < steps.length - 1 && !hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: react.cn("pointer-events-none absolute top-[calc(64px*var(--idx)+1)] left-3 flex h-1/2 -translate-y-1/3 items-center px-4"), style: {
|
|
1435
1435
|
// @ts-ignore
|
|
1436
1436
|
"--idx": stepIdx,
|
|
1437
|
-
}, children: jsxRuntime.jsx("div", { className: react
|
|
1437
|
+
}, children: jsxRuntime.jsx("div", { className: react.cn("relative h-full w-0.5 bg-[var(--inactive-bar-color)] transition-colors duration-300", "after:absolute after:block after:h-0 after:w-full after:bg-[var(--active-border-color)] after:transition-[height] after:duration-300 after:content-['']", {
|
|
1438
1438
|
"after:h-full": stepIdx < currentStep,
|
|
1439
1439
|
}) }) }))] }, stepIdx));
|
|
1440
1440
|
}) }) }));
|
|
1441
1441
|
});
|
|
1442
1442
|
VerticalSteps.displayName = "VerticalSteps";
|
|
1443
1443
|
|
|
1444
|
-
var stepperClasses = react
|
|
1444
|
+
var stepperClasses = react.cn(
|
|
1445
1445
|
// light
|
|
1446
1446
|
"[--step-color:hsl(var(--heroui-primary-400))]", "[--active-color:hsl(var(--heroui-primary-400))]", "[--inactive-border-color:hsl(var(--heroui-primary-200))]", "[--inactive-bar-color:hsl(var(--heroui-primary-200))]", "[--inactive-color:hsl(var(--heroui-primary-300))]",
|
|
1447
1447
|
// dark
|
|
@@ -1453,7 +1453,7 @@ var MultiStepSidebar = React.forwardRef(function (_a, ref) {
|
|
|
1453
1453
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
1454
1454
|
}
|
|
1455
1455
|
};
|
|
1456
|
-
return (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-content3/50 backdrop-blur-sm", onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", __assign({ ref: ref, className: react
|
|
1456
|
+
return (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-content3/50 backdrop-blur-sm", onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", __assign({ ref: ref, className: react.cn("flex h-full w-full max-w-4xl rounded-lg bg-background shadow-lg lg:h-auto", className) }, props, { children: [jsxRuntime.jsx("div", { className: "hidden w-1/3 flex-col items-center justify-center gap-y-8 p-8 md:flex", children: jsxRuntime.jsx(VerticalSteps, { className: stepperClasses, color: "primary", currentStep: currentPage, steps: steps, onStepChange: onChangePage }) }), jsxRuntime.jsxs("div", { className: "relative flex h-auto justify-between w-full flex-col items-center gap-4 md:p-4 lg:w-2/3", children: [jsxRuntime.jsx(Button, { isIconOnly: true, className: "absolute right-4 top-4", size: "sm", variant: "light", color: "default", onPress: onClose, startContent: jsxRuntime.jsx(IconComponent, { className: "text-foreground", icon: "material-symbols:close-rounded", size: "lg" }) }), jsxRuntime.jsx("div", { className: "pt-9 w-10/12 md:hidden", children: jsxRuntime.jsx("div", { className: "flex w-full justify-center", children: jsxRuntime.jsx(StepIndicator, { className: react.cn(stepperClasses), currentStep: currentPage + 1, totalSteps: steps.length }) }) }), jsxRuntime.jsx("div", { className: " flex flex-col h-full w-full justify-between p-4 sm:max-w-md md:max-w-lg", children: children })] })] })) }));
|
|
1457
1457
|
});
|
|
1458
1458
|
MultiStepSidebar.displayName = "MultiStepSidebar";
|
|
1459
1459
|
|
|
@@ -1463,7 +1463,7 @@ var MultistepNavigationButtons = function (_a) {
|
|
|
1463
1463
|
// backButtonProps || {};
|
|
1464
1464
|
var _b = nextButtonProps || {}, nextButtonChildren = _b.children, restNextButtonProps = __rest(_b, ["children"]);
|
|
1465
1465
|
var _c = cancelButtonProps || {}, cancelButtonChildren = _c.children, restCancelButtonProps = __rest(_c, ["children"]);
|
|
1466
|
-
return (jsxRuntime.jsx("div", { className: react
|
|
1466
|
+
return (jsxRuntime.jsx("div", { className: react.cn("flex w-full flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-between md:justify-end", className), children: jsxRuntime.jsxs("div", { className: "flex w-full flex-col-reverse gap-2 md:w-auto md:flex-row", children: [jsxRuntime.jsx(react.Button, __assign({ className: "w-full md:w-auto", color: "default", variant: "flat" }, restCancelButtonProps, { children: cancelButtonChildren || "Cancel" })), jsxRuntime.jsx(react.Button, __assign({ className: "w-full md:w-auto", color: "primary" }, restNextButtonProps, { children: nextButtonChildren || "Next" }))] }) }));
|
|
1467
1467
|
};
|
|
1468
1468
|
|
|
1469
1469
|
var MultiStepWizard = function (_a) {
|
|
@@ -1547,7 +1547,7 @@ var MultiStepWizard = function (_a) {
|
|
|
1547
1547
|
|
|
1548
1548
|
var Pagination = function (_a) {
|
|
1549
1549
|
_a.size; var props = __rest(_a, ["size"]);
|
|
1550
|
-
return jsxRuntime.jsx(react
|
|
1550
|
+
return jsxRuntime.jsx(react.Pagination, __assign({ showControls: true, isCompact: true }, props));
|
|
1551
1551
|
};
|
|
1552
1552
|
|
|
1553
1553
|
// Lista simple de países con bandera emoji y código
|
|
@@ -1676,7 +1676,7 @@ var Phone = function (_a) {
|
|
|
1676
1676
|
});
|
|
1677
1677
|
}
|
|
1678
1678
|
};
|
|
1679
|
-
return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 w-full relative", id: id, children: [finalLabel && (jsxRuntime.jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-tiny text-default-500 mb-1 text-left", children: [finalLabel, " ", required && jsxRuntime.jsx("span", { className: "text-danger-500", children: "*" })] })), jsxRuntime.jsxs("div", { className: "flex items-center w-full min-h-[56px] transition-colors shadow-sm border-medium border-default-200 rounded-xl focus-within:border-primary-500 ".concat(error ? "!border-danger-500 " : "border-default-200").concat(disabled ? "opacity-60" : ""), children: [jsxRuntime.jsx("div", { className: "relative ml-2", ref: dropdownRef, children: jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-1 px-4 h-10 rounded-xl bg-default-100 focus:outline-none transition-colors", onClick: function () { return setIsDropdownOpen(function (v) { return !v; }); }, disabled: disabled, tabIndex: 0, "aria-label": t.selectCountryAriaLabel, children: [jsxRuntime.jsx("span", { className: "text-lg", children: selectedCountry.flag }), jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: selectedCountry.code }), jsxRuntime.jsxs("svg", { className: "w-4 h-4 text-default-500 ml-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": t.expandListAriaLabel, children: [jsxRuntime.jsx("title", { children: t.expandListAriaLabel }), jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })] })] }) }), jsxRuntime.jsx(react
|
|
1679
|
+
return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 w-full relative", id: id, children: [finalLabel && (jsxRuntime.jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-tiny text-default-500 mb-1 text-left", children: [finalLabel, " ", required && jsxRuntime.jsx("span", { className: "text-danger-500", children: "*" })] })), jsxRuntime.jsxs("div", { className: "flex items-center w-full min-h-[56px] transition-colors shadow-sm border-medium border-default-200 rounded-xl focus-within:border-primary-500 ".concat(error ? "!border-danger-500 " : "border-default-200").concat(disabled ? "opacity-60" : ""), children: [jsxRuntime.jsx("div", { className: "relative ml-2", ref: dropdownRef, children: jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-1 px-4 h-10 rounded-xl bg-default-100 focus:outline-none transition-colors", onClick: function () { return setIsDropdownOpen(function (v) { return !v; }); }, disabled: disabled, tabIndex: 0, "aria-label": t.selectCountryAriaLabel, children: [jsxRuntime.jsx("span", { className: "text-lg", children: selectedCountry.flag }), jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: selectedCountry.code }), jsxRuntime.jsxs("svg", { className: "w-4 h-4 text-default-500 ml-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": t.expandListAriaLabel, children: [jsxRuntime.jsx("title", { children: t.expandListAriaLabel }), jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })] })] }) }), jsxRuntime.jsx(react.Input, { type: "tel", className: "flex-1 border-none bg-transparent text-default-500 placeholder-default-500 px-2", placeholder: t.placeholder, value: inputValue, onChange: handleInputChange, onBlur: onBlur, disabled: disabled, name: name, autoComplete: "tel", id: "phone-input-".concat(name) })] }), error && errorText && (jsxRuntime.jsx("span", { className: " text-left text-xs text-danger-500 mt-1", children: errorText })), isDropdownOpen &&
|
|
1680
1680
|
reactDom.createPortal(jsxRuntime.jsxs("div", { ref: portalDropdownRef, style: dropdownPosition, className: "bg-content1 border border-default-200 rounded-lg shadow-lg z-50", children: [jsxRuntime.jsx("div", { className: "p-2", children: jsxRuntime.jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-default-100 border-medium border-default-200 text-default-500 rounded-lg focus:outline-none focus:border-primary-500", placeholder: t.searchPlaceholder, onChange: function (e) {
|
|
1681
1681
|
var searchTerm = e.target.value.toLowerCase();
|
|
1682
1682
|
var filtered = uniqueCountries.filter(function (country) {
|
|
@@ -1716,12 +1716,12 @@ var PromotionalBanner = function (_a) {
|
|
|
1716
1716
|
}
|
|
1717
1717
|
var fromColor = gradientColors[0], viaColor = gradientColors[1], toColor = gradientColors[2];
|
|
1718
1718
|
var buttonGradient1 = buttonGradientColors[0], buttonGradient2 = buttonGradientColors[1];
|
|
1719
|
-
return (jsxRuntime.jsxs("div", { className: "border-divider flex w-full items-center gap-x-3 border-b-1 bg-gradient-to-r from-".concat(fromColor, " via-").concat(viaColor, " to-").concat(toColor, " px-6 py-2 sm:px-3.5 sm:before:flex-1"), children: [jsxRuntime.jsx("p", { className: "text-small text-foreground", children: jsxRuntime.jsxs(react
|
|
1719
|
+
return (jsxRuntime.jsxs("div", { className: "border-divider flex w-full items-center gap-x-3 border-b-1 bg-gradient-to-r from-".concat(fromColor, " via-").concat(viaColor, " to-").concat(toColor, " px-6 py-2 sm:px-3.5 sm:before:flex-1"), children: [jsxRuntime.jsx("p", { className: "text-small text-foreground", children: jsxRuntime.jsxs(react.Link, __assign({ className: "text-inherit", href: messageHref, onClick: handleMessageClick }, messageLinkProps, { children: [finalMessage, "\u00A0"] })) }), jsxRuntime.jsx(react.Button, __assign({ as: react.Link, className: "group text-small relative h-9 overflow-hidden bg-transparent font-normal", color: "default", endContent: jsxRuntime.jsx(IconComponent, { className: "flex-none transition-transform outline-hidden group-data-[hover=true]:translate-x-0.5 [&>path]:stroke-2", icon: "solar:arrow-right-linear", size: "sm" }), href: buttonHref, style: {
|
|
1720
1720
|
border: "solid 2px transparent",
|
|
1721
1721
|
backgroundImage: "linear-gradient(hsl(var(--heroui-danger-50)), hsl(var(--heroui-danger-50))), linear-gradient(to right, ".concat(buttonGradient1, ", ").concat(buttonGradient2, ")"),
|
|
1722
1722
|
backgroundOrigin: "border-box",
|
|
1723
1723
|
backgroundClip: "padding-box, border-box",
|
|
1724
|
-
}, variant: "bordered", onClick: handleButtonClick }, buttonProps, { children: finalButtonText })), showCloseButton && (jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: jsxRuntime.jsx(react
|
|
1724
|
+
}, variant: "bordered", onClick: handleButtonClick }, buttonProps, { children: finalButtonText })), showCloseButton && (jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: jsxRuntime.jsx(react.Button, { isIconOnly: true, "aria-label": t.closeButtonLabel, className: "-m-1", size: "lg", variant: "bordered", onClick: handleClose, children: jsxRuntime.jsx(IconComponent, { "aria-hidden": "true", className: "text-default-500", icon: "lucide:x", size: "md" }) }) }))] }));
|
|
1725
1725
|
};
|
|
1726
1726
|
|
|
1727
1727
|
var RowSteps = React.forwardRef(function (_a, ref) {
|
|
@@ -1782,13 +1782,13 @@ var RowSteps = React.forwardRef(function (_a, ref) {
|
|
|
1782
1782
|
}
|
|
1783
1783
|
return colorsVars;
|
|
1784
1784
|
}, [color, className]);
|
|
1785
|
-
return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "-my-4 max-w-fit overflow-x-auto py-4", children: jsxRuntime.jsx("ol", { className: react
|
|
1785
|
+
return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "-my-4 max-w-fit overflow-x-auto py-4", children: jsxRuntime.jsx("ol", { className: react.cn("flex flex-row flex-nowrap gap-x-3", colors, className), children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
|
|
1786
1786
|
var status = currentStep === stepIdx
|
|
1787
1787
|
? "active"
|
|
1788
1788
|
: currentStep < stepIdx
|
|
1789
1789
|
? "inactive"
|
|
1790
1790
|
: "complete";
|
|
1791
|
-
return (jsxRuntime.jsx("li", { className: "relative flex w-full items-center pr-12 last:pr-0", children: jsxRuntime.jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: react
|
|
1791
|
+
return (jsxRuntime.jsx("li", { className: "relative flex w-full items-center pr-12 last:pr-0", children: jsxRuntime.jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: react.cn("group rounded-large flex w-full cursor-pointer flex-row items-center justify-center gap-x-3 py-2.5", stepClassName), onClick: function () { return setCurrentStep(stepIdx); } }, props, { children: [jsxRuntime.jsx("div", { className: "h-ful relative flex items-center", children: jsxRuntime.jsx(framerMotion.LazyMotion, { features: framerMotion.domAnimation, children: jsxRuntime.jsx(framerMotion.m.div, { animate: status, className: "relative", children: jsxRuntime.jsx(framerMotion.m.div, { className: react.cn("border-medium text-large text-default-600 relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", {
|
|
1792
1792
|
"shadow-lg": status === "complete",
|
|
1793
1793
|
}), initial: false, transition: { duration: 0.25 }, variants: {
|
|
1794
1794
|
inactive: {
|
|
@@ -1805,12 +1805,12 @@ var RowSteps = React.forwardRef(function (_a, ref) {
|
|
|
1805
1805
|
backgroundColor: "var(--complete-background-color)",
|
|
1806
1806
|
borderColor: "var(--complete-border-color)",
|
|
1807
1807
|
},
|
|
1808
|
-
}, children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { className: " text-[var(--active-fg-color)] font-bold", icon: "material-symbols:check-rounded" })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), step.title && (jsxRuntime.jsx("div", { className: "max-w-full flex-1 text-start", children: jsxRuntime.jsx("div", { className: react
|
|
1808
|
+
}, children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { className: " text-[var(--active-fg-color)] font-bold", icon: "material-symbols:check-rounded" })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), step.title && (jsxRuntime.jsx("div", { className: "max-w-full flex-1 text-start", children: jsxRuntime.jsx("div", { className: react.cn("text-small text-default-600 lg:text-medium font-medium transition-[color,opacity] duration-300 group-active:opacity-80", {
|
|
1809
1809
|
"text-default-300": status === "inactive",
|
|
1810
1810
|
}), children: step.title }) })), stepIdx < steps.length - 1 && !hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute right-0 w-10 flex-none items-center", style: {
|
|
1811
1811
|
// @ts-ignore
|
|
1812
1812
|
"--idx": stepIdx,
|
|
1813
|
-
}, children: jsxRuntime.jsx("div", { className: react
|
|
1813
|
+
}, children: jsxRuntime.jsx("div", { className: react.cn("relative h-0.5 w-full bg-[var(--inactive-bar-color)] transition-colors duration-300", "after:absolute after:block after:h-full after:w-0 after:bg-[var(--active-border-color)] after:transition-[width] after:duration-300 after:content-['']", {
|
|
1814
1814
|
"after:w-full": stepIdx < currentStep,
|
|
1815
1815
|
}) }) }))] }), stepIdx) }, stepIdx));
|
|
1816
1816
|
}) }) }));
|
|
@@ -1981,7 +1981,7 @@ var Switch = function (_a) {
|
|
|
1981
1981
|
var id = _a.id, props = __rest(_a, ["id"]);
|
|
1982
1982
|
var generatedId = React.useId();
|
|
1983
1983
|
var autoId = id || generatedId;
|
|
1984
|
-
return jsxRuntime.jsx(react
|
|
1984
|
+
return jsxRuntime.jsx(react.Switch, __assign({}, props, { id: autoId }));
|
|
1985
1985
|
};
|
|
1986
1986
|
|
|
1987
1987
|
/**
|
|
@@ -1991,7 +1991,7 @@ var TimeInput = function (_a) {
|
|
|
1991
1991
|
var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.radius, radius = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "bordered" : _d, props = __rest(_a, ["label", "id", "size", "radius", "variant"]);
|
|
1992
1992
|
var generatedId = React.useId();
|
|
1993
1993
|
var autoId = id || generatedId;
|
|
1994
|
-
return (jsxRuntime.jsx(react
|
|
1994
|
+
return (jsxRuntime.jsx(react.TimeInput, __assign({}, props, { id: autoId, size: size, radius: radius, variant: variant, label: label, labelPlacement: "outside-left", classNames: {
|
|
1995
1995
|
label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
|
|
1996
1996
|
inputWrapper: "focus-within:!border-primary-500",
|
|
1997
1997
|
} })));
|
|
@@ -2091,7 +2091,7 @@ var ScheduleRow = function (_a) {
|
|
|
2091
2091
|
var newTimeSlots = daySchedule.timeSlots.filter(function (_, i) { return i !== index; });
|
|
2092
2092
|
onChange(__assign(__assign({}, daySchedule), { timeSlots: newTimeSlots }));
|
|
2093
2093
|
};
|
|
2094
|
-
return (jsxRuntime.jsxs("div", { className: "flex flex-col w-full gap-y-4 last:border-b-0 last:mb-0 last:pb-0 border-b border-default-200 xs:py-4 xl:p-4 first:pt-0", children: [jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex xs:space-x-2 sm:space-x-4", children: [jsxRuntime.jsx("h3", { className: "text-small font-semibold text-default-900 capitalize", children: day }), jsxRuntime.jsx(react
|
|
2094
|
+
return (jsxRuntime.jsxs("div", { className: "flex flex-col w-full gap-y-4 last:border-b-0 last:mb-0 last:pb-0 border-b border-default-200 xs:py-4 xl:p-4 first:pt-0", children: [jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex xs:space-x-2 sm:space-x-4", children: [jsxRuntime.jsx("h3", { className: "text-small font-semibold text-default-900 capitalize", children: day }), jsxRuntime.jsx(react.Chip, { size: "sm", color: daySchedule.isOpen ? "primary" : "default", className: "text-background", children: daySchedule.isOpen ? translations.open : translations.closed })] }), jsxRuntime.jsxs("div", { className: "flex xs:gap-2 sm:gap-5", children: [jsxRuntime.jsx(Switch, { size: "sm", color: "primary", isSelected: daySchedule.isOpen, onValueChange: handleToggleDay }), jsxRuntime.jsx(Button, { size: "sm", variant: "bordered", onPress: function () { return onCopyToAll(day); }, children: translations.copyToAll })] })] }), daySchedule.isOpen && (jsxRuntime.jsxs("div", { className: "flex flex-col justify-around gap-y-3 ", children: [daySchedule.timeSlots.map(function (slot, index) { return (jsxRuntime.jsxs("div", { className: "flex items-center gap-1 w-full justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-1", children: [jsxRuntime.jsx(TimeInput, { label: translations.from, className: "w-full", value: toTimeValue(slot.from), onChange: function (value) { return handleTimeChange(index, "from", value); }, isInvalid: !!slot.error }), jsxRuntime.jsx("span", { className: "text-default-900 xs:hidden xl:block", children: "-" }), jsxRuntime.jsx(TimeInput, { label: translations.to, className: "w-full", value: toTimeValue(slot.to), onChange: function (value) { return handleTimeChange(index, "to", value); }, isInvalid: !!slot.error, errorMessage: slot.error })] }), jsxRuntime.jsx(Button, { isIconOnly: true, size: "sm", color: "danger", variant: "light", onPress: function () { return handleRemoveTimeSlot(index); }, isDisabled: daySchedule.timeSlots.length === 1, startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:trash-bin-minimalistic-outline" }) })] }, "".concat(day, "-timeslot-").concat(slot.from, "-").concat(slot.to, "-").concat(index))); }), daySchedule.timeSlots.length < 2 && (jsxRuntime.jsx(Button, { size: "sm", variant: "flat", onPress: function () { return handleAddTimeSlot(); }, startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:add-circle-outline" }), children: translations.addTimeSlot }))] }))] }, day));
|
|
2095
2095
|
};
|
|
2096
2096
|
|
|
2097
2097
|
/**
|
|
@@ -2124,7 +2124,7 @@ var Select = function (_a) {
|
|
|
2124
2124
|
var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, placeholder = _a.placeholder, props = __rest(_a, ["label", "id", "size", "variant", "radius", "placeholder"]);
|
|
2125
2125
|
var generatedId = React.useId();
|
|
2126
2126
|
var selectId = id || generatedId;
|
|
2127
|
-
return (jsxRuntime.jsx("div", { className: "group", children: jsxRuntime.jsx(react
|
|
2127
|
+
return (jsxRuntime.jsx("div", { className: "group", children: jsxRuntime.jsx(react.Select, __assign({}, props, { id: selectId, label: label, labelPlacement: "outside", placeholder: placeholder, variant: variant, size: size, radius: radius, classNames: {
|
|
2128
2128
|
label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
|
|
2129
2129
|
trigger: "data-[open=true]:!border-primary-500 data-[focus=true]:!border-primary-500 data-[disabled=true]:bg-default-100",
|
|
2130
2130
|
popoverContent: "[&_[data-focus-visible=true]]:!outline-none [&_[data-selectable=true]:focus]:!bg-primary-50 [&_li]:!text-default-500 [&_li[data-hover=true]]:!text-default-600",
|
|
@@ -2133,7 +2133,7 @@ var Select = function (_a) {
|
|
|
2133
2133
|
|
|
2134
2134
|
function AuraTable(_a) {
|
|
2135
2135
|
var columns = _a.columns, items = _a.items, renderCell = _a.renderCell, children = _a.children, props = __rest(_a, ["columns", "items", "renderCell", "children"]);
|
|
2136
|
-
return (jsxRuntime.jsxs(react
|
|
2136
|
+
return (jsxRuntime.jsxs(react.Table, __assign({ removeWrapper: true, radius: "none" }, props, { children: [jsxRuntime.jsx(react.TableHeader, { columns: columns, children: function (column) { return jsxRuntime.jsx(react.TableColumn, { children: column.label }, column.key); } }), jsxRuntime.jsx(react.TableBody, { items: items, children: function (item) { return (jsxRuntime.jsx(react.TableRow, { children: function (columnKey) { return (jsxRuntime.jsx(react.TableCell, { children: renderCell ? renderCell(item, columnKey) : children })); } }, item.id)); } })] })));
|
|
2137
2137
|
}
|
|
2138
2138
|
|
|
2139
2139
|
/**
|
|
@@ -2143,7 +2143,7 @@ var Textarea = function (_a) {
|
|
|
2143
2143
|
var id = _a.id, label = _a.label, placeholder = _a.placeholder, description = _a.description, errorMessage = _a.errorMessage, _b = _a.variant, variant = _b === void 0 ? "bordered" : _b, _c = _a.radius, radius = _c === void 0 ? "md" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d; _a.labelPlacement; var props = __rest(_a, ["id", "label", "placeholder", "description", "errorMessage", "variant", "radius", "size", "labelPlacement"]);
|
|
2144
2144
|
var generatedId = React.useId();
|
|
2145
2145
|
var autoId = id || generatedId;
|
|
2146
|
-
return (jsxRuntime.jsx(react
|
|
2146
|
+
return (jsxRuntime.jsx(react.Textarea, __assign({}, props, { id: autoId, label: label, variant: variant, radius: radius, size: size, labelPlacement: "outside", placeholder: placeholder, description: description, errorMessage: errorMessage, classNames: {
|
|
2147
2147
|
label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
|
|
2148
2148
|
inputWrapper: "data-[focus=true]:!border-primary-500 data-[focus=true]:!border-primary-500",
|
|
2149
2149
|
} })));
|
|
@@ -2187,9 +2187,9 @@ var ThemePicker = function (_a) {
|
|
|
2187
2187
|
previewContent: (jsxRuntime.jsxs("div", { className: "rounded-lg border border-[#3F3F46] p-3 mt-4 flex flex-col gap-2", children: [jsxRuntime.jsx("div", { className: "h-3 w-1/2 bg-[#3F3F46] rounded mb-2" }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-[#3F3F46]" }), jsxRuntime.jsx("div", { className: "h-3 w-1/3 rounded bg-[#3F3F46]" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-[#3F3F46]" }), jsxRuntime.jsx("div", { className: "h-3 w-1/4 rounded bg-[#3F3F46]" })] })] }), jsxRuntime.jsx("div", { className: "h-8 w-2/3 bg-[#27272A] rounded-lg mt-2" })] })),
|
|
2188
2188
|
},
|
|
2189
2189
|
];
|
|
2190
|
-
return (jsxRuntime.jsx(react
|
|
2190
|
+
return (jsxRuntime.jsx(react.RadioGroup, { value: value, onChange: function (e) { return onChange(e.target.value); }, className: "flex justify-center ".concat(className || ""), orientation: "horizontal", classNames: {
|
|
2191
2191
|
wrapper: "gap-3",
|
|
2192
|
-
}, children: themes.map(function (theme) { return (jsxRuntime.jsxs("div", { className: "relative rounded-2xl ".concat(theme.cardClass, " p-4 flex-1 transition-all duration-200 flex flex-col justify-start"), children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxRuntime.jsx("span", { className: theme.labelClass, children: theme.label }), jsxRuntime.jsx(react
|
|
2192
|
+
}, children: themes.map(function (theme) { return (jsxRuntime.jsxs("div", { className: "relative rounded-2xl ".concat(theme.cardClass, " p-4 flex-1 transition-all duration-200 flex flex-col justify-start"), children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxRuntime.jsx("span", { className: theme.labelClass, children: theme.label }), jsxRuntime.jsx(react.Radio, { "aria-label": theme.label, color: theme.radioColor, size: "sm", value: theme.key })] }), theme.previewContent] }, theme.key)); }) }));
|
|
2193
2193
|
};
|
|
2194
2194
|
|
|
2195
2195
|
var ToastContext = React.createContext(undefined);
|
|
@@ -2206,7 +2206,7 @@ function GlobalToast() {
|
|
|
2206
2206
|
if (!toast.isVisible) {
|
|
2207
2207
|
return null;
|
|
2208
2208
|
}
|
|
2209
|
-
return (jsxRuntime.jsx("div", { className: "fixed top-4 right-4 z-[2000] w-full max-w-sm", children: jsxRuntime.jsx(react
|
|
2209
|
+
return (jsxRuntime.jsx("div", { className: "fixed top-4 right-4 z-[2000] w-full max-w-sm", children: jsxRuntime.jsx(react.Alert, { hideIconWrapper: true, color: toast.color, variant: "flat", title: toast.title, description: toast.description, isClosable: true, onClose: hideToast }) }));
|
|
2210
2210
|
}
|
|
2211
2211
|
|
|
2212
2212
|
// Traducciones por defecto en español
|
|
@@ -2483,11 +2483,11 @@ var ImageCropModal = function (_a) {
|
|
|
2483
2483
|
window.removeEventListener("resize", handleResize);
|
|
2484
2484
|
};
|
|
2485
2485
|
}, [isOpen, updateCanvasSize]);
|
|
2486
|
-
return (jsxRuntime.jsx(react
|
|
2486
|
+
return (jsxRuntime.jsx(react.Modal, { isOpen: isOpen, onClose: onCancel, size: "5xl", className: "sm:max-w-4xl", scrollBehavior: "inside", backdrop: "blur", classNames: {
|
|
2487
2487
|
backdrop: "bg-black/80",
|
|
2488
2488
|
wrapper: "p-0 sm:p-4",
|
|
2489
2489
|
base: "m-0 sm:m-4 max-h-screen sm:max-h-[90vh] w-full sm:w-auto",
|
|
2490
|
-
}, children: jsxRuntime.jsxs(react
|
|
2490
|
+
}, children: jsxRuntime.jsxs(react.ModalContent, { className: "m-0 sm:m-0 h-screen sm:h-auto sm:max-h-[90vh] sm:rounded-lg", children: [jsxRuntime.jsxs(react.ModalHeader, { className: "flex flex-col gap-1 px-4 sm:px-6", children: [translations.cropModalTitle, jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-gray-500 font-normal", children: translations.cropInstructions })] }), jsxRuntime.jsx(react.ModalBody, { className: "px-4 sm:px-6 py-4", children: jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntime.jsx("div", { className: "flex justify-center overflow-hidden", children: jsxRuntime.jsx("canvas", { ref: canvasRef, width: canvasSize.width, height: canvasSize.height, className: "border border-gray-300 cursor-move select-none max-w-full max-h-[50vh] sm:max-h-[60vh]", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: { touchAction: "none" } }) }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx("label", { htmlFor: "zoom-slider", className: "text-sm font-medium", children: translations.cropZoomLabel }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 w-full", children: [jsxRuntime.jsx("span", { className: "text-xs text-gray-500 min-w-[15px] sm:min-w-[20px]", children: "-" }), jsxRuntime.jsx(react.Slider, { id: "zoom-slider", size: "sm", step: 0.1, minValue: -1, maxValue: 1, value: zoomValue, onChange: function (value) { return setZoomValue(value); }, className: "flex-1", marks: [
|
|
2491
2491
|
{ value: -1, label: "Out" },
|
|
2492
2492
|
{ value: 0, label: "0" },
|
|
2493
2493
|
{ value: 1, label: "In" },
|
|
@@ -2501,7 +2501,7 @@ var ImageCropModal = function (_a) {
|
|
|
2501
2501
|
backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
|
|
2502
2502
|
backgroundSize: "8px 8px",
|
|
2503
2503
|
backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px",
|
|
2504
|
-
} }), jsxRuntime.jsx("span", { className: "text-sm", children: translations.cropBackgroundTransparent })] })] })] })] }) }), jsxRuntime.jsxs(react
|
|
2504
|
+
} }), jsxRuntime.jsx("span", { className: "text-sm", children: translations.cropBackgroundTransparent })] })] })] })] }) }), jsxRuntime.jsxs(react.ModalFooter, { className: "flex flex-col-reverse sm:flex-row gap-2 px-4 sm:px-6", children: [jsxRuntime.jsx(react.Button, { color: "danger", variant: "light", onPress: onCancel, className: "w-full sm:w-auto", children: translations.cropCancelButton }), jsxRuntime.jsx(react.Button, { color: "primary", onPress: handleSave, className: "w-full sm:w-auto", children: translations.cropSaveButton })] })] }) }));
|
|
2505
2505
|
};
|
|
2506
2506
|
/**
|
|
2507
2507
|
* Componente de previsualización de archivo
|
|
@@ -2519,7 +2519,7 @@ var FilePreview = function (_a) {
|
|
|
2519
2519
|
if (!(file === null || file === void 0 ? void 0 : file.type.startsWith("image/"))) {
|
|
2520
2520
|
return null;
|
|
2521
2521
|
}
|
|
2522
|
-
return (jsxRuntime.jsxs("div", { className: "absolute inset-0 overflow-hidden z-10", children: [jsxRuntime.jsx("img", { src: previewUrl, alt: file.name, className: "w-full h-full object-cover" }), jsxRuntime.jsx(react
|
|
2522
|
+
return (jsxRuntime.jsxs("div", { className: "absolute inset-0 overflow-hidden z-10", children: [jsxRuntime.jsx("img", { src: previewUrl, alt: file.name, className: "w-full h-full object-cover" }), jsxRuntime.jsx(react.Button, { isIconOnly: true, size: "sm", color: "danger", variant: "solid", className: "absolute top-2 right-2 sm:top-3 sm:right-3 z-20 bg-red-100 hover:bg-red-200 text-red-600 min-w-8 h-8 sm:min-w-10 sm:h-10", onPress: onRemove, "aria-label": removeAriaLabel, children: jsxRuntime.jsx(IconComponent, { icon: "heroicons:trash", size: "sm" }) })] }));
|
|
2523
2523
|
};
|
|
2524
2524
|
/**
|
|
2525
2525
|
* Componente UploadDocument basado en Hero UI con funcionalidad mejorada
|
|
@@ -2698,7 +2698,7 @@ var UploadFile = function (_a) {
|
|
|
2698
2698
|
.replace(/\s+/g, " ");
|
|
2699
2699
|
var textClasses = "\n\t\ttext-centertext-base ont-medium\n\t\t".concat(disabled ? "text-default-400" : textColor || "text-default-700 dark:text-default-200", "\n\t");
|
|
2700
2700
|
var subTextClasses = "\n\t\ttext-tiny text-center\n\t\t".concat(disabled ? "text-default-400" : "text-default-500 dark:text-default-400", "\n\t");
|
|
2701
|
-
return (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(react
|
|
2701
|
+
return (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(react.Card, { className: containerClasses, isPressable: !(disabled || uploadImageRef.current), onPress: handleClick, children: jsxRuntime.jsxs(react.CardBody, { className: "flex flex-col items-center justify-center gap-3 sm:gap-4 relative overflow-hidden", onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [uploadImageRef.current && (jsxRuntime.jsx(FilePreview, { file: uploadImageRef.current, onRemove: handleRemoveImage, removeAriaLabel: t.removeFileAriaLabel })), jsxRuntime.jsx("div", { className: uploadImageRef.current
|
|
2702
2702
|
? "opacity-0"
|
|
2703
2703
|
: "opacity-100 transition-opacity", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 sm:gap-4", children: [jsxRuntime.jsx(IconComponent, { icon: icon, size: "xl", className: "sm:text-4xl lg:text-5xl ".concat(disabled ? "text-gray-400" : iconColor || "text-primary") }), jsxRuntime.jsxs("div", { className: "text-center px-2", children: [jsxRuntime.jsx("p", { className: textClasses, children: isDragging ? t.dragText : finalText }), finalSubText && !isDragging && (jsxRuntime.jsx("p", { className: subTextClasses, children: finalSubText }))] })] }) }), jsxRuntime.jsx("input", { ref: inputRef, type: "file", className: "hidden", multiple: multiple, accept: Array.isArray(acceptedFiles)
|
|
2704
2704
|
? acceptedFiles.join(",")
|
|
@@ -2715,20 +2715,429 @@ var NavigationLoadingOverlay = function (_a) {
|
|
|
2715
2715
|
if (!isVisible) {
|
|
2716
2716
|
return null;
|
|
2717
2717
|
}
|
|
2718
|
-
return (jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/10 backdrop-blur-sm" }), jsxRuntime.jsx("div", { className: "flex flex-col items-center gap-4", children: jsxRuntime.jsx(react
|
|
2718
|
+
return (jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/10 backdrop-blur-sm" }), jsxRuntime.jsx("div", { className: "flex flex-col items-center gap-4", children: jsxRuntime.jsx(react.Spinner, { size: "lg", color: "primary", className: "drop-shadow-sm" }) })] }));
|
|
2719
2719
|
};
|
|
2720
2720
|
|
|
2721
|
+
/**
|
|
2722
|
+
* Footer of the DrawerFilters with action buttons.
|
|
2723
|
+
*/
|
|
2724
|
+
var DrawerFiltersFooter = function (_a) {
|
|
2725
|
+
var onClearFilters = _a.onClearFilters, onCancel = _a.onCancel, onApplyFilters = _a.onApplyFilters, _b = _a.translations, translations = _b === void 0 ? {} : _b;
|
|
2726
|
+
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;
|
|
2727
|
+
return (jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-10 bg-content1", children: [jsxRuntime.jsx(Button, { variant: "light", color: "primary", onPress: onClearFilters, className: "text-primary", children: clearFilters }), jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(Button, { variant: "bordered", color: "primary", onPress: onCancel, children: cancel }), jsxRuntime.jsx(Button, { variant: "solid", color: "primary", onPress: onApplyFilters, children: applyFilters })] })] }));
|
|
2728
|
+
};
|
|
2729
|
+
|
|
2730
|
+
/**
|
|
2731
|
+
* Header of the DrawerFilters with title and description.
|
|
2732
|
+
*/
|
|
2733
|
+
var DrawerFiltersHeader = function (_a) {
|
|
2734
|
+
var title = _a.title, description = _a.description;
|
|
2735
|
+
return (jsxRuntime.jsxs("div", { className: "px-6 pt-10", children: [jsxRuntime.jsx(H2, { className: "text-xl font-semibold text-foreground mb-2", children: title }), jsxRuntime.jsx(P, { className: "text-default-500", children: description })] }));
|
|
2736
|
+
};
|
|
2737
|
+
|
|
2738
|
+
/**
|
|
2739
|
+
* RangeFilter component with histogram visualization for range selection.
|
|
2740
|
+
*/
|
|
2741
|
+
var RangeFilter = function (_a) {
|
|
2742
|
+
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;
|
|
2743
|
+
// If no value is provided or is empty, use the default range
|
|
2744
|
+
var initialValue = value || [minValue, maxValue];
|
|
2745
|
+
// Internal state to handle the slider value
|
|
2746
|
+
var _h = React.useState(initialValue), currentValue = _h[0], setCurrentValue = _h[1];
|
|
2747
|
+
// Synchronize with the external value when it changes
|
|
2748
|
+
React.useEffect(function () {
|
|
2749
|
+
if (value) {
|
|
2750
|
+
setCurrentValue(value);
|
|
2751
|
+
}
|
|
2752
|
+
}, [value]);
|
|
2753
|
+
// Default translations
|
|
2754
|
+
var defaultTranslations = {
|
|
2755
|
+
title: title,
|
|
2756
|
+
description: description || "",
|
|
2757
|
+
minLabel: "Mínimo",
|
|
2758
|
+
maxLabel: "Máximo",
|
|
2759
|
+
tooltipProducts: "productos",
|
|
2760
|
+
tooltipProduct: "producto",
|
|
2761
|
+
};
|
|
2762
|
+
var t = __assign(__assign({}, defaultTranslations), translations);
|
|
2763
|
+
// Function to check if a bar is in the selected range
|
|
2764
|
+
var isBarInRange = function (barStart, barEnd) {
|
|
2765
|
+
return barStart >= currentValue[0] && barEnd <= currentValue[1];
|
|
2766
|
+
};
|
|
2767
|
+
// Generate data for the histogram
|
|
2768
|
+
var histogramData = React.useMemo(function () {
|
|
2769
|
+
var binWidth = (maxValue - minValue) / bins;
|
|
2770
|
+
var histogram = new Array(bins).fill(0);
|
|
2771
|
+
// Count elements in each range
|
|
2772
|
+
for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
|
|
2773
|
+
var item = data_1[_i];
|
|
2774
|
+
var binIndex = Math.min(Math.floor((item - minValue) / binWidth), bins - 1);
|
|
2775
|
+
histogram[binIndex]++;
|
|
2776
|
+
}
|
|
2777
|
+
return histogram.map(function (count, index) {
|
|
2778
|
+
var binStart = minValue + index * binWidth;
|
|
2779
|
+
var binEnd = minValue + (index + 1) * binWidth;
|
|
2780
|
+
var binMidPoint = (binStart + binEnd) / 2;
|
|
2781
|
+
// Calculate height based on the value (the higher the value, the higher the height)
|
|
2782
|
+
// Normalize the middle value of the bin with respect to the total range
|
|
2783
|
+
var valueRatio = (binMidPoint - minValue) / (maxValue - minValue);
|
|
2784
|
+
// The height goes from 20% (minimum value) to 100% (maximum value)
|
|
2785
|
+
// All bars maintain visual height, regardless of whether they have data
|
|
2786
|
+
var heightPercentage = Math.max(20, valueRatio * 80 + 20);
|
|
2787
|
+
return {
|
|
2788
|
+
height: heightPercentage,
|
|
2789
|
+
binStart: binStart,
|
|
2790
|
+
binEnd: binEnd,
|
|
2791
|
+
count: count,
|
|
2792
|
+
priceRange: "".concat(formatValue(binStart), " - ").concat(formatValue(binEnd)),
|
|
2793
|
+
midPrice: binMidPoint,
|
|
2794
|
+
};
|
|
2795
|
+
});
|
|
2796
|
+
}, [data, minValue, maxValue, bins, formatValue]);
|
|
2797
|
+
return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 ".concat(className), children: [jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: t.description && (jsxRuntime.jsx("p", { className: "text-xs text-default-500", children: t.description })) }), jsxRuntime.jsx("div", { className: "relative h-16 bg-default-50 rounded-lg p-2", children: jsxRuntime.jsx("div", { className: "flex items-end h-full", style: { gap: "1px" }, children: histogramData.map(function (bar, _index) {
|
|
2798
|
+
var inRange = isBarInRange(bar.binStart, bar.binEnd);
|
|
2799
|
+
return (jsxRuntime.jsx("div", { className: "flex-1 rounded-t-sm transition-all duration-200 group relative ".concat(inRange ? "bg-primary-400" : "bg-default-300"), style: {
|
|
2800
|
+
height: "".concat(bar.height, "%"),
|
|
2801
|
+
alignSelf: "flex-end",
|
|
2802
|
+
opacity: inRange ? 1 : 0.4,
|
|
2803
|
+
}, title: "".concat(bar.priceRange, ": ").concat(bar.count, " ").concat(bar.count !== 1 ? t.tooltipProducts : t.tooltipProduct), children: jsxRuntime.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: jsxRuntime.jsxs("div", { className: "text-center", children: [jsxRuntime.jsx("div", { className: "font-medium", children: formatValue(bar.midPrice) }), jsxRuntime.jsxs("div", { className: "text-xs opacity-75", children: [bar.count, " ", bar.count !== 1 ? t.tooltipProducts : t.tooltipProduct] })] }) }) }, "".concat(bar.binStart, "-").concat(bar.binEnd)));
|
|
2804
|
+
}) }) }), jsxRuntime.jsx("div", { className: "px-2", children: jsxRuntime.jsx(react.Slider, __assign({ step: step, minValue: minValue, maxValue: maxValue, defaultValue: [minValue, maxValue], value: currentValue, onChange: function (newValue) {
|
|
2805
|
+
var _a = newValue, min = _a[0], max = _a[1];
|
|
2806
|
+
setCurrentValue([min, max]);
|
|
2807
|
+
onChange([min, max]);
|
|
2808
|
+
}, className: "w-full", isDisabled: false, showSteps: false, showOutline: false, showTooltip: false }, sliderProps)) }), jsxRuntime.jsxs("div", { className: "flex justify-between items-center text-sm", children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-start", children: [jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: t.minLabel }), jsxRuntime.jsx("span", { className: "font-medium text-default-700", children: formatValue(currentValue[0]) })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: t.maxLabel }), jsxRuntime.jsx("span", { className: "font-medium text-default-700", children: formatValue(currentValue[1]) })] })] })] }));
|
|
2809
|
+
};
|
|
2810
|
+
|
|
2811
|
+
// =========================================================================
|
|
2812
|
+
// BASE FILTER SECTION COMPONENT
|
|
2813
|
+
// =========================================================================
|
|
2814
|
+
var FilterSection = function (_a) {
|
|
2815
|
+
var filter = _a.filter, value = _a.value, onChange = _a.onChange, _b = _a.isExpanded, isExpanded = _b === void 0 ? false : _b, onToggleExpanded = _a.onToggleExpanded;
|
|
2816
|
+
var _c = React.useState(isExpanded), internalExpanded = _c[0], setInternalExpanded = _c[1];
|
|
2817
|
+
var handleToggleExpanded = function () {
|
|
2818
|
+
var newExpanded = !internalExpanded;
|
|
2819
|
+
setInternalExpanded(newExpanded);
|
|
2820
|
+
onToggleExpanded === null || onToggleExpanded === void 0 ? void 0 : onToggleExpanded();
|
|
2821
|
+
};
|
|
2822
|
+
var hasActiveFilter = function () {
|
|
2823
|
+
if (!value) {
|
|
2824
|
+
return false;
|
|
2825
|
+
}
|
|
2826
|
+
switch (filter.type) {
|
|
2827
|
+
case "select":
|
|
2828
|
+
return value && "value" in value && value.value !== "";
|
|
2829
|
+
case "multiselect":
|
|
2830
|
+
return (value &&
|
|
2831
|
+
"values" in value &&
|
|
2832
|
+
Array.isArray(value.values) &&
|
|
2833
|
+
value.values.length > 0);
|
|
2834
|
+
case "range":
|
|
2835
|
+
return (value &&
|
|
2836
|
+
"min" in value &&
|
|
2837
|
+
"max" in value &&
|
|
2838
|
+
(value.min !== undefined || value.max !== undefined));
|
|
2839
|
+
case "date":
|
|
2840
|
+
return (value &&
|
|
2841
|
+
"type" in value &&
|
|
2842
|
+
value.type &&
|
|
2843
|
+
((value.type === "singleDay" && value.date) ||
|
|
2844
|
+
(value.type === "dateRange" &&
|
|
2845
|
+
value.dateRange &&
|
|
2846
|
+
value.dateRange.start &&
|
|
2847
|
+
value.dateRange.end)));
|
|
2848
|
+
case "text":
|
|
2849
|
+
return value && "value" in value && value.value !== "";
|
|
2850
|
+
case "number":
|
|
2851
|
+
return value && "value" in value && value.value !== null && value.value !== undefined;
|
|
2852
|
+
default:
|
|
2853
|
+
return false;
|
|
2854
|
+
}
|
|
2855
|
+
};
|
|
2856
|
+
var getActiveFilterCount = function () {
|
|
2857
|
+
if (!value) {
|
|
2858
|
+
return 0;
|
|
2859
|
+
}
|
|
2860
|
+
switch (filter.type) {
|
|
2861
|
+
case "select":
|
|
2862
|
+
return value && "value" in value && value.value !== "" ? 1 : 0;
|
|
2863
|
+
case "multiselect":
|
|
2864
|
+
return value && "values" in value && Array.isArray(value.values)
|
|
2865
|
+
? value.values.length
|
|
2866
|
+
: 0;
|
|
2867
|
+
case "range":
|
|
2868
|
+
return value &&
|
|
2869
|
+
"min" in value &&
|
|
2870
|
+
"max" in value &&
|
|
2871
|
+
(value.min !== undefined || value.max !== undefined)
|
|
2872
|
+
? 1
|
|
2873
|
+
: 0;
|
|
2874
|
+
case "date":
|
|
2875
|
+
return value &&
|
|
2876
|
+
"type" in value &&
|
|
2877
|
+
value.type &&
|
|
2878
|
+
((value.type === "singleDay" && value.date) ||
|
|
2879
|
+
(value.type === "dateRange" &&
|
|
2880
|
+
value.dateRange &&
|
|
2881
|
+
value.dateRange.start &&
|
|
2882
|
+
value.dateRange.end))
|
|
2883
|
+
? 1
|
|
2884
|
+
: 0;
|
|
2885
|
+
case "text":
|
|
2886
|
+
return value && "value" in value && value.value !== "" ? 1 : 0;
|
|
2887
|
+
case "number":
|
|
2888
|
+
return value && "value" in value && value.value !== null && value.value !== undefined ? 1 : 0;
|
|
2889
|
+
default:
|
|
2890
|
+
return 0;
|
|
2891
|
+
}
|
|
2892
|
+
};
|
|
2893
|
+
var renderFilterContent = function () {
|
|
2894
|
+
switch (filter.type) {
|
|
2895
|
+
case "select":
|
|
2896
|
+
return (jsxRuntime.jsx(SelectFilter, { filter: filter, value: value, onChange: onChange }));
|
|
2897
|
+
case "multiselect":
|
|
2898
|
+
return (jsxRuntime.jsx(MultiSelectFilter, { filter: filter, value: value, onChange: onChange }));
|
|
2899
|
+
case "range":
|
|
2900
|
+
return (jsxRuntime.jsx(RangeFilterComponent, { filter: filter, value: value, onChange: onChange }));
|
|
2901
|
+
case "date":
|
|
2902
|
+
return (jsxRuntime.jsx(DateFilter, { filter: filter, value: value, onChange: onChange }));
|
|
2903
|
+
case "text":
|
|
2904
|
+
return (jsxRuntime.jsx(TextFilter, { filter: filter, value: value, onChange: onChange }));
|
|
2905
|
+
case "number":
|
|
2906
|
+
return (jsxRuntime.jsx(NumberFilter, { filter: filter, value: value, onChange: onChange }));
|
|
2907
|
+
default:
|
|
2908
|
+
return null;
|
|
2909
|
+
}
|
|
2910
|
+
};
|
|
2911
|
+
return (jsxRuntime.jsxs("div", { className: "bg-white rounded-xl max-w-sm", style: {
|
|
2912
|
+
border: "0 solid #e5e7eb",
|
|
2913
|
+
boxShadow: "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
|
|
2914
|
+
"--tw-shadow": "var(--heroui-box-shadow-medium)",
|
|
2915
|
+
"--tw-shadow-colored": "var(--heroui-box-shadow-medium)",
|
|
2916
|
+
}, children: [jsxRuntime.jsxs("button", { type: "button", className: "flex items-center justify-between w-full text-left p-4", onClick: handleToggleExpanded, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(H2, { className: "text-base font-normal text-foreground", children: filter.title }), hasActiveFilter() && (jsxRuntime.jsx("span", { className: "text-xs px-2 py-1 rounded-full text-black dark:text-white", style: {
|
|
2917
|
+
backgroundColor: "hsl(var(--heroui-default) / var(--heroui-default-opacity, var(--tw-bg-opacity)))",
|
|
2918
|
+
}, children: getActiveFilterCount() }))] }), jsxRuntime.jsx(IconComponent, { icon: internalExpanded
|
|
2919
|
+
? "solar:alt-arrow-down-outline"
|
|
2920
|
+
: "solar:alt-arrow-right-outline", size: "sm", className: "text-default-500" })] }), internalExpanded && (jsxRuntime.jsxs("div", { className: "px-4 pb-4", onClick: function (e) { return e.stopPropagation(); }, children: [filter.description && (jsxRuntime.jsx(P, { className: "text-default-500 mb-4", children: filter.description })), renderFilterContent()] }))] }));
|
|
2921
|
+
};
|
|
2922
|
+
// =========================================================================
|
|
2923
|
+
// SELECT FILTER
|
|
2924
|
+
// =========================================================================
|
|
2925
|
+
var SelectFilter = function (_a) {
|
|
2926
|
+
var filter = _a.filter, value = _a.value, onChange = _a.onChange;
|
|
2927
|
+
var currentValue = (value === null || value === void 0 ? void 0 : value.value) || "";
|
|
2928
|
+
return (jsxRuntime.jsx(Select, { placeholder: "Seleccionar ".concat(filter.title.toLowerCase()), selectedKeys: currentValue ? [currentValue] : [], onSelectionChange: function (keys) {
|
|
2929
|
+
var selectedKey = Array.from(keys)[0];
|
|
2930
|
+
onChange({ value: selectedKey || "" });
|
|
2931
|
+
}, className: "w-full", children: filter.data.map(function (item) { return (jsxRuntime.jsx(react.SelectItem, { children: item.label }, item.value)); }) }));
|
|
2932
|
+
};
|
|
2933
|
+
// =========================================================================
|
|
2934
|
+
// MULTISELECT FILTER
|
|
2935
|
+
// =========================================================================
|
|
2936
|
+
var MultiSelectFilter = function (_a) {
|
|
2937
|
+
var filter = _a.filter, value = _a.value, onChange = _a.onChange;
|
|
2938
|
+
var currentValues = (value === null || value === void 0 ? void 0 : value.values) || [];
|
|
2939
|
+
return (jsxRuntime.jsx(Select, { placeholder: "Seleccionar ".concat(filter.title.toLowerCase()), selectedKeys: currentValues, onSelectionChange: function (keys) {
|
|
2940
|
+
var selectedKeys = Array.from(keys);
|
|
2941
|
+
onChange({ values: selectedKeys });
|
|
2942
|
+
}, selectionMode: "multiple", className: "w-full", children: filter.data.map(function (item) { return (jsxRuntime.jsx(react.SelectItem, { children: item.label }, item.value)); }) }));
|
|
2943
|
+
};
|
|
2944
|
+
// =========================================================================
|
|
2945
|
+
// RANGE FILTER
|
|
2946
|
+
// =========================================================================
|
|
2947
|
+
var RangeFilterComponent = function (_a) {
|
|
2948
|
+
var filter = _a.filter, value = _a.value, onChange = _a.onChange;
|
|
2949
|
+
var currentValue = value || { min: filter.data.min, max: filter.data.max };
|
|
2950
|
+
var rangeValue = [currentValue.min, currentValue.max];
|
|
2951
|
+
var handleChange = function (newValue) {
|
|
2952
|
+
var min = newValue[0], max = newValue[1];
|
|
2953
|
+
onChange({ min: min, max: max });
|
|
2954
|
+
};
|
|
2955
|
+
// Generate data array for histogram (simple implementation)
|
|
2956
|
+
var data = Array.from({
|
|
2957
|
+
length: Math.ceil((filter.data.max - filter.data.min) / (filter.data.step || 1)) + 1,
|
|
2958
|
+
}, function (_, i) { return filter.data.min + i * (filter.data.step || 1); });
|
|
2959
|
+
return (jsxRuntime.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" }));
|
|
2960
|
+
};
|
|
2961
|
+
// =========================================================================
|
|
2962
|
+
// DATE FILTER
|
|
2963
|
+
// =========================================================================
|
|
2964
|
+
var DateFilter = function (_a) {
|
|
2965
|
+
_a.filter; var value = _a.value, onChange = _a.onChange;
|
|
2966
|
+
var handleDateSelectorChange = function (dateSelectorValue) {
|
|
2967
|
+
onChange({
|
|
2968
|
+
type: dateSelectorValue.type === exports.HolidayType.SingleDay
|
|
2969
|
+
? "singleDay"
|
|
2970
|
+
: "dateRange",
|
|
2971
|
+
date: dateSelectorValue.date ? dateSelectorValue.date.toString() : null,
|
|
2972
|
+
dateRange: dateSelectorValue.dateRange
|
|
2973
|
+
? {
|
|
2974
|
+
start: dateSelectorValue.dateRange.start
|
|
2975
|
+
? dateSelectorValue.dateRange.start.toString()
|
|
2976
|
+
: null,
|
|
2977
|
+
end: dateSelectorValue.dateRange.end
|
|
2978
|
+
? dateSelectorValue.dateRange.end.toString()
|
|
2979
|
+
: null,
|
|
2980
|
+
}
|
|
2981
|
+
: null,
|
|
2982
|
+
});
|
|
2983
|
+
};
|
|
2984
|
+
// Convert our internal format to DateSelector format
|
|
2985
|
+
var getInitialType = function () {
|
|
2986
|
+
if ((value === null || value === void 0 ? void 0 : value.type) === "dateRange") {
|
|
2987
|
+
return exports.HolidayType.DateRange;
|
|
2988
|
+
}
|
|
2989
|
+
return exports.HolidayType.SingleDay;
|
|
2990
|
+
};
|
|
2991
|
+
// For now, we'll let DateSelector handle its own state
|
|
2992
|
+
// The component will reset when the filter value changes
|
|
2993
|
+
var getInitialDate = function () {
|
|
2994
|
+
return undefined;
|
|
2995
|
+
};
|
|
2996
|
+
var getInitialDateRange = function () {
|
|
2997
|
+
return undefined;
|
|
2998
|
+
};
|
|
2999
|
+
return (jsxRuntime.jsx(DateSelector, { initialType: getInitialType(), initialDate: getInitialDate(), initialDateRange: getInitialDateRange(), onChange: handleDateSelectorChange, className: "w-full" }));
|
|
3000
|
+
};
|
|
3001
|
+
// =========================================================================
|
|
3002
|
+
// TEXT FILTER
|
|
3003
|
+
// =========================================================================
|
|
3004
|
+
var TextFilter = function (_a) {
|
|
3005
|
+
var filter = _a.filter, value = _a.value, onChange = _a.onChange;
|
|
3006
|
+
var currentValue = (value === null || value === void 0 ? void 0 : value.value) || "";
|
|
3007
|
+
return (jsxRuntime.jsx(Input, { type: "text", placeholder: filter.data.placeholder || "Ingrese ".concat(filter.title.toLowerCase()), value: currentValue, onValueChange: function (newValue) {
|
|
3008
|
+
onChange({ value: newValue });
|
|
3009
|
+
}, className: "w-full" }));
|
|
3010
|
+
};
|
|
3011
|
+
// =========================================================================
|
|
3012
|
+
// NUMBER FILTER
|
|
3013
|
+
// =========================================================================
|
|
3014
|
+
var NumberFilter = function (_a) {
|
|
3015
|
+
var _b;
|
|
3016
|
+
var filter = _a.filter, value = _a.value, onChange = _a.onChange;
|
|
3017
|
+
var currentValue = ((_b = value === null || value === void 0 ? void 0 : value.value) === null || _b === void 0 ? void 0 : _b.toString()) || "";
|
|
3018
|
+
return (jsxRuntime.jsx(Input, { type: "number", placeholder: filter.data.placeholder || "Ingrese ".concat(filter.title.toLowerCase()), value: currentValue, onValueChange: function (newValue) {
|
|
3019
|
+
var numValue = newValue === "" ? null : Number(newValue);
|
|
3020
|
+
onChange({ value: numValue });
|
|
3021
|
+
}, min: filter.data.min, max: filter.data.max, step: filter.data.step, className: "w-full" }));
|
|
3022
|
+
};
|
|
3023
|
+
|
|
3024
|
+
/**
|
|
3025
|
+
* DrawerFilters - Generic component for dynamic filters in drawer.
|
|
3026
|
+
*
|
|
3027
|
+
* Características:
|
|
3028
|
+
* - Dynamic header with title and description
|
|
3029
|
+
* - Body with configurable filters (select, multiselect, range, date)
|
|
3030
|
+
* - Footer with action buttons (clear, cancel, apply)
|
|
3031
|
+
* - Internal state management of filters
|
|
3032
|
+
* - Callback for applying filters with processed values
|
|
3033
|
+
*/
|
|
3034
|
+
var DrawerFilters = function (_a) {
|
|
3035
|
+
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;
|
|
3036
|
+
var _b = React.useState({}), filterValues = _b[0], setFilterValues = _b[1];
|
|
3037
|
+
// Handle changes in individual filters
|
|
3038
|
+
var handleFilterChange = React.useCallback(function (filterKey, value) {
|
|
3039
|
+
setFilterValues(function (prev) {
|
|
3040
|
+
var _a;
|
|
3041
|
+
return (__assign(__assign({}, prev), (_a = {}, _a[filterKey] = value, _a)));
|
|
3042
|
+
});
|
|
3043
|
+
}, []);
|
|
3044
|
+
// Clear all filters
|
|
3045
|
+
var handleClearFilters = React.useCallback(function () {
|
|
3046
|
+
setFilterValues({});
|
|
3047
|
+
onClearFilters === null || onClearFilters === void 0 ? void 0 : onClearFilters();
|
|
3048
|
+
}, [onClearFilters]);
|
|
3049
|
+
// Handle drawer open/close changes
|
|
3050
|
+
var handleOpenChange = React.useCallback(function (open) {
|
|
3051
|
+
// Only close if explicitly requested (not from internal interactions)
|
|
3052
|
+
if (!open) {
|
|
3053
|
+
onOpenChange(false);
|
|
3054
|
+
}
|
|
3055
|
+
}, [onOpenChange]);
|
|
3056
|
+
// Cancel and close drawer
|
|
3057
|
+
var handleCancel = React.useCallback(function () {
|
|
3058
|
+
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
|
|
3059
|
+
onOpenChange(false);
|
|
3060
|
+
}, [onCancel, onOpenChange]);
|
|
3061
|
+
// Apply filters and process values
|
|
3062
|
+
var handleApplyFilters = React.useCallback(function () {
|
|
3063
|
+
var processedFilters = {};
|
|
3064
|
+
var _loop_1 = function (key, value) {
|
|
3065
|
+
if (value === undefined || value === null) {
|
|
3066
|
+
return "continue";
|
|
3067
|
+
}
|
|
3068
|
+
var filterConfig = config.data.find(function (f) { return f.key === key; });
|
|
3069
|
+
if (!filterConfig) {
|
|
3070
|
+
return "continue";
|
|
3071
|
+
}
|
|
3072
|
+
switch (filterConfig.type) {
|
|
3073
|
+
case "select":
|
|
3074
|
+
processedFilters[key] = value.value;
|
|
3075
|
+
break;
|
|
3076
|
+
case "date":
|
|
3077
|
+
if (value && "type" in value) {
|
|
3078
|
+
if (value.type === "singleDay" && value.date) {
|
|
3079
|
+
processedFilters[key] = value.date;
|
|
3080
|
+
}
|
|
3081
|
+
else if (value.type === "dateRange" &&
|
|
3082
|
+
value.dateRange &&
|
|
3083
|
+
value.dateRange.start &&
|
|
3084
|
+
value.dateRange.end) {
|
|
3085
|
+
processedFilters[key] =
|
|
3086
|
+
"".concat(value.dateRange.start, "-").concat(value.dateRange.end);
|
|
3087
|
+
}
|
|
3088
|
+
}
|
|
3089
|
+
break;
|
|
3090
|
+
case "multiselect":
|
|
3091
|
+
if ("values" in value &&
|
|
3092
|
+
Array.isArray(value.values) &&
|
|
3093
|
+
value.values.length > 0) {
|
|
3094
|
+
processedFilters[key] = value.values.join(",");
|
|
3095
|
+
}
|
|
3096
|
+
break;
|
|
3097
|
+
case "range":
|
|
3098
|
+
if ("min" in value &&
|
|
3099
|
+
"max" in value &&
|
|
3100
|
+
(value.min !== undefined || value.max !== undefined)) {
|
|
3101
|
+
processedFilters[key] = "".concat(value.min || 0, "-").concat(value.max || 0);
|
|
3102
|
+
}
|
|
3103
|
+
break;
|
|
3104
|
+
case "text":
|
|
3105
|
+
if (value && "value" in value && value.value !== "") {
|
|
3106
|
+
processedFilters[key] = value.value;
|
|
3107
|
+
}
|
|
3108
|
+
break;
|
|
3109
|
+
case "number":
|
|
3110
|
+
if (value && "value" in value && value.value !== null && value.value !== undefined) {
|
|
3111
|
+
processedFilters[key] = String(value.value);
|
|
3112
|
+
}
|
|
3113
|
+
break;
|
|
3114
|
+
}
|
|
3115
|
+
};
|
|
3116
|
+
// Procesar cada filtro según su tipo
|
|
3117
|
+
for (var _i = 0, _a = Object.entries(filterValues); _i < _a.length; _i++) {
|
|
3118
|
+
var _b = _a[_i], key = _b[0], value = _b[1];
|
|
3119
|
+
_loop_1(key, value);
|
|
3120
|
+
}
|
|
3121
|
+
onApplyFilters(processedFilters);
|
|
3122
|
+
onOpenChange(false);
|
|
3123
|
+
}, [filterValues, config.data, onApplyFilters, onOpenChange]);
|
|
3124
|
+
return (jsxRuntime.jsx(react.Drawer, { isOpen: isOpen, onOpenChange: handleOpenChange, placement: "right", size: "md", className: react.cn("drawer-filters", className), isDismissable: false, hideCloseButton: false, children: jsxRuntime.jsxs(react.DrawerContent, { children: [jsxRuntime.jsx(DrawerFiltersHeader, { title: config.title, description: config.description }), jsxRuntime.jsx(react.DrawerBody, { className: "px-6 py-10", children: jsxRuntime.jsx("div", { className: "space-y-3", children: config.data.map(function (filter) {
|
|
3125
|
+
return (jsxRuntime.jsx(FilterSection, { filter: filter, value: filterValues[filter.key], onChange: function (value) { return handleFilterChange(filter.key, value); } }, filter.key));
|
|
3126
|
+
}) }) }), jsxRuntime.jsx(DrawerFiltersFooter, { onClearFilters: handleClearFilters, onCancel: handleCancel, onApplyFilters: handleApplyFilters, translations: translations })] }) }));
|
|
3127
|
+
};
|
|
3128
|
+
DrawerFilters.displayName = "DrawerFilters";
|
|
3129
|
+
|
|
2721
3130
|
var Modal = function (props) {
|
|
2722
|
-
return (jsxRuntime.jsx(react
|
|
3131
|
+
return (jsxRuntime.jsx(react.Modal, __assign({ shouldBlockScroll: true, radius: "lg", className: "py-9 px-6" }, props)));
|
|
2723
3132
|
};
|
|
2724
3133
|
|
|
2725
|
-
var ModalContent = react
|
|
3134
|
+
var ModalContent = react.ModalContent;
|
|
2726
3135
|
|
|
2727
|
-
var ModalHeader = react
|
|
3136
|
+
var ModalHeader = react.ModalHeader;
|
|
2728
3137
|
|
|
2729
|
-
var ModalBody = react
|
|
3138
|
+
var ModalBody = react.ModalBody;
|
|
2730
3139
|
|
|
2731
|
-
var ModalFooter = react
|
|
3140
|
+
var ModalFooter = react.ModalFooter;
|
|
2732
3141
|
|
|
2733
3142
|
var paddingClasses = {
|
|
2734
3143
|
sm: "p-4",
|
|
@@ -2749,7 +3158,7 @@ var Card = function (_a) {
|
|
|
2749
3158
|
var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.shadow, shadow = _c === void 0 ? "sm" : _c, _d = _a.radius, radius = _d === void 0 ? "sm" : _d, _e = _a.padding, padding = _e === void 0 ? "md" : _e, props = __rest(_a, ["children", "className", "shadow", "radius", "padding"]);
|
|
2750
3159
|
var paddingClass = paddingClasses[padding];
|
|
2751
3160
|
var combinedClassName = [paddingClass, className].filter(Boolean).join(" ");
|
|
2752
|
-
return (jsxRuntime.jsx(react
|
|
3161
|
+
return (jsxRuntime.jsx(react.Card, __assign({ shadow: shadow, radius: radius, className: combinedClassName }, props, { children: children })));
|
|
2753
3162
|
};
|
|
2754
3163
|
|
|
2755
3164
|
/**
|
|
@@ -2889,9 +3298,13 @@ var NavigationLoadingProvider = function (_a) {
|
|
|
2889
3298
|
return (jsxRuntime.jsxs(NavigationLoadingContext.Provider, { value: value, children: [children, jsxRuntime.jsx(NavigationLoadingOverlay, { isVisible: isVisible })] }));
|
|
2890
3299
|
};
|
|
2891
3300
|
|
|
3301
|
+
Object.defineProperty(exports, "Slider", {
|
|
3302
|
+
enumerable: true,
|
|
3303
|
+
get: function () { return react.Slider; }
|
|
3304
|
+
});
|
|
2892
3305
|
Object.defineProperty(exports, "loadIcons", {
|
|
2893
3306
|
enumerable: true,
|
|
2894
|
-
get: function () { return react.loadIcons; }
|
|
3307
|
+
get: function () { return react$1.loadIcons; }
|
|
2895
3308
|
});
|
|
2896
3309
|
exports.AddHolidayForm = AddHolidayForm;
|
|
2897
3310
|
exports.AnalyticsCard = AnalyticsCard;
|
|
@@ -2906,6 +3319,7 @@ exports.ColorSelector = ColorSelector;
|
|
|
2906
3319
|
exports.DatePicker = DatePicker;
|
|
2907
3320
|
exports.DateRangePicker = DateRangePicker;
|
|
2908
3321
|
exports.DateSelector = DateSelector;
|
|
3322
|
+
exports.DrawerFilters = DrawerFilters;
|
|
2909
3323
|
exports.GlobalToast = GlobalToast;
|
|
2910
3324
|
exports.H1 = H1;
|
|
2911
3325
|
exports.H2 = H2;
|
|
@@ -2928,6 +3342,7 @@ exports.P = P;
|
|
|
2928
3342
|
exports.Pagination = Pagination;
|
|
2929
3343
|
exports.Phone = Phone;
|
|
2930
3344
|
exports.PromotionalBanner = PromotionalBanner;
|
|
3345
|
+
exports.RangeFilter = RangeFilter;
|
|
2931
3346
|
exports.RowSteps = RowSteps;
|
|
2932
3347
|
exports.ScheduleRow = ScheduleRow;
|
|
2933
3348
|
exports.SearchInput = SearchInput;
|
|
@@ -2947,9 +3362,9 @@ exports.themeColors = themeColors;
|
|
|
2947
3362
|
exports.useAuraToast = useAuraToast;
|
|
2948
3363
|
exports.useNavigationLoading = useNavigationLoading;
|
|
2949
3364
|
exports.useThemeContext = useThemeContext;
|
|
2950
|
-
Object.keys(react
|
|
3365
|
+
Object.keys(react).forEach(function (k) {
|
|
2951
3366
|
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
2952
3367
|
enumerable: true,
|
|
2953
|
-
get: function () { return react
|
|
3368
|
+
get: function () { return react[k]; }
|
|
2954
3369
|
});
|
|
2955
3370
|
});
|