@soadtech/cli 0.1.0

package/registry/components/Calendar/CalendarDialog.tsx

@@ -0,0 +1,173 @@
+import { forwardRef, useState, useCallback } from 'react';
+import { cn } from '../../utils/cn';
+import { Calendar } from './Calendar';
+import { Button } from '../Button/Button';
+import type { CalendarDialogProps, DateRange } from './CalendarDialog.types';
+import styles from './CalendarDialog.module.css';
+
+export const CalendarDialog = forwardRef<HTMLDivElement, CalendarDialogProps>(
+  (
+    {
+      mode = 'basic',
+      defaultValue,
+      defaultRange,
+      headerAlign = 'center',
+      events,
+      minDate,
+      maxDate,
+      onCancel,
+      onDone,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const today = new Date();
+
+    /* ── Basic mode state ── */
+    const [selectedDate, setSelectedDate] = useState<Date | null>(
+      defaultValue ?? null
+    );
+
+    /* ── Range mode state ── */
+    const [rangeStart, setRangeStart] = useState<Date | null>(
+      defaultRange?.start ?? null
+    );
+    const [rangeEnd, setRangeEnd] = useState<Date | null>(
+      defaultRange?.end ?? null
+    );
+    const [rangeStep, setRangeStep] = useState<'start' | 'end'>('start');
+
+    /* ── Navigation (left calendar) ── */
+    const [leftMonth, setLeftMonth] = useState(
+      () =>
+        defaultRange?.start?.getMonth() ??
+        defaultValue?.getMonth() ??
+        today.getMonth()
+    );
+    const [leftYear, setLeftYear] = useState(
+      () =>
+        defaultRange?.start?.getFullYear() ??
+        defaultValue?.getFullYear() ??
+        today.getFullYear()
+    );
+
+    // Right calendar is always the next month
+    const rightMonth = leftMonth === 11 ? 0 : leftMonth + 1;
+    const rightYear = leftMonth === 11 ? leftYear + 1 : leftYear;
+
+    /* ── Handlers ── */
+
+    const handleBasicSelect = useCallback((date: Date) => {
+      setSelectedDate(date);
+    }, []);
+
+    const handleRangeSelect = useCallback(
+      (date: Date) => {
+        if (rangeStep === 'start') {
+          setRangeStart(date);
+          setRangeEnd(null);
+          setRangeStep('end');
+        } else {
+          // Ensure start ≤ end
+          if (rangeStart && date.getTime() < rangeStart.getTime()) {
+            setRangeEnd(rangeStart);
+            setRangeStart(date);
+          } else {
+            setRangeEnd(date);
+          }
+          setRangeStep('start');
+        }
+      },
+      [rangeStep, rangeStart]
+    );
+
+    const handleDone = useCallback(() => {
+      if (mode === 'basic') {
+        onDone?.(selectedDate);
+      } else if (rangeStart && rangeEnd) {
+        onDone?.({ start: rangeStart, end: rangeEnd } as DateRange);
+      }
+    }, [mode, selectedDate, rangeStart, rangeEnd, onDone]);
+
+    const dayCount =
+      rangeStart && rangeEnd
+        ? Math.round(
+            Math.abs(rangeEnd.getTime() - rangeStart.getTime()) /
+              (1000 * 60 * 60 * 24)
+          ) + 1
+        : 0;
+
+    const isDoneDisabled =
+      mode === 'basic' ? !selectedDate : !(rangeStart && rangeEnd);
+
+    return (
+      <div ref={ref} className={cn(styles.root, className)} {...rest}>
+        <div className={styles.calendars}>
+          <Calendar
+            month={leftMonth}
+            year={leftYear}
+            value={mode === 'basic' ? selectedDate : undefined}
+            rangeStart={mode === 'range' ? rangeStart : undefined}
+            rangeEnd={mode === 'range' ? rangeEnd : undefined}
+            headerAlign={headerAlign}
+            events={events}
+            minDate={minDate}
+            maxDate={maxDate}
+            onDateSelect={
+              mode === 'basic' ? handleBasicSelect : handleRangeSelect
+            }
+            onMonthChange={(m, y) => {
+              setLeftMonth(m);
+              setLeftYear(y);
+            }}
+          />
+
+          {mode === 'range' && (
+            <Calendar
+              month={rightMonth}
+              year={rightYear}
+              rangeStart={rangeStart}
+              rangeEnd={rangeEnd}
+              headerAlign={headerAlign}
+              events={events}
+              minDate={minDate}
+              maxDate={maxDate}
+              onDateSelect={handleRangeSelect}
+              onMonthChange={(m, y) => {
+                // Keep left = right − 1
+                if (m === 0) {
+                  setLeftMonth(11);
+                  setLeftYear(y - 1);
+                } else {
+                  setLeftMonth(m - 1);
+                  setLeftYear(y);
+                }
+              }}
+            />
+          )}
+        </div>
+
+        {mode === 'range' && dayCount > 0 && (
+          <p className={styles.rangeInfo}>{dayCount} days selected</p>
+        )}
+
+        <div className={styles.actions}>
+          <Button variant="outline" size="md" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button
+            variant="fill"
+            size="md"
+            onClick={handleDone}
+            disabled={isDoneDisabled}
+          >
+            Done
+          </Button>
+        </div>
+      </div>
+    );
+  }
+);
+
+CalendarDialog.displayName = 'CalendarDialog';

package/registry/components/Calendar/CalendarDialog.types.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes } from 'react';
+import type { CalendarHeaderAlign } from './Calendar.types';
+
+export type CalendarDialogMode = 'basic' | 'range';
+
+export interface DateRange {
+  start: Date;
+  end: Date;
+}
+
+export interface CalendarDialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
+  /** Single calendar or side-by-side range picker. */
+  mode?: CalendarDialogMode;
+  /** Initial selected date (basic mode). */
+  defaultValue?: Date | null;
+  /** Initial date range (range mode). */
+  defaultRange?: DateRange | null;
+  /** Header alignment passed to inner Calendar(s). */
+  headerAlign?: CalendarHeaderAlign;
+  /** Dates that display an event indicator dot. */
+  events?: Date[];
+  /** Minimum selectable date. */
+  minDate?: Date;
+  /** Maximum selectable date. */
+  maxDate?: Date;
+  /** Called when Cancel is clicked. */
+  onCancel?: () => void;
+  /** Called when Done is clicked. Returns Date (basic) or DateRange (range). */
+  onDone?: (value: Date | DateRange | null) => void;
+}

