tekivex-ui 2.0.2 → 2.2.0

package/src/components/TkxSpin.tsx

@@ -0,0 +1,261 @@
+import {
+  useState,
+  useEffect,
+  useRef,
+  type ReactNode,
+  type CSSProperties,
+  createElement,
+} from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+
+// ── Interface ───────────────────────────────────────────────────────────────
+
+export interface TkxSpinProps {
+  spinning?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  tip?: string;
+  indicator?: ReactNode;
+  children?: ReactNode;
+  fullscreen?: boolean;
+  delay?: number;
+  style?: CSSProperties;
+}
+
+// ── Size Config ─────────────────────────────────────────────────────────────
+
+const SIZE_MAP: Record<string, { dimension: number; borderWidth: number; fontSize: string }> = {
+  sm: { dimension: 20, borderWidth: 2, fontSize: '0.75rem' },
+  md: { dimension: 32, borderWidth: 3, fontSize: '0.875rem' },
+  lg: { dimension: 48, borderWidth: 4, fontSize: '1rem' },
+};
+
+// ── Keyframes Injection ─────────────────────────────────────────────────────
+
+let stylesInjected = false;
+
+function injectSpinStyles() {
+  if (stylesInjected || typeof document === 'undefined') return;
+  stylesInjected = true;
+  const styleEl = document.createElement('style');
+  styleEl.id = 'tkx-spin-styles';
+  styleEl.textContent = `
+    @keyframes tkx-spin-rotate {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  `;
+  document.head.appendChild(styleEl);
+}
+
+// ── Static Indicator (reduced motion) ───────────────────────────────────────
+
+function StaticIndicator({ size, color }: { size: number; color: string }) {
+  return createElement(
+    'svg',
+    {
+      width: size,
+      height: size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      role: 'img',
+      'aria-label': 'Loading',
+    },
+    createElement('circle', {
+      cx: 12,
+      cy: 12,
+      r: 10,
+      stroke: `${color}33`,
+      strokeWidth: 2.5,
+      fill: 'none',
+    }),
+    createElement('path', {
+      d: 'M12 2a10 10 0 0 1 10 10',
+      stroke: color,
+      strokeWidth: 2.5,
+      strokeLinecap: 'round',
+      fill: 'none',
+    }),
+  );
+}
+
+// ── Default Spinner ─────────────────────────────────────────────────────────
+
+function DefaultSpinner({
+  size,
+  borderWidth,
+  color,
+  reducedMotion,
+}: {
+  size: number;
+  borderWidth: number;
+  color: string;
+  reducedMotion: boolean;
+}) {
+  if (reducedMotion) {
+    return createElement(StaticIndicator, { size, color });
+  }
+
+  injectSpinStyles();
+
+  return createElement('div', {
+    role: 'img',
+    'aria-label': 'Loading',
+    style: {
+      width: `${size}px`,
+      height: `${size}px`,
+      border: `${borderWidth}px solid ${color}33`,
+      borderTopColor: color,
+      borderRadius: '50%',
+      animation: 'tkx-spin-rotate 0.8s linear infinite',
+      boxSizing: 'border-box',
+    },
+  });
+}
+
+// ── TkxSpin ─────────────────────────────────────────────────────────────────
+
+export function TkxSpin({
+  spinning = true,
+  size = 'md',
+  tip,
+  indicator,
+  children,
+  fullscreen = false,
+  delay = 0,
+  style,
+}: TkxSpinProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const [visible, setVisible] = useState(delay === 0 && spinning);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (spinning && delay > 0) {
+      timerRef.current = setTimeout(() => setVisible(true), delay);
+    } else {
+      setVisible(spinning);
+    }
+    return () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    };
+  }, [spinning, delay]);
+
+  if (!visible) {
+    return children ? createElement('div', { style }, children) : null;
+  }
+
+  const sizeConfig = SIZE_MAP[size];
+  const safeTip = tip ? sanitizeString(tip) : undefined;
+
+  const spinnerContent = createElement(
+    'div',
+    {
+      role: 'status',
+      'aria-live': 'polite',
+      'aria-label': safeTip ?? 'Loading',
+      style: {
+        display: 'flex',
+        flexDirection: 'column' as const,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '8px',
+      },
+    },
+    indicator ??
+      createElement(DefaultSpinner, {
+        size: sizeConfig.dimension,
+        borderWidth: sizeConfig.borderWidth,
+        color: theme.primary,
+        reducedMotion,
+      }),
+    safeTip &&
+      createElement(
+        'span',
+        {
+          style: {
+            color: theme.primary,
+            fontSize: sizeConfig.fontSize,
+            marginTop: '4px',
+          },
+        },
+        safeTip,
+      ),
+  );
+
+  // Fullscreen overlay
+  if (fullscreen) {
+    return createElement(
+      'div',
+      {
+        style: {
+          position: 'fixed',
+          inset: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: `${theme.bg}cc`,
+          zIndex: 9999,
+          ...style,
+        },
+      },
+      spinnerContent,
+    );
+  }
+
+  // Wrapper mode: overlay on children
+  if (children) {
+    return createElement(
+      'div',
+      {
+        style: {
+          position: 'relative',
+          ...style,
+        },
+      },
+      createElement(
+        'div',
+        {
+          style: {
+            filter: 'blur(1px)',
+            opacity: 0.5,
+            pointerEvents: 'none',
+            userSelect: 'none',
+            transition: reducedMotion ? 'none' : 'opacity 0.2s, filter 0.2s',
+          },
+        },
+        children,
+      ),
+      createElement(
+        'div',
+        {
+          style: {
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: `${theme.bg}66`,
+            borderRadius: '4px',
+          },
+        },
+        spinnerContent,
+      ),
+    );
+  }
+
+  // Standalone spinner
+  return createElement(
+    'div',
+    {
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...style,
+      },
+    },
+    spinnerContent,
+  );
+}

