sdaia-ui 1.0.1

package/src/components/Number/Number.types.ts

@@ -0,0 +1,58 @@
+export type NumberType =
+  | 'StatPair'
+  | 'StatHighlight'
+  | 'StatSplit'
+  | 'StatComparisonBlock'
+  | 'StatSideList'
+  | 'StatExtendedPanel'
+  | 'StatMixedStack'
+  | 'StatOptionBlock'
+  | 'StatDetailPair'
+  | 'StatInlineGroup'
+  | 'StatHeaderSplit'
+  | 'StatListStack';
+
+export type StatTrend = 'positive' | 'negative';
+
+export interface NumberRow {
+  label: string;
+  value: string;
+  trend?: StatTrend;
+  trendValue?: string;
+}
+
+export interface NumberProps {
+  type?: NumberType;
+
+  // ─── Primary stat ─────────────────────────────────────────────────────────
+  /** Label / indicator name above the primary value */
+  label?: string;
+  /** Large primary value (e.g. "422.61") */
+  value?: string;
+  /** Trend direction for the primary badge */
+  trend?: StatTrend;
+  /** Trend badge text (e.g. "12%") */
+  trendValue?: string;
+
+  // ─── Secondary stat (split / comparison / inline-group types) ─────────────
+  label2?: string;
+  value2?: string;
+  trend2?: StatTrend;
+  trendValue2?: string;
+
+  // ─── Title (StatInlineGroup only) ─────────────────────────────────────────
+  title?: string;
+
+  // ─── List rows (detail / list / extended types) ───────────────────────────
+  /** Up to 3 secondary data rows (label + medium value, optional badge) */
+  rows?: NumberRow[];
+
+  // ─── Actions ──────────────────────────────────────────────────────────────
+  /** Dropdown button label — StatExtendedPanel only */
+  menuLabel?: string;
+  onMenuClick?: () => void;
+  /** More-options (⋮) click handler — StatInlineGroup only */
+  onMoreClick?: () => void;
+
+  className?: string;
+}

package/src/components/Number/Number.variants.ts

@@ -0,0 +1,94 @@
+/**
+ * Number.variants.ts
+ *
+ * All class-name constants for the Number component family.
+ * Values traced from Figma node 5916:80797 (Number frame).
+ *
+ * Color tokens:
+ *   Text/text-secondary-paragraph  → #6c737f  / dark: #9ca3af
+ *   Text/text-default               → #161616  / dark: #e5e7eb
+ *   Text/text-primary               → #1b8354  (positive badge text)
+ *   Colors/Red/600                  → #d92d20  (negative badge text)
+ *   Border/border-neutral-primary   → #d2d6db  / dark: #384250  (dividers)
+ *   Colors/Primary-SA-Flag/50       → #f3fcf6  / dark: rgba(5,52,28)
+ *   Colors/Primary-SA-Flag/400      → #54c08a  (positive badge border)
+ *   Colors/Red/50                   → #fef3f2  / dark: rgba(60,18,14)
+ *   Colors/Red/400                  → #f97066  (negative badge border)
+ *   Background/background-card      → white    / dark: rgba(31,42,55)
+ *   Background/background-neutral-100 → #f3f4f6 / dark: rgba(17,25,39)
+ */
+
+// ─── Card root ────────────────────────────────────────────────────────────────
+
+export const CARD_BASE =
+  'bg-white dark:bg-[rgba(31,42,55,1)] rounded-[8px] p-spacing-2xl';
+
+// ─── Label (indicator name) ───────────────────────────────────────────────────
+// Display sm / Regular — responsive via text-display-sm utility
+
+export const LABEL_CLASS =
+  'text-display-sm font-normal text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+
+// ─── Primary value (Display lg / Bold) ───────────────────────────────────────
+
+export const VALUE_LG_CLASS =
+  'text-display-lg font-bold tracking-[-0.96px] text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+
+// ─── Secondary value (Display md / Bold) — used in list rows ─────────────────
+
+export const VALUE_MD_CLASS =
+  'text-display-md font-bold tracking-[-0.72px] whitespace-nowrap text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+
+// ─── Title (Display lg / Semibold — StatInlineGroup) ─────────────────────────
+
+export const TITLE_CLASS =
+  'text-display-lg font-semibold tracking-[-0.96px] text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+
+// ─── Dividers ─────────────────────────────────────────────────────────────────
+
+export const VERT_DIVIDER =
+  'w-px self-stretch shrink-0 bg-[rgba(210,214,219,1)] dark:bg-[rgba(56,66,80,1)]';
+
+export const HORIZ_DIVIDER =
+  'h-px w-full shrink-0 bg-[rgba(210,214,219,1)] dark:bg-[rgba(56,66,80,1)]';
+
+// ─── Trend badge (pill with arrow icon + percentage) ─────────────────────────
+// Radius: radius-9999 → rounded-full
+// Padding: px-spacing-md py-spacing-xs
+// Gap between icon and text: gap-spacing-sm
+
+export const BADGE_POSITIVE =
+  'inline-flex items-center gap-spacing-sm rounded-full px-spacing-md py-spacing-xs border shrink-0 ' +
+  'bg-[rgba(243,252,246,1)] border-[rgba(84,192,138,1)] ' +
+  'dark:bg-[rgba(5,52,28,1)] dark:border-[rgba(27,131,84,1)]';
+
+export const BADGE_NEGATIVE =
+  'inline-flex items-center gap-spacing-sm rounded-full px-spacing-md py-spacing-xs border shrink-0 ' +
+  'bg-[rgba(254,243,242,1)] border-[rgba(249,112,102,1)] ' +
+  'dark:bg-[rgba(60,18,14,1)] dark:border-[rgba(217,45,32,1)]';
+
+export const BADGE_TEXT_POSITIVE =
+  'text-text-sm font-bold whitespace-nowrap text-[rgba(27,131,84,1)]';
+
+export const BADGE_TEXT_NEGATIVE =
+  'text-text-sm font-bold whitespace-nowrap text-[rgba(217,45,32,1)]';
+
+// ─── Detail panel (StatDetailPair right section) ──────────────────────────────
+// Background/background-neutral-100, radius-16
+
+export const DETAIL_PANEL =
+  'flex flex-col gap-spacing-lg p-spacing-xl rounded-[16px] ' +
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(17,25,39,1)]';
+
+// ─── More-vertical button (StatInlineGroup) ───────────────────────────────────
+
+export const MORE_BTN =
+  'shrink-0 size-[40px] flex items-center justify-center cursor-pointer rounded-[8px] ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] ' +
+  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(56,66,80,1)] motion-feedback';
+
+// ─── Arrow-left SVG path for TrendBadge ──────────────────────────────────────
+// Mirrored from arrow-right-02 (16×16 viewBox)
+
+export const ARROW_LEFT_PATH = 'M12.667 8H3.333M7.333 4L3 8l4.333 4' as const;
+export const ARROW_VIEWBOX = '0 0 16 16' as const;

