tekivex-ui 2.5.15 → 2.6.0

package/src/components/TkxPopover.tsx

@@ -1,297 +0,0 @@
-'use client';
-
-import {
-  useState,
-  useRef,
-  useEffect,
-  useCallback,
-  useId,
-  type ReactNode,
-  type CSSProperties,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { useTheme } from '../themes';
-import { useReducedMotion, useEscapeKey, useClickOutside } from '../hooks';
-import { tkx } from '../engine/tkx';
-
-// ── Types ─────────────────────────────────────────────────────────────────────
-
-export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
-
-export interface TkxPopoverProps {
-  trigger: ReactNode;
-  content: ReactNode;
-  placement?: PopoverPlacement;
-  isOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  closeOnClickOutside?: boolean;
-  className?: string;
-  style?: CSSProperties;
-}
-
-// ── Arrow dimensions ────────────────────────────────────────────────────────
-
-const ARROW_SIZE = 8;
-const GAP = 8;
-
-// ── Position calculator ─────────────────────────────────────────────────────
-
-interface PopoverPosition {
-  top: number;
-  left: number;
-  arrowStyle: CSSProperties;
-  resolvedPlacement: PopoverPlacement;
-}
-
-function calcPosition(
-  triggerRect: DOMRect,
-  popoverEl: HTMLElement,
-  placement: PopoverPlacement,
-): PopoverPosition {
-  const popRect = popoverEl.getBoundingClientRect();
-  const scrollX = window.scrollX;
-  const scrollY = window.scrollY;
-
-  const viewW = window.innerWidth;
-  const viewH = window.innerHeight;
-
-  let top = 0;
-  let left = 0;
-  let resolved = placement;
-
-  // Attempt requested placement, flip if insufficient space
-  const fits = {
-    top: triggerRect.top - popRect.height - GAP - ARROW_SIZE > 0,
-    bottom: triggerRect.bottom + popRect.height + GAP + ARROW_SIZE < viewH,
-    left: triggerRect.left - popRect.width - GAP - ARROW_SIZE > 0,
-    right: triggerRect.right + popRect.width + GAP + ARROW_SIZE < viewW,
-  };
-
-  if (!fits[placement]) {
-    const flip: Record<PopoverPlacement, PopoverPlacement> = {
-      top: 'bottom',
-      bottom: 'top',
-      left: 'right',
-      right: 'left',
-    };
-    if (fits[flip[placement]]) resolved = flip[placement];
-  }
-
-  switch (resolved) {
-    case 'top':
-      top = triggerRect.top + scrollY - popRect.height - GAP - ARROW_SIZE;
-      left = triggerRect.left + scrollX + triggerRect.width / 2 - popRect.width / 2;
-      break;
-    case 'bottom':
-      top = triggerRect.bottom + scrollY + GAP + ARROW_SIZE;
-      left = triggerRect.left + scrollX + triggerRect.width / 2 - popRect.width / 2;
-      break;
-    case 'left':
-      top = triggerRect.top + scrollY + triggerRect.height / 2 - popRect.height / 2;
-      left = triggerRect.left + scrollX - popRect.width - GAP - ARROW_SIZE;
-      break;
-    case 'right':
-      top = triggerRect.top + scrollY + triggerRect.height / 2 - popRect.height / 2;
-      left = triggerRect.right + scrollX + GAP + ARROW_SIZE;
-      break;
-  }
-
-  // Clamp to viewport
-  left = Math.max(8, Math.min(left, viewW + scrollX - popRect.width - 8));
-  top = Math.max(8, Math.min(top, viewH + scrollY - popRect.height - 8));
-
-  // Arrow style
-  const arrowStyle: CSSProperties = {
-    position: 'absolute',
-    width: 0,
-    height: 0,
-    borderStyle: 'solid',
-    borderWidth: ARROW_SIZE,
-  };
-
-  switch (resolved) {
-    case 'top':
-      Object.assign(arrowStyle, {
-        bottom: -ARROW_SIZE * 2,
-        left: '50%',
-        transform: 'translateX(-50%)',
-        borderColor: 'var(--tkx-popover-bg) transparent transparent transparent',
-      });
-      break;
-    case 'bottom':
-      Object.assign(arrowStyle, {
-        top: -ARROW_SIZE * 2,
-        left: '50%',
-        transform: 'translateX(-50%)',
-        borderColor: 'transparent transparent var(--tkx-popover-bg) transparent',
-      });
-      break;
-    case 'left':
-      Object.assign(arrowStyle, {
-        right: -ARROW_SIZE * 2,
-        top: '50%',
-        transform: 'translateY(-50%)',
-        borderColor: 'transparent transparent transparent var(--tkx-popover-bg)',
-      });
-      break;
-    case 'right':
-      Object.assign(arrowStyle, {
-        left: -ARROW_SIZE * 2,
-        top: '50%',
-        transform: 'translateY(-50%)',
-        borderColor: 'transparent var(--tkx-popover-bg) transparent transparent',
-      });
-      break;
-  }
-
-  return { top, left, arrowStyle, resolvedPlacement: resolved };
-}
-
-// ── Component ───────────────────────────────────────────────────────────────
-
-export function TkxPopover({
-  trigger,
-  content,
-  placement = 'bottom',
-  isOpen: controlledOpen,
-  onOpenChange,
-  closeOnClickOutside = true,
-  className,
-  style,
-}: TkxPopoverProps) {
-  const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const popoverId = useId();
-
-  const isControlled = controlledOpen !== undefined;
-  const [internalOpen, setInternalOpen] = useState(false);
-  const open = isControlled ? controlledOpen : internalOpen;
-
-  const triggerRef = useRef<HTMLDivElement>(null);
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
-  const [position, setPosition] = useState<PopoverPosition | null>(null);
-
-  const setOpen = useCallback(
-    (value: boolean) => {
-      if (!isControlled) setInternalOpen(value);
-      onOpenChange?.(value);
-    },
-    [isControlled, onOpenChange],
-  );
-
-  const close = useCallback(() => setOpen(false), [setOpen]);
-  const toggle = useCallback(() => setOpen(!open), [setOpen, open]);
-
-  useEscapeKey(close, open);
-
-  // Click outside
-  useEffect(() => {
-    if (!open || !closeOnClickOutside) return;
-    const handler = (e: PointerEvent) => {
-      const target = e.target as Node;
-      if (triggerRef.current?.contains(target)) return;
-      if (popoverRef.current?.contains(target)) return;
-      close();
-    };
-    document.addEventListener('pointerdown', handler);
-    return () => document.removeEventListener('pointerdown', handler);
-  }, [open, closeOnClickOutside, close]);
-
-  // Calculate position
-  useEffect(() => {
-    if (!open || !triggerRef.current) return;
-
-    const updatePosition = () => {
-      if (!triggerRef.current || !popoverRef.current) return;
-      const triggerRect = triggerRef.current.getBoundingClientRect();
-      setPosition(calcPosition(triggerRect, popoverRef.current, placement));
-    };
-
-    // Initial calc after portal mount
-    requestAnimationFrame(updatePosition);
-
-    window.addEventListener('scroll', updatePosition, true);
-    window.addEventListener('resize', updatePosition);
-
-    return () => {
-      window.removeEventListener('scroll', updatePosition, true);
-      window.removeEventListener('resize', updatePosition);
-    };
-  }, [open, placement]);
-
-  const animationStyle: CSSProperties = reducedMotion
-    ? { opacity: 1 }
-    : {
-        animation: 'tkxPopoverFadeIn 150ms ease forwards',
-        opacity: 0,
-      };
-
-  const portalContent = open && typeof document !== 'undefined' ? (
-    createPortal(
-      <div
-        ref={popoverRef}
-        id={popoverId}
-        role="dialog"
-        aria-modal="false"
-        className={tkx(
-          'absolute z-[9100] rounded-lg font-sans',
-          className ?? '',
-        )}
-        style={{
-          '--tkx-popover-bg': theme.surface,
-          top: position?.top ?? -9999,
-          left: position?.left ?? -9999,
-          backgroundColor: theme.surface,
-          border: `1px solid ${theme.border}`,
-          boxShadow: `0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1)`,
-          minWidth: 200,
-          maxWidth: 420,
-          padding: '12px 16px',
-          color: theme.text,
-          ...animationStyle,
-          ...style,
-        } as CSSProperties}
-      >
-        {/* Arrow */}
-        {position && <span style={position.arrowStyle} aria-hidden="true" />}
-        {content}
-      </div>,
-      document.body,
-    )
-  ) : null;
-
-  return (
-    <>
-      <div
-        ref={triggerRef}
-        className={tkx('inline-flex')}
-        onClick={toggle}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            toggle();
-          }
-        }}
-        aria-expanded={open}
-        aria-haspopup="dialog"
-        aria-controls={open ? popoverId : undefined}
-      >
-        {trigger}
-      </div>
-      {portalContent}
-      {/* Inject animation keyframes */}
-      {open && !reducedMotion && (
-        <style>{`
-          @keyframes tkxPopoverFadeIn {
-            from { opacity: 0; transform: translateY(4px); }
-            to { opacity: 1; transform: translateY(0); }
-          }
-        `}</style>
-      )}
-    </>
-  );
-}
-
-export default TkxPopover;

