{
  "$schema": "https://cubixflow.ir/schema/registry-item.json",
  "name": "verify-code",
  "type": "registry:ui",
  "title": "Verify Code",
  "description": "A labeled one-time verify code field with separate digit boxes. Set length for box count and groups to insert - separators between digit groups. Values always display as Persian digits.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/cubix/verify-code.tsx",
      "type": "registry:ui",
      "target": "components/cubix/verify-code.tsx",
      "content": "\"use client\"\n\n/*\n  Cubix Verify Code - labeled one-time code field specialized from Text Field.\n\n  Separate single-digit input boxes. Box count is set with length (default 6).\n  Pass groups (for example [3, 3]) to insert - separators between digit groups.\n  Values always display as Persian digits. inputMode is locked to numeric.\n  Weight 400 and tracking-normal keep IRANSans XV readable in fixed-height\n  controls. The control row is dir=ltr so digits follow left-to-right order\n  inside RTL pages.\n*/\nimport * as React from \"react\"\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DEFAULT_LENGTH = 6\nconst MIN_LENGTH = 4\nconst MAX_LENGTH = 8\nconst DIGIT_LENGTH = 1\nconst DEFAULT_RESEND_DURATION = 60\n\nconst DEFAULT_WAITING_LABEL = \"زمان باقی‌مانده تا دریافت کد مجدد\"\nconst DEFAULT_EXPIRED_LABEL = \"دریافت مجدد کد تایید\"\nconst DEFAULT_RESEND_LABEL = \"دریافت مجدد\"\n\nconst verifyCodeControlVariants = cva(\n  \"group/verify-code-control relative flex w-full min-w-0 items-center outline-none\",\n  {\n    variants: {\n      size: {\n        default: \"gap-2\",\n        lg: \"gap-2.5\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\nconst verifyCodeDigitVariants = cva(\n  \"w-full min-w-0 flex-1 rounded-lg border border-input bg-transparent text-center font-normal leading-none tracking-normal text-foreground tabular-nums transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-primary focus-visible:ring-3 focus-visible:ring-primary/20 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:border-transparent disabled:bg-muted disabled:text-muted-foreground disabled:placeholder:text-muted-foreground aria-invalid:border-destructive aria-invalid:ring-0 aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-0 dark:bg-input/30 dark:disabled:bg-muted dark:aria-invalid:border-destructive/50 dark:aria-invalid:focus-visible:border-destructive/50\",\n  {\n    variants: {\n      size: {\n        default: \"h-10 px-2 text-label md:text-label leading-none\",\n        lg: \"h-12 px-2.5 text-label md:text-label leading-none\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\ntype VerifyCodeSize = NonNullable<\n  VariantProps<typeof verifyCodeControlVariants>[\"size\"]\n>\n\ntype VerifyCodeStore = {\n  length: number\n  digits: string[]\n  setDigit: (index: number, digit: string) => void\n  setDigits: (digits: string[]) => void\n}\n\ntype VerifyCodeContextValue = {\n  size: VerifyCodeSize\n  length: number\n  groups: number[] | null\n  disabled?: boolean\n  invalid?: boolean\n  id: string\n  descriptionId: string\n  errorId: string\n}\n\nconst VerifyCodeSizeContext = React.createContext<VerifyCodeSize>(\"default\")\nconst VerifyCodeStoreContext = React.createContext<VerifyCodeStore | null>(null)\nconst VerifyCodeContext = React.createContext<VerifyCodeContextValue | null>(\n  null\n)\n\nconst PERSIAN_DIGITS = \"۰۱۲۳۴۵۶۷۸۹\"\nconst ARABIC_DIGITS = \"٠١٢٣٤٥٦٧٨٩\"\nconst ALLOWED_INSERT = /^[\\d۰-۹٠-٩]+$/\n\nfunction clampLength(length: number) {\n  if (!Number.isFinite(length)) return DEFAULT_LENGTH\n  return Math.min(MAX_LENGTH, Math.max(MIN_LENGTH, Math.floor(length)))\n}\n\nfunction normalizeGroups(\n  groups: number[] | undefined,\n  length: number\n): number[] | null {\n  if (!groups || groups.length < 2) return null\n  const normalized = groups\n    .map((group) => Math.floor(group))\n    .filter((group) => Number.isFinite(group) && group > 0)\n  if (normalized.length < 2) return null\n  const sum = normalized.reduce((total, group) => total + group, 0)\n  if (sum !== length) return null\n  return normalized\n}\n\nfunction toLatinDigits(value: string) {\n  return value\n    .replace(/[۰-۹]/g, (digit) => String(PERSIAN_DIGITS.indexOf(digit)))\n    .replace(/[٠-٩]/g, (digit) => String(ARABIC_DIGITS.indexOf(digit)))\n}\n\nfunction toPersianDigits(value: string) {\n  return toLatinDigits(value).replace(\n    /\\d/g,\n    (digit) => PERSIAN_DIGITS[Number(digit)] ?? digit\n  )\n}\n\nfunction extractDigits(value: string) {\n  return toLatinDigits(value).replace(/\\D/g, \"\")\n}\n\nfunction emptyDigits(length: number) {\n  return Array.from({ length }, () => \"\")\n}\n\nfunction parseVerifyCodeValue(\n  value: string | null | undefined,\n  length: number = DEFAULT_LENGTH\n) {\n  const size = clampLength(length)\n  const digits = extractDigits(value ?? \"\").slice(0, size)\n  return Array.from({ length: size }, (_, index) => digits[index] ?? \"\")\n}\n\nfunction formatVerifyCodeValue(\n  value: string | string[] | null | undefined,\n  length: number = DEFAULT_LENGTH\n) {\n  const size = clampLength(length)\n  const digits =\n    value == null\n      ? emptyDigits(size)\n      : Array.isArray(value)\n        ? Array.from(\n            { length: size },\n            (_, index) => extractDigits(value[index] ?? \"\").slice(0, DIGIT_LENGTH)\n          )\n        : parseVerifyCodeValue(value, size)\n\n  if (digits.every((digit) => !digit)) return \"\"\n  return digits.map((digit) => (digit ? toPersianDigits(digit) : \"\")).join(\"\")\n}\n\nfunction formatDigitDisplay(digit: string) {\n  const clipped = extractDigits(digit).slice(0, DIGIT_LENGTH)\n  return clipped ? toPersianDigits(clipped) : \"\"\n}\n\nfunction digitAriaLabel(index: number) {\n  return `رقم ${toPersianDigits(String(index + 1))}`\n}\n\nfunction focusDigit(\n  control: Element | null,\n  index: number,\n  options?: { select?: boolean }\n) {\n  const input = control?.querySelector<HTMLInputElement>(\n    `[data-slot=verify-code-digit][data-index=\"${index}\"]`\n  )\n  if (!input || input.disabled || input.readOnly) return\n  input.focus()\n  if (options?.select) {\n    input.select()\n  } else {\n    const end = input.value.length\n    input.setSelectionRange(end, end)\n  }\n}\n\nfunction VerifyCodeStoreProvider({\n  length,\n  defaultValue,\n  value,\n  onValueChange,\n  children,\n}: {\n  length: number\n  defaultValue?: string\n  value?: string\n  onValueChange?: (value: string) => void\n  children: React.ReactNode\n}) {\n  const isControlled = value !== undefined\n  const [uncontrolledDigits, setUncontrolledDigits] = React.useState(() =>\n    parseVerifyCodeValue(defaultValue, length)\n  )\n\n  React.useEffect(() => {\n    if (isControlled) return\n    setUncontrolledDigits((prev) => {\n      if (prev.length === length) return prev\n      return Array.from({ length }, (_, index) => prev[index] ?? \"\")\n    })\n  }, [isControlled, length])\n\n  const digits = isControlled\n    ? parseVerifyCodeValue(value, length)\n    : uncontrolledDigits.length === length\n      ? uncontrolledDigits\n      : Array.from({ length }, (_, index) => uncontrolledDigits[index] ?? \"\")\n\n  const digitsRef = React.useRef(digits)\n  digitsRef.current = digits\n\n  const commitDigits = React.useCallback(\n    (next: string[]) => {\n      const normalized = Array.from(\n        { length },\n        (_, index) => extractDigits(next[index] ?? \"\").slice(0, DIGIT_LENGTH)\n      )\n      if (!isControlled) {\n        setUncontrolledDigits(normalized)\n      }\n      onValueChange?.(formatVerifyCodeValue(normalized, length))\n    },\n    [isControlled, length, onValueChange]\n  )\n\n  const setDigit = React.useCallback(\n    (index: number, digit: string) => {\n      if (index < 0 || index >= length) return\n      const next = digitsRef.current.map((current, currentIndex) =>\n        currentIndex === index\n          ? extractDigits(digit).slice(0, DIGIT_LENGTH)\n          : current\n      )\n      commitDigits(next)\n    },\n    [commitDigits, length]\n  )\n\n  const setDigits = React.useCallback(\n    (next: string[]) => {\n      commitDigits(next)\n    },\n    [commitDigits]\n  )\n\n  const store = React.useMemo(\n    () => ({ length, digits, setDigit, setDigits }),\n    [length, digits, setDigit, setDigits]\n  )\n\n  return (\n    <VerifyCodeStoreContext.Provider value={store}>\n      {children}\n    </VerifyCodeStoreContext.Provider>\n  )\n}\n\nfunction VerifyCode({\n  className,\n  size = \"default\",\n  length: lengthProp = DEFAULT_LENGTH,\n  groups: groupsProp,\n  name,\n  defaultValue,\n  value,\n  onValueChange,\n  children,\n  disabled,\n  invalid,\n  id: idProp,\n  ...props\n}: Omit<React.ComponentProps<typeof FieldPrimitive.Root>, \"size\" | \"defaultValue\"> & {\n  size?: VerifyCodeSize\n  length?: number\n  groups?: number[]\n  name?: string\n  defaultValue?: string\n  value?: string\n  onValueChange?: (value: string) => void\n}) {\n  const length = clampLength(lengthProp)\n  const groups = normalizeGroups(groupsProp, length)\n  const reactId = React.useId()\n  const id = idProp ?? reactId\n  const descriptionId = `${id}-description`\n  const errorId = `${id}-error`\n\n  return (\n    <VerifyCodeStoreProvider\n      length={length}\n      defaultValue={defaultValue}\n      value={value}\n      onValueChange={onValueChange}\n    >\n      <VerifyCodeContext.Provider\n        value={{\n          size,\n          length,\n          groups,\n          disabled,\n          invalid,\n          id,\n          descriptionId,\n          errorId,\n        }}\n      >\n        <VerifyCodeSizeContext.Provider value={size}>\n          <FieldPrimitive.Root\n            data-slot=\"verify-code\"\n            data-size={size}\n            data-length={length}\n            disabled={disabled}\n            invalid={invalid}\n            className={cn(\n              \"group/verify-code flex w-full min-w-0 flex-col gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-70\",\n              className\n            )}\n            {...props}\n          >\n            {name ? <VerifyCodeHiddenInput name={name} /> : null}\n            {children}\n          </FieldPrimitive.Root>\n        </VerifyCodeSizeContext.Provider>\n      </VerifyCodeContext.Provider>\n    </VerifyCodeStoreProvider>\n  )\n}\n\nfunction VerifyCodeHiddenInput({ name }: { name: string }) {\n  const store = React.useContext(VerifyCodeStoreContext)\n  const value = store\n    ? formatVerifyCodeValue(store.digits, store.length)\n    : \"\"\n\n  return <input type=\"hidden\" name={name} value={value} readOnly />\n}\n\nfunction VerifyCodeLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof FieldPrimitive.Label>) {\n  const ctx = React.useContext(VerifyCodeContext)\n\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"verify-code-label\"\n      htmlFor={props.htmlFor ?? ctx?.id}\n      className={cn(\n        \"flex w-fit items-center gap-2 text-label leading-none font-normal text-foreground select-none group-data-disabled/verify-code:cursor-not-allowed group-data-disabled/verify-code:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction renderVerifyCodeDigits(\n  length: number,\n  groups: number[] | null,\n  digitClassName?: string\n) {\n  if (!groups) {\n    return Array.from({ length }, (_, index) => (\n      <VerifyCodeDigit key={index} index={index} className={digitClassName} />\n    ))\n  }\n\n  const nodes: React.ReactNode[] = []\n  let index = 0\n\n  groups.forEach((groupSize, groupIndex) => {\n    if (groupIndex > 0) {\n      nodes.push(<VerifyCodeSeparator key={`sep-${groupIndex}`} />)\n    }\n    for (let offset = 0; offset < groupSize; offset += 1) {\n      nodes.push(\n        <VerifyCodeDigit\n          key={index}\n          index={index}\n          className={digitClassName}\n        />\n      )\n      index += 1\n    }\n  })\n\n  return nodes\n}\n\nfunction VerifyCodeControl({\n  className,\n  size: sizeProp,\n  digitClassName,\n  onClick,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  size?: VerifyCodeSize\n  digitClassName?: string\n}) {\n  const ctx = React.useContext(VerifyCodeContext)\n  const contextSize = React.useContext(VerifyCodeSizeContext)\n  const size = sizeProp ?? ctx?.size ?? contextSize\n  const length = ctx?.length ?? DEFAULT_LENGTH\n  const groups = ctx?.groups ?? null\n\n  return (\n    <div\n      data-slot=\"verify-code-control\"\n      data-size={size}\n      dir=\"ltr\"\n      className={cn(verifyCodeControlVariants({ size }), className)}\n      onClick={(event) => {\n        onClick?.(event)\n        if (event.defaultPrevented) return\n        if ((event.target as HTMLElement).closest(\"button,a,input,textarea\")) {\n          return\n        }\n        const inputs = Array.from(\n          event.currentTarget.querySelectorAll<HTMLInputElement>(\n            \"[data-slot=verify-code-digit]:not([disabled])\"\n          )\n        )\n        const firstEmpty = inputs.find((input) => !input.value)\n        const target = firstEmpty ?? inputs[0]\n        if (!target || target.disabled || target.readOnly) return\n        target.focus()\n      }}\n      {...props}\n    >\n      {children ?? renderVerifyCodeDigits(length, groups, digitClassName)}\n    </div>\n  )\n}\n\nfunction VerifyCodeSeparator({\n  className,\n  children = \"-\",\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"verify-code-separator\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"shrink-0 select-none text-label font-normal text-muted-foreground group-data-disabled/verify-code:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nfunction VerifyCodeDigit({\n  index,\n  className,\n  size: sizeProp,\n  id,\n  disabled,\n  autoComplete,\n  \"aria-label\": ariaLabel,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-describedby\": ariaDescribedby,\n  placeholder,\n  onBeforeInput,\n  onPaste,\n  onInput,\n  onKeyDown,\n  ...props\n}: Omit<\n  React.ComponentProps<\"input\">,\n  \"size\" | \"type\" | \"inputMode\" | \"spellCheck\" | \"maxLength\" | \"value\" | \"defaultValue\"\n> & {\n  index: number\n  size?: VerifyCodeSize\n}) {\n  const ctx = React.useContext(VerifyCodeContext)\n  const contextSize = React.useContext(VerifyCodeSizeContext)\n  const size = sizeProp ?? ctx?.size ?? contextSize\n  const store = React.useContext(VerifyCodeStoreContext)\n  const isInvalid = ariaInvalid ?? ctx?.invalid\n  const describedBy = [\n    ariaDescribedby,\n    ctx?.descriptionId,\n    isInvalid ? ctx?.errorId : null,\n  ]\n    .filter(Boolean)\n    .join(\" \")\n  const length = store?.length ?? ctx?.length ?? DEFAULT_LENGTH\n  const digitValue = store?.digits[index] ?? \"\"\n  const displayValue = formatDigitDisplay(digitValue)\n\n  const setDigit = store?.setDigit\n  const setDigits = store?.setDigits\n\n  const applyDigit = (\n    input: HTMLInputElement,\n    rawDigits: string,\n    options?: { advance?: boolean }\n  ) => {\n    const nextDigits = extractDigits(rawDigits).slice(0, DIGIT_LENGTH)\n    setDigit?.(index, nextDigits)\n    if (options?.advance && nextDigits.length >= DIGIT_LENGTH) {\n      if (index + 1 < length) {\n        focusDigit(\n          input.closest(\"[data-slot=verify-code-control]\"),\n          index + 1,\n          { select: true }\n        )\n      }\n    }\n  }\n\n  return (\n    <input\n      data-slot=\"verify-code-digit\"\n      data-verify-code-digit=\"\"\n      data-size={size}\n      data-index={index}\n      id={id ?? (index === 0 ? ctx?.id : undefined)}\n      aria-label={ariaLabel ?? digitAriaLabel(index)}\n      aria-describedby={describedBy || undefined}\n      placeholder={placeholder ?? \"\"}\n      className={cn(verifyCodeDigitVariants({ size }), className)}\n      {...props}\n      disabled={disabled ?? ctx?.disabled}\n      aria-invalid={isInvalid || undefined}\n      type=\"text\"\n      inputMode=\"numeric\"\n      size={1}\n      autoComplete={autoComplete ?? (index === 0 ? \"one-time-code\" : \"off\")}\n      spellCheck={false}\n      maxLength={DIGIT_LENGTH}\n      value={displayValue}\n      onBeforeInput={(event) => {\n        onBeforeInput?.(event)\n        if (event.defaultPrevented) return\n        if (typeof event.data !== \"string\" || event.data.length === 0) return\n        if (!ALLOWED_INSERT.test(event.data)) {\n          event.preventDefault()\n          return\n        }\n        const input = event.currentTarget\n        const insert = extractDigits(event.data)\n        if (!insert) {\n          event.preventDefault()\n          return\n        }\n        event.preventDefault()\n\n        if (insert.length > 1 && setDigits) {\n          const control = input.closest(\"[data-slot=verify-code-control]\")\n          const current = store?.digits ?? emptyDigits(length)\n          const merged = extractDigits(\n            current.slice(0, index).join(\"\") + insert\n          ).slice(0, length)\n          const next = Array.from(\n            { length },\n            (_, digitIndex) => merged[digitIndex] ?? \"\"\n          )\n          setDigits(next)\n          const focusIndex = Math.min(merged.length, length - 1)\n          focusDigit(control, focusIndex, { select: true })\n          return\n        }\n\n        applyDigit(input, insert.slice(-DIGIT_LENGTH), { advance: true })\n      }}\n      onPaste={(event) => {\n        onPaste?.(event)\n        if (event.defaultPrevented) return\n        const text = event.clipboardData?.getData(\"text\") ?? \"\"\n        if (!text) return\n        event.preventDefault()\n        const parsed = parseVerifyCodeValue(text, length)\n        const input = event.currentTarget\n        const control = input.closest(\"[data-slot=verify-code-control]\")\n\n        if (extractDigits(text).length > DIGIT_LENGTH && setDigits) {\n          setDigits(parsed)\n          const filled = parsed.findIndex((digit) => !digit)\n          const focusIndex =\n            filled === -1 ? length - 1 : Math.max(0, filled)\n          focusDigit(control, focusIndex, { select: true })\n          return\n        }\n\n        applyDigit(input, extractDigits(text), { advance: true })\n      }}\n      onInput={(event) => {\n        onInput?.(event)\n        if (event.defaultPrevented) return\n        const input = event.currentTarget\n        applyDigit(input, input.value, { advance: true })\n      }}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (event.defaultPrevented) return\n        const input = event.currentTarget\n        const control = input.closest(\"[data-slot=verify-code-control]\")\n\n        if (event.key === \"ArrowLeft\") {\n          if (index <= 0) return\n          event.preventDefault()\n          focusDigit(control, index - 1, { select: true })\n          return\n        }\n\n        if (event.key === \"ArrowRight\") {\n          if (index >= length - 1) return\n          event.preventDefault()\n          focusDigit(control, index + 1, { select: true })\n          return\n        }\n\n        if (event.key !== \"Backspace\") return\n        const start = input.selectionStart ?? 0\n        const end = input.selectionEnd ?? 0\n        if (input.value.length > 0 && (start !== 0 || end !== 0)) {\n          return\n        }\n        if (start !== end) return\n        if (input.value.length > 0) {\n          event.preventDefault()\n          applyDigit(input, \"\")\n          return\n        }\n        if (index <= 0) return\n        event.preventDefault()\n        const prev = store?.digits[index - 1] ?? \"\"\n        if (prev) {\n          setDigit?.(index - 1, \"\")\n        }\n        focusDigit(control, index - 1)\n      }}\n    />\n  )\n}\n\nfunction VerifyCodeDescription({\n  className,\n  id,\n  children,\n  ...props\n}: React.ComponentProps<typeof FieldPrimitive.Description>) {\n  const ctx = React.useContext(VerifyCodeContext)\n\n  if (children == null || children === false) {\n    return null\n  }\n\n  return (\n    <FieldPrimitive.Description\n      data-slot=\"verify-code-description\"\n      id={id ?? ctx?.descriptionId}\n      className={cn(\n        \"m-0 text-caption font-normal text-muted-foreground group-data-disabled/verify-code:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </FieldPrimitive.Description>\n  )\n}\n\nfunction formatVerifyCodeTimer(totalSeconds: number) {\n  const clamped = Math.max(0, Math.floor(totalSeconds))\n  const minutes = Math.floor(clamped / 60)\n  const seconds = clamped % 60\n  const display = `${String(minutes).padStart(2, \"0\")}:${String(seconds).padStart(2, \"0\")}`\n  return toPersianDigits(display)\n}\n\nfunction VerifyCodeResend({\n  className,\n  duration = DEFAULT_RESEND_DURATION,\n  waitingLabel = DEFAULT_WAITING_LABEL,\n  expiredLabel = DEFAULT_EXPIRED_LABEL,\n  resendLabel = DEFAULT_RESEND_LABEL,\n  onResend,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  duration?: number\n  waitingLabel?: React.ReactNode\n  expiredLabel?: React.ReactNode\n  resendLabel?: React.ReactNode\n  onResend?: () => void\n}) {\n  const ctx = React.useContext(VerifyCodeContext)\n  const durationSeconds =\n    Number.isFinite(duration) && duration > 0\n      ? Math.floor(duration)\n      : DEFAULT_RESEND_DURATION\n  const [remaining, setRemaining] = React.useState(durationSeconds)\n  const disabled = Boolean(ctx?.disabled)\n  const counting = remaining > 0\n  const canResend = !counting && !disabled\n\n  React.useEffect(() => {\n    setRemaining(durationSeconds)\n  }, [durationSeconds])\n\n  React.useEffect(() => {\n    if (!counting || disabled) return\n    const timerId = window.setInterval(() => {\n      setRemaining((current) => Math.max(0, current - 1))\n    }, 1000)\n    return () => window.clearInterval(timerId)\n  }, [counting, disabled])\n\n  const restart = () => {\n    if (!canResend) return\n    onResend?.()\n    setRemaining(durationSeconds)\n  }\n\n  const timerBoxClassName =\n    \"inline-grid h-6 shrink-0 place-items-center rounded-[6px] bg-muted px-2 text-caption font-normal text-foreground\"\n\n  return (\n    <div\n      data-slot=\"verify-code-resend\"\n      data-state={counting ? \"waiting\" : \"ready\"}\n      className={cn(\n        \"flex w-full min-w-0 items-center justify-between gap-3 group-data-disabled/verify-code:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    >\n      <p className=\"m-0 min-w-0 text-caption font-normal text-muted-foreground\">\n        {counting ? waitingLabel : expiredLabel}\n      </p>\n      {counting ? (\n        <span data-slot=\"verify-code-timer\" className={timerBoxClassName}>\n          <span\n            className=\"invisible col-start-1 row-start-1 whitespace-nowrap\"\n            aria-hidden=\"true\"\n          >\n            {resendLabel}\n          </span>\n          <span className=\"col-start-1 row-start-1 tabular-nums\">\n            {formatVerifyCodeTimer(remaining)}\n          </span>\n        </span>\n      ) : (\n        <button\n          type=\"button\"\n          data-slot=\"verify-code-timer\"\n          disabled={disabled}\n          className={cn(\n            timerBoxClassName,\n            \"transition-colors outline-none hover:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)] focus-visible:ring-3 focus-visible:ring-primary/20 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-70\"\n          )}\n          onClick={restart}\n        >\n          {resendLabel}\n        </button>\n      )}\n    </div>\n  )\n}\n\nfunction VerifyCodeError({\n  className,\n  id,\n  children,\n  match,\n  ...props\n}: React.ComponentProps<typeof FieldPrimitive.Error>) {\n  const ctx = React.useContext(VerifyCodeContext)\n\n  return (\n    <FieldPrimitive.Validity>\n      {(validity) => {\n        const isInvalid =\n          validity.validity.valid === false || Boolean(ctx?.invalid)\n        if (!isInvalid && match !== true) {\n          return null\n        }\n\n        return (\n          <FieldPrimitive.Error\n            data-slot=\"verify-code-error\"\n            id={id ?? ctx?.errorId}\n            match={match ?? true}\n            className={cn(\n              \"m-0 text-caption font-normal text-destructive\",\n              className\n            )}\n            {...props}\n          >\n            {children}\n          </FieldPrimitive.Error>\n        )\n      }}\n    </FieldPrimitive.Validity>\n  )\n}\n\nexport {\n  VerifyCode,\n  VerifyCodeLabel,\n  VerifyCodeControl,\n  VerifyCodeDigit,\n  VerifyCodeSeparator,\n  VerifyCodeDescription,\n  VerifyCodeResend,\n  VerifyCodeError,\n  formatVerifyCodeValue,\n  parseVerifyCodeValue,\n  formatVerifyCodeTimer,\n  clampLength,\n  normalizeGroups,\n  verifyCodeControlVariants,\n  verifyCodeDigitVariants,\n  DEFAULT_LENGTH,\n  MIN_LENGTH,\n  MAX_LENGTH,\n  DEFAULT_RESEND_DURATION,\n}\nexport type { VerifyCodeSize }\n"
    }
  ]
}