@soadtech/cli 0.1.0

package/registry/components/ButtonLink/ButtonLink.tsx

@@ -0,0 +1,42 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { ButtonLinkProps } from './ButtonLink.types';
+import styles from './ButtonLink.module.css';
+
+export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
+  (
+    {
+      color = 'primary',
+      size = 'md',
+      iconLeft,
+      iconRight,
+      disabled = false,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <a
+        ref={ref}
+        className={cn(
+          styles.root,
+          styles[color],
+          styles[size],
+          disabled && styles.disabled,
+          className
+        )}
+        aria-disabled={disabled || undefined}
+        tabIndex={disabled ? -1 : undefined}
+        {...rest}
+      >
+        {iconLeft && <span className={styles.iconSlot}>{iconLeft}</span>}
+        {children}
+        {iconRight && <span className={styles.iconSlot}>{iconRight}</span>}
+      </a>
+    );
+  }
+);
+
+ButtonLink.displayName = 'ButtonLink';

package/registry/components/ButtonLink/ButtonLink.types.ts

@@ -0,0 +1,18 @@
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+
+export type ButtonLinkColor = 'primary' | 'secondary' | 'danger';
+export type ButtonLinkSize = 'lg' | 'md' | 'sm';
+
+export interface ButtonLinkProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Color scheme */
+  color?: ButtonLinkColor;
+  /** Size */
+  size?: ButtonLinkSize;
+  /** Icon before text */
+  iconLeft?: ReactNode;
+  /** Icon after text */
+  iconRight?: ReactNode;
+  /** Disabled state */
+  disabled?: boolean;
+}

package/registry/components/ButtonLink/index.ts

@@ -0,0 +1,6 @@
+export { ButtonLink } from './ButtonLink';
+export type {
+  ButtonLinkProps,
+  ButtonLinkColor,
+  ButtonLinkSize,
+} from './ButtonLink.types';

package/registry/components/Calendar/Calendar.module.css

@@ -0,0 +1,213 @@
+.root {
+  font-family: var(--st-font-family);
+  display: inline-flex;
+  flex-direction: column;
+}
+
+/* ── Header ── */
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-1);
+  margin-bottom: var(--st-space-2);
+}
+
+.left,
+.center,
+.right {
+  justify-content: space-between;
+}
+
+.headerSelects {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-1);
+}
+
+.headerNav {
+  display: flex;
+  align-items: center;
+}
+
+.select {
+  appearance: none;
+  border: none;
+  background: transparent;
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-medium);
+  color: var(--st-color-foreground);
+  cursor: pointer;
+  padding: var(--st-space-1) var(--st-space-5) var(--st-space-1) var(--st-space-1);
+  border-radius: var(--st-radius-sm);
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4L5 6.5L7.5 4' stroke='%23737373' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--st-space-1) center;
+  transition: background-color var(--st-transition-fast);
+}
+
+.select:hover {
+  background-color: var(--st-color-neutral-100);
+}
+
+.select:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: 2px;
+}
+
+.navButton {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--st-radius-md);
+  cursor: pointer;
+  color: var(--st-color-foreground);
+  transition: background-color var(--st-transition-fast);
+}
+
+.navButton:hover {
+  background-color: var(--st-color-neutral-100);
+}
+
+.navButton:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: 2px;
+}
+
+/* ── Weekdays ── */
+
+.weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  margin-bottom: var(--st-space-1);
+}
+
+.weekday {
+  font-size: var(--st-font-size-xs);
+  font-weight: var(--st-font-weight-medium);
+  color: var(--st-color-muted);
+  padding: var(--st-space-1) 0;
+}
+
+/* ── Day grid ── */
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+/* Day cell — carries the range band background */
+.dayCell {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cellRangeStart {
+  background: linear-gradient(
+    to right,
+    transparent 50%,
+    var(--st-color-primary-subtle) 50%
+  );
+}
+
+.cellRangeEnd {
+  background: linear-gradient(
+    to left,
+    transparent 50%,
+    var(--st-color-primary-subtle) 50%
+  );
+}
+
+.cellRangeMiddle {
+  background-color: var(--st-color-primary-subtle);
+}
+
+/* ── Day button ── */
+
+.day {
+  all: unset;
+  box-sizing: border-box;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--st-font-size-sm);
+  font-family: var(--st-font-family);
+  border-radius: var(--st-radius-full);
+  cursor: pointer;
+  position: relative;
+  transition: color var(--st-transition-fast),
+    background-color var(--st-transition-fast);
+  user-select: none;
+}
+
+.day:hover:not(.disabled):not(.active):not(.rangeStart):not(.rangeEnd):not(.outside) {
+  color: var(--st-color-primary);
+}
+
+.day:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: 2px;
+}
+
+/* Outside month */
+.outside {
+  color: var(--st-color-neutral-400);
+}
+
+.outside:hover:not(.disabled) {
+  color: var(--st-color-neutral-500);
+}
+
+/* Disabled */
+.disabled {
+  color: var(--st-color-neutral-300);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Today */
+.today {
+  font-weight: var(--st-font-weight-semibold);
+}
+
+/* Active / Selected */
+.active,
+.rangeStart,
+.rangeEnd {
+  background-color: var(--st-color-primary);
+  color: var(--st-color-primary-foreground);
+  font-weight: var(--st-font-weight-medium);
+}
+
+/* Range middle */
+.rangeMiddle {
+  color: var(--st-color-primary);
+}
+
+/* Event indicator dot */
+.event::after {
+  content: '';
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px;
+  height: 4px;
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-primary);
+}
+
+.active.event::after,
+.rangeStart.event::after,
+.rangeEnd.event::after {
+  background-color: var(--st-color-primary-foreground);
+}

