sdaia-ui 1.0.1 → 1.0.2

package/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -1,208 +0,0 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { cn } from '../../lib/cn';
-import type { LoadingIndicatorProps, LoadingIndicatorSize } from './LoadingIndicator.types';
-import {
-  ACCENT_STROKE_CLASSES,
-  GRAPHIC_FRAME_CLASSES,
-  INNER_GAP_CLASSES,
-  LABEL_TEXT_CLASSES,
-  LABEL_TEXT_COLOR_CLASS,
-  RADIAL_NEUTRAL_SPOKE_FILLS,
-  RADIAL_PRIMARY_SPOKE_FILLS,
-  RING_TRACK_CLASSES,
-} from './LoadingIndicator.variants';
-
-const ARC_STROKE: Record<LoadingIndicatorSize, number> = {
-  xs: 2,
-  sm: 2.5,
-  md: 3,
-  lg: 3.5,
-  xl: 4,
-};
-
-function arcDash(circumference: number) {
-  const dash = circumference * 0.26;
-  return `${dash} ${circumference - dash}`;
-}
-
-/* ── Arc (Figma: Line simple) ─────────────────────────────────── */
-function ArcGraphic({
-  size,
-  colorClass,
-}: {
-  size: LoadingIndicatorSize;
-  colorClass: string;
-}) {
-  const sw = ARC_STROKE[size];
-  const dim = 24;
-  const r = (dim - sw) / 2;
-  const c = 2 * Math.PI * r;
-  return (
-    <svg
-      className={cn('motion-loop-spin', colorClass)}
-      viewBox={`0 0 ${dim} ${dim}`}
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
-      <circle
-        cx={dim / 2}
-        cy={dim / 2}
-        r={r}
-        fill="none"
-        stroke="currentColor"
-        strokeWidth={sw}
-        strokeLinecap="round"
-        strokeDasharray={arcDash(c)}
-      />
-    </svg>
-  );
-}
-
-/* ── Ring (Figma: Line spinner) ───────────────────────────────── */
-function RingGraphic({
-  size,
-  colorKey,
-  accentClass,
-}: {
-  size: LoadingIndicatorSize;
-  colorKey: 'neutral' | 'primary';
-  accentClass: string;
-}) {
-  const sw = ARC_STROKE[size];
-  const dim = 24;
-  const r = (dim - sw) / 2;
-  const c = 2 * Math.PI * r;
-  return (
-    <svg
-      className={cn('motion-loop-spin', accentClass)}
-      viewBox={`0 0 ${dim} ${dim}`}
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
-      <circle
-        cx={dim / 2}
-        cy={dim / 2}
-        r={r}
-        fill="none"
-        className={RING_TRACK_CLASSES[colorKey]}
-        strokeWidth={sw}
-      />
-      <circle
-        cx={dim / 2}
-        cy={dim / 2}
-        r={r}
-        fill="none"
-        stroke="currentColor"
-        strokeWidth={sw}
-        strokeLinecap="round"
-        strokeDasharray={arcDash(c)}
-      />
-    </svg>
-  );
-}
-
-/* ── Radial (Figma: Radial Spinner) ───────────────────────────── */
-function RadialGraphic({
-  colorKey,
-}: {
-  colorKey: 'neutral' | 'primary';
-}) {
-  const fills = colorKey === 'primary' ? RADIAL_PRIMARY_SPOKE_FILLS : RADIAL_NEUTRAL_SPOKE_FILLS;
-  const dim = 32;
-  const cx = dim / 2;
-  const cy = dim / 2;
-  return (
-    <svg
-      className="motion-loop-spin"
-      viewBox={`0 0 ${dim} ${dim}`}
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
-      {fills.map((fillClass, i) => (
-        <rect
-          key={i}
-          x={cx - 0.75}
-          y={3.5}
-          width={1.5}
-          height={10}
-          rx={0.75}
-          className={fillClass}
-          transform={`rotate(${i * 30} ${cx} ${cy})`}
-        />
-      ))}
-    </svg>
-  );
-}
-
-export const LoadingIndicator = forwardRef<HTMLDivElement, LoadingIndicatorProps>(
-  function LoadingIndicator(
-    {
-      indicatorStyle = 'arc',
-      color = 'neutral',
-      size = 'xs',
-      showLabel,
-      supportingText,
-      label = 'Loading...',
-      className,
-      'aria-label': ariaLabelProp,
-      ...rest
-    },
-    ref,
-  ) {
-    const labelVisible = showLabel ?? supportingText ?? true;
-
-    const frameClass = GRAPHIC_FRAME_CLASSES[indicatorStyle][size];
-    const gapClass = INNER_GAP_CLASSES[indicatorStyle];
-    const accentClass = ACCENT_STROKE_CLASSES[color];
-    const labelTextClass = LABEL_TEXT_CLASSES[size];
-
-    const labelId = labelVisible ? `loading-indicator-label-${size}-${indicatorStyle}` : undefined;
-    const ariaLabel =
-      ariaLabelProp ??
-      (!labelVisible && typeof label === 'string' ? label : !labelVisible ? 'Loading' : undefined);
-
-    return (
-      <div
-        ref={ref}
-        data-slot="loading-indicator"
-        role="status"
-        aria-live="polite"
-        aria-busy="true"
-        aria-label={ariaLabel}
-        aria-labelledby={labelVisible ? labelId : undefined}
-        className={cn('inline-flex flex-col items-center', className)}
-        {...rest}
-      >
-        <div
-          data-slot="loading-indicator-inner"
-          className={cn('flex flex-col items-center', gapClass)}
-        >
-          <div data-slot="loading-indicator-graphic" className={cn('shrink-0', frameClass)}>
-            {indicatorStyle === 'arc' && <ArcGraphic size={size} colorClass={accentClass} />}
-            {indicatorStyle === 'ring' && (
-              <RingGraphic size={size} colorKey={color} accentClass={accentClass} />
-            )}
-            {indicatorStyle === 'radial' && <RadialGraphic colorKey={color} />}
-          </div>
-          {labelVisible && (
-            <p
-              id={labelId}
-              data-slot="loading-indicator-label"
-              className={cn(
-                'shrink-0 text-center whitespace-nowrap',
-                labelTextClass,
-                LABEL_TEXT_COLOR_CLASS,
-              )}
-            >
-              {label}
-            </p>
-          )}
-        </div>
-      </div>
-    );
-  },
-);

