@beweco/aurora-ui 0.1.16 → 0.1.19

package/dist/index.cjs.js

@@ -139,7 +139,7 @@ var Input = function (_a) {
         } })));
 };
 
-var defaultTranslations$7 = {
+var defaultTranslations$8 = {
     addHolidayTitle: "Add holiday",
     dayOption: "Day",
     dateRangeOption: "Date range",
@@ -163,7 +163,7 @@ var INITIAL_HOLIDAY_STATE = {
  */
 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$7), translations);
+    var t = __assign(__assign({}, defaultTranslations$8), 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.
@@ -233,7 +233,7 @@ var P = function (_a) {
     return (jsxRuntime.jsx("p", __assign({ className: react.cn("text-tiny text-default-500 font-normal", className) }, props, { children: children })));
 };
 
-var defaultTranslations$6 = {
+var defaultTranslations$7 = {
     title: "Analytics",
     description: "Monthly growth of your metrics during the selected period",
     viewDetails: "View Details",
@@ -287,7 +287,7 @@ var formatMonth = function (month) {
 var AnalyticsCard = function (_a) {
     var _b, _c;
     var data = _a.data, _d = _a.showTimePeriods, showTimePeriods = _d === void 0 ? true : _d, _e = _a.showDropdownMenu, showDropdownMenu = _e === void 0 ? true : _e, _f = _a.showMetricCards, showMetricCards = _f === void 0 ? true : _f, onChartChange = _a.onChartChange, onMenuAction = _a.onMenuAction, onTimePeriodChange = _a.onTimePeriodChange, _g = _a.translations, translations = _g === void 0 ? {} : _g, props = __rest(_a, ["data", "showTimePeriods", "showDropdownMenu", "showMetricCards", "onChartChange", "onMenuAction", "onTimePeriodChange", "translations"]);
-    var t = __assign(__assign({}, defaultTranslations$6), translations);
+    var t = __assign(__assign({}, defaultTranslations$7), translations);
     var _h = React.useState((_c = (_b = data[0]) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : ""), activeChart = _h[0], setActiveChart = _h[1];
     var activeChartData = React.useMemo(function () {
         var _a;
@@ -952,7 +952,7 @@ var Chip = function (_a) {
 };
 
 // Traducciones por defecto en español
-var defaultTranslations$5 = {
+var defaultTranslations$6 = {
     dayOption: "Día específico",
     dateRangeOption: "Rango de fechas",
     selectDateAriaLabel: "Seleccionar fecha",
@@ -970,7 +970,7 @@ var DateSelector = function (_a) {
     var _f = React.useState(initialDate || null), date = _f[0], setDate = _f[1];
     var _g = React.useState(initialDateRange || null), dateRange = _g[0], setDateRange = _g[1];
     // Combinar traducciones por defecto con las proporcionadas
-    var t = __assign(__assign({}, defaultTranslations$5), translations);
+    var t = __assign(__assign({}, defaultTranslations$6), translations);
     var handleTypeChange = function (value) {
         var newType = value;
         setType(newType);
@@ -1337,13 +1337,13 @@ function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange
     ];
 }
 
-var defaultTranslations$4 = {
+var defaultTranslations$5 = {
     checkIconTitle: "Check",
 };
 var VerticalSteps = React.forwardRef(function (_a, ref) {
     var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, stepClassName = _a.stepClassName, className = _a.className, translations = _a.translations, props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "stepClassName", "className", "translations"]);
     var _f = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _f[0], setCurrentStep = _f[1];
-    var t = __assign(__assign({}, defaultTranslations$4), translations);
+    var t = __assign(__assign({}, defaultTranslations$5), translations);
     var steps = React.useMemo(function () {
         if (typeof stepsProp === "number") {
             return Array.from({ length: stepsProp }, function () { return ({}); });
@@ -1592,7 +1592,7 @@ var countries = [
 ];
 var uniqueCountries = Array.from(new Map(countries.map(function (item) { return [item.code + item.name, item]; })).values());
 // Traducciones por defecto
-var defaultTranslations$3 = {
+var defaultTranslations$4 = {
     label: "Teléfono",
     placeholder: "Número de teléfono",
     searchPlaceholder: "Buscar país...",
@@ -1610,7 +1610,7 @@ var Phone = function (_a) {
     var portalDropdownRef = React.useRef(null);
     var _l = React.useState({}), dropdownPosition = _l[0], setDropdownPosition = _l[1];
     var _m = React.useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
-    var t = __assign(__assign({}, defaultTranslations$3), translations);
+    var t = __assign(__assign({}, defaultTranslations$4), translations);
     var finalLabel = label || t.label;
     React.useEffect(function () {
         if (value) {
@@ -1689,7 +1689,7 @@ 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 text-default-500", children: country.name }), jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: country.code })] }, country.code)); })) : (jsxRuntime.jsx("div", { className: "px-4 py-2 text-sm text-default-500", children: t.noCountriesFound })) })] }), document.body)] }));
 };
 
-var defaultTranslations$2 = {
+var defaultTranslations$3 = {
     message: "The Winter 2024 Release is here: new editor, analytics API, and so much more.",
     buttonText: "Explore",
     closeButtonLabel: "Close Banner",
@@ -1699,7 +1699,7 @@ var defaultTranslations$2 = {
  */
 var PromotionalBanner = function (_a) {
     var message = _a.message, buttonText = _a.buttonText, _b = _a.messageHref, messageHref = _b === void 0 ? "#" : _b, _c = _a.buttonHref, buttonHref = _c === void 0 ? "#" : _c, _d = _a.showCloseButton, showCloseButton = _d === void 0 ? true : _d, _e = _a.isVisible, isVisible = _e === void 0 ? true : _e, _f = _a.gradientColors, gradientColors = _f === void 0 ? ["default-100", "danger-100", "secondary-100"] : _f, _g = _a.buttonGradientColors, buttonGradientColors = _g === void 0 ? ["#F871A0", "#9353D3"] : _g, onClose = _a.onClose, onMessageClick = _a.onMessageClick, onButtonClick = _a.onButtonClick, _h = _a.messageLinkProps, messageLinkProps = _h === void 0 ? {} : _h, _j = _a.buttonProps, buttonProps = _j === void 0 ? {} : _j, _k = _a.translations, translations = _k === void 0 ? {} : _k;
-    var t = __assign(__assign({}, defaultTranslations$2), translations);
+    var t = __assign(__assign({}, defaultTranslations$3), translations);
     var finalMessage = message || t.message;
     var finalButtonText = buttonText || t.buttonText;
     var handleClose = function () {
@@ -1997,6 +1997,52 @@ var TimeInput = function (_a) {
         } })));
 };
 
+/**
+ * @file schedule-row.constants.ts
+ * @description Default translations for the ScheduleRow component.
+ * These translations are used when no custom translations are provided via props.
+ * The component supports full internationalization by overriding these defaults.
+ */
+/**
+ * @constant defaultTranslations
+ * @description Default translations in Spanish for the ScheduleRow component.
+ * These can be overridden by passing a `translations` prop to the component.
+ *
+ * @example
+ * ```tsx
+ * // Using default Spanish translations
+ * <ScheduleRow day="Lunes" daySchedule={...} />
+ *
+ * // Overriding with English translations
+ * <ScheduleRow
+ *   day="Monday"
+ *   daySchedule={...}
+ *   translations={{
+ *     from: "From",
+ *     to: "To",
+ *     open: "Open",
+ *     closed: "Closed",
+ *     copyToAll: "Copy to all",
+ *     addTimeSlot: "Add time slot"
+ *   }}
+ * />
+ * ```
+ */
+var defaultTranslations$2 = {
+    /** Label for the start time input field */
+    from: "Desde",
+    /** Label for the end time input field */
+    to: "Hasta",
+    /** Label shown when the day is active/open */
+    open: "Abierto",
+    /** Label shown when the day is inactive/closed */
+    closed: "Cerrado",
+    /** Label for the button that copies schedule to all days */
+    copyToAll: "Copiar a todos",
+    /** Label for the button that adds a new time slot */
+    addTimeSlot: "Agregar horario",
+};
+
 /**
  * @component ScheduleRow
  * @description A React component for managing the schedule of a single day.
@@ -2004,11 +2050,43 @@ var TimeInput = function (_a) {
  * 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.
  *
+ * Features:
+ * - Toggle day open/closed status
+ * - Add multiple time slots per day
+ * - Edit start (from) and end (to) times for each slot
+ * - Remove time slots (with minimum of one slot)
+ * - Automatic validation to prevent invalid time ranges (from > to)
+ * - Copy schedule to all days functionality
+ * - Always displays an empty slot for adding new times
+ * - Internationalization support via translations prop
+ *
+ * @example
+ * ```tsx
+ * <ScheduleRow
+ *   day="Monday"
+ *   daySchedule={{
+ *     isOpen: true,
+ *     timeSlots: [{ from: "09:00", to: "17:00" }]
+ *   }}
+ *   translations={{
+ *     from: "From",
+ *     to: "To",
+ *     open: "Open",
+ *     closed: "Closed",
+ *     copyToAll: "Copy to all",
+ *     addTimeSlot: "Add time slot"
+ *   }}
+ *   onChange={(newSchedule) => console.log(newSchedule)}
+ *   onCopyToAll={(day) => console.log(`Copy from ${day}`)}
+ * />
+ * ```
+ *
  * @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;
+    var day = _a.day, daySchedule = _a.daySchedule, _b = _a.translations, translations = _b === void 0 ? {} : _b, onChange = _a.onChange, onCopyToAll = _a.onCopyToAll;
+    var t = __assign(__assign({}, defaultTranslations$2), translations);
     /**
      * @function validateTimeSlots
      * @description Validates all time slots to ensure the "from" time is not after the "to" time.
@@ -2070,28 +2148,58 @@ var ScheduleRow = function (_a) {
     var handleTimeChange = function (index, field, value) {
         var _a;
         var newTimeSlots = __spreadArray([], daySchedule.timeSlots, true);
+        // Update the specific field
         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.
+     * @description Adds a new empty time slot when the + button is clicked.
+     * The button is only enabled when the last slot is filled, so no validation needed here.
      */
     var handleAddTimeSlot = function () {
+        // Add a new empty slot
         var newTimeSlots = __spreadArray(__spreadArray([], daySchedule.timeSlots, true), [{ from: "", to: "" }], false);
-        onChange(__assign(__assign({}, daySchedule), { timeSlots: newTimeSlots }));
+        var validatedSlots = validateTimeSlots(newTimeSlots);
+        onChange(__assign(__assign({}, daySchedule), { timeSlots: validatedSlots }));
     };
     /**
      * @function handleRemoveTimeSlot
      * @description Removes a time slot from the schedule at the specified index.
+     * Ensures at least one empty slot remains.
      * @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; });
+        // Ensure there's always at least one slot (empty if needed)
+        if (newTimeSlots.length === 0) {
+            newTimeSlots = [{ from: "", to: "" }];
+        }
         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 getSlotsToDisplay
+     * @description Returns the time slots to display exactly as they are in the schedule.
+     * No automatic additions - slots are only added when the user clicks the + button.
+     * @returns {TimeSlot[]} The time slots to display.
+     */
+    var getSlotsToDisplay = function () {
+        var slots = daySchedule.timeSlots;
+        // If there are no slots, return one empty slot to start
+        if (slots.length === 0) {
+            return [{ from: "", to: "" }];
+        }
+        // Return slots exactly as they are - no automatic additions
+        return slots;
+    };
+    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 ? t.open : t.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: t.copyToAll })] })] }), daySchedule.isOpen && (jsxRuntime.jsx("div", { className: "flex  flex-col justify-around gap-y-3 ", children: getSlotsToDisplay().map(function (slot, index) {
+                    var slotsToDisplay = getSlotsToDisplay();
+                    var isLastSlot = index === slotsToDisplay.length - 1;
+                    var isSlotFilled = slot.from && slot.to;
+                    var canDelete = slotsToDisplay.length > 1;
+                    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: t.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: t.to, className: "w-full", value: toTimeValue(slot.to), onChange: function (value) { return handleTimeChange(index, "to", value); }, isInvalid: !!slot.error, errorMessage: slot.error })] }), isLastSlot ? (jsxRuntime.jsx(Button, { isIconOnly: true, size: "sm", color: "primary", variant: "light", onPress: handleAddTimeSlot, isDisabled: !isSlotFilled, startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:add-circle-bold" }) })) : (jsxRuntime.jsx(Button, { isIconOnly: true, size: "sm", color: "danger", variant: "light", onPress: function () { return handleRemoveTimeSlot(index); }, isDisabled: !canDelete, startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:trash-bin-minimalistic-outline" }) }))] }, "".concat(day, "-timeslot-").concat(index)));
+                }) }))] }, day));
 };
 
 /**
@@ -2537,14 +2645,19 @@ var FilePreview = function (_a) {
  * />
  * ```
  */
