sdaia-ui 1.0.1

package/src/components/Metric/Metric.variants.ts

@@ -0,0 +1,175 @@
+/**
+ * Metric.variants.ts
+ *
+ * All class-name constants for the Metric card component.
+ * Values traced from Figma node 4749:40770.
+ *
+ * Color tokens:
+ *   Colors/Primary-SA-Flag/500              → #25935f  (badge dot)
+ *   Colors/Primary-SA-Flag/600-primary      → #1b8354  (green accent, green action link)
+ *   Colors/Tertiary-Lavendar/500-primary    → #80519f  (purple accent — Icon Left + Text / Text)
+ *   Text/text-default                       → #161616  / dark: #e5e7eb
+ *   Text/text-secondary-paragraph           → #6c737f  / dark: #9ca3af
+ *   Border/border-neutral-secondary         → #e5e7eb  / dark: #374151  (card border, divider)
+ *   Border/border-background-neutral        → #d2d6db                   (badge pill, outlined btn)
+ *   Background/background-white             → white    / dark: #141b34
+ *
+ * Spacing tokens (responsive, defined in globals.css):
+ *   spacing-xs  = 4 px   spacing-sm  = 6 px   spacing-md  = 8 px
+ *   spacing-lg  = 12 px  spacing-xl  = 16 px  spacing-2xl = 20 px
+ */
+
+// ─── Card root ────────────────────────────────────────────────────────────────
+
+export const CARD =
+  'flex flex-col overflow-hidden w-full rounded-[16px] ' +
+  'bg-white dark:bg-[rgba(20,27,52,1)] ' +
+  'border border-[rgba(229,231,235,1)] dark:border-[rgba(55,65,81,1)]';
+
+// ─── Content padding per action ───────────────────────────────────────────────
+
+export const CONTENT_PADDING: Record<string, string> = {
+  Default: 'p-spacing-2xl',
+  /** Header: "View report" bar is above, so only bottom padding stays full. */
+  Header: 'px-spacing-2xl pb-spacing-2xl pt-spacing-lg',
+  /** Footer: "View report" bar is below, so only top padding stays full. */
+  Footer: 'px-spacing-2xl pt-spacing-2xl pb-spacing-lg',
+};
+
+// ─── Action bars (Header top-bar / Footer bottom-bar) ─────────────────────────
+
+const BAR_BASE =
+  'flex items-center justify-between px-spacing-2xl py-spacing-lg';
+
+export const HEADER_BAR =
+  BAR_BASE +
+  ' border-b border-[rgba(229,231,235,1)] dark:border-[rgba(55,65,81,1)]';
+
+export const FOOTER_BAR =
+  BAR_BASE +
+  ' border-t border-[rgba(229,231,235,1)] dark:border-[rgba(55,65,81,1)]';
+
+// ─── Typography ───────────────────────────────────────────────────────────────
+
+/**
+ * Metric label / title — Text sm / Medium, muted colour.
+ * Figma: Line Height/Text/line-heights-text-sm = 20 px.
+ */
+export const LABEL =
+  'font-[500] ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] text-text-sm ';
+
+/**
+ * Main metric value — Display xs / Medium.
+ * Figma: Line Height/Display/line-heights-display-xs = 32 px.
+ */
+export const VALUE =
+  'font-[500] ' +
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] text-display-xs';
+
+/**
+ * Trend percentage — green accent.
+ * Figma: Text sm/Medium, line-heights-text-sm = 20 px.
+ */
+export const TREND_VALUE_GREEN =
+  'text-text-sm font-[500] text-[rgba(27,131,84,1)]';
+
+/**
+ * Trend percentage — purple accent (Icon Left + Text with trend=Text).
+ * Figma: Text sm/Medium, line-heights-text-sm = 20 px.
+ */
+export const TREND_VALUE_PURPLE =
+  'text-text-sm font-[500] text-[rgba(128,81,159,1)]';
+
+/**
+ * Secondary trend label (e.g. "vs last month").
+ * Figma: Text sm/Medium, line-heights-text-sm = 20 px.
+ */
+export const TREND_LABEL =
+  'text-text-sm font-[500] ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+
+// ─── Badge pill ───────────────────────────────────────────────────────────────
+// Figma: bg-white border-[#d2d6db] rounded-[6px] px-md py-xs gap-sm
+
+/** Badge pill wrapper */
+export const BADGE_PILL =
+  'inline-flex items-center gap-spacing-sm shrink-0 ' +
+  'border border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)] ' +
+  'rounded-[6px] px-spacing-md py-spacing-xs ' +
+  'bg-white dark:bg-[rgba(20,27,52,1)]';
+
+/** Badge text — Text sm / Regular */
+export const BADGE_TEXT =
+  'text-text-sm font-[400] whitespace-nowrap ' +
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+
+/** Green status dot — 8px circle, Colors/Primary-SA-Flag/500 */
+export const BADGE_DOT = 'shrink-0 size-[8px] rounded-full bg-[rgba(37,147,95,1)]';
+
+// ─── Action buttons ───────────────────────────────────────────────────────────
+
+/** Plain text-link — used in header/footer when graph=None. Green tint. */
+export const ACTION_TEXT_GREEN =
+  'text-text-sm font-[500] whitespace-nowrap ' +
+  'text-[rgba(27,131,84,1)] hover:opacity-80 transition-opacity';
+
+/** Plain text-link — purple tint (type="Icon Left + Text"). */
+export const ACTION_TEXT_PURPLE =
+  'text-text-sm font-[500] whitespace-nowrap ' +
+  'text-[rgba(128,81,159,1)] hover:opacity-80 transition-opacity';
+
+/** Outlined button + alert-circle — used when graph=Compact or Large. */
+export const ACTION_OUTLINED =
+  'inline-flex items-center gap-spacing-xs shrink-0 ' +
+  'border border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)] ' +
+  'rounded-[8px] px-spacing-lg py-spacing-sm ' +
+  'text-text-sm font-[500] whitespace-nowrap ' +
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] ' +
+  'hover:bg-[rgba(229,231,235,0.3)] motion-feedback';
+
+// ─── Star icon ────────────────────────────────────────────────────────────────
+// Figma: 40 px container with icon inset ~5 % on each side.
+
+/** Responsive star wrapper — 28px mobile / 32px tablet / 40px desktop (icon-xxxl token) */
+export const STAR_WRAPPER = 'shrink-0 size-icon-xxxl';
+
+/** Green star — Icon Left, Icon Top */
+export const STAR_GREEN = 'text-[rgba(27,131,84,1)]';
+
+/** Purple star — Icon Left + Text with trend=Text */
+export const STAR_PURPLE = 'text-[rgba(128,81,159,1)]';
+
+/** Dark/neutral star — Icon Left + Text with trend≠Text */
+export const STAR_DARK =
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+
+// ─── Content wrapper gap (per type) ──────────────────────────────────────────
+//
+// Figma gap between direct child sections of the main content area:
+//   Compact         → gap-spacing-lg  (12 px) — header-row ↔ numbers-row
+//   Icon Left       → gap-spacing-2xl (20 px) — star+col row is a single child
+//   Icon Top        → gap-spacing-2xl (20 px) — heading-row ↔ content-col
+//   Icon Left+Text  → gap-spacing-2xl (20 px) — heading-row ↔ value/trend-col
+//
+// Note: the nested sub-gaps (label↔numbers-row, etc.) are set directly on each
+// body sub-component. Only the *outer* wrapper gap is controlled here.
+
+export const CONTENT_GAP: Record<string, string> = {
+  Compact: 'gap-spacing-lg',
+  'Icon Left': 'gap-spacing-2xl',
+  'Icon Top': 'gap-spacing-2xl',
+  'Icon Left + Text': 'gap-spacing-2xl',
+};
+
+// ─── MoreVertical icon ────────────────────────────────────────────────────────
+
+/**
+ * MoreVertical (⋮) button wrapper.
+ * Fixed at 24×24px on all breakpoints — does not scale responsively.
+ * The SVG inside has no hard-coded dimensions and fills the wrapper.
+ */
+export const ICON_MUTED =
+  'shrink-0 size-[24px] cursor-pointer ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] ' +
+  'hover:opacity-70 transition-opacity';

