sdaia-ui 1.0.1

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -0,0 +1,369 @@
+'use client';
+
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { cn } from '../../lib/cn';
+import type { ProgressCircleProps } from './ProgressCircle.types';
+import {
+  SIZE_MAP,
+  STYLE_MAP,
+  DARK_STROKE,
+  DARK_TRACK_STROKE,
+} from './ProgressCircle.variants';
+
+/* ── Helper: compute SVG arc geometry ─────────────────────────── */
+function getCircleProps(dimension: number, strokeWidth: number) {
+  const radius = (dimension - strokeWidth) / 2;
+  const center = dimension / 2;
+  const circumference = 2 * Math.PI * radius;
+  return { radius, center, circumference };
+}
+
+function getHalfCircleProps(dimension: number, strokeWidth: number) {
+  const radius = (dimension - strokeWidth) / 2;
+  const center = dimension / 2;
+  const halfCircumference = Math.PI * radius;
+  return { radius, center, halfCircumference };
+}
+
+export const ProgressCircle = forwardRef<HTMLDivElement, ProgressCircleProps>(
+  function ProgressCircle(
+    {
+      value = 0,
+      variant = 'primary',
+      shape = 'circle',
+      size = 'md',
+      valueText = true,
+      labelText = false,
+      label = 'Active Users',
+      direction = 'ltr',
+      animateOnView = false,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const clamped = Math.max(0, Math.min(100, value));
+    const hostRef = useRef<HTMLDivElement | null>(null);
+    const animationFrameRef = useRef<number | null>(null);
+    const displayValueRef = useRef(animateOnView ? 0 : clamped);
+    const [hasEnteredView, setHasEnteredView] = useState(!animateOnView);
+    const [displayValue, setDisplayValue] = useState(animateOnView ? 0 : clamped);
+    const sizeConfig = SIZE_MAP[size];
+    const styleTokens = STYLE_MAP[variant];
+    const { dimension, strokeWidth } = sizeConfig;
+
+    const showLabel = labelText && sizeConfig.showLabel;
+    const visualValue = animateOnView ? displayValue : clamped;
+
+    const setRefs = useCallback(
+      (node: HTMLDivElement | null) => {
+        hostRef.current = node;
+        if (typeof ref === 'function') {
+          ref(node);
+          return;
+        }
+        if (ref) ref.current = node;
+      },
+      [ref],
+    );
+
+    useEffect(() => {
+      if (!animateOnView) {
+        setHasEnteredView(true);
+        return;
+      }
+      const node = hostRef.current;
+      if (!node) return;
+      if (typeof IntersectionObserver === 'undefined') {
+        setHasEnteredView(true);
+        return;
+      }
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          const [entry] = entries;
+          if (entry?.isIntersecting) {
+            setHasEnteredView(true);
+            observer.disconnect();
+          }
+        },
+        { threshold: 0.35 },
+      );
+
+      observer.observe(node);
+      return () => observer.disconnect();
+    }, [animateOnView]);
+
+    useEffect(() => {
+      displayValueRef.current = displayValue;
+    }, [displayValue]);
+
+    useEffect(() => {
+      if (!animateOnView) {
+        setDisplayValue(clamped);
+        return;
+      }
+      if (!hasEnteredView) return;
+
+      if (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        setDisplayValue(clamped);
+        return;
+      }
+
+      const start = displayValueRef.current;
+      const target = clamped;
+      const durationMs = 900;
+      const startTime = performance.now();
+
+      const tick = (time: number) => {
+        const elapsed = Math.min(1, (time - startTime) / durationMs);
+        const eased = 1 - Math.pow(1 - elapsed, 3);
+        const nextValue = start + (target - start) * eased;
+        setDisplayValue(nextValue);
+
+        if (elapsed < 1) {
+          animationFrameRef.current = requestAnimationFrame(tick);
+        }
+      };
+
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+      animationFrameRef.current = requestAnimationFrame(tick);
+
+      return () => {
+        if (animationFrameRef.current !== null) {
+          cancelAnimationFrame(animationFrameRef.current);
+          animationFrameRef.current = null;
+        }
+      };
+    }, [animateOnView, clamped, hasEnteredView]);
+
+    if (shape === 'half-circle') {
+      return (
+        <HalfCircleProgress
+          ref={setRefs}
+          clamped={clamped}
+          visualValue={visualValue}
+          dimension={dimension}
+          strokeWidth={strokeWidth}
+          sizeConfig={sizeConfig}
+          styleTokens={styleTokens}
+          variant={variant}
+          valueText={valueText}
+          showLabel={showLabel}
+          label={label}
+          direction={direction}
+          className={className}
+          {...rest}
+        />
+      );
+    }
+
+    /* ── Full circle ──────────────────────────────────────────── */
+    const { radius, center, circumference } = getCircleProps(dimension, strokeWidth);
+    const offset = circumference - (visualValue / 100) * circumference;
+
+    return (
+      <div
+        ref={setRefs}
+        dir={direction}
+        data-slot="progress-circle"
+        role="progressbar"
+        aria-valuenow={clamped}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        className={cn('relative inline-flex items-center justify-center', className)}
+        style={{ width: dimension, height: dimension }}
+        {...rest}
+      >
+        <svg
+          width={dimension}
+          height={dimension}
+          viewBox={`0 0 ${dimension} ${dimension}`}
+          className={cn('absolute inset-0', direction === 'rtl' ? 'rotate-120' : '-rotate-90')}
+          aria-hidden="true"
+        >
+          {/* Track */}
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke={styleTokens.trackStroke}
+            strokeWidth={strokeWidth}
+            className="dark:hidden"
+          />
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke={DARK_TRACK_STROKE}
+            strokeWidth={strokeWidth}
+            className="hidden dark:block"
+          />
+          {/* Fill */}
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke={styleTokens.stroke}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeDasharray={circumference}
+            strokeDashoffset={offset}
+            className="transition-all duration-500 dark:hidden"
+          />
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke={DARK_STROKE[variant]}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeDasharray={circumference}
+            strokeDashoffset={offset}
+            className="hidden transition-all duration-500 dark:block"
+          />
+        </svg>
+
+        {/* Center text */}
+        <div className="relative z-10 flex flex-col items-center justify-center">
+          {valueText && (
+            <span className={cn(sizeConfig.valueClass, styleTokens.valueColor)}>
+              {Math.round(visualValue)}%
+            </span>
+          )}
+          {showLabel && (
+            <span className={cn(sizeConfig.labelClass, styleTokens.labelColor)}>
+              {label}
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+/* ── Half-circle sub-component ────────────────────────────────── */
+interface HalfCircleProgressProps {
+  clamped: number;
+  visualValue: number;
+  dimension: number;
+  strokeWidth: number;
+  sizeConfig: (typeof SIZE_MAP)[keyof typeof SIZE_MAP];
+  styleTokens: (typeof STYLE_MAP)[keyof typeof STYLE_MAP];
+  variant: 'primary' | 'neutral';
+  valueText: boolean;
+  showLabel: boolean;
+  label: string;
+  direction: 'ltr' | 'rtl';
+  className?: string;
+}
+
+const HalfCircleProgress = forwardRef<HTMLDivElement, HalfCircleProgressProps>(
+  function HalfCircleProgress(
+    {
+      clamped,
+      visualValue,
+      dimension,
+      strokeWidth,
+      sizeConfig,
+      styleTokens,
+      variant,
+      valueText,
+      showLabel,
+      label,
+      direction,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const { radius, center, halfCircumference } = getHalfCircleProps(dimension, strokeWidth);
+    const offset = halfCircumference - (visualValue / 100) * halfCircumference;
+    const halfHeight = dimension / 2 + strokeWidth / 2;
+
+    /* Arc path: semicircle from left to right (180° arc at the top) */
+    const arcPath = `M ${strokeWidth / 2} ${center} A ${radius} ${radius} 0 0 1 ${dimension - strokeWidth / 2} ${center}`;
+
+    return (
+      <div
+        ref={ref}
+        dir={direction}
+        data-slot="progress-circle"
+        role="progressbar"
+        aria-valuenow={clamped}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        className={cn('relative inline-flex items-end justify-center', className)}
+        style={{ width: dimension, height: halfHeight }}
+        {...rest}
+      >
+        <svg
+          width={dimension}
+          height={halfHeight}
+          viewBox={`0 0 ${dimension} ${halfHeight}`}
+          className={cn('absolute inset-0', direction === 'rtl' && 'scale-x-[-1]')}
+          aria-hidden="true"
+        >
+          {/* Track */}
+          <path
+            d={arcPath}
+            fill="none"
+            stroke={styleTokens.trackStroke}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            className="dark:hidden"
+          />
+          <path
+            d={arcPath}
+            fill="none"
+            stroke={DARK_TRACK_STROKE}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            className="hidden dark:block"
+          />
+          {/* Fill */}
+          <path
+            d={arcPath}
+            fill="none"
+            stroke={styleTokens.stroke}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeDasharray={halfCircumference}
+            strokeDashoffset={offset}
+            className="transition-all duration-500 dark:hidden"
+          />
+          <path
+            d={arcPath}
+            fill="none"
+            stroke={DARK_STROKE[variant]}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeDasharray={halfCircumference}
+            strokeDashoffset={offset}
+            className="hidden transition-all duration-500 dark:block"
+          />
+        </svg>
+
+        {/* Center text — positioned at the bottom of the semicircle */}
+        <div className="relative z-10 mb-[2px] flex flex-col items-center justify-center">
+          {valueText && (
+            <span className={cn(sizeConfig.valueClass, styleTokens.valueColor)}>
+              {Math.round(visualValue)}%
+            </span>
+          )}
+          {showLabel && (
+            <span className={cn(sizeConfig.labelClass, styleTokens.labelColor)}>
+              {label}
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/ProgressCircle/ProgressCircle.types.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'react';
+
+export type ProgressCircleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ProgressCircleStyle = 'primary' | 'neutral';
+export type ProgressCircleShape = 'circle' | 'half-circle';
+
+export interface ProgressCircleProps extends HTMLAttributes<HTMLDivElement> {
+  /** Current progress value (0–100) */
+  value?: number;
+  /** Visual style */
+  variant?: ProgressCircleStyle;
+  /** Shape of the progress indicator */
+  shape?: ProgressCircleShape;
+  /** Size preset */
+  size?: ProgressCircleSize;
+  /** Show percentage text in the center */
+  valueText?: boolean;
+  /** Show label text below the percentage (only visible at md, lg, xl) */
+  labelText?: boolean;
+  /** Label string (e.g. "Active Users") */
+  label?: string;
+  /** Text direction */
+  direction?: 'ltr' | 'rtl';
+  /** Animate the progress arc from 0 when the component enters the viewport */
+  animateOnView?: boolean;
+}

package/src/components/ProgressCircle/ProgressCircle.variants.ts

@@ -0,0 +1,88 @@
+import type { ProgressCircleSize, ProgressCircleStyle } from './ProgressCircle.types';
+
+/* ── Size configuration ───────────────────────────────────────── */
+export interface SizeConfig {
+  /** Outer dimension (width & height) */
+  dimension: number;
+  /** SVG stroke width */
+  strokeWidth: number;
+  /** Value text classes */
+  valueClass: string;
+  /** Label text classes (only rendered at md+) */
+  labelClass: string;
+  /** Whether this size shows the label */
+  showLabel: boolean;
+}
+
+export const SIZE_MAP: Record<ProgressCircleSize, SizeConfig> = {
+  xs: {
+    dimension: 64,
+    strokeWidth: 5,
+    valueClass: 'text-text-sm font-[700]',
+    labelClass: '',
+    showLabel: false,
+  },
+  sm: {
+    dimension: 80,
+    strokeWidth: 5,
+    valueClass: 'text-text-md font-[700]',
+    labelClass: '',
+    showLabel: false,
+  },
+  md: {
+    dimension: 120,
+    strokeWidth: 5,
+    valueClass: 'text-text-xl font-[700]',
+    labelClass: 'text-text-2xs font-[400]',
+    showLabel: true,
+  },
+  lg: {
+    dimension: 160,
+    strokeWidth: 5,
+    valueClass: 'text-display-xs font-[700]',
+    labelClass: 'text-text-xs font-[400]',
+    showLabel: true,
+  },
+  xl: {
+    dimension: 200,
+    strokeWidth: 5,
+    valueClass: 'text-display-sm font-[700]',
+    labelClass: 'text-text-sm font-[400]',
+    showLabel: true,
+  },
+};
+
+/* ── Style (color) tokens ─────────────────────────────────────── */
+export interface StyleTokens {
+  /** Stroke color for the filled arc */
+  stroke: string;
+  /** Text color for value */
+  valueColor: string;
+  /** Text color for label */
+  labelColor: string;
+  /** Track (background circle) stroke color */
+  trackStroke: string;
+}
+
+export const STYLE_MAP: Record<ProgressCircleStyle, StyleTokens> = {
+  primary: {
+    stroke: 'rgba(27,131,84,1)',
+    valueColor: 'text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)]',
+    labelColor: 'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
+    trackStroke: 'rgba(243,244,246,1)',
+  },
+  neutral: {
+    stroke: 'rgba(56,66,80,1)',
+    valueColor: 'text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)]',
+    labelColor: 'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
+    trackStroke: 'rgba(243,244,246,1)',
+  },
+};
+
+/* Dark-mode stroke overrides (used inline in SVG) */
+export const DARK_STROKE: Record<ProgressCircleStyle, string> = {
+  primary: 'rgba(84,192,138,1)',
+  neutral: 'rgba(156,163,175,1)',
+};
+
+export const DARK_TRACK_STROKE = 'rgba(31,42,55,1)';

package/src/components/ProgressCircle/index.ts

@@ -0,0 +1,7 @@
+export { ProgressCircle } from './ProgressCircle';
+export type {
+  ProgressCircleProps,
+  ProgressCircleSize,
+  ProgressCircleStyle,
+  ProgressCircleShape,
+} from './ProgressCircle.types';

package/src/components/Quote/Quote.tsx

@@ -0,0 +1,210 @@
+import { cn } from '../../lib/cn';
+import type { QuoteProps } from './Quote.types';
+import {
+  CARD,
+  TITLE,
+  DESCRIPTION_XL,
+  DESCRIPTION_LG,
+  AUTHOR_NAME,
+  AUTHOR_ROLE,
+  STAR_ICON_WRAPPER,
+  STAR_ICON_COLOR,
+  IMAGE_SQUARE,
+  IMAGE_SIDE,
+} from './Quote.variants';
+import { StarIcon } from '../../icons/IconFactory';
+
+/* ── Shared sub-elements ─────────────────────────────────────────── */
+
+/** Name + role stacked vertically — shared by all four styles. */
+function AuthorBlock({
+  name,
+  role,
+}: {
+  name: string;
+  role: string;
+}) {
+  return (
+    <div className="flex flex-col gap-spacing-none shrink-0">
+      <p className={AUTHOR_NAME}>{name}</p>
+      <p className={AUTHOR_ROLE}>{role}</p>
+    </div>
+  );
+}
+
+/** Star icon wrapped in a fixed 24×24 container. */
+function Star({ className }: { className?: string }) {
+  return (
+    <div className={cn(STAR_ICON_WRAPPER, className)}>
+      <StarIcon className={STAR_ICON_COLOR} />
+    </div>
+  );
+}
+
+/* ── Main component ──────────────────────────────────────────────── */
+
+export function Quote({
+  style = 'standard',
+  title = 'Title of quote',
+  quote = '" The quote is placed here to highlight a specific saying or to present a brief quote that expresses an important idea or concept. "',
+  authorName = 'John Doe',
+  authorRole = 'Founder',
+  showStar = true,
+  imageSrc,
+  imageAlt = '',
+  className,
+}: QuoteProps) {
+  /* ── Standard ─────────────────────────────────────────────────
+   *
+   * Layout (flex-col, p-3xl, gap-4xl):
+   *   [Title + Description (text-xl)]
+   *   [Row: Author(start)  Star(end)]
+   *
+   * RTL: flex-row "justify-between" auto-flips start/end via dir="rtl",
+   * so Star moves to the visual start (right→left) automatically.
+   * ─────────────────────────────────────────────────────────── */
+  if (style === 'standard') {
+    return (
+      <div
+        className={cn(
+          CARD,
+          'flex flex-col gap-spacing-4xl p-spacing-3xl',
+          className,
+        )}
+        data-slot="quote"
+        data-style="standard"
+      >
+        {/* Title + Description */}
+        <div className="flex flex-col gap-spacing-md">
+          <p className={TITLE}>{title}</p>
+          <p className={DESCRIPTION_XL}>{quote}</p>
+        </div>
+
+        {/* Footer row: author at start, star at end.
+            justify-between + flex-row auto-flips in RTL. */}
+        <div className="flex items-start justify-between gap-spacing-lg">
+          <AuthorBlock name={authorName} role={authorRole} />
+          {showStar && <Star />}
+        </div>
+      </div>
+    );
+  }
+
+  /* ── Centered ─────────────────────────────────────────────────
+   *
+   * Layout (flex-col items-center text-center, px-8xl py-3xl, gap-4xl):
+   *   [Star — centered]
+   *   [Title + Description (text-lg) — centered]
+   *   [Author — centered]
+   *
+   * Same in LTR and RTL (everything is center-aligned).
+   * ─────────────────────────────────────────────────────────── */
+  if (style === 'centered') {
+    return (
+      <div
+        className={cn(
+          CARD,
+          'flex flex-col items-center gap-spacing-4xl',
+          'px-spacing-8xl py-spacing-3xl text-center',
+          className,
+        )}
+        data-slot="quote"
+        data-style="centered"
+      >
+        {showStar && <Star />}
+
+        {/* Title + Description */}
+        <div className="flex flex-col items-center gap-spacing-md w-full">
+          <p className={TITLE}>{title}</p>
+          <p className={DESCRIPTION_LG}>{quote}</p>
+        </div>
+
+        <AuthorBlock name={authorName} role={authorRole} />
+      </div>
+    );
+  }
+
+  /* ── Author Image ─────────────────────────────────────────────
+   *
+   * Layout (flex-row items-start, p-3xl, gap-3xl):
+   *   [Image 120×120 + Author below  (start col)]
+   *   [Title + Description (text-lg) (end col, flex-1)]
+   *
+   * RTL: dir="rtl" on ancestor causes flex-row to reverse visually,
+   * so the image column moves to the right and text moves to the left.
+   * DOM order stays the same — no extra RTL code needed.
+   * ─────────────────────────────────────────────────────────── */
+  if (style === 'author-image') {
+    return (
+      <div
+        className={cn(
+          CARD,
+          'flex flex-row items-start gap-spacing-3xl p-spacing-3xl',
+          className,
+        )}
+        data-slot="quote"
+        data-style="author-image"
+      >
+        {/* Start column: image + author name/role */}
+        <div className="flex flex-col gap-spacing-lg shrink-0">
+          {imageSrc && (
+            <div className={IMAGE_SQUARE}>
+              <img
+                src={imageSrc}
+                alt={imageAlt}
+                className="absolute inset-0 w-full h-full object-cover"
+              />
+            </div>
+          )}
+          <AuthorBlock name={authorName} role={authorRole} />
+        </div>
+
+        {/* End column: title + description */}
+        <div className="flex flex-col gap-spacing-md flex-1 min-w-0">
+          <p className={TITLE}>{title}</p>
+          <p className={DESCRIPTION_LG}>{quote}</p>
+        </div>
+      </div>
+    );
+  }
+
+  /* ── Author Side ──────────────────────────────────────────────
+   *
+   * Layout (flex-row items-center, p-3xl, gap-3xl):
+   *   [Image 160px wide × full-height (start)]
+   *   [Content: Title + Description (text-lg) + Author (end, flex-1)]
+   *
+   * RTL: same DOM order, dir="rtl" flips image to the right side.
+   * ─────────────────────────────────────────────────────────── */
+  return (
+    <div
+      className={cn(
+        CARD,
+        'flex flex-row items-center gap-spacing-3xl p-spacing-3xl',
+        className,
+      )}
+      data-slot="quote"
+      data-style="author-side"
+    >
+      {/* Start: tall image */}
+      {imageSrc && (
+        <div className={IMAGE_SIDE}>
+          <img
+            src={imageSrc}
+            alt={imageAlt}
+            className="absolute inset-0 w-full h-full object-cover"
+          />
+        </div>
+      )}
+
+      {/* End: text content */}
+      <div className="flex flex-col gap-spacing-2xl flex-1 min-w-0 justify-center">
+        <div className="flex flex-col gap-spacing-md">
+          <p className={TITLE}>{title}</p>
+          <p className={DESCRIPTION_LG}>{quote}</p>
+        </div>
+        <AuthorBlock name={authorName} role={authorRole} />
+      </div>
+    </div>
+  );
+}