{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flashcard",
  "type": "registry:component",
  "title": "Flashcard",
  "description": "Study card for active recall with prompt and answer states.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/flashcard/flashcard.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { RefreshCcw } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Badge } from \"@vllnt/ui\";\nimport { Button } from \"@vllnt/ui\";\nimport { Card, CardContent, CardFooter, CardHeader, CardTitle } from \"@vllnt/ui\";\n\nexport type FlashcardProps = {\n  answer: ReactNode;\n  category?: string;\n  className?: string;\n  defaultFlipped?: boolean;\n  hint?: string;\n  onFlipChange?: (flipped: boolean) => void;\n  question: ReactNode;\n  title?: string;\n};\n\nexport function Flashcard({\n  answer,\n  category,\n  className,\n  defaultFlipped = false,\n  hint,\n  onFlipChange,\n  question,\n  title = \"Flashcard\",\n}: FlashcardProps): ReactNode {\n  const [flipped, setFlipped] = useState(defaultFlipped);\n\n  const toggleFlipped = (): void => {\n    const nextValue = !flipped;\n    setFlipped(nextValue);\n    onFlipChange?.(nextValue);\n  };\n\n  return (\n    <Card\n      className={cn(\n        \"my-6 overflow-hidden border-primary/20 bg-gradient-to-br from-card to-primary/5\",\n        className,\n      )}\n    >\n      <CardHeader className=\"flex flex-row items-center justify-between gap-3 border-b bg-background/80\">\n        <div className=\"space-y-1\">\n          <div className=\"flex items-center gap-2\">\n            <Badge variant=\"secondary\">Study</Badge>\n            {category ? <Badge variant=\"outline\">{category}</Badge> : null}\n          </div>\n          <CardTitle>{title}</CardTitle>\n        </div>\n        <Button onClick={toggleFlipped} size=\"sm\" variant=\"outline\">\n          <RefreshCcw className=\"mr-2 size-4\" />\n          Flip\n        </Button>\n      </CardHeader>\n      <CardContent className=\"space-y-4 p-6\">\n        <div className=\"min-h-40 rounded-xl border bg-background p-6 shadow-sm\">\n          <p className=\"mb-2 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground\">\n            {flipped ? \"Answer\" : \"Prompt\"}\n          </p>\n          <div className=\"text-base text-foreground [&>p]:mb-3\">\n            {flipped ? answer : question}\n          </div>\n        </div>\n        {hint ? (\n          <p className=\"text-sm text-muted-foreground\">Hint: {hint}</p>\n        ) : null}\n      </CardContent>\n      <CardFooter className=\"justify-between border-t bg-background/80 px-6 py-4\">\n        <span className=\"text-sm text-muted-foreground\">\n          {flipped\n            ? \"Use this side to check your recall.\"\n            : \"Try answering before flipping the card.\"}\n        </span>\n        <Button onClick={toggleFlipped} variant=\"ghost\">\n          {flipped ? \"Show prompt\" : \"Reveal answer\"}\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}