package/src/components/Number/index.ts

@@ -0,0 +1,2 @@
+export { Number } from './Number';
+export type { NumberProps, NumberType, NumberRow, StatTrend } from './Number.types';

package/src/components/NumberInput/NumberInput.tsx

@@ -0,0 +1,265 @@
+'use client';
+
+import { forwardRef, useId, useRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { NumberInputProps } from './NumberInput.types';
+import {
+  ROOT,
+  LABEL,
+  GROUP,
+  INPUT_WRAPPER_BASE,
+  INPUT_WRAPPER_DEFAULT,
+  INPUT_WRAPPER_ERROR,
+  INPUT_WRAPPER_DISABLED,
+  INPUT_WRAPPER_SIZE,
+  INPUT_WRAPPER_SPINNER_START,
+  INPUT_FIELD_BASE,
+  INPUT_TEXT_PLACEHOLDER,
+  INPUT_TEXT_FILLED,
+  INPUT_TEXT_ERROR,
+  INPUT_TEXT_DISABLED,
+  INPUT_TEXT_SIZE,
+  HELPER_ROW,
+  HELPER_ICON_BASE,
+  HELPER_ICON_DEFAULT,
+  HELPER_ICON_ERROR,
+  HELPER_ICON_DISABLED,
+  HELPER_TEXT_BASE,
+  HELPER_TEXT_DEFAULT,
+  HELPER_TEXT_ERROR,
+  HELPER_TEXT_DISABLED,
+  GROUP_DISABLED,
+} from './NumberInput.variants';
+import { InputPrefixSuffix } from '../InputPrefixSuffix';
+
+/* ── Inline help-circle icon (Figma node 2078:19165, 24×24 vp) ───── */
+function HelpCircleIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle cx="12" cy="17" r="0.5" fill="currentColor" stroke="currentColor" strokeWidth="1" />
+    </svg>
+  );
+}
+
+/* ── Clamp + step helper ─────────────────────────────────────────── */
+function clampStep(
+  raw: string,
+  delta: number,
+  step: number,
+  min: number | undefined,
+  max: number | undefined,
+): string {
+  const current = parseFloat(raw);
+  const base = Number.isNaN(current) ? 0 : current;
+  let next = Math.round((base + delta * step) * 1e10) / 1e10; // floating-point safe
+  if (min !== undefined) next = Math.max(min, next);
+  if (max !== undefined) next = Math.min(max, next);
+  return String(next);
+}
+
+/* ── Component ───────────────────────────────────────────────────── */
+export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
+  function NumberInput(
+    {
+      label,
+      size = 'lg',
+      style = 'solid',
+      spinner = false,
+      value,
+      defaultValue,
+      onChange,
+      min,
+      max,
+      step = 1,
+      error,
+      helperText,
+      showHelperIcon = true,
+      disabled = false,
+      id: idProp,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    /* ── IDs for a11y ─────────────────────────────────────────── */
+    const generatedId = useId();
+    const inputId = idProp ?? `number-input-${generatedId}`;
+    const helperId = `${inputId}-helper`;
+
+    /* ── Internal ref for uncontrolled reads ──────────────────── */
+    const inputRef = useRef<HTMLInputElement>(null);
+    const resolvedRef = (ref as React.RefObject<HTMLInputElement>) ?? inputRef;
+
+    /* ── Derived state ────────────────────────────────────────── */
+    const hasError = Boolean(error);
+    const hasHelper = Boolean(error || helperText);
+    const isControlled = value !== undefined;
+
+    /* ── Helper to read the current input value ───────────────── */
+    const getCurrentValue = (): string => {
+      if (isControlled) return String(value ?? '');
+      return resolvedRef.current?.value ?? String(defaultValue ?? '');
+    };
+
+    /* ── Increment / Decrement ────────────────────────────────── */
+    const handleDecrement = () => {
+      if (disabled) return;
+      const next = clampStep(getCurrentValue(), -1, step, min, max);
+      onChange?.(next);
+      if (!isControlled && resolvedRef.current) {
+        resolvedRef.current.value = next;
+      }
+    };
+
+    const handleIncrement = () => {
+      if (disabled) return;
+      const next = clampStep(getCurrentValue(), 1, step, min, max);
+      onChange?.(next);
+      if (!isControlled && resolvedRef.current) {
+        resolvedRef.current.value = next;
+      }
+    };
+
+    /* ── Native change ────────────────────────────────────────── */
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(e.target.value);
+    };
+
+    /* ── Class composition ────────────────────────────────────── */
+    const sizeClasses = INPUT_WRAPPER_SIZE[size];
+
+    const wrapperStateClass = disabled
+      ? INPUT_WRAPPER_DISABLED
+      : hasError
+        ? INPUT_WRAPPER_ERROR
+        : INPUT_WRAPPER_DEFAULT;
+
+    const wrapperClass = cn(
+      INPUT_WRAPPER_BASE,
+      wrapperStateClass,
+      spinner ? sizeClasses.spinner : sizeClasses.noSpinner,
+      spinner ? INPUT_WRAPPER_SPINNER_START : undefined,
+    );
+
+    const inputTextClass = cn(
+      INPUT_FIELD_BASE,
+      INPUT_TEXT_SIZE[size],
+      INPUT_TEXT_PLACEHOLDER,
+      disabled
+        ? INPUT_TEXT_DISABLED
+        : hasError
+          ? INPUT_TEXT_ERROR
+          : INPUT_TEXT_FILLED,
+    );
+
+    const helperIconClass = cn(
+      HELPER_ICON_BASE,
+      disabled
+        ? HELPER_ICON_DISABLED
+        : hasError
+          ? HELPER_ICON_ERROR
+          : HELPER_ICON_DEFAULT,
+    );
+
+    const helperTextClass = cn(
+      HELPER_TEXT_BASE,
+      disabled
+        ? HELPER_TEXT_DISABLED
+        : hasError
+          ? HELPER_TEXT_ERROR
+          : HELPER_TEXT_DEFAULT,
+    );
+
+    return (
+      <div className={cn(ROOT, className)} data-slot="number-input">
+        {/* ── Label ───────────────────────────────────────── */}
+        {label && (
+          <label htmlFor={inputId} className={LABEL}>
+            {label}
+          </label>
+        )}
+
+        {/* ── Input group ─────────────────────────────────── */}
+        <div className={cn(GROUP, disabled ? GROUP_DISABLED : undefined)}>
+          {/* Start minus button — hidden in spinner mode */}
+          {!spinner && (
+            <InputPrefixSuffix
+              iconType="minus"
+              side="start"
+              size={size}
+              style={style}
+              disabled={disabled}
+              onClick={handleDecrement}
+              aria-label="Decrement"
+              tabIndex={disabled ? -1 : 0}
+            />
+          )}
+
+          {/* Center input */}
+          <div className={wrapperClass} data-slot="number-input-field">
+            <input
+              ref={resolvedRef}
+              id={inputId}
+              type="number"
+              inputMode="numeric"
+              disabled={disabled}
+              aria-invalid={hasError || undefined}
+              aria-describedby={hasHelper ? helperId : undefined}
+              min={min}
+              max={max}
+              step={step}
+              value={isControlled ? value : undefined}
+              defaultValue={!isControlled ? defaultValue : undefined}
+              onChange={handleChange}
+              className={inputTextClass}
+              {...rest}
+            />
+          </div>
+
+          {/* End plus / arrow button */}
+          <InputPrefixSuffix
+            iconType={spinner ? 'arrow' : 'plus'}
+            side="end"
+            size={size}
+            style={style}
+            disabled={disabled}
+            onClick={spinner ? undefined : handleIncrement}
+            aria-label={spinner ? 'Expand options' : 'Increment'}
+            tabIndex={disabled ? -1 : 0}
+          />
+        </div>
+
+        {/* ── Helper / error row ──────────────────────────── */}
+        {hasHelper && (
+          <div
+            id={helperId}
+            role={hasError ? 'alert' : undefined}
+            aria-live={hasError ? 'polite' : undefined}
+            className={HELPER_ROW}
+          >
+            {showHelperIcon && <HelpCircleIcon className={helperIconClass} />}
+            <span className={helperTextClass}>{error || helperText}</span>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+NumberInput.displayName = 'NumberInput';

package/src/components/NumberInput/NumberInput.types.ts

@@ -0,0 +1,110 @@
+import type { InputHTMLAttributes } from 'react';
+
+/**
+ * Size tier — maps to Figma Large / Medium.
+ *
+ * - `'lg'` — Large (height ~40px for buttons, px-xl/py-md for input)
+ * - `'md'` — Medium (height ~32px for buttons, px-xl/py-sm for input)
+ */
+export type NumberInputSize = 'lg' | 'md';
+
+/**
+ * Visual fill style for the prefix/suffix buttons.
+ *
+ * - `'solid'`  — neutral-fill background on +/− buttons
+ * - `'subtle'` — transparent buttons; fill appears only on hover/active
+ */
+export type NumberInputStyle = 'solid' | 'subtle';
+
+export interface NumberInputProps
+  extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    'size' | 'type' | 'onChange' | 'style'
+  > {
+  /**
+   * Label text displayed above the input.
+   * Rendered as a `<label>` associated with the `<input>` via `htmlFor`.
+   */
+  label?: string;
+
+  /**
+   * Size tier.
+   * @default 'lg'
+   */
+  size?: NumberInputSize;
+
+  /**
+   * Visual fill style for the flanking +/− buttons.
+   * @default 'solid'
+   */
+  style?: NumberInputStyle;
+
+  /**
+   * When `true`, renders a single arrow (unfold-more) button on the end side
+   * instead of separate minus + plus buttons. The center input gains
+   * start-side border-radius.
+   * @default false
+   */
+  spinner?: boolean;
+
+  /**
+   * Controlled current value.
+   * Pass `''` to represent an empty/cleared field.
+   */
+  value?: string | number;
+
+  /**
+   * Uncontrolled default value.
+   */
+  defaultValue?: string | number;
+
+  /**
+   * Called with the raw string value whenever the input changes (typing or
+   * button press).
+   */
+  onChange?: (value: string) => void;
+
+  /**
+   * Minimum numeric value.
+   * Respected by the decrement button — will not go below this value.
+   */
+  min?: number;
+
+  /**
+   * Maximum numeric value.
+   * Respected by the increment button — will not go above this value.
+   */
+  max?: number;
+
+  /**
+   * Step size for increment/decrement buttons.
+   * @default 1
+   */
+  step?: number;
+
+  /**
+   * Error message string. When non-empty:
+   *   - input border turns red
+   *   - helper text below turns red and shows this message
+   *   - helper icon turns red
+   * Overrides `helperText`.
+   */
+  error?: string;
+
+  /**
+   * Helper text shown below the input. Replaced by `error` when error is set.
+   */
+  helperText?: string;
+
+  /**
+   * When `true`, shows the help-circle icon next to helper/error text.
+   * @default true
+   */
+  showHelperIcon?: boolean;
+
+  /**
+   * Disables all interaction on the entire component.
+   * @default false
+   */
+  disabled?: boolean;
+}