@soadtech/cli 0.1.0

package/registry/components/Chart/ChartAxis.tsx

@@ -0,0 +1,79 @@
+import type { ChartAxisProps } from './ChartAxis.types';
+import styles from './ChartAxis.module.css';
+
+function defaultFormatY(value: number): string {
+  if (value >= 1000) return `${(value / 1000).toFixed(value % 1000 === 0 ? 0 : 1)}k`;
+  return String(value);
+}
+
+export function ChartAxis({
+  yTicks,
+  xLabels,
+  chartWidth,
+  chartHeight,
+  gridLines = true,
+  formatY = defaultFormatY,
+}: ChartAxisProps) {
+  return (
+    <div
+      className={styles.root}
+      style={
+        {
+          '--ca-chart-w': `${chartWidth}px`,
+          '--ca-chart-h': `${chartHeight}px`,
+        } as React.CSSProperties
+      }
+    >
+      {/* Y-axis labels */}
+      <div className={styles.yAxis}>
+        {[...yTicks].reverse().map((tick, i) => (
+          <span key={i} className={styles.yLabel}>
+            {formatY(tick)}
+          </span>
+        ))}
+      </div>
+
+      {/* Chart area placeholder — children injected by parent */}
+      <div className={styles.chartArea}>
+        {/* Grid lines SVG */}
+        {gridLines && (
+          <svg
+            className={styles.grid}
+            width={chartWidth}
+            height={chartHeight}
+            viewBox={`0 0 ${chartWidth} ${chartHeight}`}
+          >
+            {yTicks.map((_, i) => {
+              const y =
+                chartHeight -
+                (i / (yTicks.length - 1)) * chartHeight;
+              return (
+                <line
+                  key={i}
+                  x1={0}
+                  y1={y}
+                  x2={chartWidth}
+                  y2={y}
+                  stroke="var(--st-color-chart-grid)"
+                  strokeWidth="1"
+                />
+              );
+            })}
+          </svg>
+        )}
+      </div>
+
+      {/* Spacer in bottom-left corner */}
+      <div />
+
+      {/* X-axis labels */}
+      <div className={styles.xAxis}>
+        {xLabels.map((label, i) => (
+          <span key={i} className={styles.xLabel}>
+            {label}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

package/registry/components/Chart/ChartAxis.types.ts

@@ -0,0 +1,14 @@
+export interface ChartAxisProps {
+  /** Y-axis tick values (bottom to top) */
+  yTicks: number[];
+  /** X-axis labels */
+  xLabels: string[];
+  /** Chart area width in px */
+  chartWidth: number;
+  /** Chart area height in px */
+  chartHeight: number;
+  /** Show horizontal grid lines */
+  gridLines?: boolean;
+  /** Format Y-axis tick values */
+  formatY?: (value: number) => string;
+}

package/registry/components/Chart/ChartLegend.module.css

@@ -0,0 +1,31 @@
+.group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--st-space-4);
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-sm);
+  color: var(--st-color-foreground);
+}
+
+.indicator {
+  flex-shrink: 0;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--st-radius-full);
+}
+
+.line {
+  width: 16px;
+  height: 3px;
+  border-radius: var(--st-radius-full);
+}

package/registry/components/Chart/ChartLegend.tsx

@@ -0,0 +1,49 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { LegendLabelProps, LegendGroupProps } from './ChartLegend.types';
+import styles from './ChartLegend.module.css';
+
+const COLOR_INDEX_MAP: Record<number, string> = {
+  1: 'var(--st-color-chart-1)',
+  2: 'var(--st-color-chart-2)',
+  3: 'var(--st-color-chart-3)',
+  4: 'var(--st-color-chart-4)',
+};
+
+export const LegendLabel = forwardRef<HTMLSpanElement, LegendLabelProps>(
+  (
+    { label, colorIndex = 1, color, variant = 'dot', className, style, ...rest },
+    ref
+  ) => {
+    const resolvedColor = color ?? COLOR_INDEX_MAP[colorIndex] ?? COLOR_INDEX_MAP[1];
+
+    return (
+      <span
+        ref={ref}
+        className={cn(styles.label, className)}
+        style={style}
+        {...rest}
+      >
+        <span
+          className={cn(styles.indicator, styles[variant])}
+          style={{ backgroundColor: resolvedColor }}
+        />
+        {label}
+      </span>
+    );
+  }
+);
+
+LegendLabel.displayName = 'LegendLabel';
+
+export const LegendGroup = forwardRef<HTMLDivElement, LegendGroupProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <div ref={ref} className={cn(styles.group, className)} {...rest}>
+        {children}
+      </div>
+    );
+  }
+);
+
+LegendGroup.displayName = 'LegendGroup';