+// Tamaños predefinidos del componente
+var SIZE_DIMENSIONS = {
+    micro: { width: "64px", height: "64px" },
+    small: { width: "100px", height: "100px" },
+    medium: { width: "200px", height: "200px" },
+    large: { width: "100%", height: "auto" },
+};
 var UploadFile = function (_a) {
     var text = _a.text, textColor = _a.textColor, subText = _a.subText, 
     // borderColor, // TODO: Implementar colores personalizados
     iconColor = _a.iconColor, 
     // backgroundColor, // TODO: Implementar colores personalizados
-    _b = _a.width, 
-    // backgroundColor, // TODO: Implementar colores personalizados
-    width = _b === void 0 ? "100%" : _b, _c = _a.height, height = _c === void 0 ? "auto" : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.maxFiles, maxFiles = _e === void 0 ? 1 : _e, maxFileSize = _a.maxFileSize, _f = _a.acceptedFiles, acceptedFiles = _f === void 0 ? ".pdf" : _f, _g = _a.icon, icon = _g === void 0 ? "heroicons:arrow-up-on-square" : _g, onUpload = _a.onUpload, onError = _a.onError, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.success, success = _j === void 0 ? false : _j, _k = _a.disabled, disabled = _k === void 0 ? false : _k, errorText = _a.errorText, cropConfig = _a.cropConfig, image = _a.image, _l = _a.className, className = _l === void 0 ? "" : _l, _m = _a.translations, translations = _m === void 0 ? {} : _m;
+    size = _a.size, _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.height, height = _c === void 0 ? "auto" : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.maxFiles, maxFiles = _e === void 0 ? 1 : _e, maxFileSize = _a.maxFileSize, _f = _a.acceptedFiles, acceptedFiles = _f === void 0 ? ".pdf" : _f, _g = _a.icon, icon = _g === void 0 ? "heroicons:arrow-up-on-square" : _g, onUpload = _a.onUpload, onError = _a.onError, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.success, success = _j === void 0 ? false : _j, _k = _a.disabled, disabled = _k === void 0 ? false : _k, errorText = _a.errorText, cropConfig = _a.cropConfig, image = _a.image, _l = _a.className, className = _l === void 0 ? "" : _l, _m = _a.translations, translations = _m === void 0 ? {} : _m;
     var inputRef = React.useRef(null);
     var uploadImageRef = React.useRef(image || null);
     var _o = React.useState(false), isDragging = _o[0], setIsDragging = _o[1];
@@ -2684,8 +2797,25 @@ var UploadFile = function (_a) {
         uploadImageRef.current = null;
         onUpload([]);
     };
+    // Obtener dimensiones basadas en size o usar width/height personalizados
+    var dimensions = React.useMemo(function () {
+        if (size) {
+            return SIZE_DIMENSIONS[size];
+        }
+        return { width: width, height: height };
+    }, [size, width, height]);
+    // Determina si se debe mostrar texto
+    // Micro y small siempre muestran texto; medium y large solo en pantallas grandes
+    var shouldShowText = React.useMemo(function () {
+        // Si hay un tamaño definido, siempre se puede mostrar texto
+        if (size !== "micro" && size !== "small") {
+            return true;
+        }
+        // Si no hay size pero width es 100%, se comporta como large
+        return dimensions.width === "100%";
+    }, [size, dimensions.width]);
     // Clases CSS dinámicas usando Tailwind
-    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
+    var containerClasses = "\n\t\trelative border-2 border-dashed rounded-2xl transition-all duration-300\n\t\t".concat(dimensions.width === "100%" ? "w-full" : "", "\n\t\t").concat(dimensions.height === "auto" ? "min-h-28" : "", "\n\t\t").concat(size === "micro" ? "p-1" : size === "small" ? "p-2" : "p-3", "\n\t\t").concat(isDragging
         ? "border-primary-500 bg-primary-50 dark:bg-primary-900"
         : error
             ? "border-danger-500 bg-danger-50 dark:bg-danger-950"
@@ -2696,11 +2826,25 @@ var UploadFile = function (_a) {
                     : "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-centertext-base ont-medium\n\t\t".concat(disabled ? "text-default-400" : textColor || "text-default-700 dark:text-default-200", "\n\t");
+    // Estilos inline para dimensiones exactas cuando hay un size definido
+    var containerStyle = size && dimensions.width !== "100%"
+        ? {
+            width: dimensions.width,
+            height: dimensions.height,
+            boxSizing: "border-box"
+        }
+        : undefined;
+    var textClasses = "\n\t\ttext-center font-medium\n\t\t".concat(size === "micro" ? "text-xs" : size === "small" ? "text-sm" : "text-base", "\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
+    return (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(react.Card, { className: containerClasses, style: containerStyle, isPressable: !(disabled || uploadImageRef.current), onPress: handleClick, children: jsxRuntime.jsxs(react.CardBody, { className: "flex flex-col items-center justify-center relative overflow-hidden ".concat(size === "micro" ? "gap-1" : size === "small" ? "gap-1.5" : "gap-3 sm:gap-4"), 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: "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 ".concat(size === "micro" ? "gap-1" : size === "small" ? "gap-1.5" : "gap-3 sm:gap-4"), children: [jsxRuntime.jsx(IconComponent, { icon: icon, size: size === "micro" ? "sm" : size === "small" ? "md" : "xl", className: "".concat(size === "micro" ? "text-lg"
+                                            : size === "small" ? "text-xl sm:text-2xl"
+                                                : "sm:text-4xl lg:text-5xl", " ").concat(disabled ? "text-gray-400" : iconColor || "text-primary") }), shouldShowText && (jsxRuntime.jsxs("div", { className: "text-center ".concat(size === "micro" ? "px-0.5"
+                                            : size === "small" ? "px-1"
+                                                : "px-2", " ").concat(size === "micro" || size === "small"
+                                            ? "block"
+                                            : "hidden sm:block"), 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 }))] }));
 };
@@ -3357,6 +3501,7 @@ exports.TimeInputComponent = TimeInput;
 exports.ToastContext = ToastContext;
 exports.UploadFile = UploadFile;
 exports.VerticalSteps = VerticalSteps;
+exports.defaultTranslations = defaultTranslations$2;
 exports.sizeMap = sizeMap;
 exports.themeColors = themeColors;
 exports.useAuraToast = useAuraToast;