sdaia-ui 1.0.1

package/src/components/DraggableItem/DraggableItem.variants.ts

@@ -0,0 +1,149 @@
+import type { DraggableItemState } from './DraggableItem.types';
+
+/**
+ * DraggableItem.variants.ts
+ *
+ * Mapped from Figma nodes:
+ * - LTR Default: 6402:106207
+ * - RTL Default: 6494:94358
+ * - LTR Focused: 6413:92965
+ * - RTL Focused: 6494:94379
+ * - LTR Disabled: 6413:92973
+ * - RTL Disabled: 6494:94400
+ *
+ * Color sources (Figma vars):
+ * - Form/field-background-default        → #ffffff / dark: rgba(17,25,39,1)
+ * - Border/border-neutral-primary        → #d2d6db / dark: rgba(44,57,79,1)
+ * - Border/border-primary               → #1b8354 (same in dark)
+ * - Form/field-text-label               → #161616 / dark: rgba(229,231,235,1)
+ * - Text/text-secondary-paragraph        → #6c737f / dark: rgba(107,114,128,1)
+ * - Global/text-default-disabled         → #9da4ae / dark: rgba(75,85,99,1)
+ * - Background/background-primary (dot)   → #1b8354 (same in dark)
+ * - Border/border-neutral-secondary (disabled dot) → #e5e7eb / dark: rgba(75,85,99,1)
+ */
+
+export const ROOT_BASE =
+  [
+    // Layout
+    'flex items-center justify-between',
+    // Mirror the two halves in RTL (start content moves to the right)
+    'ltr:flex-row rtl:flex-row-reverse',
+    'gap-spacing-md',
+    // Surface
+    'bg-white dark:bg-[rgba(17,25,39,1)]',
+    'border border-solid',
+    'rounded-[8px]',
+    // Spacing
+    'px-spacing-lg py-spacing-md',
+    // Sizing
+    'w-full',
+    // Interaction
+    'motion-feedback',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,1)] dark:focus-visible:ring-[rgba(27,131,84,1)]',
+  ].join(' ');
+
+export const STATE_BORDER: Record<DraggableItemState, string> = {
+  default: 'border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)]',
+  focused: 'border-[rgba(27,131,84,1)] dark:border-[rgba(27,131,84,1)]',
+  disabled: 'border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)]',
+};
+
+export const START_GROUP =
+  [
+    // Start content should take the available space (Figma: stretches).
+    'flex flex-1 items-center min-w-0',
+    'gap-spacing-xs',
+    // Make ordering mirror in RTL without changing DOM structure.
+    'ltr:flex-row rtl:flex-row-reverse',
+  ].join(' ');
+
+export const END_GROUP =
+  [
+    // End content should be shrink-to-fit (Figma: status dot / trailing controls).
+    'flex items-center shrink-0',
+    'gap-spacing-xs',
+    // Make ordering mirror in RTL without changing DOM structure.
+    'ltr:flex-row rtl:flex-row-reverse',
+  ].join(' ');
+
+export const DRAG_HANDLE_WRAP =
+  // Figma: 24×24 (icon-xl). size-icon-lg resolves to 24px at desktop.
+  'inline-flex items-center justify-center flex-shrink-0 size-icon-lg text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)]';
+
+export const ICON_WRAP: Record<DraggableItemState, string> = {
+  default:
+    'inline-flex items-center justify-center flex-shrink-0 size-icon-md text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)]',
+  focused:
+    'inline-flex items-center justify-center flex-shrink-0 size-icon-md text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)]',
+  disabled:
+    'inline-flex items-center justify-center flex-shrink-0 size-icon-md text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]',
+};
+
+export const AVATAR_WRAP =
+  [
+    'inline-flex items-center justify-center flex-shrink-0 overflow-hidden',
+    // Figma: 32×32, fully round.
+    'size-[32px] rounded-full',
+    'bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,42,55,1)]',
+  ].join(' ');
+
+export const AVATAR_IMG = 'size-full object-contain';
+
+export const TEXT_COL =
+  ['flex flex-[1_0_0] flex-col justify-center min-w-0', 'gap-spacing-xxs'].join(' ');
+
+export const TEXT_ROW =
+  [
+    'flex items-center min-w-0',
+    'gap-spacing-xs',
+    'text-text-sm leading-[20px]',
+  ].join(' ');
+
+export const PRIMARY_TEXT: Record<DraggableItemState, string> = {
+  default:
+    'text-text-sm leading-[20px] font-[400] text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] whitespace-nowrap shrink-0',
+  focused:
+    'text-text-sm leading-[20px] font-[400] text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] whitespace-nowrap shrink-0',
+  disabled:
+    'text-text-sm leading-[20px] font-[400] text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)] whitespace-nowrap shrink-0',
+};
+
+export const SECONDARY_TEXT: Record<DraggableItemState, string> = {
+  default:
+    'text-text-sm leading-[20px] font-[600] text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)] min-w-0 truncate',
+  focused:
+    'text-text-sm leading-[20px] font-[600] text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)] min-w-0 truncate',
+  disabled:
+    'text-text-sm leading-[20px] font-[600] text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)] min-w-0 truncate',
+};
+
+export const DESCRIPTION_TEXT: Record<DraggableItemState, string> = {
+  default:
+    'text-text-xs leading-[18px] font-[400] text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)] min-w-0 truncate',
+  focused:
+    'text-text-xs leading-[18px] font-[400] text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)] min-w-0 truncate',
+  disabled:
+    'text-text-xs leading-[18px] font-[400] text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)] min-w-0 truncate',
+};
+
+export const END_TEXT_COL =
+  [
+    TEXT_COL,
+    // In LTR end text is right-aligned; in RTL it becomes left-aligned.
+    'text-end rtl:text-start',
+    // In LTR the column is left-aligned within its own box; mirror in RTL.
+    'items-start rtl:items-start',
+  ].join(' ');
+
+export const END_TEXT_ROW =
+  [TEXT_ROW, 'justify-end rtl:justify-start'].join(' ');
+
+export const STATUS_DOT_WRAP =
+  'inline-flex items-center justify-center flex-shrink-0 size-[12px] rounded-full';
+
+export const STATUS_DOT_COLOR: Record<DraggableItemState, string> = {
+  default: 'bg-[rgba(27,131,84,1)] dark:bg-[rgba(27,131,84,1)]',
+  focused: 'bg-[rgba(27,131,84,1)] dark:bg-[rgba(27,131,84,1)]',
+  disabled: 'bg-[rgba(229,231,235,1)] dark:bg-[rgba(75,85,99,1)]',
+};
+

