sdaia-ui 1.0.1 → 1.0.2

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

@@ -1,175 +0,0 @@
-/**
- * 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

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

package/src/components/Modal/Modal.tsx

@@ -1,139 +0,0 @@
-'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

@@ -1,55 +0,0 @@
-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

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

package/src/components/ModalActions/ModalActions.tsx

@@ -1,176 +0,0 @@
-'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

@@ -1,31 +0,0 @@
-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

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