@aspprev/versi-ds 0.1.0 → 0.2.0

package/dist/chunk-ET2BGHTO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useBreakpoint.tsx","../src/components/tooltip/Tooltip.tsx","../src/components/tooltip/calculate-tooltip-position.ts","../src/components/tooltip/use-tooltip-relationship.ts","../src/utils/accessibility.ts","../src/utils/floating-layer.ts"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect } from \"react\";\n\nexport const breakpoints = {\n  mobile: 640,\n  tablet: 1024,\n  desktop: 1440,\n  tv: 1920,\n};\n\ntype Breakpoint = keyof typeof breakpoints;\n\nexport const useBreakpoint = (): Breakpoint => {\n  const getBreakpoint = (width: number): Breakpoint => {\n    const entries = Object.entries(breakpoints) as [Breakpoint, number][];\n    return entries.reduce<Breakpoint>(\n      (prev, [key, minWidth]) => (width >= minWidth ? key : prev),\n      \"mobile\"\n    );\n  };\n\n  const [currentBreakpoint, setCurrentBreakpoint] =\n    useState<Breakpoint>(\"mobile\");\n\n  useEffect(() => {\n    const handleResize = () => {\n      const newBreakpoint = getBreakpoint(window.innerWidth);\n      setCurrentBreakpoint(newBreakpoint);\n    };\n\n    handleResize();\n\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, []);\n\n  return currentBreakpoint;\n};\n","\"use client\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport React, {\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport ReactDOM from \"react-dom\";\nimport {\n  calculateTooltipPosition,\n  type TooltipPosition,\n} from \"./calculate-tooltip-position\";\nimport { useTooltipRelationship } from \"./use-tooltip-relationship\";\nimport { getFloatingLayerClass } from \"../../utils/floating-layer\";\n\nexport type TooltipProps = {\n  targetRef: React.RefObject<HTMLElement | null>;\n  content: React.ReactNode;\n  visible: boolean;\n  preferredPosition?: \"top\" | \"bottom\" | \"left\" | \"right\";\n};\n\nconst Tooltip: React.FC<TooltipProps> = ({\n  targetRef,\n  content,\n  visible,\n  preferredPosition = \"bottom\",\n}) => {\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const tooltipId = useId();\n  const [coords, setCoords] = useState({ top: 0, left: 0 });\n  const [finalPosition, setFinalPosition] =\n    useState<TooltipPosition>(preferredPosition);\n  const breakpoint = useBreakpoint();\n  const isMobile = breakpoint === \"mobile\";\n\n  useTooltipRelationship(targetRef, tooltipId, visible);\n\n  const updatePosition = useCallback(() => {\n    if (!targetRef.current || !tooltipRef.current) return;\n\n    const target = targetRef.current.getBoundingClientRect();\n    const tooltip = tooltipRef.current.getBoundingClientRect();\n\n    if (isMobile) {\n      setCoords({\n        top: Math.max(8, (window.innerHeight - tooltip.height) / 2),\n        left: Math.max(8, (window.innerWidth - tooltip.width) / 2),\n      });\n      setFinalPosition(\"bottom\");\n      return;\n    }\n\n    const nextPosition = calculateTooltipPosition({\n      target,\n      tooltip,\n      preferred: preferredPosition,\n      viewportWidth: window.innerWidth,\n      viewportHeight: window.innerHeight,\n    });\n    setCoords({ top: nextPosition.top, left: nextPosition.left });\n    setFinalPosition(nextPosition.position);\n  }, [isMobile, preferredPosition, targetRef]);\n\n  useLayoutEffect(() => {\n    if (!visible) return;\n    updatePosition();\n\n    window.addEventListener(\"resize\", updatePosition);\n    window.addEventListener(\"scroll\", updatePosition, true);\n\n    return () => {\n      window.removeEventListener(\"resize\", updatePosition);\n      window.removeEventListener(\"scroll\", updatePosition, true);\n    };\n  }, [content, updatePosition, visible]);\n\n  useLayoutEffect(() => {\n    if (\n      !arrowRef.current ||\n      isMobile ||\n      !targetRef.current ||\n      !tooltipRef.current\n    ) {\n      return;\n    }\n\n    const arrow = arrowRef.current;\n    const tooltip = tooltipRef.current;\n    const rect = targetRef.current.getBoundingClientRect();\n    const horizontalCenter = Math.min(\n      Math.max(rect.left + rect.width / 2 - coords.left - 6, 8),\n      Math.max(8, tooltip.offsetWidth - 20),\n    );\n    const verticalCenter = Math.min(\n      Math.max(rect.top + rect.height / 2 - coords.top - 6, 8),\n      Math.max(8, tooltip.offsetHeight - 20),\n    );\n\n    arrow.style.top = \"\";\n    arrow.style.bottom = \"\";\n    arrow.style.left = \"\";\n    arrow.style.right = \"\";\n\n    if (finalPosition === \"bottom\") {\n      arrow.style.top = \"-6px\";\n      arrow.style.left = `${horizontalCenter}px`;\n      return;\n    }\n\n    if (finalPosition === \"top\") {\n      arrow.style.bottom = \"-6px\";\n      arrow.style.left = `${horizontalCenter}px`;\n      return;\n    }\n\n    if (finalPosition === \"right\") {\n      arrow.style.left = \"-6px\";\n      arrow.style.top = `${verticalCenter}px`;\n      return;\n    }\n\n    arrow.style.right = \"-6px\";\n    arrow.style.top = `${verticalCenter}px`;\n  }, [coords, finalPosition, isMobile, targetRef, visible]);\n\n  useEffect(() => {\n    if (!visible) return;\n\n    tooltipRef.current?.animate([{ opacity: 0 }, { opacity: 1 }], {\n      duration: 150,\n      easing: \"ease-out\",\n    });\n  }, [visible]);\n\n  if (typeof window === \"undefined\") return null;\n\n  return ReactDOM.createPortal(\n    visible ? (\n      <div\n        id={tooltipId}\n        ref={tooltipRef}\n        role=\"tooltip\"\n        style={{ top: coords.top, left: coords.left }}\n        className={`fixed ${getFloatingLayerClass(targetRef.current, \"tooltip\")} max-h-[calc(100dvh-1rem)] overflow-y-auto overscroll-contain break-words whitespace-normal rounded-sm bg-surface-tooltip px-3 py-2 text-sm text-content-inverse shadow-lg ${\n          isMobile ? \"w-[90vw] max-w-[90vw]\" : \"w-max max-w-sm\"\n        }`}\n      >\n        {content}\n\n        {/* Setinha só no desktop */}\n        {!isMobile && (\n          <>\n            {finalPosition === \"bottom\" && (\n              <div\n                ref={arrowRef}\n                className=\"absolute h-0 w-0 border-b-[6px] border-l-[6px] border-r-[6px] border-b-surface-tooltip border-l-transparent border-r-transparent\"\n              />\n            )}\n            {finalPosition === \"top\" && (\n              <div\n                ref={arrowRef}\n                className=\"absolute h-0 w-0 border-l-[6px] border-r-[6px] border-t-[6px] border-l-transparent border-r-transparent border-t-surface-tooltip\"\n              />\n            )}\n            {finalPosition === \"right\" && (\n              <div\n                ref={arrowRef}\n                className=\"absolute h-0 w-0 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-surface-tooltip border-t-transparent\"\n              />\n            )}\n            {finalPosition === \"left\" && (\n              <div\n                ref={arrowRef}\n                className=\"absolute h-0 w-0 border-b-[6px] border-l-[6px] border-t-[6px] border-b-transparent border-l-surface-tooltip border-t-transparent\"\n              />\n            )}\n          </>\n        )}\n      </div>\n    ) : null,\n    document.body,\n  );\n};\n\nexport default Tooltip;\n\n\n","export type TooltipPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\n\ntype Rect = {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n  width: number;\n  height: number;\n};\n\ntype Size = {\n  width: number;\n  height: number;\n};\n\ntype CalculateTooltipPositionParams = {\n  target: Rect;\n  tooltip: Size;\n  preferred: TooltipPosition;\n  viewportWidth: number;\n  viewportHeight: number;\n  gap?: number;\n  margin?: number;\n};\n\ntype TooltipCoordinates = {\n  top: number;\n  left: number;\n  position: TooltipPosition;\n};\n\nconst OPPOSITE_POSITION: Record<TooltipPosition, TooltipPosition> = {\n  top: \"bottom\",\n  bottom: \"top\",\n  left: \"right\",\n  right: \"left\",\n};\n\nfunction coordinatesFor(\n  target: Rect,\n  tooltip: Size,\n  position: TooltipPosition,\n  gap: number,\n) {\n  if (position === \"top\") {\n    return {\n      top: target.top - tooltip.height - gap,\n      left: target.left + target.width / 2 - tooltip.width / 2,\n    };\n  }\n  if (position === \"bottom\") {\n    return {\n      top: target.bottom + gap,\n      left: target.left + target.width / 2 - tooltip.width / 2,\n    };\n  }\n  if (position === \"left\") {\n    return {\n      top: target.top + target.height / 2 - tooltip.height / 2,\n      left: target.left - tooltip.width - gap,\n    };\n  }\n  return {\n    top: target.top + target.height / 2 - tooltip.height / 2,\n    left: target.right + gap,\n  };\n}\n\nfunction fitsViewport(\n  coordinates: { top: number; left: number },\n  tooltip: Size,\n  viewportWidth: number,\n  viewportHeight: number,\n  margin: number,\n) {\n  return (\n    coordinates.top >= margin &&\n    coordinates.left >= margin &&\n    coordinates.top + tooltip.height <= viewportHeight - margin &&\n    coordinates.left + tooltip.width <= viewportWidth - margin\n  );\n}\n\nfunction clamp(value: number, minimum: number, maximum: number) {\n  return Math.min(Math.max(value, minimum), Math.max(minimum, maximum));\n}\n\nexport function calculateTooltipPosition({\n  target,\n  tooltip,\n  preferred,\n  viewportWidth,\n  viewportHeight,\n  gap = 8,\n  margin = 8,\n}: CalculateTooltipPositionParams): TooltipCoordinates {\n  const positions = [\n    preferred,\n    OPPOSITE_POSITION[preferred],\n    \"bottom\",\n    \"top\",\n    \"right\",\n    \"left\",\n  ].filter(\n    (position, index, values): position is TooltipPosition =>\n      values.indexOf(position) === index,\n  );\n\n  for (const position of positions) {\n    const coordinates = coordinatesFor(target, tooltip, position, gap);\n    if (\n      fitsViewport(\n        coordinates,\n        tooltip,\n        viewportWidth,\n        viewportHeight,\n        margin,\n      )\n    ) {\n      return { ...coordinates, position };\n    }\n  }\n\n  const fallback = coordinatesFor(target, tooltip, preferred, gap);\n  return {\n    top: clamp(fallback.top, margin, viewportHeight - tooltip.height - margin),\n    left: clamp(fallback.left, margin, viewportWidth - tooltip.width - margin),\n    position: preferred,\n  };\n}\n\n","\"use client\";\n\nimport { useEffect, type RefObject } from \"react\";\nimport { mergeAriaDescribedBy } from \"../../utils/accessibility\";\n\nexport function useTooltipRelationship(\n  targetRef: RefObject<HTMLElement | null> | undefined,\n  tooltipId: string,\n  visible: boolean,\n) {\n  useEffect(() => {\n    const target = targetRef?.current;\n    if (!target || !visible) return;\n\n    const previousDescription = target.getAttribute(\"aria-describedby\");\n    target.setAttribute(\n      \"aria-describedby\",\n      mergeAriaDescribedBy(previousDescription, tooltipId) ?? tooltipId,\n    );\n\n    return () => {\n      if (previousDescription) {\n        target.setAttribute(\"aria-describedby\", previousDescription);\n      } else {\n        target.removeAttribute(\"aria-describedby\");\n      }\n    };\n  }, [targetRef, tooltipId, visible]);\n}\n\n\n","export function mergeAriaDescribedBy(\n  ...values: Array<string | null | undefined>\n) {\n  const identifiers = values\n    .flatMap((value) => value?.trim().split(/\\s+/) ?? [])\n    .filter(Boolean);\n\n  return identifiers.length > 0\n    ? Array.from(new Set(identifiers)).join(\" \")\n    : undefined;\n}\n","export type FloatingLayer = \"popover\" | \"tooltip\";\n\nexport function getFloatingLayerClass(\n  trigger: HTMLElement | null | undefined,\n  layer: FloatingLayer,\n) {\n  if (trigger?.closest('[role=\"dialog\"][aria-modal=\"true\"]')) {\n    return \"z-modal-overlay\";\n  }\n\n  return layer === \"popover\" ? \"z-popover\" : \"z-tooltip\";\n}\n"],"mappings":"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","names":["useEffect","useState","useEffect","useEffect","useState","useEffect"]}

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

