astro-component-kit 0.3.1 → 0.4.0

package/src/components/lib/charts/PolarAreaChart.astro

@@ -0,0 +1,85 @@
+---
+/**
+ * PolarAreaChart — Equal-angle wedges whose radius encodes value (area-correct
+ * via square-root scaling). Good for cyclical categories like months or hours.
+ *
+ * @param {Array<{label: string, value: number}>} items - Wedges (max 12).
+ * @param {string} color - Wedge hue (single series).
+ * @param {string} suffix - Value suffix.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { arcPath, polar, formatValue } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  items?: Array<{ label: string; value: number }>;
+  color?: string;
+  prefix?: string;
+  suffix?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Orders by month',
+  subtitle = 'Seasonality at a glance',
+  items = [
+    { label: 'Jan', value: 320 }, { label: 'Feb', value: 280 }, { label: 'Mar', value: 360 },
+    { label: 'Apr', value: 410 }, { label: 'May', value: 470 }, { label: 'Jun', value: 520 },
+    { label: 'Jul', value: 490 }, { label: 'Aug', value: 450 }, { label: 'Sep', value: 430 },
+    { label: 'Oct', value: 510 }, { label: 'Nov', value: 690 }, { label: 'Dec', value: 820 },
+  ],
+  color = 'var(--chart-7, #9085e9)',
+  prefix = '',
+  suffix = '',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const S = 320;
+const c = S / 2;
+const R = S / 2 - 26;
+const max = Math.max(...items.map((i) => i.value)) || 1;
+const n = Math.min(items.length, 12);
+const sweep = (Math.PI * 2) / n;
+const rings = [0.25, 0.5, 0.75, 1];
+const fmt = (v: number) => formatValue(v, prefix, suffix);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['Item', 'Value'], rows: items.map((i) => [i.label, fmt(i.value)]) }}
+>
+  <div class="pa">
+    <svg viewBox={`0 0 ${S} ${S}`} role="img" aria-label={`${title}: polar area chart of ${n} categories`}>
+      {rings.map((f) => <circle class="cf-grid" cx={c} cy={c} r={R * Math.sqrt(f)} fill="none" />)}
+      {items.slice(0, n).map((it, i) => {
+        const r = R * Math.sqrt(it.value / max);
+        const a0 = i * sweep + 0.012;
+        const a1 = (i + 1) * sweep - 0.012;
+        const [lx, ly] = polar(c, c, R + 14, i * sweep + sweep / 2);
+        const isMax = it.value === max;
+        return (
+          <g>
+            <path class="cf-mark cf-dim" d={arcPath(c, c, r, 0, a0, a1)} fill={color} fill-opacity={0.35 + 0.6 * (it.value / max)}
+              tabindex="0" role="img" aria-label={`${it.label}: ${fmt(it.value)}`} data-tip-title={it.label} data-tip={`${color}::${fmt(it.value)}`} />
+            <text class={isMax ? 'cf-label cf-label--strong' : 'cf-label'} x={lx} y={ly + 4} text-anchor="middle">{it.label}</text>
+          </g>
+        );
+      })}
+    </svg>
+  </div>
+</ChartFrame>
+
+<style>
+  .pa { max-width: 360px; margin: 0 auto; }
+</style>

package/src/components/lib/charts/PopulationPyramid.astro

@@ -0,0 +1,122 @@
+---
+/**
+ * PopulationPyramid — Back-to-back horizontal bars comparing two groups across
+ * ordered bands (age groups, tiers, price brackets).
+ *
+ * @param {string[]} bands - Row labels, top to bottom.
+ * @param {number[]} left - Values for the left group.
+ * @param {number[]} right - Values for the right group.
+ * @param {string} leftLabel - Left group name.
+ * @param {string} rightLabel - Right group name.
+ * @param {string} suffix - Value suffix.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { formatValue, colorAt } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  bands?: string[];
+  left?: number[];
+  right?: number[];
+  leftLabel?: string;
+  rightLabel?: string;
+  prefix?: string;
+  suffix?: string;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Audience by age',
+  subtitle = 'Share of users per age band',
+  bands = ['65+', '55–64', '45–54', '35–44', '25–34', '18–24'],
+  left = [2.1, 4.8, 8.2, 12.6, 15.4, 7.9],
+  right = [1.7, 4.1, 7.4, 11.8, 16.2, 8.8],
+  leftLabel = 'Women',
+  rightLabel = 'Men',
+  prefix = '',
+  suffix = '%',
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const max = Math.max(...left, ...right) || 1;
+const cl = colorAt(0, colors);
+const cr = colorAt(1, colors);
+const fmt = (v: number) => formatValue(v, prefix, suffix);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={[{ label: leftLabel, color: cl }, { label: rightLabel, color: cr }]}
+  table={{ headers: ['Band', leftLabel, rightLabel], rows: bands.map((b, i) => [b, fmt(left[i]), fmt(right[i])]) }}
+>
+  <div class="pp" role="list">
+    {bands.map((b, i) => (
+      <div class="pp__row" role="listitem">
+        <div class="pp__side pp__side--l">
+          <span class="pp__val">{fmt(left[i])}</span>
+          <span class="pp__bar cf-mark" tabindex="0" style={`width:${(left[i] / max) * 100}%; background:${cl}`}
+            aria-label={`${b}, ${leftLabel}: ${fmt(left[i])}`} data-tip-title={`${b} · ${leftLabel}`} data-tip={`${cl}::${fmt(left[i])}`}></span>
+        </div>
+        <span class="pp__band">{b}</span>
+        <div class="pp__side pp__side--r">
+          <span class="pp__bar cf-mark" tabindex="0" style={`width:${(right[i] / max) * 100}%; background:${cr}`}
+            aria-label={`${b}, ${rightLabel}: ${fmt(right[i])}`} data-tip-title={`${b} · ${rightLabel}`} data-tip={`${cr}::${fmt(right[i])}`}></span>
+          <span class="pp__val">{fmt(right[i])}</span>
+        </div>
+      </div>
+    ))}
+  </div>
+</ChartFrame>
+
+<style>
+  .pp { display: grid; gap: 4px; }
+  .pp__row {
+    display: grid;
+    grid-template-columns: 1fr 4rem 1fr;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .pp__side {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    height: 24px;
+  }
+  .pp__side--l { justify-content: flex-end; }
+  .pp__bar {
+    height: 100%;
+    min-width: 2px;
+    max-width: calc(100% - 3rem);
+    transition: opacity 0.2s ease;
+  }
+  .pp__side--l .pp__bar { border-radius: 4px 0 0 4px; }
+  .pp__side--r .pp__bar { border-radius: 0 4px 4px 0; }
+  .pp__bar:hover { opacity: 0.85; }
+  .pp__bar:focus-visible { outline: 2px solid var(--c-text-1, #fff); outline-offset: 1px; }
+  .pp__band {
+    text-align: center;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--c-text-1, #fff);
+  }
+  .pp__val {
+    font-size: 0.75rem;
+    color: var(--c-text-2, #a3a3a3);
+    font-variant-numeric: tabular-nums;
+    min-width: 2.5rem;
+  }
+  .pp__side--l .pp__val { text-align: right; }
+</style>

package/src/components/lib/charts/PunchCardChart.astro

@@ -0,0 +1,89 @@
+---
+/**
+ * PunchCardChart — Day × hour dot matrix where dot area encodes volume.
+ * Classic "when are people active" view.
+ *
+ * @param {string[]} days - Row labels.
+ * @param {number[]} hours - Column hours (0–23).
+ * @param {number[][]} values - values[day][hourIndex].
+ * @param {string} unit - Unit noun for tooltips (e.g. 'commits').
+ * @param {string} color - Dot color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  days?: string[];
+  hours?: number[];
+  values?: number[][];
+  unit?: string;
+  color?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const defaultHours = [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22];
+const shape = [0.1, 0.05, 0.02, 0.1, 0.6, 0.95, 0.8, 1, 0.9, 0.55, 0.35, 0.2];
+const dayW = [0.9, 1, 1, 0.95, 0.75, 0.25, 0.2];
+
+const {
+  title = 'Deploy activity',
+  subtitle = 'Deploys by weekday and hour (UTC)',
+  days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  hours = defaultHours,
+  values = dayW.map((d, di) => shape.map((s, hi) => Math.round(d * s * 42 + ((di * 7 + hi * 3) % 5)))),
+  unit = 'deploys',
+  color = 'var(--chart-3, #199e70)',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const m = { t: 10, r: 10, b: 26, l: 46 };
+const cols = hours.length;
+const cellW = (W - m.l - m.r) / cols;
+const cellH = 34;
+const H = m.t + days.length * cellH + m.b;
+const max = Math.max(...values.flat()) || 1;
+const rMax = Math.min(cellW, cellH) / 2 - 2;
+const pad = (h: number) => `${String(h).padStart(2, '0')}:00`;
+const total = values.flat().reduce((a, b) => a + b, 0);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  value={total.toLocaleString('en-US')}
+  delta={`total ${unit}`}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['Day', ...hours.map(pad)], rows: days.map((d, di) => [d, ...values[di]]) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: punch card of ${unit} by day and hour`}>
+    {days.map((d, di) => (
+      <g>
+        <line class="cf-grid" x1={m.l} x2={W - m.r} y1={m.t + di * cellH + cellH / 2} y2={m.t + di * cellH + cellH / 2} />
+        <text class="cf-label" x={m.l - 10} y={m.t + di * cellH + cellH / 2 + 4} text-anchor="end">{d}</text>
+      </g>
+    ))}
+    {hours.map((h, hi) => <text class="cf-label" x={m.l + hi * cellW + cellW / 2} y={H - 8} text-anchor="middle">{pad(h)}</text>)}
+    {days.map((d, di) => hours.map((h, hi) => {
+      const v = values[di]?.[hi] ?? 0;
+      const rad = v ? 2 + Math.sqrt(v / max) * (rMax - 2) : 0;
+      const cx = m.l + hi * cellW + cellW / 2;
+      const cy = m.t + di * cellH + cellH / 2;
+      return (
+        <g class="cf-mark cf-dim" tabindex="0" role="img" aria-label={`${d} ${pad(h)}: ${v} ${unit}`} data-tip-title={`${d} · ${pad(h)}`} data-tip={`${color}::${v} ${unit}`}>
+          <rect x={cx - cellW / 2} y={cy - cellH / 2} width={cellW} height={cellH} fill="transparent" />
+          {rad > 0 && <circle cx={cx} cy={cy} r={rad} fill={color} fill-opacity={0.35 + (v / max) * 0.65} />}
+        </g>
+      );
+    }))}
+  </svg>
+</ChartFrame>

package/src/components/lib/charts/RadarChart.astro

@@ -0,0 +1,94 @@
+---
+/**
+ * RadarChart — Pure SVG spider chart comparing up to 3 entities across 5–8
+ * axes on a shared 0–max scale, with value tooltips on every vertex.
+ *
+ * @param {string[]} axes - Attribute names (5–8 recommended).
+ * @param {Array<{name: string, data: number[]}>} series - Entities (max 3).
+ * @param {number} max - Scale maximum.
+ * @param {string[]} colors - Optional per-series colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { polar, linePath, colorAt, type Point } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  axes?: string[];
+  series?: Array<{ name: string; data: number[] }>;
+  max?: number;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Framework comparison',
+  subtitle = 'Scored 0–10 by the team',
+  axes = ['Performance', 'DX', 'Ecosystem', 'SEO', 'Learning curve', 'Flexibility'],
+  series = [
+    { name: 'Astro', data: [9.5, 8.5, 7, 9.5, 8.5, 8] },
+    { name: 'Next', data: [7.5, 8, 9.5, 8, 6.5, 8.5] },
+  ],
+  max = 10,
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const S = 340;
+const c = S / 2;
+const R = S / 2 - 54;
+const n = axes.length;
+const ang = (i: number) => (i / n) * Math.PI * 2;
+const levels = [0.25, 0.5, 0.75, 1];
+const shapes = series.slice(0, 3).map((s, si) => {
+  const pts: Point[] = s.data.map((v, i) => polar(c, c, R * Math.max(0, Math.min(1, v / max)), ang(i)));
+  return { ...s, pts, d: `${linePath(pts)} Z`, color: colorAt(si, colors) };
+});
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={shapes.map((s) => ({ label: s.name, color: s.color }))}
+  table={{ headers: ['Axis', ...series.map((s) => s.name)], rows: axes.map((a, i) => [a, ...series.map((s) => s.data[i])]) }}
+>
+  <div class="rd">
+    <svg viewBox={`0 0 ${S} ${S}`} role="img" aria-label={`${title}: radar chart across ${n} axes`}>
+      {levels.map((l) => (
+        <path class="cf-grid" fill="none" d={`${linePath(axes.map((_, i) => polar(c, c, R * l, ang(i))))} Z`} />
+      ))}
+      {axes.map((a, i) => {
+        const [x, y] = polar(c, c, R, ang(i));
+        const [lx, ly] = polar(c, c, R + 18, ang(i));
+        const anchor = 4 > Math.abs(lx - c) ? 'middle' : lx > c ? 'start' : 'end';
+        return (
+          <g>
+            <line class="cf-grid" x1={c} y1={c} x2={x} y2={y} />
+            <text class="cf-label" x={lx} y={ly + 4} text-anchor={anchor}>{a}</text>
+          </g>
+        );
+      })}
+      {shapes.map((s) => (
+        <path d={s.d} fill={s.color} fill-opacity="0.18" stroke={s.color} stroke-width="2" stroke-linejoin="round" aria-hidden="true" />
+      ))}
+      {shapes.map((s) => s.pts.map(([x, y], i) => (
+        <circle class="cf-mark" cx={x} cy={y} r="4.5" fill={s.color} stroke="var(--chart-surface, #0d0d0f)" stroke-width="2"
+          tabindex="0" role="img" aria-label={`${s.name}, ${axes[i]}: ${s.data[i]} of ${max}`}
+          data-tip-title={axes[i]} data-tip={shapes.map((o) => `${o.color}::${o.name}: ${o.data[i]}`).join('|')} />
+      )))}
+    </svg>
+  </div>
+</ChartFrame>
+
+<style>
+  .rd { max-width: 400px; margin: 0 auto; }
+</style>

package/src/components/lib/charts/RadarMetricChart.astro

@@ -0,0 +1,168 @@
+---
+/**
+ * RadarMetricChart — Pure SVG radar / spider chart for multi-axis skill and performance visualization.
+ * 
+ * @param {string} title - Chart title. Default is 'Performance Metrics'.
+ * @param {Array<{axis: string, value: number}>} data - 5 or 6 axis points (values 0 to 100).
+ * @param {string} color - Primary chart fill & stroke color. Default is '#d4a017'.
+ * @param {number} size - Pixel width/height of the radar. Default is 320.
+ */
+interface Props {
+  title?: string;
+  data?: Array<{ axis: string; value: number }>;
+  color?: string;
+  size?: number;
+}
+
+const {
+  title = 'System Capabilities',
+  data = [
+    { axis: 'Speed', value: 95 },
+    { axis: 'A11y', value: 98 },
+    { axis: 'SEO', value: 100 },
+    { axis: 'Design', value: 92 },
+    { axis: 'Zero-JS', value: 96 },
+    { axis: 'Security', value: 90 },
+  ],
+  color = '#d4a017',
+  size = 320,
+} = Astro.props;
+
+const center = size / 2;
+const radius = (size - 70) / 2;
+const totalAxes = data.length;
+const angleSlice = (Math.PI * 2) / totalAxes;
+
+// Concentric polygon grid levels (20%, 40%, 60%, 80%, 100%)
+const levels = [0.2, 0.4, 0.6, 0.8, 1.0];
+const gridPolygons = levels.map((lvl) => {
+  return data
+    .map((_, i) => {
+      const r = radius * lvl;
+      const x = center + r * Math.cos(angleSlice * i - Math.PI / 2);
+      const y = center + r * Math.sin(angleSlice * i - Math.PI / 2);
+      return `${x},${y}`;
+    })
+    .join(' ');
+});
+
+// Data polygon points
+const dataPoints = data
+  .map((d, i) => {
+    const r = radius * (Math.min(100, Math.max(0, d.value)) / 100);
+    const x = center + r * Math.cos(angleSlice * i - Math.PI / 2);
+    const y = center + r * Math.sin(angleSlice * i - Math.PI / 2);
+    return `${x},${y}`;
+  })
+  .join(' ');
+---
+
+<div class="radar-card" style={`--radar-size: ${size}px; --radar-color: ${color};`}>
+  {title && <h5 class="radar-card__title">{title}</h5>}
+
+  <div class="radar-card__wrap">
+    <svg width={size} height={size} class="radar-card__svg">
+      <!-- Background concentric webs -->
+      {gridPolygons.map((pts) => (
+        <polygon points={pts} class="radar-web" />
+      ))}
+
+      <!-- Axes radial spokes -->
+      {data.map((_, i) => {
+        const x2 = center + radius * Math.cos(angleSlice * i - Math.PI / 2);
+        const y2 = center + radius * Math.sin(angleSlice * i - Math.PI / 2);
+        return <line x1={center} y1={center} x2={x2} y2={y2} class="radar-spoke" />;
+      })}
+
+      <!-- Data polygon -->
+      <polygon points={dataPoints} class="radar-data" />
+
+      <!-- Data nodes -->
+      {data.map((d, i) => {
+        const r = radius * (d.value / 100);
+        const cx = center + r * Math.cos(angleSlice * i - Math.PI / 2);
+        const cy = center + r * Math.sin(angleSlice * i - Math.PI / 2);
+        return <circle cx={cx} cy={cy} r="4" class="radar-node" />;
+      })}
+
+      <!-- Axis Labels -->
+      {data.map((d, i) => {
+        const labelRadius = radius + 22;
+        const lx = center + labelRadius * Math.cos(angleSlice * i - Math.PI / 2);
+        const ly = center + labelRadius * Math.sin(angleSlice * i - Math.PI / 2);
+        return (
+          <text
+            x={lx}
+            y={ly}
+            class="radar-label"
+            text-anchor="middle"
+            dominant-baseline="central"
+          >
+            {d.axis} ({d.value})
+          </text>
+        );
+      })}
+    </svg>
+  </div>
+</div>
+
+<style>
+  .radar-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--sp-6, 1.5rem);
+    background: rgba(255, 255, 255, 0.02);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--r-xl, 24px);
+    width: 100%;
+    max-width: fit-content;
+    font-family: var(--font-sans, system-ui, sans-serif);
+  }
+
+  .radar-card__title {
+    font-size: 0.95rem;
+    font-weight: 800;
+    color: var(--c-text-1, #ffffff);
+    margin: 0 0 12px 0;
+  }
+
+  .radar-card__wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .radar-web {
+    fill: none;
+    stroke: rgba(255, 255, 255, 0.08);
+    stroke-width: 1;
+  }
+
+  .radar-spoke {
+    stroke: rgba(255, 255, 255, 0.08);
+    stroke-width: 1;
+  }
+
+  .radar-data {
+    fill: rgba(184, 134, 11, 0.25);
+    stroke: var(--radar-color);
+    stroke-width: 2.5;
+    transition: all 0.4s ease;
+  }
+
+  .radar-node {
+    fill: var(--radar-color);
+    stroke: #050505;
+    stroke-width: 2;
+  }
+
+  .radar-label {
+    fill: var(--c-text-2, #a3a3a3);
+    font-size: 10.5px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+</style>

package/src/components/lib/charts/RadialBarChart.astro

@@ -0,0 +1,124 @@
+---
+/**
+ * RadialBarChart — Concentric progress arcs (one per item) sharing a 0–100%
+ * scale. Labels sit at each arc's start so identity never relies on color.
+ *
+ * @param {Array<{label: string, value: number, max?: number}>} items - Values (default max 100).
+ * @param {number} sweep - Arc sweep in degrees (180–360).
+ * @param {string[]} colors - Optional per-item colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { arcStroke, colorAt } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  items?: Array<{ label: string; value: number; max?: number }>;
+  sweep?: number;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Feature adoption',
+  subtitle = 'Share of active workspaces',
+  items = [
+    { label: 'Dashboards', value: 86 },
+    { label: 'Alerts', value: 64 },
+    { label: 'API', value: 47 },
+    { label: 'SSO', value: 29 },
+  ],
+  sweep = 270,
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const S = 300;
+const cx = S / 2;
+const cy = S / 2;
+const stroke = 16;
+const gap = 8;
+const outer = S / 2 - 14;
+const sweepRad = (Math.min(360, Math.max(180, sweep)) * Math.PI) / 180;
+const start = -sweepRad / 2 - (sweep === 360 ? 0 : 0);
+const rings = items.slice(0, 8).map((it, i) => {
+  const r = outer - i * (stroke + gap);
+  const pct = Math.max(0, Math.min(1, it.value / (it.max ?? 100)));
+  return { ...it, r, pct, color: colorAt(i, colors) };
+});
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['Item', 'Value'], rows: items.map((i) => [i.label, `${i.value}${i.max ? ` / ${i.max}` : '%'}`]) }}
+>
+  <div class="rb">
+    <svg viewBox={`0 0 ${S} ${S}`} role="img" aria-label={`${title}: radial bar chart`}>
+      {rings.map((r) => (
+        <g class="cf-mark cf-dim" tabindex="0" role="img" aria-label={`${r.label}: ${Math.round(r.pct * 100)}%`}
+          data-tip-title={r.label} data-tip={`${r.color}::${r.value}${r.max ? ` / ${r.max}` : '%'}`}>
+          <path d={arcStroke(cx, cy, r.r, start, start + sweepRad)} fill="none" stroke="rgba(255,255,255,0.06)" stroke-width={stroke} stroke-linecap="round" />
+          {r.pct > 0 && (
+            <path class="rb__arc" d={arcStroke(cx, cy, r.r, start, start + sweepRad * r.pct)} fill="none" stroke={r.color} stroke-width={stroke} stroke-linecap="round" />
+          )}
+        </g>
+      ))}
+    </svg>
+    <ul class="rb__labels" aria-hidden="true">
+      {rings.map((r) => (
+        <li><span style={`background:${r.color}`}></span>{r.label}<b>{Math.round(r.pct * 100)}%</b></li>
+      ))}
+    </ul>
+  </div>
+</ChartFrame>
+
+<style>
+  .rb {
+    display: grid;
+    grid-template-columns: minmax(0, 300px) 1fr;
+    gap: 1.5rem;
+    align-items: center;
+  }
+  .rb__arc {
+    stroke-dasharray: 1200;
+    stroke-dashoffset: 1200;
+    animation: rb-draw 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+  @keyframes rb-draw { to { stroke-dashoffset: 0; } }
+  .rb__labels {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 0.75rem;
+  }
+  .rb__labels li {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    font-size: 0.875rem;
+    color: var(--c-text-2, #a3a3a3);
+  }
+  .rb__labels span { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
+  .rb__labels b {
+    margin-left: auto;
+    color: var(--c-text-1, #fff);
+    font-variant-numeric: tabular-nums;
+  }
+  @media (max-width: 560px) {
+    .rb { grid-template-columns: 1fr; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .rb__arc { animation: none; stroke-dashoffset: 0; }
+  }
+</style>