sdaia-ui 1.0.1

package/src/components/Quote/Quote.types.ts

@@ -0,0 +1,73 @@
+/**
+ * Quote layout style.
+ *
+ * - `'standard'`      — flex-col card: title+description on top, author+star row at bottom.
+ * - `'centered'`      — flex-col card: star centered at top, then title+description centered,
+ *                       then author centered.
+ * - `'author-image'`  — flex-row card: 120×120 author photo + name/role on the start side,
+ *                       title+description on the end side.
+ * - `'author-side'`   — flex-row card: 160 px wide photo fills full height on the start side,
+ *                       title+description+author on the end side.
+ *
+ * RTL is handled automatically via `dir="rtl"` on any ancestor — no extra prop needed.
+ * The `flex-row` layouts flip visually in RTL via CSS logical properties.
+ */
+export type QuoteStyle =
+  | 'standard'
+  | 'centered'
+  | 'author-image'
+  | 'author-side';
+
+export interface QuoteProps {
+  /**
+   * Layout variant.
+   * @default 'standard'
+   */
+  style?: QuoteStyle;
+
+  /**
+   * Title text rendered as the quote heading.
+   * @default 'Title of quote'
+   */
+  title?: string;
+
+  /**
+   * Body/quote text (the actual quoted content).
+   */
+  quote?: string;
+
+  /**
+   * Author's display name.
+   * @default 'John Doe'
+   */
+  authorName?: string;
+
+  /**
+   * Author's role or title below their name.
+   * @default 'Founder'
+   */
+  authorRole?: string;
+
+  /**
+   * Show the star/favorite icon.
+   * Applies to `'standard'` (bottom-end corner) and `'centered'` (top center).
+   * Has no visual effect on `'author-image'` or `'author-side'`.
+   * @default true
+   */
+  showStar?: boolean;
+
+  /**
+   * URL of the author photo.
+   * Required for `'author-image'` and `'author-side'` styles to display an image.
+   */
+  imageSrc?: string;
+
+  /**
+   * Accessible alt text for the author photo.
+   * @default ''
+   */
+  imageAlt?: string;
+
+  /** Additional className applied to the card root element. */
+  className?: string;
+}

package/src/components/Quote/Quote.variants.ts

