{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "format-chooser",
  "title": "Format Chooser",
  "author": "Ben Hofstetter <ben.hofstetter@gmail.com>",
  "description": "A grid of 16 content format options grouped by Content, Lists, and Interactive. Accepts a selection callback.",
  "type": "registry:component",
  "categories": [
    "snax"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "src/registry/components/format-chooser/format-chooser.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  FileText, Image, Music, Video, Images as ImagesIcon, Code, Link as LinkIcon, Smile,\n  ListPlus, ListOrdered, List, Brain, Sparkles, Vote, Swords, CircleDot,\n} from \"lucide-react\"\nimport type { ComponentType } from \"react\"\n\nexport type FormatOption = {\n  key: string\n  label: string\n  icon: ComponentType<{ className?: string }>\n  group: string\n  description: string\n}\n\nexport const FORMAT_GROUPS = [\"Content\", \"Lists\", \"Interactive\"] as const\n\nexport const FORMAT_OPTIONS: FormatOption[] = [\n  { key: \"story\", label: \"Story\", icon: FileText, group: \"Content\", description: \"Write a narrative post with markdown.\" },\n  { key: \"image\", label: \"Image\", icon: Image, group: \"Content\", description: \"Share a single image with a caption.\" },\n  { key: \"audio\", label: \"Audio\", icon: Music, group: \"Content\", description: \"Embed an audio clip.\" },\n  { key: \"video\", label: \"Video\", icon: Video, group: \"Content\", description: \"Embed a video.\" },\n  { key: \"gallery\", label: \"Gallery\", icon: ImagesIcon, group: \"Content\", description: \"Share a collection of images.\" },\n  { key: \"embed\", label: \"Embed\", icon: Code, group: \"Content\", description: \"Embed external content.\" },\n  { key: \"link\", label: \"Link\", icon: LinkIcon, group: \"Content\", description: \"Bookmark an external link.\" },\n  { key: \"meme\", label: \"Meme\", icon: Smile, group: \"Content\", description: \"Share a meme or humorous image.\" },\n  { key: \"open_list\", label: \"Open List\", icon: ListPlus, group: \"Lists\", description: \"A list the community can add to.\" },\n  { key: \"ranked_list\", label: \"Ranked List\", icon: ListOrdered, group: \"Lists\", description: \"A ranked list with community voting.\" },\n  { key: \"classic_list\", label: \"Classic List\", icon: List, group: \"Lists\", description: \"A static ranked list.\" },\n  { key: \"trivia_quiz\", label: \"Trivia Quiz\", icon: Brain, group: \"Interactive\", description: \"Multiple-choice quiz with correct answers.\" },\n  { key: \"personality_quiz\", label: \"Personality Quiz\", icon: Sparkles, group: \"Interactive\", description: \"Quiz that reveals a personality profile.\" },\n  { key: \"classic_poll\", label: \"Classic Poll\", icon: Vote, group: \"Interactive\", description: \"Multi-option poll.\" },\n  { key: \"versus_poll\", label: \"Versus Poll\", icon: Swords, group: \"Interactive\", description: \"Head-to-head comparison poll.\" },\n  { key: \"binary_poll\", label: \"Binary Poll\", icon: CircleDot, group: \"Interactive\", description: \"Yes/No or A/B poll.\" },\n]\n\nexport function FormatChooser({\n  formats = FORMAT_OPTIONS,\n  selected = null,\n  onSelect,\n  className,\n}: React.ComponentProps<\"div\"> & {\n  formats?: FormatOption[]\n  selected?: string | null\n  onSelect?: (key: string) => void\n}) {\n  return (\n    <div className={cn(\"space-y-6\", className)}>\n      {FORMAT_GROUPS.map((group) => (\n        <div key={group}>\n          <h3 className=\"mb-2 font-mono text-xs font-medium tracking-wider text-muted-foreground uppercase\">\n            {group}\n          </h3>\n          <div className=\"grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4\">\n            {formats.filter((f) => f.group === group).map((format) => {\n              const Icon = format.icon\n              const isSelected = selected === format.key\n              return (\n                <button\n                  key={format.key}\n                  onClick={() => onSelect?.(format.key)}\n                  className={cn(\n                    \"flex flex-col items-start gap-2 rounded-lg border p-3 text-left transition-all\",\n                    isSelected ? \"border-foreground bg-accent\" : \"border-border hover:border-foreground hover:bg-accent/50\",\n                  )}\n                >\n                  <Icon className=\"size-4 text-muted-foreground\" />\n                  <div>\n                    <p className=\"text-sm font-medium\">{format.label}</p>\n                    <p className=\"mt-0.5 text-xs text-muted-foreground\">{format.description}</p>\n                  </div>\n                </button>\n              )\n            })}\n          </div>\n        </div>\n      ))}\n    </div>\n  )\n}",
      "type": "registry:component",
      "target": "@components/format-chooser.tsx"
    }
  ]
}