@soadtech/cli 0.1.0

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

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type InsightCardVariant = 'light' | 'dark' | 'primary';
+
+export interface InsightCardProps extends HTMLAttributes<HTMLDivElement> {
+  /** Leading icon. */
+  icon?: ReactNode;
+  /** Badge label (e.g. "Insight"). */
+  badge?: string;
+  /** Title text. */
+  title: string;
+  /** Body text. */
+  description?: string;
+  /** Color scheme. */
+  variant?: InsightCardVariant;
+  /** Dismiss handler. */
+  onDismiss?: () => void;
+  /** Apply handler. */
+  onApply?: () => void;
+  /** Dismiss button text. */
+  dismissLabel?: string;
+  /** Apply button text. */
+  applyLabel?: string;
+}

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

@@ -0,0 +1,31 @@
+.root {
+  /* container */
+}
+
+.grid {
+  display: grid;
+}
+
+.item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-1);
+  padding: var(--st-space-4) var(--st-space-5);
+}
+
+.item:not(:last-child) {
+  border-right: 1px solid var(--st-color-border);
+}
+
+.label {
+  font-size: var(--st-font-size-xs);
+  color: var(--st-color-muted);
+  font-weight: var(--st-font-weight-medium);
+}
+
+.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);
+}

package/registry/components/Card/KPICard.tsx

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Card } from './Card';
+import type { KPICardProps } from './KPICard.types';
+import styles from './KPICard.module.css';
+
+export const KPICard = forwardRef<HTMLDivElement, KPICardProps>(
+  ({ items, columns, className, ...rest }, ref) => {
+    const colCount = columns ?? items.length;
+
+    return (
+      <Card ref={ref} className={cn(styles.root, className)} {...rest}>
+        <div
+          className={styles.grid}
+          style={{ gridTemplateColumns: `repeat(${colCount}, 1fr)` }}
+        >
+          {items.map((item) => (
+            <div key={item.label} className={styles.item}>
+              <span className={styles.label}>{item.label}</span>
+              <span className={styles.value}>{item.value}</span>
+            </div>
+          ))}
+        </div>
+      </Card>
+    );
+  }
+);
+
+KPICard.displayName = 'KPICard';

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

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react';
+
+export interface KPIItem {
+  label: string;
+  value: string | number;
+}
+
+export interface KPICardProps extends HTMLAttributes<HTMLDivElement> {
+  /** KPI items to display. */
+  items: KPIItem[];
+  /** Grid columns (defaults to items.length). */
+  columns?: number;
+}

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

@@ -0,0 +1,59 @@
+.root {
+  /* container */
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-3);
+  padding: var(--st-space-3) var(--st-space-5);
+}
+
+.item:not(:last-child) {
+  border-bottom: 1px solid var(--st-color-border);
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--st-color-muted);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-0);
+  min-width: 0;
+  flex: 1;
+}
+
+.itemTitle {
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-medium);
+  color: var(--st-color-foreground);
+}
+
+.itemDescription {
+  font-size: var(--st-font-size-xs);
+  color: var(--st-color-muted);
+}
+
+.value {
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.action {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}

package/registry/components/Card/ListItemCard.tsx

@@ -0,0 +1,37 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Card } from './Card';
+import { CardHeader } from './CardHeader';
+import type { ListItemCardProps } from './ListItemCard.types';
+import styles from './ListItemCard.module.css';
+
+export const ListItemCard = forwardRef<HTMLDivElement, ListItemCardProps>(
+  ({ title, action, items, className, ...rest }, ref) => {
+    return (
+      <Card ref={ref} className={cn(styles.root, className)} {...rest}>
+        {title && <CardHeader title={title} action={action} border />}
+        <div className={styles.list}>
+          {items.map((item, i) => (
+            <div key={i} className={styles.item}>
+              {item.icon && <span className={styles.icon}>{item.icon}</span>}
+              <div className={styles.content}>
+                <span className={styles.itemTitle}>{item.title}</span>
+                {item.description && (
+                  <span className={styles.itemDescription}>
+                    {item.description}
+                  </span>
+                )}
+              </div>
+              {item.value && <span className={styles.value}>{item.value}</span>}
+              {item.action && (
+                <span className={styles.action}>{item.action}</span>
+              )}
+            </div>
+          ))}
+        </div>
+      </Card>
+    );
+  }
+);
+
+ListItemCard.displayName = 'ListItemCard';

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

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface ListItem {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  value?: ReactNode;
+  action?: ReactNode;
+}
+
+export interface ListItemCardProps extends HTMLAttributes<HTMLDivElement> {
+  /** Card header title. */
+  title?: string;
+  /** Header action. */
+  action?: ReactNode;
+  /** List items. */
+  items: ListItem[];
+}

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

