sdaia-ui 1.0.1

package/src/components/Signature/Signature.types.ts

@@ -0,0 +1,68 @@
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Which signature capture method is active.
+ * Maps to the Figma "Type" property.
+ */
+export type SignatureType = 'draw' | 'text' | 'upload';
+
+export interface SignatureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * Controlled active tab.
+   * Pair with `onTypeChange`. When omitted use `defaultType`.
+   */
+  type?: SignatureType;
+
+  /**
+   * Uncontrolled initial tab.
+   * @default 'draw'
+   */
+  defaultType?: SignatureType;
+
+  /** Called when the user switches tabs. */
+  onTypeChange?: (type: SignatureType) => void;
+
+  /**
+   * Helper / disclaimer text shown below the signature area.
+   * @default "By signing this document, I certify that I have reviewed and accepted the agreement."
+   */
+  helperText?: string;
+
+  /**
+   * Whether the helper text is visible.
+   * @default true
+   */
+  showHelperText?: boolean;
+
+  /**
+   * Whether the draw / text options toolbar (color, size, background) is shown.
+   * @default true
+   */
+  showOptions?: boolean;
+
+  /**
+   * Whether the tabs row is shown.
+   * @default true
+   */
+  showTabs?: boolean;
+
+  /** Label for the secondary (cancel) action. */
+  cancelLabel?: string;
+
+  /** Label for the primary (accept) action. */
+  acceptLabel?: string;
+
+  /** Called when Cancel is clicked. */
+  onCancel?: () => void;
+
+  /**
+   * Called when Accept and Sign is clicked.
+   * Receives the captured data:
+   *   draw   → base64 PNG string from canvas
+   *   text   → the typed signature string
+   *   upload → the File object
+   */
+  onAccept?: (data?: string | File) => void;
+
+  className?: string;
+}

package/src/components/Signature/Signature.variants.ts

