sdaia-ui 1.0.1 → 1.0.2

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

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

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

package/src/components/DonutChart/DonutChart.tsx

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

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

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

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