@soadtech/cli 0.1.0

package/registry/components/Card/StatCard.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Card } from './Card';
+import { CardHeader } from './CardHeader';
+import { CardContent } from './CardContent';
+import type { StatCardProps } from './StatCard.types';
+import styles from './StatCard.module.css';
+
+export const StatCard = forwardRef<HTMLDivElement, StatCardProps>(
+  ({ title, value, trend, action, className, children, ...rest }, ref) => {
+    return (
+      <Card ref={ref} className={cn(styles.root, className)} {...rest}>
+        <CardHeader title={title} action={action} />
+        <CardContent>
+          <div className={styles.metric}>
+            <span className={styles.value}>{value}</span>
+            {trend}
+          </div>
+          {children && <div className={styles.chart}>{children}</div>}
+        </CardContent>
+      </Card>
+    );
+  }
+);
+
+StatCard.displayName = 'StatCard';

package/registry/components/Card/StatCard.types.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
+  /** Metric label. */
+  title: string;
+  /** Large metric value. */
+  value: string | number;
+  /** TrendBadge or custom indicator. */
+  trend?: ReactNode;
+  /** Time selector, dropdown, etc. */
+  action?: ReactNode;
+}

package/registry/components/Card/UserGroupCard.module.css

@@ -0,0 +1,50 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-4);
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--st-space-3);
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-1);
+  min-width: 0;
+}
+
+.title {
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+}
+
+.description {
+  font-size: var(--st-font-size-xs);
+  color: var(--st-color-muted);
+  line-height: var(--st-line-height-normal);
+  margin: 0;
+}
+
+.value {
+  font-size: var(--st-font-size-2xl);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+  line-height: var(--st-line-height-tight);
+  flex-shrink: 0;
+}
+
+.media {
+  border-radius: var(--st-radius-lg);
+  overflow: hidden;
+}
+
+.action {
+  display: flex;
+  align-items: center;
+}

package/registry/components/Card/UserGroupCard.tsx

@@ -0,0 +1,59 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Card } from './Card';
+import { Avatar } from '../Avatar/Avatar';
+import { AvatarGroup } from '../Avatar/AvatarGroup';
+import type { UserGroupCardProps } from './UserGroupCard.types';
+import styles from './UserGroupCard.module.css';
+
+export const UserGroupCard = forwardRef<HTMLDivElement, UserGroupCardProps>(
+  (
+    {
+      title,
+      description,
+      value,
+      avatars,
+      avatarLimit,
+      media,
+      action,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <Card
+        ref={ref}
+        className={cn(styles.root, className)}
+        padding="md"
+        {...rest}
+      >
+        {(title || description || value) && (
+          <div className={styles.header}>
+            <div className={styles.text}>
+              {title && <span className={styles.title}>{title}</span>}
+              {description && (
+                <p className={styles.description}>{description}</p>
+              )}
+            </div>
+            {value != null && <span className={styles.value}>{value}</span>}
+          </div>
+        )}
+
+        {media && <div className={styles.media}>{media}</div>}
+
+        {avatars && avatars.length > 0 && (
+          <AvatarGroup size="sm" limit={avatarLimit}>
+            {avatars.map((a, i) => (
+              <Avatar key={i} src={a.src} initials={a.initials} />
+            ))}
+          </AvatarGroup>
+        )}
+
+        {action && <div className={styles.action}>{action}</div>}
+      </Card>
+    );
+  }
+);
+
+UserGroupCard.displayName = 'UserGroupCard';

package/registry/components/Card/UserGroupCard.types.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface UserGroupAvatar {
+  src?: string;
+  initials?: string;
+}
+
+export interface UserGroupCardProps extends HTMLAttributes<HTMLDivElement> {
+  /** Card title. */
+  title?: string;
+  /** Description text. */
+  description?: string;
+  /** Large value display. */
+  value?: string | number;
+  /** Avatar data array. */
+  avatars?: UserGroupAvatar[];
+  /** Max visible avatars. */
+  avatarLimit?: number;
+  /** Image grid or custom content. */
+  media?: ReactNode;
+  /** Action slot. */
+  action?: ReactNode;
+}

package/registry/components/Card/index.ts

