@aspprev/versi-ds 0.2.0 → 0.4.0

package/dist/{chunk-FR5W52XU.js → chunk-LPLXAKPJ.js}

@@ -2,7 +2,7 @@ import {
   Tooltip_default,
   getFloatingLayerClass,
   mergeAriaDescribedBy
-} from "./chunk-ET2BGHTO.js";
+} from "./chunk-FTRF27XF.js";
 import {
   COUNTRY_OPTIONS,
   PHONE_COUNTRY_OPTIONS,
@@ -199,7 +199,7 @@ var Input = (_a) => {
   const isPasswordType = type === "password";
   const [showPassword, setShowPassword] = useState(false);
   const currentType = isPasswordType ? showPassword ? "text" : "password" : type;
-  const hasError = Boolean(meta.touched && meta.error);
+  const hasError = Boolean(meta.touched && meta.error || error);
   const inputId = (_a2 = rest.id) != null ? _a2 : name;
   const errorId = `${inputId}-error`;
   const ariaDescribedBy = mergeAriaDescribedBy(
@@ -2159,7 +2159,14 @@ import {
 } from "date-fns";
 import { ptBR } from "date-fns/locale/pt-BR";
 import { FormikContext, getIn } from "formik";
-import { useContext, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef5, useState as useState4 } from "react";
+import {
+  useContext,
+  useEffect as useEffect3,
+  useId as useId3,
+  useMemo as useMemo2,
+  useRef as useRef5,
+  useState as useState4
+} from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { MdCalendarMonth, MdChevronLeft, MdChevronRight } from "react-icons/md";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -2223,10 +2230,12 @@ var UnifiedDatePicker = ({
   name = "data",
   error,
   errorText,
+  helperText,
   defaultView = "days",
   navigationVariant = "drilldown",
   selectionMode = "day",
   showAdjacentDays = true,
+  ariaLabel,
   className
 }) => {
   const formik = useContext(
@@ -2253,10 +2262,19 @@ var UnifiedDatePicker = ({
   const containerRef = useRef5(null);
   const inputRef = useRef5(null);
   const dropdownRef = useRef5(null);
+  const calendarId = `date-picker-${useId3()}`;
+  const wasOpenRef = useRef5(false);
   const rafRef = useRef5(null);
   const [isMounted, setIsMounted] = useState4(false);
   const [panelNeedsScroll, setPanelNeedsScroll] = useState4(false);
   const [dropdownStyle, setDropdownStyle] = useState4({});
+  useEffect3(() => {
+    var _a, _b;
+    if (wasOpenRef.current && !isOpen && ((_a = dropdownRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
+      (_b = inputRef.current) == null ? void 0 : _b.focus();
+    }
+    wasOpenRef.current = isOpen;
+  }, [isOpen]);
   useEffect3(() => {
     setIsMounted(true);
   }, []);
@@ -2278,7 +2296,7 @@ var UnifiedDatePicker = ({
       }
     };
     const onKeyDown = (event) => {
-      if (event.key === "Escape") setIsOpen(false);
+      if (event.key === "Escape") closeCalendar();
     };
     document.addEventListener("mousedown", onMouseDown);
     document.addEventListener("keydown", onKeyDown);
@@ -2359,6 +2377,11 @@ var UnifiedDatePicker = ({
     setIsOpen(true);
     (_a = inputRef.current) == null ? void 0 : _a.focus();
   };
+  const closeCalendar = () => {
+    var _a;
+    setIsOpen(false);
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
   const getDaysInView = () => {
     const start = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 0 });
     const end = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 0 });
@@ -2373,7 +2396,7 @@ var UnifiedDatePicker = ({
     setInputError(null);
     setViewDate(day);
     touchField();
-    setIsOpen(false);
+    closeCalendar();
   };
   const handleMonthClick = (monthIndex) => {
     const candidate = new Date(viewDate.getFullYear(), monthIndex, 1);
@@ -2385,7 +2408,7 @@ var UnifiedDatePicker = ({
       setDraftValue(formatDateForInput(nextDate, selectionMode));
       setInputError(null);
       touchField();
-      setIsOpen(false);
+      closeCalendar();
       return;
     }
     setViewDate((currentDate) => {
@@ -2412,7 +2435,7 @@ var UnifiedDatePicker = ({
       setDraftValue(formatDateForInput(nextDate, selectionMode));
       setInputError(null);
       touchField();
-      setIsOpen(false);
+      closeCalendar();
       return;
     }
     setViewDate((currentDate) => {
@@ -2436,6 +2459,36 @@ var UnifiedDatePicker = ({
       return nextDate;
     });
   };
+  const moveCalendarFocus = (event, columns) => {
+    var _a, _b;
+    const movement = {
+      ArrowLeft: -1,
+      ArrowRight: 1,
+      ArrowUp: -columns,
+      ArrowDown: columns
+    };
+    const buttons = Array.from(
+      (_b = (_a = dropdownRef.current) == null ? void 0 : _a.querySelectorAll(
+        '[data-calendar-option="true"]:not(:disabled)'
+      )) != null ? _b : []
+    );
+    const currentIndex = buttons.indexOf(event.currentTarget);
+    if (currentIndex < 0) return;
+    let nextIndex;
+    if (event.key in movement) {
+      nextIndex = currentIndex + movement[event.key];
+    } else if (event.key === "Home") {
+      nextIndex = currentIndex - currentIndex % columns;
+    } else if (event.key === "End") {
+      nextIndex = currentIndex - currentIndex % columns + columns - 1;
+    } else {
+      return;
+    }
+    const nextButton = buttons[nextIndex];
+    if (!nextButton) return;
+    event.preventDefault();
+    nextButton.focus();
+  };
   const commitDraftValue = (rawValue) => {
     const normalizedValue = formatInputValue(rawValue, selectionMode);
     setDraftValue(normalizedValue);
@@ -2515,6 +2568,8 @@ var UnifiedDatePicker = ({
       ref: containerRef,
       label,
       labelFor: name,
+      description: helperText,
+      descriptionId: `${name}-description`,
       invalid: hasError,
       message: resolvedErrorText,
       messageId: errorId,
@@ -2538,8 +2593,16 @@ var UnifiedDatePicker = ({
                   ref: inputRef,
                   id: name,
                   name,
+                  "aria-label": ariaLabel != null ? ariaLabel : !label ? "Data" : void 0,
+                  role: "combobox",
                   "aria-invalid": hasError || void 0,
-                  "aria-describedby": hasError && resolvedErrorText ? errorId : void 0,
+                  "aria-describedby": mergeAriaDescribedBy(
+                    !hasError && helperText !== void 0 ? `${name}-description` : void 0,
+                    hasError && resolvedErrorText ? errorId : void 0
+                  ),
+                  "aria-haspopup": "dialog",
+                  "aria-expanded": isOpen,
+                  "aria-controls": isOpen ? calendarId : void 0,
                   type: "text",
                   inputMode: "numeric",
                   autoComplete: "off",
@@ -2571,7 +2634,7 @@ var UnifiedDatePicker = ({
                   onKeyDown: (event) => {
                     if (event.key === "Enter") {
                       commitDraftValue(draftValue);
-                      setIsOpen(false);
+                      closeCalendar();
                     }
                   },
                   className: FIELD_INPUT_CLASS
@@ -2603,10 +2666,13 @@ var UnifiedDatePicker = ({
             "div",
             {
               ref: dropdownRef,
+              id: calendarId,
+              role: "dialog",
+              "aria-label": selectionMode === "year" ? "Selecionar ano" : selectionMode === "month" ? "Selecionar m\xEAs" : "Selecionar data",
               style: dropdownStyle,
               className: classNames6(
                 getFloatingLayerClass(containerRef.current, "popover"),
-                "rounded-sm border border-border-default bg-white shadow-md transition-all duration-150",
+                "rounded-sm border border-border-default bg-white shadow-md transition-all duration-150 motion-reduce:transition-none",
                 panelNeedsScroll ? "overflow-y-auto overscroll-contain" : "overflow-visible",
                 "py-3"
               ),
@@ -2692,100 +2758,141 @@ var UnifiedDatePicker = ({
                   )
                 ] }),
                 mode === "days" && /* @__PURE__ */ jsxs6("div", { className: "px-3", children: [
-                  /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-7 gap-x-1", children: WEEKDAYS.map((weekday) => /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-7 gap-x-1", role: "row", children: WEEKDAYS.map((weekday) => /* @__PURE__ */ jsx6(
                     "div",
                     {
+                      role: "columnheader",
                       className: "select-none py-0.5 text-center text-2xs font-semibold text-content-muted",
                       children: weekday
                     },
                     weekday
                   )) }),
-                  /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-7 gap-x-1", children: getDaysInView().map((day, index) => {
-                    const selected = selectedDate ? isSameDay(day, selectedDate) : false;
-                    const currentDay = isToday(day);
-                    const inMonth = isSameMonth(day, viewDate);
-                    const dayDisabled = isBefore(day, startOfDay(minDate)) || isAfter(day, startOfDay(maxDate));
-                    if (!showAdjacentDays && !inMonth) {
-                      return /* @__PURE__ */ jsx6(
-                        "span",
-                        {
-                          "aria-hidden": "true",
-                          className: "h-7"
-                        },
-                        `${day.toISOString()}-${index}`
-                      );
-                    }
-                    return /* @__PURE__ */ jsx6(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => handleDayClick(day),
-                        disabled: dayDisabled,
-                        className: classNames6(
-                          "group flex h-7 w-full items-center justify-center text-xs transition-colors",
-                          {
-                            "opacity-30 cursor-not-allowed": dayDisabled,
-                            "cursor-pointer": !dayDisabled
-                          }
-                        ),
-                        children: /* @__PURE__ */ jsx6(
-                          "span",
+                  /* @__PURE__ */ jsx6(
+                    "div",
+                    {
+                      className: "grid grid-cols-7 gap-x-1",
+                      role: "grid",
+                      "aria-label": `Dias de ${headerLabel}`,
+                      children: getDaysInView().map((day, index) => {
+                        const selected = selectedDate ? isSameDay(day, selectedDate) : false;
+                        const currentDay = isToday(day);
+                        const inMonth = isSameMonth(day, viewDate);
+                        const dayDisabled = isBefore(day, startOfDay(minDate)) || isAfter(day, startOfDay(maxDate));
+                        if (!showAdjacentDays && !inMonth) {
+                          return /* @__PURE__ */ jsx6(
+                            "span",
+                            {
+                              "aria-hidden": "true",
+                              className: "h-7"
+                            },
+                            `${day.toISOString()}-${index}`
+                          );
+                        }
+                        return /* @__PURE__ */ jsx6(
+                          "button",
                           {
+                            type: "button",
+                            "data-calendar-option": "true",
+                            "aria-label": format(day, "dd/MM/yyyy"),
+                            "aria-current": currentDay ? "date" : void 0,
+                            "aria-pressed": selected,
+                            onKeyDown: (event) => moveCalendarFocus(event, 7),
+                            onClick: () => handleDayClick(day),
+                            disabled: dayDisabled,
                             className: classNames6(
-                              "flex h-6 w-6 items-center justify-center rounded-sm transition-colors",
+                              "group flex h-7 w-full items-center justify-center text-xs transition-colors",
                               {
-                                "border border-selection-border bg-selection-background font-semibold text-selection-content": selected,
-                                "border border-primary-1 text-primary-1 font-semibold group-hover:bg-primary-1/10": currentDay && inMonth && !selected,
-                                "text-content-primary group-hover:bg-primary-1/10": inMonth && !selected && !currentDay,
-                                "text-content-muted": !inMonth
+                                "opacity-30 cursor-not-allowed": dayDisabled,
+                                "cursor-pointer": !dayDisabled
                               }
                             ),
-                            children: format(day, "d")
-                          }
-                        )
-                      },
-                      `${day.toISOString()}-${index}`
-                    );
-                  }) })
+                            children: /* @__PURE__ */ jsx6(
+                              "span",
+                              {
+                                className: classNames6(
+                                  "flex h-6 w-6 items-center justify-center rounded-sm transition-colors",
+                                  {
+                                    "border border-selection-border bg-selection-background font-semibold text-selection-content": selected,
+                                    "border border-primary-1 text-primary-1 font-semibold group-hover:bg-primary-1/10": currentDay && inMonth && !selected,
+                                    "text-content-primary group-hover:bg-primary-1/10": inMonth && !selected && !currentDay,
+                                    "text-content-muted": !inMonth
+                                  }
+                                ),
+                                children: format(day, "d")
+                              }
+                            )
+                          },
+                          `${day.toISOString()}-${index}`
+                        );
+                      })
+                    }
+                  )
                 ] }),
-                mode === "months" && /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-3 gap-1 px-3", children: MONTHS.map((month, index) => {
-                  const selected = index === viewDate.getMonth();
-                  return /* @__PURE__ */ jsx6(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => handleMonthClick(index),
-                      className: classNames6(
-                        "rounded-sm py-1 text-xs capitalize transition-colors",
+                mode === "months" && /* @__PURE__ */ jsx6(
+                  "div",
+                  {
+                    className: "grid grid-cols-3 gap-1 px-3",
+                    role: "group",
+                    "aria-label": "Meses do calend\xE1rio",
+                    children: MONTHS.map((month, index) => {
+                      const selected = index === viewDate.getMonth();
+                      const monthDate = new Date(viewDate.getFullYear(), index, 1);
+                      const monthDisabled = isBefore(endOfMonth(monthDate), startOfDay(minDate)) || isAfter(startOfMonth(monthDate), startOfDay(maxDate));
+                      return /* @__PURE__ */ jsx6(
+                        "button",
                         {
-                          "border border-selection-border bg-selection-background font-semibold text-selection-content": selected,
-                          "text-content-primary hover:bg-primary-1/10": !selected
-                        }
-                      ),
-                      children: month.slice(0, 3)
-                    },
-                    month
-                  );
-                }) }),
-                mode === "years" && /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-3 gap-1 px-3", children: years.map((year) => {
-                  const selected = year === viewDate.getFullYear();
-                  return /* @__PURE__ */ jsx6(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => handleYearClick(year),
-                      className: classNames6(
-                        "rounded-sm py-1 text-xs transition-colors",
+                          type: "button",
+                          "data-calendar-option": "true",
+                          "aria-pressed": selected,
+                          disabled: monthDisabled,
+                          onKeyDown: (event) => moveCalendarFocus(event, 3),
+                          onClick: () => handleMonthClick(index),
+                          className: classNames6(
+                            "rounded-sm py-1 text-xs capitalize transition-colors",
+                            {
+                              "border border-selection-border bg-selection-background font-semibold text-selection-content": selected,
+                              "text-content-primary hover:bg-primary-1/10": !selected
+                            }
+                          ),
+                          children: month.slice(0, 3)
+                        },
+                        month
+                      );
+                    })
+                  }
+                ),
+                mode === "years" && /* @__PURE__ */ jsx6(
+                  "div",
+                  {
+                    className: "grid grid-cols-3 gap-1 px-3",
+                    role: "group",
+                    "aria-label": "Anos do calend\xE1rio",
+                    children: years.map((year) => {
+                      const selected = year === viewDate.getFullYear();
+                      const yearDisabled = year < minYear || year > maxYear;
+                      return /* @__PURE__ */ jsx6(
+                        "button",
                         {
-                          "border border-selection-border bg-selection-background font-semibold text-selection-content": selected,
-                          "text-content-primary hover:bg-primary-1/10": !selected
-                        }
-                      ),
-                      children: year
-                    },
-                    year
-                  );
-                }) })
+                          type: "button",
+                          "data-calendar-option": "true",
+                          "aria-pressed": selected,
+                          disabled: yearDisabled,
+                          onKeyDown: (event) => moveCalendarFocus(event, 3),
+                          onClick: () => handleYearClick(year),
+                          className: classNames6(
+                            "rounded-sm py-1 text-xs transition-colors",
+                            {
+                              "border border-selection-border bg-selection-background font-semibold text-selection-content": selected,
+                              "text-content-primary hover:bg-primary-1/10": !selected
+                            }
+                          ),
+                          children: year
+                        },
+                        year
+                      );
+                    })
+                  }
+                )
               ]
             }
           ),
