@beweco/aurora-ui 0.6.51 → 0.6.52

package/dist/index.cjs.js

@@ -659,7 +659,7 @@ var defaultTranslations$d = {
     predefinedColorsLabel: "Colores predefinidos",
     recentColorsLabel: "Colores recientes",
     noRecentColors: "No hay colores recientes",
-    invalidColorFormat: "Formato de color inválido. Usa #RRGGBB",
+    invalidColorFormat: "El código de color no es un formato HEX válido (Ej: #FF5733 o FFA07A)",
     colorPreview: "Vista previa del color",
 };
 /**
@@ -713,7 +713,7 @@ var stripHash = function (color) { return color.replace(/^#+/, ""); };
  * />
  * ```
  */
-var ColorPicker = function (_a) {
+var ColorPicker = React.forwardRef(function (_a, ref) {
     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;
@@ -775,26 +775,61 @@ var ColorPicker = function (_a) {
         onChange(newColor);
     };
     /**
-     * Handle text input change
+     * Handle text input change — passive: no validation, normalization, or
+     * onChange propagation while typing. We only update local state and clear
+     * any stale error so the user can correct an invalid value without the
+     * red border lingering. Validation (and stripping of the leading "#")
+     * runs on blur.
+     *
+     * While typing we let the user see whatever they pressed — including a
+     * leading "#" — so the input feels responsive. To prevent a double "#"
+     * on screen, the fixed prefix in `startContent` is hidden while
+     * `textValue` already starts with "#". The cap is `7` (1 "#" + 6 hex)
+     * when the user opted into a leading "#", otherwise `6`.
      */
     var handleTextChange = function (newValue) {
-        // Strip any "#" the user types or pastes — the prefix is fixed in the UI.
-        var cleaned = stripHash(newValue);
-        setTextValue(cleaned);
-        // Validate the candidate hex color with "#" prepended
-        var candidate = "#".concat(cleaned);
-        if (isValidHexColor(candidate)) {
-            var normalized = normalizeHexColor(candidate);
-            setIsInvalidFormat(false);
-            onChange(normalized);
-        }
-        else if (cleaned.length >= 3) {
-            // Show error only if user has typed enough characters
+        var max = newValue.startsWith("#") ? 7 : 6;
+        setTextValue(newValue.slice(0, max));
+        setIsInvalidFormat(false);
+    };
+    /**
+     * Validate the current hex input. Updates `isInvalidFormat` and, when
+     * the input is a valid hex, normalizes the display and propagates via
+     * `onChange`. Returns whether the input is acceptable so a caller can
+     * decide to block submission.
+     *
+     * Empty + not required → valid (no error, no propagation).
+     * Empty + required → invalid (error).
+     * Valid (3 or 6 hex chars, with or without leading "#") → normalize, sync
+     * display to canonical form, propagate, valid.
+     * Otherwise → invalid (error, no propagation).
+     */
+    var validate = React.useCallback(function () {
+        // User may have typed a leading "#" — strip it so it doesn't end up
+        // as "##" once we prepend "#" for the regex check.
+        var trimmed = stripHash(textValue.trim());
+        if (trimmed === "") {
+            var valid = !required;
+            setIsInvalidFormat(!valid);
+            // Drop any residual "#" the user typed but never followed up on,
+            // so the field reads as truly empty after blur.
+            setTextValue("");
+            return valid;
+        }
+        var candidate = "#".concat(trimmed);
+        if (!isValidHexColor(candidate)) {
             setIsInvalidFormat(true);
+            return false;
         }
-        else {
-            setIsInvalidFormat(false);
-        }
+        var normalized = normalizeHexColor(candidate);
+        setIsInvalidFormat(false);
+        setTextValue(stripHash(normalized));
+        onChange(normalized);
+        return true;
+    }, [textValue, required, onChange]);
+    React.useImperativeHandle(ref, function () { return ({ validate: validate }); }, [validate]);
+    var handleTextBlur = function () {
+        validate();
     };
     /**
      * Handle predefined color selection
@@ -813,17 +848,17 @@ var ColorPicker = function (_a) {
     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-8 h-8 rounded-full border-2 cursor-pointer transition-all\n\t\t\t\tfocus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1\n\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-110", "\n\t\t\t\t").concat(isSelected
             ? "border-primary-500 scale-110 ring-2 ring-primary-500 ring-offset-1"
             : "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 flex-col gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("input", { type: "color", id: inputId, name: name, value: "#".concat(textValue), onChange: handleColorPickerChange, disabled: disabled, className: "\n\t\t\t\t\t\t\tw-10 h-10 rounded-lg cursor-pointer border-2 flex-shrink-0\n\t\t\t\t\t\t\ttransition-colors appearance-none bg-transparent p-0.5\n\t\t\t\t\t\t\tfocus:border-primary-500\n\t\t\t\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:border-default-400", "\n\t\t\t\t\t\t\t").concat(error
+    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 flex-col gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("input", { type: "color", id: inputId, name: name, value: "#".concat(stripHash(textValue)), onChange: handleColorPickerChange, disabled: disabled, className: "\n\t\t\t\t\t\t\tw-10 h-10 rounded-lg cursor-pointer border-2 flex-shrink-0\n\t\t\t\t\t\t\ttransition-colors appearance-none bg-transparent p-0.5\n\t\t\t\t\t\t\tfocus:border-primary-500\n\t\t\t\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:border-default-400", "\n\t\t\t\t\t\t\t").concat(error
                                     ? "border-danger dark:border-danger-400"
-                                    : "border-default-300 dark:border-default-700", "\n\t\t\t\t\t\t"), "aria-label": t.customColorLabel, title: t.customColorLabel }), jsxRuntime.jsx(react.Input, { type: "text", value: textValue, onValueChange: handleTextChange, placeholder: t.placeholder, disabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered", maxLength: 6, classNames: {
+                                    : "border-default-300 dark:border-default-700", "\n\t\t\t\t\t\t"), "aria-label": t.customColorLabel, title: t.customColorLabel }), jsxRuntime.jsx(react.Input, { type: "text", value: textValue, onValueChange: handleTextChange, onBlur: handleTextBlur, placeholder: t.placeholder, disabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered", classNames: {
                                     input: "uppercase font-mono text-small",
                                     inputWrapper: "min-h-8 h-8 focus-within:!border-primary-500",
-                                }, startContent: jsxRuntime.jsx("span", { className: "text-default-400 text-sm", children: "#" }) })] }), (error || isInvalidFormat) && (jsxRuntime.jsx("p", { className: "text-tiny text-danger", children: isInvalidFormat ? t.invalidColorFormat : errorText }))] }), 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) {
+                                }, startContent: textValue.startsWith("#") ? null : (jsxRuntime.jsx("span", { className: "text-default-400 text-sm", children: "#" })) })] }), (error || isInvalidFormat) && (jsxRuntime.jsx("p", { className: "text-tiny text-danger", children: isInvalidFormat ? t.invalidColorFormat : errorText }))] }), 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({

package/dist/index.esm.js

@@ -4,7 +4,7 @@ export { Slider } from '@heroui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Icon } from '@iconify/react';
 export { loadIcons } from '@iconify/react';
-import React, { useId, useState, useCallback, useMemo, useEffect, createContext, useContext, useRef, useLayoutEffect, memo, createElement, Fragment as Fragment$1, forwardRef, useImperativeHandle } from 'react';
+import React, { useId, useState, useCallback, useMemo, forwardRef, useEffect, useImperativeHandle, createContext, useContext, useRef, useLayoutEffect, memo, createElement, Fragment as Fragment$1 } from 'react';
 import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, Tooltip, Area, LineChart, YAxis, Line } from 'recharts';
 import { createPortal } from 'react-dom';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -660,7 +660,7 @@ var defaultTranslations$d = {
     predefinedColorsLabel: "Colores predefinidos",
     recentColorsLabel: "Colores recientes",
     noRecentColors: "No hay colores recientes",
-    invalidColorFormat: "Formato de color inválido. Usa #RRGGBB",
+    invalidColorFormat: "El código de color no es un formato HEX válido (Ej: #FF5733 o FFA07A)",
     colorPreview: "Vista previa del color",
 };
 /**
@@ -714,7 +714,7 @@ var stripHash = function (color) { return color.replace(/^#+/, ""); };
  * />
  * ```
  */
-var ColorPicker = function (_a) {
+var ColorPicker = forwardRef(function (_a, ref) {
     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 = useId();
     var inputId = id || generatedId;
@@ -776,26 +776,61 @@ var ColorPicker = function (_a) {
         onChange(newColor);
     };
     /**
-     * Handle text input change
+     * Handle text input change — passive: no validation, normalization, or
+     * onChange propagation while typing. We only update local state and clear
+     * any stale error so the user can correct an invalid value without the
+     * red border lingering. Validation (and stripping of the leading "#")
+     * runs on blur.
+     *
+     * While typing we let the user see whatever they pressed — including a
+     * leading "#" — so the input feels responsive. To prevent a double "#"
+     * on screen, the fixed prefix in `startContent` is hidden while
+     * `textValue` already starts with "#". The cap is `7` (1 "#" + 6 hex)
+     * when the user opted into a leading "#", otherwise `6`.
      */
     var handleTextChange = function (newValue) {
-        // Strip any "#" the user types or pastes — the prefix is fixed in the UI.
-        var cleaned = stripHash(newValue);
-        setTextValue(cleaned);
-        // Validate the candidate hex color with "#" prepended
-        var candidate = "#".concat(cleaned);
-        if (isValidHexColor(candidate)) {
-            var normalized = normalizeHexColor(candidate);
-            setIsInvalidFormat(false);
-            onChange(normalized);
-        }
-        else if (cleaned.length >= 3) {
-            // Show error only if user has typed enough characters
+        var max = newValue.startsWith("#") ? 7 : 6;
+        setTextValue(newValue.slice(0, max));
+        setIsInvalidFormat(false);
+    };
+    /**
+     * Validate the current hex input. Updates `isInvalidFormat` and, when
+     * the input is a valid hex, normalizes the display and propagates via
+     * `onChange`. Returns whether the input is acceptable so a caller can
+     * decide to block submission.
+     *
+     * Empty + not required → valid (no error, no propagation).
+     * Empty + required → invalid (error).
+     * Valid (3 or 6 hex chars, with or without leading "#") → normalize, sync
+     * display to canonical form, propagate, valid.
+     * Otherwise → invalid (error, no propagation).
+     */
+    var validate = useCallback(function () {
+        // User may have typed a leading "#" — strip it so it doesn't end up
+        // as "##" once we prepend "#" for the regex check.
+        var trimmed = stripHash(textValue.trim());
+        if (trimmed === "") {
+            var valid = !required;
+            setIsInvalidFormat(!valid);
+            // Drop any residual "#" the user typed but never followed up on,
+            // so the field reads as truly empty after blur.
+            setTextValue("");
+            return valid;
+        }
+        var candidate = "#".concat(trimmed);
+        if (!isValidHexColor(candidate)) {
             setIsInvalidFormat(true);
+            return false;
         }
-        else {
-            setIsInvalidFormat(false);
-        }
+        var normalized = normalizeHexColor(candidate);
+        setIsInvalidFormat(false);
+        setTextValue(stripHash(normalized));
+        onChange(normalized);
+        return true;
+    }, [textValue, required, onChange]);
+    useImperativeHandle(ref, function () { return ({ validate: validate }); }, [validate]);
+    var handleTextBlur = function () {
+        validate();
     };
     /**
      * Handle predefined color selection
@@ -814,17 +849,17 @@ var ColorPicker = function (_a) {
     var renderColorCircle = function (colorValue, colorName, isSelected) { return (jsx("button", { type: "button", disabled: disabled, onClick: function () { return handlePredefinedColorClick(colorValue); }, className: "\n\t\t\t\tw-8 h-8 rounded-full border-2 cursor-pointer transition-all\n\t\t\t\tfocus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1\n\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-110", "\n\t\t\t\t").concat(isSelected
             ? "border-primary-500 scale-110 ring-2 ring-primary-500 ring-offset-1"
             : "border-default-700", "\n\t\t\t"), style: { backgroundColor: colorValue }, title: colorName, "aria-label": colorName }, colorValue)); };
-    return (jsxs("div", { className: "flex flex-col gap-3 ".concat(className), children: [label && (jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-foreground", children: [label, required && jsx("span", { className: "text-danger ml-1", children: "*" })] })), jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("input", { type: "color", id: inputId, name: name, value: "#".concat(textValue), onChange: handleColorPickerChange, disabled: disabled, className: "\n\t\t\t\t\t\t\tw-10 h-10 rounded-lg cursor-pointer border-2 flex-shrink-0\n\t\t\t\t\t\t\ttransition-colors appearance-none bg-transparent p-0.5\n\t\t\t\t\t\t\tfocus:border-primary-500\n\t\t\t\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:border-default-400", "\n\t\t\t\t\t\t\t").concat(error
+    return (jsxs("div", { className: "flex flex-col gap-3 ".concat(className), children: [label && (jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-foreground", children: [label, required && jsx("span", { className: "text-danger ml-1", children: "*" })] })), jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("input", { type: "color", id: inputId, name: name, value: "#".concat(stripHash(textValue)), onChange: handleColorPickerChange, disabled: disabled, className: "\n\t\t\t\t\t\t\tw-10 h-10 rounded-lg cursor-pointer border-2 flex-shrink-0\n\t\t\t\t\t\t\ttransition-colors appearance-none bg-transparent p-0.5\n\t\t\t\t\t\t\tfocus:border-primary-500\n\t\t\t\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:border-default-400", "\n\t\t\t\t\t\t\t").concat(error
                                     ? "border-danger dark:border-danger-400"
-                                    : "border-default-300 dark:border-default-700", "\n\t\t\t\t\t\t"), "aria-label": t.customColorLabel, title: t.customColorLabel }), jsx(Input$1, { type: "text", value: textValue, onValueChange: handleTextChange, placeholder: t.placeholder, disabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered", maxLength: 6, classNames: {
+                                    : "border-default-300 dark:border-default-700", "\n\t\t\t\t\t\t"), "aria-label": t.customColorLabel, title: t.customColorLabel }), jsx(Input$1, { type: "text", value: textValue, onValueChange: handleTextChange, onBlur: handleTextBlur, placeholder: t.placeholder, disabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered", classNames: {
                                     input: "uppercase font-mono text-small",
                                     inputWrapper: "min-h-8 h-8 focus-within:!border-primary-500",
-                                }, startContent: jsx("span", { className: "text-default-400 text-sm", children: "#" }) })] }), (error || isInvalidFormat) && (jsx("p", { className: "text-tiny text-danger", children: isInvalidFormat ? t.invalidColorFormat : errorText }))] }), showPredefinedColors && predefinedColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: predefinedColors.map(function (color) {
+                                }, startContent: textValue.startsWith("#") ? null : (jsx("span", { className: "text-default-400 text-sm", children: "#" })) })] }), (error || isInvalidFormat) && (jsx("p", { className: "text-tiny text-danger", children: isInvalidFormat ? t.invalidColorFormat : errorText }))] }), showPredefinedColors && predefinedColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), 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 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.recentColorsLabel }), 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 = createContext({

package/dist/types/components/color-picker/ColorPicker.d.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { ColorPickerProps } from "./ColorPicker.types";
+import type { ColorPickerHandle, ColorPickerProps } from "./ColorPicker.types";
 /**
  * ColorPicker - Advanced color selection component
  *
@@ -23,5 +23,5 @@ import type { ColorPickerProps } from "./ColorPicker.types";
  * />
  * ```
  */
-export declare const ColorPicker: React.FC<ColorPickerProps>;
+export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<ColorPickerHandle>>;
 //# sourceMappingURL=ColorPicker.d.ts.map

package/dist/types/components/color-picker/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/ColorPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACX,gBAAgB,EAGhB,MAAM,qBAAqB,CAAC;AAkD7B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2PlD,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/ColorPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EACX,iBAAiB,EACjB,gBAAgB,EAGhB,MAAM,qBAAqB,CAAC;AAmD7B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,WAAW,4FAuStB,CAAC"}

package/dist/types/components/color-picker/ColorPicker.types.d.ts

@@ -30,6 +30,18 @@ export interface PredefinedColor {
     /** Optional tooltip */
     tooltip?: string;
 }
+/**
+ * Imperative handle exposed via `ref` so a parent (typically the "Save" /
+ * "Continue" button handler of a form) can force the hex input to re-validate
+ * synchronously and decide whether to proceed.
+ *
+ * `validate()` returns `true` when the current input is acceptable and
+ * `false` when it is not. As a side effect it updates the visible error
+ * state, so the user sees what is blocking submission.
+ */
+export interface ColorPickerHandle {
+    validate: () => boolean;
+}
 /**
  * ColorPicker component props
  */

package/dist/types/components/color-picker/ColorPicker.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.types.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/ColorPicker.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AACH,MAAM,WAAW,uBAAuB;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC/B,wBAAwB;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAChC,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IAEd,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IAErC,mCAAmC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,yCAAyC;IACzC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC,qCAAqC;IACrC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B,4BAA4B;IAC5B,YAAY,CAAC,EAAE,uBAAuB,CAAC;IAEvC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oBAAoB;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,eAAO,MAAM,yBAAyB,EAAE,eAAe,EAyBtD,CAAC"}
+{"version":3,"file":"ColorPicker.types.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/ColorPicker.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AACH,MAAM,WAAW,uBAAuB;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC/B,wBAAwB;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,iBAAiB;IACjC,QAAQ,EAAE,MAAM,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAChC,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IAEd,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IAErC,mCAAmC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,yCAAyC;IACzC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC,qCAAqC;IACrC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B,4BAA4B;IAC5B,YAAY,CAAC,EAAE,uBAAuB,CAAC;IAEvC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oBAAoB;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,eAAO,MAAM,yBAAyB,EAAE,eAAe,EAyBtD,CAAC"}

package/dist/types/components/color-picker/index.d.ts

@@ -1,4 +1,4 @@
 export { ColorPicker } from "./ColorPicker.js";
-export type { ColorPickerProps, ColorPickerTranslations, PredefinedColor, } from "./ColorPicker.types.js";
+export type { ColorPickerHandle, ColorPickerProps, ColorPickerTranslations, PredefinedColor, } from "./ColorPicker.types.js";
 export { DEFAULT_PREDEFINED_COLORS } from "./ColorPicker.types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/color-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EACX,gBAAgB,EAChB,uBAAuB,EACvB,eAAe,GACf,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EACX,iBAAiB,EACjB,gBAAgB,EAChB,uBAAuB,EACvB,eAAe,GACf,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@beweco/aurora-ui",
-	"version": "0.6.51",
+	"version": "0.6.52",
 	"description": "Bewe Aurora UI Component Library",
 	"main": "./dist/index.cjs.js",
 	"module": "./dist/index.esm.js",