@soadtech/cli 0.1.0

package/registry/components/Chart/KPIIndicator.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { KPIIndicatorProps } from './KPIIndicator.types';
+import styles from './KPIIndicator.module.css';
+
+export const KPIIndicator = forwardRef<HTMLDivElement, KPIIndicatorProps>(
+  (
+    { value, label, trend, description, size = 'md', className, ...rest },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(styles.root, styles[size], className)}
+        {...rest}
+      >
+        {label && <span className={styles.label}>{label}</span>}
+        <div className={styles.valueRow}>
+          <span className={styles.value}>{value}</span>
+          {trend && <span className={styles.trend}>{trend}</span>}
+        </div>
+        {description && <span className={styles.description}>{description}</span>}
+      </div>
+    );
+  }
+);
+
+KPIIndicator.displayName = 'KPIIndicator';

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

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type KPIIndicatorSize = 'sm' | 'md' | 'lg';
+
+export interface KPIIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  /** Large display value (e.g. "2,450" or "$12.5k") */
+  value: string;
+  /** Label displayed above the value */
+  label?: string;
+  /** Trend badge element (e.g. <TrendBadge />) */
+  trend?: ReactNode;
+  /** Description text below the value */
+  description?: string;
+  /** Size variant */
+  size?: KPIIndicatorSize;
+}

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

@@ -0,0 +1,54 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-3);
+  font-family: var(--st-font-family);
+}
+
+.legend {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr auto;
+  gap: var(--st-space-2);
+}
+
+.yAxis {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  text-align: right;
+  padding-right: var(--st-space-2);
+}
+
+.yLabel {
+  font-size: var(--st-font-size-xs);
+  color: var(--st-color-chart-axis);
+  line-height: 1;
+}
+
+.chartArea {
+  position: relative;
+  width: 100%;
+}
+
+.chartArea svg {
+  display: block;
+  width: 100%;
+}
+
+.xAxis {
+  display: flex;
+  justify-content: space-between;
+  padding-top: var(--st-space-2);
+}
+
+.xLabel {
+  font-size: var(--st-font-size-xs);
+  color: var(--st-color-chart-axis);
+  text-align: center;
+}

package/registry/components/Chart/LineChart.tsx

