@aspprev/versi-ds 0.1.1 → 0.3.0

package/dist/{chunk-5VJ6H62W.js → chunk-OQECJKGA.js}

@@ -2,7 +2,7 @@ import {
   Tooltip_default,
   getFloatingLayerClass,
   mergeAriaDescribedBy
-} from "./chunk-CSQXTG32.js";
+} from "./chunk-FTRF27XF.js";
 import {
   COUNTRY_OPTIONS,
   PHONE_COUNTRY_OPTIONS,
@@ -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";
@@ -2181,12 +2188,13 @@ var MONTHS = [
   "Novembro",
   "Dezembro"
 ];
-var formatDateForInput = (date) => {
+var formatDateForInput = (date, selectionMode = "day") => {
   if (!date || !isValid(date)) return "";
-  return format(date, "dd/MM/yyyy");
+  return format(date, selectionMode === "year" ? "yyyy" : "dd/MM/yyyy");
 };
-var formatInputValue = (value) => {
-  const digits = value.replace(/\D/g, "").slice(0, 8);
+var formatInputValue = (value, selectionMode = "day") => {
+  const digits = value.replace(/\D/g, "").slice(0, selectionMode === "year" ? 4 : 8);
+  if (selectionMode === "year") return digits;
   if (digits.length <= 2) return digits;
   if (digits.length <= 4) return `${digits.slice(0, 2)}/${digits.slice(2)}`;
   return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4)}`;
@@ -2222,9 +2230,12 @@ var UnifiedDatePicker = ({
   name = "data",
   error,
   errorText,
+  helperText,
   defaultView = "days",
   navigationVariant = "drilldown",
+  selectionMode = "day",
   showAdjacentDays = true,
+  ariaLabel,
   className
 }) => {
   const formik = useContext(
@@ -2239,10 +2250,11 @@ var UnifiedDatePicker = ({
   const formikTouched = hasFormikField && formik ? Boolean(getIn(formik.touched, name)) : false;
   const formikError = hasFormikField && formik ? getIn(formik.errors, name) : void 0;
   const isFieldDisabled = disabled || isDisabled;
+  const resolvedPlaceholder = selectionMode === "year" ? "aaaa" : placeholder;
   const [isOpen, setIsOpen] = useState4(false);
   const [isEditing, setIsEditing] = useState4(false);
   const [draftValue, setDraftValue] = useState4(
-    formatDateForInput(selectedDate)
+    formatDateForInput(selectedDate, selectionMode)
   );
   const [viewDate, setViewDate] = useState4(getSafeViewDate(selectedDate));
   const [mode, setMode] = useState4(defaultView);
@@ -2250,22 +2262,33 @@ 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);
   }, []);
   useEffect3(() => {
     if (!isEditing) {
-      setDraftValue(formatDateForInput(selectedDate));
+      setDraftValue(formatDateForInput(selectedDate, selectionMode));
     }
     setViewDate(getSafeViewDate(selectedDate));
-  }, [isEditing, selectedDate]);
+  }, [isEditing, selectedDate, selectionMode]);
   useEffect3(() => {
     if (!isOpen) return;
-    setMode(navigationVariant === "dropdown" ? "days" : defaultView);
+    setMode(
+      selectionMode === "year" ? "years" : selectionMode === "month" ? "months" : navigationVariant === "dropdown" ? "days" : defaultView
+    );
     const onMouseDown = (event) => {
       var _a, _b;
       if (!((_a = containerRef.current) == null ? void 0 : _a.contains(event.target)) && !((_b = dropdownRef.current) == null ? void 0 : _b.contains(event.target))) {
@@ -2273,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);
@@ -2281,7 +2304,7 @@ var UnifiedDatePicker = ({
       document.removeEventListener("mousedown", onMouseDown);
       document.removeEventListener("keydown", onKeyDown);
     };
-  }, [defaultView, isOpen, navigationVariant]);
+  }, [defaultView, isOpen, navigationVariant, selectionMode]);
   useEffect3(() => {
     if (!isOpen) return;
     const updateDropdownPosition = () => {
@@ -2354,12 +2377,18 @@ 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 });
     return eachDayOfInterval({ start, end });
   };
   const handleDayClick = (day) => {
+    if (selectionMode !== "day") return;
     if (isBefore(day, startOfDay(minDate)) || isAfter(day, startOfDay(maxDate)))
       return;
     syncValue(day);
@@ -2367,9 +2396,21 @@ var UnifiedDatePicker = ({
     setInputError(null);
     setViewDate(day);
     touchField();
-    setIsOpen(false);
+    closeCalendar();
   };
   const handleMonthClick = (monthIndex) => {
+    const candidate = new Date(viewDate.getFullYear(), monthIndex, 1);
+    const monthDisabled = isBefore(endOfMonth(candidate), startOfDay(minDate)) || isAfter(startOfMonth(candidate), startOfDay(maxDate));
+    if (monthDisabled) return;
+    if (selectionMode === "month") {
+      const nextDate = isBefore(candidate, minDate) ? minDate : isAfter(candidate, maxDate) ? maxDate : candidate;
+      syncValue(nextDate);
+      setDraftValue(formatDateForInput(nextDate, selectionMode));
+      setInputError(null);
+      touchField();
+      closeCalendar();
+      return;
+    }
     setViewDate((currentDate) => {
       const nextDate = new Date(currentDate);
       nextDate.setMonth(monthIndex);
@@ -2386,12 +2427,23 @@ var UnifiedDatePicker = ({
     });
   };
   const handleYearClick = (year) => {
+    if (year < minDate.getFullYear() || year > maxDate.getFullYear()) return;
+    if (selectionMode === "year") {
+      const firstDay = new Date(year, 0, 1);
+      const nextDate = year === minDate.getFullYear() && firstDay < minDate ? minDate : year === maxDate.getFullYear() && firstDay > maxDate ? maxDate : firstDay;
+      syncValue(nextDate);
+      setDraftValue(formatDateForInput(nextDate, selectionMode));
+      setInputError(null);
+      touchField();
+      closeCalendar();
+      return;
+    }
     setViewDate((currentDate) => {
       const nextDate = new Date(currentDate);
       nextDate.setFullYear(year);
       return nextDate;
     });
-    setMode("days");
+    setMode(selectionMode === "month" ? "months" : "days");
   };
   const handleYearChange = (year) => {
     setViewDate((currentDate) => {
@@ -2407,8 +2459,38 @@ 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 = currentIndex;
+    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);
+    const normalizedValue = formatInputValue(rawValue, selectionMode);
     setDraftValue(normalizedValue);
     touchField();
     if (!normalizedValue) {
@@ -2416,6 +2498,22 @@ var UnifiedDatePicker = ({
       setInputError(null);
       return;
     }
+    if (selectionMode === "year") {
+      if (normalizedValue.length < 4) {
+        syncValue(null);
+        setInputError("Ano incompleto");
+        return;
+      }
+      const year = Number(normalizedValue);
+      if (year < minDate.getFullYear() || year > maxDate.getFullYear()) {
+        syncValue(null);
+        setInputError("Ano fora do intervalo permitido");
+        return;
+      }
+      handleYearClick(year);
+      setInputError(null);
+      return;
+    }
     if (normalizedValue.length < 10) {
       syncValue(null);
       setInputError("Data incompleta");
@@ -2470,6 +2568,8 @@ var UnifiedDatePicker = ({
       ref: containerRef,
       label,
       labelFor: name,
+      description: helperText,
+      descriptionId: `${name}-description`,
       invalid: hasError,
       message: resolvedErrorText,
       messageId: errorId,
@@ -2493,14 +2593,22 @@ 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",
-                  maxLength: 10,
+                  maxLength: selectionMode === "year" ? 4 : 10,
                   disabled: isFieldDisabled,
-                  placeholder,
+                  placeholder: resolvedPlaceholder,
                   value: draftValue,
                   onClick: openCalendar,
                   onFocus: () => {
@@ -2508,10 +2616,10 @@ var UnifiedDatePicker = ({
                     openCalendar();
                   },
                   onChange: (event) => {
-                    const nextValue = formatInputValue(event.target.value);
+                    const nextValue = formatInputValue(event.target.value, selectionMode);
                     setDraftValue(nextValue);
                     setInputError(null);
-                    if (nextValue.length === 10) {
+                    if (selectionMode === "day" && nextValue.length === 10) {
                       const parsedDate = parseDateValue(nextValue);
                       if (parsedDate) {
                         setViewDate(parsedDate);
@@ -2526,7 +2634,7 @@ var UnifiedDatePicker = ({
                   onKeyDown: (event) => {
                     if (event.key === "Enter") {
                       commitDraftValue(draftValue);
-                      setIsOpen(false);
+                      closeCalendar();
                     }
                   },
                   className: FIELD_INPUT_CLASS
@@ -2558,10 +2666,13 @@ var UnifiedDatePicker = ({
             "div",
             {
               ref: dropdownRef,
+              id: calendarId,
+              role: "dialog",
+              "aria-label": selectionMode === "year" ? "Selecionar ano" : selectionMode === "month" ? "Selecionar m\xC3\xAAs" : "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"
               ),
@@ -2647,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\xC3\xA1rio",
+                    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\xC3\xA1rio",
+                    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
+                      );
+                    })
+                  }
+                )
               ]
             }
           ),
@@ -2761,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";
@@ -2773,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`;
@@ -3102,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, {
@@ -3118,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",
     {
@@ -3169,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";
@@ -3192,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);
@@ -3287,6 +3439,237 @@ function RadioCardGroup({
   );
 }
 
+// src/components/otp-code-input/OtpCodeInput.tsx
+import classNames8 from "classnames";
+import {
+  forwardRef as forwardRef2,
+  useEffect as useEffect5,
+  useId as useId7,
+  useImperativeHandle,
+  useRef as useRef7,
+  useState as useState7
+} from "react";
+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) {
+    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);
+};
+var normalizeValues = (source, length, mask) => {
+  const values = Array.isArray(source) ? source : Array.from(source != null ? source : "");
+  return Array.from({ length }, (_, index) => {
+    var _a;
+    return normalizeMask((_a = values[index]) != null ? _a : "", mask);
+  });
+};
+var OtpCodeInput = forwardRef2(
+  function OtpCodeInput2(_a, ref) {
+    var _b = _a, {
+      length = 6,
+      value,
+      values,
+      onChange,
+      onComplete,
+      onPaste,
+      autoFocus = false,
+      disabled = false,
+      error = false,
+      errorText,
+      helperText,
+      label = "C\xF3digo de uso \xFAnico",
+      inputMode = "numeric",
+      mask = "numeric",
+      name,
+      onFocus: onInputFocus,
+      onKeyDown: onInputKeyDown,
+      className
+    } = _b, inputProps = __objRest(_b, [
+      "length",
+      "value",
+      "values",
+      "onChange",
+      "onComplete",
+      "onPaste",
+      "autoFocus",
+      "disabled",
+      "error",
+      "errorText",
+      "helperText",
+      "label",
+      "inputMode",
+      "mask",
+      "name",
+      "onFocus",
+      "onKeyDown",
+      "className"
+    ]);
+    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([]);
+    const isControlled = value !== void 0 || values !== void 0;
+    const [internalValues, setInternalValues] = useState7(
+      () => normalizeValues(values != null ? values : value, safeLength, mask)
+    );
+    const currentValues = isControlled ? normalizeValues(values != null ? values : value, safeLength, mask) : internalValues;
+    useEffect5(() => {
+      if (!isControlled) {
+        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, () => ({
+      focus: (index = 0) => {
+        var _a2;
+        return (_a2 = inputRefs.current[Math.min(Math.max(index, 0), safeLength - 1)]) == null ? void 0 : _a2.focus();
+      },
+      clear: () => {
+        var _a2;
+        const next = Array.from({ length: safeLength }, () => "");
+        if (!isControlled) setInternalValues(next);
+        onChange == null ? void 0 : onChange("", next);
+        (_a2 = inputRefs.current[0]) == null ? void 0 : _a2.focus();
+      }
+    }), [isControlled, onChange, safeLength]);
+    useEffect5(() => {
+      var _a2;
+      if (autoFocus) (_a2 = inputRefs.current[0]) == null ? void 0 : _a2.focus();
+    }, [autoFocus]);
+    const emit = (next, focusIndex) => {
+      var _a2;
+      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 (!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();
+    };
+    const handlePaste = (event, index) => {
+      onPaste == null ? void 0 : onPaste(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      const pasted = Array.from(event.clipboardData.getData("text")).map((item) => normalizeMask(item, mask)).filter(Boolean).slice(0, safeLength - index);
+      if (!pasted.length) return;
+      const next = [...currentValues];
+      pasted.forEach((item, offset) => {
+        next[index + offset] = item;
+      });
+      emit(next, Math.min(index + pasted.length, safeLength - 1));
+    };
+    const handleKeyDown = (event, index) => {
+      var _a2, _b2, _c, _d;
+      if (event.key === "ArrowLeft" && index > 0) {
+        event.preventDefault();
+        (_a2 = inputRefs.current[index - 1]) == null ? void 0 : _a2.focus();
+      } else if (event.key === "ArrowRight" && index < safeLength - 1) {
+        event.preventDefault();
+        (_b2 = inputRefs.current[index + 1]) == null ? void 0 : _b2.focus();
+      } else if (event.key === "Backspace") {
+        if (currentValues[index]) {
+          const next = [...currentValues];
+          next[index] = "";
+          emit(next);
+        } else if (index > 0) {
+          event.preventDefault();
+          const next = [...currentValues];
+          next[index - 1] = "";
+          emit(next, index - 1);
+        }
+      } else if (event.key === "Delete" && currentValues[index]) {
+        const next = [...currentValues];
+        next[index] = "";
+        emit(next);
+      } else if (event.key === "Home") {
+        event.preventDefault();
+        (_c = inputRefs.current[0]) == null ? void 0 : _c.focus();
+      } else if (event.key === "End") {
+        event.preventDefault();
+        (_d = inputRefs.current[safeLength - 1]) == null ? void 0 : _d.focus();
+      }
+    };
+    const hasError = Boolean(error || errorText);
+    const describedBy = [helperText ? helperId : "", hasError && errorText ? errorId : ""].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsx12(
+      FieldFrame_default,
+      {
+        label,
+        labelId: `${groupId}-label`,
+        labelFor: `${groupId}-0`,
+        message: errorText,
+        messageId: errorId,
+        description: helperText,
+        descriptionId: helperId,
+        invalid: hasError,
+        className,
+        children: /* @__PURE__ */ jsx12(
+          "div",
+          {
+            role: "group",
+            "aria-labelledby": label ? `${groupId}-label` : void 0,
+            "aria-describedby": describedBy,
+            "aria-invalid": hasError || void 0,
+            className: "mt-1 flex flex-wrap gap-2",
+            children: Array.from({ length: safeLength }, (_, index) => /* @__PURE__ */ createElement(
+              "input",
+              __spreadProps(__spreadValues({}, inputProps), {
+                key: index,
+                ref: (element) => {
+                  inputRefs.current[index] = element;
+                },
+                id: `${groupId}-${index}`,
+                name: index === 0 ? name : void 0,
+                type: "text",
+                inputMode,
+                autoComplete: index === 0 ? "one-time-code" : "off",
+                maxLength: 1,
+                value: currentValues[index],
+                disabled,
+                "aria-label": `${label}, d\xEDgito ${index + 1} de ${safeLength}`,
+                "aria-invalid": hasError || void 0,
+                "aria-describedby": describedBy,
+                onChange: (event) => {
+                  const next = [...currentValues];
+                  const nextValue = normalizeMask(event.target.value, mask);
+                  next[index] = nextValue;
+                  emit(next, nextValue && index < safeLength - 1 ? index + 1 : void 0);
+                },
+                onPaste: (event) => handlePaste(event, index),
+                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"
+                )
+              })
+            ))
+          }
+        )
+      }
+    );
+  }
+);
+OtpCodeInput.displayName = "OtpCodeInput";
+var OtpCodeInput_default = OtpCodeInput;
+
 export {
   Input_default,
   InputStandalone,
@@ -3303,6 +3686,7 @@ export {
   CountrySelect,
   SelectCountry_default,
   RadioGroup,
-  RadioCardGroup
+  RadioCardGroup,
+  OtpCodeInput_default
 };
-//# sourceMappingURL=chunk-5VJ6H62W.js.map
+//# sourceMappingURL=chunk-OQECJKGA.js.map