{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "citations",
  "title": "Citations",
  "description": "A compact source summary that expands into grounded references with useful context.",
  "dependencies": [
    "@solar-icons/react@^2.2.0",
    "cn@^0.3.0"
  ],
  "registryDependencies": [
    "collapsible",
    "https://pastaui.com/r/pastaui-styles.json"
  ],
  "files": [
    {
      "path": "src/components/ai/citations.tsx",
      "content": "import { GlobalIcon as GlobeIcon } from '@solar-icons/react/linear/global'\nimport { ExportIcon as ExternalLinkIcon } from '@solar-icons/react/linear/export'\nimport * as React from 'react'\n\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'\nimport { cn } from 'cn'\n\ninterface CitationItem {\n  icon?: React.ReactNode\n  description?: string\n  domain?: string\n  id: string\n  title: string\n  url: string\n}\n\ninterface CitationsProps extends React.ComponentProps<typeof Collapsible> {\n  items: CitationItem[]\n}\n\nfunction Citations({ className, defaultOpen = false, items, ...props }: CitationsProps) {\n  return (\n    <Collapsible\n      data-slot=\"citations\"\n      className={cn('text-sm font-[450] tracking-[-0.05px] text-muted-foreground', className)}\n      defaultOpen={defaultOpen}\n      {...props}\n    >\n      <CollapsibleTrigger\n        className=\"inline-flex cursor-pointer items-center gap-2 rounded-md py-1 text-sm font-[450] text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring\"\n        render={<button aria-label=\"Toggle sources\" type=\"button\" />}\n      >\n        <span className=\"flex -space-x-2\" aria-hidden=\"true\">\n          {items.slice(0, 3).map((item) => (\n            <span\n              className=\"relative flex size-5 items-center justify-center overflow-hidden rounded-full bg-background ring-2 ring-background [&_img]:size-full [&_img]:object-contain [&_svg]:size-4\"\n              key={item.id}\n            >\n              {item.icon ?? <GlobeIcon />}\n            </span>\n          ))}\n        </span>\n        <span>\n          {items.length} {items.length === 1 ? 'source' : 'sources'}\n        </span>\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"-mx-1 h-(--collapsible-panel-height) overflow-hidden transition-[height,opacity] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] data-ending-style:h-0 data-ending-style:opacity-0 data-starting-style:h-0 data-starting-style:opacity-0 motion-reduce:transition-opacity\">\n        <div className=\"px-1 pt-3 pb-2\">\n          <ol className=\"space-y-1 rounded-[16px] bg-card p-2 shadow-card\">\n            {items.map((item) => (\n              <li key={item.id}>\n                <a\n                  className=\"group/link flex gap-3 rounded-md p-2 transition-colors hover:bg-muted\"\n                  href={item.url}\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                >\n                  <span\n                    aria-hidden=\"true\"\n                    className=\"flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-5 [&_img]:object-contain [&_svg]:size-5\"\n                  >\n                    {item.icon ?? <GlobeIcon />}\n                  </span>\n                  <span className=\"min-w-0 flex-1\">\n                    <span className=\"flex items-center gap-1 card-heading\">\n                      <span className=\"truncate\">{item.title}</span>\n                      <ExternalLinkIcon className=\"size-3 text-muted-foreground\" />\n                    </span>\n                    {item.description && (\n                      <span className=\"mt-0.5 line-clamp-2 block text-xs leading-5 text-muted-foreground\">\n                        {item.description}\n                      </span>\n                    )}\n                    {item.domain && (\n                      <span className=\"mt-1 block text-[11px] text-muted-foreground\">\n                        {item.domain}\n                      </span>\n                    )}\n                  </span>\n                </a>\n              </li>\n            ))}\n          </ol>\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n\nexport { Citations }\nexport type { CitationItem, CitationsProps }\n",
      "type": "registry:component",
      "target": "@components/ai/citations.tsx"
    }
  ],
  "type": "registry:component"
}