package/src/components/TkxProgress.tsx

@@ -1,114 +0,0 @@
-'use client';
-
-import { forwardRef, type HTMLAttributes } from 'react';
-import { useTheme } from '../themes';
-import { useReducedMotion } from '../hooks';
-import { validateProps } from '../engine/security';
-import { tkx, cx } from '../engine/tkx';
-
-export type ProgressVariant = 'linear' | 'circular';
-export type ProgressSize = 'sm' | 'md' | 'lg';
-
-export interface TkxProgressProps extends HTMLAttributes<HTMLDivElement> {
-  value?: number;
-  variant?: ProgressVariant;
-  size?: ProgressSize;
-  label?: string;
-  showValue?: boolean;
-  color?: string;
-}
-
-const LINEAR_H: Record<ProgressSize, string> = { sm: '4px', md: '8px', lg: '12px' };
-const CIRCLE_PX: Record<ProgressSize, number> = { sm: 32, md: 48, lg: 64 };
-
-export const TkxProgress = forwardRef<HTMLDivElement, TkxProgressProps>(
-  ({ value, variant = 'linear', size = 'md', label, showValue, color, className, style, ...rest }, ref) => {
-    const theme = useTheme();
-    const reducedMotion = useReducedMotion();
-    const fillColor = color ?? theme.primary;
-    const isIndeterminate = value === undefined;
-    const clamped = value !== undefined ? Math.min(100, Math.max(0, value)) : 0;
-
-    if (value !== undefined) {
-      const { errors } = validateProps({ value }, { value: { type: 'number', min: 0, max: 100 } });
-      if (errors.length > 0) {
-        // eslint-disable-next-line no-console
-        console.warn('[TkxProgress]', errors.join(', '));
-      }
-    }
-
-    if (variant === 'circular') {
-      const px = CIRCLE_PX[size];
-      const strokeW = size === 'sm' ? 3 : size === 'md' ? 4 : 5;
-      const r = (px - strokeW * 2) / 2;
-      const circ = 2 * Math.PI * r;
-      const offset = isIndeterminate ? 0 : circ - (clamped / 100) * circ;
-
-      return (
-        <div
-          ref={ref}
-          role="progressbar"
-          aria-valuemin={0}
-          aria-valuemax={100}
-          aria-valuenow={isIndeterminate ? undefined : clamped}
-          aria-label={label ?? (isIndeterminate ? 'Loading' : `${clamped}%`)}
-          className={cx(tkx('inline-flex flex-col items-center gap-1'), className)}
-          style={style}
-        >
-          <svg width={px} height={px} viewBox={`0 0 ${px} ${px}`} aria-hidden="true">
-            <circle cx={px / 2} cy={px / 2} r={r} fill="none" stroke={theme.border} strokeWidth={strokeW} />
-            <circle
-              cx={px / 2} cy={px / 2} r={r} fill="none"
-              stroke={fillColor} strokeWidth={strokeW} strokeLinecap="round"
-              strokeDasharray={circ} strokeDashoffset={offset}
-              transform={`rotate(-90 ${px / 2} ${px / 2})`}
-              style={{
-                transition: reducedMotion ? 'none' : 'stroke-dashoffset 300ms ease',
-                animation: isIndeterminate && !reducedMotion ? 'tkx-spin 1s linear infinite' : undefined,
-              }}
-            />
-          </svg>
-          {showValue && !isIndeterminate && (
-            <span className={tkx('text-xs')} style={{ color: theme.textMuted }}>{clamped}%</span>
-          )}
-        </div>
-      );
-    }
-
-    const h = LINEAR_H[size];
-    return (
-      <div
-        ref={ref}
-        role="progressbar"
-        aria-valuemin={0}
-        aria-valuemax={100}
-        aria-valuenow={isIndeterminate ? undefined : clamped}
-        aria-label={label ?? (isIndeterminate ? 'Loading' : `${clamped}%`)}
-        className={cx(tkx('flex flex-col gap-1 w-full'), className)}
-        style={style}
-      >
-        {label && (
-          <div className={tkx('flex justify-between text-sm')} style={{ color: theme.text }}>
-            <span>{label}</span>
-            {showValue && !isIndeterminate && <span>{clamped}%</span>}
-          </div>
-        )}
-        <div
-          className={tkx('w-full overflow-hidden')}
-          style={{ height: h, borderRadius: h, backgroundColor: theme.border }}
-        >
-          <div
-            style={{
-              height: '100%', borderRadius: h, backgroundColor: fillColor,
-              width: isIndeterminate ? '40%' : `${clamped}%`,
-              transition: reducedMotion ? 'none' : 'width 300ms ease',
-              animation: isIndeterminate && !reducedMotion ? 'tkx-shimmer 1.5s ease-in-out infinite' : undefined,
-            }}
-          />
-        </div>
-      </div>
-    );
-  },
-);
-
-TkxProgress.displayName = 'TkxProgress';

package/src/components/TkxQRCode.tsx

@@ -1,176 +0,0 @@
-'use client';
-
-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>
-  );
-}