@beweco/aurora-ui 0.6.4 → 0.6.6

package/dist/index.cjs.js

@@ -1476,42 +1476,224 @@ var themeColors = {
             overlay: "#000000",
         },
     },
+    "oceanMint-light": {
+        extend: "light",
+        colors: {
+            primary: {
+                "50": "#e4f4fc",
+                "100": "#bee4f7",
+                "200": "#98d4f3",
+                "300": "#72c5ee",
+                "400": "#4cb5ea",
+                "500": "#26a5e5",
+                "600": "#1f88bd",
+                "700": "#196b95",
+                "800": "#124e6d",
+                "900": "#0b3245",
+                foreground: "#000",
+                DEFAULT: "#26a5e5",
+            },
+            secondary: {
+                "50": "#e2fdf2",
+                "100": "#bafae0",
+                "200": "#92f7cd",
+                "300": "#6af5bb",
+                "400": "#42f2a8",
+                "500": "#1aef96",
+                "600": "#15c57c",
+                "700": "#119b62",
+                "800": "#0c7247",
+                "900": "#08482d",
+                foreground: "#000",
+                DEFAULT: "#1aef96",
+            },
+            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: "#ffffff",
+        },
+    },
+    "oceanMint-dark": {
+        extend: "dark",
+        colors: {
+            primary: {
+                "50": "#0b3245",
+                "100": "#124e6d",
+                "200": "#196b95",
+                "300": "#1f88bd",
+                "400": "#26a5e5",
+                "500": "#4cb5ea",
+                "600": "#72c5ee",
+                "700": "#98d4f3",
+                "800": "#bee4f7",
+                "900": "#e4f4fc",
+                foreground: "#000",
+                DEFAULT: "#26a5e5",
+            },
+            secondary: {
+                "50": "#08482d",
+                "100": "#0c7247",
+                "200": "#119b62",
+                "300": "#15c57c",
+                "400": "#1aef96",
+                "500": "#42f2a8",
+                "600": "#6af5bb",
+                "700": "#92f7cd",
+                "800": "#bafae0",
+                "900": "#e2fdf2",
+                foreground: "#000",
+                DEFAULT: "#1aef96",
+            },
+            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: "#000000",
+        },
+    },
 };
 
+/**
+ * @file This file contains the theme configurations for the application.
+ */
+var ALL_THEMES = __spreadArray(["light", "dark"], Object.keys(themeColors), true);
+/**
+ * Unique hue ids derived from {@link themeColors} keys (e.g. `oceanMint` from `oceanMint-light`).
+ */
+function getRegisteredThemeColorBases() {
+    return Array.from(new Set(Object.keys(themeColors).map(function (key) { return key.replace(/-(light|dark)$/, ""); }))).sort();
+}
+/**
+ * Same as {@link getRegisteredThemeColorBases} typed as {@link ThemeColor} for callers that expect the union.
+ * Keeps Storybook / pickers in sync when new `*-light` / `*-dark` pairs are added.
+ */
+var REGISTERED_THEME_COLORS = getRegisteredThemeColorBases();
+
+/** Human-readable theme name for tooltips and aria (e.g. blue-light → "Blue light"). */
+function formatThemeDisplayName(themeName) {
+    return themeName
+        .split("-")
+        .map(function (segment) {
+        return segment.length > 0
+            ? segment.charAt(0).toUpperCase() + segment.slice(1).toLowerCase()
+            : segment;
+    })
+        .join(" ");
+}
+var swatchClass = "box-border shrink-0 cursor-pointer rounded-full border-2 transition-[border-color,box-shadow]";
+var radioClassNames = {
+    base: "m-0 inline-flex max-w-fit items-center p-0",
+    wrapper: "hidden",
+    // HeroUI places a full-size invisible input at z-[1] over the label; lift swatches above it.
+    labelWrapper: "relative z-[2] m-0 ms-0 flex flex-col p-0",
+    label: "m-0 block p-0 leading-none",
+};
+/**
+ * One swatch per registered hue, using the palette for the **current** app light/dark mode.
+ * To preview dark variants the user must switch the app to dark mode (and vice versa).
+ */
 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,
-        });
-    });
+    var resolvedMode = mode === "dark" ? "dark" : "light";
+    var baseIds = getRegisteredThemeColorBases();
     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)); }) }));
