{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-input-otp",
  "title": "Glass Input OTP",
  "author": "Alex Chih (https://alexchih.com)",
  "description": "One-time-code input on glass cells with a ruri active caret.",
  "dependencies": [
    "input-otp",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://washiveil.alexchih.com/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/washiveil/ui/glass-input-otp.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { OTPInput, OTPInputContext } from 'input-otp'\nimport { Minus } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\nconst GlassInputOTP = React.forwardRef<\n  React.ComponentRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    ref={ref}\n    containerClassName={cn('flex items-center gap-2 has-[:disabled]:opacity-50', containerClassName)}\n    className={cn('disabled:cursor-not-allowed', className)}\n    {...props}\n  />\n))\nGlassInputOTP.displayName = 'GlassInputOTP'\n\nfunction GlassInputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div className={cn('flex items-center gap-1.5', className)} {...props} />\n}\nGlassInputOTPGroup.displayName = 'GlassInputOTPGroup'\n\nfunction GlassInputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & { index: number }) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      className={cn(\n        'relative flex size-10 items-center justify-center rounded-xl border border-border bg-glass font-mono text-sm backdrop-blur-md transition-all',\n        isActive && 'z-10 outline-none ring-2 ring-ring ring-offset-2 ring-offset-background',\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground motion-reduce:animate-none\" />\n        </div>\n      )}\n    </div>\n  )\n}\nGlassInputOTPSlot.displayName = 'GlassInputOTPSlot'\n\nfunction GlassInputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div role=\"separator\" {...props}>\n      <Minus className=\"size-3.5 text-faint\" />\n    </div>\n  )\n}\nGlassInputOTPSeparator.displayName = 'GlassInputOTPSeparator'\n\nexport { GlassInputOTP, GlassInputOTPGroup, GlassInputOTPSlot, GlassInputOTPSeparator }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}