@beweco/aurora-ui 0.1.30 → 0.1.31

package/dist/index.cjs.js

@@ -192,7 +192,13 @@ function AccordionList(_a) {
         }
         return null;
     }
-    // Render Actions
+    /**
+     * Render Actions with Button Components
+     * ✅ Usado en: List Mode
+     *
+     * En el modo list, no hay problema de anidamiento de botones,
+     * por lo que podemos usar componentes Button normales.
+     */
     var renderActions = function (item) {
         var visibleActions = actions.filter(function (action) {
             if (action.show === undefined)
@@ -203,6 +209,53 @@ function AccordionList(_a) {
         });
         return (jsxRuntime.jsx("div", { className: "flex items-center gap-1", onClick: function (e) { return e.stopPropagation(); }, children: visibleActions.map(function (action) { return (jsxRuntime.jsx(react.Button, { variant: "light", color: action.color || "default", size: "sm", isIconOnly: true, onPress: function () { return action.onPress(item); }, className: action.className, title: action.tooltip, children: jsxRuntime.jsx(IconComponent, { icon: action.icon, className: "w-4 h-4" }) }, action.key)); }) }));
     };
+    /**
+     * Render Actions as DIV Elements with button role
+     * ✅ Usado en: Accordion Mode
+     *
+     * PROBLEMA RESUELTO: Botones anidados inválidos en HTML
+     * ❌ ANTES: <button trigger><button action></button></button>
+     * ✅ AHORA: <button trigger><div role="button"></div></button>
+     *
+     * En el modo accordion, el AccordionItem renderiza las acciones dentro
+     * del prop `title`, que a su vez está dentro del trigger button del accordion.
+     * Usar Button components generaría HTML inválido (button dentro de button)
+     * y causaría errores de hidratación en React.
+     *
+     * Solución: Renderizar las acciones como elementos div con role="button"
+     * que se ven y comportan como botones pero no generan HTML inválido.
+     */
+    var renderActionsAsDiv = function (item) {
+        var visibleActions = actions.filter(function (action) {
+            if (action.show === undefined)
+                return true;
+            if (typeof action.show === "function")
+                return action.show(item);
+            return action.show;
+        });
+        return (jsxRuntime.jsx("div", { className: "flex items-center gap-1", onClick: function (e) { return e.stopPropagation(); }, children: visibleActions.map(function (action) {
+                var colorClasses = {
+                    default: "text-default-500 hover:text-default-700 hover:bg-default-100",
+                    primary: "text-primary-500 hover:text-primary-700 hover:bg-primary-50",
+                    secondary: "text-secondary-500 hover:text-secondary-700 hover:bg-secondary-50",
+                    success: "text-success-500 hover:text-success-700 hover:bg-success-50",
+                    warning: "text-warning-500 hover:text-warning-700 hover:bg-warning-50",
+                    danger: "text-danger-500 hover:text-danger-700 hover:bg-danger-50",
+                };
+                var colorClass = colorClasses[action.color || "default"];
+                return (jsxRuntime.jsx("div", { role: "button", tabIndex: 0, "aria-label": action.tooltip, title: action.tooltip, className: "\n\t\t\t\t\t\t\t\tinline-flex items-center justify-center\n\t\t\t\t\t\t\t\tw-8 h-8 rounded-md cursor-pointer\n\t\t\t\t\t\t\t\ttransition-colors duration-200\n\t\t\t\t\t\t\t\t".concat(colorClass, "\n\t\t\t\t\t\t\t\t").concat(action.className || "", "\n\t\t\t\t\t\t\t"), onClick: function (e) {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        action.onPress(item);
+                    }, onKeyDown: function (e) {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            action.onPress(item);
+                        }
+                    }, children: jsxRuntime.jsx(IconComponent, { icon: action.icon, className: "w-4 h-4" }) }, action.key));
+            }) }));
+    };
     // Render Metadata Chips
     var renderMetadata = function (item) {
         if (!header.getMetadata)
@@ -218,7 +271,7 @@ function AccordionList(_a) {
         }
         return (jsxRuntime.jsxs("div", { className: "h-full w-full ".concat(className), children: [(sectionTitle || sectionIcon) && (jsxRuntime.jsx("div", { className: "mb-4 flex items-center justify-between", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [sectionIcon && (jsxRuntime.jsx(IconComponent, { icon: sectionIcon, className: "w-5 h-5 text-violet-600 dark:text-violet-400" })), sectionTitle && (jsxRuntime.jsx("h3", { className: "text-base font-semibold text-foreground", children: sectionTitle })), showCount && (jsxRuntime.jsx(react.Chip, { size: "sm", variant: "flat", color: "secondary", children: items.length }))] }) })), jsxRuntime.jsx(react.Accordion, { variant: accordionVariant, selectionMode: selectionMode, disableIndicatorAnimation: disableIndicatorAnimation, children: items.map(function (item) { return (jsxRuntime.jsx(react.AccordionItem, { "aria-label": header.getTitle(item), indicator: jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-down-outline", className: "w-4 h-4 text-default-400 transition-transform duration-200 data-[open=true]:rotate-180" }), classNames: {
                             indicator: "data-[open=true]:rotate-180 transition-transform duration-200",
-                        }, title: jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full pr-4", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: header.customRender ? (header.customRender(item)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "text-sm text-default-900 truncate", children: header.getTitle(item) }), renderMetadata(item)] })) }), actions.length > 0 && renderActions(item)] }), children: jsxRuntime.jsx("div", { className: "pb-4", children: content.render(item) }) }, item.id)); }) }), pagination && pagination.totalPages > 1 && (jsxRuntime.jsx("div", { className: "flex justify-center mt-4", children: jsxRuntime.jsx(react.Pagination, { isCompact: pagination.isCompact, showControls: pagination.showControls, showShadow: true, color: "primary", page: pagination.currentPage, total: pagination.totalPages, onChange: pagination.onPageChange }) }))] }));
+                        }, title: jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full pr-4", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: header.customRender ? (header.customRender(item)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "text-sm text-default-900 truncate", children: header.getTitle(item) }), renderMetadata(item)] })) }), actions.length > 0 && renderActionsAsDiv(item)] }), children: jsxRuntime.jsx("div", { className: "pb-4", children: content.render(item) }) }, item.id)); }) }), pagination && pagination.totalPages > 1 && (jsxRuntime.jsx("div", { className: "flex justify-center mt-4", children: jsxRuntime.jsx(react.Pagination, { isCompact: pagination.isCompact, showControls: pagination.showControls, showShadow: true, color: "primary", page: pagination.currentPage, total: pagination.totalPages, onChange: pagination.onPageChange }) }))] }));
     }
     // List Mode
     return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 ".concat(className), children: [(sectionTitle || sectionIcon) && (jsxRuntime.jsx("div", { className: "mb-1 flex items-center justify-between", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [sectionIcon && (jsxRuntime.jsx(IconComponent, { icon: sectionIcon, className: "w-5 h-5 text-primary-600 dark:text-primary-400" })), sectionTitle && (jsxRuntime.jsx("h3", { className: "text-base font-semibold text-foreground", children: sectionTitle })), showCount && (jsxRuntime.jsx(react.Chip, { size: "sm", variant: "flat", color: "primary", children: items.length }))] }) })), items.map(function (item) { return (jsxRuntime.jsxs("div", { className: "flex items-start justify-between p-4 border border-default-100 rounded-lg transition-colors bg-default-50 hover:bg-default-100", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: header.customRender ? (header.customRender(item)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2 mb-2", children: jsxRuntime.jsx("span", { className: "text-sm font-medium text-default-900 truncate", children: header.getTitle(item) }) }), header.getSubtitle && (jsxRuntime.jsx("p", { className: "text-sm text-default-700 line-clamp-2 leading-relaxed mb-2", children: header.getSubtitle(item) })), renderMetadata(item)] })) }), actions.length > 0 && (jsxRuntime.jsx("div", { className: "ml-4 flex-shrink-0", children: renderActions(item) }))] }, item.id)); }), pagination && pagination.totalPages > 1 && (jsxRuntime.jsx("div", { className: "flex justify-center mt-4", children: jsxRuntime.jsx(react.Pagination, { isCompact: pagination.isCompact, showControls: pagination.showControls, showShadow: true, color: "primary", page: pagination.currentPage, total: pagination.totalPages, onChange: pagination.onPageChange }) }))] }));
