{
  "name": "editable-demo",
  "type": "registry:example",
  "registryDependencies": [
    "editable"
  ],
  "files": [
    {
      "path": "examples/editable-demo.tsx",
      "type": "registry:example",
      "content": "import * as React from \"react\";\nimport { Button } from \"@/registry/bases/base/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/base/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 render={<Button size=\"sm\" className=\"w-fit\" />}>\n        Edit\n      </EditableTrigger>\n      <EditableToolbar>\n        <EditableSubmit render={<Button size=\"sm\" />}>Save</EditableSubmit>\n        <EditableCancel render={<Button variant=\"outline\" size=\"sm\" />}>\n          Cancel\n        </EditableCancel>\n      </EditableToolbar>\n    </Editable>\n  );\n}\n",
      "target": ""
    }
  ]
}