@@ -0,0 +1,38 @@
+export { Card } from './Card';
+export { CardHeader } from './CardHeader';
+export { CardContent } from './CardContent';
+export { CardFooter } from './CardFooter';
+export type {
+  CardProps,
+  CardVariant,
+  CardPadding,
+  CardHeaderProps,
+  CardHeaderSize,
+  CardContentProps,
+  CardFooterProps,
+  CardFooterAlign,
+} from './Card.types';
+
+export { StatCard } from './StatCard';
+export type { StatCardProps } from './StatCard.types';
+
+export { PlanCard } from './PlanCard';
+export type { PlanCardProps, PlanCardFeature } from './PlanCard.types';
+
+export { InsightCard } from './InsightCard';
+export type { InsightCardProps, InsightCardVariant } from './InsightCard.types';
+
+export { ProductCard } from './ProductCard';
+export type { ProductCardProps, ProductCardLayout } from './ProductCard.types';
+
+export { KPICard } from './KPICard';
+export type { KPICardProps, KPIItem } from './KPICard.types';
+
+export { ListItemCard } from './ListItemCard';
+export type { ListItemCardProps, ListItem } from './ListItemCard.types';
+
+export { UserGroupCard } from './UserGroupCard';
+export type {
+  UserGroupCardProps,
+  UserGroupAvatar,
+} from './UserGroupCard.types';

package/registry/components/Chart/BarChart.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-around;
+  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/BarChart.tsx

@@ -0,0 +1,196 @@
+import { forwardRef, useMemo, useRef, useEffect, useState, useId } from 'react';
+import { cn } from '../../utils/cn';
+import { niceScale, roundedBarPath } from './chart.utils';
+import { useChartHover } from './useChartHover';
+import { HoverTooltip } from './HoverTooltip';
+import type { BarChartProps } from './BarChart.types';
+import styles from './BarChart.module.css';
+
+export const BarChart = forwardRef<HTMLDivElement, BarChartProps>(
+  (
+    {
+      data,
+      comparison = false,
+      gridLines = true,
+      height = 200,
+      legend,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const chartRef = useRef<HTMLDivElement>(null);
+    const [chartWidth, setChartWidth] = useState(0);
+    const clipId = 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 barPadding = 0.3;
+    const groupWidth = chartWidth / data.length;
+    const barGroupWidth = groupWidth * (1 - barPadding);
+    const barRadius = 3;
+
+    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 && (
+              <svg
+                width={chartWidth}
+                height={height}
+                viewBox={`0 0 ${chartWidth} ${height}`}
+              >
+                <defs>
+                  <clipPath id={clipId}>
+                    <rect width={chartWidth} height={height} />
+                  </clipPath>
+                </defs>
+
+                {/* Grid lines */}
+                {gridLines &&
+                  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"
+                      />
+                    );
+                  })}
+
+                {/* Bars */}
+                <g clipPath={`url(#${clipId})`}>
+                  {data.map((d, i) => {
+                    const cx = groupWidth * i + groupWidth / 2;
+                    const isActive = activeIdx === i;
+
+                    if (comparison && d.compareValue != null) {
+                      const bw = barGroupWidth / 2 - 1;
+                      const h1 = scaleMax > 0 ? (d.value / scaleMax) * height : 0;
+                      const h2 = scaleMax > 0 ? (d.compareValue / scaleMax) * height : 0;
+                      return (
+                        <g key={i}>
+                          <path
+                            d={roundedBarPath(cx - barGroupWidth / 2, height - h1, bw, h1, barRadius)}
+                            fill="var(--st-color-chart-1)"
+                            opacity={isActive ? 1 : 0.85}
+                          />
+                          <path
+                            d={roundedBarPath(cx + 1, height - h2, bw, h2, barRadius)}
+                            fill="var(--st-color-chart-2)"
+                            opacity={isActive ? 1 : 0.85}
+                          />
+                          {/* Hit area */}
+                          <rect
+                            x={groupWidth * i}
+                            y={0}
+                            width={groupWidth}
+                            height={height}
+                            fill="transparent"
+                            onMouseEnter={() => {
+                              setActiveIdx(i);
+                              show(cx, height - Math.max(h1, h2), (
+                                <div>
+                                  <div style={{ fontWeight: 600, marginBottom: 2 }}>{d.label}</div>
+                                  <div>{d.value}</div>
+                                  <div>{d.compareValue}</div>
+                                </div>
+                              ));
+                            }}
+                            onMouseLeave={() => { setActiveIdx(null); hide(); }}
+                          />
+                        </g>
+                      );
+                    }
+
+                    const bw = barGroupWidth;
+                    const h = scaleMax > 0 ? (d.value / scaleMax) * height : 0;
+                    return (
+                      <g key={i}>
+                        <path
+                          d={roundedBarPath(cx - bw / 2, height - h, bw, h, barRadius)}
+                          fill="var(--st-color-chart-1)"
+                          opacity={isActive ? 1 : 0.85}
+                        />
+                        {/* Hit area */}
+                        <rect
+                          x={groupWidth * i}
+                          y={0}
+                          width={groupWidth}
+                          height={height}
+                          fill="transparent"
+                          onMouseEnter={() => {
+                            setActiveIdx(i);
+                            show(cx, height - h, (
+                              <div>
+                                <div style={{ fontWeight: 600, marginBottom: 2 }}>{d.label}</div>
+                                <div>{d.value}</div>
+                              </div>
+                            ));
+                          }}
+                          onMouseLeave={() => { setActiveIdx(null); hide(); }}
+                        />
+                      </g>
+                    );
+                  })}
+                </g>
+              </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>
+    );
+  }
+);
+
+BarChart.displayName = 'BarChart';

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

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface BarChartDataPoint {
+  label: string;
+  value: number;
+  compareValue?: number;
+}
+
+export interface BarChartProps extends HTMLAttributes<HTMLDivElement> {
+  /** Chart data */
+  data: BarChartDataPoint[];
+  /** Show comparison bars */
+  comparison?: boolean;
+  /** Show horizontal grid lines */
+  gridLines?: boolean;
+  /** Chart height in px */
+  height?: number;
+  /** Legend element */
+  legend?: ReactNode;
+}

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