package/registry/components/Chart/ChartLegend.types.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'react';
+
+export type LegendLabelVariant = 'dot' | 'line';
+
+export interface LegendLabelProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Label text */
+  label: string;
+  /** Color index (1–4) maps to --st-color-chart-N */
+  colorIndex?: number;
+  /** Custom color override */
+  color?: string;
+  /** Dot or line indicator */
+  variant?: LegendLabelVariant;
+}
+
+export interface LegendGroupProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}

package/registry/components/Chart/ChartTooltip.module.css

@@ -0,0 +1,54 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--st-color-chart-tooltip-bg);
+  color: var(--st-color-chart-tooltip-fg);
+  border-radius: var(--st-radius-lg);
+  padding: var(--st-space-2) var(--st-space-3);
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-sm);
+  gap: var(--st-space-1);
+  box-shadow: var(--st-shadow-lg);
+  min-width: 100px;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--st-radius-full);
+  flex-shrink: 0;
+}
+
+.label {
+  flex: 1;
+  opacity: 0.8;
+}
+
+.value {
+  font-weight: var(--st-font-weight-semibold);
+  margin-left: var(--st-space-3);
+}
+
+/* ─── Variants ─── */
+
+.simple .item {
+  gap: var(--st-space-2);
+}
+
+.detailed {
+  padding: var(--st-space-3) var(--st-space-4);
+}
+
+.detailed .value {
+  font-size: var(--st-font-size-md);
+}
+
+.multi {
+  gap: var(--st-space-2);
+}

package/registry/components/Chart/ChartTooltip.tsx

@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { ChartTooltipProps } from './ChartTooltip.types';
+import styles from './ChartTooltip.module.css';
+
+const COLOR_INDEX_MAP: Record<number, string> = {
+  1: 'var(--st-color-chart-1)',
+  2: 'var(--st-color-chart-2)',
+  3: 'var(--st-color-chart-3)',
+  4: 'var(--st-color-chart-4)',
+};
+
+export const ChartTooltip = forwardRef<HTMLDivElement, ChartTooltipProps>(
+  ({ items, variant = 'simple', visible = true, className, ...rest }, ref) => {
+    if (!visible) return null;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(styles.root, styles[variant], className)}
+        role="tooltip"
+        {...rest}
+      >
+        {items.map((item, i) => (
+          <div key={i} className={styles.item}>
+            {item.colorIndex && (
+              <span
+                className={styles.dot}
+                style={{
+                  backgroundColor:
+                    COLOR_INDEX_MAP[item.colorIndex] ?? COLOR_INDEX_MAP[1],
+                }}
+              />
+            )}
+            <span className={styles.label}>{item.label}</span>
+            {item.value && <span className={styles.value}>{item.value}</span>}
+          </div>
+        ))}
+      </div>
+    );
+  }
+);
+
+ChartTooltip.displayName = 'ChartTooltip';

package/registry/components/Chart/ChartTooltip.types.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'react';
+
+export type ChartTooltipVariant = 'simple' | 'detailed' | 'multi';
+
+export interface ChartTooltipItem {
+  label: string;
+  value?: string;
+  /** Color index (1–4) for the dot indicator */
+  colorIndex?: number;
+}
+
+export interface ChartTooltipProps extends HTMLAttributes<HTMLDivElement> {
+  /** Tooltip items */
+  items: ChartTooltipItem[];
+  /** Tooltip variant */
+  variant?: ChartTooltipVariant;
+  /** Visibility */
+  visible?: boolean;
+}

package/registry/components/Chart/DonutChart.module.css

@@ -0,0 +1,32 @@
+.root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--st-font-family);
+}
+
+.root svg {
+  display: block;
+}
+
+.center {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: var(--st-font-size-sm);
+  color: var(--st-color-foreground);
+  pointer-events: none;
+}
+
+.dark {
+  background-color: var(--st-color-neutral-900);
+  border-radius: var(--st-radius-2xl);
+}
+
+.dark .center {
+  color: var(--st-color-chart-tooltip-fg);
+}

package/registry/components/Chart/DonutChart.tsx

