sdaia-ui 1.0.1

package/src/components/Divider/Divider.variants.ts

@@ -0,0 +1,55 @@
+import type { DividerColor, DividerLength, DividerThickness } from './Divider.types';
+
+/* ── Color ───────────────────────────────────────────────────────
+ * Figma tokens:
+ *   neutral → Border/border-neutral-primary  #d2d6db (dark: #374151)
+ *   primary → Border/border-primary          #1b8354 (unchanged in dark)
+ */
+export const COLOR: Record<DividerColor, string> = {
+  neutral: 'bg-[#d2d6db] dark:bg-[#374151]',
+  primary: 'bg-[#1b8354]',
+};
+
+/* ── Thickness — horizontal (height) ─────────────────────────────
+ *   hairline → 1 px   thin → 2 px   regular → 4 px   thick → 8 px
+ */
+export const THICKNESS_H: Record<DividerThickness, string> = {
+  hairline: 'h-px',
+  thin: 'h-[2px]',
+  regular: 'h-[4px]',
+  thick: 'h-[8px]',
+};
+
+/* ── Thickness — vertical (width) ────────────────────────────────
+ *   Same pixel values, but applied to `width` instead of `height`.
+ */
+export const THICKNESS_V: Record<DividerThickness, string> = {
+  hairline: 'w-px',
+  thin: 'w-[2px]',
+  regular: 'w-[4px]',
+  thick: 'w-[8px]',
+};
+
+/* ── Inset padding — horizontal only ────────────────────────────
+ * Uses logical CSS properties (ps-/pe-) so RTL flips automatically.
+ * Token: Global/spacing-3xl = 24 px (desktop) / responsive.
+ */
+export const LENGTH_PADDING: Record<DividerLength, string> = {
+  full: '',
+  inset: 'px-spacing-3xl',
+  'inset-start': 'ps-spacing-3xl',
+  'inset-end': 'pe-spacing-3xl',
+};
+
+/* ── Container base classes ──────────────────────────────────────
+ * Outer wrapper carries the `role="separator"`, any inset padding,
+ * and sizes itself to fill the available dimension.
+ */
+export const CONTAINER_H = 'flex flex-col w-full';
+export const CONTAINER_V = 'flex flex-row items-center self-stretch';
+
+/* ── Line element base classes ───────────────────────────────────
+ * The inner `data-slot="divider-line"` element is the visible rule.
+ */
+export const LINE_H = 'w-full shrink-0';
+export const LINE_V = 'h-full shrink-0';

package/src/components/Divider/index.ts

@@ -0,0 +1,8 @@
+export { Divider } from './Divider';
+export type {
+  DividerProps,
+  DividerLineType,
+  DividerColor,
+  DividerThickness,
+  DividerLength,
+} from './Divider.types';

package/src/components/DonutChart/DonutChart.tsx

