sdaia-ui 1.0.1 → 1.0.2

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

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

@@ -1,94 +0,0 @@
-/**
- * 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

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

package/src/components/NumberInput/NumberInput.tsx

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

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