{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "create-studio",
  "title": "Create Studio",
  "author": "Ben Hofstetter <ben.hofstetter@gmail.com>",
  "description": "A create studio layout with format selection and a render-prop for the active form. Built on Format Chooser.",
  "type": "registry:component",
  "categories": [
    "snax"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://benhof.ai/r/format-chooser.json"
  ],
  "files": [
    {
      "path": "src/registry/components/create-studio/create-studio.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ArrowLeft } from \"lucide-react\"\nimport { useState } from \"react\"\nimport { FormatChooser, type FormatOption, FORMAT_OPTIONS } from \"./format-chooser\"\n\nexport function CreateStudio({\n  formats = FORMAT_OPTIONS,\n  onSelect,\n  children,\n  className,\n}: React.ComponentProps<\"div\"> & {\n  formats?: FormatOption[]\n  onSelect?: (key: string) => void\n  children?: (formatKey: string) => React.ReactNode\n}) {\n  const [selected, setSelected] = useState<string | null>(null)\n\n  const handleSelect = (key: string) => {\n    setSelected(key)\n    onSelect?.(key)\n  }\n\n  const handleBack = () => {\n    setSelected(null)\n  }\n\n  return (\n    <div className={cn(\"mx-auto w-full max-w-3xl px-4 py-6\", className)}>\n      {selected ? (\n        <div className=\"space-y-4\">\n          <button\n            onClick={handleBack}\n            className=\"flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground\"\n          >\n            <ArrowLeft className=\"size-4\" /> Formats\n          </button>\n          {children?.(selected)}\n        </div>\n      ) : (\n        <div className=\"space-y-6\">\n          <div>\n            <h1 className=\"text-2xl font-medium tracking-tight\">Create Studio</h1>\n            <p className=\"text-sm text-muted-foreground\">Choose a format to start creating.</p>\n          </div>\n          <FormatChooser\n            formats={formats}\n            selected={selected}\n            onSelect={handleSelect}\n          />\n        </div>\n      )}\n    </div>\n  )\n}",
      "type": "registry:component",
      "target": "@components/create-studio.tsx"
    }
  ]
}