@soadtech/cli 0.1.0

package/registry/components/Chart/chart.utils.ts

@@ -0,0 +1,131 @@
+/** Linear interpolation */
+export function lerp(a: number, b: number, t: number): number {
+  return a + (b - a) * t;
+}
+
+/** Compute nice axis scale — returns array of tick values */
+export function niceScale(min: number, max: number, maxTicks = 5): number[] {
+  if (min === max) return [min];
+  const range = max - min;
+  const roughStep = range / (maxTicks - 1);
+  const magnitude = Math.pow(10, Math.floor(Math.log10(roughStep)));
+  const residual = roughStep / magnitude;
+  let niceStep: number;
+  if (residual <= 1.5) niceStep = magnitude;
+  else if (residual <= 3) niceStep = 2 * magnitude;
+  else if (residual <= 7) niceStep = 5 * magnitude;
+  else niceStep = 10 * magnitude;
+
+  const niceMin = Math.floor(min / niceStep) * niceStep;
+  const niceMax = Math.ceil(max / niceStep) * niceStep;
+  const ticks: number[] = [];
+  for (let v = niceMin; v <= niceMax + niceStep * 0.5; v += niceStep) {
+    ticks.push(Math.round(v * 1e10) / 1e10);
+  }
+  return ticks;
+}
+
+/** Convert data points to a smooth SVG path using Catmull-Rom → cubic bezier */
+export function smoothPath(
+  points: { x: number; y: number }[],
+  tension = 0.3
+): string {
+  if (points.length < 2) return '';
+  if (points.length === 2) {
+    return `M${points[0].x},${points[0].y}L${points[1].x},${points[1].y}`;
+  }
+
+  let d = `M${points[0].x},${points[0].y}`;
+
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[Math.max(0, i - 1)];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[Math.min(points.length - 1, i + 2)];
+
+    const cp1x = p1.x + ((p2.x - p0.x) * tension) / 3;
+    const cp1y = p1.y + ((p2.y - p0.y) * tension) / 3;
+    const cp2x = p2.x - ((p3.x - p1.x) * tension) / 3;
+    const cp2y = p2.y - ((p3.y - p1.y) * tension) / 3;
+
+    d += `C${cp1x},${cp1y},${cp2x},${cp2y},${p2.x},${p2.y}`;
+  }
+
+  return d;
+}
+
+/** Create area path by closing a line path to the bottom */
+export function areaPath(
+  linePath: string,
+  bottomY: number,
+  startX: number,
+  endX: number
+): string {
+  return `${linePath}L${endX},${bottomY}L${startX},${bottomY}Z`;
+}
+
+/** Create a donut arc path segment */
+export function donutArc(
+  cx: number,
+  cy: number,
+  outerR: number,
+  innerR: number,
+  startAngle: number,
+  endAngle: number
+): string {
+  const gap = 0.02; // small gap between segments
+  const sa = startAngle + gap;
+  const ea = endAngle - gap;
+  if (ea <= sa) return '';
+
+  const cos = Math.cos;
+  const sin = Math.sin;
+
+  const ox1 = cx + outerR * cos(sa);
+  const oy1 = cy + outerR * sin(sa);
+  const ox2 = cx + outerR * cos(ea);
+  const oy2 = cy + outerR * sin(ea);
+  const ix1 = cx + innerR * cos(ea);
+  const iy1 = cy + innerR * sin(ea);
+  const ix2 = cx + innerR * cos(sa);
+  const iy2 = cy + innerR * sin(sa);
+
+  const largeArc = ea - sa > Math.PI ? 1 : 0;
+
+  return [
+    `M${ox1},${oy1}`,
+    `A${outerR},${outerR},0,${largeArc},1,${ox2},${oy2}`,
+    `L${ix1},${iy1}`,
+    `A${innerR},${innerR},0,${largeArc},0,${ix2},${iy2}`,
+    'Z',
+  ].join('');
+}
+
+/** Normalize segment values to fractions summing to 1 */
+export function normalizeSegments(values: number[]): number[] {
+  const total = values.reduce((s, v) => s + v, 0);
+  if (total === 0) return values.map(() => 0);
+  return values.map((v) => v / total);
+}
+
+/** Create a bar path with only top corners rounded */
+export function roundedBarPath(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: number
+): string {
+  if (height <= 0) return '';
+  const r = Math.min(radius, width / 2, height);
+  const bottom = y + height;
+  return [
+    `M${x},${bottom}`,
+    `L${x},${y + r}`,
+    `A${r},${r},0,0,1,${x + r},${y}`,
+    `L${x + width - r},${y}`,
+    `A${r},${r},0,0,1,${x + width},${y + r}`,
+    `L${x + width},${bottom}`,
+    'Z',
+  ].join('');
+}

