sdaia-ui 1.0.1

package/src/components/FileUploadBase/FileUploadBase.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { Button } from '../Button';
+import { CloudUploadIcon } from '../../icons/CloudUploadIcon';
+import type { FileUploadBaseProps } from './FileUploadBase.types';
+import {
+  HELPER_BASE,
+  HELPER_DISABLED,
+  ICON_COLOR_ACTIVE,
+  ICON_COLOR_DEFAULT,
+  ICON_COLOR_DISABLED,
+  ICON_WRAPPER,
+  LABEL_BASE,
+  LABEL_DISABLED,
+  ROOT_BORDER_ACTIVE,
+  ROOT_BORDER_DEFAULT,
+  ROOT_BORDER_DISABLED,
+  ROOT_LAYOUT,
+  TEXT_STACK,
+} from './FileUploadBase.variants';
+
+export const FileUploadBase = forwardRef<HTMLDivElement, FileUploadBaseProps>(
+  function FileUploadBase(
+    {
+      label = 'Choose a file or drag & drop it here.',
+      helperText = 'JPEG, PNG, PDF, and GIF formats, up to 2MB',
+      showHelperText = true,
+      showBrowseButton = true,
+      browseLabel = 'Browse file',
+      disabled = false,
+      active = false,
+      onBrowse,
+      dir: dirProp,
+      rtl = false,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
+
+    /* Border state priority: disabled > active (drag) > default + group-hover */
+    let borderClass: string;
+    if (disabled) {
+      borderClass = ROOT_BORDER_DISABLED;
+    } else if (active) {
+      borderClass = ROOT_BORDER_ACTIVE;
+    } else {
+      borderClass = ROOT_BORDER_DEFAULT;
+    }
+
+    let iconColorClass: string;
+    if (disabled) {
+      iconColorClass = ICON_COLOR_DISABLED;
+    } else if (active) {
+      iconColorClass = ICON_COLOR_ACTIVE;
+    } else {
+      iconColorClass = ICON_COLOR_DEFAULT;
+    }
+
+    const labelClass = cn(LABEL_BASE, disabled && LABEL_DISABLED);
+    const helperClass = cn(HELPER_BASE, disabled && HELPER_DISABLED);
+
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="file-upload-base"
+        className={cn(
+          ROOT_LAYOUT,
+          borderClass,
+          disabled && 'pointer-events-none',
+          className,
+        )}
+        aria-disabled={disabled ? true : undefined}
+        {...rest}
+      >
+        <span data-slot="icon" className={cn(ICON_WRAPPER, iconColorClass)}>
+          <CloudUploadIcon className="h-full w-full" />
+        </span>
+
+        <div data-slot="text" className={TEXT_STACK}>
+          {label != null && <p className={labelClass}>{label}</p>}
+          {showHelperText && helperText != null && <p className={helperClass}>{helperText}</p>}
+        </div>
+
+        {showBrowseButton && (
+          <Button
+            data-slot="browse-button"
+            type="button"
+            variant="secondary-outline"
+            size="md"
+            disabled={disabled}
+            onClick={onBrowse}
+          >
+            {browseLabel}
+          </Button>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/FileUploadBase/FileUploadBase.types.ts

@@ -0,0 +1,48 @@
+import type { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+
+export interface FileUploadBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /**
+   * Primary instruction line (Figma: “Choose a file or drag & drop it here.”).
+   */
+  label?: ReactNode;
+  /**
+   * Secondary line (formats, max size, etc.).
+   */
+  helperText?: ReactNode;
+  /**
+   * When false, the helper line is not shown.
+   * @default true
+   */
+  showHelperText?: boolean;
+  /**
+   * When false, the browse button is not shown.
+   * @default true
+   */
+  showBrowseButton?: boolean;
+  /**
+   * Label for the browse action (Figma: “Browse file”).
+   */
+  browseLabel?: ReactNode;
+  /**
+   * Disables the browse button and applies disabled visuals to the zone.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Strong focus / drag-active border (Figma hover border: primary at 70% opacity).
+   * Use while files are held over the drop zone.
+   * @default false
+   */
+  active?: boolean;
+  /** Click handler for the browse `Button` only. */
+  onBrowse?: MouseEventHandler<HTMLButtonElement>;
+  /**
+   * Text direction for the block. Prefer inheriting from `dir` on an ancestor;
+   * set explicitly for documentation previews.
+   */
+  dir?: 'ltr' | 'rtl';
+  /**
+   * @deprecated Use `dir="rtl"` instead. When true, sets `dir="rtl"` on the root unless `dir` is passed.
+   */
+  rtl?: boolean;
+}

package/src/components/FileUploadBase/FileUploadBase.variants.ts

@@ -0,0 +1,51 @@
+/* Layout shared by all visual states */
+export const ROOT_LAYOUT = [
+  /* `group` enables group-hover border + icon tints when not disabled/active */
+  'group relative flex w-full flex-col items-center justify-center',
+  'gap-spacing-xl p-spacing-3xl',
+  'rounded-[8px] border-2 border-dashed',
+  'bg-[rgba(255,255,255,1)] motion-feedback',
+  'dark:bg-[rgba(17,25,39,1)]',
+].join(' ');
+
+/** Idle + optional group-hover (apply only when interactive). */
+export const ROOT_BORDER_DEFAULT = [
+  'border-[rgba(210,214,219,1)] dark:border-[rgba(75,85,99,1)]',
+  'group-hover:border-[rgba(27,131,84,0.7)] dark:group-hover:border-[rgba(84,192,138,0.7)]',
+].join(' ');
+
+/** Disabled: lighter border per Figma disabled chrome. */
+export const ROOT_BORDER_DISABLED = 'border-[rgba(229,231,235,1)] dark:border-[rgba(55,65,81,1)]';
+
+/** Active drag-over: same emphasis as hover, without relying on :hover. */
+export const ROOT_BORDER_ACTIVE = [
+  'border-[rgba(27,131,84,0.7)] dark:border-[rgba(84,192,138,0.7)]',
+].join(' ');
+
+export const TEXT_STACK = 'flex w-full flex-col items-center gap-spacing-xs text-center';
+
+export const LABEL_BASE = [
+  'w-full text-text-md font-[500]',
+  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]',
+].join(' ');
+
+export const LABEL_DISABLED = 'text-[rgba(157,164,174,1)] dark:text-[rgba(157,164,174,1)]';
+
+export const HELPER_BASE = [
+  'w-full text-text-xs font-[400]',
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
+].join(' ');
+
+export const HELPER_DISABLED = 'text-[rgba(157,164,174,1)] dark:text-[rgba(157,164,174,1)]';
+
+/** Icon: default / idle stroke */
+export const ICON_WRAPPER = 'inline-flex size-[40px] shrink-0 items-center justify-center';
+
+export const ICON_COLOR_DEFAULT = [
+  'text-[rgba(22,22,22,1)] dark:text-white',
+  'group-hover:text-[rgba(27,131,84,1)] dark:group-hover:text-[rgba(84,192,138,1)]',
+].join(' ');
+
+export const ICON_COLOR_DISABLED = 'text-[rgba(157,164,174,1)] dark:text-[rgba(157,164,174,1)]';
+
+export const ICON_COLOR_ACTIVE = 'text-[rgba(27,131,84,1)] dark:text-[rgba(84,192,138,1)]';

package/src/components/FileUploadBase/index.ts

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

package/src/components/FileUploadItemBase/FileUploadItemBase.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { forwardRef, type ReactNode } from "react";
+import { cn } from "../../lib/cn";
+import { CloudUploadIcon } from "../../icons/CloudUploadIcon";
+import { Button } from "../Button";
+import { ProgressBar } from "../ProgressBar";
+import {
+  FileUploadItemCloseIcon,
+  FileUploadItemEmptyFileIcon,
+  FileUploadItemPdfIcon,
+} from '../../icons/IconFactory';
+import type {
+  FileUploadItemBaseProps,
+  FileUploadItemBaseState,
+} from "./FileUploadItemBase.types";
+import {
+  CONTENT_COLUMN,
+  DISMISS_BUTTON,
+  DIVIDER,
+  HELPER,
+  LABEL,
+  PROGRESS_ROW,
+  rootBorderClass,
+  ROOT,
+  STATUS_COMPLETE,
+  STATUS_FAILED,
+  STATUS_ROW,
+  STATUS_UPLOADING,
+  TEXT_BLOCK,
+} from "./FileUploadItemBase.variants";
+
+function resolveProgress(
+  state: FileUploadItemBaseState,
+  progress: number | undefined,
+): number {
+  if (state === "complete") return 100;
+  if (state === "error") return 0;
+  const p = progress ?? 50;
+  return Math.max(0, Math.min(100, p));
+}
+
+export const FileUploadItemBase = forwardRef<
+  HTMLDivElement,
+  FileUploadItemBaseProps
+>(function FileUploadItemBase(
+  {
+    label = "Document.pdf",
+    helperText = "100 KB of 200 KB",
+    state = "in-progress",
+    variant = "file",
+    progress: progressProp,
+    leadingSlot,
+    dismissLabel = "Remove file",
+    onDismiss,
+    retryLabel = "Try again",
+    onRetry,
+    uploadingLabel = "Uploading",
+    completeLabel = "Complete",
+    failedLabel = "Failed",
+    dir: dirProp,
+    rtl = false,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const dir = dirProp ?? (rtl ? "rtl" : undefined);
+  const isRtl = dir === "rtl";
+  const progressValue = resolveProgress(state, progressProp);
+  const showProgress = state === "in-progress" || state === "complete";
+
+  const leading = leadingSlot ? (
+    <div data-slot="leading" className="shrink-0">
+      {leadingSlot}
+    </div>
+  ) : variant === "file" ? (
+    <div data-slot="leading" className="size-[40px] shrink-0">
+      <FileUploadItemPdfIcon className="h-full w-full" />
+    </div>
+  ) : (
+    <div
+      data-slot="leading"
+      className="shrink-0 text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]"
+    >
+      <FileUploadItemEmptyFileIcon className="h-6 w-6" />
+    </div>
+  );
+
+  let statusChip: ReactNode = null;
+  if (state === "in-progress") {
+    statusChip = (
+      <span className={STATUS_UPLOADING} data-slot="status">
+        <CloudUploadIcon className="size-icon-sm shrink-0" />
+        {uploadingLabel}
+      </span>
+    );
+  } else if (state === "complete") {
+    statusChip = (
+      <span className={STATUS_COMPLETE} data-slot="status">
+        <CloudUploadIcon className="size-icon-sm shrink-0" />
+        {completeLabel}
+      </span>
+    );
+  } else {
+    statusChip = (
+      <span className={STATUS_FAILED} data-slot="status">
+        <CloudUploadIcon className="size-icon-sm shrink-0" />
+        {failedLabel}
+      </span>
+    );
+  }
+
+  return (
+    <div
+      ref={ref}
+      dir={dir}
+      data-slot="file-upload-item-base"
+      className={cn(ROOT, rootBorderClass(state), className)}
+      {...rest}
+    >
+      {leading}
+
+      <div data-slot="content" className={CONTENT_COLUMN}>
+        <div className={TEXT_BLOCK} data-slot="text-block">
+          <div
+            className="flex w-full items-start gap-spacing-lg"
+            data-slot="title-row"
+          >
+            <p className={LABEL} data-slot="label">
+              {label}
+            </p>
+            {onDismiss ? (
+              <Button
+                type="button"
+                variant="transparent"
+                size="sm"
+                iconOnly
+                data-slot="dismiss"
+                aria-label={dismissLabel}
+                onClick={onDismiss}
+                leadingIcon={<FileUploadItemCloseIcon className="size-icon-sm" />}
+                className={DISMISS_BUTTON}
+              />
+            ) : null}
+          </div>
+
+          <div className={cn(STATUS_ROW)} data-slot="meta">
+            {isRtl ? (
+              <>
+                {statusChip}
+                <span className={DIVIDER} aria-hidden="true" />
+                <span className={HELPER} data-slot="helper">{helperText}</span>
+              </>
+            ) : (
+              <>
+                <span className={HELPER} data-slot="helper">{helperText}</span>
+                <span className={DIVIDER} aria-hidden="true" />
+                {statusChip}
+              </>
+            )}
+          </div>
+        </div>
+
+        {showProgress ? (
+          <ProgressBar
+            progress={progressValue}
+            label="inline"
+            dir={isRtl ? "rtl" : "ltr"}
+            className={cn(PROGRESS_ROW, "w-full")}
+            data-slot="progress"
+            aria-valuetext={`${Math.round(progressValue)}%`}
+          />
+        ) : null}
+
+        {state === "error" ? (
+          <Button
+            type="button"
+            variant="transparent"
+            destructive
+            size="sm"
+            data-slot="retry"
+            disabled={!onRetry}
+            onClick={onRetry}
+            className={cn(
+              "h-auto min-h-0 justify-start self-start gap-0 px-0 py-0",
+              "text-text-xs font-[400] leading-[18px]",
+              "underline-offset-2 hover:underline disabled:hover:no-underline",
+            )}
+          >
+            {retryLabel}
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  );
+});

package/src/components/FileUploadItemBase/FileUploadItemBase.types.ts

@@ -0,0 +1,58 @@
+import type { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+
+/** Figma: In Progress / Complete / Error */
+export type FileUploadItemBaseState = 'in-progress' | 'complete' | 'error';
+
+/** Figma: File (PDF tile) vs Icon (generic document glyph). */
+export type FileUploadItemBaseVariant = 'file' | 'icon';
+
+export interface FileUploadItemBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** File name (Figma: Document.pdf). */
+  label?: ReactNode;
+  /** Size / capacity line (Figma: 100 KB of 200 KB). */
+  helperText?: ReactNode;
+  /**
+   * Upload lifecycle **state** (see CLAUDE.md: state vs type).
+   * @default 'in-progress'
+   */
+  state?: FileUploadItemBaseState;
+  /**
+   * Leading preview **variant** (structural style).
+   * @default 'file'
+   */
+  variant?: FileUploadItemBaseVariant;
+  /**
+   * Progress 0–100. Only shown when `state` is `in-progress` or `complete`.
+   * `complete` forces 100. Ignored when `state` is `error`.
+   * @default 50 for `in-progress`, 100 for `complete`
+   */
+  progress?: number;
+  /** Replaces the default PDF / generic leading asset. */
+  leadingSlot?: ReactNode;
+  /**
+   * `aria-label` for the dismiss control.
+   * @default 'Remove file'
+   */
+  dismissLabel?: string;
+  /** Called when the dismiss (X) control is activated. */
+  onDismiss?: MouseEventHandler<HTMLButtonElement>;
+  /** Label for the error retry control (Figma: Try again). */
+  retryLabel?: ReactNode;
+  /** Called when “Try again” is activated (error state only). */
+  onRetry?: MouseEventHandler<HTMLButtonElement>;
+  /** Copy for the in-progress status chip. @default Uploading */
+  uploadingLabel?: ReactNode;
+  /** Copy for the complete status chip. @default Complete */
+  completeLabel?: ReactNode;
+  /** Copy for the failed status chip. @default Failed */
+  failedLabel?: ReactNode;
+  /**
+   * Text direction for logical layout. Prefer inheriting from an ancestor;
+   * set explicitly for documentation previews.
+   */
+  dir?: 'ltr' | 'rtl';
+  /**
+   * @deprecated Use `dir="rtl"` instead. When true, sets `dir="rtl"` on the root unless `dir` is passed.
+   */
+  rtl?: boolean;
+}

package/src/components/FileUploadItemBase/FileUploadItemBase.variants.ts

@@ -0,0 +1,67 @@
+import type { FileUploadItemBaseState } from './FileUploadItemBase.types';
+
+/** Matches Figma 5261:74940: gap-md (8) between lead + content; padding xl (16); items-start. */
+export const ROOT = [
+  'flex w-full items-start gap-spacing-md rounded-[8px] border border-solid bg-[rgba(255,255,255,1)] p-spacing-xl',
+  'dark:bg-[rgba(17,25,39,1)]',
+].join(' ');
+
+export const BORDER_NEUTRAL =
+  'border-[rgba(210,214,219,1)] dark:border-[rgba(75,85,99,1)]';
+
+export const BORDER_ERROR = 'border-[rgba(180,35,24,1)] dark:border-[rgba(217,45,32,1)]';
+
+/** State priority: error > neutral */
+export function rootBorderClass(state: FileUploadItemBaseState): string {
+  return state === 'error' ? BORDER_ERROR : BORDER_NEUTRAL;
+}
+
+export const LABEL = [
+  'min-w-0 flex-1 truncate text-start text-text-md font-[400]',
+  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]',
+].join(' ');
+
+export const HELPER = [
+  'shrink-0 whitespace-nowrap text-text-xs font-[400]',
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
+].join(' ');
+
+export const DIVIDER = 'h-[18px] w-px shrink-0 bg-[rgba(210,214,219,1)] dark:bg-[rgba(75,85,99,1)]';
+
+/**
+ * Stacks title row + supporting row with Figma `spacing-none` between them
+ * (5261:74899 Text and Supporting Text).
+ */
+export const TEXT_BLOCK = 'flex w-full flex-col gap-0';
+
+/** Main column: Figma Content — gap-xs (4) only *between* text block and progress / actions. */
+export const CONTENT_COLUMN = 'flex min-h-px min-w-0 flex-1 flex-col gap-spacing-xs';
+
+/** Supporting line: gap-xs (4) between helper, divider, status (Figma Supporting Text). */
+export const STATUS_ROW = 'flex items-center gap-spacing-xs';
+
+export const STATUS_UPLOADING = [
+  'flex items-center gap-spacing-xs whitespace-nowrap text-text-xs font-[500]',
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
+].join(' ');
+
+export const STATUS_COMPLETE = [
+  'flex items-center gap-spacing-xs whitespace-nowrap text-text-xs font-[500]',
+  'text-[rgba(27,131,84,1)] dark:text-[rgba(84,192,138,1)]',
+].join(' ');
+
+export const STATUS_FAILED = [
+  'flex items-center gap-spacing-xs whitespace-nowrap text-text-xs font-[500]',
+  'text-[rgba(180,35,24,1)] dark:text-[rgba(253,205,202,1)]',
+].join(' ');
+
+export const DISMISS_BUTTON = [
+  'inline-flex shrink-0 cursor-pointer rounded-[4px] text-[rgba(108,115,127,1)] motion-feedback',
+  'hover:text-[rgba(31,42,55,1)] focus-visible:outline-none focus-visible:ring-2',
+  'focus-visible:ring-[rgba(22,22,22,1)] focus-visible:ring-offset-2 dark:text-[rgba(156,163,175,1)]',
+  'dark:hover:text-[rgba(229,231,235,1)] dark:focus-visible:ring-[rgba(210,214,219,1)]',
+  'dark:focus-visible:ring-offset-[rgba(17,25,39,1)]',
+].join(' ');
+
+/** Progress row: gap-md (8) between track and %; py-0 per Figma ProgressBar wrapper. */
+export const PROGRESS_ROW = 'flex w-full items-center gap-spacing-md py-0';

package/src/components/FileUploadItemBase/index.ts

@@ -0,0 +1,6 @@
+export { FileUploadItemBase } from './FileUploadItemBase';
+export type {
+  FileUploadItemBaseProps,
+  FileUploadItemBaseState,
+  FileUploadItemBaseVariant,
+} from './FileUploadItemBase.types';