@@ -0,0 +1,107 @@
+import { forwardRef, useMemo, useState } from 'react';
+import { cn } from '../../utils/cn';
+import { normalizeSegments, donutArc } from './chart.utils';
+import { useChartHover } from './useChartHover';
+import { HoverTooltip } from './HoverTooltip';
+import type { DonutChartProps } from './DonutChart.types';
+import styles from './DonutChart.module.css';
+
+const SEGMENT_COLORS = [
+  'var(--st-color-chart-1)',
+  'var(--st-color-chart-2)',
+  'var(--st-color-chart-3)',
+  'var(--st-color-chart-4)',
+  'var(--st-color-chart-1-muted)',
+  'var(--st-color-chart-2-muted)',
+];
+
+export const DonutChart = forwardRef<HTMLDivElement, DonutChartProps>(
+  (
+    {
+      segments,
+      centerLabel,
+      thickness = 24,
+      size = 160,
+      dark = false,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const fractions = useMemo(
+      () => normalizeSegments(segments.map((s) => s.value)),
+      [segments]
+    );
+
+    const half = size / 2;
+    const outerR = half - 2;
+    const innerR = outerR - thickness;
+
+    const arcs = useMemo(() => {
+      const paths: { d: string; color: string; midX: number; midY: number; index: number }[] = [];
+      let angle = -Math.PI / 2;
+
+      fractions.forEach((frac, i) => {
+        if (frac <= 0) return;
+        const sweep = frac * Math.PI * 2;
+        const d = donutArc(half, half, outerR, innerR, angle, angle + sweep);
+        if (d) {
+          const midAngle = angle + sweep / 2;
+          const midR = (outerR + innerR) / 2;
+          paths.push({
+            d,
+            color: SEGMENT_COLORS[i % SEGMENT_COLORS.length],
+            midX: half + midR * Math.cos(midAngle),
+            midY: half + midR * Math.sin(midAngle),
+            index: i,
+          });
+        }
+        angle += sweep;
+      });
+
+      return paths;
+    }, [fractions, half, outerR, innerR]);
+
+    const { hover, show, hide } = useChartHover();
+    const [activeIdx, setActiveIdx] = useState<number | null>(null);
+
+    const total = segments.reduce((s, seg) => s + seg.value, 0);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(styles.root, dark && styles.dark, className)}
+        style={{ width: size, height: size }}
+        {...rest}
+      >
+        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          {arcs.map((arc) => (
+            <path
+              key={arc.index}
+              d={arc.d}
+              fill={arc.color}
+              opacity={activeIdx === null || activeIdx === arc.index ? 1 : 0.5}
+              style={{ transition: 'opacity 150ms ease' }}
+              onMouseEnter={() => {
+                setActiveIdx(arc.index);
+                const seg = segments[arc.index];
+                const pct = total > 0 ? ((seg.value / total) * 100).toFixed(1) : '0';
+                show(arc.midX, arc.midY, (
+                  <div>
+                    {seg.label && <div style={{ fontWeight: 600, marginBottom: 2 }}>{seg.label}</div>}
+                    <div>{seg.value} ({pct}%)</div>
+                  </div>
+                ));
+              }}
+              onMouseLeave={() => { setActiveIdx(null); hide(); }}
+            />
+          ))}
+        </svg>
+        {centerLabel && <div className={styles.center}>{centerLabel}</div>}
+        <HoverTooltip hover={hover} />
+      </div>
+    );
+  }
+);
+
+DonutChart.displayName = 'DonutChart';

package/registry/components/Chart/DonutChart.types.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface DonutChartSegment {
+  value: number;
+  label?: string;
+}
+
+export interface DonutChartProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+  /** Segments with values (will be normalized) */
+  segments: DonutChartSegment[];
+  /** Center label content */
+  centerLabel?: ReactNode;
+  /** Donut thickness in px */
+  thickness?: number;
+  /** Outer size in px */
+  size?: number;
+  /** Dark background variant */
+  dark?: boolean;
+}

package/registry/components/Chart/GridChart.module.css

@@ -0,0 +1,26 @@
+.root {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(var(--gc-cols), var(--gc-cell));
+  gap: var(--gc-gap);
+}
+
+.cell {
+  width: var(--gc-cell);
+  height: var(--gc-cell);
+  border-radius: var(--st-radius-sm);
+}
+
+/* ─── Color palettes ─── */
+
+.primary .cell {
+  background-color: var(--st-color-chart-1);
+}
+
+.secondary .cell {
+  background-color: var(--st-color-chart-2);
+}
+
+.neutral .cell {
+  background-color: var(--st-color-chart-4);
+}

package/registry/components/Chart/GridChart.tsx

