@soadtech/cli 0.1.0

package/registry/components/FileUpload/FileUpload.types.ts

@@ -0,0 +1,89 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/* ─── FileUpload (Dropzone) ─── */
+
+export type FileUploadVariant = 'default' | 'landscape';
+export type FileUploadStatus = 'idle' | 'uploading' | 'complete';
+
+export interface FileUploadProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /** Tall centered vs wider layout */
+  variant?: FileUploadVariant;
+  /** Visual state */
+  status?: FileUploadStatus;
+  /** 0–100 circular progress (uploading state) */
+  progress?: number;
+  /** Primary action text (blue link) */
+  label?: string;
+  /** Secondary helper text (gray) */
+  description?: string;
+  /** Bottom text (e.g. "Maximum file size: 20MB") */
+  helperText?: string;
+  /** File type filter for hidden input */
+  accept?: string;
+  /** Allow multiple files */
+  multiple?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Cancel button callback (uploading state) */
+  onCancel?: () => void;
+  /** File selection/drop handler */
+  onChange?: (files: File[]) => void;
+}
+
+/* ─── FileUploadInput (Compact inline) ─── */
+
+export interface FileUploadInputProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /** Field label above */
+  label?: string;
+  /** Shown file name (placeholder if empty) */
+  fileName?: string;
+  /** Button text */
+  buttonLabel?: string;
+  /** Below-field helper text */
+  helperText?: string;
+  /** Visual state */
+  status?: FileUploadStatus;
+  /** Progress bar 0–100 (uploading state) */
+  progress?: number;
+  /** File type filter */
+  accept?: string;
+  /** Allow multiple files */
+  multiple?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** File selection handler */
+  onChange?: (files: File[]) => void;
+}
+
+/* ─── FileUploadIcon (Square icon) ─── */
+
+export interface FileUploadIconProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /** Upload trigger icon */
+  icon?: ReactNode;
+  /** Text below square */
+  label?: string;
+  /** Text below label */
+  description?: string;
+  /** Image URL for preview */
+  thumbnail?: string;
+  /** File type filter */
+  accept?: string;
+  /** File selection handler */
+  onChange?: (files: File[]) => void;
+}
+
+/* ─── FileUploadItem (File row) ─── */
+
+export interface FileUploadItemProps extends HTMLAttributes<HTMLDivElement> {
+  /** File name text */
+  name: string;
+  /** Left icon slot */
+  icon?: ReactNode;
+  /** Image URL for thumbnail (overrides icon) */
+  thumbnail?: string;
+  /** Right action slot (kebab menu, delete btn) */
+  action?: ReactNode;
+}

package/registry/components/FileUpload/FileUploadIcon.module.css

@@ -0,0 +1,61 @@
+/* ─── FileUploadIcon ─── */
+
+.root {
+  width: 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--st-space-2);
+}
+
+.box {
+  width: 120px;
+  height: 120px;
+  border: 2px dashed var(--st-color-border);
+  border-radius: var(--st-radius-xl);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  cursor: pointer;
+  color: var(--st-color-muted);
+  transition: border-color var(--st-transition-fast),
+    background-color var(--st-transition-fast);
+}
+
+.box:hover {
+  border-color: var(--st-color-primary);
+  background-color: var(--st-color-primary-subtle);
+  color: var(--st-color-primary);
+}
+
+.thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.label {
+  color: var(--st-color-primary);
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-semibold);
+  text-align: center;
+}
+
+.description {
+  color: var(--st-color-muted);
+  font-size: var(--st-font-size-xs);
+  text-align: center;
+}
+
+.input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/registry/components/FileUpload/FileUploadIcon.tsx