@@ -0,0 +1,106 @@
+/**
+ * Quote.variants.ts
+ *
+ * All class-name constants mapped from Figma node 4665:40047 (Quote).
+ *
+ * Color sources:
+ *   Colors/Neutral/25                → #fcfcfd / dark: rgba(17,25,39,1)
+ *   Text/text-default                → #161616 / dark: rgba(229,231,235,1)
+ *   Colors/Base/black                → #161616 / dark: rgba(229,231,235,1)
+ *   Text/text-secondary-paragraph   → #6c737f / dark: rgba(107,114,128,1)
+ *   Icon/icon-default                → #161616 / dark: rgba(229,231,235,1)
+ *
+ * Spacing sources (Figma Global/* tokens — responsive via globals.css):
+ *   spacing-none  = 0px
+ *   spacing-md    = 8px   (desktop)
+ *   spacing-lg    = 12px  (desktop)
+ *   spacing-2xl   = 20px  (desktop)
+ *   spacing-3xl   = 24px  (desktop)
+ *   spacing-4xl   = 32px  (desktop)
+ *   spacing-8xl   = 80px  (desktop)
+ *
+ * Radii (hardcoded — no token in globals.css):
+ *   radius-24 = 24px — card outer corners
+ *   radius-16 = 16px — image corners
+ */
+
+/* ── Card root ───────────────────────────────────────────────────── */
+
+/**
+ * Shared card surface: Colors/Neutral/25 bg, radius-24 corners, overflow-hidden
+ * (prevents image from bleeding past rounded corners), w-full (parent controls
+ * the width in consumer layouts).
+ */
+export const CARD =
+  'bg-[rgba(252,252,253,1)] dark:bg-[rgba(17,25,39,1)] ' +
+  'rounded-[24px] overflow-hidden w-full';
+
+/* ── Typography ─────────────────────────────────────────────────── */
+
+/**
+ * Quote title — Display xs/Medium: 24px (desktop), weight 500, lh 32px.
+ * Text/text-default color.
+ */
+export const TITLE =
+  'text-display-xs font-[500] ' +
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] w-full';
+
+/**
+ * Description at text-xl size — used in the Standard variant only.
+ * Text xl/Regular: 20px (desktop), weight 400, lh 30px.
+ * Text/text-secondary-paragraph color.
+ */
+export const DESCRIPTION_XL =
+  'text-text-xl font-[400] ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)] w-full';
+
+/**
+ * Description at text-lg size — used in Centered, Author Image, Author Side.
+ * Text lg/Regular: 18px (desktop), weight 400, lh 28px.
+ * Text/text-secondary-paragraph color.
+ */
+export const DESCRIPTION_LG =
+  'text-text-lg font-[400] ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)] w-full';
+
+/**
+ * Author name — Text xl/Medium: 20px (desktop), weight 500, lh 30px.
+ * Text/text-default color.
+ */
+export const AUTHOR_NAME =
+  'text-text-xl font-[500] ' +
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+
+/**
+ * Author role — Text md/Regular: 16px (desktop), weight 400, lh 24px.
+ * Text/text-secondary-paragraph color.
+ */
+export const AUTHOR_ROLE =
+  'text-text-md font-[400] ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)]';
+
+/* ── Star icon ───────────────────────────────────────────────────── */
+
+/** Icon wrapper: size 24×24 px (icon-xl). */
+export const STAR_ICON_WRAPPER = 'shrink-0 size-[24px]';
+
+/** Star icon color: Icon/icon-default */
+export const STAR_ICON_COLOR =
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+
+/* ── Image containers ────────────────────────────────────────────── */
+
+/**
+ * Author Image variant — 120×120 px square, radius-16 corners, overflow-hidden.
+ * The `relative` + `shrink-0` contain the absolutely-positioned <img>.
+ */
+export const IMAGE_SQUARE =
+  'relative shrink-0 size-[120px] rounded-[16px] overflow-hidden';
+
+/**
+ * Author Side variant — 160 px wide, stretches to the full card height,
+ * radius-16 corners, overflow-hidden.
+ * `self-stretch` makes it fill the flex-row height without a fixed height on the card.
+ */
+export const IMAGE_SIDE =
+  'relative shrink-0 w-[160px] self-stretch rounded-[16px] overflow-hidden';

package/src/components/Quote/index.ts

@@ -0,0 +1,2 @@
+export { Quote } from './Quote';
+export type { QuoteProps, QuoteStyle } from './Quote.types';

