{
  "name": "validated-form",
  "type": "registry:component",
  "title": "Validated Form",
  "description": "A submitted form with loading, server validation errors and a visible result status.",
  "registryDependencies": [
    "@siteplane/base",
    "@siteplane/button",
    "@siteplane/field",
    "@siteplane/form",
    "@siteplane/input"
  ],
  "dependencies": [],
  "files": [
    {
      "path": "src/components/patterns/validated-form.tsx",
      "type": "registry:component",
      "target": "components/patterns/validated-form.tsx",
      "content": "\"use client\";\n\nimport { useState, type FormEvent } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Field, FieldError, FieldLabel } from \"@/components/ui/field\";\nimport { Form } from \"@/components/ui/form\";\nimport { Input } from \"@/components/ui/input\";\n\nexport function ValidatedForm() {\n  const [loading, setLoading] = useState(false);\n  const [errors, setErrors] = useState<Record<string, string | string[]>>({});\n  const [status, setStatus] = useState(\"Handle: not submitted\");\n\n  async function onSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n\n    const formData = new FormData(event.currentTarget);\n    const handle = String(formData.get(\"handle\") ?? \"\");\n    setLoading(true);\n    setErrors({});\n    await new Promise((resolve) => setTimeout(resolve, 800));\n    setLoading(false);\n\n    if (handle === \"admin\") {\n      setErrors({ handle: \"Dieser Handle ist bereits vergeben.\" });\n      setStatus(\"Handle: rejected\");\n      return;\n    }\n\n    setStatus(`Handle: ${handle || \"none\"}`);\n  }\n\n  return (\n    <Form\n      className=\"grid w-full max-w-sm gap-3\"\n      data-recipe=\"validated-form\"\n      errors={errors}\n      onSubmit={onSubmit}\n    >\n      <Field name=\"handle\">\n        <FieldLabel>Public handle</FieldLabel>\n        <Input defaultValue=\"admin\" placeholder=\"acme\" />\n        <FieldError />\n      </Field>\n      <div className=\"flex items-center gap-2\">\n        <Button loading={loading} type=\"submit\">\n          Submit\n        </Button>\n        <span\n          className=\"text-muted-foreground text-xs\"\n          data-recipe-status=\"validated-form\"\n          role=\"status\"\n        >\n          {status}\n        </span>\n      </div>\n    </Form>\n  );\n}\n"
    }
  ],
  "categories": [
    "patterns"
  ],
  "docs": "# Validated Form\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nValidated Form is a `registry:component` for a complete submit flow with loading feedback, a server-style field error and a visible submitted result.\n\n## Import\n\n```tsx\nimport { ValidatedForm } from \"@/components/patterns/validated-form\";\n```\n\n## Public API\n\n- Render `ValidatedForm` where the built-in public-handle example matches the product flow.\n- The form starts with `admin` to demonstrate the rejected response. Any other handle demonstrates the submitted state.\n- Replace the example copy and submit function after installation while preserving Form, Field, FieldError and the loading Button behavior.\n\n## Public Motion\n\n- The recipe adds no motion. The loading Button retains its native Siteplane UI feedback.\n- Reduced motion behavior is inherited from the installed primitives.\n\n## Public Accessibility\n\n- The Field label names the Input and FieldError announces validation through the Form contract.\n- Submission status uses a live status role without moving focus away from the form.\n\n## Public Agent Guidance\n\n- Install with `pnpm dlx shadcn@4.16.1 add @siteplane/validated-form`.\n- Keep server errors in the Form `errors` prop and keep the loading state on the submit Button.\n- Use a custom form composition when the flow needs multiple fields or different validation behavior.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/patterns/validated-form)\n\n- [Registry source](https://ui.siteplane.io/r/validated-form.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/patterns/validated-form",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}