{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pin-input",
  "type": "registry:ui",
  "dependencies": ["@ark-ui/react", "lucide-react"],
  "files": [
    {
      "path": "./src/components/ui/pin-input.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react/factory\"\nimport {\n  PinInput as PinInputPrimitive,\n  pinInputAnatomy,\n} from \"@ark-ui/react/pin-input\"\nimport { MinusIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst parts = pinInputAnatomy.extendWith(\"group\", \"separator\").build()\n\nconst PinInput = React.forwardRef<\n  React.ElementRef<typeof PinInputPrimitive.Root>,\n  PinInputPrimitive.RootProps\n>(({ children, ...props }, ref) => (\n  <PinInputPrimitive.Root ref={ref} {...props}>\n    {children}\n    <PinInputPrimitive.HiddenInput />\n  </PinInputPrimitive.Root>\n))\nPinInput.displayName = \"PinInput\"\n\nconst PinInputContext = PinInputPrimitive.Context\n\nconst PinInputControl = React.forwardRef<\n  React.ElementRef<typeof PinInputPrimitive.Control>,\n  PinInputPrimitive.ControlProps\n>(({ className, ...props }, ref) => (\n  <PinInputPrimitive.Control\n    ref={ref}\n    className={cn(\"flex items-center gap-2\", className)}\n    {...props}\n  />\n))\nPinInputControl.displayName = \"PinInputControl\"\n\nconst PinInputGroup = React.forwardRef<\n  React.ElementRef<\"div\">,\n  HTMLArkProps<\"div\">\n>(({ className, ...props }, ref) => (\n  <ark.div\n    ref={ref}\n    {...parts.group.attrs}\n    className={cn(\"flex items-center\", className)}\n    {...props}\n  />\n))\nPinInputGroup.displayName = \"PinInputGroup\"\n\nconst PinInputInput = React.forwardRef<\n  React.ElementRef<typeof PinInputPrimitive.Input>,\n  PinInputPrimitive.InputProps\n>(({ className, ...props }, ref) => (\n  <PinInputPrimitive.Input\n    ref={ref}\n    className={cn(\n      \"relative h-9 w-9 border-input border-y border-r text-center text-sm shadow-xs outline-none transition-all placeholder:text-center placeholder:text-muted-foreground/70 first:rounded-l-md first:border-l last:rounded-r-md dark:bg-input/30\",\n      \"focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n      \"aria-invalid:border-destructive focus-visible:aria-invalid:ring-destructive/20 dark:focus-visible:aria-invalid:ring-destructive/40\",\n      className\n    )}\n    {...props}\n  />\n))\nPinInputInput.displayName = \"PinInputInput\"\n\nconst PinInputLabel = React.forwardRef<\n  React.ElementRef<typeof PinInputPrimitive.Label>,\n  PinInputPrimitive.LabelProps\n>(({ className, ...props }, ref) => (\n  <PinInputPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"select-none font-medium text-foreground text-sm leading-4 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  />\n))\nPinInputLabel.displayName = \"PinInputLabel\"\n\nconst PinInputSeparator = React.forwardRef<\n  React.ElementRef<\"div\">,\n  HTMLArkProps<\"div\">\n>((props, ref) => (\n  <ark.div ref={ref} {...parts.separator.attrs} {...props}>\n    <MinusIcon />\n  </ark.div>\n))\nPinInputSeparator.displayName = \"PinInputSeparator\"\n\nexport {\n  PinInput,\n  PinInputContext,\n  PinInputControl,\n  PinInputGroup,\n  PinInputInput,\n  PinInputLabel,\n  PinInputSeparator,\n}\n",
      "type": "registry:ui"
    }
  ]
}