@@ -0,0 +1,125 @@
+.root {
+  padding: var(--st-space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-5);
+}
+
+.recommended {
+  border-color: var(--st-color-primary);
+  border-width: 2px;
+}
+
+/* ── Header ── */
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-1);
+}
+
+.titleRow {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--st-color-primary);
+}
+
+.title {
+  font-size: var(--st-font-size-lg);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+}
+
+.badge {
+  display: inline-flex;
+  align-self: flex-start;
+  padding: var(--st-space-1) var(--st-space-2);
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-primary-subtle);
+  color: var(--st-color-primary);
+  font-size: var(--st-font-size-xs);
+  font-weight: var(--st-font-weight-medium);
+}
+
+.currentLabel {
+  font-size: var(--st-font-size-xs);
+  color: var(--st-color-muted);
+  font-weight: var(--st-font-weight-medium);
+}
+
+.description {
+  font-size: var(--st-font-size-sm);
+  color: var(--st-color-muted);
+  line-height: var(--st-line-height-normal);
+}
+
+/* ── Pricing ── */
+
+.pricing {
+  display: flex;
+  align-items: baseline;
+  gap: var(--st-space-1);
+}
+
+.price {
+  font-size: var(--st-font-size-3xl);
+  font-weight: var(--st-font-weight-bold);
+  color: var(--st-color-foreground);
+  line-height: var(--st-line-height-tight);
+}
+
+.period {
+  font-size: var(--st-font-size-sm);
+  color: var(--st-color-muted);
+}
+
+/* ── Features ── */
+
+.features {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-2);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.feature {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  font-size: var(--st-font-size-sm);
+  color: var(--st-color-foreground);
+}
+
+.excluded {
+  color: var(--st-color-muted);
+}
+
+.featureIcon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--st-color-success);
+}
+
+.excluded .featureIcon {
+  color: var(--st-color-neutral-400);
+}
+
+/* ── Action ── */
+
+.action {
+  margin-top: auto;
+}
+
+.cta {
+  width: 100%;
+}

package/registry/components/Card/PlanCard.tsx

