@beweco/aurora-ui 0.1.3 → 0.1.5

package/dist/index.cjs.js

@@ -46,6 +46,16 @@ function __rest(s, e) {
     return t;
 }
 
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -70,6 +80,48 @@ var AutoComplete = function (_a) {
                 } }))] }));
 };
 
+exports.HolidayType = void 0;
+(function (HolidayType) {
+    HolidayType["SingleDay"] = "singleDay";
+    HolidayType["DateRange"] = "dateRange";
+})(exports.HolidayType || (exports.HolidayType = {}));
+
+/**
+ * Botón genérico basado en HeroUI siguiendo las reglas de diseño BeweOS.
+ *
+ * Reglas aplicadas:
+ * - Variant: Solid, Bordered, Light, Flat, Faded
+ * - Size: sm, md, lg
+ * - StartContent: On, Off
+ * - isLoading: On, Off
+ * - Radius: md (por defecto)
+ * - isIconOnly: True, False
+ */
+var Button = function (_a) {
+    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"]);
+    return (jsxRuntime.jsx(react.Button, __assign({}, props, { color: color, size: size, variant: variant, radius: radius, startContent: startContent, endContent: endContent, isLoading: isLoading, isIconOnly: isIconOnly })));
+};
+
+var DatePicker = function (_a) {
+    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["label", "id", "size"]);
+    var generatedId = React.useId();
+    var autoId = id || generatedId;
+    return (jsxRuntime.jsx(react.DatePicker, __assign({ label: label, size: size, labelPlacement: "outside", classNames: {
+            label: "text-sm font-medium text-default-600",
+            segment: "focus:bg-primary-50",
+        }, id: autoId }, props)));
+};
+
+var DateRangePicker = function (_a) {
+    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["label", "id", "size"]);
+    var generatedId = React.useId();
+    var autoId = id || generatedId;
+    return (jsxRuntime.jsx(react.DateRangePicker, __assign({ label: label, size: size, labelPlacement: "outside", classNames: {
+            label: "text-sm font-medium text-default-600",
+            segment: "focus:bg-primary-50",
+        } }, props, { id: autoId })));
+};
+
 var sizeMap = {
     sm: "16px",
     md: "20px",
@@ -83,6 +135,109 @@ var IconComponent = function (_a) {
     return (jsxRuntime.jsx("span", __assign({}, nativeProps, { children: jsxRuntime.jsx(react$1.Icon, { icon: icon, width: iconSize, height: iconSize, className: className, style: style, color: color, hFlip: hFlip, vFlip: vFlip, flip: flip, rotate: rotate }) })));
 };
 
+/**
+ * Input genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
+ *
+ * Reglas aplicadas:
+ * - Variant: Bordered (por defecto)
+ * - labelPlacement: Outside
+ * - Size: sm, md, lg (configurable)
+ * - Radius configurable
+ */
+var Input = function (_a) {
+    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"]);
+    var generatedId = React.useId();
+    var inputId = id || generatedId;
+    return (jsxRuntime.jsx(react.Input, __assign({}, props, { id: inputId, label: label, labelPlacement: "outside", placeholder: placeholder, variant: variant, size: size, radius: radius, classNames: {
+            label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
+            inputWrapper: "focus-within:!border-primary-500",
+        } })));
+};
+
+var defaultTranslations$3 = {
+    addHolidayTitle: "Add holiday",
+    dayOption: "Day",
+    dateRangeOption: "Date range",
+    selectDateRangeAriaLabel: "Select date range",
+    selectDateAriaLabel: "Select date",
+    optionalTitle: "Title (optional)",
+    titlePlaceholder: "e.g., Summer vacation",
+    addButton: "Add",
+};
+var INITIAL_HOLIDAY_STATE = {
+    type: exports.HolidayType.SingleDay,
+    startDate: null,
+    endDate: null,
+    title: "",
+};
+/**
+ * A form component for adding single or date-range holidays.
+ * It includes options for setting a date or a date range, an optional title,
+ * and handles form submission and state reset.
+ * The 'Add' button is disabled until a date is selected.
+ */
+var AddHolidayForm = function (_a) {
+    var onAddHoliday = _a.onAddHoliday, translations = _a.translations, className = _a.className, radioGroupProps = _a.radioGroupProps, dateRangePickerProps = _a.dateRangePickerProps, buttonProps = _a.buttonProps;
+    var t = __assign(__assign({}, defaultTranslations$3), translations);
+    var _b = React.useState(INITIAL_HOLIDAY_STATE), newHoliday = _b[0], setNewHoliday = _b[1];
+    /**
+     * A boolean flag that determines if a date has been set.
+     * For a single day, it checks if `startDate` is not null.
+     * For a date range, it checks if both `startDate` and `endDate` are not null.
+     */
+    var isDateSet = newHoliday.type === exports.HolidayType.SingleDay
+        ? newHoliday.startDate !== null
+        : newHoliday.startDate !== null && newHoliday.endDate !== null;
+    /**
+     * Resets the form to its initial state.
+     */
+    var resetForm = React.useCallback(function () {
+        setNewHoliday(INITIAL_HOLIDAY_STATE);
+    }, []);
+    /**
+     * Handles changes to the single date picker.
+     * @param date The selected date.
+     */
+    var handleDateChange = React.useCallback(function (date) {
+        setNewHoliday(function (prev) { return (__assign(__assign({}, prev), { startDate: date, endDate: null })); });
+    }, []);
+    /**
+     * Handles changes to the date range picker.
+     * @param range The selected date range.
+     */
+    var handleDateRangeChange = React.useCallback(function (range) {
+        setNewHoliday(function (prev) {
+            var _a, _b;
+            return (__assign(__assign({}, prev), { startDate: (_a = range === null || range === void 0 ? void 0 : range.start) !== null && _a !== void 0 ? _a : null, endDate: (_b = range === null || range === void 0 ? void 0 : range.end) !== null && _b !== void 0 ? _b : null }));
+        });
+    }, []);
+    /**
+     * Handles the submission of the form.
+     * If a date is set, it calls the `onAddHoliday` callback and resets the form.
+     */
+    var handleAddHoliday = React.useCallback(function () {
+        var _a;
+        // biome-ignore lint/complexity/useSimplifiedLogicExpression: <explanation>
+        if (!isDateSet || !newHoliday.startDate) {
+            return;
+        }
+        onAddHoliday({
+            type: newHoliday.type,
+            title: newHoliday.title,
+            startDate: newHoliday.startDate.toDate("UTC"),
+            endDate: (_a = newHoliday.endDate) === null || _a === void 0 ? void 0 : _a.toDate("UTC"),
+        });
+        resetForm();
+    }, [newHoliday, onAddHoliday, resetForm, isDateSet]);
+    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) {
+                            return setNewHoliday(__assign(__assign({}, INITIAL_HOLIDAY_STATE), { type: value }));
+                        } }, 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
+                            ? { start: newHoliday.startDate, end: newHoliday.endDate }
+                            : 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) {
+                    setNewHoliday(function (prev) { return (__assign(__assign({}, prev), { title: value })); });
+                }, "aria-label": t.optionalTitle }), jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(Button, __assign({ size: "sm", fullWidth: true, variant: "flat", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:add-circle-outline" }), onPress: handleAddHoliday, isDisabled: !isDateSet }, buttonProps, { children: t.addButton })) })] }));
+};
+
 function normalizeClass(value) {
     if (typeof value === "string") {
         return value || undefined;
@@ -371,7 +526,7 @@ var Phone = function (_a) {
             onChange(selectedCountry.code + val);
         }
     };
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 w-full relative", children: [finalLabel && (jsxRuntime.jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-sm font-medium text-gray-700 dark:text-gray-200 mb-1", children: [finalLabel, " ", required && jsxRuntime.jsx("span", { className: "text-pink-600", children: "*" })] })), jsxRuntime.jsxs("div", { className: "flex items-center w-full min-h-[56px] bg-white dark:bg-gray-900 transition-colors shadow-sm border border-[#E4E4E7] dark:border-gray-700 rounded-2xl focus-within:border-blue-500 dark:focus-within:border-blue-400 ".concat(error
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 w-full relative", children: [finalLabel && (jsxRuntime.jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-tiny text-default-600 mb-1", children: [finalLabel, " ", required && jsxRuntime.jsx("span", { className: "text-pink-600", children: "*" })] })), jsxRuntime.jsxs("div", { className: "flex items-center w-full min-h-[56px] bg-white dark:bg-gray-900 transition-colors shadow-sm border border-[#E4E4E7] dark:border-gray-700 rounded-2xl focus-within:border-blue-500 dark:focus-within:border-blue-400 ".concat(error
                     ? "border-pink-500 dark:border-pink-600"
                     : "border-[#E4E4E7] dark:border-gray-700").concat(disabled ? " bg-gray-100 dark:bg-gray-800 opacity-60" : ""), children: [jsxRuntime.jsxs("div", { className: "relative ml-2", ref: dropdownRef, children: [jsxRuntime.jsxs("button", { type: "button", 
                                 ///bg-gray-100
@@ -387,6 +542,321 @@ var Phone = function (_a) {
                                                 : ""), onClick: function () { return handleCountrySelect(country); }, children: [jsxRuntime.jsx("span", { className: "mr-3 text-lg", children: country.flag }), jsxRuntime.jsx("span", { className: "flex-1 text-left dark:text-gray-100", children: country.name }), jsxRuntime.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: country.code })] }, country.code)); })) : (jsxRuntime.jsx("div", { className: "px-4 py-2 text-sm text-gray-500 dark:text-gray-400", children: t.noCountriesFound })) })] }))] }), jsxRuntime.jsx(react.Input, { type: "tel", className: "flex-1 border-none bg-transparent text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 h-10 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-xs text-pink-600 dark:text-pink-400 mt-1", children: errorText }))] }));
 };
 