package/registry/components/Calendar/index.ts

@@ -0,0 +1,9 @@
+export { Calendar } from './Calendar';
+export type { CalendarProps, CalendarHeaderAlign } from './Calendar.types';
+
+export { CalendarDialog } from './CalendarDialog';
+export type {
+  CalendarDialogProps,
+  CalendarDialogMode,
+  DateRange,
+} from './CalendarDialog.types';

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

@@ -0,0 +1,35 @@
+.root {
+  font-family: var(--st-font-family);
+  border-radius: var(--st-radius-xl);
+  overflow: hidden;
+}
+
+/* ── Variants ── */
+
+.outline {
+  background: var(--st-color-surface);
+  border: 1px solid var(--st-color-border);
+}
+
+.elevated {
+  background: var(--st-color-surface);
+  box-shadow: var(--st-shadow-md);
+}
+
+.filled {
+  background: var(--st-color-surface-raised);
+}
+
+/* ── Padding (simple cards without sub-components) ── */
+
+.padSm {
+  padding: var(--st-space-4);
+}
+
+.padMd {
+  padding: var(--st-space-5);
+}
+
+.padLg {
+  padding: var(--st-space-6);
+}

package/registry/components/Card/Card.tsx

@@ -0,0 +1,36 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { CardProps } from './Card.types';
+import styles from './Card.module.css';
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      variant = 'outline',
+      padding = 'none',
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          styles.root,
+          styles[variant],
+          padding === 'sm' && styles.padSm,
+          padding === 'md' && styles.padMd,
+          padding === 'lg' && styles.padLg,
+          className
+        )}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = 'Card';

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

