@soadtech/cli 0.1.0

package/registry/components/Tab/TabItem.tsx

@@ -0,0 +1,87 @@
+import { forwardRef } from 'react';
+import type { KeyboardEvent } from 'react';
+import { cn } from '../../utils/cn';
+import { useTab } from './TabContext';
+import type { TabItemProps } from './Tab.types';
+import styles from './TabItem.module.css';
+
+function CloseIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path
+        d="M9 3L3 9M3 3l6 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const TabItem = forwardRef<HTMLDivElement, TabItemProps>(
+  ({ value, icon, badge, onClose, disabled, className, children, ...rest }, ref) => {
+    const ctx = useTab();
+    const isActive = ctx.value === value;
+    const isDisabled = disabled || ctx.disabled;
+    const variant = ctx.variant;
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+      if (isDisabled) return;
+
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        ctx.onValueChange?.(value);
+      }
+
+      if ((e.key === 'Delete' || e.key === 'Backspace') && variant === 'dynamic' && onClose) {
+        e.preventDefault();
+        onClose();
+      }
+
+      rest.onKeyDown?.(e);
+    };
+
+    return (
+      <div
+        ref={ref}
+        role="tab"
+        tabIndex={isDisabled ? -1 : 0}
+        aria-selected={isActive}
+        aria-disabled={isDisabled || undefined}
+        className={cn(
+          styles.item,
+          styles[variant],
+          isActive && styles.active,
+          isDisabled && styles.disabled,
+          className
+        )}
+        onClick={isDisabled ? undefined : () => ctx.onValueChange?.(value)}
+        onKeyDown={handleKeyDown}
+        {...rest}
+      >
+        {icon && <span className={styles.icon}>{icon}</span>}
+        <span className={styles.label}>{children}</span>
+        {badge != null && variant === 'basic' && (
+          <span className={styles.badge}>{badge}</span>
+        )}
+        {onClose && variant === 'dynamic' && (
+          <button
+            type="button"
+            tabIndex={-1}
+            className={cn(styles.close, isActive && styles.closeActive)}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (!isDisabled) onClose();
+            }}
+            aria-label="Close tab"
+          >
+            <CloseIcon />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+TabItem.displayName = 'TabItem';

package/registry/components/Tab/index.ts

@@ -0,0 +1,9 @@
+export { Tab } from './Tab';
+export { TabItem } from './TabItem';
+export { TabAdd } from './TabAdd';
+export type {
+  TabProps,
+  TabVariant,
+  TabItemProps,
+  TabAddProps,
+} from './Tab.types';

package/registry/components/Table/Table.module.css

@@ -0,0 +1,33 @@
+.root {
+  font-family: var(--st-font-family);
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-xl);
+  overflow: hidden;
+}
+
+/* ── Scroll wrapper ── */
+
+.scrollWrapper {
+  overflow-x: auto;
+}
+
+/* ── Table element ── */
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+/* ── Size — sets cell vertical padding via custom property ── */
+
+.sm {
+  --_table-cell-py: var(--st-space-2);
+}
+
+.md {
+  --_table-cell-py: var(--st-space-3);
+}
+
+.lg {
+  --_table-cell-py: var(--st-space-4);
+}

package/registry/components/Table/Table.tsx

