@beweco/aurora-ui 0.6.44 → 0.6.46

package/dist/index.cjs.js

@@ -685,6 +685,11 @@ var normalizeHexColor = function (color) {
     }
     return color.toUpperCase();
 };
+/**
+ * Strips leading "#" characters so the text input shows only the hex digits.
+ * The "#" prefix is rendered as a fixed startContent in the Input.
+ */
+var stripHash = function (color) { return color.replace(/^#+/, ""); };
 /**
  * ColorPicker - Advanced color selection component
  *
@@ -713,8 +718,9 @@ var ColorPicker = function (_a) {
     var generatedId = React.useId();
     var inputId = id || generatedId;
     var t = __assign(__assign({}, defaultTranslations$d), translations);
-    // Local state for text input
-    var _m = React.useState(value), textValue = _m[0], setTextValue = _m[1];
+    // Local state for text input — holds the hex digits WITHOUT the leading "#".
+    // The "#" is rendered as a fixed startContent prefix.
+    var _m = React.useState(stripHash(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];
@@ -756,7 +762,7 @@ var ColorPicker = function (_a) {
     }, [value, enableRecentColors, maxRecentColors, recentColorsStorageKey]);
     // Sync text value when prop value changes
     React.useEffect(function () {
-        setTextValue(value);
+        setTextValue(stripHash(value));
         setIsInvalidFormat(false);
     }, [value]);
     /**
@@ -764,7 +770,7 @@ var ColorPicker = function (_a) {
      */
     var handleColorPickerChange = function (e) {
         var newColor = normalizeHexColor(e.target.value);
-        setTextValue(newColor);
+        setTextValue(stripHash(newColor));
         setIsInvalidFormat(false);
         onChange(newColor);
     };
@@ -772,14 +778,17 @@ var ColorPicker = function (_a) {
      * Handle text input change
      */
     var handleTextChange = function (newValue) {
-        setTextValue(newValue);
-        // Validate format
-        if (isValidHexColor(newValue)) {
-            var normalized = normalizeHexColor(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 (newValue.length >= 4) {
+        else if (cleaned.length >= 3) {
             // Show error only if user has typed enough characters
             setIsInvalidFormat(true);
         }
@@ -794,7 +803,7 @@ var ColorPicker = function (_a) {
         if (disabled)
             return;
         var normalized = normalizeHexColor(colorValue);
-        setTextValue(normalized);
+        setTextValue(stripHash(normalized));
         setIsInvalidFormat(false);
         onChange(normalized);
     };
@@ -804,9 +813,9 @@ 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: 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(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", 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, placeholder: t.placeholder, disabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered", maxLength: 6, 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) {
@@ -6939,7 +6948,7 @@ var DrawerFiltersHeader = function (_a) {
     return (jsxRuntime.jsxs("div", { className: "px-6 pt-10", children: [jsxRuntime.jsx(H2, { className: "text-xl font-semibold text-foreground mb-2", children: title }), jsxRuntime.jsx(P, { className: "text-default-500", children: description })] }));
 };
 
-var NO_YEAR_CLASS = "[&_[data-type='year']]:hidden [&_[data-type='literal']:has(+[data-type='year'])]:hidden";
+var NO_YEAR_CLASS = "[&_[data-type='year']]:sr-only [&_[data-type='literal']:has(+[data-type='year'])]:hidden";
 var DayMonthPicker = function (_a) {
     var value = _a.value, onChange = _a.onChange, translations = _a.translations;
     var t = __assign({ dayMonthAriaLabel: "Seleccionar mes y día", dayMonthRangeAriaLabel: "Seleccionar rango de mes y día", dayMonthSingleOption: "Día específico", dayMonthRangeOption: "Rango de fechas" }, translations);
@@ -6973,7 +6982,22 @@ var DayMonthPicker = function (_a) {
     var currentYearDate = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
     var pickerValue = (value === null || value === void 0 ? void 0 : value.type) === "dayMonth" ? value.dayMonth : null;
     var rangeValue = (value === null || value === void 0 ? void 0 : value.type) === "dayMonthRange" ? value.dayMonthRange : null;
-    return (jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxRuntime.jsxs(react.RadioGroup, { color: "primary", orientation: "horizontal", size: "sm", value: mode, onValueChange: handleModeChange, children: [jsxRuntime.jsx(react.Radio, { value: "single", children: t.dayMonthSingleOption }), jsxRuntime.jsx(react.Radio, { value: "range", children: t.dayMonthRangeOption })] }), mode === "single" ? (pickerValue ? (jsxRuntime.jsx(DatePicker, { value: pickerValue, onChange: handleSingleChange, "aria-label": t.dayMonthAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) }, "dmp-c")) : (jsxRuntime.jsx(DatePicker, { placeholderValue: currentYearDate, onChange: handleSingleChange, "aria-label": t.dayMonthAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) }, "dmp-u"))) : (rangeValue ? (jsxRuntime.jsx(DateRangePicker, { value: rangeValue, onChange: handleRangeChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }, "dmpr-c")) : (jsxRuntime.jsx(DateRangePicker, { placeholderValue: currentYearDate, onChange: handleRangeChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }, "dmpr-u")))] }));
+    // When the year segment (sr-only, focusable) receives focus after the user
+    // types month and day, auto-type the current year so onChange can fire.
+    // Only attached to uncontrolled pickers (no committed value yet).
+    var autoFillYear = React.useCallback(function () {
+        var year = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()).year.toString();
+        setTimeout(function () {
+            var target = document.activeElement;
+            if ((target === null || target === void 0 ? void 0 : target.getAttribute("data-type")) === "year") {
+                for (var _i = 0, year_1 = year; _i < year_1.length; _i++) {
+                    var char = year_1[_i];
+                    target.dispatchEvent(new KeyboardEvent("keydown", { key: char, bubbles: true, cancelable: true }));
+                }
+            }
+        }, 0);
+    }, []);
+    return (jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxRuntime.jsxs(react.RadioGroup, { color: "primary", orientation: "horizontal", size: "sm", value: mode, onValueChange: handleModeChange, children: [jsxRuntime.jsx(react.Radio, { value: "single", children: t.dayMonthSingleOption }), jsxRuntime.jsx(react.Radio, { value: "range", children: t.dayMonthRangeOption })] }), mode === "single" ? (pickerValue ? (jsxRuntime.jsx(DatePicker, { value: pickerValue, onChange: handleSingleChange, "aria-label": t.dayMonthAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) }, "dmp-c")) : (jsxRuntime.jsx(DatePicker, { placeholderValue: currentYearDate, onChange: handleSingleChange, onFocus: autoFillYear, "aria-label": t.dayMonthAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) }, "dmp-u"))) : (rangeValue ? (jsxRuntime.jsx(DateRangePicker, { value: rangeValue, onChange: handleRangeChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }, "dmpr-c")) : (jsxRuntime.jsx(DateRangePicker, { placeholderValue: currentYearDate, onChange: handleRangeChange, onFocus: autoFillYear, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }, "dmpr-u")))] }));
 };
 
 /**

package/dist/index.esm.js

@@ -686,6 +686,11 @@ var normalizeHexColor = function (color) {
     }
     return color.toUpperCase();
 };
+/**
+ * Strips leading "#" characters so the text input shows only the hex digits.
+ * The "#" prefix is rendered as a fixed startContent in the Input.
+ */
+var stripHash = function (color) { return color.replace(/^#+/, ""); };
 /**
  * ColorPicker - Advanced color selection component
  *
@@ -714,8 +719,9 @@ var ColorPicker = function (_a) {
     var generatedId = useId();
     var inputId = id || generatedId;
     var t = __assign(__assign({}, defaultTranslations$d), translations);
-    // Local state for text input
-    var _m = useState(value), textValue = _m[0], setTextValue = _m[1];
+    // Local state for text input — holds the hex digits WITHOUT the leading "#".
+    // The "#" is rendered as a fixed startContent prefix.
+    var _m = useState(stripHash(value)), textValue = _m[0], setTextValue = _m[1];
     var _o = useState(false), isInvalidFormat = _o[0], setIsInvalidFormat = _o[1];
     // Recent colors state
     var _p = useState([]), recentColors = _p[0], setRecentColors = _p[1];
@@ -757,7 +763,7 @@ var ColorPicker = function (_a) {
     }, [value, enableRecentColors, maxRecentColors, recentColorsStorageKey]);
     // Sync text value when prop value changes
     useEffect(function () {
-        setTextValue(value);
+        setTextValue(stripHash(value));
         setIsInvalidFormat(false);
     }, [value]);
     /**
@@ -765,7 +771,7 @@ var ColorPicker = function (_a) {
      */
     var handleColorPickerChange = function (e) {
         var newColor = normalizeHexColor(e.target.value);
-        setTextValue(newColor);
+        setTextValue(stripHash(newColor));
         setIsInvalidFormat(false);
         onChange(newColor);
     };
@@ -773,14 +779,17 @@ var ColorPicker = function (_a) {
      * Handle text input change
      */
     var handleTextChange = function (newValue) {
-        setTextValue(newValue);
-        // Validate format
-        if (isValidHexColor(newValue)) {
-            var normalized = normalizeHexColor(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 (newValue.length >= 4) {
+        else if (cleaned.length >= 3) {
             // Show error only if user has typed enough characters
             setIsInvalidFormat(true);
         }
@@ -795,7 +804,7 @@ var ColorPicker = function (_a) {
         if (disabled)
             return;
         var normalized = normalizeHexColor(colorValue);
-        setTextValue(normalized);
+        setTextValue(stripHash(normalized));
         setIsInvalidFormat(false);
         onChange(normalized);
     };
@@ -805,9 +814,9 @@ 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: 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(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", 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, placeholder: t.placeholder, disabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered", maxLength: 6, 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) {
@@ -6940,7 +6949,7 @@ var DrawerFiltersHeader = function (_a) {
     return (jsxs("div", { className: "px-6 pt-10", children: [jsx(H2, { className: "text-xl font-semibold text-foreground mb-2", children: title }), jsx(P, { className: "text-default-500", children: description })] }));
 };
 
-var NO_YEAR_CLASS = "[&_[data-type='year']]:hidden [&_[data-type='literal']:has(+[data-type='year'])]:hidden";
+var NO_YEAR_CLASS = "[&_[data-type='year']]:sr-only [&_[data-type='literal']:has(+[data-type='year'])]:hidden";
 var DayMonthPicker = function (_a) {
     var value = _a.value, onChange = _a.onChange, translations = _a.translations;
     var t = __assign({ dayMonthAriaLabel: "Seleccionar mes y día", dayMonthRangeAriaLabel: "Seleccionar rango de mes y día", dayMonthSingleOption: "Día específico", dayMonthRangeOption: "Rango de fechas" }, translations);
@@ -6974,7 +6983,22 @@ var DayMonthPicker = function (_a) {
     var currentYearDate = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
     var pickerValue = (value === null || value === void 0 ? void 0 : value.type) === "dayMonth" ? value.dayMonth : null;
     var rangeValue = (value === null || value === void 0 ? void 0 : value.type) === "dayMonthRange" ? value.dayMonthRange : null;
-    return (jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxs(RadioGroup, { color: "primary", orientation: "horizontal", size: "sm", value: mode, onValueChange: handleModeChange, children: [jsx(Radio, { value: "single", children: t.dayMonthSingleOption }), jsx(Radio, { value: "range", children: t.dayMonthRangeOption })] }), mode === "single" ? (pickerValue ? (jsx(DatePicker, { value: pickerValue, onChange: handleSingleChange, "aria-label": t.dayMonthAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) }, "dmp-c")) : (jsx(DatePicker, { placeholderValue: currentYearDate, onChange: handleSingleChange, "aria-label": t.dayMonthAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) }, "dmp-u"))) : (rangeValue ? (jsx(DateRangePicker, { value: rangeValue, onChange: handleRangeChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }, "dmpr-c")) : (jsx(DateRangePicker, { placeholderValue: currentYearDate, onChange: handleRangeChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }, "dmpr-u")))] }));
+    // When the year segment (sr-only, focusable) receives focus after the user
+    // types month and day, auto-type the current year so onChange can fire.
+    // Only attached to uncontrolled pickers (no committed value yet).
+    var autoFillYear = useCallback(function () {
+        var year = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()).year.toString();
+        setTimeout(function () {
+            var target = document.activeElement;
+            if ((target === null || target === void 0 ? void 0 : target.getAttribute("data-type")) === "year") {
+                for (var _i = 0, year_1 = year; _i < year_1.length; _i++) {
+                    var char = year_1[_i];
+                    target.dispatchEvent(new KeyboardEvent("keydown", { key: char, bubbles: true, cancelable: true }));
+                }
+            }
+        }, 0);
+    }, []);
+    return (jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxs(RadioGroup, { color: "primary", orientation: "horizontal", size: "sm", value: mode, onValueChange: handleModeChange, children: [jsx(Radio, { value: "single", children: t.dayMonthSingleOption }), jsx(Radio, { value: "range", children: t.dayMonthRangeOption })] }), mode === "single" ? (pickerValue ? (jsx(DatePicker, { value: pickerValue, onChange: handleSingleChange, "aria-label": t.dayMonthAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) }, "dmp-c")) : (jsx(DatePicker, { placeholderValue: currentYearDate, onChange: handleSingleChange, onFocus: autoFillYear, "aria-label": t.dayMonthAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) }, "dmp-u"))) : (rangeValue ? (jsx(DateRangePicker, { value: rangeValue, onChange: handleRangeChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }, "dmpr-c")) : (jsx(DateRangePicker, { placeholderValue: currentYearDate, onChange: handleRangeChange, onFocus: autoFillYear, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }, "dmpr-u")))] }));
 };
 
 /**

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;AA4C7B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsPlD,CAAC"}
+{"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"}

package/dist/types/components/drawer-filters/_internal/DayMonthPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DayMonthPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer-filters/_internal/DayMonthPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAKxE,UAAU,mBAAmB;IAC5B,IAAI,EAAE,UAAU,GAAG,eAAe,CAAC;IACnC,QAAQ,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,aAAa,EAAE,UAAU,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;CAC5C;AAED,UAAU,mBAAmB;IAC5B,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/C,YAAY,CAAC,EAAE,yBAAyB,CAAC;CACzC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2GxD,CAAC"}
+{"version":3,"file":"DayMonthPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer-filters/_internal/DayMonthPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAKxE,UAAU,mBAAmB;IAC5B,IAAI,EAAE,UAAU,GAAG,eAAe,CAAC;IACnC,QAAQ,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,aAAa,EAAE,UAAU,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;CAC5C;AAED,UAAU,mBAAmB;IAC5B,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/C,YAAY,CAAC,EAAE,yBAAyB,CAAC;CACzC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8HxD,CAAC"}

package/dist/types/components/drawer-filters/index.d.ts

@@ -1,3 +1,3 @@
 export { DrawerFilters } from "./DrawerFilters";
-export type { DrawerFiltersProps, DrawerFiltersConfig, DrawerFiltersTranslations, FilterData, FilterType, FilterValues, SelectFilterData, MultiSelectFilterData, RangeFilterData, DateFilterData, DateFilterValue, } from "./DrawerFilters.types";
+export type { DrawerFiltersProps, DrawerFiltersConfig, DrawerFiltersTranslations, FilterData, FilterType, FilterValues, SelectFilterData, SelectFilterValue, MultiSelectFilterData, MultiSelectFilterValue, RangeFilterData, RangeFilterValue, DateFilterData, DateFilterValue, TextFilterValue, NumberFilterValue, } from "./DrawerFilters.types";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/drawer-filters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer-filters/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,YAAY,EACX,kBAAkB,EAClB,mBAAmB,EACnB,yBAAyB,EACzB,UAAU,EACV,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,eAAe,EACf,cAAc,EACd,eAAe,GACf,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer-filters/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,YAAY,EACX,kBAAkB,EAClB,mBAAmB,EACnB,yBAAyB,EACzB,UAAU,EACV,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,qBAAqB,EACrB,sBAAsB,EACtB,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,GACjB,MAAM,uBAAuB,CAAC"}

package/package.json

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