@@ -2,13 +2,13 @@ import {
   Tooltip_default,
   getFloatingLayerClass,
   mergeAriaDescribedBy
-} from "./chunk-CWIPMGCA.js";
+} from "./chunk-ET2BGHTO.js";
 import {
   COUNTRY_OPTIONS,
   PHONE_COUNTRY_OPTIONS,
   filterCountryOptions,
   getCountryFlagUrl
-} from "./chunk-A3PA5H7L.js";
+} from "./chunk-YCW3REQK.js";
 import {
   __objRest,
   __spreadProps,
@@ -1756,9 +1756,9 @@ function parsePhonePayload(rawValue, countries = PHONE_COUNTRY_OPTIONS) {
   return parseStoredPhoneValue(rawValue, countries);
 }
 function renderFlag(option) {
-  var _a;
+  var _a, _b;
   const svgSrc = String(
-    getCountryFlagUrl(option == null ? void 0 : option.cca2) || ((_a = option == null ? void 0 : option.flags) == null ? void 0 : _a.svg) || ""
+    ((_b = (_a = option == null ? void 0 : option.flags) == null ? void 0 : _a.svg) == null ? void 0 : _b.trim()) || getCountryFlagUrl(option == null ? void 0 : option.cca2)
   ).trim();
   if (!svgSrc) {
     return /* @__PURE__ */ jsx5("span", { className: "h-5 w-7 shrink-0 rounded-sm bg-surface-muted" });
@@ -2181,12 +2181,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)}`;
@@ -2224,6 +2225,7 @@ var UnifiedDatePicker = ({
   errorText,
   defaultView = "days",
   navigationVariant = "drilldown",
+  selectionMode = "day",
   showAdjacentDays = true,
   className
 }) => {
@@ -2239,10 +2241,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);
@@ -2259,13 +2262,15 @@ var UnifiedDatePicker = ({
   }, []);
   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))) {
@@ -2281,7 +2286,7 @@ var UnifiedDatePicker = ({
       document.removeEventListener("mousedown", onMouseDown);
       document.removeEventListener("keydown", onKeyDown);
     };
-  }, [defaultView, isOpen, navigationVariant]);
+  }, [defaultView, isOpen, navigationVariant, selectionMode]);
   useEffect3(() => {
     if (!isOpen) return;
     const updateDropdownPosition = () => {
@@ -2360,6 +2365,7 @@ var UnifiedDatePicker = ({
     return eachDayOfInterval({ start, end });
   };
   const handleDayClick = (day) => {
+    if (selectionMode !== "day") return;
     if (isBefore(day, startOfDay(minDate)) || isAfter(day, startOfDay(maxDate)))
       return;
     syncValue(day);
@@ -2370,6 +2376,18 @@ var UnifiedDatePicker = ({
     setIsOpen(false);
   };
   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();
+      setIsOpen(false);
+      return;
+    }
     setViewDate((currentDate) => {
       const nextDate = new Date(currentDate);
       nextDate.setMonth(monthIndex);
@@ -2386,12 +2404,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();
+      setIsOpen(false);
+      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) => {
@@ -2408,7 +2437,7 @@ var UnifiedDatePicker = ({
     });
   };
   const commitDraftValue = (rawValue) => {
-    const normalizedValue = formatInputValue(rawValue);
+    const normalizedValue = formatInputValue(rawValue, selectionMode);
     setDraftValue(normalizedValue);
     touchField();
     if (!normalizedValue) {
@@ -2416,6 +2445,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");
@@ -2498,9 +2543,9 @@ var UnifiedDatePicker = ({
                   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 +2553,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);
@@ -3018,9 +3063,9 @@ var SelectMulti_default = SelectMulti;
 // src/components/selectCountry/SelectCountry.tsx
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function renderFlag2(option) {
-  var _a;
+  var _a, _b;
   const svgSrc = String(
-    getCountryFlagUrl(option.cca2) || ((_a = option.flags) == null ? void 0 : _a.svg) || ""
+    ((_b = (_a = option.flags) == null ? void 0 : _a.svg) == null ? void 0 : _b.trim()) || getCountryFlagUrl(option.cca2)
   ).trim();
   if (!svgSrc) {
     return /* @__PURE__ */ jsx9(
@@ -3287,6 +3332,220 @@ function RadioCardGroup({
   );
 }
 
+// src/components/otp-code-input/OtpCodeInput.tsx
+import classNames8 from "classnames";
+import {
+  forwardRef as forwardRef2,
+  useEffect as useEffect5,
+  useId as useId6,
+  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) return mask.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,
+      className
+    } = _b, inputProps = __objRest(_b, [
+      "length",
+      "value",
+      "values",
+      "onChange",
+      "onComplete",
+      "onPaste",
+      "autoFocus",
+      "disabled",
+      "error",
+      "errorText",
+      "helperText",
+      "label",
+      "inputMode",
+      "mask",
+      "name",
+      "className"
+    ]);
+    const safeLength = Math.max(1, Math.floor(length));
+    const groupId = useId6();
+    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) => previous.length === safeLength ? previous : normalizeValues(previous, safeLength, mask)
+        );
+      }
+    }, [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("");
+      onChange == null ? void 0 : onChange(nextValue, normalized);
+      if (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) => handleKeyDown(event, index),
+                onFocus: (event) => 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 +3562,7 @@ export {
   CountrySelect,
   SelectCountry_default,
   RadioGroup,
-  RadioCardGroup
+  RadioCardGroup,
+  OtpCodeInput_default
 };
-//# sourceMappingURL=chunk-BY4HJZFJ.js.map
+//# sourceMappingURL=chunk-FR5W52XU.js.map