package/src/components/RadialStepper/RadialStepper.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { CircularItem } from '../CircularItem';
+import type { RadialStepperProps } from './RadialStepper.types';
+import {
+  CIRCULAR_SIZE,
+  TYPO,
+  CONTAINER_H,
+  CONTAINER_V,
+  TEXT_BLOCK_BASE,
+  TEXT_ALIGN_LTR_H,
+  TEXT_ALIGN_RTL_H,
+  TEXT_ALIGN_V,
+  COLOR_SECONDARY,
+  COLOR_DEFAULT,
+} from './RadialStepper.variants';
+
+/**
+ * RadialStepper
+ *
+ * A step-context indicator combining a `CircularItem` ring with a text block
+ * showing Previous, current step name, description, and Next labels.
+ * Traced from Figma node 5004:55635.
+ *
+ * Layout:
+ *   Horizontal LTR: [CircularItem] [text block]
+ *   Horizontal RTL: [text block]   [CircularItem]   (ring on the end/right)
+ *   Vertical:       [CircularItem]                  (centred above)
+ *                   [text block]                    (centred below)
+ *
+ * RTL: Pass `rtl` to flip ring direction (arc counter-clockwise) and
+ *   right-align text. Text content (labels, step name, description) is
+ *   not auto-translated — the consumer passes the appropriate language string.
+ *
+ * Dark mode: toggled via `html.dark`, zero extra config.
+ */
+export const RadialStepper = forwardRef<HTMLDivElement, RadialStepperProps>(
+  function RadialStepper(
+    {
+      size = '64px',
+      layout = 'Horizontal',
+      variant = 'Primary',
+      rtl = false,
+      indicator = '1 of 4',
+      previousLabel = 'Previous:',
+      showPrevious = true,
+      stepName = 'Step One',
+      showStepName = true,
+      description = 'this is step description',
+      showDescription = true,
+      nextLabel = 'Next:',
+      showNext = true,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    const typo = TYPO[size];
+    const circularSize = CIRCULAR_SIZE[size];
+    const isVertical = layout === 'Vertical';
+
+    // ── Text block ────────────────────────────────────────────────────────────
+
+    const textAlignClass = isVertical
+      ? TEXT_ALIGN_V
+      : rtl
+        ? TEXT_ALIGN_RTL_H
+        : TEXT_ALIGN_LTR_H;
+
+    const textBlock = (
+      <div
+        className={cn(TEXT_BLOCK_BASE, textAlignClass)}
+        dir={rtl ? 'rtl' : undefined}
+      >
+        {/* Previous: label */}
+        {showPrevious && (
+          <p
+            className={cn('shrink-0 font-[500]', COLOR_SECONDARY)}
+            style={typo.meta}
+          >
+            {previousLabel}
+          </p>
+        )}
+
+        {/* Step name */}
+        {showStepName && (
+          <p
+            className={cn('shrink-0 font-[500]', COLOR_DEFAULT)}
+            style={typo.title}
+            dir="auto"
+          >
+            {stepName}
+          </p>
+        )}
+
+        {/* Description */}
+        {showDescription && (
+          <p
+            className={cn('shrink-0 font-[400]', COLOR_SECONDARY)}
+            style={typo.desc}
+            dir="auto"
+          >
+            {description}
+          </p>
+        )}
+
+        {/* Next: label */}
+        {showNext && (
+          <p
+            className={cn('shrink-0 font-[500]', COLOR_SECONDARY)}
+            style={typo.meta}
+          >
+            {nextLabel}
+          </p>
+        )}
+      </div>
+    );
+
+    // ── Shared CircularItem ───────────────────────────────────────────────────
+
+    const ring = (
+      <CircularItem
+        size={circularSize}
+        variant={variant}
+        indicator={indicator}
+        rtl={rtl}
+      />
+    );
+
+    // ── Root container ────────────────────────────────────────────────────────
+
+    const containerClass = isVertical ? CONTAINER_V : CONTAINER_H;
+
+    return (
+      <div
+        ref={ref}
+        className={cn('relative', containerClass, className)}
+        {...props}
+      >
+        {isVertical ? (
+          // Vertical: ring always on top, text below
+          <>
+            {ring}
+            {textBlock}
+          </>
+        ) : rtl ? (
+          // Horizontal RTL: text on the start (left), ring on the end (right)
+          <>
+            {textBlock}
+            {ring}
+          </>
+        ) : (
+          // Horizontal LTR: ring on the start (left), text after
+          <>
+            {ring}
+            {textBlock}
+          </>
+        )}
+      </div>
+    );
+  },
+);
+
+RadialStepper.displayName = 'RadialStepper';

package/src/components/RadialStepper/RadialStepper.types.ts

@@ -0,0 +1,77 @@
+import type { HTMLAttributes } from 'react';
+import type { CircularItemIndicator } from '../CircularItem';
+
+/**
+ * Physical size of the circular ring.
+ * Matches the Figma `Size` property names exactly.
+ * Maps 1-to-1 to CircularItem sizes:
+ *   48px → Small  |  64px → Medium  |  80px → Large  |  120px → Extra Large
+ */
+export type RadialStepperSize = '48px' | '64px' | '80px' | '120px';
+
+/**
+ * Flex direction of the component.
+ * Horizontal: ring beside text.
+ * Vertical:   ring above text.
+ */
+export type RadialStepperLayout = 'Horizontal' | 'Vertical';
+
+/**
+ * Arc colour passed down to CircularItem.
+ * Primary = green (#1b8354), Neutral = dark navy (#1f2a37).
+ */
+export type RadialStepperVariant = 'Primary' | 'Neutral';
+
+export interface RadialStepperProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Ring diameter tier (default: '64px').
+   * Controls CircularItem size AND the text typography tier.
+   */
+  size?: RadialStepperSize;
+
+  /**
+   * Flex direction of the component (default: 'Horizontal').
+   * Horizontal: ring left (LTR) or right (RTL) of the text block.
+   * Vertical:   ring above, text block below, both centred.
+   */
+  layout?: RadialStepperLayout;
+
+  /**
+   * Arc colour theme passed to CircularItem (default: 'Primary').
+   * Named `variant` to avoid conflict with HTMLAttributes.style.
+   */
+  variant?: RadialStepperVariant;
+
+  /**
+   * Right-to-left mode (default: false).
+   * When true: ring moves to the end (right) of a horizontal layout,
+   * all text right-aligns, and CircularItem receives rtl=true so its
+   * arc fills counter-clockwise.
+   */
+  rtl?: boolean;
+
+  /**
+   * Step progress passed directly to CircularItem (default: '1 of 4').
+   */
+  indicator?: CircularItemIndicator;
+
+  /** Label for the previous step row. Default: "Previous:" */
+  previousLabel?: string;
+  /** Show / hide the previous-step row (default: true). */
+  showPrevious?: boolean;
+
+  /** Current step name. Default: "Step One" */
+  stepName?: string;
+  /** Show / hide the step-name row (default: true). */
+  showStepName?: boolean;
+
+  /** Step description. Default: "this is step description" */
+  description?: string;
+  /** Show / hide the description row (default: true). */
+  showDescription?: boolean;
+
+  /** Label for the next step row. Default: "Next:" */
+  nextLabel?: string;
+  /** Show / hide the next-step row (default: true). */
+  showNext?: boolean;
+}

