{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "small-multiples",
  "type": "registry:component",
  "title": "Small multiples",
  "description": "Compares repeated charts on shared axes. Each panel occupies one 184px column.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/chart.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/styles/chart.css",
      "content": "/* ── chart: generated from packages/react/src/components/charts/frame.tsx ── */\n.rs-chart{position:relative;width:100%;border-radius:0;box-shadow:none}\n.rs-chart-field{isolation:isolate;background-color:var(--bg);border-width:1px;border-style:solid;border-color:var(--divider);border-radius:0;box-shadow:none;padding:1rem}\n.rs-chart-canvas{position:relative;width:100%;min-width:0}\n.rs-chart-svg,.rs-chart-plot.rs-chart-donut{display:block;width:100%;height:auto;overflow:visible}\n.rs-chart-svg:focus-visible,.rs-chart-plot.rs-chart-donut:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--text);outline-offset:2px}\n.rs-chart-plot,.rs-chart-plot.rs-chart-donut{transform-origin:center}\n.rs-chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:0.75rem;margin-bottom:0.625rem}\n.rs-chart-title{font-size:0.8125rem;font-weight:600;letter-spacing:-0.01em;color:var(--text)}\n.rs-chart-grid{stroke:var(--divider);stroke-width:1}\n.rs-chart-baseline{stroke:var(--divider);stroke-width:1}\n.rs-chart-axis{fill:var(--text-secondary);font-size:0.6875rem;font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums}\n.rs-chart-line{fill:none;stroke:var(--text);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}\n.rs-chart-line-dashed{stroke-dasharray:4 4}\n.rs-chart-line-muted{stroke:var(--text-secondary)}\n.rs-chart-line-dotted{stroke:var(--text-secondary);stroke-dasharray:0.1 5;stroke-width:1.5;stroke-linecap:butt}\n.rs-chart-line-spot{stroke:var(--rs-chart-spot)}\n.rs-chart-area{fill:var(--text);opacity:0.08;stroke:none}\n.rs-chart-area-spot{fill:var(--rs-chart-spot);opacity:0.16;stroke:none}\n.rs-chart-bar{fill:var(--text);border-radius:0;transition:fill var(--duration-snap) var(--ease), opacity var(--duration-snap) var(--ease)}\n@media (prefers-reduced-motion: reduce){.rs-chart-bar{transition:none}}\n.rs-chart-bar-muted{fill:var(--divider)}\n.rs-chart-bar-spot{fill:var(--rs-chart-spot)}\n.rs-chart-cursor{stroke:var(--divider);stroke-width:1}\n.rs-chart-dot{fill:var(--bg);stroke:var(--text);stroke-width:1}\n.rs-chart-mark{fill:var(--text);border-radius:0;transition:fill var(--duration-snap) var(--ease), opacity var(--duration-snap) var(--ease)}\n@media (prefers-reduced-motion: reduce){.rs-chart-mark{transition:none}}\n.rs-chart-mark-spot{fill:var(--rs-chart-spot)}\n.rs-chart-ann{fill:var(--text-secondary);font-size:0.6875rem;font-weight:500;letter-spacing:-0.01em}\n.rs-chart-tip{position:absolute;pointer-events:none;background-color:var(--bg);border-width:1px;border-style:solid;border-color:var(--divider);border-radius:0;box-shadow:none;padding-block:0.375rem;padding-inline:0.5rem;font-size:0.75rem;letter-spacing:-0.01em;color:var(--text);white-space:nowrap;z-index:var(--z-float);transform:translate(-50%, calc(-100% - 8px))}\n.rs-chart-tip-label{display:block;font-size:0.6875rem;color:var(--text-secondary);margin-bottom:2px}\n.rs-chart-tip-row{display:flex;align-items:center;justify-content:space-between;gap:0.625rem}\n.rs-chart-tip-name{color:var(--text-secondary)}\n.rs-chart-tip-val{font-weight:600;font-variant-numeric:tabular-nums}\n.rs-chart-legend{display:flex;flex-wrap:wrap;gap:0.875rem;margin-top:0.625rem}\n.rs-chart-legend-item{display:flex;align-items:center;gap:0.4375rem;font-size:0.75rem;font-weight:500;letter-spacing:-0.01em;color:var(--text-secondary)}\n.rs-chart-legend-svg{display:block}\n.rs-chart-plot.rs-chart-donut{display:block}\n.rs-chart-donut-track{fill:none;stroke:var(--divider);stroke-width:1}\n.rs-chart-donut-value{fill:none;stroke:var(--rs-chart-spot);stroke-width:1;stroke-linecap:butt}\n.rs-chart-donut-label{fill:var(--text);font-size:1.25rem;font-weight:500;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}\n.rs-chart-donut-caption{fill:var(--text-secondary);font-size:0.6875rem;font-weight:500;letter-spacing:0.06em}\n.rs-chart-share{display:flex;height:0.5rem;width:100%;border-width:1px;border-style:solid;border-color:var(--divider);border-radius:0;box-shadow:none}\n.rs-chart-share-seg{height:100%;border-radius:0;background-color:var(--text);transition:fill var(--duration-snap) var(--ease), opacity var(--duration-snap) var(--ease)}\n.rs-chart-share-seg:nth-child(2){background-color:var(--text-secondary)}\n.rs-chart-share-seg:nth-child(3){background-color:var(--divider)}\n.rs-chart-share-seg-spot{background-color:var(--rs-chart-spot)}\n.rs-chart-hist{fill:var(--divider);stroke:none;border-radius:0}\n.rs-chart-multi{display:grid;grid-template-columns:repeat(auto-fill, minmax(184px, 1fr));gap:1.25rem}\n.rs-chart-multi-item{margin:0;min-width:0}\n.rs-chart-multi-cap{margin-top:0;margin-inline-end:0;margin-bottom:0.5rem;margin-inline-start:0;font-size:0.75rem;font-weight:600;letter-spacing:-0.01em;color:var(--text)}\n.rs-spark{display:inline-block;vertical-align:middle}\n.rs-chart-svg{display:block;overflow:visible}\n",
      "type": "registry:file",
      "target": "styles/vlak/chart.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "charts",
      "classes": [
        "rs-chart-multi",
        "rs-chart-multi-item",
        "rs-chart-multi-cap"
      ],
      "snippet": "<div class=\"rs-chart-multi\"><div class=\"rs-chart\"><svg viewBox=\"0 0 184 64\" width=\"184\" height=\"64\"><path class=\"rs-chart-line\" d=\"M0 40 L46 28 L92 34 L138 16 L184 22\"/></svg></div><div class=\"rs-chart\"><svg viewBox=\"0 0 184 64\" width=\"184\" height=\"64\"><path class=\"rs-chart-line\" d=\"M0 30 L46 36 L92 22 L138 28 L184 18\"/></svg></div></div>",
      "cssOnly": false,
      "registryDependencies": [
        "chart",
        "vlak-lib"
      ],
      "aliases": [
        "Small multiples",
        "Trellis chart",
        "Facet grid",
        "Panel charts"
      ],
      "example": "import { SmallMultiples } from \"@noorddev/vlak-react\";\n\n<SmallMultiples\n  height={136}\n  panels={[\n    { title: \"Alkmaar\", labels: days, series: [{ name: \"Sheets\", values: alkmaar }] },\n    { title: \"Delft\", labels: days, series: [{ name: \"Sheets\", values: delft }] },\n  ]}\n  unit=\"sheets\"\n/>",
      "usage": {
        "use": [
          "The same measure across places, products, or periods, one small line chart per panel on a shared value domain by default.",
          "Set sharedDomain=false only for independent trends; it removes direct magnitude comparison."
        ],
        "avoid": [
          "Panels with different units; they no longer compare.",
          "One series; use LineChart."
        ]
      },
      "keyboard": [
        {
          "keys": "Tab",
          "does": "Focuses each panel's plot in turn"
        },
        {
          "keys": "Arrow right, Arrow left, Home, End, Escape",
          "does": "Move and clear the cursor inside the focused panel"
        }
      ],
      "a11y": [
        "Each panel is a <figure> with a caption; its plot is labelled by that caption and carries its own hidden table."
      ]
    }
  }
}