{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bar-chart",
  "type": "registry:component",
  "title": "Bar chart",
  "description": "Compares values with vertical or horizontal bars. Thin ink marks, square ends, optional stacks.",
  "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-bar"
      ],
      "snippet": "<div class=\"rs-chart\"><svg viewBox=\"0 0 240 64\" width=\"240\" height=\"64\"><line class=\"rs-chart-grid\" x1=\"0\" x2=\"240\" y1=\"56\" y2=\"56\"/><rect class=\"rs-chart-bar\" x=\"20\" y=\"18\" width=\"8\" height=\"38\"/><rect class=\"rs-chart-bar\" x=\"48\" y=\"10\" width=\"8\" height=\"46\"/><rect class=\"rs-chart-bar\" x=\"76\" y=\"24\" width=\"8\" height=\"32\"/></svg></div>",
      "cssOnly": false,
      "registryDependencies": [
        "chart",
        "vlak-lib"
      ],
      "aliases": [
        "Bar chart",
        "Column chart",
        "Stacked bar chart",
        "Horizontal bar chart"
      ],
      "example": "import { BarChart } from \"@noorddev/vlak-react\";\n\n<BarChart\n  height={204}\n  orientation=\"horizontal\"\n  data={[\n    { label: \"Alkmaar\", value: 42 },\n    { label: \"Delft\", value: 28 },\n  ]}\n  unit=\"issues\"\n/>\n\n<BarChart\n  labels={[\"Q1\", \"Q2\", \"Q3\"]}\n  series={[\n    { name: \"Sheets\", values: [12, 18, 9] },\n    { name: \"Proofs\", values: [4, 6, 3] },\n  ]}\n  stacked\n/>",
      "usage": {
        "use": [
          "Comparing categories; data for one series, series plus labels for up to four grouped series.",
          "stacked separates positive and negative totals; orientation=\"horizontal\" and inverted work with either grouping mode."
        ],
        "avoid": [
          "Continuous time; use LineChart.",
          "Parts of one whole; use Donut or Share."
        ]
      },
      "keyboard": [
        {
          "keys": "Tab",
          "does": "Focuses the plot"
        },
        {
          "keys": "Arrow right, Arrow left",
          "does": "Moves the cursor across the bars; a status tooltip reads the values"
        },
        {
          "keys": "Home, End",
          "does": "First or last bar"
        },
        {
          "keys": "Escape",
          "does": "Clears the cursor"
        }
      ],
      "a11y": [
        "The plot is a focusable <svg role=\"group\"> with aria-roledescription=\"interactive chart\", named by aria-label, aria-labelledby, yLabel, or the series names.",
        "A visually hidden table carries every value; the legend is aria-hidden because the table names the series.",
        "Every series renders. Null and non-finite bars are omitted and read as No data; signed bars retain nonzero geometry when inverted."
      ]
    }
  }
}