tekivex-ui 2.2.0 → 2.5.1

package/src/components/TkxQRCode.tsx

@@ -0,0 +1,174 @@
+import { useRef, useEffect, useMemo } from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export interface TkxQRCodeProps {
+  value: string;
+  size?: number;
+  color?: string;
+  bgColor?: string;
+  errorLevel?: 'L' | 'M' | 'Q' | 'H';
+  icon?: string;
+  bordered?: boolean;
+}
+
+// ── Hash Utility ─────────────────────────────────────────────────────────────
+
+function simpleHash(str: string): number {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) + hash + str.charCodeAt(i)) | 0;
+  }
+  return Math.abs(hash);
+}
+
+// Deterministic PRNG from seed
+function seededRandom(seed: number): () => number {
+  let s = seed;
+  return () => {
+    s = (s * 1664525 + 1013904223) | 0;
+    return ((s >>> 0) / 0xffffffff);
+  };
+}
+
+// ── Grid Generator ───────────────────────────────────────────────────────────
+
+const ERROR_DENSITY: Record<string, number> = { L: 0.38, M: 0.42, Q: 0.48, H: 0.55 };
+
+function generateGrid(value: string, gridSize: number, errorLevel: string): boolean[][] {
+  const hash = simpleHash(value);
+  const rand = seededRandom(hash);
+  const density = ERROR_DENSITY[errorLevel] ?? 0.42;
+  const grid: boolean[][] = Array.from({ length: gridSize }, () =>
+    Array.from({ length: gridSize }, () => false),
+  );
+
+  // Finder patterns (top-left, top-right, bottom-left)
+  const drawFinder = (startR: number, startC: number) => {
+    for (let r = 0; r < 7; r++) {
+      for (let c = 0; c < 7; c++) {
+        const isEdge = r === 0 || r === 6 || c === 0 || c === 6;
+        const isInner = r >= 2 && r <= 4 && c >= 2 && c <= 4;
+        grid[startR + r][startC + c] = isEdge || isInner;
+      }
+    }
+  };
+
+  drawFinder(0, 0);
+  drawFinder(0, gridSize - 7);
+  drawFinder(gridSize - 7, 0);
+
+  // Timing patterns
+  for (let i = 7; i < gridSize - 7; i++) {
+    grid[6][i] = i % 2 === 0;
+    grid[i][6] = i % 2 === 0;
+  }
+
+  // Data area: fill with deterministic pseudo-random pattern
+  for (let r = 0; r < gridSize; r++) {
+    for (let c = 0; c < gridSize; c++) {
+      const inFinder =
+        (r < 8 && c < 8) ||
+        (r < 8 && c >= gridSize - 8) ||
+        (r >= gridSize - 8 && c < 8);
+      const isTiming = r === 6 || c === 6;
+      if (inFinder || isTiming) continue;
+      grid[r][c] = rand() < density;
+    }
+  }
+
+  return grid;
+}
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function TkxQRCode({
+  value,
+  size = 160,
+  color,
+  bgColor,
+  errorLevel = 'M',
+  icon,
+  bordered = true,
+}: TkxQRCodeProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const safeValue = sanitizeString(value);
+  const fg = color ?? theme.text;
+  const bg = bgColor ?? theme.surface;
+
+  const gridSize = 25;
+  const grid = useMemo(
+    () => generateGrid(safeValue, gridSize, errorLevel),
+    [safeValue, errorLevel],
+  );
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = size * dpr;
+    canvas.height = size * dpr;
+    ctx.scale(dpr, dpr);
+
+    const cellSize = size / gridSize;
+
+    // Background
+    ctx.fillStyle = bg;
+    ctx.fillRect(0, 0, size, size);
+
+    // Cells
+    ctx.fillStyle = fg;
+    for (let r = 0; r < gridSize; r++) {
+      for (let c = 0; c < gridSize; c++) {
+        if (grid[r][c]) {
+          ctx.fillRect(c * cellSize, r * cellSize, cellSize, cellSize);
+        }
+      }
+    }
+
+    // Center icon area (clear a zone for icon)
+    if (icon) {
+      const iconSize = size * 0.22;
+      const offset = (size - iconSize) / 2;
+      ctx.fillStyle = bg;
+      ctx.fillRect(offset - 2, offset - 2, iconSize + 4, iconSize + 4);
+
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.onload = () => {
+        ctx.drawImage(img, offset, offset, iconSize, iconSize);
+      };
+      img.src = sanitizeString(icon);
+    }
+  }, [grid, size, fg, bg, icon]);
+
+  return (
+    <div
+      role="img"
+      aria-label={`QR code for: ${safeValue}`}
+      className={tkx('inline-block rounded-lg')}
+      style={{
+        padding: bordered ? 12 : 0,
+        backgroundColor: bordered ? bg : 'transparent',
+        border: bordered ? `1px solid ${theme.border}` : 'none',
+        lineHeight: 0,
+        animation: reducedMotion ? 'none' : 'tkxFadeIn 0.2s ease',
+      }}
+    >
+      <canvas
+        ref={canvasRef}
+        aria-hidden="true"
+        style={{ width: size, height: size, display: 'block' }}
+      />
+    </div>
+  );
+}

