@soadtech/cli 0.1.0

package/registry/components/Notification/NotificationPanel.tsx

@@ -0,0 +1,68 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Button } from '../Button';
+import type { NotificationPanelProps } from './Notification.types';
+import styles from './NotificationPanel.module.css';
+
+function CloseIcon() {
+  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"
+      />
+    </svg>
+  );
+}
+
+export const NotificationPanel = forwardRef<HTMLDivElement, NotificationPanelProps>(
+  (
+    {
+      title = 'Notifications',
+      onClose,
+      footerLabel = 'See all notifications',
+      onFooterClick,
+      children,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div ref={ref} className={cn(styles.root, className)} {...rest}>
+        <div className={styles.header}>
+          <span className={styles.title}>{title}</span>
+          {onClose && (
+            <button
+              type="button"
+              className={styles.closeBtn}
+              onClick={onClose}
+              aria-label="Close notifications"
+            >
+              <CloseIcon />
+            </button>
+          )}
+        </div>
+
+        <div className={styles.body}>{children}</div>
+
+        {onFooterClick && (
+          <div className={styles.footer}>
+            <Button
+              variant="fill"
+              size="sm"
+              className={styles.footerBtn}
+              onClick={onFooterClick}
+            >
+              {footerLabel}
+            </Button>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+NotificationPanel.displayName = 'NotificationPanel';

package/registry/components/Notification/NotificationReply.module.css

@@ -0,0 +1,56 @@
+/* ═══ NotificationReply ═══ */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-2);
+}
+
+.inputRow {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+}
+
+.inputWrap {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  flex: 1;
+  min-width: 0;
+  padding: var(--st-space-1) var(--st-space-2);
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-md);
+  background-color: var(--st-color-surface);
+}
+
+.inputWrap:focus-within {
+  border-color: var(--st-color-primary);
+}
+
+.mentions {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-1);
+  flex-shrink: 0;
+}
+
+.input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-xs);
+  color: var(--st-color-foreground);
+}
+
+.input::placeholder {
+  color: var(--st-color-muted);
+}
+
+.actions {
+  display: flex;
+  gap: var(--st-space-2);
+}

package/registry/components/Notification/NotificationReply.tsx

@@ -0,0 +1,52 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Avatar } from '../Avatar';
+import { Button } from '../Button';
+import type { NotificationReplyProps } from './Notification.types';
+import styles from './NotificationReply.module.css';
+
+export const NotificationReply = forwardRef<HTMLDivElement, NotificationReplyProps>(
+  (
+    {
+      avatarSrc,
+      avatarAlt = '',
+      value = '',
+      onValueChange,
+      mentions,
+      placeholder = 'Reply to Emma...',
+      onSend,
+      onCancel,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div ref={ref} className={cn(styles.root, className)} {...rest}>
+        <div className={styles.inputRow}>
+          <Avatar src={avatarSrc} alt={avatarAlt} size="sm" />
+          <div className={styles.inputWrap}>
+            {mentions && <span className={styles.mentions}>{mentions}</span>}
+            <input
+              type="text"
+              className={styles.input}
+              value={value}
+              onChange={(e) => onValueChange?.(e.target.value)}
+              placeholder={placeholder}
+            />
+          </div>
+        </div>
+        <div className={styles.actions}>
+          <Button size="sm" variant="fill" onClick={onSend}>
+            Send Reply
+          </Button>
+          <Button size="sm" variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </div>
+    );
+  }
+);
+
+NotificationReply.displayName = 'NotificationReply';

package/registry/components/Notification/index.ts

@@ -0,0 +1,9 @@
+export { NotificationItem } from './NotificationItem';
+export { NotificationReply } from './NotificationReply';
+export { NotificationPanel } from './NotificationPanel';
+export type {
+  NotificationItemProps,
+  NotificationCategory,
+  NotificationReplyProps,
+  NotificationPanelProps,
+} from './Notification.types';

package/registry/components/Pagination/Pagination.module.css