@@ -0,0 +1,251 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { DonutChartProps } from './DonutChart.types';
+import {
+  DEFAULT_SIZE,
+  getGeometry,
+  getPieRadius,
+  PIE_PALETTE,
+  DONUT_FILL_COLOR,
+  TRACK_VAR_CLASSES,
+  CONTAINER_BASE,
+  TEXT_CONTAINER,
+  HELPER_TEXT_COLOR,
+  LABEL_COLOR,
+  describePieSector,
+  describeArc,
+  PIE_RING_GAP_DEG,
+} from './DonutChart.variants';
+
+/**
+ * DonutChart
+ *
+ * A data-visualisation donut / pie base component.
+ * Traced from Figma node 5810:80053 ("Donut & Pie Base").
+ *
+ * ── Two modes ─────────────────────────────────────────────────────────────────
+ *   pie=false (donut)  Single fill arc (0–100 %).
+ *   pie=true           N equal slices (pie sectors or ring arc segments).
+ *
+ * ── Two variants ──────────────────────────────────────────────────────────────
+ *   'Color Border'  — Grey track ring + fill; ring arcs for pie mode.
+ *   'Color Filled'  — No grey track; solid sectors for pie mode.
+ *
+ * ── Colour palette (pie slices, data-viz — identical light+dark) ──────────────
+ *   gold → green → lavender → blue → amber → red
+ *
+ * ── RTL ───────────────────────────────────────────────────────────────────────
+ *   Set `rtl` prop.  The fill arc / sectors are mirrored via an SVG
+ *   `translate(size,0) scale(-1,1)` transform — no DOM reordering needed.
+ *   The centred text overlay is unaffected.
+ *
+ * ── Dark mode ─────────────────────────────────────────────────────────────────
+ *   Grey track: `#d2d6db` → `#374151` via `--donut-track` CSS var.
+ *   Text colours: standard Tailwind `dark:` variants.
+ *   Data-viz colours: unchanged (same in both modes).
+ *
+ * @example
+ * // Donut 70 %
+ * <DonutChart percentage={70} />
+ *
+ * // Filled donut (no grey track)
+ * <DonutChart variant="Color Filled" percentage={40} />
+ *
+ * // Pie — 3 equal slices
+ * <DonutChart pie percentage={50} slices={3} variant="Color Filled" />
+ *
+ * // RTL
+ * <DonutChart percentage={60} rtl />
+ *
+ * // Custom slice data
+ * <DonutChart
+ *   pie
+ *   variant="Color Filled"
+ *   sliceData={[
+ *     { value: 40, color: '#1b8354' },
+ *     { value: 35 },
+ *     { value: 25 },
+ *   ]}
+ * />
+ */
+export const DonutChart = forwardRef<HTMLDivElement, DonutChartProps>(
+  function DonutChart(
+    {
+      variant = 'Color Border',
+      pie = false,
+      percentage = 50,
+      slices = 3,
+      sliceData,
+      helperText = 'Text',
+      label,
+      size = DEFAULT_SIZE,
+      segmentGap = PIE_RING_GAP_DEG,
+      rtl = false,
+      className,
+      style,
+      ...props
+    },
+    ref,
+  ) {
+    // ── Geometry ───────────────────────────────────────────────────────────────
+    const { cx, cy, r, sw, circ } = getGeometry(size);
+    const pieR = getPieRadius(size);
+
+    // ── Derived label ──────────────────────────────────────────────────────────
+    const resolvedLabel = label !== undefined ? label : pie ? undefined : `${Math.round(percentage)}%`;
+
+    // ── RTL SVG mirror transform ───────────────────────────────────────────────
+    // translate(size,0) scale(-1,1) = horizontal mirror around x = size/2
+    const rtlTransform = `translate(${size} 0) scale(-1 1)`;
+
+    // ── Slice computation (pie mode) ───────────────────────────────────────────
+    const resolvedSliceData = sliceData ?? Array.from(
+      { length: slices },
+      (_, i) => ({ value: 1, color: PIE_PALETTE[i % PIE_PALETTE.length] }),
+    );
+    const total = resolvedSliceData.reduce((s, d) => s + (d.value ?? 1), 0);
+
+    // Build (startAngle, endAngle, color) per slice
+    let cursor = 0;
+    const sliceAngles = resolvedSliceData.map((d, i) => {
+      const frac   = (d.value ?? 1) / total;
+      const start  = cursor;
+      const end    = cursor + frac * 360;
+      cursor       = end;
+      return {
+        start,
+        end,
+        color: d.color ?? PIE_PALETTE[i % PIE_PALETTE.length],
+      };
+    });
+
+    // ── Donut arc (pie=false) ──────────────────────────────────────────────────
+    const pct        = Math.min(100, Math.max(0, percentage));
+    const fillLength = (pct / 100) * circ;
+    const dashArray  = `${fillLength} ${circ}`;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(CONTAINER_BASE, TRACK_VAR_CLASSES, className)}
+        style={{ width: size, height: size, ...style }}
+        {...props}
+      >
+        {/* ── SVG ─────────────────────────────────────────────────────────── */}
+        <svg
+          width={size}
+          height={size}
+          viewBox={`0 0 ${size} ${size}`}
+          aria-hidden="true"
+          style={{ display: 'block' }}
+        >
+          {!pie ? (
+            /* ── Donut mode ─────────────────────────────────────────────── */
+            <>
+              {/* Grey track — Color Border only */}
+              {variant === 'Color Border' && (
+                <circle
+                  cx={cx}
+                  cy={cy}
+                  r={r}
+                  fill="none"
+                  stroke="var(--donut-track)"
+                  strokeWidth={sw}
+                />
+              )}
+
+              {/* Coloured fill arc — mirrored for RTL */}
+              <g transform={rtl ? rtlTransform : undefined}>
+                <circle
+                  cx={cx}
+                  cy={cy}
+                  r={r}
+                  fill="none"
+                  stroke={DONUT_FILL_COLOR}
+                  strokeWidth={sw}
+                  strokeLinecap="round"
+                  strokeDasharray={dashArray}
+                  /* Start from 12 o'clock (top) */
+                  transform={`rotate(-90 ${cx} ${cy})`}
+                />
+              </g>
+            </>
+          ) : variant === 'Color Filled' ? (
+            /* ── Pie mode — solid sectors ─────────────────────────────── */
+            <g transform={rtl ? rtlTransform : undefined}>
+              {sliceAngles.map((s, i) => (
+                <path
+                  key={i}
+                  d={describePieSector(cx, cy, pieR, s.start, s.end)}
+                  fill={s.color}
+                />
+              ))}
+            </g>
+          ) : (
+            /* ── Pie mode — ring arc segments (Color Border) ───────────── */
+            <>
+              {/* Grey background ring */}
+              <circle
+                cx={cx}
+                cy={cy}
+                r={r}
+                fill="none"
+                stroke="var(--donut-track)"
+                strokeWidth={sw}
+              />
+
+              {/* Coloured arc per slice */}
+              <g transform={rtl ? rtlTransform : undefined}>
+                {sliceAngles.map((s, i) => {
+                  const gapHalf   = segmentGap / 2;
+                  const startAdj  = s.start + gapHalf;
+                  const endAdj    = s.end   - gapHalf;
+                  if (endAdj <= startAdj) return null;
+
+                  const arcLength = ((endAdj - startAdj) / 360) * circ;
+                  const offset    = (startAdj / 360) * circ;
+
+                  return (
+                    <circle
+                      key={i}
+                      cx={cx}
+                      cy={cy}
+                      r={r}
+                      fill="none"
+                      stroke={s.color}
+                      strokeWidth={sw}
+                      strokeLinecap="butt"
+                      strokeDasharray={`${arcLength} ${circ}`}
+                      strokeDashoffset={-offset}
+                      transform={`rotate(-90 ${cx} ${cy})`}
+                    />
+                  );
+                })}
+              </g>
+            </>
+          )}
+        </svg>
+
+        {/* ── Centred text overlay ─────────────────────────────────────────── */}
+        {(helperText || resolvedLabel) && (
+          <div className={TEXT_CONTAINER}>
+            {helperText && (
+              <p className={cn('shrink-0 whitespace-nowrap', HELPER_TEXT_COLOR)}>
+                {helperText}
+              </p>
+            )}
+            {resolvedLabel && (
+              <p className={cn('shrink-0 whitespace-nowrap', LABEL_COLOR)}>
+                {resolvedLabel}
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+DonutChart.displayName = 'DonutChart';

package/src/components/DonutChart/DonutChart.types.ts

@@ -0,0 +1,97 @@
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Visual rendering style.
+ *
+ * | Value          | pie=false                              | pie=true                        |
+ * |----------------|----------------------------------------|---------------------------------|
+ * | 'Color Border' | Grey track ring + green fill arc       | Ring divided into N coloured arc segments (gaps between) |
+ * | 'Color Filled' | Green arc only, transparent background | Full pie — N solid sectors from centre |
+ */
+export type DonutChartVariant = 'Color Border' | 'Color Filled';
+
+/**
+ * Number of equal slices in pie mode (pie=true).
+ * When pie=false this prop is ignored.
+ */
+export type DonutChartSliceCount = 2 | 3 | 4 | 5 | 6;
+
+/** Per-slice override for colour and optional value (used to derive size). */
+export interface DonutChartSliceData {
+  /** Proportional value — slices are sized relative to the sum. Defaults to equal. */
+  value?: number;
+  /** Override the palette colour for this specific slice. */
+  color?: string;
+}
+
+export interface DonutChartProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Rendering style — controls whether the ring has a grey track and whether
+   * the pie mode renders ring arcs or solid sectors.
+   * @default 'Color Border'
+   */
+  variant?: DonutChartVariant;
+
+  /**
+   * `false` — single-arc donut driven by `percentage`.
+   * `true`  — multi-slice chart driven by `slices` / `sliceData`.
+   * @default false
+   */
+  pie?: boolean;
+
+  /**
+   * Fill percentage for donut mode (pie=false), 0–100.
+   * @default 50
+   */
+  percentage?: number;
+
+  /**
+   * Number of equal slices in pie mode (pie=true).
+   * Ignored when `sliceData` is supplied (length of that array is used instead).
+   * @default 3
+   */
+  slices?: DonutChartSliceCount;
+
+  /**
+   * Custom per-slice data for pie mode.
+   * When provided, overrides `slices` and uses `value` for proportional sizing
+   * and `color` for per-slice colour.
+   */
+  sliceData?: DonutChartSliceData[];
+
+  /**
+   * Helper text rendered above the bold label inside the ring.
+   * Set to `undefined` or `''` to hide.
+   * @default 'Text'
+   */
+  helperText?: string;
+
+  /**
+   * Bold value rendered below the helper text.
+   * In donut mode defaults to `'${percentage}%'`.
+   * Set to `undefined` or `''` to hide.
+   */
+  label?: string;
+
+  /**
+   * Diameter of the component in px.
+   * All geometry (stroke-width, radius) scales proportionally.
+   * @default 176
+   */
+  size?: number;
+
+  /**
+   * Gap in degrees between adjacent ring arc segments (pie=true, Color Border).
+   * Set to `0` for flush/seamless segments.
+   * @default 3
+   */
+  segmentGap?: number;
+
+  /**
+   * Render in right-to-left orientation.
+   * The fill arc / pie sectors are mirrored horizontally via an SVG transform.
+   * The text container is unaffected (it is always centred).
+   * @default false
+   */
+  rtl?: boolean;
+}

package/src/components/DonutChart/DonutChart.variants.ts

@@ -0,0 +1,203 @@
+/**
+ * DonutChart.variants.ts
+ *
+ * All constants for the DonutChart component.
+ * Traced from Figma node 5810:80053 (frame "Donut & Pie Base").
+ *
+ * ── Dimensions ────────────────────────────────────────────────────────────────
+ *   Default container:  176 × 176 px
+ *   Ring stroke-width:  16 px  (ratio 16/176 — scales with `size` prop)
+ *   Ring radius:        size/2 - strokeWidth = 88 - 16 = 72 px at default size
+ *   Pie sector radius:  size/2 - 8px padding = 80 px at default size
+ *
+ * ── Color tokens (get_variable_defs) ──────────────────────────────────────────
+ *   Colors/Primary-SA-Flag/600-primary  →  #1b8354   donut fill / slice 2 (data-viz)
+ *   Colors/Secondary-Gold/500           →  #f5bd02   slice 1 (gold)
+ *   Colors/Tertiary-Lavendar/400        →  #a57bba   slice 3 (lavender)
+ *   Colors/Blue/500                     →  #2e90fa   slice 4
+ *   Colors/Yellow/500                   →  #f79009   slice 5 (amber/orange)
+ *   Colors/Red/600                      →  #d92d20   slice 6
+ *   All data-viz colours are identical in light and dark mode.
+ *
+ *   Border/border-neutral-primary  →  #d2d6db (light) / #374151 (dark)
+ *     Applied as CSS custom property `--donut-track` so SVG can reference it.
+ *
+ * ── Typography ────────────────────────────────────────────────────────────────
+ *   Helper text: Text lg/Regular  — 18 px / 28 px / weight 400
+ *     Token: Size/Text/typo-size-text-Ig = 18, Line Height/Text/line-heights-text-Ig = 28
+ *     Implementation: inline style { fontSize:'18px', lineHeight:'28px' }
+ *
+ *   Label:       Display sm/Bold — 30 px / 38 px / weight 700
+ *     Token: Size/Display/typo-size-display-sm = 30, Line Height/Display/line-heights-display-sm = 38
+ *     Implementation: inline style { fontSize:'30px', lineHeight:'38px' }
+ *
+ * ── Spacing ───────────────────────────────────────────────────────────────────
+ *   Global/spacing-none = 0 → gap between helper text and label is 0
+ *
+ * ── RTL ───────────────────────────────────────────────────────────────────────
+ *   SVG arcs / sectors are wrapped in a
+ *   `<g transform="translate({size},0) scale(-1,1)">` to mirror horizontally.
+ *   The absolute-positioned text container is unaffected.
+ */
+
+/**
+ * Default diameter in px — matches every Figma symbol (176 × 176).
+ */
+export const DEFAULT_SIZE = 176;
+
+/**
+ * Ring stroke-width as a fraction of the diameter.
+ * 16px / 176px ≈ 0.0909 — preserved at any `size`.
+ */
+const STROKE_WIDTH_RATIO = 16 / 176;
+
+/**
+ * Computed SVG ring geometry from a given diameter.
+ * – cx / cy = centre of the SVG viewport
+ * – r        = ring radius (outer edge sits 8 px inside the container boundary)
+ * – sw       = stroke-width (proportional to size)
+ * – circ     = full circumference (used for stroke-dasharray)
+ */
+export function getGeometry(size: number) {
+  const sw   = Math.round(size * STROKE_WIDTH_RATIO);
+  const cx   = size / 2;
+  const cy   = size / 2;
+  const r    = cx - sw;        // = size/2 - sw  → 72 at default size
+  const circ = 2 * Math.PI * r;
+  return { cx, cy, r, sw, circ };
+}
+
+/**
+ * Radius for full-pie (Color Filled, pie=true) sectors.
+ * 8 px gap from container edge (no stroke, so radius = half-size - 8).
+ */
+export function getPieRadius(size: number) {
+  return size / 2 - 8;
+}
+
+// ─── Pie colour palette ────────────────────────────────────────────────────────
+// Ordered as visible in the Figma screenshot (gold → green → lavender → …).
+// Data-viz palette — identical in light and dark mode.
+
+export const PIE_PALETTE: readonly string[] = [
+  'rgba(245,189,2,1)',    // Colors/Secondary-Gold/500     slice 1
+  'rgba(27,131,84,1)',    // Colors/Primary-SA-Flag/600    slice 2
+  'rgba(165,123,186,1)',  // Colors/Tertiary-Lavendar/400  slice 3
+  'rgba(46,144,250,1)',   // Colors/Blue/500               slice 4
+  'rgba(247,144,9,1)',    // Colors/Yellow/500             slice 5
+  'rgba(217,45,32,1)',    // Colors/Red/600                slice 6
+] as const;
+
+/** Donut single-arc fill colour: Colors/Primary-SA-Flag/600-primary */
+export const DONUT_FILL_COLOR = 'rgba(27,131,84,1)';
+
+// ─── CSS custom property classes ──────────────────────────────────────────────
+/**
+ * Sets --donut-track on the wrapper div so the SVG track circle can reference
+ * it via `stroke="var(--donut-track)"`.
+ *
+ * Border/border-neutral-primary:
+ *   Light: #d2d6db
+ *   Dark:  #374151  (confirmed: Divider, ActivityItem, FiltrationList)
+ */
+export const TRACK_VAR_CLASSES =
+  '[--donut-track:#d2d6db] dark:[--donut-track:#374151]';
+
+// ─── Container ────────────────────────────────────────────────────────────────
+/** Root wrapper — `relative` for the absolute-positioned text overlay. */
+export const CONTAINER_BASE = 'relative shrink-0';
+
+// ─── Text container ───────────────────────────────────────────────────────────
+/** Centred overlay holding helper text + bold label. */
+export const TEXT_CONTAINER =
+  'absolute inset-0 flex flex-col items-center justify-center text-center gap-0 pointer-events-none';
+
+// ─── Helper text typography ───────────────────────────────────────────────────
+/**
+ * Text lg / Regular — responsive via --ds-typo-text-lg CSS var
+ *   Mobile 14px → Tablet 16px → Desktop 18px
+ *   Token: Size/Text/typo-size-text-Ig
+ *   Utility class: text-text-lg  (defined in globals.css @utility)
+ * Color: Text/text-secondary-paragraph  #6c737f / dark #9ca3af
+ */
+export const HELPER_TEXT_COLOR = 'text-[#6c737f] dark:text-[#9ca3af] text-text-lg';
+export const HELPER_TEXT_TYPO  = 'text-text-lg font-[400]';
+
+// ─── Label typography ─────────────────────────────────────────────────────────
+/**
+ * Display sm / Bold — responsive via --ds-typo-display-sm CSS var
+ *   Mobile 20px → Tablet 24px → Desktop 30px
+ *   Token: Size/Display/typo-size-display-sm
+ *   Utility class: text-display-sm  (defined in globals.css @utility)
+ * Color: Text/text-default  #161616 / dark rgba(229,231,235,1)
+ */
+export const LABEL_COLOR = 'text-[#161616] dark:text-[rgba(229,231,235,1)] text-text-xl font-[700]';
+export const LABEL_TYPO  = 'text-text-xl font-[700]';
+
+// ─── SVG helpers ──────────────────────────────────────────────────────────────
+
+/** Degrees → radians. */
+export function degToRad(deg: number) {
+  return (deg * Math.PI) / 180;
+}
+
+/**
+ * Returns the (x, y) point on a circle at `angleDeg` degrees
+ * (0° = top / 12 o'clock; clockwise positive).
+ */
+export function polarToCartesian(
+  cx: number,
+  cy: number,
+  r: number,
+  angleDeg: number,
+) {
+  const rad = degToRad(angleDeg - 90);
+  return {
+    x: cx + r * Math.cos(rad),
+    y: cy + r * Math.sin(rad),
+  };
+}
+
+/**
+ * Returns the SVG path `d` string for a full pie sector
+ * (from centre → startAngle arc → endAngle → Z).
+ */
+export function describePieSector(
+  cx: number,
+  cy: number,
+  r: number,
+  startAngle: number,
+  endAngle: number,
+): string {
+  const s = polarToCartesian(cx, cy, r, startAngle);
+  const e = polarToCartesian(cx, cy, r, endAngle);
+  const largeArc = endAngle - startAngle > 180 ? 1 : 0;
+  return [
+    `M ${cx} ${cy}`,
+    `L ${s.x} ${s.y}`,
+    `A ${r} ${r} 0 ${largeArc} 1 ${e.x} ${e.y}`,
+    'Z',
+  ].join(' ');
+}
+
+/**
+ * Returns the SVG path `d` string for a ring arc segment
+ * (outer arc from startAngle → endAngle, used for Color Border pie slices).
+ * Does NOT close to centre — used with stroke on a circle, not a path.
+ * We instead use circle stroke-dasharray with rotation per slice.
+ */
+export function describeArc(
+  cx: number,
+  cy: number,
+  r: number,
+  startAngle: number,
+  endAngle: number,
+): string {
+  const s = polarToCartesian(cx, cy, r, startAngle);
+  const e = polarToCartesian(cx, cy, r, endAngle);
+  const largeArc = endAngle - startAngle > 180 ? 1 : 0;
+  return `M ${s.x} ${s.y} A ${r} ${r} 0 ${largeArc} 1 ${e.x} ${e.y}`;
+}
+
+/** Gap in degrees between Color Border pie ring slices. */
+export const PIE_RING_GAP_DEG = 3;

package/src/components/DonutChart/index.ts

@@ -0,0 +1,7 @@
+export { DonutChart } from './DonutChart';
+export type {
+  DonutChartProps,
+  DonutChartVariant,
+  DonutChartSliceCount,
+  DonutChartSliceData,
+} from './DonutChart.types';