{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-mask-2",
  "type": "registry:component",
  "title": "Input Mask 2",
  "description": "Input Mask 2. An input field that enforces a specific format as users type, such as phone numbers, dates, or credit card details, improving data consistency and user experience.",
  "dependencies": [
    "react-icons",
    "react-payment-inputs"
  ],
  "registryDependencies": [
    "input",
    "label"
  ],
  "files": [
    {
      "path": "components/watermelon/input-mask-2.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useId } from 'react';\n\nimport { HiCreditCard } from 'react-icons/hi2';\n\nimport { usePaymentInputs } from 'react-payment-inputs';\nimport images, { type CardImages } from 'react-payment-inputs/images';\n\nimport { Input } from '@/components/base-ui/input';\nimport { Label } from '@/components/base-ui/label';\n\nconst InputMask2 = () => {\n  const id = useId();\n  const { meta, getCardNumberProps, getCardImageProps } = usePaymentInputs();\n\n  return (\n    <div className=\"w-full max-w-xs space-y-3\">\n      <Label htmlFor={id}>Card Number</Label>\n\n      <div className=\"relative\">\n        <Input\n          {...getCardNumberProps()}\n          id={id}\n          placeholder=\"1234 5678 9012 3456\"\n          className=\"peer focus-visible:ring-primary/20 focus-visible:border-primary/50 bg-muted/50 pr-11 focus-visible:ring-2\"\n        />\n\n        <div className=\"text-muted-foreground pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 peer-disabled:opacity-50\">\n          {meta.cardType ? (\n            <svg\n              className=\"bg-muted/50 w-6 overflow-hidden shadow-md\"\n              {...getCardImageProps({\n                images: images as unknown as CardImages,\n              })}\n            />\n          ) : (\n            <HiCreditCard className=\"size-4\" />\n          )}\n        </div>\n      </div>\n\n      <p className=\"text-muted-foreground text-xs\">\n        Enter your card number as shown on your card\n      </p>\n    </div>\n  );\n};\n\nexport default InputMask2;\n"
    }
  ]
}