sdaia-ui 1.0.1

package/src/components/FileUploader/FileUploader.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { forwardRef, useCallback, useRef, useState, type DragEvent } from 'react';
+import { cn } from '../../lib/cn';
+import { FileUploadBase } from '../FileUploadBase';
+import { FileUploadItemBase } from '../FileUploadItemBase';
+import type { FileUploaderProps } from './FileUploader.types';
+import { FILE_LIST, ROOT } from './FileUploader.variants';
+
+export const FileUploader = forwardRef<HTMLDivElement, FileUploaderProps>(
+  function FileUploader(
+    {
+      dropZone,
+      files,
+      listFooter,
+      onFilesDropped,
+      onRemoveFile,
+      onRetryFile,
+      retryLabel = 'Try again',
+      disabled = false,
+      dir: dirProp,
+      rtl = false,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const dragDepth = useRef(0);
+    const [dragActive, setDragActive] = useState(false);
+
+    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
+
+    const handleDragEnter = useCallback(
+      (e: DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled) return;
+        dragDepth.current += 1;
+        if (e.dataTransfer.types.includes('Files')) setDragActive(true);
+      },
+      [disabled],
+    );
+
+    const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragDepth.current -= 1;
+      if (dragDepth.current <= 0) {
+        dragDepth.current = 0;
+        setDragActive(false);
+      }
+    }, []);
+
+    const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+    }, []);
+
+    const handleDrop = useCallback(
+      (e: DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragDepth.current = 0;
+        setDragActive(false);
+        if (disabled) return;
+        const list = e.dataTransfer.files;
+        if (list?.length) onFilesDropped?.(list);
+      },
+      [disabled, onFilesDropped],
+    );
+
+    const {
+      onBrowse: dropOnBrowse,
+      active: dropActive,
+      disabled: dropDisabled,
+      className: dropClassName,
+      dir: dropDir,
+      rtl: dropRtl,
+      ...dropRest
+    } = dropZone ?? {};
+
+    const mergedDisabled = disabled || Boolean(dropDisabled);
+    const mergedActive = Boolean(dropActive) || (dragActive && !mergedDisabled);
+
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="file-uploader"
+        className={cn(ROOT, className)}
+        {...rest}
+      >
+        {/* When there is no file list the drop zone should expand to fill all
+            available vertical space (flex-1). When a file list is present it
+            stays at content height (shrink-0) so the list is not pushed off. */}
+        <div
+          className={cn(
+            'w-full',
+            files?.length || listFooter ? 'shrink-0' : 'flex-1',
+          )}
+          data-slot="drop-zone-wrap"
+          onDragEnter={handleDragEnter}
+          onDragLeave={handleDragLeave}
+          onDragOver={handleDragOver}
+          onDrop={handleDrop}
+        >
+          <FileUploadBase
+            {...dropRest}
+            dir={dropDir ?? dir}
+            rtl={dropRtl ?? rtl}
+            disabled={mergedDisabled}
+            active={mergedActive}
+            className={cn(
+              'w-full',
+              /* fill the wrapper's height when it is flex-1 */
+              !(files?.length || listFooter) && 'h-full',
+              dropClassName,
+            )}
+            onBrowse={dropOnBrowse}
+          />
+        </div>
+
+        {(files?.length || listFooter) && (
+          <div data-slot="file-list" className={FILE_LIST}>
+            {files?.map((f) => (
+              <FileUploadItemBase
+                key={f.id}
+                data-slot="file-item"
+                dir={dir}
+                rtl={rtl}
+                label={f.label}
+                helperText={f.helperText}
+                state={f.state}
+                progress={f.progress}
+                variant={f.variant}
+                uploadingLabel={f.uploadingLabel}
+                completeLabel={f.completeLabel}
+                failedLabel={f.failedLabel}
+                retryLabel={f.retryLabel ?? retryLabel}
+                onDismiss={
+                  onRemoveFile
+                    ? (e) => {
+                        e.preventDefault();
+                        onRemoveFile(f.id);
+                      }
+                    : undefined
+                }
+                onRetry={
+                  f.state === 'error' && onRetryFile
+                    ? (e) => {
+                        e.preventDefault();
+                        onRetryFile(f.id);
+                      }
+                    : undefined
+                }
+              />
+            ))}
+            {listFooter}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/FileUploader/FileUploader.types.ts

@@ -0,0 +1,46 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { FileUploadBaseProps } from '../FileUploadBase';
+import type { FileUploadItemBaseState, FileUploadItemBaseVariant } from '../FileUploadItemBase';
+
+/**
+ * One row in the file list (maps to `FileUploadItemBase`).
+ */
+export interface FileUploaderFileEntry {
+  /** Stable key for list reconciliation and callbacks. */
+  id: string;
+  label?: ReactNode;
+  helperText?: ReactNode;
+  state: FileUploadItemBaseState;
+  /** 0–100; used when `state` is `in-progress` (defaults to 50 in item). */
+  progress?: number;
+  variant?: FileUploadItemBaseVariant;
+  /** Optional status chip copy overrides (e.g. Arabic). */
+  uploadingLabel?: ReactNode;
+  completeLabel?: ReactNode;
+  failedLabel?: ReactNode;
+  /** Error row only; overrides `FileUploader` default if both are set per item. */
+  retryLabel?: ReactNode;
+}
+
+export interface FileUploaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /**
+   * Props merged into the drop zone (`FileUploadBase`). Use `onBrowse` to open your own file UI
+   * (e.g. a hidden input in the parent); this component does not render `<input type="file" />`.
+   */
+  dropZone?: Partial<FileUploadBaseProps>;
+  /** File rows below the drop zone. */
+  files?: FileUploaderFileEntry[];
+  /** Optional custom list content when you do not use `files`. Rendered after `files` if both are set. */
+  listFooter?: ReactNode;
+  /** Called after files are dropped on the drop zone. */
+  onFilesDropped?: (files: FileList) => void;
+  onRemoveFile?: (id: string) => void;
+  onRetryFile?: (id: string) => void;
+  /** Default “Try again” label for error rows (overridable per `files[].retryLabel`). */
+  retryLabel?: ReactNode;
+  /** Disables drop zone and browse interaction. */
+  disabled?: boolean;
+  dir?: 'ltr' | 'rtl';
+  /** @deprecated Use `dir="rtl"`. */
+  rtl?: boolean;
+}

package/src/components/FileUploader/FileUploader.variants.ts

@@ -0,0 +1,9 @@
+/**
+ * Figma FileUploader root: `gap-spacing-xl` (16) between drop zone and list stack.
+ */
+export const ROOT = 'flex w-full flex-col items-start gap-spacing-xl';
+
+/**
+ * Stack of `FileUploadItemBase` rows: Figma uses 8px (`gap-spacing-md`) between cards.
+ */
+export const FILE_LIST = 'flex w-full flex-col gap-spacing-md';

package/src/components/FileUploader/index.ts

@@ -0,0 +1,2 @@
+export { FileUploader } from './FileUploader';
+export type { FileUploaderFileEntry, FileUploaderProps } from './FileUploader.types';

package/src/components/Filtration/Filtration.tsx

@@ -0,0 +1,260 @@
+'use client';
+
+import { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import type { CSSProperties } from 'react';
+import { cn } from '../../lib/cn';
+import { Chip } from '../Chip';
+import { FiltrationList } from '../FiltrationList';
+import type { FiltrationProps } from './Filtration.types';
+import {
+  ROOT,
+  TRIGGER_ANCHOR,
+  TRIGGER_BTN,
+  TRIGGER_ICON_BTN,
+  FILTER_ICON,
+  CHEVRON,
+  PANEL_FIXED,
+} from './Filtration.variants';
+import { FilterIcon, ChevronDownIcon, XIcon } from '../../icons/IconFactory';
+
+const PANEL_WIDTH = 350;
+const MARGIN = 8;
+
+/**
+ * Filtration — composite filter UI combining:
+ *   • A trigger (black pill button or bare icon)
+ *   • An active-filter chip row (dismissible solid Chips)
+ *   • A collapsible FiltrationList panel
+ *
+ * ### Panel positioning
+ * The panel renders via a React portal into document.body so it is never
+ * part of the component's flex flow. Position is pre-computed from the
+ * trigger's getBoundingClientRect() before the panel mounts, so there is
+ * no layout thrash and no first-paint position error.
+ *
+ * Figma source: node 5273:84408 (Filtration)
+ */
+export const Filtration = forwardRef<HTMLDivElement, FiltrationProps>(
+  function Filtration(
+    {
+      triggerType = 'button',
+      triggerLabel = 'Filter',
+      activeFilters = [],
+      onRemoveFilter,
+      sections = [],
+      applyLabel = 'Apply Filters',
+      clearLabel = 'Clear',
+      activeFilterCount,
+      onApply,
+      onClear,
+      showActions = true,
+      open: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      rtl = false,
+      className,
+      children,
+      ...rest
+    },
+    ref,
+  ) {
+    /* ── Open state — controlled vs. uncontrolled ──────────────── */
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isControlled = openProp !== undefined;
+    const isOpen = isControlled ? openProp : internalOpen;
+
+    const handleOpenChange = useCallback(
+      (next: boolean) => {
+        if (!isControlled) setInternalOpen(next);
+        onOpenChange?.(next);
+      },
+      [isControlled, onOpenChange],
+    );
+
+    /* ── Refs ───────────────────────────────────────────────────── */
+    const rootRef = useRef<HTMLDivElement>(null);
+    const triggerAnchorRef = useRef<HTMLDivElement>(null);
+    const panelRef = useRef<HTMLDivElement>(null);
+
+    /* ── Portal mount guard (no document during SSR) ────────────── */
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => { setMounted(true); }, []);
+
+    /* ── Fixed-position panel style ─────────────────────────────── */
+    const [panelStyle, setPanelStyle] = useState<CSSProperties>({});
+
+    const computePosition = useCallback(() => {
+      if (!triggerAnchorRef.current) return;
+      const rect = triggerAnchorRef.current.getBoundingClientRect();
+      const vw = window.innerWidth;
+      const width = Math.min(PANEL_WIDTH, vw - MARGIN * 2);
+
+      let left = rtl
+        ? rect.right - width  // RTL: right-align to trigger's right edge
+        : rect.left;           // LTR: left-align to trigger's left edge
+
+      // Clamp to viewport
+      if (left + width > vw - MARGIN) left = vw - MARGIN - width;
+      if (left < MARGIN) left = MARGIN;
+
+      setPanelStyle({
+        position: 'fixed',
+        top: rect.bottom + 4,
+        left,
+        width,
+        zIndex: 50,
+      });
+    }, [rtl]);
+
+    /* ── Toggle: pre-compute position before panel mounts ───────── */
+    const toggleOpen = useCallback(() => {
+      if (!isOpen) computePosition(); // sets panelStyle before React renders panel
+      handleOpenChange(!isOpen);
+    }, [isOpen, computePosition, handleOpenChange]);
+
+    /* ── Update position on scroll / resize while open ──────────── */
+    useEffect(() => {
+      if (!isOpen) return;
+      window.addEventListener('scroll', computePosition, true);
+      window.addEventListener('resize', computePosition);
+      return () => {
+        window.removeEventListener('scroll', computePosition, true);
+        window.removeEventListener('resize', computePosition);
+      };
+    }, [isOpen, computePosition]);
+
+    /* ── Controlled open: compute position when opened externally ── */
+    useEffect(() => {
+      if (isOpen && isControlled) computePosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen]);
+
+    /* ── Click-outside & Escape to close ───────────────────────── */
+    useEffect(() => {
+      if (!isOpen) return;
+
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') handleOpenChange(false);
+      };
+
+      const handlePointerDown = (e: PointerEvent) => {
+        const target = e.target as Node;
+        const inRoot = rootRef.current?.contains(target) ?? false;
+        const inPanel = panelRef.current?.contains(target) ?? false;
+        if (!inRoot && !inPanel) handleOpenChange(false);
+      };
+
+      document.addEventListener('keydown', handleKeyDown);
+      document.addEventListener('pointerdown', handlePointerDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+        document.removeEventListener('pointerdown', handlePointerDown);
+      };
+    }, [isOpen, handleOpenChange]);
+
+    /* ── Merge external ref with internal rootRef ──────────────── */
+    const setRefs = (el: HTMLDivElement | null) => {
+      (rootRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+      if (typeof ref === 'function') ref(el);
+      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;
+    };
+
+    const resolvedCount = activeFilterCount ?? activeFilters.length;
+
+    /* ── Panel — rendered via portal so it's never in the flow ─── */
+    const panel = isOpen && mounted ? createPortal(
+      <div
+        ref={panelRef}
+        data-slot="filtration-panel"
+        role="dialog"
+        aria-label={triggerLabel}
+        style={panelStyle}
+        className={PANEL_FIXED}
+      >
+        <FiltrationList
+          sections={sections}
+          applyLabel={applyLabel}
+          clearLabel={clearLabel}
+          activeFilterCount={resolvedCount}
+          onApply={() => {
+            onApply?.();
+            handleOpenChange(false);
+          }}
+          onClear={onClear}
+          showActions={showActions}
+          rtl={rtl}
+        >
+          {children}
+        </FiltrationList>
+      </div>,
+      document.body,
+    ) : null;
+
+    return (
+      <>
+        <div
+          ref={setRefs}
+          data-slot="filtration"
+          data-open={isOpen || undefined}
+          dir={rtl ? 'rtl' : undefined}
+          className={cn(ROOT, className)}
+          {...rest}
+        >
+          {/* ── Trigger button ────────────────────────────────────── */}
+          <div ref={triggerAnchorRef} className={TRIGGER_ANCHOR}>
+            {triggerType === 'icon' ? (
+              <button
+                type="button"
+                data-slot="filtration-trigger"
+                aria-expanded={isOpen}
+                aria-haspopup="dialog"
+                onClick={toggleOpen}
+                className={TRIGGER_ICON_BTN}
+                aria-label={triggerLabel}
+              >
+                <span className={FILTER_ICON}>
+                  <FilterIcon />
+                </span>
+              </button>
+            ) : (
+              <button
+                type="button"
+                data-slot="filtration-trigger"
+                aria-expanded={isOpen}
+                aria-haspopup="dialog"
+                onClick={toggleOpen}
+                className={TRIGGER_BTN}
+              >
+                <span className={FILTER_ICON}>
+                  <FilterIcon />
+                </span>
+                <span>{triggerLabel}</span>
+                <span className={CHEVRON(isOpen)}>
+                  <ChevronDownIcon />
+                </span>
+              </button>
+            )}
+          </div>
+
+          {/* ── Active filter chips ──────────────────────────────── */}
+          {activeFilters.map((filter) => (
+            <Chip
+              key={filter.id}
+              variant="solid"
+              size="md"
+              rounded={false}
+              trailingIcon={<XIcon />}
+              trailingIconLabel={`Remove ${filter.label}`}
+              onTrailingIconClick={() => onRemoveFilter?.(filter.id)}
+            >
+              {filter.label}
+            </Chip>
+          ))}
+        </div>
+
+        {panel}
+      </>
+    );
+  },
+);

package/src/components/Filtration/Filtration.types.ts

@@ -0,0 +1,95 @@
+import type { ReactNode } from 'react';
+import type { FiltrationSectionConfig } from '../FiltrationList';
+
+/** Visual style of the trigger button */
+export type FiltrationTriggerType = 'button' | 'icon';
+
+/**
+ * A single active-filter chip shown between the trigger and the panel.
+ * Consumers manage this array in state and update it as filters are applied/removed.
+ */
+export interface FiltrationActiveFilter {
+  /** Unique identifier — passed back in `onRemoveFilter` */
+  id: string;
+  /** Human-readable label rendered inside the chip */
+  label: string;
+}
+
+export interface FiltrationProps {
+  // ── Trigger ──────────────────────────────────────────────────────
+  /**
+   * Controls the shape of the trigger:
+   *   `'button'` (default) — black pill with filter icon, label, and chevron.
+   *   `'icon'` — bare 24×24 filter icon with no background.
+   */
+  triggerType?: FiltrationTriggerType;
+  /** Label shown inside the button trigger. Defaults to "Filter". */
+  triggerLabel?: string;
+
+  // ── Active filter chips ──────────────────────────────────────────
+  /**
+   * Array of active filters currently applied.
+   * When non-empty, a row of dismissible green solid Chips is rendered
+   * between the trigger and the panel.
+   */
+  activeFilters?: FiltrationActiveFilter[];
+  /**
+   * Called when the user presses × on an active-filter chip.
+   * Receives the `id` of the chip that was dismissed.
+   */
+  onRemoveFilter?: (id: string) => void;
+
+  // ── Panel (FiltrationList) ────────────────────────────────────────
+  /**
+   * Ordered array of filter sections rendered inside the FiltrationList panel.
+   * Supports all nine section types: search, checkbox, select, radio, chip,
+   * range, amount, date, custom.
+   */
+  sections?: FiltrationSectionConfig[];
+  /** Label for the primary "Apply" button. Defaults to "Apply Filters". */
+  applyLabel?: string;
+  /** Label for the secondary "Clear" button. Defaults to "Clear". */
+  clearLabel?: string;
+  /**
+   * Number shown in parentheses next to the apply label, e.g. "Apply Filters (3)".
+   * Falls back to `activeFilters.length` when omitted.
+   */
+  activeFilterCount?: number;
+  /** Called when the user presses the Apply button inside the panel. */
+  onApply?: () => void;
+  /** Called when the user presses the Clear button inside the panel. */
+  onClear?: () => void;
+  /**
+   * When `false`, hides the Apply / Clear footer inside the FiltrationList.
+   * Defaults to `true`.
+   */
+  showActions?: boolean;
+
+  // ── Open / close state ────────────────────────────────────────────
+  /**
+   * Controlled open state. When provided, the consumer drives open/close.
+   * Combine with `onOpenChange` to handle toggle events.
+   */
+  open?: boolean;
+  /**
+   * Uncontrolled initial open state. Defaults to `false`.
+   * Ignored when `open` is provided.
+   */
+  defaultOpen?: boolean;
+  /** Called whenever the panel open state changes. */
+  onOpenChange?: (open: boolean) => void;
+
+  // ── RTL ──────────────────────────────────────────────────────────
+  /**
+   * Enables RTL layout by setting `dir="rtl"` on the root element.
+   * Alternatively, an ancestor element can carry `dir="rtl"` — flex
+   * layouts mirror automatically without this prop.
+   */
+  rtl?: boolean;
+
+  // ── Misc ─────────────────────────────────────────────────────────
+  /** Extra class names forwarded to the root element. */
+  className?: string;
+  /** Custom content to render inside the panel below the filter sections. */
+  children?: ReactNode;
+}

package/src/components/Filtration/Filtration.variants.ts

@@ -0,0 +1,70 @@
+/**
+ * Filtration.variants.ts
+ *
+ * All class-name constants mapped from Figma node 5273:84408 (Filtration).
+ *
+ * Color sources (Section 0 mapping):
+ *   Button/button-background-black-default   → bg-[rgba(13,18,28,1)]
+ *   Button/button-background-black-hover     → bg-[rgba(31,42,55,1)]
+ *   Button/button-background-black-active    → bg-[rgba(44,57,79,1)]
+ *   Text/text-oncolor-primary                → text-white
+ *   Icon/icon-oncolor                        → text-white
+ *   Active chip                              → Chip variant="solid" (internal green #1b8354)
+ */
+
+/* ── Root wrapper (trigger button + chips in one flex row) ───────── */
+
+/**
+ * Wraps the trigger button (with its own relative panel anchor) and the
+ * active-filter chip row in a single wrapping flex line.
+ */
+export const ROOT = 'inline-flex flex-wrap items-center gap-spacing-md';
+
+/* ── Trigger anchor — the trigger button lives inside this ────────── */
+
+export const TRIGGER_ANCHOR = 'relative shrink-0';
+
+/* ── Trigger button (triggerType="button") ────────────────────────── */
+
+export const TRIGGER_BTN = [
+  'inline-flex items-center gap-spacing-xs',
+  'h-[40px] px-spacing-xl py-spacing-md',
+  'rounded-[8px] shrink-0',
+  'bg-[rgba(13,18,28,1)] dark:bg-[rgba(13,18,28,1)]',
+  'text-white cursor-pointer select-none',
+  'text-text-md font-[500] whitespace-nowrap',
+  'hover:bg-[rgba(31,42,55,1)]',
+  'active:bg-[rgba(44,57,79,1)]',
+  'motion-feedback',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-[rgba(13,18,28,1)]',
+].join(' ');
+
+/* ── Trigger icon button (triggerType="icon") ─────────────────────── */
+
+export const TRIGGER_ICON_BTN = [
+  'inline-flex items-center justify-center',
+  'size-[24px] shrink-0 rounded-[4px]',
+  'cursor-pointer',
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]',
+  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,42,55,1)]',
+  'active:bg-[rgba(229,231,235,1)] dark:active:bg-[rgba(44,57,79,1)]',
+  'motion-feedback',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(22,22,22,1)] dark:focus-visible:ring-[rgba(210,214,219,1)] focus-visible:ring-offset-1',
+].join(' ');
+
+/* ── Filter icon wrapper (24×24) ─────────────────────────────────── */
+export const FILTER_ICON = 'shrink-0 size-icon-md';
+
+/* ── Chevron icon wrapper — rotates when panel is open ───────────── */
+export const CHEVRON = (open: boolean) =>
+  `shrink-0 size-icon-md transition-transform duration-200${open ? ' rotate-180' : ''}`;
+
+/* ── Panel (fixed-position, escapes overflow containers) ─────────── */
+
+/**
+ * Visual-only classes — position, top, left, width, and z-index are
+ * injected via inline `style` computed from the trigger's
+ * getBoundingClientRect() so the panel is never clipped by an
+ * `overflow: hidden` ancestor (e.g. a demo preview container).
+ */
+export const PANEL_FIXED = 'motion-enter';

package/src/components/Filtration/index.ts

@@ -0,0 +1,6 @@
+export { Filtration } from './Filtration';
+export type {
+  FiltrationProps,
+  FiltrationActiveFilter,
+  FiltrationTriggerType,
+} from './Filtration.types';