{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "area-chart",
  "title": "Area chart",
  "description": "Volume as a barcode: no fill, only hairlines dropped from the line to the baseline at a close, even rhythm.",
  "registryDependencies": [
    "https://thedirectors.agency/ui/r/0nlytype.json",
    "https://thedirectors.agency/ui/r/line-chart.json"
  ],
  "files": [
    {
      "path": "registry/0nlytype/ui/area-chart.tsx",
      "content": "\"use client\"\n\nimport { ChartLines, type LineChartProps } from \"@/components/ui/line-chart\"\n\ntype AreaChartProps = LineChartProps\n\n/**\n * Volume as a barcode: no fill, only hairlines dropped from the line to the baseline at a close,\n * even rhythm. Several series stack, each band its own rhythm, and the readout sums them.\n */\nfunction AreaChart(props: AreaChartProps) {\n  return <ChartLines {...props} area />\n}\n\nexport { AreaChart, type AreaChartProps }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/0nlytype/styles/area-chart.css",
      "content": "@layer components {\n  /* ── ot-area-chart ── volume as a barcode: no fill, only hairlines dropped from the line to the\n     baseline at a close even rhythm, SPECTRA's barcode laid under a line. Stacked series each keep\n     their own rhythm, three, six and twelve pixels apart, so the bands read by density, not colour. */\n  .ot-area-chart-drops { stroke: none; }\n  .ot-area-chart .ot-line-chart-draw pattern > rect { fill: var(--ot-rule-strong); }\n  .ot-area-chart .ot-line-chart-draw > [data-series=\"0\"] pattern > rect { fill: var(--ot-pencil); }\n  .ot-area-chart.ot-chart .ot-line-chart-draw > [data-series] > .ot-line-chart-line { stroke: var(--ot-ink); stroke-dasharray: none; }\n  .ot-area-chart.ot-chart .ot-chart-swatch { --c: var(--ot-pencil); block-size: 0.8em; background: repeating-linear-gradient(to right, var(--c) 0 1px, transparent 1px 3px); }\n  .ot-area-chart.ot-chart .ot-chart-row[data-series=\"1\"] .ot-chart-swatch { background: repeating-linear-gradient(to right, var(--c) 0 1px, transparent 1px 6px); }\n  .ot-area-chart.ot-chart .ot-chart-row[data-series=\"2\"] .ot-chart-swatch { background: repeating-linear-gradient(to right, var(--c) 0 1px, transparent 1px 12px); }\n\n  @media (forced-colors: active) {\n    .ot-area-chart .ot-line-chart-draw pattern > rect { fill: GrayText; }\n  }\n}\n",
      "type": "registry:file",
      "target": "styles/0nlytype/area-chart.css"
    }
  ],
  "css": {
    "@import \"../styles/0nlytype/area-chart.css\"": {}
  },
  "meta": {
    "movement": "X",
    "underneath": "hook",
    "contract": "ot-area-chart"
  },
  "type": "registry:ui"
}