{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accessible-forms-demo",
  "title": "Accessible keyboard workflows",
  "description": "Exercise labeled controls, focus management, error relationships, and the full form using only a keyboard.",
  "dependencies": [],
  "registryDependencies": [
    "@protoform/protoform-demo-runtime"
  ],
  "files": [
    {
      "path": "registry/base-nova/protoform/demo/catalog/accessible-forms.tsx",
      "content": "// Generated by scripts/generate-demo-catalog.ts.\n'use client';\n\nexport const client = 'only';\n\nimport { formatSubmittedValue } from '../../lib/protobuf-provider';\nimport { useState } from 'react';\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from '@/registry/base-nova/protoform/components/alert';\nimport { AutoForm } from '@/registry/base-nova/protoform/components/auto-form';\nimport { Badge } from '@/registry/base-nova/protoform/components/badge';\nimport { getDemoSchema } from '@/registry/base-nova/protoform/demo/runtime/demo-schemas';\n\nexport function AccessibleFormsDemo() {\n  const [submittedValue, setSubmittedValue] = useState<string>();\n  const { defaultValues, schema } = getDemoSchema(\"validation\");\n\n  return (\n    <div className=\"space-y-6\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Badge variant=\"primary-inverted\">React Hook Form</Badge>\n        <Badge variant=\"outline\">Live protobuf contract</Badge>\n      </div>\n      <p className=\"text-muted-foreground text-sm\">\n        {\"Complete the form using Tab, Shift+Tab, Enter, Space, and arrow keys.\"}\n      </p>\n      <AutoForm\n        defaultValues={defaultValues}\n        formOptions={{ mode: 'onBlur', reValidateMode: 'onChange' }}\n        onFieldChange={() => setSubmittedValue(undefined)}\n        onSubmit={(values) => setSubmittedValue(formatSubmittedValue(values))}\n        schema={schema}\n        withSubmit\n      />\n      {submittedValue ? (\n        <Alert role=\"status\" variant=\"success\">\n          <AlertTitle>Submitted protobuf value</AlertTitle>\n          <AlertDescription>\n            <pre className=\"max-h-80 max-w-full overflow-auto whitespace-pre-wrap text-xs\">\n              {submittedValue}\n            </pre>\n          </AlertDescription>\n        </Alert>\n      ) : null}\n    </div>\n  );\n}\n\nexport default AccessibleFormsDemo;\n",
      "type": "registry:component",
      "target": "~/components/protoform-examples/accessible-forms.tsx"
    }
  ],
  "type": "registry:example"
}