@soadtech/cli 0.1.0

package/registry/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,81 @@
+import { forwardRef, useState, useRef, useCallback } from 'react';
+import { cn } from '../../utils/cn';
+import type { TooltipProps } from './Tooltip.types';
+import styles from './Tooltip.module.css';
+
+export const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(
+  (
+    {
+      content,
+      title,
+      body,
+      action,
+      placement = 'top',
+      align = 'center',
+      variant = 'default',
+      open,
+      children,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const [hovered, setHovered] = useState(false);
+    const showTimerRef = useRef<ReturnType<typeof setTimeout>>();
+    const hideTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
+    const isRich = !!(title || body || action);
+    const hasContent = isRich || !!content;
+    const visible = open !== undefined ? open : hovered;
+
+    const show = useCallback(() => {
+      clearTimeout(hideTimerRef.current);
+      showTimerRef.current = setTimeout(() => setHovered(true), 200);
+    }, []);
+
+    const hide = useCallback(() => {
+      clearTimeout(showTimerRef.current);
+      hideTimerRef.current = setTimeout(() => setHovered(false), 100);
+    }, []);
+
+    const posClass = styles[`${placement}_${align}`];
+
+    return (
+      <span
+        ref={ref}
+        className={cn(styles.root, className)}
+        onMouseEnter={open === undefined ? show : undefined}
+        onMouseLeave={open === undefined ? hide : undefined}
+        onFocus={open === undefined ? show : undefined}
+        onBlur={open === undefined ? hide : undefined}
+        {...rest}
+      >
+        {children}
+        {hasContent && visible && (
+          <span
+            role="tooltip"
+            className={cn(
+              styles.tooltip,
+              styles[variant],
+              isRich ? styles.rich : styles.inline,
+              posClass
+            )}
+          >
+            <span className={styles.beak} />
+            {isRich ? (
+              <>
+                {title && <span className={styles.title}>{title}</span>}
+                {body && <span className={styles.body}>{body}</span>}
+                {action && <span className={styles.action}>{action}</span>}
+              </>
+            ) : (
+              <span className={styles.content}>{content}</span>
+            )}
+          </span>
+        )}
+      </span>
+    );
+  }
+);
+
+Tooltip.displayName = 'Tooltip';

package/registry/components/Tooltip/Tooltip.types.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type TooltipPlacement = 'top' | 'bottom' | 'start' | 'end';
+export type TooltipAlign = 'start' | 'center' | 'end';
+export type TooltipVariant = 'default' | 'inverted';
+
+export interface TooltipProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
+  /** Inline mode text */
+  content?: string;
+  /** Rich mode title */
+  title?: string;
+  /** Rich mode body */
+  body?: string;
+  /** Rich mode action slot (e.g. Button) */
+  action?: ReactNode;
+  /** Tooltip placement relative to the trigger */
+  placement?: TooltipPlacement;
+  /** Tooltip alignment along the placement axis */
+  align?: TooltipAlign;
+  /** Visual variant */
+  variant?: TooltipVariant;
+  /** Controlled visibility — overrides hover/focus behavior */
+  open?: boolean;
+  /** Trigger element */
+  children: ReactNode;
+}

package/registry/components/Tooltip/index.ts

@@ -0,0 +1,7 @@
+export { Tooltip } from './Tooltip';
+export type {
+  TooltipProps,
+  TooltipPlacement,
+  TooltipAlign,
+  TooltipVariant,
+} from './Tooltip.types';

package/registry/components/TreeviewList/TreeviewItem.module.css

@@ -0,0 +1,89 @@
+/* ─── Trigger row ─── */
+
+.trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--st-space-2);
+  padding: var(--st-space-2) var(--st-space-3);
+  background: transparent;
+  border: none;
+  border-radius: var(--st-radius-md);
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-sm);
+  color: var(--st-color-foreground);
+  cursor: pointer;
+  text-align: left;
+  transition: background-color var(--st-transition-fast);
+}
+
+.trigger:hover:not(:disabled) {
+  background-color: var(--st-color-neutral-100);
+}
+
+.trigger:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: -2px;
+}
+
+.trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.selected {
+  background-color: var(--st-color-neutral-100);
+}
+
+.selected:hover:not(:disabled) {
+  background-color: var(--st-color-neutral-100);
+}
+
+/* ─── Chevron ─── */
+
+.chevron {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s ease;
+}
+
+.chevronOpen {
+  transform: rotate(90deg);
+}
+
+/* ─── Icon ─── */
+
+.icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ─── Label ─── */
+
+.label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ─── Animated panel ─── */
+
+.panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.2s ease;
+}
+
+.panelOpen {
+  grid-template-rows: 1fr;
+}
+
+.panelContent {
+  overflow: hidden;
+}