+/**
+ * Select genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
+ *
+ * Reglas aplicadas:
+ * - Variant: Bordered (por defecto)
+ * - Radius: md (por defecto)
+ * - labelPlacement: Outside
+ * - Size: sm, md, lg (configurable)
+ */
+var Select = function (_a) {
+    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"]);
+    var generatedId = React.useId();
+    var selectId = id || generatedId;
+    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: {
+                label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
+                trigger: "data-[open=true]:!border-primary-500 data-[focus=true]:!border-primary-500 data-[disabled=true]:bg-default-100",
+                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",
+            } })) }));
+};
+
+function $14e0f24ef4ac5c92$export$c19a80a9721b80f6(a, b) {
+    return $14e0f24ef4ac5c92$var$timeToMs(a) - $14e0f24ef4ac5c92$var$timeToMs(b);
+}
+function $14e0f24ef4ac5c92$var$timeToMs(a) {
+    return a.hour * 3600000 + a.minute * 60000 + a.second * 1000 + a.millisecond;
+}
+
+function $735220c2d4774dd3$export$3e2544e88a25bff8(duration) {
+    let inverseDuration = {};
+    for(let key in duration)if (typeof duration[key] === 'number') inverseDuration[key] = -duration[key];
+    return inverseDuration;
+}
+function $735220c2d4774dd3$export$e5d5e1c1822b6e56(value, fields) {
+    let mutableValue = value.copy();
+    if (fields.hour != null) mutableValue.hour = fields.hour;
+    if (fields.minute != null) mutableValue.minute = fields.minute;
+    if (fields.second != null) mutableValue.second = fields.second;
+    if (fields.millisecond != null) mutableValue.millisecond = fields.millisecond;
+    $735220c2d4774dd3$export$7555de1e070510cb(mutableValue);
+    return mutableValue;
+}
+function $735220c2d4774dd3$var$balanceTime(time) {
+    time.second += Math.floor(time.millisecond / 1000);
+    time.millisecond = $735220c2d4774dd3$var$nonNegativeMod(time.millisecond, 1000);
+    time.minute += Math.floor(time.second / 60);
+    time.second = $735220c2d4774dd3$var$nonNegativeMod(time.second, 60);
+    time.hour += Math.floor(time.minute / 60);
+    time.minute = $735220c2d4774dd3$var$nonNegativeMod(time.minute, 60);
+    let days = Math.floor(time.hour / 24);
+    time.hour = $735220c2d4774dd3$var$nonNegativeMod(time.hour, 24);
+    return days;
+}
+function $735220c2d4774dd3$export$7555de1e070510cb(time) {
+    time.millisecond = Math.max(0, Math.min(time.millisecond, 1000));
+    time.second = Math.max(0, Math.min(time.second, 59));
+    time.minute = Math.max(0, Math.min(time.minute, 59));
+    time.hour = Math.max(0, Math.min(time.hour, 23));
+}
+function $735220c2d4774dd3$var$nonNegativeMod(a, b) {
+    let result = a % b;
+    if (result < 0) result += b;
+    return result;
+}
+function $735220c2d4774dd3$var$addTimeFields(time, duration) {
+    time.hour += duration.hours || 0;
+    time.minute += duration.minutes || 0;
+    time.second += duration.seconds || 0;
+    time.millisecond += duration.milliseconds || 0;
+    return $735220c2d4774dd3$var$balanceTime(time);
+}
+function $735220c2d4774dd3$export$7ed87b6bc2506470(time, duration) {
+    let res = time.copy();
+    $735220c2d4774dd3$var$addTimeFields(res, duration);
+    return res;
+}
+function $735220c2d4774dd3$export$fe34d3a381cd7501(time, duration) {
+    return $735220c2d4774dd3$export$7ed87b6bc2506470(time, $735220c2d4774dd3$export$3e2544e88a25bff8(duration));
+}
+function $735220c2d4774dd3$export$dd02b3e0007dfe28(value, field, amount, options) {
+    let mutable = value.copy();
+    switch(field){
+        case 'hour':
+            {
+                let hours = value.hour;
+                let min = 0;
+                let max = 23;
+                if ((options === null || options === void 0 ? void 0 : options.hourCycle) === 12) {
+                    let isPM = hours >= 12;
+                    min = isPM ? 12 : 0;
+                    max = isPM ? 23 : 11;
+                }
+                mutable.hour = $735220c2d4774dd3$var$cycleValue(hours, amount, min, max, options === null || options === void 0 ? void 0 : options.round);
+                break;
+            }
+        case 'minute':
+            mutable.minute = $735220c2d4774dd3$var$cycleValue(value.minute, amount, 0, 59, options === null || options === void 0 ? void 0 : options.round);
+            break;
+        case 'second':
+            mutable.second = $735220c2d4774dd3$var$cycleValue(value.second, amount, 0, 59, options === null || options === void 0 ? void 0 : options.round);
+            break;
+        case 'millisecond':
+            mutable.millisecond = $735220c2d4774dd3$var$cycleValue(value.millisecond, amount, 0, 999, options === null || options === void 0 ? void 0 : options.round);
+            break;
+        default:
+            throw new Error('Unsupported field ' + field);
+    }
+    return mutable;
+}
+function $735220c2d4774dd3$var$cycleValue(value, amount, min, max, round = false) {
+    if (round) {
+        value += Math.sign(amount);
+        if (value < min) value = max;
+        let div = Math.abs(amount);
+        if (amount > 0) value = Math.ceil(value / div) * div;
+        else value = Math.floor(value / div) * div;
+        if (value > max) value = min;
+    } else {
+        value += amount;
+        if (value < min) value = max - (min - value - 1);
+        else if (value > max) value = min + (value - max - 1);
+    }
+    return value;
+}
+
+function $fae977aafc393c5c$export$f59dee82248f5ad4(time) {
+    return `${String(time.hour).padStart(2, '0')}:${String(time.minute).padStart(2, '0')}:${String(time.second).padStart(2, '0')}${time.millisecond ? String(time.millisecond / 1000).slice(1) : ''}`;
+}
+
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) {
+        throw new TypeError("Cannot initialize the same private elements twice on an object");
+    }
+}
+
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+
+var // This prevents TypeScript from allowing other types with the same fields to match.
+// @ts-ignore
+$35ea8db9cb2ccb90$var$_type1 = /*#__PURE__*/ new WeakMap();
+class $35ea8db9cb2ccb90$export$680ea196effce5f {
+    /** Returns a copy of this time. */ copy() {
+        return new $35ea8db9cb2ccb90$export$680ea196effce5f(this.hour, this.minute, this.second, this.millisecond);
+    }
+    /** Returns a new `Time` with the given duration added to it. */ add(duration) {
+        return ($735220c2d4774dd3$export$7ed87b6bc2506470)(this, duration);
+    }
+    /** Returns a new `Time` with the given duration subtracted from it. */ subtract(duration) {
+        return ($735220c2d4774dd3$export$fe34d3a381cd7501)(this, duration);
+    }
+    /** Returns a new `Time` with the given fields set to the provided values. Other fields will be constrained accordingly. */ set(fields) {
+        return ($735220c2d4774dd3$export$e5d5e1c1822b6e56)(this, fields);
+    }
+    /**
+   * Returns a new `Time` with the given field adjusted by a specified amount.
+   * When the resulting value reaches the limits of the field, it wraps around.
+   */ cycle(field, amount, options) {
+        return ($735220c2d4774dd3$export$dd02b3e0007dfe28)(this, field, amount, options);
+    }
+    /** Converts the time to an ISO 8601 formatted string. */ toString() {
+        return ($fae977aafc393c5c$export$f59dee82248f5ad4)(this);
+    }
+    /** Compares this time with another. A negative result indicates that this time is before the given one, and a positive time indicates that it is after. */ compare(b) {
+        return ($14e0f24ef4ac5c92$export$c19a80a9721b80f6)(this, b);
+    }
+    constructor(hour = 0, minute = 0, second = 0, millisecond = 0){
+        (_class_private_field_init)(this, $35ea8db9cb2ccb90$var$_type1, {
+            writable: true,
+            value: void 0
+        });
+        this.hour = hour;
+        this.minute = minute;
+        this.second = second;
+        this.millisecond = millisecond;
+        ($735220c2d4774dd3$export$7555de1e070510cb)(this);
+    }
+}
+
+var Switch = function (_a) {
+    var id = _a.id, props = __rest(_a, ["id"]);
+    var generatedId = React.useId();
+    var autoId = id || generatedId;
+    return jsxRuntime.jsx(react.Switch, __assign({}, props, { id: autoId }));
+};
+
+/**
+ * TimeInput genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
+ */
+var TimeInput = function (_a) {
+    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"]);
+    var generatedId = React.useId();
+    var autoId = id || generatedId;
+    return (jsxRuntime.jsx(react.TimeInput, __assign({}, props, { id: autoId, size: size, radius: radius, variant: variant, label: label, labelPlacement: "outside-left", classNames: {
+            label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
+            inputWrapper: "focus-within:!border-primary-500",
+        } })));
+};
+
+/**
+ * @component ScheduleRow
+ * @description A React component for managing the schedule of a single day.
+ * It allows users to open or close the schedule, add or remove time slots,
+ * and modify the start and end times of each slot. The component is fully
+ * controlled and reports changes to the parent via the `onChange` callback.
+ *
+ * @param {ScheduleRowProps} props - The props for the component.
+ * @returns {React.ReactElement} The rendered ScheduleRow component.
+ */
+var ScheduleRow = function (_a) {
+    var day = _a.day, daySchedule = _a.daySchedule, translations = _a.translations, onChange = _a.onChange, onCopyToAll = _a.onCopyToAll;
+    /**
+     * @function validateTimeSlots
+     * @description Validates all time slots to ensure the "from" time is not after the "to" time.
+     * @param {TimeSlot[]} timeSlots - The array of time slots to validate.
+     * @returns {TimeSlot[]} The updated array of time slots with error messages if any.
+     */
+    var validateTimeSlots = function (timeSlots) {
+        return timeSlots.map(function (slot) {
+            if (slot.from && slot.to) {
+                var fromTime = new ($35ea8db9cb2ccb90$export$680ea196effce5f.bind.apply($35ea8db9cb2ccb90$export$680ea196effce5f, __spreadArray([void 0], slot.from.split(":").map(Number), false)))();
+                var toTime = new ($35ea8db9cb2ccb90$export$680ea196effce5f.bind.apply($35ea8db9cb2ccb90$export$680ea196effce5f, __spreadArray([void 0], slot.to.split(":").map(Number), false)))();
+                if (fromTime.compare(toTime) > 0) {
+                    return __assign(__assign({}, slot), { error: "From time cannot be after to time" });
+                }
+            }
+            return __assign(__assign({}, slot), { error: null });
+        });
+    };
+    /**
+     * @function toTimeValue
+     * @description Converts a time string (e.g., "09:00") to a `TimeValue` object
+     * required by the `TimeInput` component.
+     * @param {string} time - The time string to convert.
+     * @returns {TimeValue | null} The corresponding `TimeValue` object, or `null` if the input is empty.
+     */
+    var toTimeValue = function (time) {
+        if (!time) {
+            return null;
+        }
+        var _a = time.split(":").map(Number), hour = _a[0], minute = _a[1];
+        return new $35ea8db9cb2ccb90$export$680ea196effce5f(hour, minute);
+    };
+    /**
+     * @function fromTimeValue
+     * @description Converts a `TimeValue` object back to a formatted time string (e.g., "09:00").
+     * @param {TimeValue | null} time - The `TimeValue` object to convert.
+     * @returns {string} The formatted time string.
+     */
+    var fromTimeValue = function (time) {
+        if (!time) {
+            return "";
+        }
+        return "".concat(String(time.hour).padStart(2, "0"), ":").concat(String(time.minute).padStart(2, "0"));
+    };
+    /**
+     * @function handleToggleDay
+     * @description Toggles the `isOpen` status of the schedule for the day.
+     */
+    var handleToggleDay = function () {
+        onChange(__assign(__assign({}, daySchedule), { isOpen: !daySchedule.isOpen }));
+    };
+    /**
+     * @function handleTimeChange
+     * @description Updates the time for a specific time slot.
+     * @param {number} index - The index of the time slot to modify.
+     * @param {"from" | "to"} field - The field to update ("from" or "to").
+     * @param {TimeValue | null} value - The new time value from the `TimeInput` component.
+     */
+    var handleTimeChange = function (index, field, value) {
+        var _a;
+        var newTimeSlots = __spreadArray([], daySchedule.timeSlots, true);
+        newTimeSlots[index] = __assign(__assign({}, newTimeSlots[index]), (_a = {}, _a[field] = fromTimeValue(value), _a));
+        var validatedSlots = validateTimeSlots(newTimeSlots);
+        onChange(__assign(__assign({}, daySchedule), { timeSlots: validatedSlots }));
+    };
+    /**
+     * @function handleAddTimeSlot
+     * @description Adds a new, empty time slot to the schedule.
+     */
+    var handleAddTimeSlot = function () {
+        var newTimeSlots = __spreadArray(__spreadArray([], daySchedule.timeSlots, true), [{ from: "", to: "" }], false);
+        onChange(__assign(__assign({}, daySchedule), { timeSlots: newTimeSlots }));
+    };
+    /**
+     * @function handleRemoveTimeSlot
+     * @description Removes a time slot from the schedule at the specified index.
+     * @param {number} index - The index of the time slot to remove.
+     */
+    var handleRemoveTimeSlot = function (index) {
+        var newTimeSlots = daySchedule.timeSlots.filter(function (_, i) { return i !== index; });
+        onChange(__assign(__assign({}, daySchedule), { timeSlots: newTimeSlots }));
+    };
+    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));
+};
+
+function AuraTable(_a) {
+    var columns = _a.columns, items = _a.items, renderCell = _a.renderCell, children = _a.children, props = __rest(_a, ["columns", "items", "renderCell", "children"]);
+    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)); } })] })));
+}
+
+/**
+ * Textarea component that wraps the HeroUI TextArea component.
+ */
+var Textarea = function (_a) {
+    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"]);
+    var generatedId = React.useId();
+    var autoId = id || generatedId;
+    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: {
+            label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
+            inputWrapper: "data-[focus=true]:!border-primary-500 data-[focus=true]:!border-primary-500",
+        } })));
+};
+
 // Traducciones por defecto en español según las reglas de diseño
 var defaultTranslations$1 = {
     lightTheme: "Claro",
@@ -428,6 +898,46 @@ var ThemePicker = function (_a) {
     return (jsxRuntime.jsx(react.RadioGroup, { value: value, onChange: function (e) { return onChange(e.target.value); }, className: "flex gap-6 w-full ".concat(className || ""), style: { gap: 16 }, children: themes.map(function (theme) { return (jsxRuntime.jsxs("div", { className: "relative rounded-[14px] ".concat(theme.cardClass, " p-6 w-1/2 min-h-[180px] transition-all duration-200 flex flex-col justify-start"), children: [jsxRuntime.jsx("div", { className: "absolute top-6 right-6", children: jsxRuntime.jsx(react.Radio, { "aria-label": theme.label, color: theme.radioColor, size: "sm", value: theme.key }) }), jsxRuntime.jsx("span", { className: theme.labelClass, children: theme.label }), theme.previewContent] }, theme.key)); }) }));
 };
 
+var ConfigMenu = function (_a) {
+    var _b;
+    var options = _a.options, onLogout = _a.onLogout, translations = _a.translations;
+    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: {
+                                base: "text-default-500",
+                            }, 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: {
+                                base: "text-default-500",
+                            }, 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") })] })] }));
+};
+ConfigMenu.displayName = "ConfigMenu";
+
+var NotificationButton = function (_a) {
+    var _b = _a.notificationCount, notificationCount = _b === void 0 ? 0 : _b;
+    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 })) }));
+};
+NotificationButton.displayName = "NotificationButton";
+
+var HeaderComponent = function (_a) {
+    var notificationCount = _a.notificationCount, options = _a.options, onMenuClick = _a.onMenuClick, onLogout = _a.onLogout, translations = _a.translations;
+    return (jsxRuntime.jsxs("header", { className: "header__container", children: [jsxRuntime.jsx(react.Button, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick }), jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(NotificationButton, { notificationCount: notificationCount }), jsxRuntime.jsx(ConfigMenu, { options: options, onLogout: onLogout, translations: translations })] })] }));
+};
+HeaderComponent.displayName = "Header";
+
+var ToastContext = React.createContext(undefined);
+var useAuraToast = function () {
+    var context = React.useContext(ToastContext);
+    if (!context) {
+        throw new Error("useAuraToast must be used within a AuraToastProvider");
+    }
+    return context;
+};
+
+function GlobalToast() {
+    var _a = useAuraToast(), toast = _a.toast, hideToast = _a.hideToast;
+    if (!toast.isVisible) {
+        return null;
+    }
+    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 }) }));
+}
+
 // Traducciones por defecto en español
 var defaultTranslations = {
     uploadText: "Da clic y selecciona tus archivos",
@@ -904,340 +1414,777 @@ var UploadFile = function (_a) {
         onUpload([]);
     };
     // Clases CSS dinámicas usando Tailwind
-    var containerClasses = "\n\t\trelative w-full border-2 border-dashed rounded-2xl p-2 sm:p-4 lg:p-4 transition-all duration-300\n\t\t".concat(width !== "100%" ? "w-[".concat(width, "]") : "w-full", "\n\t\t").concat(height !== "auto" ? "h-[".concat(height, "]") : "min-h-[150px] sm:min-h-[180px] lg:min-h-[200px]", "\n\t\t").concat(isDragging
-        ? "border-blue-500 bg-blue-50 dark:bg-blue-950"
+    var containerClasses = "\n\t\trelative w-full border-2 border-dashed rounded-2xl p-3 transition-all duration-300 bg-red-500\n\t\t".concat(width !== "100%" ? "w-[".concat(width, "]") : "w-full", "\n\t\t").concat(height !== "auto" ? "h-[".concat(height, "]") : "min-h-28", "\n\t\t").concat(isDragging
+        ? "border-primary-500 bg-primary-50 dark:bg-primary-900"
         : error
-            ? "border-red-500 bg-red-50 dark:bg-red-950"
+            ? "border-danger-500 bg-danger-50 dark:bg-danger-950"
             : success
-                ? "border-green-500 bg-green-50 dark:bg-green-950"
+                ? "border-success-500 bg-success-50 dark:bg-success-950"
                 : disabled
                     ? "border-gray-300 bg-gray-100 dark:bg-gray-800"
-                    : "border-gray-300 hover:border-gray-400 bg-gray-50 dark:bg-gray-900", "\n\t\t").concat(!(disabled || uploadImageRef.current) ? "cursor-pointer" : "cursor-default", "\n\t\t").concat(className, "\n\t")
+                    : "border-gray-300 hover:border-gray-400 bg-primary-50 dark:bg-gray-900", "\n\t\t").concat(!(disabled || uploadImageRef.current) ? "cursor-pointer" : "cursor-default", "\n\t\t").concat(className, "\n\t")
         .trim()
         .replace(/\s+/g, " ");
-    var textClasses = "\n\t\ttext-center mb-1 sm:mb-2 text-sm sm:text-base lg:text-lg font-medium\n\t\t".concat(disabled ? "text-gray-400" : textColor || "text-gray-700 dark:text-gray-200", "\n\t");
-    var subTextClasses = "\n\t\ttext-xs sm:text-sm text-center\n\t\t".concat(disabled ? "text-gray-400" : "text-gray-500 dark:text-gray-400", "\n\t");
-    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", 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
+    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");
+    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");
+    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
                                 ? "opacity-0"
-                                : "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: "space-y-1 sm:space-y-2 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)
+                                : "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)
                                 ? acceptedFiles.join(",")
                                 : acceptedFiles, onChange: handleChange, disabled: disabled, "aria-label": t.uploadAreaAriaLabel })] }) }), error && errorText && (jsxRuntime.jsx("p", { className: "text-red-500 text-sm mt-2", role: "alert", children: errorText })), showCropModal && selectedImageUrl && cropConfig && (jsxRuntime.jsx(ImageCropModal, { isOpen: showCropModal, imageUrl: selectedImageUrl, targetWidth: cropConfig.targetWidth, targetHeight: cropConfig.targetHeight, onSave: handleCropSave, onCancel: handleCropCancel, translations: t }))] }));
 };
 UploadFile.displayName = "UploadFile";
 
