{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "key-concept",
  "type": "registry:component",
  "title": "Key Concept",
  "description": "Highlighted definition block for key terms and a glossary list.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/key-concept/key-concept.tsx",
      "content": "import type { ReactNode } from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\nexport type KeyConceptProps = {\n  children: ReactNode;\n  className?: string;\n  highlight?: boolean;\n  icon?: ReactNode;\n  term: string;\n};\n\nexport function KeyConcept({\n  children,\n  className,\n  highlight = false,\n  icon,\n  term,\n}: KeyConceptProps): React.ReactNode {\n  return (\n    <div\n      className={cn(\n        \"my-4 rounded-lg border p-4\",\n        highlight\n          ? \"border-primary/50 bg-primary/5\"\n          : \"border-border bg-muted/30\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start gap-3\">\n        {icon ? (\n          <span className=\"size-5 text-primary flex-shrink-0 mt-0.5\">\n            {icon}\n          </span>\n        ) : (\n          <svg\n            className=\"size-5 text-primary flex-shrink-0 mt-0.5\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n            />\n          </svg>\n        )}\n        <div className=\"flex-1 min-w-0\">\n          <dt className=\"font-bold text-foreground mb-1\">{term}</dt>\n          <dd className=\"text-sm text-muted-foreground [&>p]:mb-0\">\n            {children}\n          </dd>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport type GlossaryProps = {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  title?: string;\n};\n\nexport function Glossary({\n  children,\n  className,\n  icon,\n  title = \"Key Terms\",\n}: GlossaryProps): React.ReactNode {\n  return (\n    <div className={cn(\"my-6\", className)}>\n      <h4 className=\"font-semibold mb-3 flex items-center gap-2\">\n        {icon ? (\n          <span className=\"size-4\">{icon}</span>\n        ) : (\n          <svg\n            className=\"size-4\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n            />\n          </svg>\n        )}\n        {title}\n      </h4>\n      <dl className=\"space-y-2\">{children}</dl>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}