package/registry/components/Chart/index.ts

@@ -0,0 +1,47 @@
+export { BarChart } from './BarChart';
+export type { BarChartProps, BarChartDataPoint } from './BarChart.types';
+
+export { LineChart } from './LineChart';
+export type { LineChartProps, LineChartDataPoint } from './LineChart.types';
+
+export { DonutChart } from './DonutChart';
+export type { DonutChartProps, DonutChartSegment } from './DonutChart.types';
+
+export { ProgressChart } from './ProgressChart';
+export type {
+  ProgressChartProps,
+  ProgressChartSegment,
+  ProgressChartColor,
+} from './ProgressChart.types';
+
+export { GridChart } from './GridChart';
+export type { GridChartProps, GridChartColor } from './GridChart.types';
+
+export { TrendLineChart } from './TrendLineChart';
+export type {
+  TrendLineChartProps,
+  TrendLineChartColor,
+} from './TrendLineChart.types';
+
+export { KPIIndicator } from './KPIIndicator';
+export type { KPIIndicatorProps, KPIIndicatorSize } from './KPIIndicator.types';
+
+export { LegendLabel, LegendGroup } from './ChartLegend';
+export type {
+  LegendLabelProps,
+  LegendLabelVariant,
+  LegendGroupProps,
+} from './ChartLegend.types';
+
+export { ChartAction } from './ChartAction';
+export type {
+  ChartActionProps,
+  ChartActionTab,
+} from './ChartAction.types';
+
+export { ChartTooltip } from './ChartTooltip';
+export type {
+  ChartTooltipProps,
+  ChartTooltipItem,
+  ChartTooltipVariant,
+} from './ChartTooltip.types';

package/registry/components/Chart/useChartHover.ts

@@ -0,0 +1,24 @@
+import { useState, useCallback, type ReactNode } from 'react';
+
+export interface HoverState {
+  visible: boolean;
+  x: number;
+  y: number;
+  content: ReactNode;
+}
+
+const INITIAL: HoverState = { visible: false, x: 0, y: 0, content: null };
+
+export function useChartHover() {
+  const [hover, setHover] = useState<HoverState>(INITIAL);
+
+  const show = useCallback(
+    (x: number, y: number, content: ReactNode) =>
+      setHover({ visible: true, x, y, content }),
+    []
+  );
+
+  const hide = useCallback(() => setHover(INITIAL), []);
+
+  return { hover, show, hide } as const;
+}

package/registry/components/Checkbox/Checkbox.module.css

@@ -0,0 +1,101 @@
+/* ─── Root ─── */
+.root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* ─── Sizes ─── */
+.md {
+  width: 20px;
+  height: 20px;
+}
+
+.sm {
+  width: 16px;
+  height: 16px;
+}
+
+/* ─── Hidden native input ─── */
+.input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+
+/* ─── Visual box ─── */
+.box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border: 1.5px solid var(--st-color-neutral-300);
+  border-radius: var(--st-radius-sm);
+  background-color: var(--st-color-background);
+  color: var(--st-color-success-foreground);
+  transition:
+    background-color var(--st-transition-fast),
+    border-color var(--st-transition-fast),
+    box-shadow var(--st-transition-fast);
+}
+
+/* ─── Check / indeterminate icon ─── */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity var(--st-transition-fast);
+}
+
+/* ─── Checked state ─── */
+.root:has(.input:checked) .box,
+.root:has(.input:indeterminate) .box {
+  background-color: var(--st-color-success);
+  border-color: var(--st-color-success);
+}
+
+.root:has(.input:checked) .icon,
+.root:has(.input:indeterminate) .icon {
+  opacity: 1;
+}
+
+/* ─── Hover ─── */
+.root:not(.disabled):not(.readOnly):has(.input:hover) .box {
+  border-color: var(--st-color-neutral-400);
+}
+
+.root:not(.disabled):not(.readOnly):has(.input:checked:hover) .box,
+.root:not(.disabled):not(.readOnly):has(.input:indeterminate:hover) .box {
+  background-color: var(--st-color-success-hover);
+  border-color: var(--st-color-success-hover);
+}
+
+/* ─── Focus ─── */
+.root:has(.input:focus-visible) .box {
+  box-shadow: 0 0 0 2px var(--st-color-success);
+}
+
+/* ─── Disabled ─── */
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ─── Read-only ─── */
+.readOnly .input {
+  cursor: default;
+}
+
+.readOnly .box {
+  border-color: var(--st-color-neutral-200);
+}