package/src/components/RadialStepper/RadialStepper.variants.ts

@@ -0,0 +1,122 @@
+/**
+ * RadialStepper.variants.ts
+ *
+ * All class-name constants and size configuration for RadialStepper.
+ * Values traced from Figma node 5004:55635.
+ *
+ * Color tokens (from get_variable_defs):
+ *   Text/text-default              → #161616  / dark: #e5e7eb   (step name)
+ *   Text/text-secondary-paragraph  → #6c737f  / dark: #9ca3af   (labels + description)
+ *   Text/text-primary-paragraph    → #384250  (CircularItem centre — handled inside CircularItem)
+ *
+ * Spacing tokens:
+ *   Global/spacing-xs = 4px   → gap-spacing-xs   (between text rows)
+ *   Global/spacing-md = 8px   → gap-spacing-md   (vertical layout gap)
+ *   Global/spacing-lg = 12px  → gap-spacing-lg   (horizontal layout gap)
+ *
+ * Typography uses existing @utility classes from globals.css.
+ */
+
+import type { CircularItemSize } from '../CircularItem';
+import type { RadialStepperSize } from './RadialStepper.types';
+
+
+// ─── CircularItem size mapping ─────────────────────────────────────────────────
+
+export const CIRCULAR_SIZE: Record<RadialStepperSize, CircularItemSize> = {
+  '48px': 'Small',
+  '64px': 'Medium',
+  '80px': 'Large',
+  '120px': 'Extra Large',
+};
+
+// ─── Typography per size ───────────────────────────────────────────────────────
+//
+// Text scales with the component size prop to stay proportional to the ring.
+// All values are absolute px (not rem) — root-font-size-agnostic and identical
+// to the global design-token px values in typography.ts / globals.css.
+//
+// Token mapping (TEXT_TOKENS / --ds-typo-text-* at desktop):
+//   10px → text2Xs   12px → textXs   14px → textSm
+//   16px → textMd    18px → textLg
+//
+// lineHeight values match the paired design-token leading:
+//   10px → 18px lh   12px → 18px lh   14px → 20px lh
+//   16px → 24px lh   18px → 28px lh
+
+export interface TypographyConfig {
+  meta:  { fontSize: string; lineHeight: string };  // Previous: / Next:
+  title: { fontSize: string; lineHeight: string };  // Step name
+  desc:  { fontSize: string; lineHeight: string };  // Description
+}
+
+export const TYPO: Record<RadialStepperSize, TypographyConfig> = {
+  '48px': {
+    meta:  { fontSize: '10px', lineHeight: '18px' }, // text2Xs
+    title: { fontSize: '12px', lineHeight: '18px' }, // textXs
+    desc:  { fontSize: '10px', lineHeight: '18px' }, // text2Xs
+  },
+  '64px': {
+    meta:  { fontSize: '12px', lineHeight: '18px' }, // textXs
+    title: { fontSize: '14px', lineHeight: '20px' }, // textSm
+    desc:  { fontSize: '12px', lineHeight: '18px' }, // textXs
+  },
+  '80px': {
+    meta:  { fontSize: '12px', lineHeight: '18px' }, // textXs
+    title: { fontSize: '16px', lineHeight: '24px' }, // textMd
+    desc:  { fontSize: '12px', lineHeight: '18px' }, // textXs
+  },
+  '120px': {
+    meta:  { fontSize: '14px', lineHeight: '20px' }, // textSm
+    title: { fontSize: '18px', lineHeight: '28px' }, // textLg
+    desc:  { fontSize: '14px', lineHeight: '20px' }, // textSm
+  },
+};
+
+// ─── Container layout ──────────────────────────────────────────────────────────
+
+/**
+ * Horizontal layout root — ring beside text, gap-spacing-lg (12px).
+ * Item order is handled in JSX (CircularItem before text for LTR,
+ * text before CircularItem for RTL).
+ */
+export const CONTAINER_H =
+  'flex flex-row items-center gap-spacing-lg';
+
+/**
+ * Vertical layout root — ring above text, gap-spacing-md (8px), centred.
+ */
+export const CONTAINER_V =
+  'flex flex-col items-center gap-spacing-md';
+
+// ─── Text block ────────────────────────────────────────────────────────────────
+
+/** Text block base — always a vertical flex column with xs gap between rows. */
+export const TEXT_BLOCK_BASE = 'flex flex-col gap-spacing-xs';
+
+/** LTR horizontal: left-align everything. */
+export const TEXT_ALIGN_LTR_H = 'items-start';
+
+/** RTL horizontal: right-align everything. */
+export const TEXT_ALIGN_RTL_H = 'items-end';
+
+/** Both vertical layouts: centre text. */
+export const TEXT_ALIGN_V = 'items-center text-center';
+
+// ─── Text colours ──────────────────────────────────────────────────────────────
+
+/**
+ * Previous / Next labels + description.
+ * Light: Text/text-secondary-paragraph = #6c737f
+ * Dark:  rgba(156,163,175,1)
+ */
+export const COLOR_SECONDARY =
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+
+/**
+ * Step name.
+ * Light: Text/text-default = #161616
+ * Dark:  rgba(229,231,235,1)
+ */
+export const COLOR_DEFAULT =
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';

package/src/components/RadialStepper/index.ts

@@ -0,0 +1,7 @@
+export { RadialStepper } from './RadialStepper';
+export type {
+  RadialStepperProps,
+  RadialStepperSize,
+  RadialStepperLayout,
+  RadialStepperVariant,
+} from './RadialStepper.types';