{
  "name": "mask-input-card-information-demo",
  "type": "registry:example",
  "registryDependencies": [
    "card",
    "label",
    "mask-input"
  ],
  "files": [
    {
      "path": "examples/mask-input-card-information-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { toast } from \"sonner\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\";\nimport { Label } from \"@/registry/bases/radix/ui/label\";\nimport { MaskInput } from \"@/registry/bases/radix/ui/mask-input\";\n\nexport default function MaskInputCardInformationDemo() {\n  const id = React.useId();\n  const [cardNumber, setCardNumber] = React.useState(\"\");\n  const [expiryDate, setExpiryDate] = React.useState(\"\");\n  const [cvc, setCvc] = React.useState(\"\");\n  const [cardNumberValid, setCardNumberValid] = React.useState(true);\n  const [expiryValid, setExpiryValid] = React.useState(true);\n  const [cvcValid, setCvcValid] = React.useState(true);\n\n  const isFormValid = React.useMemo(() => {\n    return (\n      cardNumberValid &&\n      expiryValid &&\n      cvcValid &&\n      cardNumber.trim() !== \"\" &&\n      expiryDate.trim() !== \"\" &&\n      cvc.trim() !== \"\"\n    );\n  }, [cardNumberValid, expiryValid, cvcValid, cardNumber, expiryDate, cvc]);\n\n  const onSubmit = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n\n      if (!isFormValid) {\n        toast.error(\"Please fix validation errors before submitting\");\n        return;\n      }\n\n      toast.success(\n        <pre className=\"w-full\">\n          {JSON.stringify({ cardNumber, expiryDate, cvc }, null, 2)}\n        </pre>,\n      );\n    },\n    [cardNumber, expiryDate, cvc, isFormValid],\n  );\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Card information</CardTitle>\n        <CardDescription>Enter your card information</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-col gap-4\">\n        <div className=\"flex flex-col gap-2\">\n          <Label htmlFor={`${id}-card-number`}>Card number</Label>\n          <MaskInput\n            id={`${id}-card-number`}\n            mask=\"creditCard\"\n            placeholder=\"1234 1234 1234 1234\"\n            validationMode=\"onBlur\"\n            value={cardNumber}\n            onValueChange={setCardNumber}\n            onValidate={setCardNumberValid}\n            invalid={!cardNumberValid}\n          />\n          {!cardNumberValid && cardNumber && (\n            <p className=\"text-sm text-destructive\">\n              Please enter a valid credit card number.\n            </p>\n          )}\n        </div>\n        <div className=\"grid grid-cols-2 gap-4\">\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor={`${id}-expiry`}>Expiry date</Label>\n            <MaskInput\n              id={`${id}-expiry`}\n              mask=\"creditCardExpiry\"\n              placeholder=\"MM/YY\"\n              validationMode=\"onBlur\"\n              value={expiryDate}\n              onValueChange={setExpiryDate}\n              onValidate={setExpiryValid}\n              invalid={!expiryValid}\n            />\n            {!expiryValid && expiryDate && (\n              <p className=\"text-sm text-destructive\">\n                Your card's expiration date is invalid.\n              </p>\n            )}\n          </div>\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor={`${id}-cvc`}>CVC</Label>\n            <MaskInput\n              id={`${id}-cvc`}\n              mask={{\n                pattern: \"###\",\n                transform: (value) => value.replace(/[^0-9]/g, \"\"),\n                validate: (value) => value.length === 3,\n              }}\n              placeholder=\"123\"\n              validationMode=\"onBlur\"\n              value={cvc}\n              onValueChange={setCvc}\n              onValidate={setCvcValid}\n              invalid={!cvcValid}\n            />\n            {!cvcValid && cvc && (\n              <p className=\"text-sm text-destructive\">CVC must be 3 digits.</p>\n            )}\n          </div>\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button onClick={onSubmit} className=\"w-full\" disabled={!isFormValid}>\n          Submit\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}\n",
      "target": ""
    }
  ]
}