{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-label-12","type":"registry:block","title":"Label with inline edit toggle","description":"Label with inline edit toggle","dependencies":[],"registryDependencies":["button","field","input","label"],"files":[{"path":"c-label-12.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Field, FieldDescription } from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  const [isEditing, setIsEditing] = useState(false)\n  const [value, setValue] = useState(\"My Awesome Project\")\n\n  return (\n    <Field className=\"w-full max-w-xs\">\n      <Label htmlFor=\"label-inline-edit\" className=\"gap-2\">\n        Project Name\n        <Button\n          size=\"icon-xs\"\n          variant=\"ghost\"\n          onClick={() => setIsEditing(!isEditing)}\n        >\n          {isEditing ? (\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n              remixicon=\"RiCheckLine\"\n              className=\"size-3.5\"\n            />\n          ) : (\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"PenIcon\"\n              phosphor=\"PencilIcon\"\n              remixicon=\"RiPencilLine\"\n              className=\"size-3.5\"\n            />\n          )}\n        </Button>\n      </Label>\n      {isEditing ? (\n        <Input\n          id=\"label-inline-edit\"\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n          autoFocus\n        />\n      ) : (\n        <FieldDescription>{value}</FieldDescription>\n      )}\n    </Field>\n  )\n}","target":"components/examples/c-label-12.tsx"}],"meta":{"order":12}}