@@ -0,0 +1,123 @@
+/* ═══ Pagination ═══ */
+
+/* ─── Root ─── */
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  font-family: var(--st-font-family);
+}
+
+/* ─── Page text (text variant) ─── */
+.pageText {
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-medium);
+  color: var(--st-color-foreground);
+  white-space: nowrap;
+  user-select: none;
+}
+
+/* ─── Page list ─── */
+.list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--st-space-1);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ─── Ellipsis ─── */
+.ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--st-font-size-sm);
+  color: var(--st-color-muted);
+  user-select: none;
+  pointer-events: none;
+}
+
+.ellipsis.sm {
+  width: 32px;
+  height: 32px;
+}
+
+.ellipsis.md {
+  width: 40px;
+  height: 40px;
+}
+
+/* ─── Page item ─── */
+.pageItem {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  border-radius: var(--st-radius-full);
+  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;
+  transition: background-color var(--st-transition-fast),
+    color var(--st-transition-fast);
+  user-select: none;
+  padding: 0;
+}
+
+.pageItem.sm {
+  width: 32px;
+  height: 32px;
+}
+
+.pageItem.md {
+  width: 40px;
+  height: 40px;
+}
+
+.pageItem:hover:not(:disabled):not(.pageItemActive) {
+  background-color: var(--st-color-neutral-100);
+}
+
+.pageItem:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: 2px;
+}
+
+.pageItem:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ─── Active page ─── */
+.pageItemActive {
+  background-color: var(--st-color-neutral-900);
+  color: #ffffff;
+}
+
+.pageItemActive:hover:not(:disabled) {
+  background-color: var(--st-color-neutral-800);
+}
+
+/* ─── Congested variant ─── */
+.listCongested {
+  gap: 0;
+  border: 1px solid var(--st-color-border-strong);
+  border-radius: var(--st-radius-sm);
+  overflow: hidden;
+}
+
+.pageItemBordered {
+  border-radius: 0;
+  border-inline-start: 1px solid var(--st-color-border-strong);
+}
+
+.listCongested li:first-child .pageItemBordered {
+  border-inline-start: none;
+}
+
+.pageItemBordered.pageItemActive {
+  border-color: var(--st-color-neutral-900);
+}

package/registry/components/Pagination/Pagination.tsx

@@ -0,0 +1,212 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Button } from '../Button';
+import type { PaginationProps } from './Pagination.types';
+import styles from './Pagination.module.css';
+
+/* ─── Inline SVGs ─── */
+
+function ChevronLeft() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M10 12L6 8L10 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ChevronRight() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M6 4L10 8L6 12"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/* ─── Page range algorithm ─── */
+
+type RangeItem = number | 'ellipsis';
+
+function range(start: number, end: number): number[] {
+  const result: number[] = [];
+  for (let i = start; i <= end; i++) result.push(i);
+  return result;
+}
+
+export function buildRange(
+  page: number,
+  count: number,
+  siblingCount: number,
+  boundaryCount: number
+): RangeItem[] {
+  // Total slots: boundaries on each side + siblings on each side + current + 2 possible ellipses
+  const totalSlots = boundaryCount * 2 + siblingCount * 2 + 3;
+
+  if (count <= totalSlots) {
+    return range(1, count);
+  }
+
+  const leftBoundary = range(1, boundaryCount);
+  const rightBoundary = range(count - boundaryCount + 1, count);
+
+  const siblingLeft = Math.max(page - siblingCount, boundaryCount + 1);
+  const siblingRight = Math.min(page + siblingCount, count - boundaryCount);
+
+  const showLeftEllipsis = siblingLeft > boundaryCount + 2;
+  const showRightEllipsis = siblingRight < count - boundaryCount - 1;
+
+  const result: RangeItem[] = [];
+
+  // Left boundary
+  result.push(...leftBoundary);
+
+  // Left ellipsis or fill
+  if (showLeftEllipsis) {
+    result.push('ellipsis');
+  } else {
+    // Fill from boundaryCount+1 to siblingLeft-1
+    for (let i = boundaryCount + 1; i < siblingLeft; i++) {
+      result.push(i);
+    }
+  }
+
+  // Sibling range including current page
+  result.push(...range(siblingLeft, siblingRight));
+
+  // Right ellipsis or fill
+  if (showRightEllipsis) {
+    result.push('ellipsis');
+  } else {
+    // Fill from siblingRight+1 to count-boundaryCount
+    for (let i = siblingRight + 1; i <= count - boundaryCount; i++) {
+      result.push(i);
+    }
+  }
+
+  // Right boundary
+  result.push(...rightBoundary);
+
+  return result;
+}
+
+/* ─── Component ─── */
+
+export const Pagination = forwardRef<HTMLElement, PaginationProps>(
+  (
+    {
+      page,
+      count,
+      onPageChange,
+      size = 'md',
+      variant = 'spaced',
+      siblingCount = 1,
+      boundaryCount = 1,
+      disabled = false,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const isFirst = page <= 1;
+    const isLast = page >= count;
+
+    const pages = buildRange(page, count, siblingCount, boundaryCount);
+
+    const buttonSize = size === 'sm' ? 'sm' : 'md';
+
+    const prevButton = (
+      <Button
+        variant="outline"
+        size={buttonSize}
+        disabled={disabled || isFirst}
+        onClick={() => onPageChange(page - 1)}
+        aria-label="Previous page"
+        iconLeft={<ChevronLeft />}
+      >
+        {size === 'md' ? 'Previous' : undefined}
+      </Button>
+    );
+
+    const nextButton = (
+      <Button
+        variant="outline"
+        size={buttonSize}
+        disabled={disabled || isLast}
+        onClick={() => onPageChange(page + 1)}
+        aria-label="Next page"
+        iconRight={<ChevronRight />}
+      >
+        {size === 'md' ? 'Next' : undefined}
+      </Button>
+    );
+
+    return (
+      <nav
+        ref={ref}
+        aria-label="Pagination"
+        className={cn(styles.root, styles[size], styles[variant], className)}
+        {...rest}
+      >
+        {prevButton}
+
+        {variant === 'text' ? (
+          <span className={styles.pageText}>
+            Page {page} of {count}
+          </span>
+        ) : (
+          <ol
+            className={cn(
+              styles.list,
+              variant === 'congested' && styles.listCongested
+            )}
+          >
+            {pages.map((item, index) =>
+              item === 'ellipsis' ? (
+                <li key={`ellipsis-${index}`}>
+                  <span
+                    className={cn(styles.ellipsis, styles[size])}
+                    aria-hidden
+                  >
+                    &hellip;
+                  </span>
+                </li>
+              ) : (
+                <li key={item}>
+                  <button
+                    type="button"
+                    className={cn(
+                      styles.pageItem,
+                      styles[size],
+                      item === page && styles.pageItemActive,
+                      variant === 'congested' && styles.pageItemBordered
+                    )}
+                    disabled={disabled}
+                    aria-current={item === page ? 'page' : undefined}
+                    onClick={() => onPageChange(item)}
+                  >
+                    {item}
+                  </button>
+                </li>
+              )
+            )}
+          </ol>
+        )}
+
+        {nextButton}
+      </nav>
+    );
+  }
+);
+
+Pagination.displayName = 'Pagination';

package/registry/components/Pagination/Pagination.types.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react';
+
+export type PaginationSize = 'sm' | 'md';
+export type PaginationVariant = 'text' | 'spaced' | 'congested';
+
+export interface PaginationProps
+  extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+  /** Current page (1-based) */
+  page: number;
+  /** Total number of pages */
+  count: number;
+  /** Callback when the page changes */
+  onPageChange: (page: number) => void;
+  /** Size — sm uses icon-only nav buttons, md uses labeled nav buttons */
+  size?: PaginationSize;
+  /** Layout variant */
+  variant?: PaginationVariant;
+  /** Number of sibling pages around the active page */
+  siblingCount?: number;
+  /** Number of pages shown at the start and end */
+  boundaryCount?: number;
+  /** Disables all interaction */
+  disabled?: boolean;
+}

package/registry/components/Pagination/PaginationDots.module.css

@@ -0,0 +1,60 @@
+/* ═══ PaginationDots ═══ */
+
+/* ─── Root ─── */
+.root {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ─── List ─── */
+.list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ─── Indicator base ─── */
+.indicator {
+  display: block;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: background-color var(--st-transition-fast);
+}
+
+.indicator:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: 2px;
+}
+
+.indicator:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ─── Dot variant ─── */
+.dot .indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-neutral-300);
+}
+
+.dot .indicatorActive {
+  background-color: var(--st-color-neutral-900);
+}
+
+/* ─── Tab variant ─── */
+.tab .indicator {
+  width: 24px;
+  height: 4px;
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-neutral-300);
+}
+
+.tab .indicatorActive {
+  background-color: var(--st-color-neutral-900);
+}

package/registry/components/Pagination/PaginationDots.tsx

@@ -0,0 +1,48 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { PaginationDotsProps } from './PaginationDots.types';
+import styles from './PaginationDots.module.css';
+
+export const PaginationDots = forwardRef<HTMLElement, PaginationDotsProps>(
+  (
+    {
+      count,
+      activeIndex,
+      onIndexChange,
+      variant = 'dot',
+      disabled = false,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <nav
+        ref={ref}
+        aria-label="Pagination indicators"
+        className={cn(styles.root, styles[variant], className)}
+        {...rest}
+      >
+        <ol className={styles.list}>
+          {Array.from({ length: count }, (_, i) => (
+            <li key={i}>
+              <button
+                type="button"
+                className={cn(
+                  styles.indicator,
+                  i === activeIndex && styles.indicatorActive
+                )}
+                disabled={disabled}
+                aria-label={`Go to slide ${i + 1}`}
+                aria-current={i === activeIndex ? 'step' : undefined}
+                onClick={() => onIndexChange?.(i)}
+              />
+            </li>
+          ))}
+        </ol>
+      </nav>
+    );
+  }
+);
+
+PaginationDots.displayName = 'PaginationDots';

package/registry/components/Pagination/PaginationDots.types.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'react';
+
+export type PaginationDotsVariant = 'dot' | 'tab';
+
+export interface PaginationDotsProps
+  extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+  /** Number of indicators */
+  count: number;
+  /** Active index (0-based) */
+  activeIndex: number;
+  /** Click handler for an indicator */
+  onIndexChange?: (index: number) => void;
+  /** Indicator shape */
+  variant?: PaginationDotsVariant;
+  /** Disables all interaction */
+  disabled?: boolean;
+}

package/registry/components/Pagination/index.ts

@@ -0,0 +1,12 @@
+export { Pagination } from './Pagination';
+export type {
+  PaginationProps,
+  PaginationSize,
+  PaginationVariant,
+} from './Pagination.types';
+
+export { PaginationDots } from './PaginationDots';
+export type {
+  PaginationDotsProps,
+  PaginationDotsVariant,
+} from './PaginationDots.types';