package/src/components/TkxResult.tsx

@@ -0,0 +1,128 @@
+import { type ReactNode } from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export type ResultStatus = 'success' | 'error' | 'warning' | 'info' | '404' | '403' | '500';
+
+export interface TkxResultProps {
+  status: ResultStatus;
+  title: string;
+  subTitle?: string;
+  icon?: ReactNode;
+  extra?: ReactNode;
+}
+
+// ── Status Icons (SVG) ──────────────────────────────────────────────────────
+
+const STATUS_ICONS: Record<ResultStatus, (color: string) => ReactNode> = {
+  success: (c) => (
+    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
+      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
+      <path d="M22 37l9 9 19-19" stroke={c} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  error: (c) => (
+    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
+      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
+      <path d="M26 26l20 20M46 26L26 46" stroke={c} strokeWidth="4" strokeLinecap="round" />
+    </svg>
+  ),
+  warning: (c) => (
+    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
+      <path d="M36 6L4 64h64L36 6z" stroke={c} strokeWidth="3" fill={`${c}18`} />
+      <path d="M36 30v16" stroke={c} strokeWidth="4" strokeLinecap="round" />
+      <circle cx="36" cy="54" r="2.5" fill={c} />
+    </svg>
+  ),
+  info: (c) => (
+    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
+      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
+      <path d="M36 32v18" stroke={c} strokeWidth="4" strokeLinecap="round" />
+      <circle cx="36" cy="22" r="2.5" fill={c} />
+    </svg>
+  ),
+  '404': (c) => (
+    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
+      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
+      <text x="36" y="44" textAnchor="middle" fontSize="22" fontWeight="bold" fill={c}>404</text>
+    </svg>
+  ),
+  '403': (c) => (
+    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
+      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
+      <path d="M28 30h16v16H28z" stroke={c} strokeWidth="3" fill="none" />
+      <path d="M32 30v-4a4 4 0 018 0v4" stroke={c} strokeWidth="3" fill="none" />
+    </svg>
+  ),
+  '500': (c) => (
+    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
+      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
+      <text x="36" y="44" textAnchor="middle" fontSize="22" fontWeight="bold" fill={c}>500</text>
+    </svg>
+  ),
+};
+
+// ── Color Mapping ────────────────────────────────────────────────────────────
+
+function getStatusColor(status: ResultStatus, theme: ReturnType<typeof useTheme>): string {
+  switch (status) {
+    case 'success': return theme.success;
+    case 'error':
+    case '500': return theme.danger;
+    case 'warning': return theme.warning;
+    case 'info': return theme.info;
+    case '404':
+    case '403': return theme.textMuted;
+  }
+}
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function TkxResult({ status, title, subTitle, icon, extra }: TkxResultProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const accentColor = getStatusColor(status, theme);
+  const safeTitle = sanitizeString(title);
+  const safeSubTitle = subTitle ? sanitizeString(subTitle) : undefined;
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className={tkx('flex flex-col items-center text-center px-6 py-12 font-sans')}
+      style={{
+        animation: reducedMotion ? 'none' : 'tkxFadeIn 0.3s ease',
+      }}
+    >
+      <div className={tkx('mb-6')}>
+        {icon ?? STATUS_ICONS[status](accentColor)}
+      </div>
+
+      <h2
+        className={tkx('text-xl font-semibold m-0 mb-2')}
+        style={{ color: theme.text }}
+      >
+        {safeTitle}
+      </h2>
+
+      {safeSubTitle && (
+        <p
+          className={tkx('text-sm m-0 mb-6 max-w-md leading-relaxed')}
+          style={{ color: theme.textMuted }}
+        >
+          {safeSubTitle}
+        </p>
+      )}
+
+      {extra && (
+        <div className={tkx('flex items-center gap-3 mt-4')}>
+          {extra}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/TkxSegmented.tsx

@@ -0,0 +1,169 @@
+import { type ReactNode, useState, useRef, useEffect, useCallback } from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export interface SegmentedOption {
+  value: string;
+  label: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface TkxSegmentedProps {
+  options: SegmentedOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  size?: 'sm' | 'md' | 'lg';
+  block?: boolean;
+}
+
+// ── Size Map ─────────────────────────────────────────────────────────────────
+
+const SIZE_MAP = {
+  sm: { height: 28, fontSize: 12, px: 10 },
+  md: { height: 36, fontSize: 14, px: 16 },
+  lg: { height: 44, fontSize: 16, px: 20 },
+} as const;
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function TkxSegmented({
+  options,
+  value,
+  onChange,
+  size = 'md',
+  block = false,
+}: TkxSegmentedProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [activeIndex, setActiveIndex] = useState(() =>
+    Math.max(0, options.findIndex((o) => o.value === value)),
+  );
+  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({});
+  const dims = SIZE_MAP[size];
+
+  // Sync external value
+  useEffect(() => {
+    const idx = options.findIndex((o) => o.value === value);
+    if (idx >= 0) setActiveIndex(idx);
+  }, [value, options]);
+
+  // Sliding indicator position
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const buttons = container.querySelectorAll<HTMLButtonElement>('[data-seg-btn]');
+    const btn = buttons[activeIndex];
+    if (!btn) return;
+    setIndicatorStyle({
+      left: btn.offsetLeft,
+      width: btn.offsetWidth,
+      height: btn.offsetHeight,
+      transition: reducedMotion ? 'none' : 'left 0.2s ease, width 0.2s ease',
+    });
+  }, [activeIndex, options, reducedMotion]);
+
+  const handleSelect = useCallback(
+    (idx: number) => {
+      const opt = options[idx];
+      if (!opt || opt.disabled) return;
+      setActiveIndex(idx);
+      onChange?.(opt.value);
+    },
+    [options, onChange],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      let next = activeIndex;
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        next = (activeIndex + 1) % options.length;
+        while (options[next]?.disabled && next !== activeIndex) {
+          next = (next + 1) % options.length;
+        }
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        next = (activeIndex - 1 + options.length) % options.length;
+        while (options[next]?.disabled && next !== activeIndex) {
+          next = (next - 1 + options.length) % options.length;
+        }
+      }
+      if (next !== activeIndex) {
+        handleSelect(next);
+        const container = containerRef.current;
+        const buttons = container?.querySelectorAll<HTMLButtonElement>('[data-seg-btn]');
+        buttons?.[next]?.focus();
+      }
+    },
+    [activeIndex, options, handleSelect],
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      role="radiogroup"
+      aria-label="Segmented control"
+      className={tkx('relative inline-flex items-center rounded-lg p-1')}
+      style={{
+        backgroundColor: theme.surfaceAlt,
+        border: `1px solid ${theme.border}`,
+        width: block ? '100%' : undefined,
+      }}
+      onKeyDown={handleKeyDown}
+    >
+      {/* Sliding indicator */}
+      <div
+        aria-hidden="true"
+        className={tkx('absolute top-1 rounded-md')}
+        style={{
+          ...indicatorStyle,
+          backgroundColor: theme.surface,
+          boxShadow: `0 1px 3px ${theme.border}`,
+          zIndex: 0,
+        }}
+      />
+
+      {options.map((opt, idx) => {
+        const isActive = idx === activeIndex;
+        const safeLabel = sanitizeString(opt.label);
+        return (
+          <button
+            key={opt.value}
+            data-seg-btn
+            type="button"
+            role="radio"
+            aria-checked={isActive}
+            aria-disabled={opt.disabled || undefined}
+            disabled={opt.disabled}
+            tabIndex={isActive ? 0 : -1}
+            className={tkx(
+              'relative z-10 flex items-center justify-center gap-1 rounded-md border-0 cursor-pointer',
+              'font-sans whitespace-nowrap select-none',
+            )}
+            style={{
+              height: dims.height,
+              fontSize: dims.fontSize,
+              padding: `0 ${dims.px}px`,
+              flex: block ? 1 : undefined,
+              color: isActive ? theme.text : theme.textMuted,
+              backgroundColor: 'transparent',
+              opacity: opt.disabled ? 0.4 : 1,
+              fontWeight: isActive ? 600 : 400,
+              transition: reducedMotion ? 'none' : 'color 0.15s ease',
+            }}
+            onClick={() => handleSelect(idx)}
+          >
+            {opt.icon && <span aria-hidden="true">{opt.icon}</span>}
+            {safeLabel}
+          </button>
+        );
+      })}
+    </div>
+  );
+}