@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type CardVariant = 'outline' | 'elevated' | 'filled';
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  /** Visual style. */
+  variant?: CardVariant;
+  /** Shorthand padding for simple cards (use sub-components for structured cards). */
+  padding?: CardPadding;
+}
+
+export type CardHeaderSize = 'sm' | 'md' | 'lg';
+
+export interface CardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Header title text or node. */
+  title?: ReactNode;
+  /** Optional leading icon. */
+  icon?: ReactNode;
+  /** Right-aligned action area (buttons, selects, etc.). */
+  action?: ReactNode;
+  /** Show bottom border separator. */
+  border?: boolean;
+  /** Vertical density. */
+  size?: CardHeaderSize;
+}
+
+export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {}
+
+export type CardFooterAlign = 'left' | 'center' | 'right' | 'between';
+
+export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+  /** Show top border separator. */
+  border?: boolean;
+  /** Horizontal alignment of footer children. */
+  align?: CardFooterAlign;
+}

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

@@ -0,0 +1,3 @@
+.root {
+  padding: 0 var(--st-space-5) var(--st-space-5);
+}

package/registry/components/Card/CardContent.tsx

@@ -0,0 +1,16 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { CardContentProps } from './Card.types';
+import styles from './CardContent.module.css';
+
+export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
+  ({ className, children, ...rest }, ref) => {
+    return (
+      <div ref={ref} className={cn(styles.root, className)} {...rest}>
+        {children}
+      </div>
+    );
+  }
+);
+
+CardContent.displayName = 'CardContent';

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

@@ -0,0 +1,31 @@
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-3);
+  padding: 0 var(--st-space-5) var(--st-space-5);
+}
+
+/* ── Border ── */
+
+.border {
+  border-top: 1px solid var(--st-color-border);
+  padding-top: var(--st-space-4);
+}
+
+/* ── Alignment ── */
+
+.left {
+  justify-content: flex-start;
+}
+
+.center {
+  justify-content: center;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.between {
+  justify-content: space-between;
+}

package/registry/components/Card/CardFooter.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { CardFooterProps } from './Card.types';
+import styles from './CardFooter.module.css';
+
+export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
+  (
+    {
+      border = false,
+      align = 'right',
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          styles.root,
+          styles[align],
+          border && styles.border,
+          className
+        )}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+CardFooter.displayName = 'CardFooter';

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

@@ -0,0 +1,61 @@
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--st-space-3);
+}
+
+/* ── Sizes ── */
+
+.sm {
+  padding: var(--st-space-2) var(--st-space-4);
+}
+
+.md {
+  padding: var(--st-space-4) var(--st-space-5);
+}
+
+.lg {
+  padding: var(--st-space-5) var(--st-space-6);
+}
+
+/* ── Border ── */
+
+.border {
+  border-bottom: 1px solid var(--st-color-border);
+}
+
+/* ── Title area ── */
+
+.titleWrap {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  min-width: 0;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--st-color-muted);
+}
+
+.title {
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-medium);
+  color: var(--st-color-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Action area ── */
+
+.action {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  flex-shrink: 0;
+  margin-left: auto;
+}

package/registry/components/Card/CardHeader.tsx

@@ -0,0 +1,46 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { CardHeaderProps } from './Card.types';
+import styles from './CardHeader.module.css';
+
+export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
+  (
+    {
+      title,
+      icon,
+      action,
+      border = false,
+      size = 'md',
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          styles.root,
+          styles[size],
+          border && styles.border,
+          className
+        )}
+        {...rest}
+      >
+        {(title || icon) && (
+          <div className={styles.titleWrap}>
+            {icon && <span className={styles.icon}>{icon}</span>}
+            {title != null && (
+              <span className={styles.title}>{title}</span>
+            )}
+          </div>
+        )}
+        {action && <div className={styles.action}>{action}</div>}
+        {children}
+      </div>
+    );
+  }
+);
+
+CardHeader.displayName = 'CardHeader';

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

