sdaia-ui 1.0.1

package/src/components/Popover/Popover.variants.ts

@@ -0,0 +1,147 @@
+import type { PopoverActionsAlignment, PopoverPlacement } from './Popover.types';
+
+// ─── Panel wrapper ────────────────────────────────────────────────────────────
+
+/**
+ * Outer floating container.
+ * Figma: shadow-lg (two-layer drop shadow), w-[320px] design constraint.
+ */
+export const PANEL_WRAPPER =
+  'absolute z-50 flex flex-col w-[320px] max-w-[calc(100vw-2rem)] min-w-[120px] ' +
+  'shadow-[0px_12px_16px_-4px_rgba(16,24,40,0.08),0px_4px_6px_-2px_rgba(16,24,40,0.03)]';
+
+/**
+ * Panel body background + radius + padding + inner gap.
+ * Figma: tooltip-background-light = white; radius-8 = 8px; spacing-lg = 12px.
+ */
+export const PANEL_BODY =
+  'bg-white dark:bg-[rgba(17,24,39,1)] ' +
+  'border border-[rgba(229,231,235,1)] dark:border-[rgba(55,65,81,1)] ' +
+  'rounded-[8px] p-spacing-xl flex flex-col gap-spacing-xl items-start w-full relative';
+
+// ─── Content ──────────────────────────────────────────────────────────────────
+
+/** Content area stacks icon badge, text, image, and slot. */
+export const CONTENT_AREA = 'flex flex-col gap-spacing-md items-start w-full';
+
+/**
+ * Title row leaves trailing space for the close button so titles don't overlap.
+ * `pe-spacing-3xl` (24 px logical) flips to ps in RTL automatically.
+ */
+export const TITLE_ROW = 'flex items-center w-full ps-spacing-none pe-spacing-3xl';
+
+/** Title: text-md / Semibold. Figma: Text/text-display = #1f2a37. */
+export const TITLE_TEXT =
+  'flex-1 min-w-0 text-text-md font-[600] leading-[24px] ' +
+  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]';
+
+/** Helper text: text-sm / Regular. Figma: Text/text-primary-paragraph = #384250. */
+export const HELPER_TEXT =
+  'text-text-sm font-[400] leading-[20px] w-full ' +
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]';
+
+/** Supporting text: text-xs / Regular, muted. Figma: text-secondary-paragraph = #6c737f. */
+export const SUPPORTING_TEXT =
+  'text-text-xs font-[400] leading-[18px] w-full ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+
+/**
+ * Featured icon circular badge.
+ * Figma: bg-success-50 = #ecfdf3; padding 10 px; rounded-full.
+ */
+export const FEATURED_ICON_WRAPPER =
+  'bg-[rgba(236,253,243,1)] dark:bg-[rgba(5,46,22,1)] rounded-full p-[10px] ' +
+  'inline-flex items-center justify-center shrink-0';
+
+/** Icon inside featured badge. */
+export const FEATURED_ICON_SIZE = 'size-icon-md text-[rgba(6,118,71,1)] dark:text-[rgba(52,211,153,1)]';
+
+/** Image wrapper: fixed 140 px height per Figma design constraint. */
+export const IMAGE_WRAPPER = 'w-full h-[140px] rounded-[8px] overflow-hidden shrink-0';
+
+// ─── Close button ─────────────────────────────────────────────────────────────
+
+/**
+ * Close button: absolutely positioned in the top-trailing corner.
+ * Figma: right-[12px] top-[12px] → logical `end-spacing-lg` mirrors in RTL.
+ */
+export const CLOSE_BTN_POSITION = 'absolute end-spacing-lg top-spacing-lg';
+
+/** Close button interactive styles. */
+export const CLOSE_BTN =
+  'inline-flex items-center justify-center size-[16px] shrink-0 ' +
+  'text-[rgba(107,114,128,1)] dark:text-[rgba(156,163,175,1)] ' +
+  'hover:text-[rgba(31,42,55,1)] dark:hover:text-white ' +
+  'rounded-[4px] motion-feedback cursor-pointer ' +
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(46,144,250,1)]';
+
+// ─── Actions row ──────────────────────────────────────────────────────────────
+
+/** Actions container per alignment variant. */
+export const ACTIONS_ROW: Record<PopoverActionsAlignment, string> = {
+  start:  'flex gap-spacing-md items-center justify-start w-full',
+  center: 'flex gap-spacing-md items-center justify-center w-full',
+  end:    'flex gap-spacing-md items-center justify-end w-full',
+};
+
+/** Whether buttons should each take equal flex-1 width (center alignment only). */
+export const ACTIONS_FULL_WIDTH: Record<PopoverActionsAlignment, boolean> = {
+  start:  false,
+  center: true,
+  end:    false,
+};
+
+// ─── Beak ─────────────────────────────────────────────────────────────────────
+
+/**
+ * Beak container color class.
+ * The SVG uses fill="currentColor" so `text-white` / dark counterpart drives the triangle.
+ */
+export const BEAK_COLOR = 'text-white dark:text-[rgba(17,24,39,1)]';
+
+// ─── Panel positioning per placement ─────────────────────────────────────────
+
+/**
+ * Absolute offset classes positioning the panel relative to the trigger wrapper.
+ *
+ * Vertical placements (top / bottom) center the panel on the trigger using
+ * `left-1/2 -translate-x-1/2`. In RTL the browser handles this correctly because
+ * `left-1/2` is in physical space — we accept the slight asymmetry for center variants;
+ * for start/end variants we pin to the inline edge explicitly via `start-0` / `end-0`.
+ */
+export const PANEL_POSITION: Record<PopoverPlacement, string> = {
+  // ── vertical ────────────────────────────────────────────────────────────
+  'bottom':       'top-full left-1/2 -translate-x-1/2 mt-[4px]',
+  'bottom-start': 'top-full start-0 mt-[4px]',
+  'bottom-end':   'top-full end-0 mt-[4px]',
+  'top':          'bottom-full left-1/2 -translate-x-1/2 mb-[4px]',
+  'top-start':    'bottom-full start-0 mb-[4px]',
+  'top-end':      'bottom-full end-0 mb-[4px]',
+  // ── horizontal ──────────────────────────────────────────────────────────
+  'left':         'end-full top-1/2 -translate-y-1/2 me-[4px]',
+  'left-start':   'end-full top-0 me-[4px]',
+  'left-end':     'end-full bottom-0 me-[4px]',
+  'right':        'start-full top-1/2 -translate-y-1/2 ms-[4px]',
+  'right-start':  'start-full top-0 ms-[4px]',
+  'right-end':    'start-full bottom-0 ms-[4px]',
+};
+
+/**
+ * Beak flex container direction per placement group.
+ * Vertical placements: column (beak on top or bottom of panel).
+ * Horizontal placements: row (beak on left or right of panel).
+ */
+export const BEAK_DIRECTION: Record<PopoverPlacement, 'col-start' | 'col-end' | 'row-start' | 'row-end'> = {
+  'bottom':       'col-start',  // beak above panel body (points up)
+  'bottom-start': 'col-start',
+  'bottom-end':   'col-start',
+  'top':          'col-end',    // beak below panel body (points down)
+  'top-start':    'col-end',
+  'top-end':      'col-end',
+  'left':         'row-end',    // beak to the right of panel body (points right)
+  'left-start':   'row-end',
+  'left-end':     'row-end',
+  'right':        'row-start',  // beak to the left of panel body (points left)
+  'right-start':  'row-start',
+  'right-end':    'row-start',
+};