package/src/components/DraggableItem/index.ts

@@ -0,0 +1,3 @@
+export { DraggableItem } from './DraggableItem';
+export type { DraggableItemProps, DraggableItemState } from './DraggableItem.types';
+

package/src/components/DraggableList/DraggableList.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { DraggableListProps } from './DraggableList.types';
+import { ROOT } from './DraggableList.variants';
+
+export const DraggableList = forwardRef<HTMLDivElement, DraggableListProps>(function DraggableList(
+  { dir, rtl, className, children, ...rest },
+  ref,
+) {
+  const resolvedDir = dir ?? (rtl ? 'rtl' : undefined);
+
+  return (
+    <div ref={ref} data-slot="draggable-list" dir={resolvedDir} className={cn(ROOT, className)} {...rest}>
+      {children}
+    </div>
+  );
+});
+

package/src/components/DraggableList/DraggableList.types.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface DraggableListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** List items (typically `DraggableItem` elements). */
+  children?: 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/DraggableList/DraggableList.variants.ts

@@ -0,0 +1,13 @@
+/**
+ * DraggableList.variants.ts
+ *
+ * Mapped from Figma node 6503:94419 (Draggable List)
+ * - LTR: 6503:94418
+ * - RTL: 6503:94420
+ *
+ * Spacing:
+ * - gap: Global/spacing-lg → 12 px → `gap-spacing-lg`
+ */
+
+export const ROOT = 'flex flex-col items-start gap-spacing-lg w-full';
+

package/src/components/DraggableList/index.ts