@@ -0,0 +1,74 @@
+import { Children, forwardRef, isValidElement } from 'react';
+import type { ReactNode } from 'react';
+import { cn } from '../../utils/cn';
+import { TableContext } from './TableContext';
+import type { TableProps } from './Table.types';
+import styles from './Table.module.css';
+
+export const Table = forwardRef<HTMLDivElement, TableProps>(
+  (
+    {
+      selectedRows = [],
+      onSelectionChange,
+      sortKey,
+      sortDirection,
+      onSortChange,
+      size = 'md',
+      striped = false,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    let toolbar: ReactNode = null;
+    let footer: ReactNode = null;
+    const tableContent: ReactNode[] = [];
+
+    Children.forEach(children, (child) => {
+      if (!isValidElement(child)) {
+        tableContent.push(child);
+        return;
+      }
+
+      const displayName = (child.type as { displayName?: string })
+        .displayName;
+
+      if (displayName === 'TableToolbar') {
+        toolbar = child;
+      } else if (displayName === 'TableFooter') {
+        footer = child;
+      } else {
+        tableContent.push(child);
+      }
+    });
+
+    return (
+      <TableContext.Provider
+        value={{
+          selectedRows,
+          onSelectionChange,
+          sortKey,
+          sortDirection,
+          onSortChange,
+          size,
+          striped,
+        }}
+      >
+        <div
+          ref={ref}
+          className={cn(styles.root, styles[size], className)}
+          {...rest}
+        >
+          {toolbar}
+          <div className={styles.scrollWrapper}>
+            <table className={styles.table}>{tableContent}</table>
+          </div>
+          {footer}
+        </div>
+      </TableContext.Provider>
+    );
+  }
+);
+
+Table.displayName = 'Table';

package/registry/components/Table/Table.types.ts

@@ -0,0 +1,64 @@
+import type {
+  HTMLAttributes,
+  TdHTMLAttributes,
+  ThHTMLAttributes,
+} from 'react';
+
+export type TableSortDirection = 'asc' | 'desc';
+export type TableSize = 'sm' | 'md' | 'lg';
+export type TableCellAlign = 'left' | 'center' | 'right';
+
+export interface TableProps extends HTMLAttributes<HTMLDivElement> {
+  /** IDs of currently selected rows. */
+  selectedRows?: string[];
+  /** Callback when selection changes. */
+  onSelectionChange?: (rows: string[]) => void;
+  /** Currently sorted column key. */
+  sortKey?: string;
+  /** Current sort direction. */
+  sortDirection?: TableSortDirection;
+  /** Callback when sort changes. */
+  onSortChange?: (key: string, direction: TableSortDirection) => void;
+  /** Row density. */
+  size?: TableSize;
+  /** Alternate row backgrounds. */
+  striped?: boolean;
+}
+
+export interface TableToolbarProps extends HTMLAttributes<HTMLDivElement> {}
+
+export interface TableHeaderProps
+  extends HTMLAttributes<HTMLTableSectionElement> {}
+
+export interface TableBodyProps
+  extends HTMLAttributes<HTMLTableSectionElement> {}
+
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+  /** Unique ID for selection tracking. */
+  rowId?: string;
+  /** Disable interaction. */
+  disabled?: boolean;
+}
+
+export interface TableHeaderCellProps
+  extends ThHTMLAttributes<HTMLTableCellElement> {
+  /** Makes the header sortable; value is the sort key. */
+  sortKey?: string;
+  /** Fixed width. */
+  width?: string;
+  /** Text alignment. */
+  align?: TableCellAlign;
+}
+
+export interface TableCellProps
+  extends TdHTMLAttributes<HTMLTableCellElement> {
+  /** Text alignment. */
+  align?: TableCellAlign;
+}
+
+export type TableFooterAlign = 'left' | 'center' | 'right' | 'between';
+
+export interface TableFooterProps extends HTMLAttributes<HTMLDivElement> {
+  /** Horizontal alignment of footer children. */
+  align?: TableFooterAlign;
+}

package/registry/components/Table/TableBody.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { useTable } from './TableContext';
+import type { TableBodyProps } from './Table.types';
+import rowStyles from './TableRow.module.css';
+
+export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  ({ className, children, ...rest }, ref) => {
+    const { striped } = useTable();
+
+    return (
+      <tbody
+        ref={ref}
+        className={cn(striped && rowStyles.striped, className)}
+        {...rest}
+      >
+        {children}
+      </tbody>
+    );
+  }
+);
+
+TableBody.displayName = 'TableBody';

package/registry/components/Table/TableCell.module.css

@@ -0,0 +1,21 @@
+.root {
+  padding: var(--_table-cell-py) var(--st-space-4);
+  font-size: var(--st-font-size-sm);
+  color: var(--st-color-foreground);
+  line-height: var(--st-line-height-normal);
+  vertical-align: middle;
+}
+
+/* ── Alignment ── */
+
+.left {
+  text-align: left;
+}
+
+.center {
+  text-align: center;
+}
+
+.right {
+  text-align: right;
+}

