{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bar-chart",
  "type": "registry:ui",
  "title": "Bar Chart",
  "description": "CSS-only bar chart with horizontal and vertical orientations. No charting library dependency.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "ui/bar-chart/bar-chart.tsx",
      "type": "registry:ui",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nexport type BarChartVariant = 'DEFAULT' | 'ACTIVE' | 'WARNING' | 'CRITICAL'\n\nexport interface BarChartEntry {\n  label: string\n  value: number\n}\n\nexport interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  data:          BarChartEntry[]\n  orientation?:  'horizontal' | 'vertical'\n  variant?:      BarChartVariant\n  title?:        string\n  showValues?:   boolean\n  /** Override the max value for scaling. Defaults to max(data). */\n  max?:          number\n}\n\nconst VERTICAL_CHART_HEIGHT = 144  // px — 9rem\n\nconst BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\n  (\n    {\n      className,\n      data,\n      orientation = 'horizontal',\n      variant     = 'ACTIVE',\n      title,\n      showValues  = true,\n      max,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const computedMax = max ?? Math.max(...data.map((d) => d.value), 1)\n\n    const accentColor =\n      variant === 'ACTIVE'   ? 'var(--color-green)' :\n      variant === 'WARNING'  ? 'var(--color-amber)' :\n      variant === 'CRITICAL' ? 'var(--color-red)'   :\n      'var(--text-secondary)'\n\n    const accentGlow =\n      variant === 'ACTIVE'   ? 'var(--glow-green)' :\n      variant === 'WARNING'  ? 'var(--glow-amber)'  :\n      variant === 'CRITICAL' ? 'var(--glow-red)'    :\n      'none'\n\n    return (\n      <div\n        ref={ref}\n        className={cn(className)}\n        style={{\n          border:     '1px solid var(--border)',\n          background: 'var(--surface)',\n          fontFamily: 'var(--font-mono)',\n          overflow:   'hidden',\n          ...style,\n        }}\n        {...props}\n      >\n        {/* Title bar */}\n        {title && (\n          <div\n            style={{\n              padding:       '0.4rem 0.75rem',\n              borderBottom:  '1px solid var(--border)',\n              background:    'var(--surface-raised)',\n              fontSize:      '0.6rem',\n              color:         'var(--text-muted)',\n              letterSpacing: '0.12em',\n              textTransform: 'uppercase',\n            }}\n          >\n            {title}\n          </div>\n        )}\n\n        {orientation === 'horizontal' ? (\n          /* ── Horizontal bars ── */\n          <div\n            style={{\n              padding:       '0.75rem',\n              display:       'flex',\n              flexDirection: 'column',\n              gap:           '0.5rem',\n            }}\n          >\n            {data.map((entry, i) => {\n              const pct = Math.max((entry.value / computedMax) * 100, 0)\n              return (\n                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>\n                  {/* Label */}\n                  <span\n                    style={{\n                      fontSize:      '0.6rem',\n                      color:         'var(--text-muted)',\n                      letterSpacing: '0.06em',\n                      textTransform: 'uppercase',\n                      width:         'clamp(3rem, 20%, 7rem)',\n                      flexShrink:    0,\n                      overflow:      'hidden',\n                      textOverflow:  'ellipsis',\n                      whiteSpace:    'nowrap',\n                    }}\n                  >\n                    {entry.label}\n                  </span>\n\n                  {/* Track */}\n                  <div\n                    style={{\n                      flex:       1,\n                      height:     '0.65rem',\n                      background: 'var(--surface-raised)',\n                      border:     '1px solid var(--border)',\n                      position:   'relative',\n                      overflow:   'hidden',\n                    }}\n                  >\n                    <div\n                      style={{\n                        position:   'absolute',\n                        top:        0,\n                        left:       0,\n                        bottom:     0,\n                        width:      `${pct}%`,\n                        background: accentColor,\n                        boxShadow:  accentGlow,\n                        opacity:    0.85,\n                        transition: 'width 0.4s ease',\n                      }}\n                    />\n                  </div>\n\n                  {/* Value */}\n                  {showValues && (\n                    <span\n                      style={{\n                        fontSize:      '0.6rem',\n                        color:         accentColor,\n                        letterSpacing: '0.04em',\n                        width:         '3rem',\n                        textAlign:     'right',\n                        flexShrink:    0,\n                      }}\n                    >\n                      {entry.value}\n                    </span>\n                  )}\n                </div>\n              )\n            })}\n          </div>\n        ) : (\n          /* ── Vertical bars ── */\n          <div>\n            {/* Bar area */}\n            <div\n              style={{\n                display:    'flex',\n                alignItems: 'flex-end',\n                gap:        '0.4rem',\n                height:     VERTICAL_CHART_HEIGHT,\n                padding:    '0.75rem 0.75rem 0',\n              }}\n            >\n              {data.map((entry, i) => {\n                const pct    = Math.max((entry.value / computedMax) * 100, 0)\n                const barPx  = Math.round((pct / 100) * VERTICAL_CHART_HEIGHT)\n\n                return (\n                  <div\n                    key={i}\n                    style={{\n                      flex:           1,\n                      height:         VERTICAL_CHART_HEIGHT,\n                      display:        'flex',\n                      flexDirection:  'column',\n                      alignItems:     'center',\n                      justifyContent: 'flex-end',\n                      gap:            '0.2rem',\n                    }}\n                  >\n                    {/* Value above bar */}\n                    {showValues && (\n                      <span\n                        style={{\n                          fontSize:      '0.5rem',\n                          color:         accentColor,\n                          letterSpacing: '0.04em',\n                          flexShrink:    0,\n                        }}\n                      >\n                        {entry.value}\n                      </span>\n                    )}\n\n                    {/* Bar */}\n                    <div\n                      style={{\n                        width:      '100%',\n                        height:     barPx > 0 ? barPx : 0,\n                        minHeight:  entry.value > 0 ? 2 : 0,\n                        background: accentColor,\n                        boxShadow:  accentGlow,\n                        opacity:    0.85,\n                        flexShrink: 0,\n                        transition: 'height 0.4s ease',\n                      }}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n\n            {/* Labels row */}\n            <div\n              style={{\n                display:      'flex',\n                gap:          '0.4rem',\n                padding:      '0.25rem 0.75rem 0.75rem',\n                borderTop:    '1px solid var(--border)',\n                marginTop:    '0.25rem',\n              }}\n            >\n              {data.map((entry, i) => (\n                <div\n                  key={i}\n                  style={{\n                    flex:          1,\n                    textAlign:     'center',\n                    fontSize:      '0.5rem',\n                    color:         'var(--text-muted)',\n                    letterSpacing: '0.06em',\n                    textTransform: 'uppercase',\n                    overflow:      'hidden',\n                    textOverflow:  'ellipsis',\n                    whiteSpace:    'nowrap',\n                  }}\n                >\n                  {entry.label}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    )\n  }\n)\nBarChart.displayName = 'BarChart'\n\nexport { BarChart }\n"
    }
  ]
}