package/registry/components/TreeviewList/TreeviewItem.tsx

@@ -0,0 +1,142 @@
+import { forwardRef, useState, Children } from 'react';
+import { cn } from '../../utils/cn';
+import { TreeviewListContext, useTreeviewDepth } from './TreeviewListContext';
+import type { TreeviewItemProps } from './TreeviewList.types';
+import styles from './TreeviewItem.module.css';
+
+/* ─── Inline SVG Icons ─── */
+
+function ChevronIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+      <path
+        d="M4.5 2.5L8 6L4.5 9.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function FolderIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M1.5 3.5C1.5 2.94772 1.94772 2.5 2.5 2.5H5.79289C6.05811 2.5 6.31246 2.60536 6.5 2.79289L7.70711 4H13.5C14.0523 4 14.5 4.44772 14.5 5V12.5C14.5 13.0523 14.0523 13.5 13.5 13.5H2.5C1.94772 13.5 1.5 13.0523 1.5 12.5V3.5Z"
+        fill="var(--st-color-primary)"
+      />
+    </svg>
+  );
+}
+
+function FolderOpenIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M1.5 3.5C1.5 2.94772 1.94772 2.5 2.5 2.5H5.79289C6.05811 2.5 6.31246 2.60536 6.5 2.79289L7.70711 4H13.5C14.0523 4 14.5 4.44772 14.5 5V6H3.5L1.5 12.5V3.5Z"
+        fill="var(--st-color-primary)"
+      />
+      <path
+        d="M3.5 6H14.5L12.8333 13.5H2.5C1.94772 13.5 1.5 13.0523 1.5 12.5L3.5 6Z"
+        fill="var(--st-color-primary)"
+      />
+    </svg>
+  );
+}
+
+function FileIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M3.5 1.5C2.94772 1.5 2.5 1.94772 2.5 2.5V13.5C2.5 14.0523 2.94772 14.5 3.5 14.5H12.5C13.0523 14.5 13.5 14.0523 13.5 13.5V5.5L9.5 1.5H3.5Z"
+        fill="var(--st-color-neutral-400)"
+      />
+      <path
+        d="M9.5 1.5V4.5C9.5 5.05228 9.94772 5.5 10.5 5.5H13.5"
+        fill="var(--st-color-neutral-300)"
+      />
+    </svg>
+  );
+}
+
+/* ─── Constants ─── */
+
+const INDENT_PX = 24;
+const CHEVRON_PLACEHOLDER_WIDTH = 12;
+
+export const TreeviewItem = forwardRef<HTMLDivElement, TreeviewItemProps>(
+  (
+    {
+      label,
+      icon,
+      disabled = false,
+      selected = false,
+      defaultExpanded = false,
+      expanded,
+      onExpandedChange,
+      onSelect,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const depth = useTreeviewDepth();
+    const isFolder = Children.count(children) > 0;
+
+    const [internalOpen, setInternalOpen] = useState(defaultExpanded);
+    const isOpen = expanded !== undefined ? expanded : internalOpen;
+
+    const toggle = () => {
+      if (disabled) return;
+
+      if (isFolder) {
+        const next = !isOpen;
+        if (expanded === undefined) setInternalOpen(next);
+        onExpandedChange?.(next);
+      }
+
+      onSelect?.();
+    };
+
+    const paddingLeft = depth * INDENT_PX;
+
+    return (
+      <div ref={ref} className={className} role="treeitem" aria-expanded={isFolder ? isOpen : undefined} {...rest}>
+        <button
+          type="button"
+          disabled={disabled}
+          className={cn(styles.trigger, selected && styles.selected)}
+          style={{ paddingLeft: paddingLeft + 'px' }}
+          onClick={toggle}
+        >
+          {isFolder ? (
+            <span className={cn(styles.chevron, isOpen && styles.chevronOpen)}>
+              <ChevronIcon />
+            </span>
+          ) : (
+            <span style={{ width: CHEVRON_PLACEHOLDER_WIDTH }} />
+          )}
+          <span className={styles.icon}>
+            {icon ?? (isFolder ? (isOpen ? <FolderOpenIcon /> : <FolderIcon />) : <FileIcon />)}
+          </span>
+          <span className={styles.label}>{label}</span>
+        </button>
+
+        {isFolder && (
+          <div className={cn(styles.panel, isOpen && styles.panelOpen)}>
+            <div className={styles.panelContent}>
+              <TreeviewListContext.Provider value={{ depth: depth + 1 }}>
+                {children}
+              </TreeviewListContext.Provider>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+TreeviewItem.displayName = 'TreeviewItem';

package/registry/components/TreeviewList/TreeviewList.module.css

@@ -0,0 +1,3 @@
+.root {
+  width: 100%;
+}

package/registry/components/TreeviewList/TreeviewList.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { TreeviewListContext } from './TreeviewListContext';
+import type { TreeviewListProps } from './TreeviewList.types';
+import styles from './TreeviewList.module.css';
+
+export const TreeviewList = forwardRef<HTMLDivElement, TreeviewListProps>(
+  ({ className, children, ...rest }, ref) => {
+    return (
+      <TreeviewListContext.Provider value={{ depth: 0 }}>
+        <div ref={ref} role="tree" className={cn(styles.root, className)} {...rest}>
+          {children}
+        </div>
+      </TreeviewListContext.Provider>
+    );
+  }
+);
+
+TreeviewList.displayName = 'TreeviewList';

package/registry/components/TreeviewList/TreeviewList.types.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface TreeviewListProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export interface TreeviewItemProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  label: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  selected?: boolean;
+  defaultExpanded?: boolean;
+  expanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  onSelect?: () => void;
+  children?: ReactNode;
+}

package/registry/components/TreeviewList/TreeviewListContext.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+export interface TreeviewListContextValue {
+  depth: number;
+}
+
+export const TreeviewListContext =
+  createContext<TreeviewListContextValue | null>(null);
+
+export function useTreeviewDepth(): number {
+  const ctx = useContext(TreeviewListContext);
+  return ctx?.depth ?? 0;
+}

package/registry/components/TreeviewList/index.ts

@@ -0,0 +1,6 @@
+export { TreeviewList } from './TreeviewList';
+export { TreeviewItem } from './TreeviewItem';
+export type {
+  TreeviewListProps,
+  TreeviewItemProps,
+} from './TreeviewList.types';

package/registry/components/VerificationCode/VerificationCode.module.css

@@ -0,0 +1,49 @@
+/* ─── Root ─── */
+.root {
+  display: inline-flex;
+  gap: var(--st-space-3);
+}
+
+/* ─── Digit box ─── */
+.digit {
+  width: 48px;
+  height: 48px;
+  border: 1.5px solid var(--st-color-border);
+  border-radius: var(--st-radius-full);
+  background: var(--st-color-neutral-50);
+  text-align: center;
+  font-size: var(--st-font-size-2xl);
+  font-weight: var(--st-font-weight-bold);
+  font-family: var(--st-font-family);
+  color: var(--st-color-foreground);
+  outline: none;
+  caret-color: var(--st-color-primary);
+  transition: border-color var(--st-transition-fast),
+    box-shadow var(--st-transition-fast);
+}
+
+.digit:focus {
+  border-color: var(--st-color-success);
+  box-shadow: 0 0 0 2px var(--st-color-success);
+  background: var(--st-color-background);
+}
+
+.filled {
+  border-color: var(--st-color-border);
+  background: var(--st-color-background);
+}
+
+.digitError {
+  border-color: var(--st-color-error);
+  color: var(--st-color-error);
+}
+
+.digitError:focus {
+  border-color: var(--st-color-error);
+  box-shadow: 0 0 0 2px var(--st-color-error);
+}
+
+.digit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/registry/components/VerificationCode/VerificationCode.tsx

@@ -0,0 +1,147 @@
+import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
+import { cn } from '../../utils/cn';
+import type { VerificationCodeProps } from './VerificationCode.types';
+import styles from './VerificationCode.module.css';
+
+function toDigits(value: string, length: number): string[] {
+  const chars = value.replace(/[^0-9]/g, '').split('');
+  return Array.from({ length }, (_, i) => chars[i] ?? '');
+}
+
+export const VerificationCode = forwardRef<HTMLDivElement, VerificationCodeProps>(
+  (
+    {
+      length = 4,
+      value,
+      defaultValue,
+      onChange,
+      onComplete,
+      error,
+      disabled,
+      autoFocus,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+    const [internalDigits, setInternalDigits] = useState<string[]>(() =>
+      toDigits(defaultValue ?? '', length),
+    );
+
+    const isControlled = value !== undefined;
+    const digits = isControlled ? toDigits(value, length) : internalDigits;
+
+    // Ensure internal array stays in sync with length changes
+    useEffect(() => {
+      if (!isControlled && internalDigits.length !== length) {
+        setInternalDigits(toDigits(internalDigits.join(''), length));
+      }
+    }, [length, isControlled, internalDigits]);
+
+    useEffect(() => {
+      if (autoFocus) {
+        inputRefs.current[0]?.focus();
+      }
+    }, [autoFocus]);
+
+    const updateDigits = useCallback(
+      (next: string[]) => {
+        if (!isControlled) setInternalDigits(next);
+        const joined = next.join('');
+        onChange?.(joined);
+        if (next.every((d) => d !== '')) {
+          onComplete?.(joined);
+        }
+      },
+      [isControlled, onChange, onComplete],
+    );
+
+    const handleChange = (index: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const char = e.target.value.replace(/[^0-9]/g, '').slice(-1);
+      if (!char) return;
+
+      const next = [...digits];
+      next[index] = char;
+      updateDigits(next);
+
+      // Auto-advance
+      if (index < length - 1) {
+        inputRefs.current[index + 1]?.focus();
+      }
+    };
+
+    const handleKeyDown = (index: number) => (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Backspace') {
+        e.preventDefault();
+        const next = [...digits];
+        if (digits[index]) {
+          next[index] = '';
+          updateDigits(next);
+        } else if (index > 0) {
+          next[index - 1] = '';
+          updateDigits(next);
+          inputRefs.current[index - 1]?.focus();
+        }
+      } else if (e.key === 'ArrowLeft' && index > 0) {
+        e.preventDefault();
+        inputRefs.current[index - 1]?.focus();
+      } else if (e.key === 'ArrowRight' && index < length - 1) {
+        e.preventDefault();
+        inputRefs.current[index + 1]?.focus();
+      }
+    };
+
+    const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+      e.preventDefault();
+      const pasted = e.clipboardData.getData('text').replace(/[^0-9]/g, '');
+      if (!pasted) return;
+
+      const target = inputRefs.current.indexOf(e.currentTarget as HTMLInputElement);
+      const start = target >= 0 ? target : 0;
+      const next = [...digits];
+
+      for (let i = 0; i < pasted.length && start + i < length; i++) {
+        next[start + i] = pasted[i];
+      }
+
+      updateDigits(next);
+
+      // Focus last filled or next empty
+      const focusIndex = Math.min(start + pasted.length, length) - 1;
+      inputRefs.current[focusIndex]?.focus();
+    };
+
+    const handleFocus = () => (e: React.FocusEvent<HTMLInputElement>) => {
+      e.target.select();
+    };
+
+    return (
+      <div ref={ref} className={cn(styles.root, className)} {...rest}>
+        {digits.map((digit, i) => (
+          <input
+            key={i}
+            ref={(el) => { inputRefs.current[i] = el; }}
+            type="text"
+            inputMode="numeric"
+            maxLength={1}
+            value={digit}
+            disabled={disabled}
+            className={cn(
+              styles.digit,
+              digit && styles.filled,
+              error && styles.digitError,
+            )}
+            onChange={handleChange(i)}
+            onKeyDown={handleKeyDown(i)}
+            onPaste={handlePaste}
+            onFocus={handleFocus()}
+            aria-label={`Digit ${i + 1}`}
+          />
+        ))}
+      </div>
+    );
+  },
+);
+
+VerificationCode.displayName = 'VerificationCode';

package/registry/components/VerificationCode/VerificationCode.types.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'react';
+
+export interface VerificationCodeProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /** Number of digit inputs. */
+  length?: number;
+  /** Controlled value string. */
+  value?: string;
+  /** Initial value for uncontrolled usage. */
+  defaultValue?: string;
+  /** Called on every digit change with the full value string. */
+  onChange?: (value: string) => void;
+  /** Called when all digits are filled. */
+  onComplete?: (value: string) => void;
+  /** Shows error ring + red text on all digits. */
+  error?: boolean;
+  /** Disables all digit inputs. */
+  disabled?: boolean;
+  /** Auto-focuses the first input on mount. */
+  autoFocus?: boolean;
+}

package/registry/components/VerificationCode/index.ts

@@ -0,0 +1,2 @@
+export { VerificationCode } from './VerificationCode';
+export type { VerificationCodeProps } from './VerificationCode.types';