package/registry/components/Table/TableCell.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { TableCellProps } from './Table.types';
+import styles from './TableCell.module.css';
+
+export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
+  ({ align = 'left', className, children, ...rest }, ref) => {
+    return (
+      <td
+        ref={ref}
+        className={cn(styles.root, styles[align], className)}
+        {...rest}
+      >
+        {children}
+      </td>
+    );
+  }
+);
+
+TableCell.displayName = 'TableCell';

package/registry/components/Table/TableContext.ts

@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react';
+import type { TableSortDirection, TableSize } from './Table.types';
+
+export interface TableContextValue {
+  selectedRows: string[];
+  onSelectionChange?: (rows: string[]) => void;
+  sortKey?: string;
+  sortDirection?: TableSortDirection;
+  onSortChange?: (key: string, direction: TableSortDirection) => void;
+  size: TableSize;
+  striped: boolean;
+}
+
+export const TableContext = createContext<TableContextValue | null>(null);
+
+export function useTable(): TableContextValue {
+  const ctx = useContext(TableContext);
+  if (!ctx) {
+    throw new Error('Table sub-components must be used within a <Table>');
+  }
+  return ctx;
+}

package/registry/components/Table/TableFooter.module.css

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

package/registry/components/Table/TableFooter.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { TableFooterProps } from './Table.types';
+import styles from './TableFooter.module.css';
+
+export const TableFooter = forwardRef<HTMLDivElement, TableFooterProps>(
+  ({ align = 'between', className, children, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(styles.root, styles[align], className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+TableFooter.displayName = 'TableFooter';

package/registry/components/Table/TableHeader.module.css

@@ -0,0 +1,3 @@
+.root {
+  background: var(--st-color-neutral-50);
+}

package/registry/components/Table/TableHeader.tsx

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { TableHeaderProps } from './Table.types';
+import styles from './TableHeader.module.css';
+
+export const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  TableHeaderProps
+>(({ className, children, ...rest }, ref) => {
+  return (
+    <thead ref={ref} className={cn(styles.root, className)} {...rest}>
+      {children}
+    </thead>
+  );
+});
+
+TableHeader.displayName = 'TableHeader';

package/registry/components/Table/TableHeaderCell.module.css

@@ -0,0 +1,55 @@
+.root {
+  padding: var(--_table-cell-py) var(--st-space-4);
+  font-size: var(--st-font-size-xs);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-muted);
+  white-space: nowrap;
+  user-select: none;
+  border-bottom: 1px solid var(--st-color-border);
+}
+
+/* ── Alignment ── */
+
+.left {
+  text-align: left;
+}
+
+.center {
+  text-align: center;
+}
+
+.right {
+  text-align: right;
+}
+
+/* ── Content wrapper ── */
+
+.content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--st-space-1);
+}
+
+/* ── Sort icon ── */
+
+.sortIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+/* ── Sortable ── */
+
+.sortable {
+  cursor: pointer;
+}
+
+.sortable:hover {
+  background: var(--st-color-neutral-100);
+  color: var(--st-color-foreground);
+}
+
+/* ── Active sort ── */
+
+.active {
+  color: var(--st-color-foreground);
+}

package/registry/components/Table/TableHeaderCell.tsx

@@ -0,0 +1,98 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { useTable } from './TableContext';
+import type { TableHeaderCellProps } from './Table.types';
+import type { TableSortDirection } from './Table.types';
+import styles from './TableHeaderCell.module.css';
+
+function SortIcon({ direction }: { direction?: TableSortDirection }) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M8 3L11 7H5L8 3Z"
+        fill={
+          direction === 'asc'
+            ? 'currentColor'
+            : 'var(--st-color-neutral-300)'
+        }
+      />
+      <path
+        d="M8 13L5 9H11L8 13Z"
+        fill={
+          direction === 'desc'
+            ? 'currentColor'
+            : 'var(--st-color-neutral-300)'
+        }
+      />
+    </svg>
+  );
+}
+
+export const TableHeaderCell = forwardRef<
+  HTMLTableCellElement,
+  TableHeaderCellProps
+>(
+  (
+    { sortKey, width, align = 'left', className, children, style, ...rest },
+    ref
+  ) => {
+    const { sortKey: activeSortKey, sortDirection, onSortChange } = useTable();
+    const sortable = !!sortKey;
+    const isActive = sortable && sortKey === activeSortKey;
+    const activeDirection = isActive ? sortDirection : undefined;
+
+    function handleClick() {
+      if (!sortable || !onSortChange || !sortKey) return;
+
+      let nextDirection: TableSortDirection = 'asc';
+      if (isActive && sortDirection === 'asc') {
+        nextDirection = 'desc';
+      } else if (isActive && sortDirection === 'desc') {
+        nextDirection = 'asc';
+      }
+      onSortChange(sortKey, nextDirection);
+    }
+
+    const ariaSortValue = isActive
+      ? sortDirection === 'asc'
+        ? 'ascending'
+        : 'descending'
+      : sortable
+        ? 'none'
+        : undefined;
+
+    return (
+      <th
+        ref={ref}
+        className={cn(
+          styles.root,
+          styles[align],
+          sortable && styles.sortable,
+          isActive && styles.active,
+          className
+        )}
+        style={{ width, ...style }}
+        onClick={sortable ? handleClick : undefined}
+        aria-sort={ariaSortValue}
+        {...rest}
+      >
+        <span className={styles.content}>
+          {children}
+          {sortable && (
+            <span className={styles.sortIcon}>
+              <SortIcon direction={activeDirection} />
+            </span>
+          )}
+        </span>
+      </th>
+    );
+  }
+);
+
+TableHeaderCell.displayName = 'TableHeaderCell';

