sdaia-ui 1.0.1

package/src/components/GraphBase/GraphBase.variants.ts

@@ -0,0 +1,126 @@
+// ── Series colours — data-viz palette (identical in light and dark mode) ──────
+// Figma: Colors/Primary-SA-Flag/600-primary — sparklines + Bars with Text Indicator 1
+export const COLOR_SERIES_1 = 'rgba(27,131,84,1)';
+// Figma: Colors/Tertiary-Lavendar/400 — Indicator 2 sparklines + plain Bars Indicator 2
+export const COLOR_SERIES_2 = 'rgba(165,123,186,1)';
+
+// Figma: Chart/chart-series-1 — plain Bars Indicator 1 + Bar-Combined Series 1
+export const COLOR_CHART_1 = 'rgba(21,112,239,1)';
+// Figma: Chart/chart-series-2 — Bar-Combined Series 2
+export const COLOR_CHART_2 = 'rgba(122,90,248,1)';
+// Figma: Background/background-tertiary-50 — Bars with Text Indicator 2 bar fill
+export const COLOR_BARS_TEXT_IND2 = 'rgba(249,245,250,1)';
+
+// ── Chart canvas dimensions ────────────────────────────────────────────────────
+// These are fixed chart canvas sizes from Figma — NOT spacing tokens.
+// A chart area must have exact pixel dimensions to render sparklines correctly.
+
+/** Indicator (Elastic / Noisy / Smooth): 101 × 50 px */
+export const IND_W = 101;
+export const IND_H = 50;
+
+/** Combined graph (Graph - Combined): 211 × 56 px */
+export const COMBO_GRAPH_W = 211;
+export const COMBO_GRAPH_H = 56;
+
+/** Bars / Bars with Text: 120 × 60 px */
+export const BARS_W = 120;
+export const BARS_H = 60;
+
+/** Bar - Combined: 211 × 89 px */
+export const BAR_COMBO_W = 211;
+export const BAR_COMBO_H = 89;
+
+// ── SVG rendering metrics ──────────────────────────────────────────────────────
+/** Vertical padding inside SVG canvas — Figma: py-spacing-xxs = 2 px */
+export const SVG_PAD_Y = 2;
+/** Stroke width for sparklines */
+export const STROKE_W = 1.5;
+
+// ── Default example data (matches Figma screenshot data) ──────────────────────
+
+/** Elastic — spring/oscillating wave pattern */
+export const DEFAULT_ELASTIC: number[] = [50, 15, 80, 20, 88, 35, 92, 50, 62, 40, 52];
+
+/** Noisy — jagged / high-frequency variation */
+export const DEFAULT_NOISY: number[] = [35, 70, 18, 75, 12, 58, 38, 85, 48, 18, 68, 22];
+
+/** Smooth — gentle falling curve */
+export const DEFAULT_SMOOTH: number[] = [88, 78, 62, 45, 28, 18, 12, 20, 32, 42];
+
+/** Combined — primary series (green) */
+export const DEFAULT_COMBO_1: number[] = [52, 35, 72, 42, 80, 55, 65, 48, 60, 50];
+
+/** Combined — secondary series (lavender) */
+export const DEFAULT_COMBO_2: number[] = [40, 65, 28, 68, 22, 55, 78, 38, 65, 45];
+
+/** Bars — 7 bar heights (%) matching Figma example */
+export const DEFAULT_BARS: number[] = [60, 80, 30, 60, 90, 70, 20];
+
+/** Bars with Text — 5 bars with labels */
+export const DEFAULT_BARS_TEXT = [
+  { value: 32, label: '99' },
+  { value: 70, label: '99' },
+  { value: 45, label: '99' },
+  { value: 58, label: '99' },
+  { value: 63, label: '99' },
+];
+
+/** Bar - Combined — 7 groups, s1 = green height, s2 = lavender height */
+export const DEFAULT_BAR_COMBO = [
+  { s1: 70, s2: 40 },
+  { s1: 70, s2: 40 },
+  { s1: 70, s2: 40 },
+  { s1: 70, s2: 40 },
+  { s1: 70, s2: 40 },
+  { s1: 70, s2: 40 },
+  { s1: 70, s2: 30 },
+];
+
+// ── Tailwind class strings ─────────────────────────────────────────────────────
+
+/** Root wrapper: relative + overflow-hidden clips SVG bleed */
+export const ROOT_BASE = 'relative flex overflow-hidden shrink-0';
+
+/** Indicator line chart inner layout — vertical padding = spacing-xxs (2 px) */
+export const LINE_CONTAINER = 'flex-col py-spacing-xxs';
+
+/** Bars style — horizontal row, spacing-md gap (8 px) between bars */
+export const BARS_CONTAINER = 'items-end gap-spacing-md';
+
+/** Bars with Text style — horizontal row, no gap between columns */
+export const BARS_TEXT_CONTAINER = 'items-end gap-spacing-none';
+
+/** Bar - Combined style — spacing-lg gap (12 px) between groups */
+export const BAR_COMBO_CONTAINER = 'items-end gap-spacing-lg';
+
+/**
+ * Single bar fill element.
+ * Top corners rounded — Figma: Radius/radius-2 = 2 px
+ */
+export const BAR_FILL =
+  'w-full rounded-tl-[2px] rounded-tr-[2px] shrink-0';
+
+/** Flex column wrapper for each bar column (Bars style) */
+export const BAR_COL =
+  'flex flex-col flex-1 min-w-px items-center justify-end h-full';
+
+/**
+ * Label above bar in "Bars with Text" style.
+ * Figma: Text xs / Semibold — IBM Plex Sans Arabic, 600, 12 px / 18 px
+ * text-text-xs = 12 px (our responsive token)
+ */
+export const BAR_LABEL =
+  'shrink-0 text-text-xs font-[600] leading-[18px] text-center ' +
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(242,244,247,1)]';
+
+/** Wrapper for each group in "Bar - Combined" */
+export const BAR_COMBO_GROUP =
+  'flex flex-1 min-w-px items-end gap-spacing-none h-full justify-center';
+
+/**
+ * Individual bar inside a "Bar - Combined" group.
+ * max-w-[24px] is hardcoded from Figma — no matching token exists.
+ */
+export const BAR_COMBO_ITEM =
+  'flex-1 max-w-[24px] min-w-px rounded-tl-[2px] rounded-tr-[2px]';