-var ConfigMenu = function (_a) {
-    var _b;
-    var options = _a.options, onLogout = _a.onLogout, translations = _a.translations;
-    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-50 data-[hover=true]:text-default-700", classNames: {
-                                base: "text-default-500",
-                            }, 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-50 data-[hover=true]:text-default-700", classNames: {
-                                base: "text-default-500",
-                            }, 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") })] })] }));
-};
-ConfigMenu.displayName = "ConfigMenu";
-
-var NotificationButton = function (_a) {
-    var _b = _a.notificationCount, notificationCount = _b === void 0 ? 0 : _b;
-    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 })) }));
-};
-NotificationButton.displayName = "NotificationButton";
-
-var HeaderComponent = function (_a) {
-    var notificationCount = _a.notificationCount, options = _a.options, onMenuClick = _a.onMenuClick, onLogout = _a.onLogout, translations = _a.translations;
-    return (jsxRuntime.jsxs("header", { className: "header__container", children: [jsxRuntime.jsx(react.Button, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick }), jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(NotificationButton, { notificationCount: notificationCount }), jsxRuntime.jsx(ConfigMenu, { options: options, onLogout: onLogout, translations: translations })] })] }));
+var Pagination = function (_a) {
+    _a.size; var props = __rest(_a, ["size"]);
+    return jsxRuntime.jsx(react.Pagination, __assign({ showControls: true, isCompact: true }, props));
 };
