{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "halo-field-demo",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "halo-field"
  ],
  "files": [
    {
      "path": "registry/default/example/halo-field-demo.tsx",
      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\nimport { Mail } from \"lucide-react\"\n\nimport {\n  HaloField,\n  HaloFieldContent,\n  HaloFieldDescription,\n  HaloFieldError,\n  HaloFieldLabel,\n} from \"@/registry/default/ui/halo-field\"\nimport { HaloInput, HaloTextarea } from \"@/registry/default/ui/halo-input\"\n\nconst EMAIL_LIKE = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\nexport default function HaloFieldDemo() {\n  const emailId = useId()\n  const bioId = useId()\n  const [email, setEmail] = useState(\"\")\n  const [showEmailError, setShowEmailError] = useState(false)\n  const emailInvalid = showEmailError && !EMAIL_LIKE.test(email)\n\n  return (\n    <main className=\"flex w-full flex-col items-center justify-center\">\n      <div className=\"flex w-full max-w-md flex-col gap-12\">\n        <section className=\"space-y-3\">\n          <h2 className=\"font-semibold text-foreground text-lg tracking-tight\">\n            Field + input\n          </h2>\n          <p className=\"text-pretty text-muted-foreground text-sm\">\n            Groups a label with an input, helper text, and optional validation\n            messages in a frosted shell with an animated rim.\n          </p>\n          <HaloField>\n            <HaloFieldLabel htmlFor={emailId}>Email</HaloFieldLabel>\n            <HaloFieldContent>\n              <HaloInput\n                aria-invalid={emailInvalid}\n                autoComplete=\"email\"\n                id={emailId}\n                invalid={emailInvalid}\n                leadingSlot={<Mail aria-hidden />}\n                onChange={(e) => setEmail(e.target.value)}\n                placeholder=\"you@example.com\"\n                type=\"email\"\n                value={email}\n              />\n              <HaloFieldDescription>\n                We’ll only use this for account updates.\n              </HaloFieldDescription>\n              {emailInvalid ? (\n                <HaloFieldError>Enter a valid email address.</HaloFieldError>\n              ) : null}\n            </HaloFieldContent>\n          </HaloField>\n          <button\n            className=\"rounded-md border border-border px-3 py-1.5 font-medium text-foreground text-sm fine-hover:hover:bg-muted\"\n            onClick={() => setShowEmailError((v) => !v)}\n            type=\"button\"\n          >\n            Toggle validation (demo)\n          </button>\n        </section>\n\n        <section className=\"space-y-3\">\n          <h2 className=\"font-semibold text-foreground text-lg tracking-tight\">\n            Textarea\n          </h2>\n          <HaloField>\n            <HaloFieldLabel htmlFor={bioId}>Bio</HaloFieldLabel>\n            <HaloFieldContent>\n              <HaloTextarea\n                id={bioId}\n                placeholder=\"A few lines about you…\"\n                rows={5}\n              />\n              <HaloFieldDescription>\n                Optional — shown on your profile.\n              </HaloFieldDescription>\n            </HaloFieldContent>\n          </HaloField>\n        </section>\n      </div>\n    </main>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}