package/src/components/GraphBase/index.ts

@@ -0,0 +1,7 @@
+export { GraphBase } from './GraphBase';
+export type {
+  GraphBaseProps,
+  GraphBaseStyle,
+  GraphBaseType,
+  GraphBaseDataPoint,
+} from './GraphBase.types';

package/src/components/HeaderItem/HeaderItem.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { HeaderItemProps } from './HeaderItem.types';
+import {
+  MAIN_TEXT_DEFAULT,
+  MAIN_TEXT_BRAND,
+  SECONDARY_TEXT_DEFAULT,
+  SECONDARY_TEXT_BRAND,
+  ACTION_ICON_DEFAULT,
+  ACTION_ICON_BRAND,
+  CARD_SELECTED_DEFAULT,
+  CARD_HOVER_DEFAULT,
+  CARD_SELECTED_BRAND,
+  CARD_HOVER_BRAND,
+  CARD_BASE,
+  OUTER_BASE,
+  CARD_FOCUS,
+} from './HeaderItem.variants';
+import { PlayIconTwotone } from '../../icons/IconFactory';
+import { Avatar } from '../Avatar';
+
+/**
+ * HeaderItem
+ *
+ * A sidebar workspace / organisation switcher item. Displays a circular avatar
+ * chip, a primary name label, a subtitle, and a trailing action icon.
+ *
+ * ── Sizes ─────────────────────────────────────────────────────────────────
+ *   `large` — full row (avatar + text + action). Fills the container width.
+ *   `small` — avatar only (collapsed sidebar). Fits content.
+ *
+ * ── Variants ──────────────────────────────────────────────────────────────
+ *   `default` — dark text on light/neutral sidebar backgrounds.
+ *   `brand`   — white text for placement on dark/brand-coloured sidebars.
+ *
+ * ── States ────────────────────────────────────────────────────────────────
+ *   Unselected  → transparent card, subtle :hover tint
+ *   Selected    → solid card background (`selected` prop)
+ *   Focus       → 2px green ring on the inner card (keyboard accessible)
+ *   Active/press → transient color shift via CSS :active
+ *
+ * ── RTL ───────────────────────────────────────────────────────────────────
+ *   Direction-aware. In `dir="rtl"` context the avatar moves to the
+ *   trailing (right) edge and the action icon to the leading (left) edge
+ *   via `rtl:flex-row-reverse` on the inner card.
+ *
+ * @example
+ * // Unselected workspace
+ * <HeaderItem mainText="SDAIA Coe" secondaryText="Enterprise" />
+ *
+ * // Active / selected workspace
+ * <HeaderItem mainText="SDAIA Coe" secondaryText="Enterprise" selected />
+ *
+ * // Brand style (on dark sidebar)
+ * <HeaderItem variant="brand" mainText="SDAIA Coe" secondaryText="Enterprise" />
+ *
+ * // Collapsed sidebar
+ * <HeaderItem size="small" />
+ */
+export const HeaderItem = forwardRef<HTMLElement, HeaderItemProps>(function HeaderItem(
+  {
+    size = 'large',
+    variant = 'default',
+    selected = false,
+    mainText,
+    secondaryText,
+    avatar,
+    actionIcon,
+    showAction,
+    href,
+    onClick,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const isLarge = size === 'large';
+  const isDefault = variant === 'default';
+
+  /* ── Derived display flags ───────────────────────────────────────────── */
+  const shouldShowAction = isLarge && showAction !== false && actionIcon !== null;
+  const resolvedAction = actionIcon ?? <PlayIconTwotone aria-hidden="true" />;
+
+  /* ── Card background resolution ─────────────────────────────────────── */
+  /* Priority: selected > hover (CSS pseudo). */
+  const cardBg = selected
+    ? isDefault
+      ? CARD_SELECTED_DEFAULT
+      : CARD_SELECTED_BRAND
+    : isDefault
+      ? CARD_HOVER_DEFAULT
+      : CARD_HOVER_BRAND;
+
+  /* ── Avatar chip ─────────────────────────────────────────────────────── */
+  // Delegates to the shared Avatar component (type="icon" size="md"):
+  //   32px outer · p-spacing-xs (4px) padding · 24px inner · gray bg · white ring
+  //   Matches Figma avatar spec exactly (node 4920:58281).
+  const avatarEl = (
+    <Avatar
+      data-slot="header-item-avatar"
+      type="icon"
+      size="md"
+      shape="round"
+      icon={avatar ?? undefined}
+    />
+  );
+
+  /* ── Inner visual card ───────────────────────────────────────────────── */
+  const card = (
+    <div
+      data-slot="header-item-card"
+      className={cn(
+        CARD_BASE,
+        /* Large: gap between children, full width */
+        isLarge ? 'gap-spacing-md w-full' : 'gap-[0px]',
+        cardBg,
+        CARD_FOCUS,
+      )}
+    >
+      {avatarEl}
+
+      {/* Text block — large only */}
+      {isLarge && (
+        <div
+          data-slot="header-item-text"
+          className="flex flex-col flex-1 min-w-0 items-start"
+        >
+          {mainText && (
+            <p
+              data-slot="header-item-main"
+              className={cn(
+                'w-full truncate',
+                isDefault ? MAIN_TEXT_DEFAULT : MAIN_TEXT_BRAND,
+              )}
+            >
+              {mainText}
+            </p>
+          )}
+          {secondaryText && (
+            <p
+              data-slot="header-item-secondary"
+              className={cn(
+                'w-full truncate',
+                isDefault ? SECONDARY_TEXT_DEFAULT : SECONDARY_TEXT_BRAND,
+              )}
+            >
+              {secondaryText}
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Trailing action icon — large only */}
+      {shouldShowAction && (
+        <span
+          data-slot="header-item-action"
+          className={isDefault ? ACTION_ICON_DEFAULT : ACTION_ICON_BRAND}
+        >
+          {resolvedAction}
+        </span>
+      )}
+    </div>
+  );
+
+  /* ── Outer wrapper classes ───────────────────────────────────────────── */
+  const outerCn = cn(
+    OUTER_BASE,
+    /* Large fills the container width */
+    isLarge && 'w-full',
+    className,
+  );
+
+  /* ── Link variant ────────────────────────────────────────────────────── */
+  if (href) {
+    return (
+      <a
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        data-slot="header-item"
+        href={href}
+        onClick={onClick as React.MouseEventHandler<HTMLAnchorElement> | undefined}
+        className={outerCn}
+        {...(rest as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+      >
+        {card}
+      </a>
+    );
+  }
+
+  /* ── Button variant ──────────────────────────────────────────────────── */
+  return (
+    <button
+      ref={ref as React.Ref<HTMLButtonElement>}
+      type="button"
+      data-slot="header-item"
+      onClick={onClick}
+      className={outerCn}
+      {...rest}
+    >
+      {card}
+    </button>
+  );
+});
+
+HeaderItem.displayName = 'HeaderItem';

package/src/components/HeaderItem/HeaderItem.types.ts

@@ -0,0 +1,73 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+/** Layout size variant. */
+export type HeaderItemSize = 'large' | 'small';
+
+/**
+ * Color / background variant.
+ * - `default` — dark text, for placement on light/neutral backgrounds.
+ * - `brand`   — white text, for placement on dark brand-colored sidebars.
+ */
+export type HeaderItemVariant = 'default' | 'brand';
+
+export interface HeaderItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Layout size.
+   * - `large` — renders avatar + name + subtitle + trailing action icon.
+   * - `small` — renders avatar only (collapsed sidebar).
+   * @default 'large'
+   */
+  size?: HeaderItemSize;
+
+  /**
+   * Color variant.
+   * - `default` — dark text on a light/neutral background.
+   * - `brand`   — white text for use on dark/brand-colored sidebar backgrounds.
+   * @default 'default'
+   */
+  variant?: HeaderItemVariant;
+
+  /**
+   * Marks this item as the currently active workspace / organisation.
+   * Adds a background card highlight in the `default` variant.
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Primary label — organisation or workspace name.
+   * Only visible in `large` size.
+   */
+  mainText?: string;
+
+  /**
+   * Secondary label — role, plan tier, or subtitle.
+   * Only visible in `large` size.
+   */
+  secondaryText?: string;
+
+  /**
+   * Custom content rendered inside the avatar chip.
+   * Defaults to the built-in user/person icon.
+   * Pass an `<img>` or logo to show a real avatar.
+   */
+  avatar?: ReactNode;
+
+  /**
+   * Custom trailing action icon (large size only).
+   * Defaults to the built-in play/expand icon.
+   * Pass `null` to suppress the icon entirely.
+   */
+  actionIcon?: ReactNode;
+
+  /**
+   * Explicitly show or hide the trailing action icon.
+   * Defaults to `true` for `large`, always `false` for `small`.
+   */
+  showAction?: boolean;
+
+  /**
+   * When provided, renders the outer element as an `<a>` instead of `<button>`.
+   */
+  href?: string;
+}

package/src/components/HeaderItem/HeaderItem.variants.ts

@@ -0,0 +1,139 @@
+/**
+ * HeaderItem.variants.ts
+ *
+ * Token mapping from Figma node 4920-58278.
+ *
+ * ── Sizes ────────────────────────────────────────────────────────────────────
+ *   Large  — avatar + main text + secondary text + action icon, w-full
+ *   Small  — avatar only, fits content
+ *
+ * ── Variants ─────────────────────────────────────────────────────────────────
+ *   default — dark text for light/neutral sidebar backgrounds
+ *   brand   — white text for dark/brand-colored sidebar backgrounds
+ *
+ * ── States ───────────────────────────────────────────────────────────────────
+ *   unselected — no background card; subtle :hover tint
+ *   selected   — solid background card (default variant only)
+ *   focus-visible — green ring via group-focus-visible on inner card
+ *
+ * ── Avatar ───────────────────────────────────────────────────────────────────
+ *   32 × 32 px circle: bg-neutral-100 + inset white ring + 24px placeholder + 20px icon
+ */
+
+/* ── Main text — font-[600], text-text-sm, leading-[20px] ─────────────────── */
+
+/** Main label — default variant. Figma: Text/text-display #1f2a37 */
+export const MAIN_TEXT_DEFAULT = [
+  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]',
+  'font-[600] text-text-sm leading-[20px]',
+].join(' ');
+
+/** Main label — brand variant. Figma: Text/text-oncolor-primary #ffffff */
+export const MAIN_TEXT_BRAND = [
+  'text-white dark:text-white',
+  'font-[600] text-text-sm leading-[20px]',
+].join(' ');
+
+/* ── Secondary text — font-[400], text-text-xs, leading-[16px] ────────────── */
+
+/** Subtitle — default variant. Figma: Text/text-secondary-paragraph #6c737f */
+export const SECONDARY_TEXT_DEFAULT = [
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
+  'font-[400] text-text-xs leading-[16px]',
+].join(' ');
+
+/** Subtitle — brand variant. Figma: Text/text-oncolor-secondary rgba(255,255,255,0.8) */
+export const SECONDARY_TEXT_BRAND = [
+  'text-[rgba(255,255,255,0.8)] dark:text-[rgba(255,255,255,0.8)]',
+  'font-[400] text-text-xs leading-[16px]',
+].join(' ');
+
+/* ── Action icon color ───────────────────────────────────────────────────── */
+
+/** Trailing action icon — default variant. Figma: Icon/icon-neutral #384250 */
+export const ACTION_ICON_DEFAULT = [
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
+  'flex-shrink-0 inline-flex items-center justify-center size-icon-md cursor-pointer',
+].join(' ');
+
+/** Trailing action icon — brand variant. Figma: Icon/icon-oncolor #ffffff */
+export const ACTION_ICON_BRAND = [
+  'text-white dark:text-white',
+  'flex-shrink-0 inline-flex items-center justify-center size-icon-md cursor-pointer',
+].join(' ');
+
+/* ── Card backgrounds ─────────────────────────────────────────────────────── */
+
+/**
+ * Selected card background — default variant.
+ * Figma: Background/background-body #f9fafb
+ */
+export const CARD_SELECTED_DEFAULT = [
+  'bg-[rgba(249,250,251,1)]',
+  'dark:bg-[rgba(31,41,55,1)]',
+].join(' ');
+
+/**
+ * Hover card background — default variant (subtle tint on hover).
+ * Figma does not define a separate hover bg; using a lighter shade of background-body.
+ */
+export const CARD_HOVER_DEFAULT = [
+  'hover:bg-[rgba(243,244,246,0.65)]',
+  'dark:hover:bg-[rgba(55,65,81,0.35)]',
+].join(' ');
+
+/**
+ * Selected card background — brand variant.
+ * Figma: Button/button-background-transparent-default = rgba(255,255,255,0) → transparent.
+ * No visible card; selection is indicated by text emphasis only.
+ */
+export const CARD_SELECTED_BRAND = '';
+
+/**
+ * Hover card background — brand variant (subtle white overlay on dark bg).
+ */
+export const CARD_HOVER_BRAND = 'hover:bg-[rgba(255,255,255,0.08)]';
+
+/* ── Inner card base layout ───────────────────────────────────────────────── */
+
+/**
+ * Inner visual card shared by all variants.
+ * Height 52px (Figma hardcoded) · padding spacing-md · radius 8px.
+ * `rtl:flex-row-reverse` flips avatar ↔ action position in RTL layouts.
+ */
+export const CARD_BASE = [
+  'h-[52px] flex items-center',
+  'p-spacing-md rounded-[8px]',
+  'motion-feedback',
+  'rtl:flex-row-reverse',
+].join(' ');
+
+/* ── Outer interactive wrapper ────────────────────────────────────────────── */
+
+/**
+ * Outer button / anchor element.
+ * `p-spacing-md` creates breathing room outside the card.
+ * `group` enables `group-focus-visible:*` on the inner card.
+ * `focus-visible:outline-none` suppresses the default browser outline
+ * so only our custom ring (on the inner card) is visible.
+ */
+export const OUTER_BASE = [
+  'relative flex flex-col items-start',
+  'p-spacing-md',
+  'cursor-pointer select-none',
+  'group focus-visible:outline-none',
+  'motion-feedback',
+].join(' ');
+
+/* ── Focus ring — on inner card via group ─────────────────────────────────── */
+
+/**
+ * Applied to the inner card div.
+ * Activates when the outer button/anchor receives :focus-visible.
+ * Matches the design system focus ring: 2px green rgba(27,131,84,0.7).
+ */
+export const CARD_FOCUS = [
+  'group-focus-visible:ring-2',
+  'group-focus-visible:ring-[rgba(27,131,84,0.7)]',
+  'group-focus-visible:ring-offset-0',
+].join(' ');

package/src/components/HeaderItem/index.ts

@@ -0,0 +1,2 @@
+export { HeaderItem } from './HeaderItem';
+export type { HeaderItemProps, HeaderItemSize, HeaderItemVariant } from './HeaderItem.types';