package/src/components/LoadingIndicator/LoadingIndicator.types.ts

@@ -1,51 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-
-/**
- * Spinner geometry style. Maps to Figma component properties:
- * - `arc` → Style "Line simple" (open arc, no track)
- * - `ring` → Style "Line spinner" (track + partial stroke)
- * - `radial` → Style "Radial Spinner" (spokes)
- */
-export type LoadingIndicatorStyle = 'arc' | 'ring' | 'radial';
-
-/**
- * Accent palette. Maps to Figma `Color=Neutral` and `Color=Primary`.
- */
-export type LoadingIndicatorColor = 'neutral' | 'primary';
-
-/**
- * Size scale. Maps to Figma `xSmall` … `xLarge`.
- */
-export type LoadingIndicatorSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export interface LoadingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Visual geometry of the spinner (Figma "Style").
-   * @default 'arc'
-   */
-  indicatorStyle?: LoadingIndicatorStyle;
-  /**
-   * Color theme for the graphic (Figma "Color").
-   * @default 'neutral'
-   */
-  color?: LoadingIndicatorColor;
-  /**
-   * Size of the graphic and matching label typography.
-   * @default 'xs'
-   */
-  size?: LoadingIndicatorSize;
-  /**
-   * When true, shows supporting text below the graphic.
-   * @default true
-   */
-  showLabel?: boolean;
-  /**
-   * @deprecated Use `showLabel` instead. Matches Figma `supportingText`.
-   */
-  supportingText?: boolean;
-  /**
-   * Supporting text; keep short for screen readers when used as `role="status"`.
-   * @default 'Loading...'
-   */
-  label?: ReactNode;
-}

package/src/components/LoadingIndicator/LoadingIndicator.variants.ts