package/registry/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,100 @@
+import { forwardRef, useEffect, useRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { CheckboxProps } from './Checkbox.types';
+import styles from './Checkbox.module.css';
+
+function CheckIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+      <path
+        d="M2.5 6L5 8.5L9.5 3.5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function IndeterminateIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+      <path
+        d="M2.5 6H9.5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {
+      indeterminate = false,
+      readOnly = false,
+      size = 'md',
+      disabled = false,
+      checked,
+      defaultChecked,
+      onCheckedChange,
+      onChange,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const internalRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+      const el =
+        (ref as React.RefObject<HTMLInputElement | null>)?.current ??
+        internalRef.current;
+      if (el) {
+        el.indeterminate = indeterminate;
+      }
+    }, [indeterminate, ref]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (readOnly) {
+        e.preventDefault();
+        return;
+      }
+      onChange?.(e);
+      onCheckedChange?.(e.target.checked);
+    };
+
+    return (
+      <span
+        className={cn(
+          styles.root,
+          styles[size],
+          disabled && styles.disabled,
+          readOnly && styles.readOnly,
+          className,
+        )}
+      >
+        <input
+          ref={ref ?? internalRef}
+          type="checkbox"
+          className={styles.input}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          disabled={disabled}
+          readOnly={readOnly}
+          onChange={handleChange}
+          {...rest}
+        />
+        <span className={styles.box}>
+          <span className={styles.icon}>
+            {indeterminate ? <IndeterminateIcon /> : <CheckIcon />}
+          </span>
+        </span>
+      </span>
+    );
+  },
+);
+
+Checkbox.displayName = 'Checkbox';

package/registry/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,11 @@
+import type { InputHTMLAttributes } from 'react';
+
+export type CheckboxSize = 'md' | 'sm';
+
+export interface CheckboxProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+  indeterminate?: boolean;
+  readOnly?: boolean;
+  size?: CheckboxSize;
+  onCheckedChange?: (checked: boolean) => void;
+}

package/registry/components/Checkbox/CheckboxField.module.css

@@ -0,0 +1,69 @@
+/* ─── Root ─── */
+.root {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--st-space-2);
+  cursor: pointer;
+  user-select: none;
+}
+
+/* ─── Content ─── */
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-0);
+  padding-top: 1px;
+}
+
+/* ─── Label ─── */
+.label {
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-medium);
+  line-height: var(--st-line-height-tight);
+  color: var(--st-color-foreground);
+}
+
+/* ─── Description ─── */
+.description {
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-xs);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-muted);
+}
+
+/* ─── Card variant ─── */
+.card {
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-xl);
+  padding: var(--st-space-3) var(--st-space-4);
+  transition:
+    border-color var(--st-transition-fast),
+    background-color var(--st-transition-fast);
+}
+
+.card:hover:not(.disabled):not(.readOnly) {
+  border-color: var(--st-color-border-strong);
+}
+
+.card:has(input:checked),
+.card:has(input:indeterminate) {
+  border-color: var(--st-color-success);
+}
+
+.card:has(input:focus-visible) {
+  border-color: var(--st-color-success);
+  box-shadow: 0 0 0 2px var(--st-color-success);
+}
+
+/* ─── Disabled ─── */
+.disabled {
+  opacity: 0.5;
+  cursor: default;
+  pointer-events: none;
+}
+
+/* ─── Read-only ─── */
+.readOnly {
+  cursor: default;
+}

package/registry/components/Checkbox/CheckboxField.tsx