@@ -287,7 +340,7 @@ var Input = function (_a) {
         } })));
 };
 
-var defaultTranslations$d = {
+var defaultTranslations$e = {
     addHolidayTitle: "Add holiday",
     dayOption: "Day",
     dateRangeOption: "Date range",
@@ -311,7 +364,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$d), translations);
+    var t = __assign(__assign({}, defaultTranslations$e), 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.
@@ -381,7 +434,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$c = {
+var defaultTranslations$d = {
     title: "Analytics",
     description: "Monthly growth of your metrics during the selected period",
     viewDetails: "View Details",
@@ -435,7 +488,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$c), translations);
+    var t = __assign(__assign({}, defaultTranslations$d), 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;
@@ -526,6 +579,206 @@ var AuraAutocomplete = function (_a) {
                 } }))] }));
 };
 
+/**
+ * ColorPicker Types
+ *
+ * Defines the type system for the ColorPicker component used for brand configuration.
+ */
+/**
+ * Default predefined colors (Brand-safe palette)
+ */
+var DEFAULT_PREDEFINED_COLORS = [
+    // Primary colors
+    { key: "blue", name: "Azul", value: "#3B82F6" },
+    { key: "violet", name: "Violeta", value: "#8B5CF6" },
+    { key: "purple", name: "Púrpura", value: "#A855F7" },
+    // Secondary colors
+    { key: "green", name: "Verde", value: "#10B981" },
+    { key: "teal", name: "Turquesa", value: "#14B8A6" },
+    { key: "cyan", name: "Cian", value: "#06B6D4" },
+    // Accent colors
+    { key: "pink", name: "Rosa", value: "#EC4899" },
+    { key: "rose", name: "Rosa claro", value: "#F43F5E" },
+    { key: "orange", name: "Naranja", value: "#F97316" },
+    // Neutral colors
+    { key: "red", name: "Rojo", value: "#EF4444" },
+    { key: "amber", name: "Ámbar", value: "#F59E0B" },
+    { key: "yellow", name: "Amarillo", value: "#EAB308" },
+    // Gray scale (useful for text/backgrounds)
+    { key: "gray-dark", name: "Gris oscuro", value: "#374151" },
+    { key: "gray", name: "Gris", value: "#6B7280" },
+    { key: "gray-light", name: "Gris claro", value: "#9CA3AF" },
+];
+
+/**
+ * Default translations (Spanish)
+ */
+var defaultTranslations$c = {
+    label: "Color",
+    placeholder: "Ingresa código hex",
+    customColorLabel: "Color personalizado",
+    predefinedColorsLabel: "Colores predefinidos",
+    recentColorsLabel: "Colores recientes",
+    noRecentColors: "No hay colores recientes",
+    invalidColorFormat: "Formato de color inválido. Usa #RRGGBB",
+    colorPreview: "Vista previa del color",
+};
+/**
+ * Validates hex color format (#RRGGBB or #RGB)
+ */
+var isValidHexColor = function (color) {
+    var hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    return hexRegex.test(color);
+};
+/**
+ * Normalizes hex color to 6-digit format (#RGB -> #RRGGBB)
+ */
+var normalizeHexColor = function (color) {
+    if (!color.startsWith("#")) {
+        color = "#".concat(color);
+    }
+    // Convert 3-digit to 6-digit
+    if (color.length === 4) {
+        var r = color[1];
+        var g = color[2];
+        var b = color[3];
+        return "#".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b).toUpperCase();
+    }
+    return color.toUpperCase();
+};
+/**
+ * ColorPicker - Advanced color selection component
+ *
+ * Features:
+ * - Native color picker input
+ * - Text input for hex codes
+ * - Predefined color palette
+ * - Recent colors with localStorage persistence
+ * - Full i18n support
+ * - Dark mode compatible
+ * - Accessible
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ColorPicker
+ *   value={brandColor}
+ *   onChange={setBrandColor}
+ *   label="Color de marca"
+ *   enableRecentColors
+ * />
+ * ```
+ */
+var ColorPicker = function (_a) {
+    var value = _a.value, onChange = _a.onChange, label = _a.label, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, errorText = _a.errorText, _e = _a.predefinedColors, predefinedColors = _e === void 0 ? DEFAULT_PREDEFINED_COLORS : _e, _f = _a.enableRecentColors, enableRecentColors = _f === void 0 ? true : _f, _g = _a.maxRecentColors, maxRecentColors = _g === void 0 ? 6 : _g, _h = _a.recentColorsStorageKey, recentColorsStorageKey = _h === void 0 ? "aurora-ui-recent-colors" : _h, _j = _a.showPredefinedColors, showPredefinedColors = _j === void 0 ? true : _j, _k = _a.translations, translations = _k === void 0 ? {} : _k, _l = _a.className, className = _l === void 0 ? "" : _l, id = _a.id, name = _a.name;
+    var generatedId = React.useId();
+    var inputId = id || generatedId;
+    var t = __assign(__assign({}, defaultTranslations$c), translations);
+    // Local state for text input
+    var _m = React.useState(value), textValue = _m[0], setTextValue = _m[1];
+    var _o = React.useState(false), isInvalidFormat = _o[0], setIsInvalidFormat = _o[1];
+    // Recent colors state
+    var _p = React.useState([]), recentColors = _p[0], setRecentColors = _p[1];
+    // Load recent colors from localStorage on mount
+    React.useEffect(function () {
+        if (!enableRecentColors)
+            return;
+        try {
+            var stored = localStorage.getItem(recentColorsStorageKey);
+            if (stored) {
+                var colors = JSON.parse(stored);
+                setRecentColors(colors);
+            }
+        }
+        catch (error) {
+            console.error("Error loading recent colors:", error);
+        }
+    }, [enableRecentColors, recentColorsStorageKey]);
+    // Save to recent colors when value changes
+    React.useEffect(function () {
+        if (!enableRecentColors || !value || !isValidHexColor(value))
+            return;
+        var normalizedValue = normalizeHexColor(value);
+        // Add to recent colors if not already present
+        setRecentColors(function (prev) {
+            // Remove if already exists
+            var filtered = prev.filter(function (c) { return c !== normalizedValue; });
+            // Add to beginning
+            var updated = __spreadArray([normalizedValue], filtered, true).slice(0, maxRecentColors);
+            // Save to localStorage
+            try {
+                localStorage.setItem(recentColorsStorageKey, JSON.stringify(updated));
+            }
+            catch (error) {
+                console.error("Error saving recent colors:", error);
+            }
+            return updated;
+        });
+    }, [value, enableRecentColors, maxRecentColors, recentColorsStorageKey]);
+    // Sync text value when prop value changes
+    React.useEffect(function () {
+        setTextValue(value);
+        setIsInvalidFormat(false);
+    }, [value]);
+    /**
+     * Handle color picker (native input) change
+     */
+    var handleColorPickerChange = function (e) {
+        var newColor = normalizeHexColor(e.target.value);
+        setTextValue(newColor);
+        setIsInvalidFormat(false);
+        onChange(newColor);
+    };
+    /**
+     * Handle text input change
+     */
+    var handleTextChange = function (newValue) {
+        setTextValue(newValue);
+        // Validate format
+        if (isValidHexColor(newValue)) {
+            var normalized = normalizeHexColor(newValue);
+            setIsInvalidFormat(false);
+            onChange(normalized);
+        }
+        else if (newValue.length >= 4) {
+            // Show error only if user has typed enough characters
+            setIsInvalidFormat(true);
+        }
+        else {
+            setIsInvalidFormat(false);
+        }
+    };
+    /**
+     * Handle predefined color selection
+     */
+    var handlePredefinedColorClick = function (colorValue) {
+        if (disabled)
+            return;
+        var normalized = normalizeHexColor(colorValue);
+        setTextValue(normalized);
+        setIsInvalidFormat(false);
+        onChange(normalized);
+    };
+    /**
+     * Render a color circle button
+     */
+    var renderColorCircle = function (colorValue, colorName, isSelected) { return (jsxRuntime.jsx("button", { type: "button", disabled: disabled, onClick: function () { return handlePredefinedColorClick(colorValue); }, className: "\n\t\t\t\tw-10 h-10 rounded-full border-2 cursor-pointer transition-all\n\t\t\t\tfocus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2\n\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-110", "\n\t\t\t\t").concat(isSelected
+            ? "border-primary dark:border-primary-400 scale-110 ring-2 ring-primary ring-offset-2"
+            : "border-default-200 dark:border-default-700", "\n\t\t\t"), style: { backgroundColor: colorValue }, title: colorName, "aria-label": colorName }, colorValue)); };
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 ".concat(className), children: [label && (jsxRuntime.jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-foreground", children: [label, required && jsxRuntime.jsx("span", { className: "text-danger ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx("input", { type: "color", id: inputId, name: name, value: textValue, onChange: handleColorPickerChange, disabled: disabled, className: "\n\t\t\t\t\t\t\tw-14 h-14 rounded-lg cursor-pointer border-2\n\t\t\t\t\t\t\ttransition-all\n\t\t\t\t\t\t\tfocus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2\n\t\t\t\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-105", "\n\t\t\t\t\t\t\t").concat(error
+                                ? "border-danger dark:border-danger-400"
+                                : "border-default-200 dark:border-default-700", "\n\t\t\t\t\t\t"), "aria-label": t.customColorLabel, title: t.customColorLabel }) }), jsxRuntime.jsx("div", { className: "flex-1", children: jsxRuntime.jsx(react.Input, { type: "text", value: textValue, onValueChange: handleTextChange, placeholder: t.placeholder, disabled: disabled, isInvalid: error || isInvalidFormat, errorMessage: isInvalidFormat
+                                ? t.invalidColorFormat
+                                : errorText, variant: "bordered", classNames: {
+                                input: "uppercase font-mono",
+                            }, startContent: jsxRuntime.jsx("span", { className: "text-default-400 text-sm", children: "#" }) }) })] }), showPredefinedColors && predefinedColors.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: predefinedColors.map(function (color) {
+                            return renderColorCircle(color.value, color.name, normalizeHexColor(value) === normalizeHexColor(color.value));
+                        }) })] })), enableRecentColors && recentColors.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.recentColorsLabel }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: recentColors.map(function (color) {
+                            return renderColorCircle(color, color, normalizeHexColor(value) === color);
+                        }) })] }))] }));
+};
+ColorPicker.displayName = "ColorPicker";
+
 var ThemeContext = React.createContext({
     mode: "light",
     color: "blue",
@@ -4717,8 +4970,10 @@ exports.BreadcrumbsComponent = BreadcrumbsComponent;
 exports.Button = Button;
 exports.Card = Card;
 exports.Chip = Chip;
+exports.ColorPicker = ColorPicker;
 exports.ColorSelector = ColorSelector;
 exports.ContentCarousel = ContentCarousel;
+exports.DEFAULT_PREDEFINED_COLORS = DEFAULT_PREDEFINED_COLORS;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
 exports.DateSelector = DateSelector;