@@ -0,0 +1,43 @@
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--st-space-3);
+  font-family: var(--st-font-family);
+}
+
+.tabs {
+  display: inline-flex;
+  background-color: var(--st-color-neutral-100);
+  border-radius: var(--st-radius-lg);
+  padding: 3px;
+  gap: 2px;
+}
+
+.tab {
+  all: unset;
+  cursor: pointer;
+  padding: var(--st-space-1) var(--st-space-3);
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-medium);
+  color: var(--st-color-muted);
+  border-radius: var(--st-radius-md);
+  transition: all var(--st-transition-fast);
+  white-space: nowrap;
+}
+
+.tab:hover {
+  color: var(--st-color-foreground);
+}
+
+.tab.active {
+  background-color: var(--st-color-surface);
+  color: var(--st-color-foreground);
+  box-shadow: var(--st-shadow-xs);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+}

package/registry/components/Chart/ChartAction.tsx

@@ -0,0 +1,35 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { ChartActionProps } from './ChartAction.types';
+import styles from './ChartAction.module.css';
+
+export const ChartAction = forwardRef<HTMLDivElement, ChartActionProps>(
+  ({ tabs, activeTab, onTabChange, actions, className, ...rest }, ref) => {
+    return (
+      <div ref={ref} className={cn(styles.root, className)} {...rest}>
+        {tabs && tabs.length > 0 && (
+          <div className={styles.tabs} role="tablist">
+            {tabs.map((tab) => (
+              <button
+                key={tab.value}
+                role="tab"
+                aria-selected={activeTab === tab.value}
+                className={cn(
+                  styles.tab,
+                  activeTab === tab.value && styles.active
+                )}
+                onClick={() => onTabChange?.(tab.value)}
+                type="button"
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        )}
+        {actions && <div className={styles.actions}>{actions}</div>}
+      </div>
+    );
+  }
+);
+
+ChartAction.displayName = 'ChartAction';

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

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface ChartActionTab {
+  label: string;
+  value: string;
+}
+
+export interface ChartActionProps extends HTMLAttributes<HTMLDivElement> {
+  /** Segmented tab options */
+  tabs?: ChartActionTab[];
+  /** Currently active tab value */
+  activeTab?: string;
+  /** Tab change callback */
+  onTabChange?: (value: string) => void;
+  /** Slot for action buttons/icons on the right */
+  actions?: ReactNode;
+}

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

@@ -0,0 +1,47 @@
+.root {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr auto;
+  gap: var(--st-space-2);
+  font-family: var(--st-font-family);
+}
+
+.yAxis {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: var(--ca-chart-h);
+  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%;
+  height: var(--ca-chart-h);
+}
+
+.grid {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+.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;
+}