@beweco/aurora-ui 0.1.10 → 0.1.12
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 +172 -93
- package/dist/index.esm.js +78 -7
- package/dist/types/components/breadcrumbs/Breadcrumbs.d.ts +29 -0
- package/dist/types/components/breadcrumbs/Breadcrumbs.d.ts.map +1 -0
- package/dist/types/components/breadcrumbs/Breadcrumbs.types.d.ts +43 -0
- package/dist/types/components/breadcrumbs/Breadcrumbs.types.d.ts.map +1 -0
- package/dist/types/components/breadcrumbs/index.d.ts +3 -0
- package/dist/types/components/breadcrumbs/index.d.ts.map +1 -0
- package/dist/types/components/header/Header.d.ts.map +1 -1
- package/dist/types/components/header/Header.types.d.ts +5 -0
- package/dist/types/components/header/Header.types.d.ts.map +1 -1
- package/dist/types/components/header/index.d.ts +1 -1
- package/dist/types/components/header/index.d.ts.map +1 -1
- 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/multi-step-wizard/_internal/MultiStepSidebar.d.ts.map +1 -1
- package/dist/types/components/navigation-loading-overlay/NavigationLoadingOverlay.d.ts +8 -0
- package/dist/types/components/navigation-loading-overlay/NavigationLoadingOverlay.d.ts.map +1 -0
- package/dist/types/components/navigation-loading-overlay/NavigationLoadingOverlay.types.d.ts +4 -0
- package/dist/types/components/navigation-loading-overlay/NavigationLoadingOverlay.types.d.ts.map +1 -0
- package/dist/types/components/navigation-loading-overlay/index.d.ts +3 -0
- package/dist/types/components/navigation-loading-overlay/index.d.ts.map +1 -0
- package/dist/types/contexts/navigation-loading/index.d.ts +3 -0
- package/dist/types/contexts/navigation-loading/index.d.ts.map +1 -0
- package/dist/types/contexts/navigation-loading/navigation-loading.context.d.ts +4 -0
- package/dist/types/contexts/navigation-loading/navigation-loading.context.d.ts.map +1 -0
- package/dist/types/contexts/navigation-loading/navigation-loading.context.type.d.ts +6 -0
- package/dist/types/contexts/navigation-loading/navigation-loading.context.type.d.ts.map +1 -0
- package/dist/types/index.d.ts +5 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/providers/navigation-loading/index.d.ts +2 -0
- package/dist/types/providers/navigation-loading/index.d.ts.map +1 -0
- package/dist/types/providers/navigation-loading/navigation-loading-provider.d.ts +6 -0
- package/dist/types/providers/navigation-loading/navigation-loading-provider.d.ts.map +1 -0
- package/dist/types/providers/toast/toast-provider.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var react = require('@heroui/react');
|
|
3
|
+
var react$1 = require('@heroui/react');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var react
|
|
6
|
+
var react = 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.Button, __assign({}, props, { color: color, size: size, variant: variant, radius: radius, startContent: startContent, endContent: endContent, isLoading: isLoading, isIconOnly: isIconOnly })));
|
|
86
|
+
return (jsxRuntime.jsx(react$1.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.DatePicker, __assign({ label: label, size: size, labelPlacement: "outside", classNames: {
|
|
93
|
+
return (jsxRuntime.jsx(react$1.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.DateRangePicker, __assign({ label: label, size: size, labelPlacement: "outside", classNames: {
|
|
103
|
+
return (jsxRuntime.jsx(react$1.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
|
|
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 }) })));
|
|
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.Input, __assign({}, props, { id: inputId, label: label, labelPlacement: "outside", placeholder: placeholder, variant: variant, size: size, radius: radius, classNames: {
|
|
135
|
+
return (jsxRuntime.jsx(react$1.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.RadioGroup, __assign({ color: "primary", orientation: "horizontal", size: "sm", value: newHoliday.type, onValueChange: function (value) {
|
|
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$1.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.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
|
|
219
|
+
} }, radioGroupProps, { children: [jsxRuntime.jsx(react$1.Radio, { value: exports.HolidayType.SingleDay, children: t.dayOption }), jsxRuntime.jsx(react$1.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.cn("text-lg font-semibold", className) }, props, { children: children })));
|
|
228
|
+
return (jsxRuntime.jsx("h2", __assign({ className: react$1.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.cn("text-tiny text-default-500 font-normal", className) }, props, { children: children })));
|
|
233
|
+
return (jsxRuntime.jsx("p", __assign({ className: react$1.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.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) {
|
|
317
|
+
return (jsxRuntime.jsx(react$1.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$1.Spacer, { y: 2 }), showTimePeriods && (jsxRuntime.jsxs(react$1.Tabs, { size: "md", className: " self-end", onSelectionChange: function (key) { return handleTimePeriodChange(String(key)); }, children: [jsxRuntime.jsx(react$1.Tab, { title: t.months6 }, "6-months"), jsxRuntime.jsx(react$1.Tab, { title: t.months3 }, "3-months"), jsxRuntime.jsx(react$1.Tab, { title: t.days30 }, "30-days"), jsxRuntime.jsx(react$1.Tab, { title: t.days7 }, "7-days"), jsxRuntime.jsx(react$1.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.cn("rounded-medium flex w-full flex-col gap-2 p-3 transition-colors", {
|
|
319
|
+
return (jsxRuntime.jsxs("button", { type: "button", className: react$1.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.cn("text-small text-default-500 font-medium transition-colors", {
|
|
321
|
+
}), onClick: function () { return handleChartChange(key); }, children: [jsxRuntime.jsx("span", { className: react$1.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.Chip, { classNames: {
|
|
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$1.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.Dropdown, { classNames: {
|
|
355
|
+
}, animationDuration: 1000, animationEasing: "ease", dataKey: "value", fill: "url(#colorGradient)", stroke: "hsl(var(--heroui-".concat(color, "))"), strokeWidth: 2, type: "monotone" })] }) }), showDropdownMenu && (jsxRuntime.jsxs(react$1.Dropdown, { classNames: {
|
|
356
356
|
content: "min-w-[120px]",
|
|
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: {
|
|
357
|
+
}, placement: "bottom-end", children: [jsxRuntime.jsx(react$1.DropdownTrigger, { children: jsxRuntime.jsx(react$1.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$1.DropdownMenu, { itemClasses: {
|
|
358
358
|
title: "text-tiny",
|
|
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")] })] }))] }) })));
|
|
359
|
+
}, variant: "bordered", onAction: function (key) { return handleMenuAction(String(key)); }, children: [jsxRuntime.jsx(react$1.DropdownItem, { children: t.viewDetails }, "view-details"), jsxRuntime.jsx(react$1.DropdownItem, { children: t.exportData }, "export-data"), jsxRuntime.jsx(react$1.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.Autocomplete, __assign({}, props, { id: autoId, label: undefined, labelPlacement: "outside", variant: variant, size: size, radius: radius, classNames: {
|
|
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$1.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.RadioGroup, { value: selectedColor, onValueChange: onColorChange, orientation: "horizontal", className: "flex flex-wrap !gap-2", classNames: {
|
|
911
|
+
return (jsxRuntime.jsx(react$1.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.Radio, { value: color.label, className: "p-0 m-0", classNames: {
|
|
914
|
+
}, children: colorOptions.map(function (color) { return (jsxRuntime.jsx(react$1.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.Chip, __assign({}, props, { color: color, onClose: props.onClose })));
|
|
940
|
+
return (jsxRuntime.jsx(react$1.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.Chip, __assign({}, props, { onClose: props.onClose, classNames: __assign({ base: colorClasses }, props.classNames) })));
|
|
951
|
+
return (jsxRuntime.jsx(react$1.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,30 +1004,62 @@ 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.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)))] }));
|
|
1007
|
+
return (jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center ".concat(className), children: [jsxRuntime.jsxs(react$1.RadioGroup, __assign({ color: "primary", orientation: "horizontal", size: "sm", value: type, onValueChange: handleTypeChange }, radioGroupProps, { children: [jsxRuntime.jsx(react$1.Radio, __assign({ value: exports.HolidayType.SingleDay }, radioItemProps, { children: t.dayOption })), jsxRuntime.jsx(react$1.Radio, __assign({ value: exports.HolidayType.DateRange }, radioItemProps, { children: t.dateRangeOption }))] })), type === exports.HolidayType.DateRange ? (jsxRuntime.jsx(react$1.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$1.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.cn("text-xl font-bold", className) }, props, { children: children })));
|
|
1012
|
+
return (jsxRuntime.jsx("h1", __assign({ className: react$1.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.cn("text-base font-medium", className) }, props, { children: children })));
|
|
1017
|
+
return (jsxRuntime.jsx("h3", __assign({ className: react$1.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.cn("text-sm font-medium ", className) }, props, { children: children })));
|
|
1022
|
+
return (jsxRuntime.jsx("h4", __assign({ className: react$1.cn("text-sm font-medium ", className) }, props, { children: children })));
|
|
1023
|
+
};
|
|
1024
|
+
|
|
1025
|
+
/**
|
|
1026
|
+
* Breadcrumbs - Wrapper simple del componente HeroUI Breadcrumbs
|
|
1027
|
+
*
|
|
1028
|
+
* Este componente es un wrapper directo del componente Breadcrumbs de HeroUI,
|
|
1029
|
+
* proporcionando una interfaz simplificada y consistente con el resto de la librería.
|
|
1030
|
+
*
|
|
1031
|
+
* @example
|
|
1032
|
+
* ```tsx
|
|
1033
|
+
* // Uso básico
|
|
1034
|
+
* <Breadcrumbs>
|
|
1035
|
+
* <BreadcrumbItem href="/">Inicio</BreadcrumbItem>
|
|
1036
|
+
* <BreadcrumbItem href="/products">Productos</BreadcrumbItem>
|
|
1037
|
+
* <BreadcrumbItem>Detalle</BreadcrumbItem>
|
|
1038
|
+
* </Breadcrumbs>
|
|
1039
|
+
*
|
|
1040
|
+
* // Con items como prop
|
|
1041
|
+
* <Breadcrumbs
|
|
1042
|
+
* items={[
|
|
1043
|
+
* { label: "Inicio", href: "/" },
|
|
1044
|
+
* { label: "Productos", href: "/products" },
|
|
1045
|
+
* { label: "Detalle", isCurrent: true }
|
|
1046
|
+
* ]}
|
|
1047
|
+
* />
|
|
1048
|
+
* ```
|
|
1049
|
+
*/
|
|
1050
|
+
var BreadcrumbsComponent = function (_a) {
|
|
1051
|
+
var items = _a.items, children = _a.children, heroUIProps = __rest(_a, ["items", "children"]);
|
|
1052
|
+
return (jsxRuntime.jsx(react$1.Breadcrumbs, __assign({}, heroUIProps, { children: items
|
|
1053
|
+
? items.map(function (item, index) { return (jsxRuntime.jsx(react$1.BreadcrumbItem, { href: item.href, isCurrent: item.isCurrent, children: item.label }, "".concat(item.href || item.label, "-").concat(index))); })
|
|
1054
|
+
: children })));
|
|
1023
1055
|
};
|
|
1024
1056
|
|
|
1025
1057
|
var ConfigMenu = function (_a) {
|
|
1026
1058
|
var _b;
|
|
1027
1059
|
var options = _a.options, onLogout = _a.onLogout, translations = _a.translations;
|
|
1028
|
-
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: {
|
|
1060
|
+
return (jsxRuntime.jsxs(react$1.Dropdown, { className: "min-w-40", children: [jsxRuntime.jsx(react$1.DropdownTrigger, { children: jsxRuntime.jsx(react$1.Button, { isIconOnly: true, color: "default", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:settings-linear" }) }) }), jsxRuntime.jsxs(react$1.DropdownMenu, { "aria-label": "Configuration", children: [jsxRuntime.jsx(react$1.DropdownSection, { showDivider: true, className: "mb-0", children: options.map(function (item) { return (jsxRuntime.jsx(react$1.DropdownItem, { href: item.href, className: "data-[hover=true]:bg-primary-100 data-[hover=true]:text-default-700", classNames: {
|
|
1029
1061
|
base: "text-default-500",
|
|
1030
|
-
}, 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: {
|
|
1062
|
+
}, startContent: item.icon ? jsxRuntime.jsx(IconComponent, { icon: item.icon }) : undefined, children: item.label }, item.label)); }) }), jsxRuntime.jsx(react$1.DropdownSection, { children: jsxRuntime.jsx(react$1.DropdownItem, { onPress: onLogout, className: "data-[hover=true]:bg-primary-100 data-[hover=true]:text-default-700", classNames: {
|
|
1031
1063
|
base: "text-default-500",
|
|
1032
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") })] })] }));
|
|
1033
1065
|
};
|
|
@@ -1035,13 +1067,13 @@ ConfigMenu.displayName = "ConfigMenu";
|
|
|
1035
1067
|
|
|
1036
1068
|
var NotificationButton = function (_a) {
|
|
1037
1069
|
var _b = _a.notificationCount, notificationCount = _b === void 0 ? 0 : _b;
|
|
1038
|
-
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 })) }));
|
|
1070
|
+
return (jsxRuntime.jsx(react$1.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 })) }));
|
|
1039
1071
|
};
|
|
1040
1072
|
NotificationButton.displayName = "NotificationButton";
|
|
1041
1073
|
|
|
1042
1074
|
var HeaderComponent = function (_a) {
|
|
1043
|
-
var notificationCount = _a.notificationCount, options = _a.options, onMenuClick = _a.onMenuClick, onLogout = _a.onLogout, translations = _a.translations;
|
|
1044
|
-
return (jsxRuntime.
|
|
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$1.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 })] })] }) }));
|
|
1045
1077
|
};
|
|
1046
1078
|
HeaderComponent.displayName = "Header";
|
|
1047
1079
|
|
|
@@ -1059,11 +1091,11 @@ var getSectionClasses = function (isCollapsed, sectionClassesProp) {
|
|
|
1059
1091
|
return (__assign(__assign({}, Object.fromEntries(Object.entries(sectionClassesProp).map(function (_a) {
|
|
1060
1092
|
var k = _a[0], v = _a[1];
|
|
1061
1093
|
return [k, normalizeClass(v)];
|
|
1062
|
-
}))), { base: normalizeClass(react.cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.base, "w-full", {
|
|
1094
|
+
}))), { base: normalizeClass(react$1.cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.base, "w-full", {
|
|
1063
1095
|
"p-0 max-w-[44px]": isCollapsed,
|
|
1064
|
-
})), group: normalizeClass(react.cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.group, {
|
|
1096
|
+
})), group: normalizeClass(react$1.cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.group, {
|
|
1065
1097
|
"flex flex-col gap-1": isCollapsed,
|
|
1066
|
-
})), heading: normalizeClass(react.cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.heading, {
|
|
1098
|
+
})), heading: normalizeClass(react$1.cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.heading, {
|
|
1067
1099
|
hidden: isCollapsed,
|
|
1068
1100
|
})) }));
|
|
1069
1101
|
};
|
|
@@ -1072,7 +1104,7 @@ var getItemClasses = function (isCollapsed, itemClassesProp) {
|
|
|
1072
1104
|
return (__assign(__assign({}, Object.fromEntries(Object.entries(itemClassesProp).map(function (_a) {
|
|
1073
1105
|
var k = _a[0], v = _a[1];
|
|
1074
1106
|
return [k, normalizeClass(v)];
|
|
1075
|
-
}))), { base: normalizeClass(react.cn(itemClassesProp === null || itemClassesProp === void 0 ? void 0 : itemClassesProp.base, {
|
|
1107
|
+
}))), { base: normalizeClass(react$1.cn(itemClassesProp === null || itemClassesProp === void 0 ? void 0 : itemClassesProp.base, {
|
|
1076
1108
|
"w-11 h-11 gap-0 p-0": isCollapsed,
|
|
1077
1109
|
})) }));
|
|
1078
1110
|
};
|
|
@@ -1120,7 +1152,7 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
|
|
|
1120
1152
|
// Renders the item displayed inside the Popover when the menu is collapsed.
|
|
1121
1153
|
var renderCompactItem = React.useCallback(function (item, parentKey) {
|
|
1122
1154
|
var _a, _b;
|
|
1123
|
-
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); } })));
|
|
1155
|
+
return (React.createElement(react$1.ListboxItem, __assign({}, item, { key: item.key, endContent: (_a = item.endContent) !== null && _a !== void 0 ? _a : null, startContent: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react$1.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); } })));
|
|
1124
1156
|
}, [handleItemPress, iconClassName]);
|
|
1125
1157
|
// Renders a nested item, i.e., an item that has sub-items.
|
|
1126
1158
|
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
|
|
@@ -1132,8 +1164,8 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
|
|
|
1132
1164
|
if (isNestType) {
|
|
1133
1165
|
item.href = undefined;
|
|
1134
1166
|
}
|
|
1135
|
-
return (React.createElement(react.ListboxItem, __assign({}, item, { key: item.key, classNames: {
|
|
1136
|
-
base: react.cn({
|
|
1167
|
+
return (React.createElement(react$1.ListboxItem, __assign({}, item, { key: item.key, classNames: {
|
|
1168
|
+
base: react$1.cn({
|
|
1137
1169
|
"h-auto p-0": !isCollapsed && isNestType,
|
|
1138
1170
|
}, {
|
|
1139
1171
|
"inline-block w-11": isCollapsed && isNestType,
|
|
@@ -1142,20 +1174,20 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
|
|
|
1142
1174
|
}, "rounded-large"),
|
|
1143
1175
|
}, endContent: isCollapsed || isNestType || hideEndContent
|
|
1144
1176
|
? null
|
|
1145
|
-
: ((_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 }),
|
|
1146
|
-
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: {
|
|
1177
|
+
: ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed || isNestType ? null : item.icon ? (jsxRuntime.jsx(IconComponent, { className: react$1.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$1.Popover, { placement: "right", offset: 10, children: [jsxRuntime.jsx(react$1.PopoverTrigger, { children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", children: jsxRuntime.jsx(react$1.Tooltip, { content: item.title, placement: "right", classNames: {
|
|
1147
1179
|
base: "text-default-500",
|
|
1148
|
-
}, 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
|
|
1180
|
+
}, children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react$1.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$1.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$1.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
|
|
1149
1181
|
? item.items.map(function (child) {
|
|
1150
1182
|
return renderCompactItem(child, item.key);
|
|
1151
1183
|
})
|
|
1152
1184
|
: renderCompactItem(item) })] }) })] })) : null,
|
|
1153
|
-
!isCollapsed && isNestType ? (jsxRuntime.jsx(react.Accordion, { className: "p-0", children: jsxRuntime.jsx(react.AccordionItem, { "aria-label": item.title, classNames: {
|
|
1185
|
+
!isCollapsed && isNestType ? (jsxRuntime.jsx(react$1.Accordion, { className: "p-0", children: jsxRuntime.jsx(react$1.AccordionItem, { "aria-label": item.title, classNames: {
|
|
1154
1186
|
heading: "pr-3 group-data-[selected=true]:bg-primary-100 rounded-large",
|
|
1155
1187
|
trigger: "p-0",
|
|
1156
1188
|
content: "py-0 pl-4",
|
|
1157
|
-
}, 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: {
|
|
1158
|
-
list: react.cn("border-l border-default-200 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$1.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$1.Listbox, { className: "mt-0.5 text-default-500", classNames: {
|
|
1190
|
+
list: react$1.cn("border-l border-default-200 pl-4"),
|
|
1159
1191
|
}, items: item.items, variant: "flat", children: item.items.map(function (child) { return renderItem(child, item.key); }) })) : (renderItem(item)) }, item.key) })) : null));
|
|
1160
1192
|
}, [isCollapsed, hideEndContent, iconClassName, items, selected]);
|
|
1161
1193
|
// Renders a simple item (without children) in the navigation list.
|
|
@@ -1169,17 +1201,17 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
|
|
|
1169
1201
|
return renderNestItem(item);
|
|
1170
1202
|
}
|
|
1171
1203
|
var isItemSelected = selected === item.key;
|
|
1172
|
-
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: {
|
|
1204
|
+
return (React.createElement(react$1.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$1.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$1.Tooltip, { content: item.title, placement: "right", closeDelay: 200, shouldCloseOnBlur: false, classNames: {
|
|
1173
1205
|
base: "text-default-500",
|
|
1174
|
-
}, 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));
|
|
1206
|
+
}, children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react$1.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));
|
|
1175
1207
|
},
|
|
1176
1208
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1177
1209
|
[isCollapsed, hideEndContent, iconClassName, itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.base]);
|
|
1178
|
-
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) {
|
|
1210
|
+
return (jsxRuntime.jsx(react$1.Listbox, __assign({ ref: ref, hideSelectedIcon: true, as: "nav", className: react$1.cn("list-none", className), classNames: __assign(__assign({}, classNames), { list: react$1.cn("items-center", classNames === null || classNames === void 0 ? void 0 : classNames.list) }), color: "default", itemClasses: __assign(__assign({}, itemClasses), { base: react$1.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$1.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) {
|
|
1179
1211
|
var _a, _b;
|
|
1180
1212
|
return item.items &&
|
|
1181
1213
|
((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
1182
|
-
(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));
|
|
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$1.ListboxSection, { classNames: sectionClasses, showDivider: isCollapsed, title: item.title, children: item.items.map(renderItem) }, item.key)) : (renderItem(item));
|
|
1183
1215
|
} }), isCollapsed ? "compact" : "default"));
|
|
1184
1216
|
});
|
|
1185
1217
|
MenuNavList.displayName = "MenuNavList";
|
|
@@ -1219,7 +1251,7 @@ var MenuComponent = React.memo(function Menu(_a) {
|
|
|
1219
1251
|
? "container__menu--collapsed"
|
|
1220
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
|
|
1221
1253
|
? "solar:alt-arrow-right-outline"
|
|
1222
|
-
: "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 })) }) })] }) })] }));
|
|
1254
|
+
: "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsxRuntime.jsx(react$1.Spacer, { y: 6 }), jsxRuntime.jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsxRuntime.jsx(react$1.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$1.Card, { className: "border-none overflow-visible shadow-none", shadow: "sm", children: [jsxRuntime.jsxs(react$1.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$1.CardFooter, { className: "absolute justify-center", style: { bottom: "-30px" }, children: jsxRuntime.jsx(react$1.Button, { className: "px-10 shadow-md", color: "primary", radius: "full", variant: "shadow", onPress: handleUpgradeClick, children: upgradeCard.buttonText }) })] }), jsxRuntime.jsx(react$1.Spacer, { y: 9 })] })), jsxRuntime.jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsxRuntime.jsx(react$1.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 })) }) })] }) })] }));
|
|
1223
1255
|
});
|
|
1224
1256
|
|
|
1225
1257
|
var StepIndicator = function (_a) {
|
|
@@ -1238,7 +1270,7 @@ var StepIndicator = function (_a) {
|
|
|
1238
1270
|
var stepText = stepTextFormatter
|
|
1239
1271
|
? stepTextFormatter(currentStep, totalSteps)
|
|
1240
1272
|
: defaultStepText(currentStep, totalSteps);
|
|
1241
|
-
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, "%") } }) })] })));
|
|
1273
|
+
return (jsxRuntime.jsxs("div", __assign({ className: react$1.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$1.cn("h-full transition-all duration-300 ease-out rounded-full", colorClasses[color]), style: { width: "".concat(progressPercentage, "%") } }) })] })));
|
|
1242
1274
|
};
|
|
1243
1275
|
|
|
1244
1276
|
/*
|
|
@@ -1367,7 +1399,7 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
|
|
|
1367
1399
|
}
|
|
1368
1400
|
return colorsVars;
|
|
1369
1401
|
}, [color, className]);
|
|
1370
|
-
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) {
|
|
1402
|
+
return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "max-w-fit", children: jsxRuntime.jsx("ol", { className: react$1.cn("flex flex-col gap-y-3", colors, className), children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
|
|
1371
1403
|
var status = currentStep === stepIdx
|
|
1372
1404
|
? "active"
|
|
1373
1405
|
: currentStep < stepIdx
|
|
@@ -1375,7 +1407,7 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
|
|
|
1375
1407
|
: "complete";
|
|
1376
1408
|
return (
|
|
1377
1409
|
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
|
|
1378
|
-
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), onClick: function () { return setCurrentStep(stepIdx); } }, 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", {
|
|
1410
|
+
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$1.cn("group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5", stepClassName), onClick: function () { return setCurrentStep(stepIdx); } }, props, { children: [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$1.cn("border-medium text-large text-default-600 relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", {
|
|
1379
1411
|
"shadow-lg": status === "complete",
|
|
1380
1412
|
}), "data-status": status, initial: false, transition: { duration: 0.25 }, variants: {
|
|
1381
1413
|
inactive: {
|
|
@@ -1392,33 +1424,33 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
|
|
|
1392
1424
|
backgroundColor: "var(--complete-background-color)",
|
|
1393
1425
|
borderColor: "var(--complete-border-color)",
|
|
1394
1426
|
},
|
|
1395
|
-
}, 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", {
|
|
1427
|
+
}, 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$1.cn("text-medium text-default-600 font-medium transition-[color,opacity] duration-300 group-active:opacity-70", {
|
|
1396
1428
|
"text-default-300": status === "inactive",
|
|
1397
|
-
}), 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", {
|
|
1429
|
+
}), children: step.title }), jsxRuntime.jsx("div", { className: react$1.cn("text-tiny text-default-600 lg:text-small transition-[color,opacity] duration-300 group-active:opacity-70", {
|
|
1398
1430
|
"text-default-300": status === "inactive",
|
|
1399
|
-
}), 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: {
|
|
1431
|
+
}), children: step.description })] }) })] }), stepIdx) }), stepIdx < steps.length - 1 && !hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: react$1.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: {
|
|
1400
1432
|
// @ts-ignore
|
|
1401
1433
|
"--idx": stepIdx,
|
|
1402
|
-
}, 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-['']", {
|
|
1434
|
+
}, children: jsxRuntime.jsx("div", { className: react$1.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-['']", {
|
|
1403
1435
|
"after:h-full": stepIdx < currentStep,
|
|
1404
1436
|
}) }) }))] }, stepIdx));
|
|
1405
1437
|
}) }) }));
|
|
1406
1438
|
});
|
|
1407
1439
|
VerticalSteps.displayName = "VerticalSteps";
|
|
1408
1440
|
|
|
1409
|
-
var stepperClasses = react.cn(
|
|
1441
|
+
var stepperClasses = react$1.cn(
|
|
1410
1442
|
// light
|
|
1411
1443
|
"[--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))]",
|
|
1412
1444
|
// dark
|
|
1413
1445
|
"dark:[--step-color:rgba(255,255,255,0.1)]", "dark:[--active-color:hsl(var(--heroui-foreground-600))]", "dark:[--active-border-color:rgba(255,255,255,0.5)]", "dark:[--inactive-border-color:rgba(255,255,255,0.1)]", "dark:[--inactive-bar-color:rgba(255,255,255,0.1)]", "dark:[--inactive-color:rgba(255,255,255,0.2)]");
|
|
1414
1446
|
var MultiStepSidebar = React.forwardRef(function (_a, ref) {
|
|
1415
|
-
var children = _a.children, className = _a.className, currentPage = _a.currentPage; _a.onBack; var onChangePage = _a.onChangePage, steps = _a.steps; _a.goBackTranslation; var onClose = _a.onClose, props = __rest(_a, ["children", "className", "currentPage", "onBack", "onChangePage", "steps", "goBackTranslation", "onClose"]);
|
|
1447
|
+
var children = _a.children, className = _a.className, currentPage = _a.currentPage; _a.onBack; _a.onNext; var onChangePage = _a.onChangePage, steps = _a.steps; _a.goBackTranslation; var onClose = _a.onClose, props = __rest(_a, ["children", "className", "currentPage", "onBack", "onNext", "onChangePage", "steps", "goBackTranslation", "onClose"]);
|
|
1416
1448
|
var handleOverlayClick = function (e) {
|
|
1417
1449
|
if (e.target === e.currentTarget) {
|
|
1418
1450
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
1419
1451
|
}
|
|
1420
1452
|
};
|
|
1421
|
-
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 })] })] })) }));
|
|
1453
|
+
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$1.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$1.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 })] })] })) }));
|
|
1422
1454
|
});
|
|
1423
1455
|
MultiStepSidebar.displayName = "MultiStepSidebar";
|
|
1424
1456
|
|
|
@@ -1428,7 +1460,7 @@ var MultistepNavigationButtons = function (_a) {
|
|
|
1428
1460
|
// backButtonProps || {};
|
|
1429
1461
|
var _b = nextButtonProps || {}, nextButtonChildren = _b.children, restNextButtonProps = __rest(_b, ["children"]);
|
|
1430
1462
|
var _c = cancelButtonProps || {}, cancelButtonChildren = _c.children, restCancelButtonProps = __rest(_c, ["children"]);
|
|
1431
|
-
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" }))] }) }));
|
|
1463
|
+
return (jsxRuntime.jsx("div", { className: react$1.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$1.Button, __assign({ className: "w-full md:w-auto", color: "default", variant: "flat" }, restCancelButtonProps, { children: cancelButtonChildren || "Cancel" })), jsxRuntime.jsx(react$1.Button, __assign({ className: "w-full md:w-auto", color: "primary" }, restNextButtonProps, { children: nextButtonChildren || "Next" }))] }) }));
|
|
1432
1464
|
};
|
|
1433
1465
|
|
|
1434
1466
|
var MultiStepWizard = function (_a) {
|
|
@@ -1512,7 +1544,7 @@ var MultiStepWizard = function (_a) {
|
|
|
1512
1544
|
|
|
1513
1545
|
var Pagination = function (_a) {
|
|
1514
1546
|
_a.size; var props = __rest(_a, ["size"]);
|
|
1515
|
-
return jsxRuntime.jsx(react.Pagination, __assign({ showControls: true, isCompact: true }, props));
|
|
1547
|
+
return jsxRuntime.jsx(react$1.Pagination, __assign({ showControls: true, isCompact: true }, props));
|
|
1516
1548
|
};
|
|
1517
1549
|
|
|
1518
1550
|
// Lista simple de países con bandera emoji y código
|
|
@@ -1633,7 +1665,7 @@ var Phone = function (_a) {
|
|
|
1633
1665
|
onChange({ countryCode: selectedCountry.code, phoneNumber: val });
|
|
1634
1666
|
}
|
|
1635
1667
|
};
|
|
1636
|
-
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 &&
|
|
1668
|
+
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$1.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 &&
|
|
1637
1669
|
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) {
|
|
1638
1670
|
var searchTerm = e.target.value.toLowerCase();
|
|
1639
1671
|
var filtered = uniqueCountries.filter(function (country) {
|
|
@@ -1673,12 +1705,12 @@ var PromotionalBanner = function (_a) {
|
|
|
1673
1705
|
}
|
|
1674
1706
|
var fromColor = gradientColors[0], viaColor = gradientColors[1], toColor = gradientColors[2];
|
|
1675
1707
|
var buttonGradient1 = buttonGradientColors[0], buttonGradient2 = buttonGradientColors[1];
|
|
1676
|
-
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: {
|
|
1708
|
+
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$1.Link, __assign({ className: "text-inherit", href: messageHref, onClick: handleMessageClick }, messageLinkProps, { children: [finalMessage, "\u00A0"] })) }), jsxRuntime.jsx(react$1.Button, __assign({ as: react$1.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: {
|
|
1677
1709
|
border: "solid 2px transparent",
|
|
1678
1710
|
backgroundImage: "linear-gradient(hsl(var(--heroui-danger-50)), hsl(var(--heroui-danger-50))), linear-gradient(to right, ".concat(buttonGradient1, ", ").concat(buttonGradient2, ")"),
|
|
1679
1711
|
backgroundOrigin: "border-box",
|
|
1680
1712
|
backgroundClip: "padding-box, border-box",
|
|
1681
|
-
}, 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" }) }) }))] }));
|
|
1713
|
+
}, variant: "bordered", onClick: handleButtonClick }, buttonProps, { children: finalButtonText })), showCloseButton && (jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: jsxRuntime.jsx(react$1.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" }) }) }))] }));
|
|
1682
1714
|
};
|
|
1683
1715
|
|
|
1684
1716
|
var RowSteps = React.forwardRef(function (_a, ref) {
|
|
@@ -1739,13 +1771,13 @@ var RowSteps = React.forwardRef(function (_a, ref) {
|
|
|
1739
1771
|
}
|
|
1740
1772
|
return colorsVars;
|
|
1741
1773
|
}, [color, className]);
|
|
1742
|
-
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) {
|
|
1774
|
+
return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "-my-4 max-w-fit overflow-x-auto py-4", children: jsxRuntime.jsx("ol", { className: react$1.cn("flex flex-row flex-nowrap gap-x-3", colors, className), children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
|
|
1743
1775
|
var status = currentStep === stepIdx
|
|
1744
1776
|
? "active"
|
|
1745
1777
|
: currentStep < stepIdx
|
|
1746
1778
|
? "inactive"
|
|
1747
1779
|
: "complete";
|
|
1748
|
-
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", {
|
|
1780
|
+
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$1.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$1.cn("border-medium text-large text-default-600 relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", {
|
|
1749
1781
|
"shadow-lg": status === "complete",
|
|
1750
1782
|
}), initial: false, transition: { duration: 0.25 }, variants: {
|
|
1751
1783
|
inactive: {
|
|
@@ -1762,12 +1794,12 @@ var RowSteps = React.forwardRef(function (_a, ref) {
|
|
|
1762
1794
|
backgroundColor: "var(--complete-background-color)",
|
|
1763
1795
|
borderColor: "var(--complete-border-color)",
|
|
1764
1796
|
},
|
|
1765
|
-
}, 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", {
|
|
1797
|
+
}, 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$1.cn("text-small text-default-600 lg:text-medium font-medium transition-[color,opacity] duration-300 group-active:opacity-80", {
|
|
1766
1798
|
"text-default-300": status === "inactive",
|
|
1767
1799
|
}), 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: {
|
|
1768
1800
|
// @ts-ignore
|
|
1769
1801
|
"--idx": stepIdx,
|
|
1770
|
-
}, 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-['']", {
|
|
1802
|
+
}, children: jsxRuntime.jsx("div", { className: react$1.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-['']", {
|
|
1771
1803
|
"after:w-full": stepIdx < currentStep,
|
|
1772
1804
|
}) }) }))] }), stepIdx) }, stepIdx));
|
|
1773
1805
|
}) }) }));
|
|
@@ -1938,7 +1970,7 @@ var Switch = function (_a) {
|
|
|
1938
1970
|
var id = _a.id, props = __rest(_a, ["id"]);
|
|
1939
1971
|
var generatedId = React.useId();
|
|
1940
1972
|
var autoId = id || generatedId;
|
|
1941
|
-
return jsxRuntime.jsx(react.Switch, __assign({}, props, { id: autoId }));
|
|
1973
|
+
return jsxRuntime.jsx(react$1.Switch, __assign({}, props, { id: autoId }));
|
|
1942
1974
|
};
|
|
1943
1975
|
|
|
1944
1976
|
/**
|
|
@@ -1948,7 +1980,7 @@ var TimeInput = function (_a) {
|
|
|
1948
1980
|
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"]);
|
|
1949
1981
|
var generatedId = React.useId();
|
|
1950
1982
|
var autoId = id || generatedId;
|
|
1951
|
-
return (jsxRuntime.jsx(react.TimeInput, __assign({}, props, { id: autoId, size: size, radius: radius, variant: variant, label: label, labelPlacement: "outside-left", classNames: {
|
|
1983
|
+
return (jsxRuntime.jsx(react$1.TimeInput, __assign({}, props, { id: autoId, size: size, radius: radius, variant: variant, label: label, labelPlacement: "outside-left", classNames: {
|
|
1952
1984
|
label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
|
|
1953
1985
|
inputWrapper: "focus-within:!border-primary-500",
|
|
1954
1986
|
} })));
|
|
@@ -2048,7 +2080,7 @@ var ScheduleRow = function (_a) {
|
|
|
2048
2080
|
var newTimeSlots = daySchedule.timeSlots.filter(function (_, i) { return i !== index; });
|
|
2049
2081
|
onChange(__assign(__assign({}, daySchedule), { timeSlots: newTimeSlots }));
|
|
2050
2082
|
};
|
|
2051
|
-
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));
|
|
2083
|
+
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$1.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));
|
|
2052
2084
|
};
|
|
2053
2085
|
|
|
2054
2086
|
/**
|
|
@@ -2081,7 +2113,7 @@ var Select = function (_a) {
|
|
|
2081
2113
|
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"]);
|
|
2082
2114
|
var generatedId = React.useId();
|
|
2083
2115
|
var selectId = id || generatedId;
|
|
2084
|
-
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: {
|
|
2116
|
+
return (jsxRuntime.jsx("div", { className: "group", children: jsxRuntime.jsx(react$1.Select, __assign({}, props, { id: selectId, label: label, labelPlacement: "outside", placeholder: placeholder, variant: variant, size: size, radius: radius, classNames: {
|
|
2085
2117
|
label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
|
|
2086
2118
|
trigger: "data-[open=true]:!border-primary-500 data-[focus=true]:!border-primary-500 data-[disabled=true]:bg-default-100",
|
|
2087
2119
|
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",
|
|
@@ -2090,7 +2122,7 @@ var Select = function (_a) {
|
|
|
2090
2122
|
|
|
2091
2123
|
function AuraTable(_a) {
|
|
2092
2124
|
var columns = _a.columns, items = _a.items, renderCell = _a.renderCell, children = _a.children, props = __rest(_a, ["columns", "items", "renderCell", "children"]);
|
|
2093
|
-
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)); } })] })));
|
|
2125
|
+
return (jsxRuntime.jsxs(react$1.Table, __assign({ removeWrapper: true, radius: "none" }, props, { children: [jsxRuntime.jsx(react$1.TableHeader, { columns: columns, children: function (column) { return jsxRuntime.jsx(react$1.TableColumn, { children: column.label }, column.key); } }), jsxRuntime.jsx(react$1.TableBody, { items: items, children: function (item) { return (jsxRuntime.jsx(react$1.TableRow, { children: function (columnKey) { return (jsxRuntime.jsx(react$1.TableCell, { children: renderCell ? renderCell(item, columnKey) : children })); } }, item.id)); } })] })));
|
|
2094
2126
|
}
|
|
2095
2127
|
|
|
2096
2128
|
/**
|
|
@@ -2100,7 +2132,7 @@ var Textarea = function (_a) {
|
|
|
2100
2132
|
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"]);
|
|
2101
2133
|
var generatedId = React.useId();
|
|
2102
2134
|
var autoId = id || generatedId;
|
|
2103
|
-
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: {
|
|
2135
|
+
return (jsxRuntime.jsx(react$1.Textarea, __assign({}, props, { id: autoId, label: label, variant: variant, radius: radius, size: size, labelPlacement: "outside", placeholder: placeholder, description: description, errorMessage: errorMessage, classNames: {
|
|
2104
2136
|
label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
|
|
2105
2137
|
inputWrapper: "data-[focus=true]:!border-primary-500 data-[focus=true]:!border-primary-500",
|
|
2106
2138
|
} })));
|
|
@@ -2144,9 +2176,9 @@ var ThemePicker = function (_a) {
|
|
|
2144
2176
|
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" })] })),
|
|
2145
2177
|
},
|
|
2146
2178
|
];
|
|
2147
|
-
return (jsxRuntime.jsx(react.RadioGroup, { value: value, onChange: function (e) { return onChange(e.target.value); }, className: "flex justify-center ".concat(className || ""), orientation: "horizontal", classNames: {
|
|
2179
|
+
return (jsxRuntime.jsx(react$1.RadioGroup, { value: value, onChange: function (e) { return onChange(e.target.value); }, className: "flex justify-center ".concat(className || ""), orientation: "horizontal", classNames: {
|
|
2148
2180
|
wrapper: "gap-3",
|
|
2149
|
-
}, 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)); }) }));
|
|
2181
|
+
}, 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$1.Radio, { "aria-label": theme.label, color: theme.radioColor, size: "sm", value: theme.key })] }), theme.previewContent] }, theme.key)); }) }));
|
|
2150
2182
|
};
|
|
2151
2183
|
|
|
2152
2184
|
var ToastContext = React.createContext(undefined);
|
|
@@ -2163,7 +2195,7 @@ function GlobalToast() {
|
|
|
2163
2195
|
if (!toast.isVisible) {
|
|
2164
2196
|
return null;
|
|
2165
2197
|
}
|
|
2166
|
-
return (jsxRuntime.jsx("div", { className: "fixed top-4 right-4 z-50 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 }) }));
|
|
2198
|
+
return (jsxRuntime.jsx("div", { className: "fixed top-4 right-4 z-50 w-full max-w-sm", children: jsxRuntime.jsx(react$1.Alert, { hideIconWrapper: true, color: toast.color, variant: "flat", title: toast.title, description: toast.description, isClosable: true, onClose: hideToast }) }));
|
|
2167
2199
|
}
|
|
2168
2200
|
|
|
2169
2201
|
// Traducciones por defecto en español
|
|
@@ -2440,11 +2472,11 @@ var ImageCropModal = function (_a) {
|
|
|
2440
2472
|
window.removeEventListener("resize", handleResize);
|
|
2441
2473
|
};
|
|
2442
2474
|
}, [isOpen, updateCanvasSize]);
|
|
2443
|
-
return (jsxRuntime.jsx(react.Modal, { isOpen: isOpen, onClose: onCancel, size: "5xl", className: "sm:max-w-4xl", scrollBehavior: "inside", backdrop: "blur", classNames: {
|
|
2475
|
+
return (jsxRuntime.jsx(react$1.Modal, { isOpen: isOpen, onClose: onCancel, size: "5xl", className: "sm:max-w-4xl", scrollBehavior: "inside", backdrop: "blur", classNames: {
|
|
2444
2476
|
backdrop: "bg-black/80",
|
|
2445
2477
|
wrapper: "p-0 sm:p-4",
|
|
2446
2478
|
base: "m-0 sm:m-4 max-h-screen sm:max-h-[90vh] w-full sm:w-auto",
|
|
2447
|
-
}, 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: [
|
|
2479
|
+
}, children: jsxRuntime.jsxs(react$1.ModalContent, { className: "m-0 sm:m-0 h-screen sm:h-auto sm:max-h-[90vh] sm:rounded-lg", children: [jsxRuntime.jsxs(react$1.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$1.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$1.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: [
|
|
2448
2480
|
{ value: -1, label: "Out" },
|
|
2449
2481
|
{ value: 0, label: "0" },
|
|
2450
2482
|
{ value: 1, label: "In" },
|
|
@@ -2458,7 +2490,7 @@ var ImageCropModal = function (_a) {
|
|
|
2458
2490
|
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%)",
|
|
2459
2491
|
backgroundSize: "8px 8px",
|
|
2460
2492
|
backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px",
|
|
2461
|
-
} }), 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 })] })] }) }));
|
|
2493
|
+
} }), jsxRuntime.jsx("span", { className: "text-sm", children: translations.cropBackgroundTransparent })] })] })] })] }) }), jsxRuntime.jsxs(react$1.ModalFooter, { className: "flex flex-col-reverse sm:flex-row gap-2 px-4 sm:px-6", children: [jsxRuntime.jsx(react$1.Button, { color: "danger", variant: "light", onPress: onCancel, className: "w-full sm:w-auto", children: translations.cropCancelButton }), jsxRuntime.jsx(react$1.Button, { color: "primary", onPress: handleSave, className: "w-full sm:w-auto", children: translations.cropSaveButton })] })] }) }));
|
|
2462
2494
|
};
|
|
2463
2495
|
/**
|
|
2464
2496
|
* Componente de previsualización de archivo
|
|
@@ -2476,7 +2508,7 @@ var FilePreview = function (_a) {
|
|
|
2476
2508
|
if (!(file === null || file === void 0 ? void 0 : file.type.startsWith("image/"))) {
|
|
2477
2509
|
return null;
|
|
2478
2510
|
}
|
|
2479
|
-
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" }) })] }));
|
|
2511
|
+
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$1.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" }) })] }));
|
|
2480
2512
|
};
|
|
2481
2513
|
/**
|
|
2482
2514
|
* Componente UploadDocument basado en Hero UI con funcionalidad mejorada
|
|
@@ -2655,7 +2687,7 @@ var UploadFile = function (_a) {
|
|
|
2655
2687
|
.replace(/\s+/g, " ");
|
|
2656
2688
|
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");
|
|
2657
2689
|
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");
|
|
2658
|
-
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
|
|
2690
|
+
return (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(react$1.Card, { className: containerClasses, isPressable: !(disabled || uploadImageRef.current), onPress: handleClick, children: jsxRuntime.jsxs(react$1.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
|
|
2659
2691
|
? "opacity-0"
|
|
2660
2692
|
: "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)
|
|
2661
2693
|
? acceptedFiles.join(",")
|
|
@@ -2663,17 +2695,29 @@ var UploadFile = function (_a) {
|
|
|
2663
2695
|
};
|
|
2664
2696
|
UploadFile.displayName = "UploadFile";
|
|
2665
2697
|
|
|
2698
|
+
/**
|
|
2699
|
+
* Loading overlay elegante que bloquea la interacción durante la navegación
|
|
2700
|
+
* Proporciona feedback visual moderno y no intrusivo
|
|
2701
|
+
*/
|
|
2702
|
+
var NavigationLoadingOverlay = function (_a) {
|
|
2703
|
+
var isVisible = _a.isVisible;
|
|
2704
|
+
if (!isVisible) {
|
|
2705
|
+
return null;
|
|
2706
|
+
}
|
|
2707
|
+
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$1.Spinner, { size: "lg", color: "primary", className: "drop-shadow-sm" }) })] }));
|
|
2708
|
+
};
|
|
2709
|
+
|
|
2666
2710
|
var Modal = function (props) {
|
|
2667
|
-
return (jsxRuntime.jsx(react.Modal, __assign({ shouldBlockScroll: true, radius: "lg", className: "py-9 px-6" }, props)));
|
|
2711
|
+
return (jsxRuntime.jsx(react$1.Modal, __assign({ shouldBlockScroll: true, radius: "lg", className: "py-9 px-6" }, props)));
|
|
2668
2712
|
};
|
|
2669
2713
|
|
|
2670
|
-
var ModalContent = react.ModalContent;
|
|
2714
|
+
var ModalContent = react$1.ModalContent;
|
|
2671
2715
|
|
|
2672
|
-
var ModalHeader = react.ModalHeader;
|
|
2716
|
+
var ModalHeader = react$1.ModalHeader;
|
|
2673
2717
|
|
|
2674
|
-
var ModalBody = react.ModalBody;
|
|
2718
|
+
var ModalBody = react$1.ModalBody;
|
|
2675
2719
|
|
|
2676
|
-
var ModalFooter = react.ModalFooter;
|
|
2720
|
+
var ModalFooter = react$1.ModalFooter;
|
|
2677
2721
|
|
|
2678
2722
|
var paddingClasses = {
|
|
2679
2723
|
sm: "p-4",
|
|
@@ -2694,7 +2738,7 @@ var Card = function (_a) {
|
|
|
2694
2738
|
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"]);
|
|
2695
2739
|
var paddingClass = paddingClasses[padding];
|
|
2696
2740
|
var combinedClassName = [paddingClass, className].filter(Boolean).join(" ");
|
|
2697
|
-
return (jsxRuntime.jsx(react.Card, __assign({ shadow: shadow, radius: radius, className: combinedClassName }, props, { children: children })));
|
|
2741
|
+
return (jsxRuntime.jsx(react$1.Card, __assign({ shadow: shadow, radius: radius, className: combinedClassName }, props, { children: children })));
|
|
2698
2742
|
};
|
|
2699
2743
|
|
|
2700
2744
|
/**
|
|
@@ -2776,7 +2820,7 @@ var AuraToastProvider = function (_a) {
|
|
|
2776
2820
|
title: "",
|
|
2777
2821
|
description: "",
|
|
2778
2822
|
color: "primary",
|
|
2779
|
-
duration:
|
|
2823
|
+
duration: 8000,
|
|
2780
2824
|
}), toast = _b[0], setToast = _b[1];
|
|
2781
2825
|
var timerRef = React.useRef(null);
|
|
2782
2826
|
var hideToast = React.useCallback(function () {
|
|
@@ -2805,14 +2849,45 @@ var AuraToastProvider = function (_a) {
|
|
|
2805
2849
|
}
|
|
2806
2850
|
};
|
|
2807
2851
|
}, []);
|
|
2808
|
-
return (jsxRuntime.
|
|
2852
|
+
return (jsxRuntime.jsxs(ToastContext.Provider, { value: { toast: toast, showToast: showToast, hideToast: hideToast }, children: [jsxRuntime.jsx(GlobalToast, {}), children] }));
|
|
2853
|
+
};
|
|
2854
|
+
|
|
2855
|
+
var NavigationLoadingContext = React.createContext(undefined);
|
|
2856
|
+
var useNavigationLoading = function () {
|
|
2857
|
+
var context = React.useContext(NavigationLoadingContext);
|
|
2858
|
+
if (!context) {
|
|
2859
|
+
throw new Error("useNavigationLoading must be used within a NavigationLoadingProvider");
|
|
2860
|
+
}
|
|
2861
|
+
return context;
|
|
2809
2862
|
};
|
|
2810
2863
|
|
|
2864
|
+
var NavigationLoadingProvider = function (_a) {
|
|
2865
|
+
var children = _a.children;
|
|
2866
|
+
var _b = React.useState(false), isVisible = _b[0], setIsVisible = _b[1];
|
|
2867
|
+
var showNavigationLoading = React.useCallback(function (_loadingMessage) {
|
|
2868
|
+
setIsVisible(true);
|
|
2869
|
+
}, []);
|
|
2870
|
+
var hideNavigationLoading = React.useCallback(function () {
|
|
2871
|
+
setIsVisible(false);
|
|
2872
|
+
}, []);
|
|
2873
|
+
var value = {
|
|
2874
|
+
showNavigationLoading: showNavigationLoading,
|
|
2875
|
+
hideNavigationLoading: hideNavigationLoading,
|
|
2876
|
+
isNavigationLoading: isVisible,
|
|
2877
|
+
};
|
|
2878
|
+
return (jsxRuntime.jsxs(NavigationLoadingContext.Provider, { value: value, children: [children, jsxRuntime.jsx(NavigationLoadingOverlay, { isVisible: isVisible })] }));
|
|
2879
|
+
};
|
|
2880
|
+
|
|
2881
|
+
Object.defineProperty(exports, "loadIcons", {
|
|
2882
|
+
enumerable: true,
|
|
2883
|
+
get: function () { return react.loadIcons; }
|
|
2884
|
+
});
|
|
2811
2885
|
exports.AddHolidayForm = AddHolidayForm;
|
|
2812
2886
|
exports.AnalyticsCard = AnalyticsCard;
|
|
2813
2887
|
exports.AuraAutocomplete = AuraAutocomplete;
|
|
2814
2888
|
exports.AuraTable = AuraTable;
|
|
2815
2889
|
exports.AuraToastProvider = AuraToastProvider;
|
|
2890
|
+
exports.BreadcrumbsComponent = BreadcrumbsComponent;
|
|
2816
2891
|
exports.Button = Button;
|
|
2817
2892
|
exports.Card = Card;
|
|
2818
2893
|
exports.Chip = Chip;
|
|
@@ -2835,6 +2910,9 @@ exports.ModalContent = ModalContent;
|
|
|
2835
2910
|
exports.ModalFooter = ModalFooter;
|
|
2836
2911
|
exports.ModalHeader = ModalHeader;
|
|
2837
2912
|
exports.MultiStepWizard = MultiStepWizard;
|
|
2913
|
+
exports.NavigationLoadingContext = NavigationLoadingContext;
|
|
2914
|
+
exports.NavigationLoadingOverlay = NavigationLoadingOverlay;
|
|
2915
|
+
exports.NavigationLoadingProvider = NavigationLoadingProvider;
|
|
2838
2916
|
exports.P = P;
|
|
2839
2917
|
exports.Pagination = Pagination;
|
|
2840
2918
|
exports.Phone = Phone;
|
|
@@ -2856,10 +2934,11 @@ exports.VerticalSteps = VerticalSteps;
|
|
|
2856
2934
|
exports.sizeMap = sizeMap;
|
|
2857
2935
|
exports.themeColors = themeColors;
|
|
2858
2936
|
exports.useAuraToast = useAuraToast;
|
|
2937
|
+
exports.useNavigationLoading = useNavigationLoading;
|
|
2859
2938
|
exports.useThemeContext = useThemeContext;
|
|
2860
|
-
Object.keys(react).forEach(function (k) {
|
|
2939
|
+
Object.keys(react$1).forEach(function (k) {
|
|
2861
2940
|
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
2862
2941
|
enumerable: true,
|
|
2863
|
-
get: function () { return react[k]; }
|
|
2942
|
+
get: function () { return react$1[k]; }
|
|
2864
2943
|
});
|
|
2865
2944
|
});
|