{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sources",
  "title": "Sources",
  "description": "What an answer is based on, with numbered markers in the text.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "sources/Sources.css",
      "content": ".cr-citation {\n  display: inline-grid;\n  place-items: center;\n  box-sizing: border-box;\n  min-width: 18px;\n  height: 18px;\n  margin: 0 1px;\n  padding: 0 4px;\n  border: 0;\n  border-radius: var(--cr-radius-full);\n  background: var(--cr-color-bg-subtle);\n  color: var(--cr-color-text-secondary);\n  font-family: var(--cr-font-family-sans);\n  font-size: 11px;\n  font-weight: var(--cr-font-weight-bold);\n  line-height: 1;\n  text-decoration: none;\n  vertical-align: 2px;\n  cursor: pointer;\n}\n\n.cr-citation:hover {\n  background: var(--cr-color-ink-bg);\n  color: var(--cr-color-ink-fg);\n}\n\n.cr-citation:focus-visible,\n.cr-sources__item:focus-visible {\n  outline: var(--cr-focus-width) solid var(--cr-color-focus);\n  outline-offset: var(--cr-focus-offset);\n}\n\n.cr-sources {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n  gap: var(--cr-space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--cr-font-family-sans);\n}\n\n.cr-sources__item {\n  display: flex;\n  align-items: center;\n  gap: var(--cr-space-3);\n  box-sizing: border-box;\n  height: 100%;\n  padding: var(--cr-space-2) var(--cr-space-3) var(--cr-space-2) var(--cr-space-2);\n  border-radius: 14px;\n  color: var(--cr-color-text-default);\n  font-size: var(--cr-font-size-sm);\n  text-decoration: none;\n}\n\n.cr-sources__item[href]:hover .cr-sources__title {\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n\n.cr-sources__number {\n  display: grid;\n  place-items: center;\n  flex: none;\n  width: 22px;\n  height: 22px;\n  border-radius: var(--cr-radius-full);\n  background: var(--cr-color-bg-subtle);\n  font-size: 11px;\n  font-weight: var(--cr-font-weight-bold);\n}\n\n.cr-sources__text {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.cr-sources__title {\n  font-weight: var(--cr-font-weight-semibold);\n}\n\n.cr-sources__detail {\n  color: var(--cr-color-text-muted);\n  font-size: var(--cr-font-size-xs);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/sources/Sources.css"
    },
    {
      "path": "sources/Sources.tsx",
      "content": "'use client';\n\nimport type { MouseEventHandler, ReactNode } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport './Sources.css';\n\nexport interface CitationProps {\n  /** The number shown, matching the source's place in the list. */\n  index: number;\n  /** With an `href` it is a link; without, a button. */\n  href?: string;\n  onClick?: MouseEventHandler<HTMLElement>;\n  /** Accessible name. Default \"Source {index}\". Add the title when you have it: \"Source 1, Build 482 log\". */\n  label?: string;\n  className?: string;\n}\n\n/** A numbered marker in the text that leads to a source. */\nexport function Citation({ index, href, onClick, label = `Source ${index}`, className }: CitationProps) {\n  const props = { className: cx('cr-citation', className), 'aria-label': label, onClick };\n  return href ? (\n    <a href={href} {...props}>\n      {index}\n    </a>\n  ) : (\n    <button type=\"button\" {...props}>\n      {index}\n    </button>\n  );\n}\n\nexport interface Source {\n  title: ReactNode;\n  /** Where it came from: a path, a site, a date. */\n  detail?: ReactNode;\n  href?: string;\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n}\n\nexport interface SourcesProps {\n  /** In the order they are cited. Each is numbered from 1. */\n  items: Source[];\n  /** Accessible name of the list. Default \"Sources\". */\n  label?: string;\n  className?: string;\n}\n\n/** What an answer is based on: a numbered list with a title and where each one came from. */\nexport function Sources({ items, label = 'Sources', className }: SourcesProps) {\n  return (\n    <ol className={cx('cr-sources', className)} aria-label={label}>\n      {items.map((source, i) => (\n        <li key={i}>\n          <a className=\"cr-sources__item cr-surface\" href={source.href} onClick={source.onClick}>\n            <span className=\"cr-sources__number\" aria-hidden=\"true\">\n              {i + 1}\n            </span>\n            <span className=\"cr-sources__text\">\n              <span className=\"cr-sources__title\">{source.title}</span>\n              {source.detail && <span className=\"cr-sources__detail\">{source.detail}</span>}\n            </span>\n          </a>\n        </li>\n      ))}\n    </ol>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/sources/Sources.tsx"
    }
  ],
  "categories": [
    "molecule",
    "chat"
  ],
  "type": "registry:ui"
}