{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "donut",
  "type": "registry:component",
  "title": "Donut or share",
  "description": "Shows one part of a whole as a ring or flush share strip. 1px stroke.",
  "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-donut"
      ],
      "snippet": "<div class=\"rs-chart\"><svg class=\"rs-chart-donut\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\"><circle cx=\"48\" cy=\"48\" r=\"36\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\"/></svg></div>",
      "cssOnly": false,
      "registryDependencies": [
        "chart",
        "vlak-lib"
      ],
      "aliases": [
        "Donut",
        "Donut chart",
        "Ring chart",
        "Pie chart",
        "Share strip"
      ],
      "example": "import { Donut, Share } from \"@noorddev/vlak-react\";\n\n<Donut value={72} max={100} size={184} label=\"printed\" />\n<Share slices={[{ label: \"Sheet\", value: 72 }, { label: \"Proof\", value: 18 }, { label: \"Waste\", value: 10 }]} unit=\"%\" />",
      "usage": {
        "use": [
          "One value against its total as a ring, or a flush strip of shares.",
          "label under the number in the ring."
        ],
        "avoid": [
          "Comparing several values; use BarChart.",
          "More than five slices; the strip stops reading."
        ]
      },
      "a11y": [
        "Donut renders role=\"img\" named by the caption or label and the value text; a visually hidden table carries value and max.",
        "Share renders a named group of slices with a hidden table of label and value per slice.",
        "Invalid totals do not produce a percentage. Share excludes negative and non-finite slices and explains an empty total."
      ]
    }
  }
}