package/src/components/TkxStatistic.tsx

@@ -0,0 +1,261 @@
+import { useState, useEffect, useRef, type ReactNode, type CSSProperties, createElement } from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+
+// ── Interfaces ──────────────────────────────────────────────────────────────
+
+export interface TkxStatisticProps {
+  title: string; value: number | string; prefix?: ReactNode; suffix?: ReactNode;
+  precision?: number; groupSeparator?: string; valueStyle?: CSSProperties;
+  loading?: boolean; trend?: 'up' | 'down'; trendValue?: string; style?: CSSProperties;
+}
+
+export interface TkxCountdownProps {
+  title: string; value: number; format?: string; onFinish?: () => void;
+  prefix?: ReactNode; suffix?: ReactNode; style?: CSSProperties;
+}
+
+// ── Number Formatting ───────────────────────────────────────────────────────
+
+function formatNumber(value: number | string, precision?: number, separator = ','): string {
+  if (typeof value === 'string') return value;
+
+  const fixed = precision !== undefined ? value.toFixed(precision) : String(value);
+  const [intPart, decPart] = fixed.split('.');
+  const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+  return decPart !== undefined ? `${grouped}.${decPart}` : grouped;
+}
+
+// ── Countdown Formatting ────────────────────────────────────────────────────
+
+function formatCountdown(ms: number, fmt: string): string {
+  if (ms <= 0) return fmt.replace(/DD?/g, '0').replace(/HH?/g, '00').replace(/mm?/g, '00').replace(/ss?/g, '00');
+  const t = Math.floor(ms / 1000);
+  const d = Math.floor(t / 86400), h = Math.floor((t % 86400) / 3600);
+  const min = Math.floor((t % 3600) / 60), s = t % 60;
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return fmt.replace(/DD/g, pad(d)).replace(/D/g, String(d))
+    .replace(/HH/g, pad(h)).replace(/H/g, String(h))
+    .replace(/mm/g, pad(min)).replace(/m/g, String(min))
+    .replace(/ss/g, pad(s)).replace(/s/g, String(s));
+}
+
+// ── Trend Arrow ─────────────────────────────────────────────────────────────
+
+function TrendArrow({ direction, color }: { direction: 'up' | 'down'; color: string }) {
+  const d = direction === 'up' ? 'M6 10 L10 4 L14 10' : 'M6 4 L10 10 L14 4';
+  return createElement('svg', {
+    width: 16, height: 14, viewBox: '0 0 20 14', fill: 'none',
+    'aria-hidden': 'true', style: { display: 'inline-block', verticalAlign: 'middle' },
+  }, createElement('path', {
+    d, stroke: color, strokeWidth: 2.5, strokeLinecap: 'round', strokeLinejoin: 'round', fill: 'none',
+  }));
+}
+
+// ── Loading Skeleton ────────────────────────────────────────────────────────
+
+let skeletonInjected = false;
+function injectSkeletonStyles() {
+  if (skeletonInjected || typeof document === 'undefined') return;
+  skeletonInjected = true;
+  const el = document.createElement('style');
+  el.id = 'tkx-statistic-skeleton';
+  el.textContent = '@keyframes tkx-stat-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}';
+  document.head.appendChild(el);
+}
+
+function Skeleton({ w, h, alt, bdr, rm }: { w: string; h: string; alt: string; bdr: string; rm: boolean }) {
+  if (!rm) injectSkeletonStyles();
+  return createElement('div', { 'aria-hidden': 'true', style: {
+    width: w, height: h, borderRadius: '4px',
+    background: rm ? alt : `linear-gradient(90deg, ${alt} 25%, ${bdr} 50%, ${alt} 75%)`,
+    backgroundSize: '200% 100%', animation: rm ? 'none' : 'tkx-stat-shimmer 1.5s ease-in-out infinite',
+  }});
+}
+
+// ── TkxStatistic ────────────────────────────────────────────────────────────
+
+export function TkxStatistic({
+  title,
+  value,
+  prefix,
+  suffix,
+  precision,
+  groupSeparator = ',',
+  valueStyle,
+  loading = false,
+  trend,
+  trendValue,
+  style,
+}: TkxStatisticProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const safeTitle = sanitizeString(title);
+  const safeTrendValue = trendValue ? sanitizeString(trendValue) : undefined;
+
+  const trendColor = trend === 'up' ? theme.success : trend === 'down' ? theme.danger : undefined;
+
+  return createElement(
+    'div',
+    {
+      style: {
+        display: 'flex',
+        flexDirection: 'column' as const,
+        gap: '4px',
+        ...style,
+      },
+    },
+    // Title
+    createElement(
+      'div',
+      {
+        style: {
+          color: theme.textMuted,
+          fontSize: '0.875rem',
+          lineHeight: '1.4',
+        },
+      },
+      safeTitle,
+    ),
+    // Value row
+    loading
+      ? createElement(Skeleton, { w: '120px', h: '32px', alt: theme.surfaceAlt, bdr: theme.border, rm: reducedMotion })
+      : createElement(
+          'div',
+          {
+            style: {
+              display: 'flex',
+              alignItems: 'baseline',
+              gap: '4px',
+              fontSize: '1.75rem',
+              fontWeight: 700,
+              lineHeight: '1.2',
+              color: theme.text,
+              fontVariantNumeric: 'tabular-nums',
+              ...valueStyle,
+            },
+          },
+          prefix &&
+            createElement(
+              'span',
+              { style: { fontSize: '0.75em', fontWeight: 400 } },
+              prefix,
+            ),
+          createElement('span', null, formatNumber(value, precision, groupSeparator)),
+          suffix &&
+            createElement(
+              'span',
+              { style: { fontSize: '0.6em', fontWeight: 400, color: theme.textMuted } },
+              suffix,
+            ),
+        ),
+    // Trend line
+    trend &&
+      createElement(
+        'div',
+        {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+            fontSize: '0.8125rem',
+            color: trendColor,
+            marginTop: '2px',
+          },
+        },
+        createElement(TrendArrow, { direction: trend, color: trendColor! }),
+        safeTrendValue &&
+          createElement('span', null, safeTrendValue),
+      ),
+  );
+}
+
+// ── TkxCountdown ────────────────────────────────────────────────────────────
+
+export function TkxCountdown({
+  title,
+  value,
+  format = 'HH:mm:ss',
+  onFinish,
+  prefix,
+  suffix,
+  style,
+}: TkxCountdownProps) {
+  const theme = useTheme();
+  const safeTitle = sanitizeString(title);
+  const onFinishRef = useRef(onFinish);
+  onFinishRef.current = onFinish;
+  const finishedRef = useRef(false);
+
+  const [remaining, setRemaining] = useState(() => Math.max(0, value - Date.now()));
+
+  useEffect(() => {
+    finishedRef.current = false;
+    const tick = () => {
+      const diff = Math.max(0, value - Date.now());
+      setRemaining(diff);
+      if (diff <= 0 && !finishedRef.current) {
+        finishedRef.current = true;
+        onFinishRef.current?.();
+      }
+    };
+
+    tick();
+    const id = setInterval(tick, 1000);
+    return () => clearInterval(id);
+  }, [value]);
+
+  const display = formatCountdown(remaining, format);
+
+  return createElement(
+    'div',
+    {
+      style: {
+        display: 'flex',
+        flexDirection: 'column' as const,
+        gap: '4px',
+        ...style,
+      },
+    },
+    createElement(
+      'div',
+      {
+        style: {
+          color: theme.textMuted,
+          fontSize: '0.875rem',
+          lineHeight: '1.4',
+        },
+      },
+      safeTitle,
+    ),
+    createElement(
+      'div',
+      {
+        style: {
+          display: 'flex',
+          alignItems: 'baseline',
+          gap: '4px',
+          fontSize: '1.75rem',
+          fontWeight: 700,
+          lineHeight: '1.2',
+          color: remaining <= 0 ? theme.danger : theme.text,
+          fontVariantNumeric: 'tabular-nums',
+        },
+      },
+      prefix &&
+        createElement(
+          'span',
+          { style: { fontSize: '0.75em', fontWeight: 400 } },
+          prefix,
+        ),
+      createElement('span', null, display),
+      suffix &&
+        createElement(
+          'span',
+          { style: { fontSize: '0.6em', fontWeight: 400, color: theme.textMuted } },
+          suffix,
+        ),
+    ),
+  );
+}