sdaia-ui 1.0.1 → 1.0.2

package/src/components/ProgressCircle/ProgressCircle.tsx

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

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

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

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

package/src/components/Quote/Quote.tsx

@@ -1,210 +0,0 @@
-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>
-  );
-}