@@ -0,0 +1,84 @@
+import { forwardRef, useRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { FileUploadIconProps } from './FileUpload.types';
+import styles from './FileUploadIcon.module.css';
+
+function GalleryAddIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M13 1.25C13.4142 1.25 13.75 1.58579 13.75 2C13.75 2.41421 13.4142 2.75 13 2.75H9C6.57397 2.75 5.0708 3.23974 4.15527 4.15527C3.23974 5.0708 2.75 6.57397 2.75 9V15C2.75 16.1128 2.85379 17.0313 3.05371 17.7881L7.18164 15.0166C8.17819 14.3481 9.56927 14.3703 10.54 15.0635L10.7285 15.2109L10.7354 15.2158L11.0654 15.5059H11.0645C11.5641 15.9293 12.4044 15.9278 12.9014 15.501V15.5L17.0615 11.9307C18.1225 11.0196 19.7974 11.0196 20.8584 11.9307L21.25 12.2666V10C21.25 9.58579 21.5858 9.25 22 9.25C22.4142 9.25 22.75 9.58579 22.75 10V15C22.75 17.574 22.2397 19.5708 20.9053 20.9053C19.5708 22.2397 17.574 22.75 15 22.75H9C6.42603 22.75 4.4292 22.2397 3.09473 20.9053C1.76026 19.5708 1.25 17.574 1.25 15V9C1.25 6.42603 1.76026 4.4292 3.09473 3.09473C4.4292 1.76026 6.42603 1.25 9 1.25H13ZM19.8809 13.0684C19.382 12.6404 18.5379 12.6404 18.0391 13.0684H18.0381L13.8779 16.6377C12.8169 17.5491 11.1421 17.5501 10.0811 16.6387L10.0752 16.6328L9.75098 16.3477C9.30287 15.9633 8.53421 15.9162 8.01758 16.2627L3.64453 19.1982C3.79675 19.4405 3.96616 19.6556 4.15527 19.8447C5.0708 20.7603 6.57397 21.25 9 21.25H15C17.426 21.25 18.9292 20.7603 19.8447 19.8447C20.7603 18.9292 21.25 17.426 21.25 15V14.2432L19.8809 13.0684ZM9 5.25C10.5188 5.25 11.75 6.48122 11.75 8C11.75 9.51878 10.5188 10.75 9 10.75C7.48122 10.75 6.25 9.51878 6.25 8C6.25 6.48122 7.48122 5.25 9 5.25ZM9 6.75C8.30964 6.75 7.75 7.30964 7.75 8C7.75 8.69036 8.30964 9.25 9 9.25C9.69036 9.25 10.25 8.69036 10.25 8C10.25 7.30964 9.69036 6.75 9 6.75ZM18.5 1.5C18.9142 1.5 19.25 1.83579 19.25 2.25V4.25H21.25C21.6642 4.25 22 4.58579 22 5C22 5.41421 21.6642 5.75 21.25 5.75H19.25V7.75C19.25 8.16421 18.9142 8.5 18.5 8.5C18.0858 8.5 17.75 8.16421 17.75 7.75V5.75H15.75C15.3358 5.75 15 5.41421 15 5C15 4.58579 15.3358 4.25 15.75 4.25H17.75V2.25C17.75 1.83579 18.0858 1.5 18.5 1.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export const FileUploadIcon = forwardRef<HTMLDivElement, FileUploadIconProps>(
+  (
+    {
+      icon,
+      label = 'Click to upload',
+      description = 'or drag and drop',
+      thumbnail,
+      accept,
+      onChange,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleClick = () => {
+      inputRef.current?.click();
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      if (files?.length) {
+        onChange?.(Array.from(files));
+      }
+      e.target.value = '';
+    };
+
+    return (
+      <div ref={ref} className={cn(styles.root, className)} {...rest}>
+        <div
+          className={styles.box}
+          onClick={handleClick}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              handleClick();
+            }
+          }}
+        >
+          {thumbnail ? (
+            <img
+              src={thumbnail}
+              alt="Preview"
+              className={styles.thumbnail}
+            />
+          ) : (
+            icon ?? <GalleryAddIcon />
+          )}
+        </div>
+        <span className={styles.label}>{label}</span>
+        <span className={styles.description}>{description}</span>
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          onChange={handleChange}
+          className={styles.input}
+          tabIndex={-1}
+        />
+      </div>
+    );
+  }
+);
+
+FileUploadIcon.displayName = 'FileUploadIcon';

package/registry/components/FileUpload/FileUploadInput.module.css