-HeaderComponent.displayName = "Header";
 
-/**
- * Botón genérico basado en HeroUI siguiendo las reglas de diseño BeweOS.
- *
- * Reglas aplicadas:
- * - Variant: Solid, Bordered, Light, Flat, Faded
- * - Size: sm, md, lg
- * - StartContent: On, Off
- * - isLoading: On, Off
- * - Radius: md (por defecto)
- * - isIconOnly: True, False
- */
-var Button = function (_a) {
-    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"]);
-    return (jsxRuntime.jsx(react.Button, __assign({}, props, { color: color, size: size, variant: variant, radius: radius, startContent: startContent, endContent: endContent, isLoading: isLoading, isIconOnly: isIconOnly })));
+var H2 = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("h2", __assign({ className: react.cn("text-lg font-medium", className) }, props, { children: children })));
 };
 
-var paddingClasses = {
-    sm: "p-4",
-    md: "p-6",
-    lg: "p-8",
+var H3 = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("h3", __assign({ className: react.cn("text-base font-medium mb-1", className) }, props, { children: children })));
 };
 
-/**
- * Card genérica siguiendo las reglas de diseño BeweOS basada en HeroUI.
- *
- * Reglas aplicadas:
- * - Shadow: none, sm, md, lg (configurable)
- * - Radius: sm (por defecto, configurable)
- * - Padding configurable (sm, md, lg)
- * - Hereda de HeroUI Card con personalización BeweOS
- */
-var Card = function (_a) {
-    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"]);
-    var paddingClass = paddingClasses[padding];
-    var combinedClassName = [paddingClass, className].filter(Boolean).join(" ");
-    return (jsxRuntime.jsx(react.Card, __assign({ shadow: shadow, radius: radius, className: combinedClassName }, props, { children: children })));
+var H4 = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("h4", __assign({ className: react.cn("text-sm font-medium mb-1", className) }, props, { children: children })));
 };
 