package/src/components/Metric/index.ts

@@ -0,0 +1,8 @@
+export { Metric } from './Metric';
+export type {
+  MetricProps,
+  MetricAction,
+  MetricType,
+  MetricTrend,
+  MetricGraph,
+} from './Metric.types';

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { ModalHeader } from '../ModalHeader';
+import { ModalActions } from '../ModalActions';
+import type { ModalProps } from './Modal.types';
+
+export const Modal = forwardRef<HTMLDivElement, ModalProps>(
+  function Modal(
+    {
+      showHeader = true,
+      divider = true,
+      showActions = true,
+      mobile = false,
+
+      /* Header props */
+      title,
+      supportingText,
+      showSupportingText,
+      headerPlacement = 'start',
+      featuredIcon,
+      showCloseButton = true,
+      onClose,
+
+      /* Actions props */
+      actionsType = 'hug-start',
+      primaryLabel,
+      secondaryLabel,
+      showSecondary,
+      tertiaryLabel,
+      showTertiary,
+      onPrimaryClick,
+      onSecondaryClick,
+      onTertiaryClick,
+
+      children,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    /* Mobile forces stacked actions.
+     * When `mobile` is not explicitly set, actions auto-stack below md. */
+    const resolvedActionsType = mobile ? 'stack' : actionsType;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="modal"
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        /* Default entry animation — consumer can override via data-motion in rest */
+        data-motion="scale-in"
+        className={cn(
+          'motion-enter flex flex-col gap-spacing-2xl items-start p-spacing-2xl rounded-[8px]',
+          'bg-white dark:bg-[rgba(13,18,28,1)]',
+          mobile
+            ? 'w-full max-w-[330px]'
+            : 'w-full max-w-[600px]',
+          className,
+        )}
+        {...rest}
+      >
+        {/* ── Header ─────────────────────────────────────────── */}
+        {showHeader && (
+          <ModalHeader
+            title={title}
+            supportingText={supportingText}
+            showSupportingText={showSupportingText}
+            placement={headerPlacement}
+            featuredIcon={featuredIcon}
+            showCloseButton={showCloseButton}
+            onClose={onClose}
+            className="w-full"
+          >
+            {children}
+          </ModalHeader>
+        )}
+
+        {/* ── Divider ────────────────────────────────────────── */}
+        {divider && (
+          <div
+            data-slot="modal-divider"
+            className="w-full h-px bg-[rgba(210,214,219,1)] dark:bg-[rgba(255,255,255,0.1)]"
+          />
+        )}
+
+        {/* ── Actions ────────────────────────────────────────── */}
+        {/* Responsive actions: show stacked on mobile, resolved type on md+ */}
+        {showActions && !mobile && (
+          <>
+            {/* Mobile: stacked actions (visible below md) */}
+            <ModalActions
+              type="stack"
+              primaryLabel={primaryLabel}
+              secondaryLabel={secondaryLabel}
+              showSecondary={showSecondary}
+              tertiaryLabel={tertiaryLabel}
+              showTertiary={showTertiary}
+              onPrimaryClick={onPrimaryClick}
+              onSecondaryClick={onSecondaryClick}
+              onTertiaryClick={onTertiaryClick}
+              className="w-full md:hidden"
+            />
+            {/* Desktop: resolved actions type (visible at md+) */}
+            <ModalActions
+              type={resolvedActionsType}
+              primaryLabel={primaryLabel}
+              secondaryLabel={secondaryLabel}
+              showSecondary={showSecondary}
+              tertiaryLabel={tertiaryLabel}
+              showTertiary={showTertiary}
+              onPrimaryClick={onPrimaryClick}
+              onSecondaryClick={onSecondaryClick}
+              onTertiaryClick={onTertiaryClick}
+              className="w-full hidden md:flex"
+            />
+          </>
+        )}
+        {showActions && mobile && (
+          <ModalActions
+            type="stack"
+            primaryLabel={primaryLabel}
+            secondaryLabel={secondaryLabel}
+            showSecondary={showSecondary}
+            tertiaryLabel={tertiaryLabel}
+            showTertiary={showTertiary}
+            onPrimaryClick={onPrimaryClick}
+            onSecondaryClick={onSecondaryClick}
+            onTertiaryClick={onTertiaryClick}
+            className="w-full"
+          />
+        )}
+      </div>
+    );
+  },
+);

