{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-mask-5",
  "type": "registry:component",
  "title": "Input Mask 5",
  "description": "Input Mask 5. 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-5.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useId } from 'react';\n\nimport { HiCalendarDays } from 'react-icons/hi2';\n\nimport { usePaymentInputs } from 'react-payment-inputs';\n\nimport { Input } from '@/components/base-ui/input';\nimport { Label } from '@/components/base-ui/label';\n\nconst InputMask5 = () => {\n  const id = useId();\n  const { getExpiryDateProps } = usePaymentInputs();\n\n  return (\n    <div className=\"w-full max-w-xs space-y-3\">\n      <Label htmlFor={id} className=\"flex items-center gap-2\">\n        Expiry Date\n      </Label>\n      <div className=\"group bg-muted/20  focus-within:ring-primary/20 focus-within:border-primary/50 flex items-center gap-2 overflow-hidden rounded-md border focus-within:ring-2\">\n        <div className=\"border-border dark:border-border/50 bg-muted flex h-8 w-12 items-center justify-center border-r\">\n          <HiCalendarDays className=\"text-muted-foreground group-focus-within:text-foreground size-4 transition-all duration-200 group-focus-within:scale-110\" />\n        </div>\n\n        <Input\n          {...getExpiryDateProps()}\n          id={id}\n          placeholder=\"MM / YY\"\n          className=\"border-0 bg-transparent dark:bg-transparent p-0 shadow-none focus-visible:border-0 focus-visible:ring-0\"\n        />\n      </div>\n\n      <p className=\"text-muted-foreground text-xs\">\n        Enter the expiry date as shown on your card\n      </p>\n    </div>\n  );\n};\n\nexport default InputMask5;\n"
    }
  ]
}