{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "references",
  "type": "registry:component",
  "title": "References",
  "description": "Connects inline citations to a numbered source list and cite box. Numerals hang in the gutter.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/vlak-lib.json"
  ],
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "devDependencies": [
    "@stylexjs/babel-plugin"
  ],
  "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.",
  "files": [
    {
      "path": "vlak/references.tsx",
      "content": "import * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { vlak, mq } from \"./tokens.stylex\";\nimport { rs } from \"./rs\";\n\nexport interface CiteProps extends React.HTMLAttributes<HTMLElement> {}\nexport interface RefsProps extends React.OlHTMLAttributes<HTMLOListElement> {}\nexport interface RefItemProps extends React.LiHTMLAttributes<HTMLLIElement> {}\nexport interface CiteBoxProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n\nconst styles = stylex.create({\n  cite: {\n    fontSize: \"0.65625rem\",\n    fontWeight: 600,\n    letterSpacing: 0,\n    lineHeight: 0,\n    verticalAlign: \"super\",\n    whiteSpace: \"nowrap\",\n  },\n  citeA: {\n    color: {\n      default: vlak.gray,\n      \":hover\": { default: null, [mq.hover]: vlak.accent },\n    },\n    textDecoration: \"none\",\n    transition: {\n      default: vlak.transition,\n      [mq.reduce]: \"none\",\n    },\n  },\n  refs: {\n    listStyle: \"none\",\n    counterReset: \"ref\",\n    marginTop: \"0.25rem\",\n    marginBottom: \"0.5rem\",\n    marginInlineStart: 0,\n    marginInlineEnd: 0,\n    padding: 0,\n  },\n  item: {\n    counterIncrement: \"ref\",\n    position: \"relative\",\n    paddingTop: \"0.625rem\",\n    paddingBottom: \"0.625rem\",\n    fontSize: \"0.8125rem\",\n    fontWeight: 500,\n    lineHeight: 1.45,\n    color: vlak.gray,\n    letterSpacing: \"-0.01em\",\n    borderBottomWidth: vlak.hairline,\n    borderBottomStyle: \"solid\",\n    borderBottomColor: {\n      default: vlak.divider,\n      \":last-child\": \"transparent\",\n    },\n    scrollMarginTop: 88,\n    \":target\": {\n      backgroundColor: \"var(--table-alt)\",\n    },\n    \"::before\": {\n      content: \"counter(ref)\",\n      position: \"absolute\",\n      insetInlineStart: \"-1rem\",\n      top: \"0.6875rem\",\n      width: \"0.75rem\",\n      textAlign: \"end\",\n      fontSize: \"0.6875rem\",\n      fontWeight: 600,\n      color: \"var(--accent)\",\n    },\n  },\n  authors: {\n    color: \"var(--text)\",\n    fontWeight: 500,\n  },\n  doi: {\n    fontFamily: \"ui-monospace, SFMono-Regular, Menlo, monospace\",\n    fontSize: \"0.6875rem\",\n    color: {\n      default: vlak.gray,\n      \":hover\": { default: null, [mq.hover]: \"var(--text)\" },\n    },\n    textDecoration: \"none\",\n    borderBottomWidth: vlak.hairline,\n    borderBottomStyle: \"solid\",\n    borderBottomColor: {\n      default: vlak.divider,\n      \":hover\": { default: null, [mq.hover]: vlak.accent },\n    },\n    transition: {\n      default: vlak.transition,\n      [mq.reduce]: \"none\",\n    },\n    wordBreak: \"break-all\",\n  },\n  box: {\n    borderWidth: vlak.hairline,\n    borderStyle: \"solid\",\n    borderColor: vlak.divider,\n    borderRadius: vlak.radius,\n    padding: {\n      default: \"1.25rem\",\n      [mq.phone]: \"14px 16px\",\n    },\n    marginTop: \"0.5rem\",\n  },\n  boxLabel: {\n    fontSize: \"0.75rem\",\n    fontWeight: 600,\n    color: vlak.gray,\n    letterSpacing: \"-0.01em\",\n    marginBottom: \"0.5rem\",\n  },\n  boxText: {\n    fontSize: \"0.8125rem\",\n    fontWeight: 500,\n    color: vlak.gray,\n    lineHeight: 1.45,\n    userSelect: \"all\",\n  },\n});\n\n/** Inline superscript citation. */\nexport const Cite = React.forwardRef<HTMLElement, CiteProps>(function Cite(\n  { className, style, children, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-cite\", className], styles.cite);\n  return (\n    <sup ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }}>\n      {children}\n    </sup>\n  );\n});\n\nexport const CiteLink = React.forwardRef<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement>>(function CiteLink(\n  { className, style, ...props },\n  ref,\n) {\n  const sx = rs([className, \"rs-cite-cite-a\"], styles.citeA);\n  return <a ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }} />;\n});\n\n/** Numbered 1px list. Numerals hang in the gutter. */\nexport const Refs = React.forwardRef<HTMLOListElement, RefsProps>(function Refs(\n  { className, style, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-refs\", className], styles.refs);\n  return <ol ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }} />;\n});\n\nexport const RefItem = React.forwardRef<HTMLLIElement, RefItemProps>(function RefItem(\n  { className, style, ...props },\n  ref,\n) {\n  const sx = rs([className, \"rs-cite-item\"], styles.item);\n  return <li ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }} />;\n});\n\nexport const RefAuthors = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(function RefAuthors(\n  { className, style, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-ref-authors\", className], styles.authors);\n  return <span ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }} />;\n});\n\nexport const RefDoi = React.forwardRef<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement>>(function RefDoi(\n  { className, style, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-ref-doi\", className], styles.doi);\n  return <a ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }} />;\n});\n\nexport const CiteBox = React.forwardRef<HTMLDivElement, CiteBoxProps>(function CiteBox(\n  { className, style, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-cite-box\", className], styles.box);\n  return <div ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }} />;\n});\n\nexport const CiteBoxLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(function CiteBoxLabel(\n  { className, style, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-cite-box-label\", className], styles.boxLabel);\n  return <div ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }} />;\n});\n\nexport const CiteBoxText = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(function CiteBoxText(\n  { className, style, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-cite-box-text\", className], styles.boxText);\n  return <div ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }} />;\n});\n",
      "type": "registry:component",
      "target": "components/vlak/references.tsx"
    },
    {
      "path": "vlak/styles/references.css",
      "content": "/* ── references: generated from packages/react/src/components/refs.tsx ── */\n.rs-cite{font-size:0.65625rem;font-weight:600;letter-spacing:0;line-height:0;vertical-align:super;white-space:nowrap}\n.rs-cite-cite-a{color:var(--text-secondary);text-decoration:none;transition:var(--transition)}\n@media (hover: hover) and (pointer: fine){.rs-cite-cite-a:hover{color:var(--accent)}}\n@media (prefers-reduced-motion: reduce){.rs-cite-cite-a{transition:none}}\n.rs-refs{list-style:none;counter-reset:ref;margin-top:0.25rem;margin-bottom:0.5rem;margin-inline-start:0;margin-inline-end:0;padding:0}\n.rs-cite-item{counter-increment:ref;position:relative;padding-top:0.625rem;padding-bottom:0.625rem;font-size:0.8125rem;font-weight:500;line-height:1.45;color:var(--text-secondary);letter-spacing:-0.01em;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--divider);scroll-margin-top:88px}\n.rs-cite-item:last-child{border-bottom-color:transparent}\n.rs-cite-item:target{background-color:var(--table-alt)}\n.rs-cite-item::before{content:counter(ref);position:absolute;inset-inline-start:-1rem;top:0.6875rem;width:0.75rem;text-align:end;font-size:0.6875rem;font-weight:600;color:var(--accent)}\n.rs-ref-authors{color:var(--text);font-weight:500}\n.rs-ref-doi{font-family:ui-monospace, SFMono-Regular, Menlo, monospace;font-size:0.6875rem;color:var(--text-secondary);text-decoration:none;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--divider);transition:var(--transition);word-break:break-all}\n@media (hover: hover) and (pointer: fine){.rs-ref-doi:hover{color:var(--text);border-bottom-color:var(--accent)}}\n@media (prefers-reduced-motion: reduce){.rs-ref-doi{transition:none}}\n.rs-cite-box{border-width:1px;border-style:solid;border-color:var(--divider);border-radius:var(--radius);padding:1.25rem;margin-top:0.5rem}\n@media (max-width: 640px){.rs-cite-box{padding:14px 16px}}\n.rs-cite-box-label{font-size:0.75rem;font-weight:600;color:var(--text-secondary);letter-spacing:-0.01em;margin-bottom:0.5rem}\n.rs-cite-box-text{font-size:0.8125rem;font-weight:500;color:var(--text-secondary);line-height:1.45;user-select:all}\n",
      "type": "registry:file",
      "target": "styles/vlak/references.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "content",
      "classes": [
        "rs-cite",
        "rs-refs",
        "rs-ref-authors",
        "rs-ref-doi",
        "rs-cite-box",
        "rs-cite-box-label",
        "rs-cite-box-text",
        "rs-cite-cite-a",
        "rs-cite-item"
      ],
      "snippet": "<p>Set in a single ink.<sup class=\"rs-cite\"><a href=\"#ref-1\">1</a></sup></p><ol class=\"rs-refs\"><li id=\"ref-1\"><span class=\"rs-ref-authors\">Müller-Brockmann, J.</span> Grid systems in graphic design. <a class=\"rs-ref-doi\" href=\"#\">niggli.ch/grid</a></li></ol>",
      "cssOnly": false,
      "registryDependencies": [
        "vlak-lib"
      ],
      "aliases": [
        "References",
        "Citations",
        "Footnotes",
        "Bibliography"
      ],
      "example": "import { Cite, CiteBox, CiteBoxLabel, CiteBoxText, CiteLink, RefAuthors, RefDoi, RefItem, Refs } from \"@noorddev/vlak-react\";\n\n<p>Set in a single ink.<Cite><CiteLink href=\"#ref-1\">1</CiteLink></Cite></p>\n\n<Refs>\n  <RefItem id=\"ref-1\">\n    <RefAuthors>Müller-Brockmann, J.</RefAuthors> Grid systems in graphic design. <RefDoi href=\"https://niggli.ch/grid\">niggli.ch/grid</RefDoi>\n  </RefItem>\n</Refs>\n\n<CiteBox>\n  <CiteBoxLabel>Cite this</CiteBoxLabel>\n  <CiteBoxText>Valdés-Olmos, R. (2026). Vlak. Noord.</CiteBoxText>\n</CiteBox>",
      "usage": {
        "use": [
          "Articles and papers with numbered citations and a reference list.",
          "CiteBox for the how-to-cite block at the end."
        ],
        "avoid": [
          "Footnotes with long asides; keep notes short.",
          "Link lists; use plain Links."
        ]
      },
      "keyboard": [
        {
          "keys": "Tab",
          "does": "Moves between citation links"
        },
        {
          "keys": "Enter",
          "does": "Jumps to the reference"
        }
      ],
      "a11y": [
        "Cite is a <sup> holding a native <a>; give each RefItem the id the link targets. Refs is an <ol>, so the numbering is real."
      ]
    }
  }
}