package/src/components/Modal/Modal.types.ts

@@ -0,0 +1,55 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { ModalHeaderPlacement } from '../ModalHeader';
+import type { ModalActionsType } from '../ModalActions';
+
+export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Show the ModalHeader section */
+  showHeader?: boolean;
+  /** Show the divider between header and actions */
+  divider?: boolean;
+  /** Show the ModalActions section */
+  showActions?: boolean;
+  /** Mobile layout — narrower width + stacked actions */
+  mobile?: boolean;
+
+  /* ── Header props ──────────────────────────────────────── */
+  /** Header title */
+  title?: string;
+  /** Header supporting text */
+  supportingText?: string;
+  /** Show supporting text */
+  showSupportingText?: boolean;
+  /** Header placement layout */
+  headerPlacement?: ModalHeaderPlacement;
+  /** Featured icon in header */
+  featuredIcon?: ReactNode;
+  /** Show close button in header */
+  showCloseButton?: boolean;
+  /** Close button handler */
+  onClose?: () => void;
+
+  /* ── Actions props ─────────────────────────────────────── */
+  /** Actions layout type (overridden to "stack" when mobile=true) */
+  actionsType?: ModalActionsType;
+  /** Primary button label */
+  primaryLabel?: string;
+  /** Secondary button label */
+  secondaryLabel?: string;
+  /** Show secondary button */
+  showSecondary?: boolean;
+  /** Tertiary button label */
+  tertiaryLabel?: string;
+  /** Show tertiary button */
+  showTertiary?: boolean;
+  /** Primary button click handler */
+  onPrimaryClick?: () => void;
+  /** Secondary button click handler */
+  onSecondaryClick?: () => void;
+  /** Tertiary button click handler */
+  onTertiaryClick?: () => void;
+
+  /** Content slot (passed to ModalHeader as children) */
+  children?: ReactNode;
+  /** Additional class name */
+  className?: string;
+}