package/src/components/Popover/index.ts

@@ -0,0 +1,7 @@
+export { Popover } from './Popover';
+export type {
+  PopoverProps,
+  PopoverPlacement,
+  PopoverActionsAlignment,
+  PopoverTriggerType,
+} from './Popover.types';

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,241 @@
+'use client';
+
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import type { ProgressBarProps } from './ProgressBar.types';
+import {
+  TRACK,
+  FILL,
+  VALUE_TEXT,
+  ICON_COLOR,
+  TOOLTIP_BUBBLE,
+  LAYOUT,
+} from './ProgressBar.variants';
+import { cn } from '../../lib/cn';
+import { InfoCircleIcon, HelpCircleIcon } from '../../icons/IconFactory';
+
+export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
+  function ProgressBar(
+    {
+      progress = 0,
+      label = 'none',
+      leadingIcon = false,
+      trailingIcon = false,
+      valueMin = false,
+      valueMax = false,
+      dir = 'ltr',
+      animateOnView = false,
+      className = '',
+      ...rest
+    },
+    ref,
+  ) {
+    const clamped = Math.max(0, Math.min(100, progress));
+    const hostRef = useRef<HTMLDivElement | null>(null);
+    const animationFrameRef = useRef<number | null>(null);
+    const displayProgressRef = useRef(animateOnView ? 0 : clamped);
+    const [hasEnteredView, setHasEnteredView] = useState(!animateOnView);
+    const [displayProgress, setDisplayProgress] = useState(animateOnView ? 0 : clamped);
+    const layout = LAYOUT[label];
+    const visualProgress = animateOnView ? displayProgress : clamped;
+    const visualProgressRounded = Math.round(visualProgress);
+
+    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(() => {
+      displayProgressRef.current = displayProgress;
+    }, [displayProgress]);
+
+    useEffect(() => {
+      if (!animateOnView) {
+        setDisplayProgress(clamped);
+        return;
+      }
+      if (!hasEnteredView) return;
+
+      if (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        setDisplayProgress(clamped);
+        return;
+      }
+
+      const start = displayProgressRef.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 next = start + (target - start) * eased;
+        setDisplayProgress(next);
+
+        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]);
+
+    /* ── Shared elements ──────────────────────────────────────── */
+    /* Per Figma: Label=None uses help-circle, all other variants use info-circle */
+    const IconComponent = label === 'none' ? HelpCircleIcon : InfoCircleIcon;
+    /* Bottom variant: 14×14px icons; all others: size-icon-sm (16px at desktop) */
+    const iconSize = label === 'bottom' ? 'h-[14px] w-[14px]' : 'size-icon-sm';
+    const iconWrapperClass = cn(
+      'inline-flex shrink-0 items-center justify-center overflow-visible',
+      iconSize,
+      ICON_COLOR,
+    );
+    const leadingEl = leadingIcon ? (
+      <span className={iconWrapperClass}>
+        <IconComponent className="h-full w-full" aria-hidden="true" />
+      </span>
+    ) : null;
+    const trailingEl = trailingIcon ? (
+      <span className={iconWrapperClass}>
+        <IconComponent className="h-full w-full" aria-hidden="true" />
+      </span>
+    ) : null;
+    const minEl = valueMin ? <span className={VALUE_TEXT}>0%</span> : null;
+    const maxEl = valueMax ? <span className={VALUE_TEXT}>100%</span> : null;
+    const progressText = <span className={VALUE_TEXT}>{visualProgressRounded}%</span>;
+
+    /* ── Track bar (optionally with floating tooltip) ─────────── */
+    /* Tooltip lives inside the track so `insetInlineStart` is a
+     * percentage of the track width only — not the full wrapper.
+     * `rtl:translate-x-1/2` flips `-translate-x-1/2` for RTL so
+     * the bubble stays centred on the fill edge in both directions. */
+    const trackBar = (tooltipPosition?: 'top' | 'bottom') => (
+      <div data-slot="track" className={cn(TRACK, 'relative')}>
+        <div
+          data-slot="fill"
+          className={cn(FILL, dir === 'rtl' && 'ms-auto')}
+          style={{ width: `${visualProgress}%` }}
+        />
+        {tooltipPosition && (
+          <div
+            className="pointer-events-none absolute -translate-x-1/2 rtl:translate-x-1/2"
+            style={{
+              insetInlineStart: `${visualProgress}%`,
+              ...(tooltipPosition === 'top'
+                ? { bottom: 'calc(100% + 8px)' }
+                : { top: 'calc(100% + 8px)' }),
+            }}
+          >
+            <div className={cn(TOOLTIP_BUBBLE, 'whitespace-nowrap')}>
+              {visualProgressRounded}%
+            </div>
+          </div>
+        )}
+      </div>
+    );
+
+    /* ── Render by label variant ──────────────────────────────── */
+    if (label === 'none') {
+      return (
+        <div ref={setRefs} dir={dir} data-slot="progress-bar" className={cn('flex items-center gap-spacing-md', className)} role="progressbar" aria-valuenow={visualProgressRounded} aria-valuemin={0} aria-valuemax={100} {...rest}>
+          {leadingEl}
+          <div className="min-w-0 flex-1">{trackBar()}</div>
+          {trailingEl}
+        </div>
+      );
+    }
+
+    if (label === 'inline') {
+      return (
+        <div ref={setRefs} dir={dir} data-slot="progress-bar" className={cn('flex items-center gap-spacing-md', className)} role="progressbar" aria-valuenow={visualProgressRounded} aria-valuemin={0} aria-valuemax={100} {...rest}>
+          {leadingEl}
+          {minEl}
+          <div className="min-w-0 flex-1">{trackBar()}</div>
+          {progressText}
+          {trailingEl}
+        </div>
+      );
+    }
+
+    if (label === 'bottom') {
+      return (
+        <div ref={setRefs} dir={dir} data-slot="progress-bar" className={cn(layout.wrapper, className)} role="progressbar" aria-valuenow={visualProgressRounded} aria-valuemin={0} aria-valuemax={100} {...rest}>
+          {trackBar()}
+          <div className={layout.row}>
+            {leadingEl}
+            {minEl}
+            <div className="flex-1" />
+            {progressText}
+            {trailingEl}
+          </div>
+        </div>
+      );
+    }
+
+    if (label === 'top-floating') {
+      return (
+        <div ref={setRefs} dir={dir} data-slot="progress-bar" className={cn('flex items-center gap-spacing-md', className)} role="progressbar" aria-valuenow={visualProgressRounded} aria-valuemin={0} aria-valuemax={100} {...rest}>
+          {leadingEl}
+          {minEl}
+          <div className="min-w-0 flex-1">{trackBar('top')}</div>
+          {maxEl}
+          {trailingEl}
+        </div>
+      );
+    }
+
+    /* bottom-floating */
+    return (
+      <div ref={setRefs} dir={dir} data-slot="progress-bar" className={cn('flex items-center gap-spacing-md', className)} role="progressbar" aria-valuenow={visualProgressRounded} aria-valuemin={0} aria-valuemax={100} {...rest}>
+        {leadingEl}
+        {minEl}
+        <div className="min-w-0 flex-1">{trackBar('bottom')}</div>
+        {maxEl}
+        {trailingEl}
+      </div>
+    );
+  },
+);