package/registry/components/Calendar/Calendar.tsx

@@ -0,0 +1,370 @@
+import { forwardRef, useState, useMemo, useCallback } from 'react';
+import { cn } from '../../utils/cn';
+import type { CalendarProps } from './Calendar.types';
+import styles from './Calendar.module.css';
+
+const MONTH_NAMES = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+const WEEKDAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+
+/* ── Inline icons ── */
+
+function ChevronLeftIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 4L6 8L10 12"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ChevronRightIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 4L10 8L6 12"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/* ── Helpers ── */
+
+function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+function isInRange(date: Date, start: Date, end: Date): boolean {
+  const t = date.getTime();
+  return t > start.getTime() && t < end.getTime();
+}
+
+function generateGrid(year: number, month: number): Date[] {
+  const firstDayOfWeek = new Date(year, month, 1).getDay();
+  const startOffset = (firstDayOfWeek + 6) % 7; // Monday = 0
+  const dates: Date[] = [];
+  for (let i = 0; i < 42; i++) {
+    dates.push(new Date(year, month, 1 - startOffset + i));
+  }
+  return dates;
+}
+
+/* ── Component ── */
+
+export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
+  (
+    {
+      month: controlledMonth,
+      year: controlledYear,
+      value,
+      rangeStart: rawRangeStart,
+      rangeEnd: rawRangeEnd,
+      events,
+      minDate,
+      maxDate,
+      headerAlign = 'center',
+      onDateSelect,
+      onMonthChange,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const today = useMemo(() => new Date(), []);
+    const [internalMonth, setInternalMonth] = useState(
+      () => controlledMonth ?? today.getMonth()
+    );
+    const [internalYear, setInternalYear] = useState(
+      () => controlledYear ?? today.getFullYear()
+    );
+
+    const displayMonth = controlledMonth ?? internalMonth;
+    const displayYear = controlledYear ?? internalYear;
+
+    // Normalize range so start ≤ end
+    const rangeStart =
+      rawRangeStart &&
+      rawRangeEnd &&
+      rawRangeEnd.getTime() < rawRangeStart.getTime()
+        ? rawRangeEnd
+        : rawRangeStart;
+    const rangeEnd =
+      rawRangeStart &&
+      rawRangeEnd &&
+      rawRangeEnd.getTime() < rawRangeStart.getTime()
+        ? rawRangeStart
+        : rawRangeEnd;
+    const hasRange = !!(
+      rangeStart &&
+      rangeEnd &&
+      !isSameDay(rangeStart, rangeEnd)
+    );
+
+    const days = useMemo(
+      () => generateGrid(displayYear, displayMonth),
+      [displayYear, displayMonth]
+    );
+
+    const eventSet = useMemo(() => {
+      if (!events) return new Set<string>();
+      return new Set(
+        events.map(
+          (d) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`
+        )
+      );
+    }, [events]);
+
+    const navigate = useCallback(
+      (newMonth: number, newYear: number) => {
+        if (newMonth < 0) {
+          newMonth = 11;
+          newYear -= 1;
+        } else if (newMonth > 11) {
+          newMonth = 0;
+          newYear += 1;
+        }
+        if (controlledMonth === undefined) {
+          setInternalMonth(newMonth);
+          setInternalYear(newYear);
+        }
+        onMonthChange?.(newMonth, newYear);
+      },
+      [controlledMonth, onMonthChange]
+    );
+
+    const yearRange = useMemo(() => {
+      const min = minDate ? minDate.getFullYear() : displayYear - 50;
+      const max = maxDate ? maxDate.getFullYear() : displayYear + 50;
+      const years: number[] = [];
+      for (let y = min; y <= max; y++) years.push(y);
+      return years;
+    }, [minDate, maxDate, displayYear]);
+
+    const isDisabled = useCallback(
+      (date: Date): boolean => {
+        if (minDate) {
+          const min = new Date(
+            minDate.getFullYear(),
+            minDate.getMonth(),
+            minDate.getDate()
+          );
+          if (date < min) return true;
+        }
+        if (maxDate) {
+          const max = new Date(
+            maxDate.getFullYear(),
+            maxDate.getMonth(),
+            maxDate.getDate()
+          );
+          if (date > max) return true;
+        }
+        return false;
+      },
+      [minDate, maxDate]
+    );
+
+    const getDayClasses = useCallback(
+      (date: Date) => {
+        const outside = date.getMonth() !== displayMonth;
+        const disabled = isDisabled(date);
+        const isActive =
+          (value != null && isSameDay(date, value)) ||
+          (rangeStart != null && !hasRange && isSameDay(date, rangeStart));
+        const isRangeStart = hasRange && isSameDay(date, rangeStart!);
+        const isRangeEnd = hasRange && isSameDay(date, rangeEnd!);
+        const inMiddle = hasRange && isInRange(date, rangeStart!, rangeEnd!);
+        const hasEvent = eventSet.has(
+          `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
+        );
+        const isToday =
+          isSameDay(date, today) &&
+          !isActive &&
+          !isRangeStart &&
+          !isRangeEnd;
+
+        const dayClass = cn(
+          styles.day,
+          outside && styles.outside,
+          disabled && styles.disabled,
+          isActive && styles.active,
+          isRangeStart && styles.rangeStart,
+          isRangeEnd && styles.rangeEnd,
+          inMiddle && styles.rangeMiddle,
+          hasEvent && styles.event,
+          isToday && styles.today
+        );
+
+        const cellClass = cn(
+          styles.dayCell,
+          isRangeStart && styles.cellRangeStart,
+          isRangeEnd && styles.cellRangeEnd,
+          inMiddle && styles.cellRangeMiddle
+        );
+
+        return { dayClass, cellClass };
+      },
+      [
+        displayMonth,
+        isDisabled,
+        value,
+        rangeStart,
+        rangeEnd,
+        hasRange,
+        eventSet,
+        today,
+      ]
+    );
+
+    /* ── Header pieces ── */
+
+    const headerSelects = (
+      <div className={styles.headerSelects}>
+        <select
+          className={styles.select}
+          value={displayMonth}
+          onChange={(e) => navigate(Number(e.target.value), displayYear)}
+          aria-label="Month"
+        >
+          {MONTH_NAMES.map((name, i) => (
+            <option key={i} value={i}>
+              {name}
+            </option>
+          ))}
+        </select>
+        <select
+          className={styles.select}
+          value={displayYear}
+          onChange={(e) => navigate(displayMonth, Number(e.target.value))}
+          aria-label="Year"
+        >
+          {yearRange.map((y) => (
+            <option key={y} value={y}>
+              {y}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+
+    const prevButton = (
+      <button
+        type="button"
+        className={styles.navButton}
+        onClick={() => navigate(displayMonth - 1, displayYear)}
+        aria-label="Previous month"
+      >
+        <ChevronLeftIcon />
+      </button>
+    );
+
+    const nextButton = (
+      <button
+        type="button"
+        className={styles.navButton}
+        onClick={() => navigate(displayMonth + 1, displayYear)}
+        aria-label="Next month"
+      >
+        <ChevronRightIcon />
+      </button>
+    );
+
+    return (
+      <div ref={ref} className={cn(styles.root, className)} {...rest}>
+        <div className={cn(styles.header, styles[headerAlign])}>
+          {headerAlign === 'left' && (
+            <>
+              {headerSelects}
+              <div className={styles.headerNav}>
+                {prevButton}
+                {nextButton}
+              </div>
+            </>
+          )}
+          {headerAlign === 'center' && (
+            <>
+              {prevButton}
+              {headerSelects}
+              {nextButton}
+            </>
+          )}
+          {headerAlign === 'right' && (
+            <>
+              <div className={styles.headerNav}>
+                {prevButton}
+                {nextButton}
+              </div>
+              {headerSelects}
+            </>
+          )}
+        </div>
+
+        <div className={styles.weekdays}>
+          {WEEKDAYS.map((day) => (
+            <span key={day} className={styles.weekday}>
+              {day}
+            </span>
+          ))}
+        </div>
+
+        <div className={styles.grid}>
+          {days.map((date, i) => {
+            const { dayClass, cellClass } = getDayClasses(date);
+            return (
+              <div key={i} className={cellClass}>
+                <button
+                  type="button"
+                  className={dayClass}
+                  disabled={isDisabled(date)}
+                  onClick={() => onDateSelect?.(date)}
+                  tabIndex={date.getMonth() !== displayMonth ? -1 : 0}
+                >
+                  {date.getDate()}
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+);
+
+Calendar.displayName = 'Calendar';

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

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from 'react';
+
+export type CalendarHeaderAlign = 'left' | 'center' | 'right';
+
+export interface CalendarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Displayed month (0–11). Component is controlled when provided. */
+  month?: number;
+  /** Displayed year. Component is controlled when provided. */
+  year?: number;
+  /** Selected date (single-selection mode). */
+  value?: Date | null;
+  /** Range start date. */
+  rangeStart?: Date | null;
+  /** Range end date. */
+  rangeEnd?: Date | null;
+  /** Dates that display an event indicator dot. */
+  events?: Date[];
+  /** Minimum selectable date. */
+  minDate?: Date;
+  /** Maximum selectable date. */
+  maxDate?: Date;
+  /** Header layout: where month/year selects and nav arrows are placed. */
+  headerAlign?: CalendarHeaderAlign;
+  /** Called when a day is clicked. */
+  onDateSelect?: (date: Date) => void;
+  /** Called when the displayed month/year changes via navigation. */
+  onMonthChange?: (month: number, year: number) => void;
+}

package/registry/components/Calendar/CalendarDialog.module.css

@@ -0,0 +1,29 @@
+.root {
+  font-family: var(--st-font-family);
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--st-space-4);
+  padding: var(--st-space-6);
+  background: var(--st-color-surface);
+  border-radius: var(--st-radius-xl);
+  box-shadow: var(--st-shadow-lg);
+  border: 1px solid var(--st-color-border);
+}
+
+.calendars {
+  display: flex;
+  gap: var(--st-space-8);
+}
+
+.rangeInfo {
+  font-size: var(--st-font-size-sm);
+  color: var(--st-color-muted);
+  text-align: center;
+  margin: 0;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--st-space-3);
+}