package/src/components/Modal/index.ts

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

package/src/components/ModalActions/ModalActions.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { Button } from '../Button';
+import type { ModalActionsProps } from './ModalActions.types';
+
+export const ModalActions = forwardRef<HTMLDivElement, ModalActionsProps>(
+  function ModalActions(
+    {
+      type = 'hug-start',
+      primaryLabel = 'Button',
+      secondaryLabel = 'Button',
+      showSecondary = true,
+      tertiaryLabel = 'Button',
+      showTertiary = true,
+      onPrimaryClick,
+      onSecondaryClick,
+      onTertiaryClick,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const isStack = type === 'stack';
+    const isFill = type === 'fill';
+
+    /* ── Shared button elements ─────────────────────────────── */
+    const primaryButton = (
+      <Button
+        variant="neutral"
+        size="lg"
+        onClick={onPrimaryClick}
+        fullWidth={isStack || isFill}
+        data-slot="primary-button"
+      >
+        {primaryLabel}
+      </Button>
+    );
+
+    const secondaryButton = showSecondary ? (
+      <Button
+        variant="secondary-outline"
+        size="lg"
+        onClick={onSecondaryClick}
+        fullWidth={isStack || isFill}
+        data-slot="secondary-button"
+      >
+        {secondaryLabel}
+      </Button>
+    ) : null;
+
+    const tertiaryButton = showTertiary ? (
+      <Button
+        variant="secondary-outline"
+        size="lg"
+        onClick={onTertiaryClick}
+        fullWidth={isStack || isFill}
+        data-slot="tertiary-button"
+      >
+        {tertiaryLabel}
+      </Button>
+    ) : null;
+
+    /* ── Stack layout ───────────────────────────────────────── */
+    if (isStack) {
+      return (
+        <div
+          ref={ref}
+          data-slot="modal-actions"
+          className={cn(
+            'flex flex-col justify-center gap-spacing-md items-center w-full',
+            className,
+          )}
+          {...rest}
+        >
+          {primaryButton}
+          {secondaryButton}
+          {tertiaryButton}
+        </div>
+      );
+    }
+
+    /* ── Fill layout ────────────────────────────────────────── */
+    if (isFill) {
+      return (
+        <div
+          ref={ref}
+          data-slot="modal-actions"
+          className={cn(
+            'flex gap-spacing-md items-center justify-center w-full',
+            className,
+          )}
+          {...rest}
+        >
+          {primaryButton}
+          {secondaryButton}
+          {tertiaryButton}
+        </div>
+      );
+    }
+
+    /* ── Hug-Center layout ──────────────────────────────────── */
+    if (type === 'hug-center') {
+      return (
+        <div
+          ref={ref}
+          data-slot="modal-actions"
+          className={cn(
+            'flex gap-spacing-md items-center justify-center w-full',
+            className,
+          )}
+          {...rest}
+        >
+          {primaryButton}
+          {secondaryButton}
+          {tertiaryButton}
+        </div>
+      );
+    }
+
+    /* ── Hug-Start layout ───────────────────────────────────── */
+    if (type === 'hug-start') {
+      return (
+        <div
+          ref={ref}
+          data-slot="modal-actions"
+          className={cn(
+            'flex gap-spacing-md items-center w-full',
+            className,
+          )}
+          {...rest}
+        >
+          {/* Primary + Secondary grouped together */}
+          <div className="flex gap-spacing-md items-center shrink-0">
+            {primaryButton}
+            {secondaryButton}
+          </div>
+
+          {/* Tertiary pushed to the end */}
+          {tertiaryButton && (
+            <div className="flex flex-1 flex-col items-end min-w-0">
+              {tertiaryButton}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    /* ── Hug-End layout ─────────────────────────────────────── */
+    return (
+      <div
+        ref={ref}
+        data-slot="modal-actions"
+        className={cn(
+          'flex gap-spacing-md items-center w-full',
+          className,
+        )}
+        {...rest}
+      >
+        {/* Tertiary pushed to the start */}
+        {tertiaryButton && (
+          <div className="flex flex-1 flex-col items-start min-w-0">
+            {tertiaryButton}
+          </div>
+        )}
+
+        {/* Secondary + Primary grouped together */}
+        <div className="flex gap-spacing-md items-center shrink-0">
+          {secondaryButton}
+          {primaryButton}
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/ModalActions/ModalActions.types.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from 'react';
+
+export type ModalActionsType =
+  | 'hug-start'
+  | 'hug-center'
+  | 'hug-end'
+  | 'fill'
+  | 'stack';
+
+export interface ModalActionsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Layout type for button arrangement */
+  type?: ModalActionsType;
+  /** Primary button label */
+  primaryLabel?: string;
+  /** Secondary button label (optional) */
+  secondaryLabel?: string;
+  /** Show secondary button */
+  showSecondary?: boolean;
+  /** Tertiary button label (optional) */
+  tertiaryLabel?: string;
+  /** Show tertiary button */
+  showTertiary?: boolean;
+  /** Primary button click handler */
+  onPrimaryClick?: () => void;
+  /** Secondary button click handler */
+  onSecondaryClick?: () => void;
+  /** Tertiary button click handler */
+  onTertiaryClick?: () => void;
+  /** Additional class name */
+  className?: string;
+}

package/src/components/ModalActions/index.ts

@@ -0,0 +1,2 @@
+export { ModalActions } from './ModalActions';
+export type { ModalActionsProps, ModalActionsType } from './ModalActions.types';