{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-otp",
  "type": "registry:ui",
  "title": "Input OTP",
  "description": "Segmented one-time-code input over a hidden TextInput.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/utils.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/text.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/theme.json"
  ],
  "files": [
    {
      "path": "registry/shared/ui/input-otp.tsx",
      "type": "registry:ui",
      "target": "components/ui/input-otp.tsx",
      "content": "import { useContext, useRef, useState } from 'react';\nimport {\n  Platform,\n  Pressable,\n  StyleSheet,\n  TextInput,\n  View,\n  type TextInputProps,\n  type ViewProps,\n} from 'react-native';\nimport { Text } from '@/components/ui/text';\nimport { cn, FormFieldContext, useThemeColor } from '@/lib/utils';\n\nexport interface InputOTPProps extends ViewProps {\n  length?: number;\n  value?: string;\n  onChange?: (value: string) => void;\n  /** Fired once all slots are filled. */\n  onComplete?: (value: string) => void;\n  secure?: boolean;\n  /** Mirrors shadcn `aria-invalid` — destructive slot borders. Auto-detected from FormField error. */\n  invalid?: boolean;\n  /** Prevents input focus and dims slots. */\n  disabled?: boolean;\n  autoFocus?: boolean;\n  keyboardType?: TextInputProps['keyboardType'];\n  className?: string;\n  slotClassName?: string;\n}\n\nexport function InputOTP({\n  length = 6,\n  value = '',\n  onChange,\n  onComplete,\n  secure = false,\n  invalid,\n  disabled = false,\n  autoFocus = false,\n  keyboardType = 'number-pad',\n  className,\n  slotClassName,\n  ...props\n}: InputOTPProps) {\n  const inputRef = useRef<TextInput>(null);\n  const [focused, setFocused] = useState(false);\n  const field = useContext(FormFieldContext);\n  const colors = useThemeColor();\n  const isInvalid = invalid ?? !!field?.error;\n\n  const handleChange = (text: string) => {\n    const next = text.replace(/[^0-9a-zA-Z]/g, '').slice(0, length);\n    onChange?.(next);\n    if (next.length === length) {\n      onComplete?.(next);\n    }\n  };\n\n  return (\n    <Pressable\n      disabled={disabled}\n      onPress={() => inputRef.current?.focus()}\n      accessibilityRole=\"none\"\n      accessibilityState={{ disabled }}\n      className={cn('relative', disabled && 'opacity-50')}\n    >\n      <View\n        className={cn('flex-row items-center gap-2', className)}\n        {...props}\n      >\n        {Array.from({ length }).map((_, i) => {\n          const char = value[i] ?? '';\n          const isActive =\n            focused && !disabled && i === Math.min(value.length, length - 1);\n          return (\n            <View\n              // biome-ignore lint/suspicious/noArrayIndexKey: slots are positional by design\n              key={i}\n              className={cn(\n                'h-12 w-10 items-center justify-center rounded-lg border border-input bg-background',\n                slotClassName\n              )}\n              style={[\n                { borderCurve: 'continuous' },\n                isActive && {\n                  borderColor: colors.ring,\n                  borderWidth: 1.5,\n                },\n                isInvalid && { borderColor: colors.destructive },\n              ]}\n            >\n              <Text className=\"text-lg font-semibold text-foreground\">\n                {secure && char ? '•' : char}\n              </Text>\n            </View>\n          );\n        })}\n\n        {/* Hidden full-area input wired for iOS & Android SMS Auto-Fill */}\n        <TextInput\n          ref={inputRef}\n          value={value}\n          editable={!disabled}\n          autoFocus={autoFocus}\n          maxLength={length}\n          onChangeText={handleChange}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          keyboardType={keyboardType}\n          autoComplete={Platform.select({\n            android: 'sms-otp',\n            default: 'one-time-code',\n          })}\n          textContentType=\"oneTimeCode\"\n          accessibilityLabel=\"One-time verification code\"\n          style={styles.hiddenInput}\n          caretHidden\n        />\n      </View>\n    </Pressable>\n  );\n}\n\nconst styles = StyleSheet.create({\n  hiddenInput: {\n    ...StyleSheet.absoluteFillObject,\n    opacity: 0,\n  },\n});\n"
    }
  ]
}