@@ -0,0 +1,3 @@
+export { DraggableList } from './DraggableList';
+export type { DraggableListProps } from './DraggableList.types';
+

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,331 @@
+'use client';
+
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import type { CSSProperties } from 'react';
+import { cn } from '../../lib/cn';
+import { MoreVerticalIcon } from '../../icons/IconFactory';
+import type { DropdownProps, DropdownItem } from './Dropdown.types';
+import {
+  OPEN_RING,
+  OPEN_RING_ROUNDED,
+  OPEN_RING_ROUNDED_FULL,
+  ICON_TRIGGER_BASE,
+  ICON_TRIGGER_RADIUS,
+  ICON_TRIGGER_INTERACTIVE,
+  ICON_TRIGGER_FOCUS,
+  ICON_COLOR,
+  ICON_DISABLED_COLOR,
+  PANEL_BG,
+  PANEL_SHADOW,
+  PANEL_RADIUS,
+  DISABLED_CONTAINER,
+} from './Dropdown.variants';
+import { Avatar } from '../Avatar';
+import { ButtonMenu } from '../ButtonMenu';
+import { DropdownListHeader } from '../DropdownListHeader';
+import { ContextMenuDropdown } from '../ContextMenuDropdown';
+import { NavItem } from '../NavItem';
+
+const PANEL_WIDTH = 250;
+const MARGIN = 8;
+
+/*
+ * Dropdown — a trigger button/icon/avatar that opens a floating panel.
+ *
+ * Figma: "Dropdown" — node 6069:90934
+ *
+ * ## Trigger types
+ *   button → ButtonMenu (label + chevron-down), variant/size forwarded
+ *   icon   → more-vertical (⋮) 24×24 icon
+ *   avatar → circular 40×40 image with green status dot
+ *
+ * ## Panel
+ *   DropdownListHeader (User type by default) at the top
+ *   ContextMenuDropdown rows for each item group
+ *   NavItem divider between groups
+ *   Width: 250px, rounded-[8px], white bg, shadow-xl
+ *
+ * ## Alignment
+ *   start  → panel aligns to trigger's start edge
+ *   center → panel centers below trigger
+ *   end    → panel aligns to trigger's end edge
+ *   All positions are viewport-clamped so the panel never overflows on mobile.
+ *
+ * ## Panel uses position: fixed
+ *   Computed from getBoundingClientRect() so it escapes any overflow:hidden
+ *   ancestor (e.g. demo preview containers).
+ */
+
+export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
+  function Dropdown(
+    {
+      type = 'button',
+      alignment = 'end',
+      dir,
+      label = 'Button',
+      variant = 'primary',
+      size = 'md',
+      avatarSrc,
+      avatarAlt,
+      header,
+      items = [],
+      disabled = false,
+      open: controlledOpen,
+      defaultOpen = false,
+      onOpenChange,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    /* ── Open state (controlled / uncontrolled) ──────────────────── */
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isControlled = controlledOpen !== undefined;
+    const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+
+    const setOpen = useCallback(
+      (next: boolean) => {
+        if (!isControlled) setUncontrolledOpen(next);
+        onOpenChange?.(next);
+      },
+      [isControlled, onOpenChange],
+    );
+
+    /* ── Refs ────────────────────────────────────────────────────── */
+    const rootRef = 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 (!rootRef.current) return;
+      const rect = rootRef.current.getBoundingClientRect();
+      const vw = window.innerWidth;
+      const isRtl = dir === 'rtl' || document.documentElement.dir === 'rtl';
+
+      const width = Math.min(PANEL_WIDTH, vw - MARGIN * 2);
+
+      let left: number;
+      if (alignment === 'center') {
+        left = rect.left + rect.width / 2 - width / 2;
+      } else if (alignment === 'start') {
+        left = isRtl ? rect.right - width : rect.left;
+      } else {
+        // end (default)
+        left = isRtl ? rect.left : rect.right - width;
+      }
+
+      // 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,
+      });
+    }, [alignment, dir]);
+
+    /* ── Reposition on open / scroll / resize ───────────────────── */
+    useEffect(() => {
+      if (!isOpen) return;
+      computePosition();
+      window.addEventListener('scroll', computePosition, true);
+      window.addEventListener('resize', computePosition);
+      return () => {
+        window.removeEventListener('scroll', computePosition, true);
+        window.removeEventListener('resize', computePosition);
+      };
+    }, [isOpen, computePosition]);
+
+    /* ── Click-outside closes the panel ─────────────────────────── */
+    useEffect(() => {
+      if (!isOpen) return;
+
+      const handleOutside = (e: MouseEvent) => {
+        const target = e.target as Node;
+        const inRoot = rootRef.current?.contains(target) ?? false;
+        const inPanel = panelRef.current?.contains(target) ?? false;
+        if (!inRoot && !inPanel) setOpen(false);
+      };
+
+      document.addEventListener('mousedown', handleOutside);
+      return () => document.removeEventListener('mousedown', handleOutside);
+    }, [isOpen, setOpen]);
+
+    /* ── Merge forwarded ref with internal rootRef ───────────────── */
+    const setRefs = useCallback(
+      (node: HTMLDivElement | null) => {
+        (rootRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        if (typeof ref === 'function') ref(node);
+        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      },
+      [ref],
+    );
+
+    /* ── Trigger interaction ─────────────────────────────────────── */
+    const handleTriggerClick = useCallback(() => {
+      if (!disabled) {
+        if (!isOpen) computePosition(); // pre-compute before panel mounts
+        setOpen(!isOpen);
+      }
+    }, [disabled, isOpen, setOpen, computePosition]);
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent) => {
+        if (disabled) return;
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          setOpen(!isOpen);
+        }
+        if (e.key === 'Escape' && isOpen) {
+          e.preventDefault();
+          setOpen(false);
+        }
+      },
+      [disabled, isOpen, setOpen],
+    );
+
+    /* ── Open focus ring ─────────────────────────────────────────── */
+    const openRingClass = isOpen
+      ? cn(OPEN_RING, type === 'avatar' ? OPEN_RING_ROUNDED_FULL : OPEN_RING_ROUNDED)
+      : '';
+
+    /* ── Trigger rendering ───────────────────────────────────────── */
+    function renderTrigger() {
+      if (type === 'icon') {
+        return (
+          <button
+            type="button"
+            data-slot="trigger"
+            aria-haspopup="menu"
+            aria-expanded={isOpen}
+            aria-disabled={disabled || undefined}
+            tabIndex={disabled ? -1 : 0}
+            onClick={handleTriggerClick}
+            onKeyDown={handleKeyDown}
+            className={cn(
+              ICON_TRIGGER_BASE,
+              !isOpen && ICON_TRIGGER_RADIUS,
+              disabled ? DISABLED_CONTAINER : ICON_TRIGGER_INTERACTIVE,
+              ICON_TRIGGER_FOCUS,
+              disabled ? ICON_DISABLED_COLOR : ICON_COLOR,
+              openRingClass,
+            )}
+          >
+            <MoreVerticalIcon />
+          </button>
+        );
+      }
+
+      if (type === 'avatar') {
+        return (
+          <button
+            type="button"
+            data-slot="trigger"
+            aria-haspopup="menu"
+            aria-expanded={isOpen}
+            aria-disabled={disabled || undefined}
+            tabIndex={disabled ? -1 : 0}
+            onClick={handleTriggerClick}
+            onKeyDown={handleKeyDown}
+            className={cn(
+              'inline-flex rounded-full cursor-pointer',
+              ICON_TRIGGER_FOCUS,
+              disabled && 'pointer-events-none opacity-50',
+              openRingClass,
+            )}
+          >
+            <Avatar
+              type="image"
+              size="lg"
+              shape="round"
+              src={avatarSrc}
+              alt={avatarAlt ?? ''}
+            />
+          </button>
+        );
+      }
+
+      /* type === 'button' (default) */
+      return (
+        <ButtonMenu
+          data-slot="trigger"
+          variant={variant}
+          size={size}
+          disabled={disabled}
+          selected={isOpen}
+          aria-haspopup="menu"
+          aria-expanded={isOpen}
+          onClick={handleTriggerClick}
+          onKeyDown={handleKeyDown}
+          className={openRingClass}
+        >
+          {label}
+        </ButtonMenu>
+      );
+    }
+
+    const panel = isOpen && mounted ? createPortal(
+      <div
+        ref={panelRef}
+        data-slot="panel"
+        data-motion="scale-in"
+        role="menu"
+        style={panelStyle}
+        className={cn(
+          'py-spacing-xs',
+          PANEL_RADIUS,
+          PANEL_BG,
+          PANEL_SHADOW,
+        )}
+      >
+        <DropdownListHeader
+          type="User"
+          {...header}
+          className={cn('!w-full', header?.className)}
+        />
+
+        {items.map((item: DropdownItem, index: number) => {
+          if (item.type === 'divider') {
+            return <NavItem key={index} divider />;
+          }
+          return (
+            <ContextMenuDropdown
+              key={index}
+              label={item.label}
+              items={item.items ?? []}
+              disabled={item.disabled}
+              className="w-full"
+            />
+          );
+        })}
+      </div>,
+      document.body,
+    ) : null;
+
+    return (
+      <>
+        <div
+          ref={setRefs}
+          dir={dir}
+          data-slot="dropdown"
+          className={cn('relative inline-flex flex-col', className)}
+          {...rest}
+        >
+          {renderTrigger()}
+        </div>
+
+        {panel}
+      </>
+    );
+  },
+);

