{
  "name": "citation",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "citation.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, themeVars as theme } from \"@yugnex/core\";\r\nimport type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from \"react\";\r\n\r\nconst chipClass = css({\r\n  display: \"inline-flex\",\r\n  alignItems: \"center\",\r\n  justifyContent: \"center\",\r\n  minWidth: \"1.125rem\",\r\n  height: \"1.125rem\",\r\n  padding: `0 ${theme.space[1]}`,\r\n  marginLeft: \"2px\",\r\n  borderRadius: theme.radius.sm,\r\n  backgroundColor: theme.color.accent,\r\n  color: theme.color.accentForeground,\r\n  fontFamily: theme.fontFamily.sans,\r\n  fontSize: \"0.6875rem\",\r\n  fontWeight: theme.fontWeight.semibold,\r\n  lineHeight: 1,\r\n  textDecoration: \"none\",\r\n  verticalAlign: \"super\",\r\n  cursor: \"pointer\",\r\n  transitionProperty: \"background-color, color\",\r\n  transitionDuration: theme.duration.fast,\r\n  \"&:hover\": {\r\n    backgroundColor: theme.color.primary,\r\n    color: theme.color.primaryForeground,\r\n  },\r\n  \"&:focus-visible\": {\r\n    outline: `2px solid ${theme.color.ring}`,\r\n    outlineOffset: \"1px\",\r\n  },\r\n});\r\n\r\nexport interface CitationProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"children\"> {\r\n  /** The marker shown in the chip — typically the source's 1-based index. */\r\n  index: number | string;\r\n  /** Source title, used for the accessible name and native tooltip. */\r\n  source?: string;\r\n  href?: string;\r\n}\r\n\r\n/**\r\n * An inline source marker for grounded/RAG answers. Renders as a superscript\r\n * chip; pair it with <CitationList> to show the full sources beneath a message.\r\n */\r\nexport function Citation({ index, source, href, className, ...props }: CitationProps) {\r\n  const label = source ? `Source ${index}: ${source}` : `Source ${index}`;\r\n  return (\r\n    <a\r\n      className={className ? `${chipClass} ${className}` : chipClass}\r\n      href={href}\r\n      title={source}\r\n      aria-label={label}\r\n      target={href ? \"_blank\" : undefined}\r\n      rel={href ? \"noreferrer noopener\" : undefined}\r\n      {...props}\r\n    >\r\n      {index}\r\n    </a>\r\n  );\r\n}\r\n\r\nconst listClass = css({\r\n  display: \"flex\",\r\n  flexDirection: \"column\",\r\n  gap: theme.space[1.5],\r\n  margin: 0,\r\n  padding: 0,\r\n  listStyle: \"none\",\r\n});\r\n\r\nconst itemClass = css({\r\n  display: \"flex\",\r\n  alignItems: \"flex-start\",\r\n  gap: theme.space[2],\r\n  fontFamily: theme.fontFamily.sans,\r\n  fontSize: theme.fontSize.xs,\r\n  color: theme.color.mutedForeground,\r\n});\r\n\r\nconst itemIndexClass = css({\r\n  flexShrink: 0,\r\n  minWidth: \"1.125rem\",\r\n  height: \"1.125rem\",\r\n  display: \"inline-flex\",\r\n  alignItems: \"center\",\r\n  justifyContent: \"center\",\r\n  borderRadius: theme.radius.sm,\r\n  backgroundColor: theme.color.muted,\r\n  color: theme.color.mutedForeground,\r\n  fontSize: \"0.6875rem\",\r\n  fontWeight: theme.fontWeight.semibold,\r\n});\r\n\r\nconst itemLinkClass = css({\r\n  color: theme.color.foreground,\r\n  textDecoration: \"none\",\r\n  \"&:hover\": { textDecoration: \"underline\" },\r\n});\r\n\r\nexport interface CitationSource {\r\n  title: string;\r\n  href?: string;\r\n  snippet?: ReactNode;\r\n}\r\n\r\nexport interface CitationListProps extends HTMLAttributes<HTMLUListElement> {\r\n  sources: CitationSource[];\r\n}\r\n\r\n/** The resolved source list for an answer — numbering here matches the inline <Citation> markers. */\r\nexport function CitationList({ sources, className, ...props }: CitationListProps) {\r\n  return (\r\n    <ul className={className ? `${listClass} ${className}` : listClass} {...props}>\r\n      {sources.map((source, i) => (\r\n        <li key={`${source.title}-${i}`} className={itemClass}>\r\n          <span className={itemIndexClass} aria-hidden=\"true\">\r\n            {i + 1}\r\n          </span>\r\n          <span>\r\n            {source.href ? (\r\n              <a className={itemLinkClass} href={source.href} target=\"_blank\" rel=\"noreferrer noopener\">\r\n                {source.title}\r\n              </a>\r\n            ) : (\r\n              <span className={itemLinkClass}>{source.title}</span>\r\n            )}\r\n            {source.snippet ? <div>{source.snippet}</div> : null}\r\n          </span>\r\n        </li>\r\n      ))}\r\n    </ul>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}