package/registry/components/Table/TableRow.module.css

@@ -0,0 +1,53 @@
+.root {
+  border-bottom: 1px solid var(--st-color-border);
+  transition: background-color var(--st-transition-fast);
+}
+
+.root:hover {
+  background-color: var(--st-color-neutral-50);
+}
+
+/* ── Selected ── */
+
+.selected {
+  background-color: color-mix(
+    in srgb,
+    var(--st-color-primary) 6%,
+    var(--st-color-background)
+  );
+}
+
+.selected:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--st-color-primary) 10%,
+    var(--st-color-background)
+  );
+}
+
+/* ── Disabled ── */
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ── Last row in tbody: no double border ── */
+
+tbody > .root:last-child {
+  border-bottom: none;
+}
+
+/* ── Striped rows ── */
+
+tbody.striped > .root:nth-child(even) {
+  background-color: var(--st-color-neutral-50);
+}
+
+tbody.striped > .root.selected:nth-child(even) {
+  background-color: color-mix(
+    in srgb,
+    var(--st-color-primary) 6%,
+    var(--st-color-background)
+  );
+}

package/registry/components/Table/TableRow.tsx

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { useTable } from './TableContext';
+import type { TableRowProps } from './Table.types';
+import styles from './TableRow.module.css';
+
+export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  ({ rowId, disabled = false, className, children, ...rest }, ref) => {
+    const { selectedRows } = useTable();
+    const isSelected = !!rowId && selectedRows.includes(rowId);
+
+    return (
+      <tr
+        ref={ref}
+        className={cn(
+          styles.root,
+          isSelected && styles.selected,
+          disabled && styles.disabled,
+          className
+        )}
+        aria-selected={isSelected || undefined}
+        aria-disabled={disabled || undefined}
+        {...rest}
+      >
+        {children}
+      </tr>
+    );
+  }
+);
+
+TableRow.displayName = 'TableRow';

package/registry/components/Table/TableToolbar.module.css

@@ -0,0 +1,7 @@
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-3);
+  padding: var(--st-space-4);
+  border-bottom: 1px solid var(--st-color-border);
+}