@@ -0,0 +1,115 @@
+/*
+ * Signature variant maps
+ *
+ * Figma source: node 6253:87861 "Signature"
+ * Variable mappings traced to get_variable_defs output 2026-04-14.
+ *
+ * Token → Tailwind mapping:
+ *   Background/background-white           → bg-white
+ *   Background/background-neutral-100     → bg-[rgba(243,244,246,1)]
+ *   Border/border-neutral-primary         → border/bg-[rgba(210,214,219,1)]
+ *   Form/field-text-helper                → text-[rgba(108,115,127,1)]
+ *   Text/text-display                     → text-[rgba(31,42,55,1)]
+ *   Text/text-secondary-paragraph         → text-[rgba(108,115,127,1)]
+ *   Radius/radius-8                       → rounded-[8px]
+ *   Radius/radius-16                      → rounded-[16px]
+ *   Global/spacing-*                      → p/gap-spacing-*
+ */
+
+/* ── Card root ───────────────────────────────────────────────────── */
+export const CARD_ROOT =
+  'bg-white dark:bg-[rgba(17,25,39,1)] flex flex-col gap-spacing-lg p-spacing-xl w-full h-full min-h-[450px]';
+
+/* ── Tab section ─────────────────────────────────────────────────── */
+/** Wrapper that provides the relative context for the grey underline. */
+export const TAB_SECTION = 'relative shrink-0';
+
+/**
+ * Full-width 1px grey line sitting at the bottom of the tab bar.
+ * The active tab's 2px green border-bottom paints over it.
+ * Figma: Border/border-neutral-primary (#d2d6db) at bottom of tab row.
+ */
+export const TAB_DIVIDER =
+  'absolute bottom-0 start-0 end-0 h-px bg-[rgba(210,214,219,1)] dark:bg-[rgba(55,65,81,1)]';
+
+/* ── Options toolbar ─────────────────────────────────────────────── */
+/** Row wrapping all draw / text tool controls. */
+export const OPTIONS_ROW = 'flex items-center gap-spacing-md w-full shrink-0';
+
+/**
+ * Label text inside each option group (Color, Size, Background).
+ * Figma: Text 2xs/Regular — 10px, line-height 14px.
+ * Using text-text-2xs global token.
+ */
+export const OPTIONS_LABEL =
+  'text-text-2xs font-normal text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] whitespace-nowrap select-none';
+
+/**
+ * Label text for the "Select typeface" control in Text mode.
+ * Figma: Text xs/Regular — 12px, line-height 18px.
+ * Using text-text-xs global token.
+ */
+export const OPTIONS_TYPEFACE_LABEL =
+  'text-text-xs font-normal text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] whitespace-nowrap select-none';
+
+/**
+ * Pill container for a swatch + chevron (Color / Background pickers).
+ * Figma: bg neutral-100, radius-4, p-spacing-xxs (2px), gap-spacing-xs (4px).
+ */
+export const OPTIONS_SWATCH_PILL =
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(55,65,81,1)] flex items-center gap-spacing-xs p-spacing-xxs rounded-[4px]';
+
+/**
+ * Pill container for the Size selector.
+ * Figma: same bg as swatch pill, pl-spacing-xs pr-spacing-xxs py-spacing-xxs.
+ */
+export const OPTIONS_SIZE_PILL =
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(55,65,81,1)] flex items-center gap-spacing-xs pl-spacing-xs pr-spacing-xxs py-spacing-xxs rounded-[4px] max-h-[20px]';
+
+/* ── Signature canvas area ───────────────────────────────────────── */
+/**
+ * Draw type: full grey rounded box, flex-1 to fill remaining card height.
+ * Figma: Background/background-neutral-100, radius-16.
+ */
+export const DRAW_CANVAS_WRAPPER =
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,41,55,1)] flex-1 min-h-[180px] w-full rounded-[16px] overflow-hidden';
+
+/**
+ * Text type: same grey box but with vertical padding and a baseline underline.
+ * Figma: pt-spacing-lg pb-spacing-4xl px-spacing-6xl, items-center justify-end.
+ */
+export const TEXT_CANVAS_WRAPPER =
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,41,55,1)] flex-1 min-h-[180px] w-full rounded-[16px] flex flex-col items-center justify-end pt-spacing-lg pb-spacing-4xl px-spacing-6xl relative overflow-hidden';
+
+/**
+ * The horizontal line at the bottom of the text canvas (signature baseline).
+ * Figma: Divider / border-neutral-primary (1px hairline).
+ */
+export const TEXT_BASELINE =
+  'w-full h-px bg-[rgba(210,214,219,1)] dark:bg-[rgba(55,65,81,1)] shrink-0';
+
+/**
+ * The typed-signature input field inside the text canvas.
+ * Transparent bg, no border, text centered above the baseline.
+ */
+export const TEXT_INPUT =
+  'w-full bg-transparent border-none outline-none text-center text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] placeholder-[rgba(156,163,175,1)] text-text-md pb-spacing-xs';
+
+/* ── Helper text ─────────────────────────────────────────────────── */
+/**
+ * Disclaimer text shown below the signature area.
+ * Figma: Text sm/Regular — 14px, Form/field-text-helper (#6c737f).
+ */
+export const HELPER_TEXT =
+  'text-text-sm font-normal text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] w-full shrink-0';
+
+/* ── Actions row ─────────────────────────────────────────────────── */
+/**
+ * Wrapper for Cancel + Accept buttons.
+ * Figma: justify-between, pt-spacing-sm (6px top padding).
+ * RTL: flex with direction:rtl reverses the visual order automatically —
+ *   neutral appears on the inline-end (right-in-RTL = physical right),
+ *   primary on the inline-start (right-in-RTL = physical left). ✓
+ */
+export const ACTIONS_ROW =
+  'flex items-center justify-between pt-spacing-sm w-full shrink-0';

package/src/components/Signature/index.ts

@@ -0,0 +1,2 @@
+export { Signature } from './Signature';
+export type { SignatureProps, SignatureType } from './Signature.types';

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { SkeletonProps } from './Skeleton.types';
+import { BASE_CLASSES, SIZE_CLASSES } from './Skeleton.variants';
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(
+  { size = 'text-xl', className, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      data-slot="skeleton"
+      aria-hidden="true"
+      className={cn(BASE_CLASSES, SIZE_CLASSES[size], className)}
+      {...rest}
+    />
+  );
+});

