sdaia-ui 1.0.1 → 1.0.2

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

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

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

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

package/src/components/RadialStepper/RadialStepper.tsx

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

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

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

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