{
  "name": "mask-input-demo",
  "type": "registry:example",
  "registryDependencies": [
    "mask-input"
  ],
  "files": [
    {
      "path": "examples/mask-input-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Label } from \"@/registry/bases/radix/ui/label\";\nimport { MaskInput } from \"@/registry/bases/radix/ui/mask-input\";\n\ninterface Input {\n  phone: string;\n  date: string;\n  dollar: string;\n  euro: string;\n  creditCard: string;\n  percentage: string;\n}\n\nexport default function MaskInputDemo() {\n  const id = React.useId();\n  const [input, setInput] = React.useState<Input>({\n    phone: \"\",\n    date: \"\",\n    dollar: \"\",\n    euro: \"\",\n    creditCard: \"\",\n    percentage: \"\",\n  });\n\n  const onValueChange = React.useCallback(\n    (field: keyof Input) => (maskedValue: string) => {\n      setInput((prev) => ({\n        ...prev,\n        [field]: maskedValue,\n      }));\n    },\n    [],\n  );\n\n  return (\n    <div className=\"grid w-full gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor={`${id}-phone`}>Phone number</Label>\n        <MaskInput\n          id={`${id}-phone`}\n          mask=\"phone\"\n          placeholder=\"Enter your phone number\"\n          value={input.phone}\n          onValueChange={onValueChange(\"phone\")}\n        />\n        <p className=\"text-sm text-muted-foreground\">\n          Enter your phone number with area code\n        </p>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor={`${id}-date`}>Birth date</Label>\n        <MaskInput\n          id={`${id}-date`}\n          mask=\"date\"\n          placeholder=\"Enter your birth date\"\n          value={input.date}\n          onValueChange={onValueChange(\"date\")}\n        />\n        <p className=\"text-sm text-muted-foreground\">Enter your birth date</p>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor={`${id}-dollar`}>Currency</Label>\n        <MaskInput\n          id={`${id}-dollar`}\n          mask=\"currency\"\n          placeholder=\"$0.00\"\n          value={input.dollar}\n          onValueChange={onValueChange(\"dollar\")}\n        />\n        <p className=\"text-sm text-muted-foreground\">Enter your currency</p>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor={`${id}-euro`}>Currency (German)</Label>\n        <MaskInput\n          id={`${id}-euro`}\n          mask=\"currency\"\n          currency=\"EUR\"\n          locale=\"de-DE\"\n          placeholder=\"0,00 €\"\n          value={input.euro}\n          onValueChange={onValueChange(\"euro\")}\n        />\n        <p className=\"text-sm text-muted-foreground\">Enter your currency</p>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor={`${id}-creditCard`}>Credit card</Label>\n        <MaskInput\n          id={`${id}-creditCard`}\n          mask=\"creditCard\"\n          placeholder=\"Enter your credit card number\"\n          value={input.creditCard}\n          onValueChange={onValueChange(\"creditCard\")}\n        />\n        <p className=\"text-sm text-muted-foreground\">\n          Enter your credit card number\n        </p>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor={`${id}-percentage`}>Percentage</Label>\n        <MaskInput\n          id={`${id}-percentage`}\n          mask=\"percentage\"\n          placeholder=\"0.00%\"\n          min={0}\n          max={100}\n          value={input.percentage}\n          onValueChange={onValueChange(\"percentage\")}\n        />\n        <p className=\"text-sm text-muted-foreground\">Enter a percentage</p>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}