tekivex-ui 2.5.15 → 2.6.0

package/src/components/TkxToolbar.tsx

@@ -1,262 +0,0 @@
-'use client';
-
-import {
-  useRef,
-  useCallback,
-  type ReactNode,
-  type CSSProperties,
-  type KeyboardEvent,
-} from 'react';
-import { useTheme } from '../themes';
-import { sanitizeString } from '../engine/security';
-import { useReducedMotion } from '../hooks';
-import { tkx } from '../engine/tkx';
-
-// ── Types ─────────────────────────────────────────────────────────────────────
-
-export interface ToolbarItem {
-  id: string;
-  icon?: ReactNode;
-  label: string;
-  onClick?: () => void;
-  disabled?: boolean;
-  active?: boolean;
-  type?: 'button' | 'separator' | 'toggle';
-}
-
-export interface TkxToolbarProps {
-  items: ToolbarItem[];
-  orientation?: 'horizontal' | 'vertical';
-  size?: 'sm' | 'md' | 'lg';
-  variant?: 'default' | 'outlined' | 'filled';
-  ariaLabel?: string;
-  className?: string;
-  style?: CSSProperties;
-}
-
-// ── Size map ────────────────────────────────────────────────────────────────
-
-interface SizeConfig {
-  buttonPx: number;
-  buttonPy: number;
-  fontSize: number;
-  iconSize: number;
-  gap: number;
-  separatorSize: number;
-}
-
-const SIZE_MAP: Record<'sm' | 'md' | 'lg', SizeConfig> = {
-  sm: { buttonPx: 6, buttonPy: 4, fontSize: 12, iconSize: 14, gap: 2, separatorSize: 16 },
-  md: { buttonPx: 8, buttonPy: 6, fontSize: 13, iconSize: 16, gap: 4, separatorSize: 20 },
-  lg: { buttonPx: 12, buttonPy: 8, fontSize: 14, iconSize: 18, gap: 6, separatorSize: 24 },
-};
-
-// ── Component ───────────────────────────────────────────────────────────────
-
-export function TkxToolbar({
-  items,
-  orientation = 'horizontal',
-  size = 'md',
-  variant = 'default',
-  ariaLabel = 'Toolbar',
-  className,
-  style,
-}: TkxToolbarProps) {
-  const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const sizeConfig = SIZE_MAP[size];
-  const isHorizontal = orientation === 'horizontal';
-
-  const itemRefs = useRef<Map<string, HTMLElement>>(new Map());
-
-  // Collect focusable (non-separator, non-disabled) item ids
-  const focusableIds = items
-    .filter((item) => item.type !== 'separator' && !item.disabled)
-    .map((item) => item.id);
-
-  const focusItem = useCallback((id: string) => {
-    itemRefs.current.get(id)?.focus();
-  }, []);
-
-  // Roving tabindex keyboard handling
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLElement>, itemId: string) => {
-      const currentIdx = focusableIds.indexOf(itemId);
-      if (currentIdx < 0) return;
-
-      const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
-      const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
-
-      switch (e.key) {
-        case nextKey: {
-          e.preventDefault();
-          const next = currentIdx + 1 < focusableIds.length ? currentIdx + 1 : 0;
-          focusItem(focusableIds[next]);
-          break;
-        }
-        case prevKey: {
-          e.preventDefault();
-          const prev = currentIdx - 1 >= 0 ? currentIdx - 1 : focusableIds.length - 1;
-          focusItem(focusableIds[prev]);
-          break;
-        }
-        case 'Home': {
-          e.preventDefault();
-          focusItem(focusableIds[0]);
-          break;
-        }
-        case 'End': {
-          e.preventDefault();
-          focusItem(focusableIds[focusableIds.length - 1]);
-          break;
-        }
-      }
-    },
-    [focusableIds, focusItem, isHorizontal],
-  );
-
-  // Variant styles for the toolbar container
-  const containerVariantStyle = (): CSSProperties => {
-    switch (variant) {
-      case 'outlined':
-        return {
-          backgroundColor: 'transparent',
-          border: `1px solid ${theme.border}`,
-        };
-      case 'filled':
-        return {
-          backgroundColor: theme.surfaceAlt,
-          border: 'none',
-        };
-      default:
-        return {
-          backgroundColor: theme.surface,
-          border: `1px solid ${theme.border}`,
-        };
-    }
-  };
-
-  const getButtonStyle = (item: ToolbarItem): CSSProperties => {
-    const isToggle = item.type === 'toggle';
-    const isActive = item.active;
-
-    const base: CSSProperties = {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 4,
-      padding: `${sizeConfig.buttonPy}px ${sizeConfig.buttonPx}px`,
-      fontSize: sizeConfig.fontSize,
-      borderRadius: 6,
-      border: 'none',
-      cursor: item.disabled ? 'not-allowed' : 'pointer',
-      backgroundColor: isActive ? `${theme.primary}20` : 'transparent',
-      color: isActive ? theme.primary : item.disabled ? theme.textMuted : theme.text,
-      opacity: item.disabled ? 0.5 : 1,
-      outline: 'none',
-      transition: reducedMotion ? 'none' : 'all 100ms ease',
-      whiteSpace: 'nowrap',
-      lineHeight: 1,
-    };
-
-    return base;
-  };
-
-  return (
-    <div
-      role="toolbar"
-      aria-label={ariaLabel}
-      aria-orientation={orientation}
-      className={tkx(
-        'inline-flex items-center rounded-lg font-sans',
-        isHorizontal ? 'flex-row' : 'flex-col',
-        className ?? '',
-      )}
-      style={{
-        ...containerVariantStyle(),
-        padding: sizeConfig.gap,
-        gap: sizeConfig.gap,
-        ...style,
-      }}
-    >
-      {items.map((item, idx) => {
-        // Separator
-        if (item.type === 'separator') {
-          return (
-            <div
-              key={item.id}
-              role="separator"
-              aria-orientation={isHorizontal ? 'vertical' : 'horizontal'}
-              className={tkx('flex-shrink-0')}
-              style={{
-                ...(isHorizontal
-                  ? { width: 1, height: sizeConfig.separatorSize, marginLeft: 2, marginRight: 2 }
-                  : { height: 1, width: sizeConfig.separatorSize, marginTop: 2, marginBottom: 2 }),
-                backgroundColor: theme.border,
-              }}
-            />
-          );
-        }
-
-        const safeLabel = sanitizeString(item.label);
-        const isFocusable = !item.disabled;
-        const isFirstFocusable = focusableIds[0] === item.id;
-
-        return (
-          <button
-            key={item.id}
-            ref={(el) => {
-              if (el) itemRefs.current.set(item.id, el);
-              else itemRefs.current.delete(item.id);
-            }}
-            type="button"
-            role={item.type === 'toggle' ? undefined : undefined}
-            aria-pressed={item.type === 'toggle' ? item.active : undefined}
-            aria-label={safeLabel}
-            aria-disabled={item.disabled || undefined}
-            tabIndex={isFocusable && isFirstFocusable ? 0 : -1}
-            disabled={item.disabled}
-            onClick={() => {
-              if (!item.disabled) item.onClick?.();
-            }}
-            onKeyDown={(e) => {
-              handleKeyDown(e, item.id);
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                if (!item.disabled) item.onClick?.();
-              }
-            }}
-            className={tkx(
-              'focus-visible:ring-2 focus-visible:ring-offset-1',
-            )}
-            style={getButtonStyle(item)}
-            onMouseEnter={(e) => {
-              if (!item.disabled && !item.active) {
-                (e.currentTarget as HTMLElement).style.backgroundColor = theme.surfaceAlt;
-              }
-            }}
-            onMouseLeave={(e) => {
-              if (!item.disabled) {
-                (e.currentTarget as HTMLElement).style.backgroundColor = item.active
-                  ? `${theme.primary}20`
-                  : 'transparent';
-              }
-            }}
-          >
-            {item.icon && (
-              <span
-                aria-hidden="true"
-                style={{ width: sizeConfig.iconSize, height: sizeConfig.iconSize, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-              >
-                {item.icon}
-              </span>
-            )}
-            {!item.icon && safeLabel}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
-export default TkxToolbar;

package/src/components/TkxTooltip.tsx

@@ -1,85 +0,0 @@
-'use client';
-
-import { useState, useRef, useId, useEffect, type ReactElement, cloneElement } from 'react';
-import { useTheme } from '../themes';
-import { sanitizeString } from '../engine/security';
-import { useEscapeKey, useClickOutside, useReducedMotion } from '../hooks';
-import { getAccessibleForeground } from '../engine/wcag';
-import { tkx } from '../engine/tkx';
-
-export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
-
-export interface TkxTooltipProps {
-  content: string;
-  children: ReactElement;
-  placement?: TooltipPlacement;
-  delay?: number;
-}
-
-const PLACEMENT_STYLE: Record<TooltipPlacement, React.CSSProperties> = {
-  top: { bottom: '100%', left: '50%', transform: 'translateX(-50%)', marginBottom: 6 },
-  bottom: { top: '100%', left: '50%', transform: 'translateX(-50%)', marginTop: 6 },
-  left: { right: '100%', top: '50%', transform: 'translateY(-50%)', marginRight: 6 },
-  right: { left: '100%', top: '50%', transform: 'translateY(-50%)', marginLeft: 6 },
-};
-
-export function TkxTooltip({ content, children, placement = 'top', delay = 300 }: TkxTooltipProps) {
-  const theme = useTheme();
-  const [visible, setVisible] = useState(false);
-  const wrapperRef = useRef<HTMLSpanElement>(null);
-  const tooltipId = useId();
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const reducedMotion = useReducedMotion();
-  const safeContent = sanitizeString(content);
-  const textColor = getAccessibleForeground(theme.surfaceAlt, [theme.text, '#ffffff', '#000000']);
-
-  function show() { timerRef.current = setTimeout(() => setVisible(true), delay); }
-  function hide() { if (timerRef.current) clearTimeout(timerRef.current); setVisible(false); }
-
-  useEscapeKey(hide, visible);
-  useClickOutside(wrapperRef, hide);
-
-  // Clear any pending show-timer on unmount to avoid
-  // setState-after-unmount warnings during fast navigation.
-  useEffect(() => {
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-    };
-  }, []);
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const child = children as ReactElement<any>;
-  const trigger = cloneElement(child, {
-    'aria-describedby': visible ? tooltipId : undefined,
-    onMouseEnter: (e: React.MouseEvent) => { child.props.onMouseEnter?.(e); show(); },
-    onMouseLeave: (e: React.MouseEvent) => { child.props.onMouseLeave?.(e); hide(); },
-    onFocus: (e: React.FocusEvent) => { child.props.onFocus?.(e); show(); },
-    onBlur: (e: React.FocusEvent) => { child.props.onBlur?.(e); hide(); },
-  });
-
-  return (
-    <span ref={wrapperRef} className={tkx('relative inline-flex')}>
-      {trigger}
-      {visible && (
-        <span
-          id={tooltipId}
-          role="tooltip"
-          className={tkx('absolute z-[9000] text-xs font-sans py-1.5 px-2.5 rounded-md whitespace-nowrap pointer-events-none', !reducedMotion && 'animate-fade-in')}
-          style={{
-            backgroundColor: theme.surfaceAlt,
-            color: textColor,
-            border: `1px solid ${theme.border}`,
-            boxShadow: `0 4px 12px ${theme.bg}40`,
-            maxWidth: 280,
-            ...PLACEMENT_STYLE[placement],
-          }}
-        >
-          {safeContent}
-        </span>
-      )}
-    </span>
-  );
-}

package/src/components/TkxTour.tsx

@@ -1,241 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback, useRef, type ReactNode } from 'react';
-import { createPortal } from 'react-dom';
-import { useTheme } from '../themes';
-import { sanitizeString } from '../engine/security';
-import { useReducedMotion } from '../hooks';
-import { tkx } from '../engine/tkx';
-
-// ── Types ────────────────────────────────────────────────────────────────────
-
-export interface TourStep {
-  target: string;
-  title: string;
-  description: string;
-  placement?: 'top' | 'bottom' | 'left' | 'right';
-}
-
-export interface TkxTourProps {
-  steps: TourStep[];
-  isOpen?: boolean;
-  onClose?: () => void;
-  current?: number;
-  onChange?: (step: number) => void;
-}
-
-// ── Helpers ──────────────────────────────────────────────────────────────────
-
-function getRect(selector: string): DOMRect | null {
-  const el = document.querySelector(selector);
-  return el ? el.getBoundingClientRect() : null;
-}
-
-interface PopoverPos {
-  top: number;
-  left: number;
-}
-
-function computePosition(
-  rect: DOMRect,
-  placement: string,
-  tipW: number,
-  tipH: number,
-): PopoverPos {
-  const gap = 12;
-  switch (placement) {
-    case 'top':
-      return { top: rect.top - tipH - gap + window.scrollY, left: rect.left + rect.width / 2 - tipW / 2 + window.scrollX };
-    case 'bottom':
-      return { top: rect.bottom + gap + window.scrollY, left: rect.left + rect.width / 2 - tipW / 2 + window.scrollX };
-    case 'left':
-      return { top: rect.top + rect.height / 2 - tipH / 2 + window.scrollY, left: rect.left - tipW - gap + window.scrollX };
-    case 'right':
-      return { top: rect.top + rect.height / 2 - tipH / 2 + window.scrollY, left: rect.right + gap + window.scrollX };
-    default:
-      return { top: rect.bottom + gap + window.scrollY, left: rect.left + window.scrollX };
-  }
-}
-
-// ── Component ────────────────────────────────────────────────────────────────
-
-export function TkxTour({
-  steps,
-  isOpen = false,
-  onClose,
-  current: controlledCurrent,
-  onChange,
-}: TkxTourProps) {
-  const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const [internal, setInternal] = useState(0);
-  const current = controlledCurrent ?? internal;
-  const tipRef = useRef<HTMLDivElement>(null);
-  const [pos, setPos] = useState<PopoverPos>({ top: 0, left: 0 });
-  const [targetRect, setTargetRect] = useState<DOMRect | null>(null);
-
-  const step = steps[current];
-
-  const updatePosition = useCallback(() => {
-    if (!step) return;
-    const rect = getRect(step.target);
-    setTargetRect(rect);
-    if (rect && tipRef.current) {
-      const tipW = tipRef.current.offsetWidth;
-      const tipH = tipRef.current.offsetHeight;
-      setPos(computePosition(rect, step.placement ?? 'bottom', tipW, tipH));
-    }
-  }, [step]);
-
-  useEffect(() => {
-    if (!isOpen) return;
-    updatePosition();
-    window.addEventListener('resize', updatePosition);
-    window.addEventListener('scroll', updatePosition, true);
-    return () => {
-      window.removeEventListener('resize', updatePosition);
-      window.removeEventListener('scroll', updatePosition, true);
-    };
-  }, [isOpen, current, updatePosition]);
-
-  // Focus trap: refocus popover on step change
-  useEffect(() => {
-    if (isOpen) tipRef.current?.focus();
-  }, [isOpen, current]);
-
-  const goTo = useCallback(
-    (idx: number) => {
-      setInternal(idx);
-      onChange?.(idx);
-    },
-    [onChange],
-  );
-
-  const handleNext = useCallback(() => {
-    if (current < steps.length - 1) goTo(current + 1);
-    else onClose?.();
-  }, [current, steps.length, goTo, onClose]);
-
-  const handlePrev = useCallback(() => {
-    if (current > 0) goTo(current - 1);
-  }, [current, goTo]);
-
-  if (!isOpen || !step) return null;
-
-  const pad = 6;
-  const safeTitle = sanitizeString(step.title);
-  const safeDesc = sanitizeString(step.description);
-  const TIP_W = 300;
-
-  const overlay = (
-    <div aria-hidden="true">
-      {/* Dimming overlay with spotlight cutout via CSS clip-path */}
-      <div
-        style={{
-          position: 'fixed',
-          inset: 0,
-          zIndex: 9998,
-          backgroundColor: 'rgba(0,0,0,0.55)',
-          clipPath: targetRect
-            ? `polygon(0% 0%, 0% 100%, ${targetRect.left - pad}px 100%, ${targetRect.left - pad}px ${targetRect.top - pad}px, ${targetRect.right + pad}px ${targetRect.top - pad}px, ${targetRect.right + pad}px ${targetRect.bottom + pad}px, ${targetRect.left - pad}px ${targetRect.bottom + pad}px, ${targetRect.left - pad}px 100%, 100% 100%, 100% 0%)`
-            : undefined,
-          transition: reducedMotion ? 'none' : 'clip-path 0.25s ease',
-        }}
-        onClick={onClose}
-      />
-
-      {/* Popover */}
-      <div
-        ref={tipRef}
-        role="dialog"
-        aria-modal="true"
-        aria-label={`Tour step ${current + 1} of ${steps.length}`}
-        tabIndex={-1}
-        style={{
-          position: 'absolute',
-          zIndex: 9999,
-          top: pos.top,
-          left: pos.left,
-          width: TIP_W,
-          backgroundColor: theme.surface,
-          border: `1px solid ${theme.border}`,
-          borderRadius: 10,
-          padding: 20,
-          boxShadow: `0 8px 24px ${theme.bg}80`,
-          animation: reducedMotion ? 'none' : 'tkxFadeIn 0.2s ease',
-          fontFamily: 'inherit',
-        }}
-        onKeyDown={(e) => {
-          if (e.key === 'Escape') onClose?.();
-        }}
-      >
-        <h3
-          className={tkx('m-0 mb-2 text-base font-semibold')}
-          style={{ color: theme.text }}
-        >
-          {safeTitle}
-        </h3>
-        <p
-          className={tkx('m-0 mb-4 text-sm leading-relaxed')}
-          style={{ color: theme.textMuted }}
-        >
-          {safeDesc}
-        </p>
-
-        {/* Step dots */}
-        <div className={tkx('flex items-center gap-1 mb-4')} aria-label="Tour progress">
-          {steps.map((_, i) => (
-            <span
-              key={i}
-              aria-hidden="true"
-              style={{
-                width: 8,
-                height: 8,
-                borderRadius: '50%',
-                backgroundColor: i === current ? theme.primary : theme.border,
-                transition: reducedMotion ? 'none' : 'background-color 0.2s',
-              }}
-            />
-          ))}
-        </div>
-
-        {/* Navigation */}
-        <div className={tkx('flex items-center justify-between gap-2')}>
-          <button
-            type="button"
-            aria-label="Skip tour"
-            onClick={onClose}
-            className={tkx('border-0 bg-transparent cursor-pointer text-sm px-2 py-1')}
-            style={{ color: theme.textMuted }}
-          >
-            Skip
-          </button>
-          <div className={tkx('flex gap-2')}>
-            {current > 0 && (
-              <button
-                type="button"
-                aria-label="Previous step"
-                onClick={handlePrev}
-                className={tkx('rounded-md border px-3 py-1 text-sm cursor-pointer bg-transparent')}
-                style={{ borderColor: theme.border, color: theme.text }}
-              >
-                Prev
-              </button>
-            )}
-            <button
-              type="button"
-              aria-label={current === steps.length - 1 ? 'Finish tour' : 'Next step'}
-              onClick={handleNext}
-              className={tkx('rounded-md border-0 px-4 py-1 text-sm cursor-pointer font-medium')}
-              style={{ backgroundColor: theme.primary, color: '#fff' }}
-            >
-              {current === steps.length - 1 ? 'Finish' : 'Next'}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
-  return createPortal(overlay, document.body);
-}