@@ -0,0 +1,108 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Card } from './Card';
+import { Button } from '../Button/Button';
+import type { PlanCardProps } from './PlanCard.types';
+import styles from './PlanCard.module.css';
+
+function CheckIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M3 8.5L6.5 12L13 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function CrossIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M4 4L12 12M12 4L4 12"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const PlanCard = forwardRef<HTMLDivElement, PlanCardProps>(
+  (
+    {
+      icon,
+      title,
+      description,
+      price,
+      period,
+      features,
+      recommended = false,
+      current = false,
+      actionLabel,
+      onAction,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <Card
+        ref={ref}
+        className={cn(styles.root, recommended && styles.recommended, className)}
+        {...rest}
+      >
+        <div className={styles.header}>
+          <div className={styles.titleRow}>
+            {icon && <span className={styles.icon}>{icon}</span>}
+            <span className={styles.title}>{title}</span>
+          </div>
+          {recommended && <span className={styles.badge}>Recommended</span>}
+          {current && <span className={styles.currentLabel}>Your Current Plan</span>}
+          {description && <p className={styles.description}>{description}</p>}
+        </div>
+
+        <div className={styles.pricing}>
+          <span className={styles.price}>{price}</span>
+          {period && <span className={styles.period}>{period}</span>}
+        </div>
+
+        {features && features.length > 0 && (
+          <ul className={styles.features}>
+            {features.map((f) => (
+              <li
+                key={f.text}
+                className={cn(styles.feature, !f.included && styles.excluded)}
+              >
+                <span className={styles.featureIcon}>
+                  {f.included ? <CheckIcon /> : <CrossIcon />}
+                </span>
+                <span>{f.text}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {actionLabel && (
+          <div className={styles.action}>
+            <Button
+              variant={recommended ? 'fill' : 'outline'}
+              size="md"
+              onClick={onAction}
+              className={styles.cta}
+            >
+              {actionLabel}
+            </Button>
+          </div>
+        )}
+      </Card>
+    );
+  }
+);
+
+PlanCard.displayName = 'PlanCard';

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

@@ -0,0 +1,30 @@
+import type { HTMLAttributes } from 'react';
+import type { ReactNode } from 'react';
+
+export interface PlanCardFeature {
+  text: string;
+  included: boolean;
+}
+
+export interface PlanCardProps extends HTMLAttributes<HTMLDivElement> {
+  /** Plan icon. */
+  icon?: ReactNode;
+  /** Plan name. */
+  title: string;
+  /** Plan description. */
+  description?: string;
+  /** Price display (e.g. "$9.99"). */
+  price: string;
+  /** Billing period (e.g. "/month"). */
+  period?: string;
+  /** Feature list with included/excluded status. */
+  features?: PlanCardFeature[];
+  /** Highlighted border + badge. */
+  recommended?: boolean;
+  /** "Your Current Plan" label. */
+  current?: boolean;
+  /** CTA button text. */
+  actionLabel?: string;
+  /** CTA click handler. */
+  onAction?: () => void;
+}

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

@@ -0,0 +1,118 @@
+.root {
+  display: flex;
+  overflow: hidden;
+}
+
+/* ── Layouts ── */
+
+.vertical {
+  flex-direction: column;
+}
+
+.horizontal {
+  flex-direction: row;
+}
+
+/* ── Featured ── */
+
+.featured {
+  background: var(--st-color-neutral-900);
+  color: #ffffff;
+  border-color: var(--st-color-neutral-800);
+}
+
+/* ── Image ── */
+
+.imageWrap {
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.vertical .imageWrap {
+  aspect-ratio: 16 / 10;
+}
+
+.horizontal .imageWrap {
+  width: 200px;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.badges {
+  position: absolute;
+  top: var(--st-space-3);
+  left: var(--st-space-3);
+  display: flex;
+  gap: var(--st-space-1);
+}
+
+/* ── Body ── */
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-3);
+  padding: var(--st-space-4);
+  flex: 1;
+  min-width: 0;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-1);
+}
+
+.title {
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+  line-height: var(--st-line-height-tight);
+}
+
+.featured .title {
+  color: #ffffff;
+}
+
+.description {
+  font-size: var(--st-font-size-sm);
+  color: var(--st-color-muted);
+  line-height: var(--st-line-height-normal);
+  margin: 0;
+}
+
+.featured .description {
+  color: var(--st-color-neutral-400);
+}
+
+/* ── Footer ── */
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--st-space-2);
+  margin-top: auto;
+}
+
+.price {
+  font-size: var(--st-font-size-md);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+}
+
+.featured .price {
+  color: #ffffff;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+}

package/registry/components/Card/ProductCard.tsx

@@ -0,0 +1,56 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Card } from './Card';
+import type { ProductCardProps } from './ProductCard.types';
+import styles from './ProductCard.module.css';
+
+export const ProductCard = forwardRef<HTMLDivElement, ProductCardProps>(
+  (
+    {
+      image,
+      imageAlt = '',
+      title,
+      description,
+      price,
+      badges,
+      layout = 'vertical',
+      featured = false,
+      actions,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <Card
+        ref={ref}
+        className={cn(
+          styles.root,
+          styles[layout],
+          featured && styles.featured,
+          className
+        )}
+        {...rest}
+      >
+        {image && (
+          <div className={styles.imageWrap}>
+            <img src={image} alt={imageAlt} className={styles.image} />
+            {badges && <div className={styles.badges}>{badges}</div>}
+          </div>
+        )}
+        <div className={styles.body}>
+          <div className={styles.info}>
+            <span className={styles.title}>{title}</span>
+            {description && <p className={styles.description}>{description}</p>}
+          </div>
+          <div className={styles.footer}>
+            {price && <span className={styles.price}>{price}</span>}
+            {actions && <div className={styles.actions}>{actions}</div>}
+          </div>
+        </div>
+      </Card>
+    );
+  }
+);
+
+ProductCard.displayName = 'ProductCard';

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

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type ProductCardLayout = 'vertical' | 'horizontal';
+
+export interface ProductCardProps extends HTMLAttributes<HTMLDivElement> {
+  /** Product image URL. */
+  image?: string;
+  /** Image alt text. */
+  imageAlt?: string;
+  /** Product name. */
+  title: string;
+  /** Product description. */
+  description?: string;
+  /** Price text. */
+  price?: string;
+  /** Badge/tag elements. */
+  badges?: ReactNode;
+  /** Image position layout. */
+  layout?: ProductCardLayout;
+  /** Dark background variant. */
+  featured?: boolean;
+  /** Action buttons/icons. */
+  actions?: ReactNode;
+}

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

@@ -0,0 +1,20 @@
+.root {
+  /* container */
+}
+
+.metric {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+}
+
+.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);
+}
+
+.chart {
+  margin-top: var(--st-space-4);
+}