-/**
- * Input genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
- *
- * Reglas aplicadas:
- * - Variant: Bordered (por defecto)
- * - labelPlacement: Outside
- * - Size: sm, md, lg (configurable)
- * - Radius configurable
- */
-var Input = function (_a) {
-    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"]);
-    var generatedId = React.useId();
-    var inputId = id || generatedId;
-    return (jsxRuntime.jsx(react.Input, __assign({}, props, { id: inputId, label: label, labelPlacement: "outside", placeholder: placeholder, variant: variant, size: size, radius: radius, classNames: {
-            label: "text-default-600 text-tiny",
-            inputWrapper: "focus-within:!border-primary-500",
-        } })));
+var P = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("p", __assign({ className: react.cn("text-sm text-default-500", className) }, props, { children: children })));
 };
 
-/**
- * Select genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
- *
- * Reglas aplicadas:
- * - Variant: Bordered (por defecto)
- * - Radius: md (por defecto)
- * - labelPlacement: Outside
- * - Size: sm, md, lg (configurable)
- */
-var Select = function (_a) {
-    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"]);
-    var generatedId = React.useId();
-    var selectId = id || generatedId;
-    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: {
-                label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
-                trigger: "data-[open=true]:!border-primary-500 data-[focus=true]:!border-primary-500",
-                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",
-            } })) }));
+var ThemeContext = React.createContext({
+    mode: "light",
+    color: "blue",
+    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
+    setMode: function () { },
+    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
+    setColor: function () { },
+});
+var useThemeContext = function () {
+    var context = React.useContext(ThemeContext);
+    if (!context) {
+        throw new Error("useThemeContext debe ser usado dentro de un ThemeProvider");
+    }
+    return context;
 };
 
 var themeColors = {
+    "blue-light": {
+        extend: "light",
+        colors: {
+            primary: {
+                "50": "#dfedfd",
+                "100": "#b3d4fa",
+                "200": "#86bbf7",
+                "300": "#59a1f4",
+                "400": "#2d88f1",
+                "500": "#006fee",
+                "600": "#005cc4",
+                "700": "#00489b",
+                "800": "#003571",
+                "900": "#002147",
+                foreground: "#fff",
+                DEFAULT: "#006fee",
+            },
+            secondary: {
+                "50": "#eee4f8",
+                "100": "#d7bfef",
+                "200": "#bf99e5",
+                "300": "#a773db",
+                "400": "#904ed2",
+                "500": "#7828c8",
+                "600": "#6321a5",
+                "700": "#4e1a82",
+                "800": "#39135f",
+                "900": "#240c3c",
+                foreground: "#fff",
+                DEFAULT: "#7828c8",
+            },
+            success: {
+                "50": "#e2f8ec",
+                "100": "#b9efd1",
+                "200": "#91e5b5",
+                "300": "#68dc9a",
+                "400": "#40d27f",
+                "500": "#17c964",
+                "600": "#13a653",
+                "700": "#0f8341",
+                "800": "#0b5f30",
+                "900": "#073c1e",
+                foreground: "#000",
+                DEFAULT: "#17c964",
+            },
+            warning: {
+                "50": "#fef4e4",
+                "100": "#fce4bd",
+                "200": "#fad497",
+                "300": "#f9c571",
+                "400": "#f7b54a",
+                "500": "#f5a524",
+                "600": "#ca881e",
+                "700": "#9f6b17",
+                "800": "#744e11",
+                "900": "#4a320b",
+                foreground: "#000",
+                DEFAULT: "#f5a524",
+            },
+            danger: {
+                "50": "#fee1eb",
+                "100": "#fbb8cf",
+                "200": "#f98eb3",
+                "300": "#f76598",
+                "400": "#f53b7c",
+                "500": "#f31260",
+                "600": "#c80f4f",
+                "700": "#9e0c3e",
+                "800": "#73092e",
+                "900": "#49051d",
+                foreground: "#000",
+                DEFAULT: "#f31260",
+            },
+            focus: "#006FEE",
+            overlay: "#000000",
+        },
+    },
+    "blue-dark": {
+        extend: "dark",
+        colors: {
+            primary: {
+                "50": "#002147",
+                "100": "#003571",
+                "200": "#00489b",
+                "300": "#005cc4",
+                "400": "#006fee",
+                "500": "#2d88f1",
+                "600": "#59a1f4",
+                "700": "#86bbf7",
+                "800": "#b3d4fa",
+                "900": "#dfedfd",
+                foreground: "#fff",
+                DEFAULT: "#006fee",
+            },
+            secondary: {
+                "50": "#240c3c",
+                "100": "#39135f",
+                "200": "#4e1a82",
+                "300": "#6321a5",
+                "400": "#7828c8",
+                "500": "#904ed2",
+                "600": "#a773db",
+                "700": "#bf99e5",
+                "800": "#d7bfef",
+                "900": "#eee4f8",
+                foreground: "#fff",
+                DEFAULT: "#7828c8",
+            },
+            success: {
+                "50": "#073c1e",
+                "100": "#0b5f30",
+                "200": "#0f8341",
+                "300": "#13a653",
+                "400": "#17c964",
+                "500": "#40d27f",
+                "600": "#68dc9a",
+                "700": "#91e5b5",
+                "800": "#b9efd1",
+                "900": "#e2f8ec",
+                foreground: "#000",
+                DEFAULT: "#17c964",
+            },
+            warning: {
+                "50": "#4a320b",
+                "100": "#744e11",
+                "200": "#9f6b17",
+                "300": "#ca881e",
+                "400": "#f5a524",
+                "500": "#f7b54a",
+                "600": "#f9c571",
+                "700": "#fad497",
+                "800": "#fce4bd",
+                "900": "#fef4e4",
+                foreground: "#000",
+                DEFAULT: "#f5a524",
+            },
+            danger: {
+                "50": "#49051d",
+                "100": "#73092e",
+                "200": "#9e0c3e",
+                "300": "#c80f4f",
+                "400": "#f31260",
+                "500": "#f53b7c",
+                "600": "#f76598",
+                "700": "#f98eb3",
+                "800": "#fbb8cf",
+                "900": "#fee1eb",
+                foreground: "#000",
+                DEFAULT: "#f31260",
+            },
+            focus: "#006FEE",
+            overlay: "#ffffff",
+        },
+    },
     "purple-light": {
         extend: "light",
         colors: {
-            background: "#ffffff",
-            foreground: "#111827",
             primary: {
-                50: "#eee4f8",
-                100: "#d7bfef",
-                200: "#bf99e5",
-                300: "#a773db",
-                400: "#904ed2",
-                500: "#7828c8",
-                600: "#6321a5",
-                700: "#4e1a82",
-                800: "#39135f",
-                900: "#240c3c",
+                "50": "#eee4f8",
+                "100": "#d7bfef",
+                "200": "#bf99e5",
+                "300": "#a773db",
+                "400": "#904ed2",
+                "500": "#7828c8",
+                "600": "#6321a5",
+                "700": "#4e1a82",
+                "800": "#39135f",
+                "900": "#240c3c",
+                foreground: "#fff",
                 DEFAULT: "#7828c8",
-                foreground: "#ffffff",
             },
-            focus: "#904ed2",
+            secondary: {
+                "50": "#dfedfd",
+                "100": "#b3d4fa",
+                "200": "#86bbf7",
+                "300": "#59a1f4",
+                "400": "#2d88f1",
+                "500": "#006fee",
+                "600": "#005cc4",
+                "700": "#00489b",
+                "800": "#003571",
+                "900": "#002147",
+                foreground: "#fff",
+                DEFAULT: "#006fee",
+            },
+            focus: "#7828c8",
+            overlay: "#000000",
         },
     },
     "purple-dark": {
         extend: "dark",
         colors: {
-            background: "#1A1023",
-            foreground: "#ffffff",
             primary: {
-                50: "#2c193f",
-                100: "#462764",
-                200: "#603689",
-                300: "#7944ae",
-                400: "#9353d3",
-                500: "#a671db",
-                600: "#b98fe2",
-                700: "#ccadee",
-                800: "#dfcbf2",
-                900: "#f2eafa",
+                "50": "#2c193f",
+                "100": "#462764",
+                "200": "#603689",
+                "300": "#7944ae",
+                "400": "#9353d3",
+                "500": "#a671db",
+                "600": "#b98fe2",
+                "700": "#ccadea",
+                "800": "#dfcbf2",
+                "900": "#f2eafa",
+                foreground: "#fff",
                 DEFAULT: "#9353d3",
-                foreground: "#ffffff",
             },
-            focus: "#a671db",
+            secondary: {
+                "50": "#1e254d",
+                "100": "#2f3a79",
+                "200": "#404fa6",
+                "300": "#5265d2",
+                "400": "#637aff",
+                "500": "#7e91ff",
+                "600": "#9aa9ff",
+                "700": "#b5c0ff",
+                "800": "#d0d7ff",
+                "900": "#eceeff",
+                foreground: "#000",
+                DEFAULT: "#637aff",
+            },
+            focus: "#9353d3",
         },
     },
-    "green-light": {
+    "yellow-light": {
         extend: "light",
         colors: {
-            background: "#ffffff",
-            foreground: "#111827",
             primary: {
-                50: "#ecf9f0",
-                100: "#d1f0dc",
-                200: "#b6e7c7",
-                300: "#9cdeb3",
-                400: "#81d59e",
-                500: "#66cc8a",
-                600: "#54a872",
-                700: "#42855a",
-                800: "#306142",
-                900: "#1f3d29",
-                DEFAULT: "#66cc8a",
-                foreground: "#000000",
+                "50": "#fffbe6",
+                "100": "#FFFACD",
+                "200": "#FFF39B",
+                "300": "#FFEB69",
+                "400": "#FFE243",
+                "500": "#FFD505",
+                "600": "#DBB303",
+                "700": "#B79202",
+                "800": "#937301",
+                "900": "#7A5D00",
+                foreground: "#000",
+                DEFAULT: "#FFD505",
+            },
+            secondary: {
+                "50": "#F3F7FD",
+                "100": "#D1DFFB",
+                "200": "#A5BEF7",
+                "300": "#7494E7",
+                "400": "#4E6FCF",
+                "500": "#1E40AF",
+                "600": "#153096",
+                "700": "#0F237D",
+                "800": "#091865",
+                "900": "#051053",
+                foreground: "#fff",
+                DEFAULT: "#1E40AF",
             },
-            focus: "#81d59e",
+            focus: "#FFD505",
+            overlay: "#000000",
         },
     },
-    "green-dark": {
+    "yellow-dark": {
         extend: "dark",
         colors: {
-            background: "#0F1D15",
-            foreground: "#ffffff",
             primary: {
-                50: "#1f3d29",
-                100: "#306142",
-                200: "#42855a",
-                300: "#54a872",
-                400: "#66cc8a",
-                500: "#81d59e",
-                600: "#9cdeb3",
-                700: "#b6e7c7",
-                800: "#d1f0dc",
-                900: "#ecf9f0",
-                DEFAULT: "#66cc8a",
-                foreground: "#000000",
+                "50": "#7A5D00",
+                "100": "#937301",
+                "200": "#B79202",
+                "300": "#DBB303",
+                "400": "#FFD505",
+                "500": "#FFE243",
+                "600": "#FFEB69",
+                "700": "#FFF39B",
+                "800": "#FFFACD",
+                "900": "#fffbe6",
+                foreground: "#000",
+                DEFAULT: "#FFD505",
+            },
+            secondary: {
+                50: "#e1efff",
+                100: "#b2d0ff",
+                200: "#83b1fc",
+                300: "#5292f8",
+                400: "#2473f5",
+                500: "#0a5adb",
+                600: "#0246ac",
+                700: "#00327c",
+                800: "#001e4d",
+                900: "#000a1f",
+                foreground: "#fff",
+                DEFAULT: "#0a5adb",
             },
-            focus: "#81d59e",
+            focus: "#FFD505",
+            overlay: "#ffffff",
         },
     },
-    "blue-light": {
+    "coral-light": {
         extend: "light",
         colors: {
-            background: "#ffffff",
-            foreground: "#111827",
             primary: {
-                50: "#eff6ff",
-                100: "#dbeafe",
-                200: "#bfdbfe",
-                300: "#93c5fd",
-                400: "#60a5fa",
-                500: "#3b82f6",
-                600: "#2563eb",
-                700: "#1d4ed8",
-                800: "#1e40af",
-                900: "#1e3a8a",
-                DEFAULT: "#3b82f6",
-                foreground: "#ffffff",
+                "50": "#ffe9e9",
+                "100": "#ffcaca",
+                "200": "#ffabab",
+                "300": "#ff8d8d",
+                "400": "#ff6e6e",
+                "500": "#ff4f4f",
+                "600": "#d24141",
+                "700": "#a63333",
+                "800": "#792626",
+                "900": "#4d1818",
+                foreground: "#000",
+                DEFAULT: "#ff4f4f",
             },
-            focus: "#60a5fa",
+            focus: "#ff4f4f",
         },
     },
-    "blue-dark": {
+    "coral-dark": {
         extend: "dark",
         colors: {
-            background: "#101d3a",
-            foreground: "#ffffff",
             primary: {
-                50: "#1e3a8a",
-                100: "#1e40af",
-                200: "#1d4ed8",
-                300: "#2563eb",
-                400: "#3b82f6",
-                500: "#60a5fa",
-                600: "#93c5fd",
-                700: "#bfdbfe",
-                800: "#dbeafe",
-                900: "#eff6ff",
-                DEFAULT: "#3b82f6",
-                foreground: "#ffffff",
+                "50": "#4d1818",
+                "100": "#792626",
+                "200": "#a63333",
+                "300": "#d24141",
+                "400": "#ff4f4f",
+                "500": "#ff6e6e",
+                "600": "#ff8d8d",
+                "700": "#ffabab",
+                "800": "#ffcaca",
+                "900": "#ffe9e9",
+                foreground: "#000",
+                DEFAULT: "#ff4f4f",
             },
-            focus: "#60a5fa",
+            focus: "#ff4f4f",
         },
     },
-    "yellow-light": {
+    "green-light": {
         extend: "light",
         colors: {
-            background: "#ffffff",
-            foreground: "#111827",
             primary: {
-                50: "#fefce8",
-                100: "#fef9c3",
-                200: "#fef08a",
-                300: "#fde047",
-                400: "#facc15",
-                500: "#eab308",
-                600: "#ca8a04",
-                700: "#a16207",
-                800: "#854d0e",
-                900: "#713f12",
-                DEFAULT: "#eab308",
-                foreground: "#111827",
+                50: "#EFFFEF",
+                100: "#CFFCD1",
+                200: "#A0F9AC",
+                300: "#6FEE8D",
+                400: "#49DE7B",
+                500: "#16C964",
+                600: "#10AC64",
+                700: "#0B905F",
+                800: "#077457",
+                900: "#046051",
+                foreground: "#000",
+                DEFAULT: "#16C964",
+            },
+            secondary: {
+                "50": "#e3eaff",
+                "100": "#D7DFFE",
+                "200": "#AFBFFE",
+                "300": "#889DFD",
+                "400": "#6A82FB",
+                "500": "#3956F9",
+                "600": "#2941D6",
+                "700": "#1C2EB3",
+                "800": "#121F90",
+                "900": "#0A1477",
+                foreground: "#fff",
+                DEFAULT: "#3956F9",
+            },
+            success: {
+                "50": "#e7fde3",
+                "100": "#E8FCD3",
+                "200": "#CBFAA8",
+                "300": "#A4F17B",
+                "400": "#7EE358",
+                "500": "#49D127",
+                "600": "#2FB31C",
+                "700": "#1A9613",
+                "800": "#0C790E",
+                "900": "#076410",
+                foreground: "#000",
+                DEFAULT: "#49D127",
             },
-            focus: "#facc15",
+            warning: {
+                "50": "#fff9da",
+                "100": "#FFF7CC",
+                "200": "#FFEE99",
+                "300": "#FFE266",
+                "400": "#FFD63F",
+                "500": "#FFC300",
+                "600": "#DBA200",
+                "700": "#B78300",
+                "800": "#936600",
+                "900": "#7A5100",
+                foreground: "#000",
+                DEFAULT: "#FFC300",
+            },
+            danger: {
+                "50": "#ffe2e5",
+                "100": "#FFE3D8",
+                "200": "#FFC1B2",
+                "300": "#FF988B",
+                "400": "#FF726F",
+                "500": "#FF3F4C",
+                "600": "#DB2E49",
+                "700": "#B71F45",
+                "800": "#93143F",
+                "900": "#7A0C3B",
+                foreground: "#000",
+                DEFAULT: "#FF3F4C",
+            },
+            focus: "#66cc8a",
+            overlay: "#000000",
         },
     },
-    "yellow-dark": {
+    "green-dark": {
         extend: "dark",
         colors: {
-            background: "#18181b",
-            foreground: "#ffffff",
             primary: {
-                50: "#713f12",
-                100: "#854d0e",
-                200: "#a16207",
-                300: "#ca8a04",
-                400: "#eab308",
-                500: "#facc15",
-                600: "#fde047",
-                700: "#fef08a",
-                800: "#fef9c3",
-                900: "#fefce8",
-                DEFAULT: "#facc15",
-                foreground: "#18181b",
+                50: "#EFFFEF",
+                100: "#CFFCD1",
+                200: "#A0F9AC",
+                300: "#6FEE8D",
+                400: "#49DE7B",
+                500: "#16C964",
+                600: "#10AC64",
+                700: "#0B905F",
+                800: "#077457",
+                900: "#046051",
+                foreground: "#000",
+                DEFAULT: "#16C964",
+            },
+            secondary: {
+                "50": "#e3eaff",
+                "100": "#D7DFFE",
+                "200": "#AFBFFE",
+                "300": "#889DFD",
+                "400": "#6A82FB",
+                "500": "#3956F9",
+                "600": "#2941D6",
+                "700": "#1C2EB3",
+                "800": "#121F90",
+                "900": "#0A1477",
+                foreground: "#fff",
+                DEFAULT: "#3956F9",
+            },
+            success: {
+                "50": "#e7fde3",
+                "100": "#E8FCD3",
+                "200": "#CBFAA8",
+                "300": "#A4F17B",
+                "400": "#7EE358",
+                "500": "#49D127",
+                "600": "#2FB31C",
+                "700": "#1A9613",
+                "800": "#0C790E",
+                "900": "#076410",
+                foreground: "#000",
+                DEFAULT: "#49D127",
             },
-            focus: "#eab308",
+            warning: {
+                "50": "#fff9da",
+                "100": "#FFF7CC",
+                "200": "#FFEE99",
+                "300": "#FFE266",
+                "400": "#FFD63F",
+                "500": "#FFC300",
+                "600": "#DBA200",
+                "700": "#B78300",
+                "800": "#936600",
+                "900": "#7A5100",
+                foreground: "#000",
+                DEFAULT: "#FFC300",
+            },
+            danger: {
+                "50": "#ffe2e5",
+                "100": "#FFE3D8",
+                "200": "#FFC1B2",
+                "300": "#FF988B",
+                "400": "#FF726F",
+                "500": "#FF3F4C",
+                "600": "#DB2E49",
+                "700": "#B71F45",
+                "800": "#93143F",
+                "900": "#7A0C3B",
+                foreground: "#fff",
+                DEFAULT: "#FF3F4C",
+            },
+            focus: "#66cc8a",
+            overlay: "#ffffff",
         },
     },
 };
 
-var ThemeContext = React.createContext({
-    theme: "light",
-    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
-    setTheme: function () { },
-});
-var useThemeContext = function () {
-    var context = React.useContext(ThemeContext);
-    if (!context) {
-        throw new Error("useThemeContext debe ser usado dentro de un ThemeProvider");
-    }
-    return context;
+var ColorSelector = function (_a) {
+    var selectedColor = _a.selectedColor, onColorChange = _a.onColorChange;
+    var mode = useThemeContext().mode;
+    /**
+     * Filters and maps the available theme colors to the current theme mode (light/dark).
+     * Each color option contains:
+     * - value: the theme name (e.g., "blue-light")
+     * - label: the base color name (e.g., "blue")
+     * - color: the primary color hex value
+     */
+    var colorOptions = Object.entries(themeColors)
+        .filter(function (_a) {
+        var themeData = _a[1];
+        var themeMode = themeData.extend;
+        return mode === "light" ? themeMode === "light" : themeMode === "dark";
+    })
+        .map(function (_a) {
+        var themeName = _a[0], theme = _a[1];
+        return ({
+            value: themeName,
+            label: themeName.split("-")[0],
+            color: theme.colors.primary.DEFAULT,
+        });
+    });
+    return (jsxRuntime.jsx(react.RadioGroup, { value: selectedColor, onValueChange: onColorChange, orientation: "horizontal", className: "flex flex-wrap !gap-2", classNames: {
+            base: "flex flex-wrap !gap-2",
+            wrapper: "flex flex-wrap !gap-2",
+        }, children: colorOptions.map(function (color) { return (jsxRuntime.jsx(react.Radio, { value: color.label, className: "p-0 m-0", classNames: {
+                base: "p-0 m-0",
+                wrapper: "hidden",
+                labelWrapper: "p-0 m-0",
+            }, children: jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full border-2 cursor-pointer transition-all ".concat(selectedColor === color.label
+                    ? "border-black border-opacity-20 scale-110"
+                    : "border-gray-200 hover:scale-105"), style: { backgroundColor: color.color }, title: color.label }) }, color.value)); }) }));
+};
+
+var Modal = function (props) {
+    return (jsxRuntime.jsx(react.Modal, __assign({ shouldBlockScroll: true, radius: "lg", className: "py-9 px-6" }, props)));
 };
 
+var ModalContent = react.ModalContent;
+
+var ModalHeader = react.ModalHeader;
+
+var ModalBody = react.ModalBody;
+
+var ModalFooter = react.ModalFooter;
+
+var paddingClasses = {
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8",
+};
+
+/**
+ * Card genérica siguiendo las reglas de diseño BeweOS basada en HeroUI.
+ *
+ * Reglas aplicadas:
+ * - Shadow: none, sm, md, lg (configurable)
+ * - Radius: sm (por defecto, configurable)
+ * - Padding configurable (sm, md, lg)
+ * - Hereda de HeroUI Card con personalización BeweOS
+ */
+var Card = function (_a) {
+    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"]);
+    var paddingClass = paddingClasses[padding];
+    var combinedClassName = [paddingClass, className].filter(Boolean).join(" ");
+    return (jsxRuntime.jsx(react.Card, __assign({ shadow: shadow, radius: radius, className: combinedClassName }, props, { children: children })));
+};
+
+/**
+ * @file This file contains the theme configurations for the application.
+ */
+var ALL_THEMES = __spreadArray(["light", "dark"], Object.keys(themeColors), true);
+
+/**
+ * Custom hook to manage the theme state and side effects.
+ * @returns An object with the current mode, color, and functions to set them.
+ */
+var useThemeManager = function () {
+    var _a = useTheme.useTheme(), rawTheme = _a.theme, setRawTheme = _a.setTheme;
+    var setTheme = React.useCallback(function (theme) {
+        var _a;
+        var html = document.documentElement;
+        (_a = html.classList).remove.apply(_a, ALL_THEMES);
+        setRawTheme(theme);
+    }, [setRawTheme]);
+    React.useEffect(function () {
+        var _a;
+        var html = document.documentElement;
+        (_a = html.classList).remove.apply(_a, ALL_THEMES);
+        html.classList.add(rawTheme);
+    }, [rawTheme]);
+    var _b = React.useMemo(function () {
+        var parts = rawTheme.split("-");
+        var parsedColor = "blue";
+        var parsedMode = "light";
+        if (parts.length === 2) {
+            var colorPart = parts[0], modePart = parts[1];
+            parsedColor = colorPart;
+            parsedMode = modePart;
+        }
+        else if (rawTheme === "light" || rawTheme === "dark") {
+            parsedMode = rawTheme;
+        }
+        return { mode: parsedMode, color: parsedColor };
+    }, [rawTheme]), mode = _b.mode, color = _b.color;
+    var setMode = React.useCallback(function (newMode) {
+        var newTheme = color === "blue" ? newMode : "".concat(color, "-").concat(newMode);
+        setTheme(newTheme);
+    }, [color, setTheme]);
+    var setColor = React.useCallback(function (newColor) {
+        var newTheme = newColor === "blue" ? mode : "".concat(newColor, "-").concat(mode);
+        setTheme(newTheme);
+    }, [mode, setTheme]);
+    return {
+        mode: mode,
+        color: color,
+        setMode: setMode,
+        setColor: setColor,
+    };
+};
+
+/**
+ * The ThemeProvider component is a wrapper that provides theme context to its children.
+ * It uses the useThemeManager hook to manage the theme state and provides the current
+ * theme mode and color, along with functions to update them, to its children.
+ *
+ * @param {IThemeProvider} { children }
+ * @returns {JSX.Element}
+ */
 var ThemeProvider = function (_a) {
     var children = _a.children;
-    var _b = useTheme.useTheme(), theme = _b.theme, setTheme = _b.setTheme;
-    return (jsxRuntime.jsx(ThemeContext.Provider, { value: { theme: theme, setTheme: setTheme }, children: jsxRuntime.jsx("main", { className: "".concat(theme, " bg-background text-foreground "), children: children }) }));
+    var _b = useThemeManager(), mode = _b.mode, color = _b.color, setMode = _b.setMode, setColor = _b.setColor;
+    return (jsxRuntime.jsx(ThemeContext.Provider, { value: {
+            mode: mode,
+            color: color,
+            setMode: setMode,
+            setColor: setColor,
+        }, children: children }));
+};
+
+var AuraToastProvider = function (_a) {
+    var children = _a.children;
+    var _b = React.useState({
+        isVisible: false,
+        title: "",
+        description: "",
+        color: "primary",
+        duration: 3000,
+    }), toast = _b[0], setToast = _b[1];
+    var timerRef = React.useRef(null);
+    var hideToast = React.useCallback(function () {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        setToast(function (currentToast) { return (__assign(__assign({}, currentToast), { isVisible: false })); });
+    }, []);
+    var showToast = React.useCallback(function (options) {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        setToast(__assign({ isVisible: true }, options));
+        var duration = options.duration === undefined ? 3000 : options.duration;
+        if (duration > 0) {
+            timerRef.current = setTimeout(function () {
+                hideToast();
+            }, duration);
+        }
+    }, [hideToast]);
+    React.useEffect(function () {
+        return function () {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, []);
+    return (jsxRuntime.jsx(ToastContext.Provider, { value: { toast: toast, showToast: showToast, hideToast: hideToast }, children: children }));
 };
 
+exports.AddHolidayForm = AddHolidayForm;
+exports.AuraTable = AuraTable;
+exports.AuraToastProvider = AuraToastProvider;
 exports.AutoComplete = AutoComplete;
 exports.Button = Button;
 exports.Card = Card;
+exports.ColorSelector = ColorSelector;
+exports.DatePicker = DatePicker;
+exports.DateRangePicker = DateRangePicker;
+exports.GlobalToast = GlobalToast;
+exports.H2 = H2;
+exports.H3 = H3;
+exports.H4 = H4;
 exports.HeaderComponent = HeaderComponent;
 exports.IconComponent = IconComponent;
 exports.Input = Input;
 exports.MenuComponent = MenuComponent;
+exports.Modal = Modal;
+exports.ModalBody = ModalBody;
+exports.ModalContent = ModalContent;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
+exports.P = P;
+exports.Pagination = Pagination;
 exports.Phone = Phone;
+exports.ScheduleRow = ScheduleRow;
 exports.Select = Select;
+exports.SwitchComponent = Switch;
+exports.Textarea = Textarea;
 exports.ThemeContext = ThemeContext;
 exports.ThemePicker = ThemePicker;
 exports.ThemeProvider = ThemeProvider;
+exports.TimeInputComponent = TimeInput;
+exports.ToastContext = ToastContext;
 exports.UploadFile = UploadFile;
 exports.sizeMap = sizeMap;
 exports.themeColors = themeColors;
+exports.useAuraToast = useAuraToast;
 exports.useThemeContext = useThemeContext;
 Object.keys(react).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {