@soadtech/cli 0.1.0

package/registry/components/Dialog/Dialog.module.css

@@ -0,0 +1,18 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--st-z-modal);
+  background: var(--st-color-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.panel {
+  width: 100%;
+  max-width: 480px;
+  background: var(--st-color-surface);
+  border-radius: var(--st-radius-xl);
+  box-shadow: var(--st-shadow-xl);
+  font-family: var(--st-font-family);
+}

package/registry/components/Dialog/Dialog.tsx

@@ -0,0 +1,69 @@
+import { forwardRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../utils/cn';
+import { DialogContext } from './DialogContext';
+import type { DialogProps } from './Dialog.types';
+import styles from './Dialog.module.css';
+
+export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
+  (
+    {
+      open,
+      onClose,
+      closeOnOverlayClick = true,
+      closeOnEscape = true,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    // Escape key handler
+    useEffect(() => {
+      if (!open || !closeOnEscape) return;
+
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') onClose();
+      };
+
+      document.addEventListener('keydown', handleKeyDown);
+      return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [open, closeOnEscape, onClose]);
+
+    // Body scroll lock
+    useEffect(() => {
+      if (!open) return;
+
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = prev;
+      };
+    }, [open]);
+
+    if (!open) return null;
+
+    return createPortal(
+      <div
+        className={styles.overlay}
+        onClick={closeOnOverlayClick ? onClose : undefined}
+      >
+        <DialogContext.Provider value={{ onClose }}>
+          <div
+            ref={ref}
+            role="dialog"
+            aria-modal="true"
+            className={cn(styles.panel, className)}
+            onClick={(e) => e.stopPropagation()}
+            {...rest}
+          >
+            {children}
+          </div>
+        </DialogContext.Provider>
+      </div>,
+      document.body
+    );
+  }
+);
+
+Dialog.displayName = 'Dialog';

package/registry/components/Dialog/Dialog.types.ts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type DialogIconStatus = 'info' | 'warning' | 'success' | 'error';
+
+export interface DialogProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+  /** Controls visibility */
+  open: boolean;
+  /** Called on overlay click, Escape, or close button */
+  onClose: () => void;
+  /** Close when clicking overlay backdrop */
+  closeOnOverlayClick?: boolean;
+  /** Close when pressing Escape */
+  closeOnEscape?: boolean;
+}
+
+export interface DialogHeaderProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Leading icon slot */
+  icon?: ReactNode;
+  /** Bold title text */
+  title?: string;
+  /** Muted description below title */
+  description?: string;
+  /** `undefined` = use context from Dialog; `null` = hide close button */
+  onClose?: (() => void) | null;
+}
+
+export interface DialogBodyProps extends HTMLAttributes<HTMLDivElement> {}
+
+export type DialogFooterLayout = 'horizontal' | 'vertical';
+
+export interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
+  /** Stacking direction */
+  layout?: DialogFooterLayout;
+  /** Left-aligned link slot (horizontal) or top (vertical) */
+  link?: ReactNode;
+}
+
+export interface DialogIconProps extends HTMLAttributes<HTMLDivElement> {
+  /** Determines colors and default icon */
+  status: DialogIconStatus;
+  /** Custom icon override */
+  icon?: ReactNode;
+}

package/registry/components/Dialog/DialogBody.module.css

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

package/registry/components/Dialog/DialogBody.tsx

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

package/registry/components/Dialog/DialogContext.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+export interface DialogContextValue {
+  onClose: () => void;
+}
+
+export const DialogContext = createContext<DialogContextValue | null>(null);
+
+export function useDialog(): DialogContextValue | null {
+  return useContext(DialogContext);
+}

package/registry/components/Dialog/DialogFooter.module.css

@@ -0,0 +1,38 @@
+.root {
+  display: flex;
+  gap: var(--st-space-3);
+  padding: 0 var(--st-space-6) var(--st-space-6);
+}
+
+/* ─── Horizontal layout ─── */
+
+.horizontal {
+  align-items: center;
+}
+
+.horizontal .link {
+  flex-shrink: 0;
+}
+
+.horizontal .actions {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-3);
+  margin-left: auto;
+}
+
+/* ─── Vertical layout ─── */
+
+.vertical {
+  flex-direction: column;
+}
+
+.vertical .actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-3);
+}
+
+.vertical .actions > * {
+  width: 100%;
+}

package/registry/components/Dialog/DialogFooter.tsx

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { DialogFooterProps } from './Dialog.types';
+import styles from './DialogFooter.module.css';
+
+export const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(
+  (
+    {
+      layout = 'horizontal',
+      link,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(styles.root, styles[layout], className)}
+        {...rest}
+      >
+        {link && <div className={styles.link}>{link}</div>}
+        <div className={styles.actions}>{children}</div>
+      </div>
+    );
+  }
+);
+
+DialogFooter.displayName = 'DialogFooter';

package/registry/components/Dialog/DialogHeader.module.css

@@ -0,0 +1,70 @@
+.root {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--st-space-3);
+  padding: var(--st-space-6);
+}
+
+/* ─── Icon ─── */
+
+.icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--st-color-muted);
+  margin-top: 1px;
+}
+
+/* ─── Content ─── */
+
+.content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.title {
+  font-size: var(--st-font-size-md);
+  font-weight: var(--st-font-weight-semibold);
+  line-height: var(--st-line-height-tight);
+  color: var(--st-color-foreground);
+  margin: 0;
+}
+
+.description {
+  font-size: var(--st-font-size-sm);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-muted);
+  margin: 0;
+}
+
+/* ─── Close button ─── */
+
+.close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: var(--st-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity var(--st-transition-fast);
+  color: var(--st-color-foreground);
+  margin-left: auto;
+}
+
+.close:hover {
+  opacity: 1;
+}
+
+.close:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: 2px;
+}

package/registry/components/Dialog/DialogHeader.tsx

@@ -0,0 +1,72 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { useDialog } from './DialogContext';
+import type { DialogHeaderProps } from './Dialog.types';
+import styles from './DialogHeader.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 DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
+  (
+    {
+      icon,
+      title,
+      description,
+      onClose,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const ctx = useDialog();
+    // undefined = use context; null = hide; function = use directly
+    const closeHandler =
+      onClose === undefined ? ctx?.onClose : onClose ?? undefined;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(styles.root, className)}
+        {...rest}
+      >
+        {icon && <span className={styles.icon}>{icon}</span>}
+
+        {(title || description) && (
+          <div className={styles.content}>
+            {title && <p className={styles.title}>{title}</p>}
+            {description && (
+              <p className={styles.description}>{description}</p>
+            )}
+          </div>
+        )}
+
+        {children}
+
+        {closeHandler && (
+          <button
+            type="button"
+            className={styles.close}
+            onClick={closeHandler}
+            aria-label="Close dialog"
+          >
+            <CloseIcon />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+DialogHeader.displayName = 'DialogHeader';

package/registry/components/Dialog/DialogIcon.module.css

@@ -0,0 +1,31 @@
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--st-radius-full);
+  flex-shrink: 0;
+}
+
+/* ─── Status colors ─── */
+
+.info {
+  background-color: var(--st-color-info-subtle);
+  color: var(--st-color-info);
+}
+
+.success {
+  background-color: var(--st-color-success-subtle);
+  color: var(--st-color-success);
+}
+
+.warning {
+  background-color: var(--st-color-warning-subtle);
+  color: var(--st-color-warning);
+}
+
+.error {
+  background-color: var(--st-color-error-subtle);
+  color: var(--st-color-error);
+}

package/registry/components/Dialog/DialogIcon.tsx

@@ -0,0 +1,89 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { DialogIconProps, DialogIconStatus } from './Dialog.types';
+import styles from './DialogIcon.module.css';
+
+function InfoIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <circle cx="10" cy="10" r="8.5" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M10 9V14M10 6.5V7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function SuccessIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <circle cx="10" cy="10" r="8.5" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M6.5 10L9 12.5L13.5 7.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function WarningIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <path
+        d="M10 2.5L18.5 17.5H1.5L10 2.5Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 8V12M10 14.5V15"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function ErrorIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <circle cx="10" cy="10" r="8.5" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M10 6V11M10 13.5V14"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+const defaultIcons: Record<DialogIconStatus, JSX.Element> = {
+  info: <InfoIcon />,
+  success: <SuccessIcon />,
+  warning: <WarningIcon />,
+  error: <ErrorIcon />,
+};
+
+export const DialogIcon = forwardRef<HTMLDivElement, DialogIconProps>(
+  ({ status, icon, className, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(styles.root, styles[status], className)}
+        {...rest}
+      >
+        {icon ?? defaultIcons[status]}
+      </div>
+    );
+  }
+);
+
+DialogIcon.displayName = 'DialogIcon';

package/registry/components/Dialog/index.ts

@@ -0,0 +1,14 @@
+export { Dialog } from './Dialog';
+export { DialogHeader } from './DialogHeader';
+export { DialogBody } from './DialogBody';
+export { DialogFooter } from './DialogFooter';
+export { DialogIcon } from './DialogIcon';
+export type {
+  DialogProps,
+  DialogHeaderProps,
+  DialogBodyProps,
+  DialogFooterProps,
+  DialogFooterLayout,
+  DialogIconProps,
+  DialogIconStatus,
+} from './Dialog.types';

package/registry/components/Divider/Divider.module.css

@@ -0,0 +1,19 @@
+.root {
+  flex-shrink: 0;
+  border: none;
+  background-color: var(--st-color-border);
+}
+
+/* ─── Horizontal ─── */
+
+.horizontal {
+  width: 100%;
+  height: 1px;
+}
+
+/* ─── Vertical ─── */
+
+.vertical {
+  align-self: stretch;
+  width: 1px;
+}

package/registry/components/Divider/Divider.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { DividerProps } from './Divider.types';
+import styles from './Divider.module.css';
+
+export const Divider = forwardRef<HTMLDivElement, DividerProps>(
+  ({ orientation = 'horizontal', className, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="separator"
+        aria-orientation={orientation}
+        className={cn(styles.root, styles[orientation], className)}
+        {...rest}
+      />
+    );
+  }
+);
+
+Divider.displayName = 'Divider';

package/registry/components/Divider/Divider.types.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'react';
+
+export type DividerOrientation = 'horizontal' | 'vertical';
+
+export interface DividerProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+  /** Line direction */
+  orientation?: DividerOrientation;
+}

package/registry/components/Divider/index.ts

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps, DividerOrientation } from './Divider.types';

package/registry/components/DropdownMenu/DropdownMenu.module.css

@@ -0,0 +1,9 @@
+.root {
+  background: var(--st-color-surface);
+  border-radius: var(--st-radius-xl);
+  box-shadow: var(--st-shadow-lg);
+  border: 1px solid var(--st-color-border);
+  padding: var(--st-space-2) 0;
+  min-width: 200px;
+  font-family: var(--st-font-family);
+}

package/registry/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,21 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { DropdownMenuProps } from './DropdownMenu.types';
+import styles from './DropdownMenu.module.css';
+
+export const DropdownMenu = forwardRef<HTMLDivElement, DropdownMenuProps>(
+  ({ className, children, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="menu"
+        className={cn(styles.root, className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+DropdownMenu.displayName = 'DropdownMenu';

package/registry/components/DropdownMenu/DropdownMenu.types.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface DropdownMenuProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {}
+
+export interface DropdownMenuItemProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+  /** Leading icon slot */
+  icon?: ReactNode;
+  /** Keyboard shortcut label (right-aligned, muted) */
+  shortcut?: string;
+  /** Custom trailing content (submenu chevron, switch, etc.) */
+  suffix?: ReactNode;
+  /** Disables the item */
+  disabled?: boolean;
+}
+
+export interface DropdownMenuHeaderProps
+  extends HTMLAttributes<HTMLDivElement> {}
+
+export interface DropdownMenuDividerProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {}

package/registry/components/DropdownMenu/DropdownMenuDivider.module.css

@@ -0,0 +1,5 @@
+.root {
+  height: 1px;
+  background-color: var(--st-color-border);
+  margin: var(--st-space-1) 0;
+}

package/registry/components/DropdownMenu/DropdownMenuDivider.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { DropdownMenuDividerProps } from './DropdownMenu.types';
+import styles from './DropdownMenuDivider.module.css';
+
+export const DropdownMenuDivider = forwardRef<
+  HTMLDivElement,
+  DropdownMenuDividerProps
+>(({ className, ...rest }, ref) => {
+  return (
+    <div
+      ref={ref}
+      role="separator"
+      className={cn(styles.root, className)}
+      {...rest}
+    />
+  );
+});
+
+DropdownMenuDivider.displayName = 'DropdownMenuDivider';

package/registry/components/DropdownMenu/DropdownMenuHeader.module.css

@@ -0,0 +1,7 @@
+.root {
+  padding: var(--st-space-2) var(--st-space-3);
+  font-size: var(--st-font-size-xs);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-muted);
+  line-height: var(--st-line-height-normal);
+}

package/registry/components/DropdownMenu/DropdownMenuHeader.tsx

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