@@ -0,0 +1,140 @@
+/* ─── FileUploadInput ─── */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-1);
+}
+
+.label {
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-medium);
+  color: var(--st-color-foreground);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+}
+
+.inputArea {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  padding: var(--st-space-2) var(--st-space-3);
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-lg);
+  background: var(--st-color-surface);
+  min-height: 40px;
+  position: relative;
+  overflow: hidden;
+}
+
+.fileIcon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: var(--st-color-muted);
+}
+
+.fileName {
+  flex: 1;
+  font-size: var(--st-font-size-sm);
+  color: var(--st-color-foreground);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.placeholder {
+  color: var(--st-color-muted);
+}
+
+/* ─── Progress Bar ─── */
+
+.progressBar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--st-color-primary-subtle);
+  border-radius: var(--st-radius-full);
+}
+
+.progressFill {
+  height: 100%;
+  background: var(--st-color-primary);
+  border-radius: var(--st-radius-full);
+  transition: width var(--st-transition-base);
+}
+
+/* ─── Button ─── */
+
+.button {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--st-space-2) var(--st-space-4);
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-full);
+  background: var(--st-color-surface);
+  color: var(--st-color-foreground);
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-medium);
+  font-family: var(--st-font-family);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color var(--st-transition-fast),
+    border-color var(--st-transition-fast),
+    color var(--st-transition-fast);
+}
+
+.button:hover:not(:disabled) {
+  background-color: var(--st-color-neutral-50);
+  border-color: var(--st-color-border-strong);
+}
+
+/* ─── Complete State ─── */
+
+.complete .button {
+  background-color: var(--st-color-neutral-900);
+  border-color: var(--st-color-neutral-900);
+  color: #ffffff;
+}
+
+.complete .button:hover:not(:disabled) {
+  background-color: var(--st-color-neutral-800);
+  border-color: var(--st-color-neutral-800);
+}
+
+/* ─── Helper Text ─── */
+
+.helperText {
+  font-size: var(--st-font-size-xs);
+  color: var(--st-color-muted);
+}
+
+/* ─── Disabled ─── */
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ─── Hidden Input ─── */
+
+.input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/registry/components/FileUpload/FileUploadInput.tsx

@@ -0,0 +1,113 @@
+import { forwardRef, useRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { FileUploadInputProps } from './FileUpload.types';
+import styles from './FileUploadInput.module.css';
+
+function FileIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M15 22.75H9C3.57 22.75 1.25 20.43 1.25 15V9C1.25 3.57 3.57 1.25 9 1.25H14C14.41 1.25 14.75 1.59 14.75 2C14.75 2.41 14.41 2.75 14 2.75H9C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H15C19.61 21.25 21.25 19.61 21.25 15V10C21.25 9.59 21.59 9.25 22 9.25C22.41 9.25 22.75 9.59 22.75 10V15C22.75 20.43 20.43 22.75 15 22.75Z"
+        fill="currentColor"
+      />
+      <path
+        d="M22 10.75H18C14.58 10.75 13.25 9.42 13.25 6V2C13.25 1.7 13.43 1.42 13.71 1.31C13.99 1.19 14.31 1.26 14.53 1.47L22.53 9.47C22.74 9.68 22.81 10.01 22.69 10.29C22.57 10.57 22.3 10.75 22 10.75ZM14.75 3.81V6C14.75 8.58 15.42 9.25 18 9.25H20.19L14.75 3.81Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export const FileUploadInput = forwardRef<HTMLDivElement, FileUploadInputProps>(
+  (
+    {
+      label,
+      fileName,
+      buttonLabel = 'Select file',
+      helperText,
+      status = 'idle',
+      progress = 0,
+      accept,
+      multiple = false,
+      disabled = false,
+      onChange,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleClick = () => {
+      if (!disabled) {
+        inputRef.current?.click();
+      }
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      if (files?.length) {
+        onChange?.(Array.from(files));
+      }
+      e.target.value = '';
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          styles.root,
+          disabled && styles.disabled,
+          styles[status],
+          className
+        )}
+        {...rest}
+      >
+        {label && <span className={styles.label}>{label}</span>}
+        <div className={styles.row}>
+          <div className={styles.inputArea}>
+            <span className={styles.fileIcon}>
+              <FileIcon />
+            </span>
+            <span
+              className={cn(
+                styles.fileName,
+                !fileName && styles.placeholder
+              )}
+            >
+              {fileName || 'No file selected'}
+            </span>
+            {status === 'uploading' && (
+              <div className={styles.progressBar}>
+                <div
+                  className={styles.progressFill}
+                  style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
+                />
+              </div>
+            )}
+          </div>
+          <button
+            type="button"
+            className={styles.button}
+            onClick={handleClick}
+            disabled={disabled}
+          >
+            {buttonLabel}
+          </button>
+        </div>
+        {helperText && <span className={styles.helperText}>{helperText}</span>}
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          onChange={handleChange}
+          className={styles.input}
+          tabIndex={-1}
+        />
+      </div>
+    );
+  }
+);
+
+FileUploadInput.displayName = 'FileUploadInput';