package/src/components/Dropdown/Dropdown.types.ts

@@ -0,0 +1,108 @@
+import type { HTMLAttributes } from 'react';
+import type { ButtonMenuVariant, ButtonMenuSize } from '../ButtonMenu/ButtonMenu.types';
+import type { ContextMenuDropdownItem } from '../ContextMenuDropdown/ContextMenuDropdown.types';
+import type { DropdownListHeaderProps } from '../DropdownListHeader/DropdownListHeader.types';
+
+/**
+ * Trigger type — maps Figma "Type" property:
+ *   Button → ButtonMenu trigger (label + chevron)
+ *   Icon   → more-vertical (⋮) icon-only trigger
+ *   Avatar → circular avatar image trigger
+ */
+export type DropdownTriggerType = 'button' | 'icon' | 'avatar';
+
+/**
+ * Panel alignment relative to the trigger — maps Figma "Alignment" property.
+ *   start  → panel aligns to the inline-start edge of the trigger
+ *   center → panel centered below the trigger
+ *   end    → panel aligns to the inline-end edge of the trigger
+ */
+export type DropdownAlignment = 'start' | 'center' | 'end';
+
+/**
+ * A ContextMenuDropdown row entry in the panel.
+ */
+export interface DropdownNavEntry {
+  type?: 'item';
+  /** Label displayed in the row trigger */
+  label: string;
+  /** Items rendered in this row's sub-panel */
+  items?: ContextMenuDropdownItem[];
+  /** Whether this row is disabled */
+  disabled?: boolean;
+}
+
+/**
+ * A visual divider line between groups of items.
+ */
+export interface DropdownDivider {
+  type: 'divider';
+}
+
+/**
+ * Union type for all panel row entries.
+ */
+export type DropdownItem = DropdownNavEntry | DropdownDivider;
+
+export interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Layout direction — set to 'rtl' for Arabic/Hebrew. Passed to the root element. */
+  dir?: 'ltr' | 'rtl';
+  /**
+   * Determines which trigger element is rendered.
+   * @default 'button'
+   */
+  type?: DropdownTriggerType;
+
+  /**
+   * Panel alignment relative to the trigger.
+   * @default 'end'
+   */
+  alignment?: DropdownAlignment;
+
+  // ── Button trigger ──────────────────────────────────────────────────────────
+  /** Label for the button trigger. Used when type="button". */
+  label?: string;
+  /** Visual variant for the ButtonMenu trigger. Defaults to 'primary'. */
+  variant?: ButtonMenuVariant;
+  /** Size of the ButtonMenu trigger. Defaults to 'md'. */
+  size?: ButtonMenuSize;
+
+  // ── Avatar trigger ──────────────────────────────────────────────────────────
+  /** URL of the avatar image. Used when type="avatar". */
+  avatarSrc?: string;
+  /** Alt text for the avatar image. */
+  avatarAlt?: string;
+
+  // ── Panel header ────────────────────────────────────────────────────────────
+  /** Props forwarded to the DropdownListHeader at the top of the panel. */
+  header?: DropdownListHeaderProps;
+
+  // ── Panel items ─────────────────────────────────────────────────────────────
+  /** Rows rendered in the panel body as ContextMenuDropdown entries. */
+  items?: DropdownItem[];
+
+  // ── Open state ──────────────────────────────────────────────────────────────
+  /** Whether the panel is disabled. Prevents opening. */
+  disabled?: boolean;
+
+  /**
+   * Controlled open state.
+   * When provided, the component is fully controlled — pair with `onOpenChange`.
+   */
+  open?: boolean;
+
+  /**
+   * Initial open state for uncontrolled usage.
+   * Ignored when `open` is provided.
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Called when the open state changes (trigger click or outside click).
+   * Required for controlled usage.
+   */
+  onOpenChange?: (open: boolean) => void;
+
+  /** Additional class names on the root wrapper */
+  className?: string;
+}