sdaia-ui 1.0.1 → 1.0.2

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

@@ -1,126 +0,0 @@
-// ── 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

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

package/src/components/HeaderItem/HeaderItem.tsx

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

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

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

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