@@ -0,0 +1,61 @@
+import { forwardRef, useMemo } from 'react';
+import { cn } from '../../utils/cn';
+import { useChartHover } from './useChartHover';
+import { HoverTooltip } from './HoverTooltip';
+import type { GridChartProps } from './GridChart.types';
+import styles from './GridChart.module.css';
+
+export const GridChart = forwardRef<HTMLDivElement, GridChartProps>(
+  (
+    { data, color = 'primary', cellSize = 16, gap = 3, className, style, ...rest },
+    ref
+  ) => {
+    const { flat, cols, maxVal } = useMemo(() => {
+      const f = data.flat();
+      return {
+        flat: f,
+        cols: data[0]?.length ?? 0,
+        maxVal: Math.max(...f, 1),
+      };
+    }, [data]);
+
+    const { hover, show, hide } = useChartHover();
+
+    return (
+      <div
+        ref={ref}
+        className={cn(styles.root, styles[color], className)}
+        style={
+          {
+            '--gc-cols': cols,
+            '--gc-cell': `${cellSize}px`,
+            '--gc-gap': `${gap}px`,
+            ...style,
+          } as React.CSSProperties
+        }
+        {...rest}
+      >
+        {flat.map((val, i) => (
+          <div
+            key={i}
+            className={styles.cell}
+            style={{ opacity: Math.max(0.1, val / maxVal) }}
+            onMouseEnter={(e) => {
+              const rect = e.currentTarget.getBoundingClientRect();
+              const parentRect = e.currentTarget.parentElement!.getBoundingClientRect();
+              show(
+                rect.left - parentRect.left + rect.width / 2,
+                rect.top - parentRect.top,
+                <div>{val}</div>
+              );
+            }}
+            onMouseLeave={hide}
+          />
+        ))}
+        <HoverTooltip hover={hover} />
+      </div>
+    );
+  }
+);
+
+GridChart.displayName = 'GridChart';

package/registry/components/Chart/GridChart.types.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+
+export type GridChartColor = 'primary' | 'secondary' | 'neutral';
+
+export interface GridChartProps extends HTMLAttributes<HTMLDivElement> {
+  /** 2D array of values (0–1 normalized, or raw — will auto-normalize) */
+  data: number[][];
+  /** Color palette */
+  color?: GridChartColor;
+  /** Cell size in px */
+  cellSize?: number;
+  /** Gap between cells in px */
+  gap?: number;
+}

package/registry/components/Chart/HoverTooltip.module.css

@@ -0,0 +1,16 @@
+.root {
+  position: absolute;
+  z-index: var(--st-z-tooltip);
+  pointer-events: none;
+  transform: translate(-50%, -100%);
+  margin-top: -8px;
+  background-color: var(--st-color-chart-tooltip-bg);
+  color: var(--st-color-chart-tooltip-fg);
+  border-radius: var(--st-radius-lg);
+  padding: var(--st-space-2) var(--st-space-3);
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-xs);
+  white-space: nowrap;
+  box-shadow: var(--st-shadow-lg);
+  line-height: var(--st-line-height-normal);
+}

package/registry/components/Chart/HoverTooltip.tsx

@@ -0,0 +1,22 @@
+import type { HoverState } from './useChartHover';
+import styles from './HoverTooltip.module.css';
+
+interface HoverTooltipProps {
+  hover: HoverState;
+}
+
+export function HoverTooltip({ hover }: HoverTooltipProps) {
+  if (!hover.visible) return null;
+
+  return (
+    <div
+      className={styles.root}
+      style={{
+        left: hover.x,
+        top: hover.y,
+      }}
+    >
+      {hover.content}
+    </div>
+  );
+}

package/registry/components/Chart/KPIIndicator.module.css

@@ -0,0 +1,48 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--st-font-family);
+}
+
+.label {
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-medium);
+  color: var(--st-color-muted);
+  margin-bottom: var(--st-space-1);
+}
+
+.valueRow {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+}
+
+.value {
+  font-weight: var(--st-font-weight-bold);
+  color: var(--st-color-foreground);
+  line-height: var(--st-line-height-tight);
+}
+
+.trend {
+  display: inline-flex;
+}
+
+.description {
+  font-size: var(--st-font-size-sm);
+  color: var(--st-color-muted);
+  margin-top: var(--st-space-1);
+}
+
+/* ─── Sizes ─── */
+
+.sm .value {
+  font-size: var(--st-font-size-xl);
+}
+
+.md .value {
+  font-size: var(--st-font-size-3xl);
+}
+
+.lg .value {
+  font-size: var(--st-font-size-4xl);
+}