@beweco/aurora-ui 0.1.59 → 0.1.61

package/dist/index.cjs.js

@@ -785,6 +785,7 @@ ColorPicker.displayName = "ColorPicker";
 var ThemeContext = React.createContext({
     mode: "light",
     color: "blue",
+    customHex: null,
     // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
     setMode: function () { },
     // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
@@ -2190,6 +2191,8 @@ var DEFAULT_TRANSLATIONS$3 = {
     mobileNavAriaLabel: "Navegación móvil",
     logoAlt: "Logo de",
     notDefinedLabel: "no definido",
+    scrollUpAriaLabel: "Subir menú",
+    scrollDownAriaLabel: "Bajar menú",
 };
 /**
  * Sidebar menu component for navigation and user actions.
@@ -2263,13 +2266,115 @@ var MenuComponent = React.memo(function Menu(_a) {
         (_a = menuItems.onSelect) === null || _a === void 0 ? void 0 : _a.call(menuItems, key, href, "bottomBar");
     }, [onOpenSidebarChange, menuItems.onSelect]);
     var showBottomBar = (mobileBottomBarGroupKey && bottomBarItems.length > 0) || showNativeMenu;
+    // Drag-to-scroll: clic sostenido + arrastre en el área de scroll del menú
+    var scrollContainerRef = React.useRef(null);
+    var dragStateRef = React.useRef({ startY: 0, startScrollTop: 0, isDragging: false, prevClientY: 0 });
+    var _h = React.useState(false), isDraggingScroll = _h[0], setIsDraggingScroll = _h[1];
+    var handleScrollAreaMouseMove = React.useCallback(function (e) {
+        var el = scrollContainerRef.current;
+        if (!el)
+            return;
+        var state = dragStateRef.current;
+        var dy = e.clientY - state.startY;
+        if (!state.isDragging && Math.abs(dy) > 5) {
+            state.isDragging = true;
+            state.prevClientY = e.clientY;
+            setIsDraggingScroll(true);
+        }
+        if (state.isDragging) {
+            el.scrollTop += state.prevClientY - e.clientY;
+            state.prevClientY = e.clientY;
+        }
+    }, []);
+    var handleScrollAreaMouseUp = React.useCallback(function () {
+        var wasDragging = dragStateRef.current.isDragging;
+        document.removeEventListener("mousemove", handleScrollAreaMouseMove);
+        document.removeEventListener("mouseup", handleScrollAreaMouseUp);
+        dragStateRef.current.isDragging = false;
+        setIsDraggingScroll(false);
+        if (wasDragging) {
+            var preventClick_1 = function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                document.removeEventListener("click", preventClick_1, true);
+            };
+            document.addEventListener("click", preventClick_1, true);
+            setTimeout(function () { return document.removeEventListener("click", preventClick_1, true); }, 50);
+        }
+    }, [handleScrollAreaMouseMove]);
+    var handleScrollAreaMouseDown = React.useCallback(function (e) {
+        if (e.button !== 0)
+            return;
+        var el = scrollContainerRef.current;
+        if (!el)
+            return;
+        dragStateRef.current = {
+            startY: e.clientY,
+            startScrollTop: el.scrollTop,
+            isDragging: false,
+            prevClientY: e.clientY,
+        };
+        document.addEventListener("mousemove", handleScrollAreaMouseMove);
+        document.addEventListener("mouseup", handleScrollAreaMouseUp);
+    }, [handleScrollAreaMouseMove, handleScrollAreaMouseUp]);
+    React.useEffect(function () {
+        return function () {
+            document.removeEventListener("mousemove", handleScrollAreaMouseMove);
+            document.removeEventListener("mouseup", handleScrollAreaMouseUp);
+        };
+    }, [handleScrollAreaMouseMove, handleScrollAreaMouseUp]);
+    // Indicadores de scroll: flechas arriba/abajo cuando el contenido requiere scroll
+    var _j = React.useState({
+        canScrollUp: false,
+        canScrollDown: false,
+    }), scrollState = _j[0], setScrollState = _j[1];
+    var SCROLL_STEP_PX = 120;
+    var updateScrollIndicators = React.useCallback(function () {
+        var el = scrollContainerRef.current;
+        if (!el)
+            return;
+        var scrollTop = el.scrollTop, scrollHeight = el.scrollHeight, clientHeight = el.clientHeight;
+        var canScrollUp = scrollTop > 2;
+        var canScrollDown = scrollTop < scrollHeight - clientHeight - 2;
+        setScrollState(function (prev) {
+            return prev.canScrollUp !== canScrollUp || prev.canScrollDown !== canScrollDown
+                ? { canScrollUp: canScrollUp, canScrollDown: canScrollDown }
+                : prev;
+        });
+    }, []);
+    React.useEffect(function () {
+        var el = scrollContainerRef.current;
+        if (!el)
+            return;
+        updateScrollIndicators();
+        var ro = new ResizeObserver(updateScrollIndicators);
+        ro.observe(el);
+        el.addEventListener("scroll", updateScrollIndicators);
+        return function () {
+            ro.disconnect();
+            el.removeEventListener("scroll", updateScrollIndicators);
+        };
+    }, [updateScrollIndicators, menuItems.items, isCollapsed]);
+    var handleScrollUp = React.useCallback(function () {
+        var el = scrollContainerRef.current;
+        if (!el)
+            return;
+        el.scrollBy({ top: -SCROLL_STEP_PX, behavior: "smooth" });
+    }, []);
+    var handleScrollDown = React.useCallback(function () {
+        var el = scrollContainerRef.current;
+        if (!el)
+            return;
+        el.scrollBy({ top: SCROLL_STEP_PX, behavior: "smooth" });
+    }, []);
+    var showScrollArrows = scrollState.canScrollUp || scrollState.canScrollDown;
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showBottomBar && (jsxRuntime.jsx(MenuMobileBottomBar, { items: bottomBarItems, selectedKey: selectedKey, onSelect: handleBottomBarSelect, onMenuPress: handleSidebarOpen, menuLabel: t.menuLabel, navAriaLabel: t.mobileNavAriaLabel, forceVisible: showNativeMenu && bottomBarItems.length === 0 })), jsxRuntime.jsx("button", { type: "button", "aria-label": t.closeSidebarAriaLabel, className: "menu-overlay ".concat(isOpenSidebar ? "menu-overlay--open" : ""), onClick: handleSidebarClose, tabIndex: isOpenSidebar ? 0 : -1 }), jsxRuntime.jsx("div", { className: "container__menu ".concat(isCollapsed
                     ? "container__menu--collapsed"
                     : "container__menu--expanded", " ").concat(isOpenSidebar ? "container__menu--mobile-open" : ""), "aria-hidden": !isOpenSidebar, children: jsxRuntime.jsxs("div", { className: "content__menu", children: [jsxRuntime.jsxs("div", { className: "content__menu--header", style: {
                                 flexDirection: isCollapsed ? "column-reverse" : "row",
                             }, children: [jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-center ".concat(isCollapsed ? "gap-0" : "gap-2"), children: [jsxRuntime.jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-foreground text-background", children: hasValidLogo ? (jsxRuntime.jsx("img", { src: commerceInfo.logo, alt: "".concat(t.logoAlt, " ").concat(commerceName), className: "h-full w-full object-cover", onError: function () { return setLogoError(true); } })) : (jsxRuntime.jsx(IconComponent, { icon: "solar:buildings-2-outline", size: "sm", className: "shrink-0", "aria-hidden": true })) }), jsxRuntime.jsx("span", { className: "collapsible-item text-small font-bold truncate min-w-0", children: commerceName })] }), jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "cursor-pointer block sm:hidden", onClick: handleSidebarClose }), jsxRuntime.jsx(IconComponent, { icon: isCollapsed
                                                 ? "solar:alt-arrow-right-outline"
-                                                : "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsxRuntime.jsx(react.Spacer, { y: 6 }), jsxRuntime.jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsxRuntime.jsx(react.Avatar, { size: "md", src: ((_b = userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) === null || _b === void 0 ? void 0 : _b.trim()) || undefined, color: !((_c = userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) === null || _c === void 0 ? void 0 : _c.trim()) ? "warning" : "default", name: userName, className: "shrink-0" }), jsxRuntime.jsxs("div", { className: "collapsible-item flex min-w-0 flex-col overflow-hidden", children: [jsxRuntime.jsx("p", { className: "text-small font-medium text-default-900 truncate", children: userName }), jsxRuntime.jsx("p", { className: "text-tiny text-default-400 truncate", children: userRole })] })] }), jsxRuntime.jsx("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6"), children: jsxRuntime.jsx("div", { className: "h-full overflow-y-auto pr-6 -mr-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: jsxRuntime.jsx(MenuNavList, { defaultSelectedKey: selectedKey, items: menuItems.items, isCollapsed: isCollapsed, onSelect: handleMenuSelect }, selectedKey) }) }), jsxRuntime.jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsxRuntime.jsx(react.Button, { fullWidth: true, className: " text-default-500 data-[hover=true]:text-default-600", startContent: jsxRuntime.jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (jsxRuntime.jsx("span", { className: "collapsible-item truncate", children: helpTitle })) }) })] }) })] }));
+                                                : "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsxRuntime.jsx(react.Spacer, { y: 6 }), jsxRuntime.jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsxRuntime.jsx(react.Avatar, { size: "md", src: ((_b = userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) === null || _b === void 0 ? void 0 : _b.trim()) || undefined, color: !((_c = userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) === null || _c === void 0 ? void 0 : _c.trim()) ? "warning" : "default", name: userName, className: "shrink-0" }), jsxRuntime.jsxs("div", { className: "collapsible-item flex min-w-0 flex-col overflow-hidden", children: [jsxRuntime.jsx("p", { className: "text-small font-medium text-default-900 truncate", children: userName }), jsxRuntime.jsx("p", { className: "text-tiny text-default-400 truncate", children: userRole })] })] }), jsxRuntime.jsxs("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6 relative"), children: [!isCollapsed && showScrollArrows && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [scrollState.canScrollUp && (jsxRuntime.jsx("button", { type: "button", "aria-label": t.scrollUpAriaLabel, className: "menu-scroll-arrow menu-scroll-arrow--up", onClick: handleScrollUp, children: jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-up-outline", size: "lg", "aria-hidden": true }) })), scrollState.canScrollDown && (jsxRuntime.jsx("button", { type: "button", "aria-label": t.scrollDownAriaLabel, className: "menu-scroll-arrow menu-scroll-arrow--down", onClick: handleScrollDown, children: jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-down-outline", size: "lg", "aria-hidden": true }) }))] })), jsxRuntime.jsx("div", { ref: scrollContainerRef, className: "h-full overflow-y-auto pr-6 -mr-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] select-none ".concat(isDraggingScroll ? "cursor-grabbing" : ""), onMouseDown: handleScrollAreaMouseDown, children: jsxRuntime.jsx(MenuNavList, { defaultSelectedKey: selectedKey, items: menuItems.items, isCollapsed: isCollapsed, onSelect: handleMenuSelect }, selectedKey) })] }), jsxRuntime.jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsxRuntime.jsx(react.Button, { fullWidth: true, className: " text-default-500 data-[hover=true]:text-default-600", startContent: jsxRuntime.jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (jsxRuntime.jsx("span", { className: "collapsible-item truncate", children: helpTitle })) }) })] }) })] }));
 });
 
 var StepIndicator = function (_a) {
@@ -3858,7 +3963,7 @@ var ORB_SIZES = {
     xl: 192,
 };
 
-var isHexColor = function (value) {
+var isHexColor$1 = function (value) {
     var normalized = value.startsWith("#") ? value.slice(1) : value;
     return /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(normalized);
 };
@@ -3876,7 +3981,7 @@ var hexToRgba = function (hexColor, alpha) {
     return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
 };
 var colorWithAlpha = function (color, alpha) {
-    if (isHexColor(color)) {
+    if (isHexColor$1(color)) {
         var normalized = color.startsWith("#") ? color : "#".concat(color);
         return hexToRgba(normalized, alpha);
     }
@@ -5567,6 +5672,27 @@ var DrawerFilters = function (_a) {
 };
 DrawerFilters.displayName = "DrawerFilters";
 
+var InputPassword = function (_a) {
+    var _b, _c;
+    var translations = _a.translations, _d = _a.showCriteria, showCriteria = _d === void 0 ? false : _d, criteria = _a.criteria, _e = _a.isPristine, isPristine = _e === void 0 ? true : _e, renderCriterionLabel = _a.renderCriterionLabel, _f = _a.criteriaId, criteriaId = _f === void 0 ? "password-criteria" : _f, inputProps = __rest(_a, ["translations", "showCriteria", "criteria", "isPristine", "renderCriterionLabel", "criteriaId"]);
+    var _g = React.useState(false), showPassword = _g[0], setShowPassword = _g[1];
+    var togglePasswordVisibility = function () {
+        setShowPassword(function (prev) { return !prev; });
+    };
+    var showLabel = (_b = translations === null || translations === void 0 ? void 0 : translations.showPassword) !== null && _b !== void 0 ? _b : "Show password";
+    var hideLabel = (_c = translations === null || translations === void 0 ? void 0 : translations.hidePassword) !== null && _c !== void 0 ? _c : "Hide password";
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col w-full", children: [jsxRuntime.jsx(Input, __assign({}, inputProps, { type: showPassword ? "text" : "password", "aria-describedby": showCriteria ? criteriaId : inputProps["aria-describedby"], endContent: jsxRuntime.jsx("button", { type: "button", tabIndex: -1, onClick: togglePasswordVisibility, className: "focus:outline-none", "aria-label": showPassword ? hideLabel : showLabel, children: showPassword ? (jsxRuntime.jsx(IconComponent, { icon: "lucide:eye-off", color: "gray" })) : (jsxRuntime.jsx(IconComponent, { icon: "lucide:eye", color: "gray" })) }) })), showCriteria && criteria && criteria.length > 0 && (jsxRuntime.jsx("fieldset", { id: criteriaId, className: "mt-2", children: jsxRuntime.jsx("ul", { className: "flex flex-col gap-2 list-none", children: criteria.map(function (criterion, idx) {
+                        var colorClass = criterion.passed
+                            ? "text-success"
+                            : isPristine
+                                ? "text-default-500"
+                                : "text-danger-500";
+                        return (jsxRuntime.jsxs("li", { className: "flex items-center gap-2 text-tiny w-full text-left ".concat(colorClass), "aria-label": "".concat(criterion.label, ": ").concat(criterion.passed ? "met" : "not met"), children: [criterion.passed ? (jsxRuntime.jsx(IconComponent, { icon: "ic:round-check", className: "text-success", "aria-hidden": "true" })) : (jsxRuntime.jsx(IconComponent, { icon: "solar:close-circle-linear", className: colorClass, "aria-hidden": "true" })), renderCriterionLabel
+                                    ? renderCriterionLabel(criterion.label)
+                                    : criterion.label] }, "".concat(criteriaId, "-").concat(idx)));
+                    }) }) }))] }));
+};
+
 var DEFAULT_TRANSLATIONS = {
     placeholder: "Nombre de la etiqueta",
     labelSelect: "Selecciona etiqueta",
@@ -5667,6 +5793,195 @@ var Card = function (_a) {
     return (jsxRuntime.jsx(react.Card, __assign({ shadow: shadow, radius: radius, className: combinedClassName }, props, { children: children })));
 };
 
+var THEME_COLOR_HEX_MAP = {
+    blue: "#006fee",
+    purple: "#7828c8",
+    yellow: "#ffd505",
+    green: "#16c964",
+    coral: "#ff4f4f",
+};
+function hexToRgb$1(hex) {
+    var clean = hex.replace("#", "");
+    var normalized = clean.length === 3
+        ? clean
+            .split("")
+            .map(function (c) { return c + c; })
+            .join("")
+        : clean;
+    return [
+        Number.parseInt(normalized.slice(0, 2), 16),
+        Number.parseInt(normalized.slice(2, 4), 16),
+        Number.parseInt(normalized.slice(4, 6), 16),
+    ];
+}
+function colorDistance(a, b) {
+    return Math.pow((a[0] - b[0]), 2) + Math.pow((a[1] - b[1]), 2) + Math.pow((a[2] - b[2]), 2);
+}
+var THEME_COLORS = Object.keys(THEME_COLOR_HEX_MAP);
+function isHexColor(value) {
+    return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value);
+}
+function isExactThemeColor(hex) {
+    var normalized = hex.toLowerCase();
+    for (var _i = 0, THEME_COLORS_1 = THEME_COLORS; _i < THEME_COLORS_1.length; _i++) {
+        var themeColor = THEME_COLORS_1[_i];
+        if (THEME_COLOR_HEX_MAP[themeColor].toLowerCase() === normalized) {
+            return themeColor;
+        }
+    }
+    return null;
+}
+function hexToThemeColor(hex) {
+    var targetRgb = hexToRgb$1(hex);
+    var closest = "blue";
+    var minDistance = Number.POSITIVE_INFINITY;
+    for (var _i = 0, THEME_COLORS_2 = THEME_COLORS; _i < THEME_COLORS_2.length; _i++) {
+        var themeColor = THEME_COLORS_2[_i];
+        var themeRgb = hexToRgb$1(THEME_COLOR_HEX_MAP[themeColor]);
+        var dist = colorDistance(targetRgb, themeRgb);
+        if (dist < minDistance) {
+            minDistance = dist;
+            closest = themeColor;
+        }
+    }
+    return closest;
+}
+
+function hexToRgb(hex) {
+    var clean = hex.replace("#", "");
+    var normalized = clean.length === 3
+        ? clean
+            .split("")
+            .map(function (c) { return c + c; })
+            .join("")
+        : clean;
+    return [
+        Number.parseInt(normalized.slice(0, 2), 16),
+        Number.parseInt(normalized.slice(2, 4), 16),
+        Number.parseInt(normalized.slice(4, 6), 16),
+    ];
+}
+function rgbToHsl(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    var max = Math.max(r, g, b);
+    var min = Math.min(r, g, b);
+    var l = (max + min) / 2;
+    var h = 0;
+    var s = 0;
+    if (max !== min) {
+        var d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                break;
+            case g:
+                h = ((b - r) / d + 2) / 6;
+                break;
+            case b:
+                h = ((r - g) / d + 4) / 6;
+                break;
+        }
+    }
+    return { h: h * 360, s: s * 100, l: l * 100 };
+}
+function hslToCssValue(h, s, l) {
+    return "".concat(h, " ").concat(s, "% ").concat(l, "%");
+}
+function getContrastForeground(hex) {
+    var _a = hexToRgb(hex), r = _a[0], g = _a[1], b = _a[2];
+    var luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+    return luminance > 0.5 ? "0 0% 0%" : "0 0% 100%";
+}
+var LIGHT_SHADE_LIGHTNESS = {
+    "50": 95,
+    "100": 90,
+    "200": 82,
+    "300": 72,
+    "400": 60,
+};
+var DARK_SHADE_FACTORS = {
+    "600": 0.83,
+    "700": 0.67,
+    "800": 0.50,
+    "900": 0.33,
+};
+function generateLightScale(h, s, l) {
+    var scale = {};
+    for (var _i = 0, _a = Object.entries(LIGHT_SHADE_LIGHTNESS); _i < _a.length; _i++) {
+        var _b = _a[_i], shade = _b[0], targetL = _b[1];
+        var shadeL = l + (targetL - l) * ((targetL - l) / (95 - l));
+        var clampedL = Math.min(Math.max(shadeL, 0), 100);
+        var shadedS = Number(shade) <= 100 ? s * 0.92 : s;
+        scale[shade] = hslToCssValue(h, Math.min(shadedS, 100), clampedL);
+    }
+    scale["500"] = hslToCssValue(h, s, l);
+    for (var _c = 0, _d = Object.entries(DARK_SHADE_FACTORS); _c < _d.length; _c++) {
+        var _e = _d[_c], shade = _e[0], factor = _e[1];
+        var shadeL = l * factor;
+        var shadedS = Number(shade) >= 800 ? s * 0.92 : s;
+        scale[shade] = hslToCssValue(h, Math.min(shadedS, 100), Math.max(shadeL, 0));
+    }
+    return scale;
+}
+function reversScale(scale) {
+    var shades = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"];
+    var values = shades.map(function (s) { return scale[s]; });
+    var reversed = {};
+    for (var i = 0; i < shades.length; i++) {
+        reversed[shades[i]] = values[shades.length - 1 - i];
+    }
+    return reversed;
+}
+function generateThemeColorScale(hex, mode) {
+    var _a = hexToRgb(hex), r = _a[0], g = _a[1], b = _a[2];
+    var _b = rgbToHsl(r, g, b), h = _b.h, s = _b.s, l = _b.l;
+    var lightScale = generateLightScale(h, s, l);
+    var shades = mode === "dark" ? reversScale(lightScale) : lightScale;
+    var foreground = getContrastForeground(hex);
+    var defaultValue = hslToCssValue(h, s, l);
+    return { shades: shades, foreground: foreground, defaultValue: defaultValue };
+}
+
+var PRIMARY_SHADES = [
+    "50",
+    "100",
+    "200",
+    "300",
+    "400",
+    "500",
+    "600",
+    "700",
+    "800",
+    "900",
+];
+var CUSTOM_PROPERTIES = __spreadArray(__spreadArray([
+    "--heroui-primary"
+], PRIMARY_SHADES.map(function (s) { return "--heroui-primary-".concat(s); }), true), [
+    "--heroui-primary-foreground",
+    "--heroui-focus",
+], false);
+function applyCustomPrimaryColor(hex, mode) {
+    var _a = generateThemeColorScale(hex, mode), shades = _a.shades, foreground = _a.foreground, defaultValue = _a.defaultValue;
+    var style = document.documentElement.style;
+    style.setProperty("--heroui-primary", defaultValue);
+    for (var _i = 0, PRIMARY_SHADES_1 = PRIMARY_SHADES; _i < PRIMARY_SHADES_1.length; _i++) {
+        var shade = PRIMARY_SHADES_1[_i];
+        style.setProperty("--heroui-primary-".concat(shade), shades[shade]);
+    }
+    style.setProperty("--heroui-primary-foreground", foreground);
+    style.setProperty("--heroui-focus", defaultValue);
+}
+function removeCustomPrimaryColor() {
+    var style = document.documentElement.style;
+    for (var _i = 0, CUSTOM_PROPERTIES_1 = CUSTOM_PROPERTIES; _i < CUSTOM_PROPERTIES_1.length; _i++) {
+        var prop = CUSTOM_PROPERTIES_1[_i];
+        style.removeProperty(prop);
+    }
+}
+
 /**
  * @file This file contains the theme configurations for the application.
  */
@@ -5674,10 +5989,12 @@ 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.
+ * Supports both named ThemeColor values and arbitrary hex colors.
+ * @returns An object with the current mode, color, customHex, and functions to set them.
  */
 var useThemeManager = function () {
     var _a = useTheme.useTheme(), rawTheme = _a.theme, setRawTheme = _a.setTheme;
+    var _b = React.useState(null), customHex = _b[0], setCustomHex = _b[1];
     var setTheme = React.useCallback(function (theme) {
         var _a;
         var html = document.documentElement;
@@ -5690,7 +6007,7 @@ var useThemeManager = function () {
         (_a = html.classList).remove.apply(_a, ALL_THEMES);
         html.classList.add(rawTheme);
     }, [rawTheme]);
-    var _b = React.useMemo(function () {
+    var _c = React.useMemo(function () {
         var parts = rawTheme.split("-");
         var parsedColor = "blue";
         var parsedMode = "light";
@@ -5703,18 +6020,49 @@ var useThemeManager = function () {
             parsedMode = rawTheme;
         }
         return { mode: parsedMode, color: parsedColor };
-    }, [rawTheme]), mode = _b.mode, color = _b.color;
+    }, [rawTheme]), mode = _c.mode, color = _c.color;
+    React.useEffect(function () {
+        if (customHex) {
+            applyCustomPrimaryColor(customHex, mode);
+        }
+        else {
+            removeCustomPrimaryColor();
+        }
+    }, [customHex, mode]);
     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);
+        if (isHexColor(newColor)) {
+            var exactMatch = isExactThemeColor(newColor);
+            if (exactMatch) {
+                setCustomHex(null);
+                var newTheme = exactMatch === "blue" ? mode : "".concat(exactMatch, "-").concat(mode);
+                setTheme(newTheme);
+            }
+            else {
+                var closestColor = hexToThemeColor(newColor);
+                setCustomHex(newColor);
+                var newTheme = closestColor === "blue"
+                    ? mode
+                    : "".concat(closestColor, "-").concat(mode);
+                setTheme(newTheme);
+            }
+        }
+        else {
+            setCustomHex(null);
+            var resolvedColor = newColor;
+            var newTheme = resolvedColor === "blue"
+                ? mode
+                : "".concat(resolvedColor, "-").concat(mode);
+            setTheme(newTheme);
+        }
     }, [mode, setTheme]);
     return {
         mode: mode,
         color: color,
+        customHex: customHex,
         setMode: setMode,
         setColor: setColor,
     };
@@ -5730,10 +6078,11 @@ var useThemeManager = function () {
  */
 var ThemeProvider = function (_a) {
     var children = _a.children;
-    var _b = useThemeManager(), mode = _b.mode, color = _b.color, setMode = _b.setMode, setColor = _b.setColor;
+    var _b = useThemeManager(), mode = _b.mode, color = _b.color, customHex = _b.customHex, setMode = _b.setMode, setColor = _b.setColor;
     return (jsxRuntime.jsx(ThemeContext.Provider, { value: {
             mode: mode,
             color: color,
+            customHex: customHex,
             setMode: setMode,
             setColor: setColor,
         }, children: children }));
@@ -5839,6 +6188,7 @@ exports.HeaderComponent = HeaderComponent;
 exports.IconComponent = IconComponent;
 exports.ImagePreview = ImagePreview;
 exports.Input = Input;
+exports.InputPassword = InputPassword;
 exports.Kanban = Kanban;
 exports.KanbanCard = KanbanCard;
 exports.KanbanColumn = KanbanColumn;
@@ -5866,6 +6216,7 @@ exports.SocialMediaCarousel = SocialMediaCarousel;
 exports.SocialMediaPreview = SocialMediaPreview;
 exports.StepIndicator = StepIndicator;
 exports.SwitchComponent = Switch;
+exports.THEME_COLOR_HEX_MAP = THEME_COLOR_HEX_MAP;
 exports.TagsFilter = TagsFilter;
 exports.Textarea = Textarea;
 exports.ThemeContext = ThemeContext;
@@ -5880,8 +6231,16 @@ exports.WhatsAppPreview = WhatsAppPreview;
 exports.Wizard = Wizard;
 exports.WizardNavigation = WizardNavigation;
 exports.WizardSidebar = WizardSidebar;
+exports.applyCustomPrimaryColor = applyCustomPrimaryColor;
 exports.defaultTranslations = defaultTranslations$4;
+exports.generateThemeColorScale = generateThemeColorScale;
+exports.getContrastForeground = getContrastForeground;
 exports.getSelectedKeyFromPath = getSelectedKeyFromPath;
+exports.hexToThemeColor = hexToThemeColor;
+exports.hslToCssValue = hslToCssValue;
+exports.isExactThemeColor = isExactThemeColor;
+exports.isHexColor = isHexColor;
+exports.removeCustomPrimaryColor = removeCustomPrimaryColor;
 exports.sizeMap = sizeMap;
 exports.themeColors = themeColors;
 exports.useAuraToast = useAuraToast;