{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-otp",
  "title": "OTP Input",
  "description": "A verification code field with one box per character, on Base UI's OTP Field.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "@cupertinoui/macos-theme"
  ],
  "files": [
    {
      "path": "registry/macos/ui/input-otp.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPField as OTPFieldPrimitive } from \"@base-ui/react/otp-field\"\nimport { MinusIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n// A verification code field: one box per character, built on Base UI's\n// OTP Field. Typing moves to the next box; pasting fills them all.\nfunction InputOTP({ className, ...props }: OTPFieldPrimitive.Root.Props) {\n  return (\n    <OTPFieldPrimitive.Root\n      data-slot=\"input-otp\"\n      className={cn(\"flex items-center gap-2 has-disabled:opacity-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"input-otp-group\" className={cn(\"flex items-center gap-1.5\", className)} {...props} />\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: OTPFieldPrimitive.Input.Props & {\n  index?: number\n}) {\n  return (\n    <OTPFieldPrimitive.Input\n      data-slot=\"input-otp-slot\"\n      aria-label={index !== undefined && index > 0 ? `Character ${index + 1}` : undefined}\n      className={cn(\n        \"h-9 w-8 rounded-[7px] bg-mac-field text-center text-[17px] font-semibold text-mac-label caret-mac-accent shadow-[0_0_0_1px_var(--mac-field-border)] transition-[box-shadow] outline-none\",\n        \"focus:shadow-[0_0_0_1px_var(--mac-field-border),0_0_0_3.5px_color-mix(in_srgb,var(--mac-accent)_50%,transparent)] aria-invalid:shadow-[0_0_0_3.5px_color-mix(in_srgb,var(--mac-red)_50%,transparent)] disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" className=\"text-mac-label-tertiary\" {...props}>\n      <MinusIcon className=\"size-3.5\" strokeWidth={2.5} />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}