package/src/components/Skeleton/Skeleton.types.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+
+export type SkeletonSize = 'text-sm' | 'text-md' | 'text-lg' | 'text-xl';
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Visual size preset for text/block placeholders.
+   * Matches the Figma text skeleton scale:
+   * - text-sm: 16px line (short)
+   * - text-md: 16px line (full)
+   * - text-lg: 32px block
+   * - text-xl: 92px block
+   */
+  size?: SkeletonSize;
+}

package/src/components/Skeleton/Skeleton.variants.ts

@@ -0,0 +1,14 @@
+import type { SkeletonSize } from './Skeleton.types';
+
+export const BASE_CLASSES = [
+  'shrink-0 rounded-[6px]',
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,42,55,1)]',
+  'motion-loop-shimmer',
+].join(' ');
+
+export const SIZE_CLASSES: Record<SkeletonSize, string> = {
+  'text-sm': 'h-[16px] w-[298.664px]',
+  'text-md': 'h-[16px] w-[336px]',
+  'text-lg': 'h-[32px] w-[336px]',
+  'text-xl': 'h-[92px] w-[336px]',
+};

package/src/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonSize } from './Skeleton.types';

package/src/components/SkeletonAvatar/SkeletonAvatar.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { SkeletonAvatarProps } from './SkeletonAvatar.types';
+import { BASE_CLASSES, SIZE_CLASSES } from './SkeletonAvatar.variants';
+
+export const SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(function SkeletonAvatar(
+  { size = 'sm', className, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      data-slot="skeleton-avatar"
+      aria-hidden="true"
+      className={cn(BASE_CLASSES, SIZE_CLASSES[size], className)}
+      {...rest}
+    />
+  );
+});

package/src/components/SkeletonAvatar/SkeletonAvatar.types.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+
+export type SkeletonAvatarSize = 'sm' | 'S' | 'M' | 'L';
+
+export interface SkeletonAvatarProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Avatar placeholder size.
+   * Matches the Figma sizes:
+   * - sm: 24px
+   * - S: 32px
+   * - M: 48px
+   * - L: 64px
+   */
+  size?: SkeletonAvatarSize;
+}

package/src/components/SkeletonAvatar/SkeletonAvatar.variants.ts

@@ -0,0 +1,14 @@
+import type { SkeletonAvatarSize } from './SkeletonAvatar.types';
+
+export const BASE_CLASSES = [
+  'shrink-0 rounded-full',
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,42,55,1)]',
+  'motion-loop-shimmer',
+].join(' ');
+
+export const SIZE_CLASSES: Record<SkeletonAvatarSize, string> = {
+  sm: 'size-[24px]',
+  S: 'size-[32px]',
+  M: 'size-[48px]',
+  L: 'size-[64px]',
+};

package/src/components/SkeletonAvatar/index.ts

@@ -0,0 +1,2 @@
+export { SkeletonAvatar } from './SkeletonAvatar';
+export type { SkeletonAvatarProps, SkeletonAvatarSize } from './SkeletonAvatar.types';

package/src/components/SlideoutMenu/SlideoutMenu.tsx