@@ -0,0 +1,54 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Checkbox } from './Checkbox';
+import { useCheckboxGroup } from './CheckboxGroupContext';
+import type { CheckboxFieldProps } from './CheckboxField.types';
+import styles from './CheckboxField.module.css';
+
+export const CheckboxField = forwardRef<HTMLInputElement, CheckboxFieldProps>(
+  (
+    {
+      label,
+      description,
+      variant = 'default',
+      disabled = false,
+      readOnly = false,
+      size,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const group = useCheckboxGroup();
+    const isDisabled = disabled || group?.disabled || false;
+    const isReadOnly = readOnly || group?.readOnly || false;
+
+    return (
+      <label
+        className={cn(
+          styles.root,
+          styles[variant],
+          isDisabled && styles.disabled,
+          isReadOnly && styles.readOnly,
+          className,
+        )}
+      >
+        <Checkbox
+          ref={ref}
+          disabled={isDisabled}
+          readOnly={isReadOnly}
+          size={size}
+          {...rest}
+        />
+        <span className={styles.content}>
+          <span className={styles.label}>{label}</span>
+          {description && (
+            <span className={styles.description}>{description}</span>
+          )}
+        </span>
+      </label>
+    );
+  },
+);
+
+CheckboxField.displayName = 'CheckboxField';

package/registry/components/Checkbox/CheckboxField.types.ts

@@ -0,0 +1,9 @@
+import type { CheckboxProps } from './Checkbox.types';
+
+export type CheckboxFieldVariant = 'default' | 'card';
+
+export interface CheckboxFieldProps extends CheckboxProps {
+  label: string;
+  description?: string;
+  variant?: CheckboxFieldVariant;
+}

package/registry/components/Checkbox/CheckboxGroup.module.css

@@ -0,0 +1,41 @@
+/* ─── Root ─── */
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-3);
+}
+
+/* ─── Group label ─── */
+.label {
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-semibold);
+  line-height: var(--st-line-height-tight);
+  color: var(--st-color-foreground);
+}
+
+/* ─── Items container ─── */
+.items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-3);
+}
+
+/* ─── Helper text ─── */
+.helperText {
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-xs);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-muted);
+}
+
+/* ─── Error ─── */
+.error {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--st-space-1);
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-xs);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-error);
+}

package/registry/components/Checkbox/CheckboxGroup.tsx

@@ -0,0 +1,60 @@
+import { forwardRef, useMemo } from 'react';
+import { cn } from '../../utils/cn';
+import { CheckboxGroupContext } from './CheckboxGroupContext';
+import type { CheckboxGroupProps } from './CheckboxGroup.types';
+import styles from './CheckboxGroup.module.css';
+
+export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  (
+    {
+      label,
+      helperText,
+      error,
+      disabled = false,
+      readOnly = false,
+      children,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const ctx = useMemo(
+      () => ({ disabled, readOnly }),
+      [disabled, readOnly],
+    );
+
+    return (
+      <CheckboxGroupContext.Provider value={ctx}>
+        <div
+          ref={ref}
+          role="group"
+          aria-label={label}
+          className={cn(styles.root, className)}
+          {...rest}
+        >
+          {label && <span className={styles.label}>{label}</span>}
+          <div className={styles.items}>{children}</div>
+          {error && (
+            <span className={styles.error}>
+              <svg
+                width="8"
+                height="8"
+                viewBox="0 0 8 8"
+                fill="none"
+                aria-hidden="true"
+              >
+                <circle cx="4" cy="4" r="4" fill="currentColor" />
+              </svg>
+              {error}
+            </span>
+          )}
+          {!error && helperText && (
+            <span className={styles.helperText}>{helperText}</span>
+          )}
+        </div>
+      </CheckboxGroupContext.Provider>
+    );
+  },
+);
+
+CheckboxGroup.displayName = 'CheckboxGroup';

package/registry/components/Checkbox/CheckboxGroup.types.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface CheckboxGroupProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  label?: string;
+  helperText?: string;
+  error?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  children: ReactNode;
+}

package/registry/components/Checkbox/CheckboxGroupContext.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+export interface CheckboxGroupContextValue {
+  disabled: boolean;
+  readOnly: boolean;
+}
+
+export const CheckboxGroupContext =
+  createContext<CheckboxGroupContextValue | null>(null);
+
+export function useCheckboxGroup(): CheckboxGroupContextValue | null {
+  return useContext(CheckboxGroupContext);
+}

package/registry/components/Checkbox/index.ts

@@ -0,0 +1,11 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps, CheckboxSize } from './Checkbox.types';
+
+export { CheckboxField } from './CheckboxField';
+export type {
+  CheckboxFieldProps,
+  CheckboxFieldVariant,
+} from './CheckboxField.types';
+
+export { CheckboxGroup } from './CheckboxGroup';
+export type { CheckboxGroupProps } from './CheckboxGroup.types';