package/src/components/ProgressBar/ProgressBar.types.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react';
+
+export type ProgressBarLabel = 'none' | 'inline' | 'bottom' | 'top-floating' | 'bottom-floating';
+
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Current progress value (0–100) */
+  progress?: number;
+  /** Label layout variant */
+  label?: ProgressBarLabel;
+  /** Show leading icon */
+  leadingIcon?: boolean;
+  /** Show trailing icon */
+  trailingIcon?: boolean;
+  /** Show min value (0%) */
+  valueMin?: boolean;
+  /** Show max value (100%) */
+  valueMax?: boolean;
+  /** Layout direction */
+  dir?: 'ltr' | 'rtl';
+  /** Animate fill from 0 when entering the viewport */
+  animateOnView?: boolean;
+}

package/src/components/ProgressBar/ProgressBar.variants.ts

@@ -0,0 +1,54 @@
+import type { ProgressBarLabel } from './ProgressBar.types';
+
+/* ──────────────────────────────────────────────────────────────
+ * Tokens sourced from Figma node 4321:30617:
+ *   - Track / fill: 4px tall, 2px radius
+ *   - Track bg:  Background/background-neutral-100  #f3f4f6
+ *   - Fill bg:   Background/background-primary      #1b8354
+ *   - Value text + tooltip text: Text xs/Regular (12/18, weight 400)
+ *     color Text/text-default #161616
+ *   - Tooltip:   white bg, radius-8, px-lg / py-md, shadow-md
+ *   - Icon:      14×14, Icon/icon-neutral #384250 (light)
+ * ────────────────────────────────────────────────────────────── */
+
+/* ── Track & fill ───────────────────────────────────────────── */
+export const TRACK =
+  'h-[4px] w-full rounded-[2px] bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,42,55,1)]';
+export const FILL =
+  'h-full rounded-[2px] bg-[rgba(27,131,84,1)] dark:bg-[rgba(84,192,138,1)] transition-all';
+
+/* ── Value text (Text xs / Regular, text-default) ───────────── */
+export const VALUE_TEXT =
+  'text-text-xs font-[400] text-[rgba(31,41,55,1)] dark:text-[rgba(243,244,246,1)]';
+
+/* ── Icon color (Icon/icon-neutral) ─────────────────────────── */
+export const ICON_COLOR =
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]';
+
+/* ── Floating tooltip ───────────────────────────────────────── */
+export const TOOLTIP_BUBBLE =
+  'relative rounded-[8px] bg-white px-spacing-lg py-spacing-md text-text-xs font-[400] text-[rgba(22,22,22,1)] shadow-[0_2px_4px_rgba(16,24,40,0.06),0_4px_8px_rgba(16,24,40,0.1)] dark:bg-[rgba(31,42,55,1)] dark:text-[rgba(243,244,246,1)] dark:shadow-[0_2px_4px_rgba(0,0,0,0.2),0_4px_8px_rgba(0,0,0,0.3)]';
+
+/* ── Layout per label variant ───────────────────────────────── */
+export const LAYOUT: Record<ProgressBarLabel, { wrapper: string; row: string }> = {
+  none: {
+    wrapper: 'flex flex-col',
+    row: '',
+  },
+  inline: {
+    wrapper: 'flex items-center gap-spacing-md',
+    row: '',
+  },
+  bottom: {
+    wrapper: 'flex flex-col',
+    row: 'flex items-center gap-spacing-md',
+  },
+  'top-floating': {
+    wrapper: 'flex items-center gap-spacing-md',
+    row: '',
+  },
+  'bottom-floating': {
+    wrapper: 'flex items-center gap-spacing-md',
+    row: '',
+  },
+};

package/src/components/ProgressBar/index.ts

@@ -0,0 +1,2 @@
+export { ProgressBar } from './ProgressBar';
+export type { ProgressBarProps, ProgressBarLabel } from './ProgressBar.types';