{
  "name": "mask-input-custom-pattern-demo",
  "type": "registry:example",
  "registryDependencies": [
    "label",
    "mask-input"
  ],
  "files": [
    {
      "path": "examples/mask-input-custom-pattern-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { z } from \"zod\";\n\nimport { Label } from \"@/registry/bases/radix/ui/label\";\nimport {\n  MaskInput,\n  type MaskPattern,\n} from \"@/registry/bases/radix/ui/mask-input\";\n\n// Custom license plate pattern (e.g., ABC-1234)\nconst licensePattern: MaskPattern = {\n  pattern: \"###-####\",\n  transform: (value) => value.replace(/[^A-Z0-9]/gi, \"\").toUpperCase(),\n  validate: (value) => {\n    const cleaned = value.replace(/[^A-Z0-9]/gi, \"\").toUpperCase();\n    return cleaned.length === 7 && /^[A-Z]{3}[0-9]{4}$/.test(cleaned);\n  },\n};\n\n// Custom product code pattern (e.g., PRD-ABC-123)\nconst productCodePattern: MaskPattern = {\n  pattern: \"###-###-###\",\n  transform: (value) => {\n    const cleaned = value.replace(/[^A-Z0-9]/gi, \"\").toUpperCase();\n\n    // If empty or just partial PRD, allow it to be empty\n    if (cleaned.length === 0) {\n      return \"\";\n    }\n\n    // If user is typing and it doesn't start with PRD, prepend it\n    // But only if they have more than just partial PRD characters\n    if (!cleaned.startsWith(\"PRD\")) {\n      // If user typed partial PRD (like \"P\" or \"PR\"), don't auto-complete\n      if (cleaned.length <= 2 && \"PRD\".startsWith(cleaned)) {\n        return cleaned;\n      }\n      // Otherwise, prepend PRD to their input\n      return `PRD${cleaned}`;\n    }\n\n    // If it already starts with PRD, keep as is\n    return cleaned;\n  },\n  validate: (value) => {\n    const cleaned = value.replace(/[^A-Z0-9]/gi, \"\").toUpperCase();\n    return cleaned.length === 9 && cleaned.startsWith(\"PRD\");\n  },\n};\n\nexport default function MaskInputCustomPatternDemo() {\n  const [licenseValue, setLicenseValue] = React.useState(\"\");\n  const [productCodeValue, setProductCodeValue] = React.useState(\"\");\n  const [isLicenseValid, setIsLicenseValid] = React.useState(true);\n  const [isProductCodeValid, setIsProductCodeValid] = React.useState(true);\n\n  return (\n    <div className=\"flex w-full max-w-sm flex-col gap-6\">\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor=\"license\">License plate</Label>\n        <MaskInput\n          id=\"license\"\n          mask={licensePattern}\n          value={licenseValue}\n          onValueChange={setLicenseValue}\n          placeholder=\"Enter license plate\"\n          maskPlaceholder=\"ABC-1234\"\n          invalid={!isLicenseValid}\n          onValidate={setIsLicenseValid}\n        />\n        <p className=\"text-sm text-muted-foreground\">\n          Enter license plate (3 letters, 4 numbers)\n        </p>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor=\"product\">Product code</Label>\n        <MaskInput\n          id=\"product\"\n          mask={productCodePattern}\n          value={productCodeValue}\n          onValueChange={setProductCodeValue}\n          placeholder=\"Enter product code\"\n          maskPlaceholder=\"PRD-ABC-123\"\n          invalid={!isProductCodeValid}\n          onValidate={setIsProductCodeValid}\n        />\n        <p className=\"text-sm text-muted-foreground\">\n          Enter product code (PRD-XXX-XXX format)\n        </p>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}