+        }, children: baseIds.map(function (baseId) {
+            var themeName = "".concat(baseId, "-").concat(resolvedMode);
+            var entry = themeColors[themeName];
+            if (!entry) {
+                return null;
+            }
+            var isSelected = selectedColor === baseId;
+            return (jsxRuntime.jsx(react.Radio, { value: baseId, "aria-label": formatThemeDisplayName(themeName), classNames: radioClassNames, children: jsxRuntime.jsx(react.Tooltip, { content: formatThemeDisplayName(themeName), delay: 0, closeDelay: 120, placement: "top", children: jsxRuntime.jsx("span", { className: [
+                            swatchClass,
+                            "inline-block size-8",
+                            isSelected
+                                ? "border-foreground/40 ring-2 ring-foreground/25 ring-offset-2 ring-offset-background"
+                                : "border-default-200 hover:border-default-400",
+                        ].join(" "), style: { backgroundColor: entry.colors.primary.DEFAULT } }) }) }, baseId));
+        }) }));
 };
 
 /**
@@ -6515,6 +6697,79 @@ var Card = function (_a) {
     return (jsxRuntime.jsx(react.Card, __assign({ shadow: shadow, radius: radius, className: combinedClassName }, props, { children: children })));
 };
 
+/**
+ * Registro público de temas Aurora para consumidores (@beweco/aurora-ui).
+ * Derivado de {@link themeColors}: al añadir un par `*-light` / `*-dark` en
+ * `colors.default.ts`, este registro se actualiza sin duplicar listas.
+ */
+function readPrimaryDefault(colors) {
+    var primary = colors.primary;
+    if (primary &&
+        typeof primary === "object" &&
+        "DEFAULT" in primary &&
+        typeof primary.DEFAULT === "string") {
+        return primary.DEFAULT;
+    }
+    return "#000000";
+}
+function parseEntry(id, config) {
+    var mode = config.extend === "dark" ? "dark" : "light";
+    var colorFamily = id.replace(/-(light|dark)$/, "");
+    return {
+        id: id,
+        colorFamily: colorFamily,
+        mode: mode,
+        labelKey: "aurora.theme.".concat(id),
+        previewPrimary: readPrimaryDefault(config.colors),
+    };
+}
+/** Entradas en el mismo orden que las claves de `themeColors`. */
+var AURORA_THEME_REGISTRY = Object.entries(themeColors).map(function (_a) {
+    var id = _a[0], config = _a[1];
+    return parseEntry(id, config);
+});
+function buildFamilies(entries) {
+    var _a;
+    var map = new Map();
+    for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+        var entry = entries_1[_i];
+        var slot = (_a = map.get(entry.colorFamily)) !== null && _a !== void 0 ? _a : {};
+        if (entry.mode === "light") {
+            slot.light = entry;
+        }
+        else {
+            slot.dark = entry;
+        }
+        map.set(entry.colorFamily, slot);
+    }
+    return Array.from(map.entries())
+        .map(function (_a) {
+        var colorFamily = _a[0], _b = _a[1], light = _b.light, dark = _b.dark;
+        return ({
+            colorFamily: colorFamily,
+            light: light,
+            dark: dark,
+        });
+    })
+        .sort(function (a, b) { return a.colorFamily.localeCompare(b.colorFamily); });
+}
+/** Familias de color (light + dark) para selectores tipo “Color de la plataforma”. */
+var AURORA_THEME_FAMILIES = buildFamilies(AURORA_THEME_REGISTRY);
+function isAuroraFullThemeId(value) {
+    return value in themeColors;
+}
+/** Texto legible por defecto para tooltips (p. ej. `Ocean Mint · Light`). */
+function formatAuroraThemeTooltip(entry) {
+    var family = entry.colorFamily
+        .replace(/([A-Z])/g, " $1")
+        .trim()
+        .split(/\s+/)
+        .map(function (w) { return w.charAt(0).toUpperCase() + w.slice(1).toLowerCase(); })
+        .join(" ");
+    var mode = entry.mode === "light" ? "Light" : "Dark";
+    return "".concat(family, " \u00B7 ").concat(mode);
+}
+
 var THEME_COLOR_HEX_MAP = {
     blue: "#006fee",
     purple: "#7828c8",
@@ -6522,6 +6777,7 @@ var THEME_COLOR_HEX_MAP = {
     green: "#16c964",
     coral: "#ff4f4f",
     skyBlue: "#60A5FA",
+    oceanMint: "#26a5e5",
 };
 function hexToRgb$1(hex) {
     var clean = hex.replace("#", "");
@@ -6705,11 +6961,6 @@ function removeCustomPrimaryColor() {
     }
 }
 
-/**
- * @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.
  * Supports both named ThemeColor values and arbitrary hex colors.
@@ -6884,6 +7135,9 @@ Object.defineProperty(exports, "loadIcons", {
     enumerable: true,
     get: function () { return react$1.loadIcons; }
 });
+exports.ALL_THEMES = ALL_THEMES;
+exports.AURORA_THEME_FAMILIES = AURORA_THEME_FAMILIES;
+exports.AURORA_THEME_REGISTRY = AURORA_THEME_REGISTRY;
 exports.AccordionList = AccordionList;
 exports.AddHolidayForm = AddHolidayForm;
 exports.AnalyticsCard = AnalyticsCard;
@@ -6930,6 +7184,7 @@ exports.P = P;
 exports.Pagination = Pagination;
 exports.Phone = Phone;
 exports.PromotionalBanner = PromotionalBanner;
+exports.REGISTERED_THEME_COLORS = REGISTERED_THEME_COLORS;
 exports.RangeFilter = RangeFilter;
 exports.RowSteps = RowSteps;
 exports.SEGMENTATION_DEFAULT_TRANSLATIONS = DEFAULT_TRANSLATIONS$1;
@@ -6961,11 +7216,14 @@ exports.WizardSidebar = WizardSidebar;
 exports.applyCustomPrimaryColor = applyCustomPrimaryColor;
 exports.defaultCountries = uniqueCountries;
 exports.defaultTranslations = defaultTranslations$4;
+exports.formatAuroraThemeTooltip = formatAuroraThemeTooltip;
 exports.generateThemeColorScale = generateThemeColorScale;
 exports.getContrastForeground = getContrastForeground;
+exports.getRegisteredThemeColorBases = getRegisteredThemeColorBases;
 exports.getSelectedKeyFromPath = getSelectedKeyFromPath;
 exports.hexToThemeColor = hexToThemeColor;
 exports.hslToCssValue = hslToCssValue;
+exports.isAuroraFullThemeId = isAuroraFullThemeId;
 exports.isExactThemeColor = isExactThemeColor;
 exports.isGroupState = isGroupState;
 exports.isHexColor = isHexColor;