@@ -0,0 +1,225 @@
+'use client';
+
+import { forwardRef, useCallback, useEffect, useState } from 'react';
+import { cn } from '../../lib/cn';
+import { usePresence } from '../../hooks/usePresence';
+import { Button } from '../Button';
+import type { SlideoutMenuProps } from './SlideoutMenu.types';
+
+export const SlideoutMenu = forwardRef<HTMLDivElement, SlideoutMenuProps>(
+  function SlideoutMenu(
+    {
+      rtl = false,
+      title = 'Title',
+      description = 'Description goes here.',
+      headerIcon,
+      divider = true,
+      showFooter = true,
+      primaryButtonLabel = 'Button',
+      secondaryButtonLabel = 'Button',
+      onPrimaryClick,
+      onSecondaryClick,
+      onClose,
+      open = true,
+      children,
+      className,
+    },
+    ref,
+  ) {
+    /* Internal collapsed state — used when no onClose handler is provided */
+    const [collapsed, setCollapsed] = useState(false);
+
+    /* Presence — keeps the panel in the DOM through its exit animation */
+    const { mounted, exiting } = usePresence(open ?? true, 300);
+
+    /* Derive data-motion: slide from inline-end (LTR) or inline-start (RTL) */
+    const motionIn  = rtl ? 'slide-in-start'  : 'slide-in-end';
+    const motionOut = rtl ? 'slide-out-start' : 'slide-out-end';
+    const motionAttr = exiting ? motionOut : motionIn;
+
+    /* X button: call onClose if provided, otherwise toggle collapsed */
+    const handleClose = () => {
+      if (onClose) {
+        onClose();
+      } else {
+        setCollapsed((prev) => !prev);
+      }
+    };
+
+    /* Close on Escape key */
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          if (onClose) {
+            onClose();
+          } else {
+            setCollapsed(true);
+          }
+        }
+      },
+      [onClose],
+    );
+
+    useEffect(() => {
+      if (open) {
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+      }
+    }, [open, handleKeyDown]);
+
+    if (!mounted) return null;
+
+    return (
+      <div
+        ref={ref}
+        dir={rtl ? 'rtl' : undefined}
+        data-slot="slideout-menu"
+        data-motion={motionAttr}
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        className={cn(
+          'flex flex-col w-[350px] lg:w-[400px] bg-white dark:bg-[rgba(13,18,28,1)]',
+          exiting ? 'motion-exit' : 'motion-enter',
+          className,
+        )}
+      >
+        {/* ── Header ─────────────────────────────────────────── */}
+        <div
+          data-slot="slideout-header"
+          className="flex items-start justify-between p-spacing-3xl shrink-0"
+        >
+          {/* Icon + text content */}
+          <div className="flex flex-1 gap-spacing-md items-start min-w-0">
+            {/* Featured icon */}
+            {headerIcon && (
+              <span
+                data-slot="header-icon"
+                className={cn(
+                  'shrink-0 flex items-center p-spacing-md rounded-full',
+                  'border border-[rgba(210,214,219,1)] shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)]',
+                  'dark:border-[rgba(255,255,255,0.2)]',
+                )}
+              >
+                <span className="size-icon-ms flex items-center justify-center text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]">
+                  {headerIcon}
+                </span>
+              </span>
+            )}
+
+            {/* Title + description */}
+            <div className="flex flex-col flex-1 gap-spacing-xs min-w-0 justify-center min-h-[46px]">
+              <span className="text-text-md font-[600] text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] truncate">
+                {title}
+              </span>
+              {description && (
+                <span className="text-text-xs font-[400] text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]">
+                  {description}
+                </span>
+              )}
+            </div>
+          </div>
+
+          {/* Close / expand button */}
+          <button
+            type="button"
+            data-slot="close-button"
+            onClick={handleClose}
+            className={cn(
+              'shrink-0 flex items-center p-spacing-xxs motion-feedback',
+              'text-[rgba(22,22,22,1)] hover:text-[rgba(108,115,127,1)]',
+              'dark:text-[rgba(229,231,235,1)] dark:hover:text-[rgba(156,163,175,1)]',
+            )}
+            aria-label={collapsed ? 'Expand' : 'Close'}
+          >
+            {collapsed ? (
+              /* Chevron-down: re-expand */
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 16 16"
+                width={16}
+                height={16}
+                fill="none"
+              >
+                <path
+                  fill="currentColor"
+                  fillRule="evenodd"
+                  d="M3.22 5.97a.75.75 0 0 1 1.06 0L8 9.69l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L3.22 7.03a.75.75 0 0 1 0-1.06Z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            ) : (
+              /* X: close/collapse */
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 16 16"
+                width={16}
+                height={16}
+                fill="none"
+              >
+                <path
+                  fill="currentColor"
+                  fillRule="evenodd"
+                  d="M3.22 3.22a.75.75 0 0 1 1.06 0L8 6.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L9.06 8l3.72 3.72a.75.75 0 1 1-1.06 1.06L8 9.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06L6.94 8 3.22 4.28a.75.75 0 0 1 0-1.06Z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            )}
+          </button>
+        </div>
+
+        {/* ── Header divider ─────────────────────────────────── */}
+        {divider && !collapsed && (
+          <div className="shrink-0 w-full h-px bg-[rgba(210,214,219,1)] dark:bg-[rgba(255,255,255,0.1)]" />
+        )}
+
+        {/* ── Body ───────────────────────────────────────────── */}
+        {!collapsed && (
+          <div
+            data-slot="slideout-body"
+            className="flex-1 min-h-0"
+          >
+            {children}
+          </div>
+        )}
+
+        {/* ── Footer divider ─────────────────────────────────── */}
+        {showFooter && divider && !collapsed && (
+          <div className="shrink-0 w-full h-px bg-[rgba(210,214,219,1)] dark:bg-[rgba(255,255,255,0.1)]" />
+        )}
+
+        {/* ── Footer ─────────────────────────────────────────── */}
+        {showFooter && !collapsed && (
+          <div
+            data-slot="slideout-footer"
+            className="shrink-0 flex items-center justify-end gap-spacing-md p-spacing-3xl"
+          >
+            {/* Secondary button */}
+            <Button
+              type="button"
+              data-slot="secondary-button"
+              variant="secondary-outline"
+              size="lg"
+              onClick={onSecondaryClick}
+              className="min-h-[40px] rtl:order-2"
+            >
+              {secondaryButtonLabel}
+            </Button>
+
+            {/* Primary button */}
+            <Button
+              type="button"
+              data-slot="primary-button"
+              variant="neutral"
+              size="lg"
+              onClick={onPrimaryClick}
+              className="min-h-[40px] rtl:order-1"
+            >
+              {primaryButtonLabel}
+            </Button>
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/SlideoutMenu/SlideoutMenu.types.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+
+export interface SlideoutMenuSection {
+  /** Optional group label displayed above the section items */
+  label?: string;
+  /** Menu items or content for this section */
+  items: ReactNode;
+}
+
+export interface SlideoutMenuProps {
+  /** Right-to-left layout */
+  rtl?: boolean;
+  /** Header title */
+  title?: string;
+  /** Header description text */
+  description?: string;
+  /** Optional header icon (rendered inside a bordered circle) */
+  headerIcon?: ReactNode;
+  /** Whether to show header dividers and section dividers */
+  divider?: boolean;
+  /** Whether to show the footer with action buttons */
+  showFooter?: boolean;
+  /** Primary (dark) button label */
+  primaryButtonLabel?: string;
+  /** Secondary (outline) button label */
+  secondaryButtonLabel?: string;
+  /** Primary button click handler */
+  onPrimaryClick?: () => void;
+  /** Secondary button click handler */
+  onSecondaryClick?: () => void;
+  /** Close button click handler */
+  onClose?: () => void;
+  /** Whether the slideout is open/visible */
+  open?: boolean;
+  /** Content to render in the body */
+  children?: ReactNode;
+  /** Additional class names for the outer container */
+  className?: string;
+}

package/src/components/SlideoutMenu/SlideoutMenuDivider.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+export function SlideoutMenuDivider() {
+  return (
+    <div
+      data-slot="slideout-menu-divider"
+      className="w-full h-px bg-[rgba(210,214,219,1)] dark:bg-[rgba(255,255,255,0.1)]"
+    />
+  );
+}

package/src/components/SlideoutMenu/SlideoutMenuSection.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+
+export interface SlideoutMenuSectionProps {
+  /** Optional group label displayed above the section */
+  label?: string;
+  /** Section content (typically MenuItem components) */
+  children?: React.ReactNode;
+  /** Additional class names */
+  className?: string;
+}
+
+export const SlideoutMenuSection = forwardRef<HTMLDivElement, SlideoutMenuSectionProps>(
+  function SlideoutMenuSection({ label, children, className }, ref) {
+    return (
+      <div
+        ref={ref}
+        data-slot="slideout-menu-section"
+        className={cn(
+          'flex flex-col gap-spacing-md px-spacing-md py-spacing-xl w-full',
+          className,
+        )}
+      >
+        {label && (
+          <div className="flex items-center px-spacing-lg">
+            <span className="flex-1 text-text-xs font-[700] leading-[18px] text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)] uppercase">
+              {label}
+            </span>
+          </div>
+        )}
+        <div className="flex flex-col w-full">
+          {children}
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/SlideoutMenu/index.ts

@@ -0,0 +1,5 @@
+export { SlideoutMenu } from './SlideoutMenu';
+export { SlideoutMenuSection } from './SlideoutMenuSection';
+export { SlideoutMenuDivider } from './SlideoutMenuDivider';
+export type { SlideoutMenuProps } from './SlideoutMenu.types';
+export type { SlideoutMenuSectionProps } from './SlideoutMenuSection';