@@ -0,0 +1,106 @@
+.root {
+  padding: var(--st-space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-4);
+}
+
+/* ── Variants ── */
+
+.light {
+  background: var(--st-color-surface);
+  color: var(--st-color-foreground);
+}
+
+.dark {
+  background: var(--st-color-neutral-900);
+  color: #ffffff;
+  border-color: var(--st-color-neutral-800);
+}
+
+.primary {
+  background: var(--st-color-primary);
+  color: #ffffff;
+  border-color: var(--st-color-primary);
+}
+
+/* ── Body ── */
+
+.body {
+  display: flex;
+  gap: var(--st-space-3);
+}
+
+.icon {
+  display: flex;
+  align-items: flex-start;
+  flex-shrink: 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-1);
+  min-width: 0;
+}
+
+.badge {
+  display: inline-flex;
+  align-self: flex-start;
+  padding: var(--st-space-1) var(--st-space-2);
+  border-radius: var(--st-radius-full);
+  font-size: var(--st-font-size-xs);
+  font-weight: var(--st-font-weight-medium);
+  background: rgb(255 255 255 / 0.15);
+}
+
+.light .badge {
+  background: var(--st-color-primary-subtle);
+  color: var(--st-color-primary);
+}
+
+.title {
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-semibold);
+  line-height: var(--st-line-height-tight);
+}
+
+.description {
+  font-size: var(--st-font-size-sm);
+  line-height: var(--st-line-height-normal);
+  opacity: 0.8;
+  margin: 0;
+}
+
+.light .description {
+  color: var(--st-color-muted);
+  opacity: 1;
+}
+
+/* ── Actions ── */
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+}
+
+.dark .dismissBtn,
+.primary .dismissBtn {
+  color: rgb(255 255 255 / 0.8);
+}
+
+.dark .dismissBtn:hover,
+.primary .dismissBtn:hover {
+  color: #ffffff;
+}
+
+.dark .applyBtn {
+  background: #ffffff;
+  color: var(--st-color-neutral-900);
+}
+
+.primary .applyBtn {
+  background: #ffffff;
+  color: var(--st-color-primary);
+}

package/registry/components/Card/InsightCard.tsx

@@ -0,0 +1,68 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Card } from './Card';
+import { Button } from '../Button/Button';
+import type { InsightCardProps } from './InsightCard.types';
+import styles from './InsightCard.module.css';
+
+export const InsightCard = forwardRef<HTMLDivElement, InsightCardProps>(
+  (
+    {
+      icon,
+      badge,
+      title,
+      description,
+      variant = 'light',
+      onDismiss,
+      onApply,
+      dismissLabel = 'Dismiss',
+      applyLabel = 'Apply',
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <Card
+        ref={ref}
+        className={cn(styles.root, styles[variant], className)}
+        {...rest}
+      >
+        <div className={styles.body}>
+          {icon && <span className={styles.icon}>{icon}</span>}
+          <div className={styles.content}>
+            {badge && <span className={styles.badge}>{badge}</span>}
+            <span className={styles.title}>{title}</span>
+            {description && <p className={styles.description}>{description}</p>}
+          </div>
+        </div>
+        {(onDismiss || onApply) && (
+          <div className={styles.actions}>
+            {onDismiss && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onDismiss}
+                className={styles.dismissBtn}
+              >
+                {dismissLabel}
+              </Button>
+            )}
+            {onApply && (
+              <Button
+                variant="fill"
+                size="sm"
+                onClick={onApply}
+                className={styles.applyBtn}
+              >
+                {applyLabel}
+              </Button>
+            )}
+          </div>
+        )}
+      </Card>
+    );
+  }
+);
+
+InsightCard.displayName = 'InsightCard';