@@ -0,0 +1,282 @@
+import { forwardRef, useMemo, useRef, useEffect, useState, useId } from 'react';
+import { cn } from '../../utils/cn';
+import { niceScale, smoothPath, areaPath } from './chart.utils';
+import { useChartHover } from './useChartHover';
+import { HoverTooltip } from './HoverTooltip';
+import type { LineChartProps } from './LineChart.types';
+import styles from './LineChart.module.css';
+
+function buildLinePath(
+  values: number[],
+  chartWidth: number,
+  chartHeight: number,
+  scaleMax: number,
+  smooth: boolean
+): { points: { x: number; y: number }[]; path: string } {
+  const points = values.map((v, i) => ({
+    x: (i / (values.length - 1)) * chartWidth,
+    y: chartHeight - (scaleMax > 0 ? (v / scaleMax) * chartHeight : 0),
+  }));
+  const path = smooth
+    ? smoothPath(points)
+    : `M${points.map((p) => `${p.x},${p.y}`).join('L')}`;
+  return { points, path };
+}
+
+export const LineChart = forwardRef<HTMLDivElement, LineChartProps>(
+  (
+    {
+      data,
+      comparison = false,
+      smooth = true,
+      areaFill = true,
+      height = 200,
+      legend,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const chartRef = useRef<HTMLDivElement>(null);
+    const [chartWidth, setChartWidth] = useState(0);
+    const gradId1 = useId();
+    const gradId2 = useId();
+    const { hover, show, hide } = useChartHover();
+    const [activeIdx, setActiveIdx] = useState<number | null>(null);
+
+    useEffect(() => {
+      if (!chartRef.current) return;
+      const ro = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          setChartWidth(entry.contentRect.width);
+        }
+      });
+      ro.observe(chartRef.current);
+      return () => ro.disconnect();
+    }, []);
+
+    const allValues = useMemo(() => {
+      const vals = data.map((d) => d.value);
+      if (comparison) vals.push(...data.map((d) => d.compareValue ?? 0));
+      return vals;
+    }, [data, comparison]);
+
+    const maxVal = Math.max(...allValues, 0);
+    const ticks = niceScale(0, maxVal);
+    const scaleMax = ticks[ticks.length - 1];
+
+    const primary = useMemo(
+      () =>
+        chartWidth > 0
+          ? buildLinePath(data.map((d) => d.value), chartWidth, height, scaleMax, smooth)
+          : null,
+      [data, chartWidth, height, scaleMax, smooth]
+    );
+
+    const secondary = useMemo(
+      () =>
+        comparison && chartWidth > 0
+          ? buildLinePath(
+              data.map((d) => d.compareValue ?? 0),
+              chartWidth,
+              height,
+              scaleMax,
+              smooth
+            )
+          : null,
+      [data, comparison, chartWidth, height, scaleMax, smooth]
+    );
+
+    const slotWidth = chartWidth > 0 && data.length > 1 ? chartWidth / (data.length - 1) : chartWidth;
+
+    return (
+      <div ref={ref} className={cn(styles.root, className)} {...rest}>
+        {legend && <div className={styles.legend}>{legend}</div>}
+        <div className={styles.grid}>
+          {/* Y-axis */}
+          <div className={styles.yAxis} style={{ height }}>
+            {[...ticks].reverse().map((tick, i) => (
+              <span key={i} className={styles.yLabel}>
+                {tick >= 1000
+                  ? `${(tick / 1000).toFixed(tick % 1000 === 0 ? 0 : 1)}k`
+                  : tick}
+              </span>
+            ))}
+          </div>
+
+          {/* Chart area */}
+          <div ref={chartRef} className={styles.chartArea} style={{ height }}>
+            {chartWidth > 0 && primary && (
+              <svg
+                width={chartWidth}
+                height={height}
+                viewBox={`0 0 ${chartWidth} ${height}`}
+              >
+                <defs>
+                  <linearGradient id={gradId1} x1="0" y1="0" x2="0" y2="1">
+                    <stop
+                      offset="0%"
+                      stopColor="var(--st-color-chart-1)"
+                      stopOpacity="0.3"
+                    />
+                    <stop
+                      offset="100%"
+                      stopColor="var(--st-color-chart-1-subtle)"
+                      stopOpacity="0"
+                    />
+                  </linearGradient>
+                  <linearGradient id={gradId2} x1="0" y1="0" x2="0" y2="1">
+                    <stop
+                      offset="0%"
+                      stopColor="var(--st-color-chart-2)"
+                      stopOpacity="0.3"
+                    />
+                    <stop
+                      offset="100%"
+                      stopColor="var(--st-color-chart-2-subtle)"
+                      stopOpacity="0"
+                    />
+                  </linearGradient>
+                </defs>
+
+                {/* Grid lines */}
+                {ticks.map((_, i) => {
+                  const y =
+                    height - (i / (ticks.length - 1)) * height;
+                  return (
+                    <line
+                      key={i}
+                      x1={0}
+                      y1={y}
+                      x2={chartWidth}
+                      y2={y}
+                      stroke="var(--st-color-chart-grid)"
+                      strokeWidth="1"
+                    />
+                  );
+                })}
+
+                {/* Secondary area + line */}
+                {secondary && areaFill && (
+                  <path
+                    d={areaPath(
+                      secondary.path,
+                      height,
+                      secondary.points[0].x,
+                      secondary.points[secondary.points.length - 1].x
+                    )}
+                    fill={`url(#${gradId2})`}
+                  />
+                )}
+                {secondary && (
+                  <path
+                    d={secondary.path}
+                    fill="none"
+                    stroke="var(--st-color-chart-2)"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                  />
+                )}
+
+                {/* Primary area + line */}
+                {areaFill && (
+                  <path
+                    d={areaPath(
+                      primary.path,
+                      height,
+                      primary.points[0].x,
+                      primary.points[primary.points.length - 1].x
+                    )}
+                    fill={`url(#${gradId1})`}
+                  />
+                )}
+                <path
+                  d={primary.path}
+                  fill="none"
+                  stroke="var(--st-color-chart-1)"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                />
+
+                {/* Dots + active highlight */}
+                {primary.points.map((p, i) => (
+                  <circle
+                    key={i}
+                    cx={p.x}
+                    cy={p.y}
+                    r={activeIdx === i ? 5 : 3}
+                    fill="var(--st-color-chart-1)"
+                    stroke={activeIdx === i ? 'var(--st-color-surface)' : 'none'}
+                    strokeWidth={activeIdx === i ? 2 : 0}
+                  />
+                ))}
+
+                {/* Vertical indicator line */}
+                {activeIdx !== null && primary.points[activeIdx] && (
+                  <line
+                    x1={primary.points[activeIdx].x}
+                    y1={0}
+                    x2={primary.points[activeIdx].x}
+                    y2={height}
+                    stroke="var(--st-color-chart-axis)"
+                    strokeWidth="1"
+                    strokeDasharray="4 3"
+                    opacity="0.5"
+                  />
+                )}
+
+                {/* Invisible hit areas per data point */}
+                {data.map((d, i) => {
+                  const px = primary.points[i]?.x ?? 0;
+                  const py = primary.points[i]?.y ?? 0;
+                  return (
+                    <rect
+                      key={`hit-${i}`}
+                      x={px - slotWidth / 2}
+                      y={0}
+                      width={slotWidth}
+                      height={height}
+                      fill="transparent"
+                      onMouseEnter={() => {
+                        setActiveIdx(i);
+                        const content = comparison && d.compareValue != null ? (
+                          <div>
+                            <div style={{ fontWeight: 600, marginBottom: 2 }}>{d.label}</div>
+                            <div>{d.value}</div>
+                            <div>{d.compareValue}</div>
+                          </div>
+                        ) : (
+                          <div>
+                            <div style={{ fontWeight: 600, marginBottom: 2 }}>{d.label}</div>
+                            <div>{d.value}</div>
+                          </div>
+                        );
+                        show(px, py, content);
+                      }}
+                      onMouseLeave={() => { setActiveIdx(null); hide(); }}
+                    />
+                  );
+                })}
+              </svg>
+            )}
+            <HoverTooltip hover={hover} />
+          </div>
+
+          {/* Spacer */}
+          <div />
+
+          {/* X-axis */}
+          <div className={styles.xAxis}>
+            {data.map((d, i) => (
+              <span key={i} className={styles.xLabel}>
+                {d.label}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+LineChart.displayName = 'LineChart';

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

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface LineChartDataPoint {
+  label: string;
+  value: number;
+  compareValue?: number;
+}
+
+export interface LineChartProps extends HTMLAttributes<HTMLDivElement> {
+  /** Chart data */
+  data: LineChartDataPoint[];
+  /** Show comparison line */
+  comparison?: boolean;
+  /** Use smooth curves (Catmull-Rom) */
+  smooth?: boolean;
+  /** Fill area under the line */
+  areaFill?: boolean;
+  /** Chart height in px */
+  height?: number;
+  /** Legend element */
+  legend?: ReactNode;
+}

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

@@ -0,0 +1,54 @@
+.root {
+  position: relative;
+  width: 100%;
+}
+
+.bar {
+  display: flex;
+  width: 100%;
+  height: var(--pc-height, 8px);
+  border-radius: var(--pc-radius, 4px);
+  overflow: hidden;
+  gap: 2px;
+}
+
+.segment {
+  min-width: 2px;
+  cursor: default;
+}
+
+/* ─── Primary palette ─── */
+
+.primary .seg1 {
+  background-color: var(--st-color-chart-1);
+}
+
+.primary .seg2 {
+  background-color: var(--st-color-chart-1-muted);
+}
+
+.primary .seg3 {
+  background-color: var(--st-color-chart-1-faded);
+}
+
+.primary .seg4 {
+  background-color: var(--st-color-chart-1-subtle);
+}
+
+/* ─── Secondary palette ─── */
+
+.secondary .seg1 {
+  background-color: var(--st-color-chart-2);
+}
+
+.secondary .seg2 {
+  background-color: var(--st-color-chart-2-muted);
+}
+
+.secondary .seg3 {
+  background-color: var(--st-color-chart-2-faded);
+}
+
+.secondary .seg4 {
+  background-color: var(--st-color-chart-2-subtle);
+}

package/registry/components/Chart/ProgressChart.tsx

@@ -0,0 +1,64 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { normalizeSegments } from './chart.utils';
+import { useChartHover } from './useChartHover';
+import { HoverTooltip } from './HoverTooltip';
+import type { ProgressChartProps } from './ProgressChart.types';
+import styles from './ProgressChart.module.css';
+
+export const ProgressChart = forwardRef<HTMLDivElement, ProgressChartProps>(
+  (
+    {
+      segments,
+      radius = 4,
+      color = 'primary',
+      barHeight = 8,
+      className,
+      style,
+      ...rest
+    },
+    ref
+  ) => {
+    const fractions = normalizeSegments(segments.map((s) => s.value));
+    const { hover, show, hide } = useChartHover();
+
+    return (
+      <div
+        ref={ref}
+        className={cn(styles.root, styles[color], className)}
+        style={
+          {
+            '--pc-height': `${barHeight}px`,
+            '--pc-radius': `${radius}px`,
+            ...style,
+          } as React.CSSProperties
+        }
+        role="meter"
+        {...rest}
+      >
+        <div className={styles.bar}>
+          {fractions.map((frac, i) => (
+            <div
+              key={i}
+              className={cn(styles.segment, styles[`seg${i + 1}`])}
+              style={{ flex: frac }}
+              onMouseEnter={(e) => {
+                const rect = e.currentTarget.getBoundingClientRect();
+                const rootRect = e.currentTarget.closest(`.${styles.root}`)!.getBoundingClientRect();
+                show(
+                  rect.left - rootRect.left + rect.width / 2,
+                  -4,
+                  <div>{(frac * 100).toFixed(1)}%</div>
+                );
+              }}
+              onMouseLeave={hide}
+            />
+          ))}
+        </div>
+        <HoverTooltip hover={hover} />
+      </div>
+    );
+  }
+);
+
+ProgressChart.displayName = 'ProgressChart';

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

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'react';
+
+export interface ProgressChartSegment {
+  value: number;
+}
+
+export type ProgressChartColor = 'primary' | 'secondary';
+
+export interface ProgressChartProps extends HTMLAttributes<HTMLDivElement> {
+  /** Segments with values (will be normalized to percentages) */
+  segments: ProgressChartSegment[];
+  /** Border radius */
+  radius?: number;
+  /** Color palette */
+  color?: ProgressChartColor;
+  /** Height of the progress bar in px */
+  barHeight?: number;
+}

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

@@ -0,0 +1,5 @@
+.root {
+  position: relative;
+  display: inline-flex;
+  line-height: 0;
+}

package/registry/components/Chart/TrendLineChart.tsx

@@ -0,0 +1,131 @@
+import { forwardRef, useId, useMemo, useState } from 'react';
+import { cn } from '../../utils/cn';
+import { smoothPath, areaPath } from './chart.utils';
+import { useChartHover } from './useChartHover';
+import { HoverTooltip } from './HoverTooltip';
+import type { TrendLineChartProps } from './TrendLineChart.types';
+import styles from './TrendLineChart.module.css';
+
+const COLOR_MAP = {
+  primary: {
+    stroke: 'var(--st-color-chart-1)',
+    fill: 'var(--st-color-chart-1)',
+    fillEnd: 'var(--st-color-chart-1-subtle)',
+  },
+  secondary: {
+    stroke: 'var(--st-color-chart-2)',
+    fill: 'var(--st-color-chart-2)',
+    fillEnd: 'var(--st-color-chart-2-subtle)',
+  },
+} as const;
+
+export const TrendLineChart = forwardRef<HTMLDivElement, TrendLineChartProps>(
+  (
+    {
+      data,
+      color = 'primary',
+      showDots = false,
+      areaFill = true,
+      width = 120,
+      height = 40,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const gradId = useId();
+    const palette = COLOR_MAP[color];
+    const { hover, show, hide } = useChartHover();
+    const [activeIdx, setActiveIdx] = useState<number | null>(null);
+
+    const { points, linePath: line } = useMemo(() => {
+      if (data.length < 2) return { points: [], linePath: '' };
+      const min = Math.min(...data);
+      const max = Math.max(...data);
+      const range = max - min || 1;
+      const pad = 4;
+      const w = width - pad * 2;
+      const h = height - pad * 2;
+
+      const pts = data.map((v, i) => ({
+        x: pad + (i / (data.length - 1)) * w,
+        y: pad + (1 - (v - min) / range) * h,
+      }));
+
+      return { points: pts, linePath: smoothPath(pts) };
+    }, [data, width, height]);
+
+    if (data.length < 2) return null;
+
+    const area = areaFill
+      ? areaPath(line, height - 4, points[0].x, points[points.length - 1].x)
+      : null;
+
+    const slotWidth = width / data.length;
+
+    return (
+      <div ref={ref} className={cn(styles.root, className)} {...rest}>
+        <svg
+          width={width}
+          height={height}
+          viewBox={`0 0 ${width} ${height}`}
+          fill="none"
+        >
+          {areaFill && (
+            <defs>
+              <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor={palette.fill} stopOpacity="0.3" />
+                <stop
+                  offset="100%"
+                  stopColor={palette.fillEnd}
+                  stopOpacity="0"
+                />
+              </linearGradient>
+            </defs>
+          )}
+          {area && <path d={area} fill={`url(#${gradId})`} />}
+          <path
+            d={line}
+            stroke={palette.stroke}
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          {/* Dots — always show active, optionally show all */}
+          {points.map((p, i) => (
+            (showDots || activeIdx === i) ? (
+              <circle
+                key={i}
+                cx={p.x}
+                cy={p.y}
+                r={activeIdx === i ? 3.5 : 2.5}
+                fill={palette.stroke}
+                stroke={activeIdx === i ? 'var(--st-color-surface)' : 'none'}
+                strokeWidth={activeIdx === i ? 1.5 : 0}
+              />
+            ) : null
+          ))}
+          {/* Hit areas */}
+          {data.map((val, i) => (
+            <rect
+              key={`hit-${i}`}
+              x={points[i].x - slotWidth / 2}
+              y={0}
+              width={slotWidth}
+              height={height}
+              fill="transparent"
+              onMouseEnter={() => {
+                setActiveIdx(i);
+                show(points[i].x, points[i].y, <div>{val}</div>);
+              }}
+              onMouseLeave={() => { setActiveIdx(null); hide(); }}
+            />
+          ))}
+        </svg>
+        <HoverTooltip hover={hover} />
+      </div>
+    );
+  }
+);
+
+TrendLineChart.displayName = 'TrendLineChart';

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

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'react';
+
+export type TrendLineChartColor = 'primary' | 'secondary';
+
+export interface TrendLineChartProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+  /** Array of numeric data points */
+  data: number[];
+  /** Color palette */
+  color?: TrendLineChartColor;
+  /** Show dots at data points */
+  showDots?: boolean;
+  /** Fill the area under the line */
+  areaFill?: boolean;
+  /** Chart width in px */
+  width?: number;
+  /** Chart height in px */
+  height?: number;
+}