{
  "name": "editable-demo",
  "type": "registry:example",
  "registryDependencies": [
    "button",
    "editable"
  ],
  "files": [
    {
      "path": "examples/editable-demo.tsx",
      "type": "registry:example",
      "content": "import * as React from \"react\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  Editable,\n  EditableArea,\n  EditableCancel,\n  EditableInput,\n  EditableLabel,\n  EditablePreview,\n  EditableSubmit,\n  EditableToolbar,\n  EditableTrigger,\n} from \"@/registry/bases/radix/ui/editable\";\n\nexport default function EditableDemo() {\n  return (\n    <Editable defaultValue=\"Click to edit\" placeholder=\"Enter your text here\">\n      <EditableLabel>Fruit</EditableLabel>\n      <EditableArea>\n        <EditablePreview />\n        <EditableInput />\n      </EditableArea>\n      <EditableTrigger asChild>\n        <Button size=\"sm\" className=\"w-fit\">\n          Edit\n        </Button>\n      </EditableTrigger>\n      <EditableToolbar>\n        <EditableSubmit asChild>\n          <Button size=\"sm\">Save</Button>\n        </EditableSubmit>\n        <EditableCancel asChild>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n        </EditableCancel>\n      </EditableToolbar>\n    </Editable>\n  );\n}\n",
      "target": ""
    }
  ]
}