@@ -2806,7 +2913,7 @@ var datePicker_default = DatePicker;
 import cs from "classnames";
 import {
   useEffect as useEffect4,
-  useId as useId3,
+  useId as useId4,
   useRef as useRef6,
   useState as useState5
 } from "react";
@@ -2818,7 +2925,7 @@ function SelectMultiView(props) {
   const containerRef = useRef6(null);
   const triggerRef = useRef6(null);
   const groupRef = useRef6(null);
-  const baseId = useId3();
+  const baseId = useId4();
   const triggerId = `${baseId}-trigger`;
   const labelId = `${baseId}-label`;
   const groupId = `${baseId}-options`;
@@ -3147,7 +3254,7 @@ var SelectCountry_default = SelectCountry;
 
 // src/components/radio-group/radio-group.tsx
 import { useField as useField5 } from "formik";
-import { useId as useId4 } from "react";
+import { useId as useId5 } from "react";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function RadioGroup(_a) {
   var _b = _a, {
@@ -3163,7 +3270,7 @@ function RadioGroup(_a) {
   ]);
   const [field, meta] = useField5(name);
   const hasError = Boolean(meta.touched && meta.error);
-  const errorId = `${useId4()}-error`;
+  const errorId = `${useId5()}-error`;
   return /* @__PURE__ */ jsxs9(
     "fieldset",
     {
@@ -3214,7 +3321,7 @@ import classNames7 from "classnames";
 import { FormikContext as FormikContext2, getIn as getIn2 } from "formik";
 import {
   useContext as useContext2,
-  useId as useId5,
+  useId as useId6,
   useMemo as useMemo3,
   useState as useState6
 } from "react";
@@ -3237,7 +3344,7 @@ function RadioCardGroup({
   const formikContext = useContext2(
     FormikContext2
   );
-  const generatedName = useId5();
+  const generatedName = useId6();
   const errorId = `${generatedName}-error`;
   const [internalValue, setInternalValue] = useState6(defaultValue);
   const hasFormikBinding = Boolean(name) && isFormikContext(formikContext);
@@ -3337,7 +3444,7 @@ import classNames8 from "classnames";
 import {
   forwardRef as forwardRef2,
   useEffect as useEffect5,
-  useId as useId6,
+  useId as useId7,
   useImperativeHandle,
   useRef as useRef7,
   useState as useState7
@@ -3346,7 +3453,10 @@ import { jsx as jsx12 } from "react/jsx-runtime";
 import { createElement } from "react";
 var normalizeMask = (value, mask) => {
   if (typeof mask === "function") return mask(value).slice(0, 1);
-  if (mask instanceof RegExp) return mask.test(value) ? value.slice(0, 1) : "";
+  if (mask instanceof RegExp) {
+    const stableMask = new RegExp(mask.source, mask.flags.replace(/[gy]/g, ""));
+    return stableMask.test(value) ? value.slice(0, 1) : "";
+  }
   if (mask === "alphanumeric") return value.replace(/[^a-z\d]/gi, "").slice(0, 1);
   return value.replace(/\D/g, "").slice(0, 1);
 };
@@ -3375,6 +3485,8 @@ var OtpCodeInput = forwardRef2(
       inputMode = "numeric",
       mask = "numeric",
       name,
+      onFocus: onInputFocus,
+      onKeyDown: onInputKeyDown,
       className
     } = _b, inputProps = __objRest(_b, [
       "length",
@@ -3392,10 +3504,12 @@ var OtpCodeInput = forwardRef2(
       "inputMode",
       "mask",
       "name",
+      "onFocus",
+      "onKeyDown",
       "className"
     ]);
-    const safeLength = Math.max(1, Math.floor(length));
-    const groupId = useId6();
+    const safeLength = Math.max(1, Number.isFinite(length) ? Math.floor(length) : 6);
+    const groupId = useId7();
     const errorId = `${groupId}-error`;
     const helperId = `${groupId}-helper`;
     const inputRefs = useRef7([]);
@@ -3406,9 +3520,12 @@ var OtpCodeInput = forwardRef2(
     const currentValues = isControlled ? normalizeValues(values != null ? values : value, safeLength, mask) : internalValues;
     useEffect5(() => {
       if (!isControlled) {
-        setInternalValues(
-          (previous) => previous.length === safeLength ? previous : normalizeValues(previous, safeLength, mask)
-        );
+        setInternalValues((previous) => {
+          const normalized = normalizeValues(previous, safeLength, mask);
+          return previous.length === normalized.length && previous.every(
+            (item, index) => item === normalized[index]
+          ) ? previous : normalized;
+        });
       }
     }, [isControlled, mask, safeLength]);
     useImperativeHandle(ref, () => ({
@@ -3433,8 +3550,9 @@ var OtpCodeInput = forwardRef2(
       const normalized = normalizeValues(next, safeLength, mask);
       if (!isControlled) setInternalValues(normalized);
       const nextValue = normalized.join("");
+      const wasComplete = currentValues.every(Boolean) && currentValues.length === safeLength;
       onChange == null ? void 0 : onChange(nextValue, normalized);
-      if (normalized.every(Boolean) && nextValue.length === safeLength) {
+      if (!wasComplete && normalized.every(Boolean) && nextValue.length === safeLength) {
         onComplete == null ? void 0 : onComplete(nextValue);
       }
       if (focusIndex !== void 0) (_a2 = inputRefs.current[focusIndex]) == null ? void 0 : _a2.focus();
@@ -3529,8 +3647,14 @@ var OtpCodeInput = forwardRef2(
                   emit(next, nextValue && index < safeLength - 1 ? index + 1 : void 0);
                 },
                 onPaste: (event) => handlePaste(event, index),
-                onKeyDown: (event) => handleKeyDown(event, index),
-                onFocus: (event) => event.currentTarget.select(),
+                onKeyDown: (event) => {
+                  onInputKeyDown == null ? void 0 : onInputKeyDown(event);
+                  if (!event.defaultPrevented) handleKeyDown(event, index);
+                },
+                onFocus: (event) => {
+                  onInputFocus == null ? void 0 : onInputFocus(event);
+                  if (!event.defaultPrevented) event.currentTarget.select();
+                },
                 className: classNames8(
                   "h-11 w-11 rounded-sm border bg-field-surface text-center text-lg font-bold text-field-content outline-none transition-colors focus-visible:border-field-border-active focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed disabled:bg-field-surface-disabled",
                   hasError ? "border-field-border-error" : "border-field-border-default"
@@ -3565,4 +3689,4 @@ export {
   RadioCardGroup,
   OtpCodeInput_default
 };
-//# sourceMappingURL=chunk-FR5W52XU.js.map
+//# sourceMappingURL=chunk-LPLXAKPJ.js.map