package/registry/components/FileUpload/FileUploadItem.module.css

@@ -0,0 +1,41 @@
+/* ─── FileUploadItem ─── */
+
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-3);
+  padding: var(--st-space-3);
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-lg);
+}
+
+.iconWrap {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--st-color-neutral-50);
+  border-radius: var(--st-radius-md);
+  overflow: hidden;
+}
+
+.thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.name {
+  flex: 1;
+  font-size: var(--st-font-size-sm);
+  color: var(--st-color-foreground);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.action {
+  flex-shrink: 0;
+}

package/registry/components/FileUpload/FileUploadItem.tsx

@@ -0,0 +1,39 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { FileUploadItemProps } from './FileUpload.types';
+import styles from './FileUploadItem.module.css';
+
+function DocumentIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M15 22.75H9C3.57 22.75 1.25 20.43 1.25 15V9C1.25 3.57 3.57 1.25 9 1.25H14C14.41 1.25 14.75 1.59 14.75 2C14.75 2.41 14.41 2.75 14 2.75H9C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H15C19.61 21.25 21.25 19.61 21.25 15V10C21.25 9.59 21.59 9.25 22 9.25C22.41 9.25 22.75 9.59 22.75 10V15C22.75 20.43 20.43 22.75 15 22.75Z"
+        fill="#606E80"
+      />
+      <path
+        d="M22 10.75H18C14.58 10.75 13.25 9.42 13.25 6V2C13.25 1.7 13.43 1.42 13.71 1.31C13.99 1.19 14.31 1.26 14.53 1.47L22.53 9.47C22.74 9.68 22.81 10.01 22.69 10.29C22.57 10.57 22.3 10.75 22 10.75ZM14.75 3.81V6C14.75 8.58 15.42 9.25 18 9.25H20.19L14.75 3.81Z"
+        fill="#606E80"
+      />
+    </svg>
+  );
+}
+
+export const FileUploadItem = forwardRef<HTMLDivElement, FileUploadItemProps>(
+  ({ name, icon, thumbnail, action, className, ...rest }, ref) => {
+    return (
+      <div ref={ref} className={cn(styles.root, className)} {...rest}>
+        <div className={styles.iconWrap}>
+          {thumbnail ? (
+            <img src={thumbnail} alt={name} className={styles.thumbnail} />
+          ) : (
+            icon ?? <DocumentIcon />
+          )}
+        </div>
+        <span className={styles.name}>{name}</span>
+        {action && <div className={styles.action}>{action}</div>}
+      </div>
+    );
+  }
+);
+
+FileUploadItem.displayName = 'FileUploadItem';

package/registry/components/FileUpload/index.ts

@@ -0,0 +1,12 @@
+export { FileUpload } from './FileUpload';
+export { FileUploadInput } from './FileUploadInput';
+export { FileUploadIcon } from './FileUploadIcon';
+export { FileUploadItem } from './FileUploadItem';
+export type {
+  FileUploadProps,
+  FileUploadVariant,
+  FileUploadStatus,
+  FileUploadInputProps,
+  FileUploadIconProps,
+  FileUploadItemProps,
+} from './FileUpload.types';