@@ -1,108 +0,0 @@
-import type { LoadingIndicatorColor, LoadingIndicatorSize, LoadingIndicatorStyle } from './LoadingIndicator.types';
-
-/* ── Outer column: gap between graphic and label ───────────────── */
-export const INNER_GAP_CLASSES: Record<LoadingIndicatorStyle, string> = {
-  arc: 'gap-spacing-sm',
-  ring: 'gap-spacing-lg',
-  radial: 'gap-spacing-lg',
-};
-
-/* ── Fixed frame around the SVG (Figma artboard sizes, one-off px) ─ */
-export const GRAPHIC_FRAME_CLASSES: Record<
-  LoadingIndicatorStyle,
-  Record<LoadingIndicatorSize, string>
-> = {
-  arc: {
-    xs: 'size-[24px]',
-    sm: 'size-[38.42px]',
-    md: 'size-[55.229px]',
-    lg: 'size-[67.235px]',
-    xl: 'size-[76.841px]',
-  },
-  ring: {
-    xs: 'size-[24px]',
-    sm: 'size-[32px]',
-    md: 'size-[46px]',
-    lg: 'size-[56px]',
-    xl: 'size-[64px]',
-  },
-  radial: {
-    xs: 'size-[24px]',
-    sm: 'size-[32px]',
-    md: 'size-[46px]',
-    lg: 'size-[56px]',
-    xl: 'size-[64px]',
-  },
-};
-
-/* ── Label typography (Figma: 2xs for xs/sm, xs for md/lg, sm for xl) ─ */
-export const LABEL_TEXT_CLASSES: Record<LoadingIndicatorSize, string> = {
-  xs: 'text-text-2xs font-[500]',
-  sm: 'text-text-2xs font-[500]',
-  md: 'text-text-xs font-[500]',
-  lg: 'text-text-xs font-[500]',
-  xl: 'text-text-sm font-[500]',
-};
-
-export const LABEL_TEXT_COLOR_CLASS = [
-  'text-[color:var(--color-field-text-filled,rgba(22,22,22,1))]',
-  'dark:text-[rgba(243,244,246,1)]',
-].join(' ');
-
-/* ── Arc + ring: stroke accent (currentColor on SVG) ───────────── */
-export const ACCENT_STROKE_CLASSES: Record<LoadingIndicatorColor, string> = {
-  neutral: [
-    'text-[rgba(56,66,80,1)]',
-    'dark:text-[rgba(210,214,219,1)]',
-  ].join(' '),
-  primary: [
-    'text-[rgba(27,131,84,1)]',
-    'dark:text-[rgba(136,216,173,1)]',
-  ].join(' '),
-};
-
-/* ── Ring track stroke (not currentColor) ─────────────────────── */
-export const RING_TRACK_CLASSES: Record<LoadingIndicatorColor, string> = {
-  neutral: [
-    'stroke-[rgba(210,214,219,1)]',
-    'dark:stroke-[rgba(75,85,99,1)]',
-  ].join(' '),
-  primary: [
-    'stroke-[rgba(223,246,231,1)]',
-    'dark:stroke-[rgba(27,131,84,0.35)]',
-  ].join(' '),
-};
-
-/**
- * Spoke fill classes for the radial style (12 steps, clockwise from top).
- * Matches Figma neutral ramp ordering for a rotating group.
- */
-export const RADIAL_NEUTRAL_SPOKE_FILLS: readonly string[] = [
-  'fill-[#d2d6db] dark:fill-[#4b5563]',
-  'fill-[#e5e7eb] dark:fill-[#6b7280]',
-  'fill-[#f9fafb] dark:fill-[#9ca3af]',
-  'fill-[#384250] dark:fill-[#d1d5db]',
-  'fill-[#384250] dark:fill-[#d1d5db]',
-  'fill-[#6c737f] dark:fill-[#e5e7eb]',
-  'fill-[#0d121c] dark:fill-[#f3f4f6]',
-  'fill-[#6c737f] dark:fill-[#e5e7eb]',
-  'fill-[#9da4ae] dark:fill-[#d1d5db]',
-  'fill-[#d2d6db] dark:fill-[#4b5563]',
-  'fill-[#e5e7eb] dark:fill-[#6b7280]',
-  'fill-[#f3f4f6] dark:fill-[#9ca3af]',
-];
-
-export const RADIAL_PRIMARY_SPOKE_FILLS: readonly string[] = [
-  'fill-[#b8eacb] dark:fill-[#1b8354]',
-  'fill-[#dff6e7] dark:fill-[#25935f]',
-  'fill-[#f7fdf9] dark:fill-[#54c08a]',
-  'fill-[#25935f] dark:fill-[#88d8ad]',
-  'fill-[#25935f] dark:fill-[#88d8ad]',
-  'fill-[#88d8ad] dark:fill-[#dff6e7]',
-  'fill-[#1b8354] dark:fill-[#f3fcf6]',
-  'fill-[#54c08a] dark:fill-[#b8eacb]',
-  'fill-[#88d8ad] dark:fill-[#dff6e7]',
-  'fill-[#b8eacb] dark:fill-[#1b8354]',
-  'fill-[#dff6e7] dark:fill-[#25935f]',
-  'fill-[#f3fcf6] dark:fill-[#54c08a]',
-];

package/src/components/LoadingIndicator/index.ts

@@ -1,7 +0,0 @@
-export { LoadingIndicator } from './LoadingIndicator';
-export type {
-  LoadingIndicatorProps,
-  LoadingIndicatorStyle,
-  LoadingIndicatorColor,
-  LoadingIndicatorSize,
-} from './LoadingIndicator.types';