tekivex-ui 2.5.15 → 2.6.0

package/src/components/TkxAffix.tsx

@@ -1,140 +0,0 @@
-'use client';
-
-import { type ReactNode, useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { useTheme } from '../themes';
-import { sanitizeString } from '../engine/security';
-import { useReducedMotion } from '../hooks';
-import { tkx } from '../engine/tkx';
-
-// ── Types ────────────────────────────────────────────────────────────────────
-
-export interface TkxAffixProps {
-  children: ReactNode;
-  offsetTop?: number;
-  offsetBottom?: number;
-  onChange?: (affixed: boolean) => void;
-  target?: () => HTMLElement | Window;
-}
-
-// ── Helpers ──────────────────────────────────────────────────────────────────
-
-function getScrollTarget(target?: () => HTMLElement | Window): HTMLElement | Window {
-  if (target) {
-    try {
-      return target();
-    } catch {
-      return window;
-    }
-  }
-  return window;
-}
-
-function getTargetRect(el: HTMLElement | Window): { top: number; bottom: number } {
-  if (el instanceof Window) {
-    return { top: 0, bottom: el.innerHeight };
-  }
-  const rect = el.getBoundingClientRect();
-  return { top: rect.top, bottom: rect.bottom };
-}
-
-// ── Component ────────────────────────────────────────────────────────────────
-
-export function TkxAffix({
-  children,
-  offsetTop,
-  offsetBottom,
-  onChange,
-  target,
-}: TkxAffixProps) {
-  const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const placeholderRef = useRef<HTMLDivElement>(null);
-  const fixedRef = useRef<HTMLDivElement>(null);
-  const [affixed, setAffixed] = useState(false);
-  const [placeholderSize, setPlaceholderSize] = useState({ width: 0, height: 0 });
-  const prevAffixed = useRef(false);
-
-  // Sanitize any debug info strings for security
-  const _labelSafe = useMemo(() => sanitizeString('Sticky content'), []);
-
-  const checkPosition = useCallback(() => {
-    const el = placeholderRef.current;
-    if (!el) return;
-
-    const rect = el.getBoundingClientRect();
-    const targetRect = getTargetRect(getScrollTarget(target));
-    let shouldAffix = false;
-
-    if (offsetTop !== undefined) {
-      // Affix when element scrolls past the top offset
-      shouldAffix = rect.top - targetRect.top <= offsetTop;
-    } else if (offsetBottom !== undefined) {
-      // Affix when element scrolls past the bottom offset
-      shouldAffix = targetRect.bottom - rect.bottom <= offsetBottom;
-    }
-
-    if (shouldAffix !== prevAffixed.current) {
-      prevAffixed.current = shouldAffix;
-      setAffixed(shouldAffix);
-      setPlaceholderSize({
-        width: rect.width,
-        height: rect.height,
-      });
-      onChange?.(shouldAffix);
-    }
-  }, [offsetTop, offsetBottom, onChange, target]);
-
-  // Attach scroll and resize listeners
-  useEffect(() => {
-    const scrollTarget = getScrollTarget(target);
-
-    checkPosition();
-    scrollTarget.addEventListener('scroll', checkPosition, { passive: true });
-    window.addEventListener('resize', checkPosition);
-
-    return () => {
-      scrollTarget.removeEventListener('scroll', checkPosition);
-      window.removeEventListener('resize', checkPosition);
-    };
-  }, [checkPosition, target]);
-
-  // Build the fixed positioning styles
-  const fixedStyle: React.CSSProperties = affixed
-    ? {
-        position: 'fixed',
-        zIndex: 100,
-        ...(offsetTop !== undefined ? { top: offsetTop } : {}),
-        ...(offsetBottom !== undefined ? { bottom: offsetBottom } : {}),
-        width: placeholderSize.width || undefined,
-        transition: reducedMotion ? 'none' : 'box-shadow 0.2s ease',
-        boxShadow: `0 2px 8px ${theme.border}`,
-      }
-    : {};
-
-  // Placeholder keeps the document flow intact when element is fixed
-  const placeholderStyle: React.CSSProperties = affixed
-    ? {
-        height: placeholderSize.height,
-        width: placeholderSize.width,
-      }
-    : {};
-
-  return (
-    <>
-      <div
-        ref={placeholderRef}
-        aria-hidden={affixed}
-        style={placeholderStyle}
-      />
-      <div
-        ref={fixedRef}
-        role="region"
-        aria-label={_labelSafe}
-        className={tkx(affixed ? 'tkx-affixed' : '')}
-        style={fixedStyle}
-      >
-        {children}
-      </div>
-    </>
-  );
-}

package/src/components/TkxAlert.tsx

@@ -1,94 +0,0 @@
-'use client';
-
-import { type ReactNode, useEffect } from 'react';
-import { useTheme } from '../themes';
-import { sanitizeString } from '../engine/security';
-import { useAnnounce } from '../hooks';
-import { tkx } from '../engine/tkx';
-
-export type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
-
-export interface TkxAlertProps {
-  variant: AlertVariant;
-  title?: string;
-  children: ReactNode;
-  dismissible?: boolean;
-  onDismiss?: () => void;
-  icon?: ReactNode;
-  style?: React.CSSProperties;
-  className?: string;
-}
-
-const ICONS: Record<AlertVariant, ReactNode> = {
-  info: (
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-      <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
-    </svg>
-  ),
-  success: (
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-      <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm-2 14.5l-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z" />
-    </svg>
-  ),
-  warning: (
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-      <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
-    </svg>
-  ),
-  danger: (
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-      <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
-    </svg>
-  ),
-};
-
-export function TkxAlert({ variant, title, children, dismissible, onDismiss, icon, style, className }: TkxAlertProps) {
-  const theme = useTheme();
-  const announce = useAnnounce();
-  const safeTitle = title ? sanitizeString(title) : undefined;
-
-  useEffect(() => {
-    if (safeTitle) {
-      announce(safeTitle, variant === 'danger' || variant === 'warning' ? 'assertive' : 'polite');
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [safeTitle, variant]);
-
-  const colorMap: Record<AlertVariant, string> = {
-    info: theme.info, success: theme.success, warning: theme.warning, danger: theme.danger,
-  };
-  const accentColor = colorMap[variant];
-  const role = variant === 'danger' || variant === 'warning' ? 'alert' : 'status';
-
-  return (
-    <div
-      role={role}
-      className={tkx('flex items-start gap-3 px-4 py-3 rounded-lg border animate-fade-in font-sans', className ?? '')}
-      style={{ backgroundColor: `${accentColor}18`, borderColor: accentColor, color: theme.text, ...style }}
-    >
-      <span className={tkx('shrink-0 mt-[1px]')} style={{ color: accentColor }}>
-        {icon ?? ICONS[variant]}
-      </span>
-
-      <div className={tkx('flex-1 min-w-0')}>
-        {safeTitle && (
-          <p className={tkx('m-0 font-semibold text-sm mb-1')}>{safeTitle}</p>
-        )}
-        <div className={tkx('text-sm leading-relaxed')}>{children}</div>
-      </div>
-
-      {dismissible && onDismiss && (
-        <button
-          aria-label="Dismiss alert"
-          onClick={onDismiss}
-          className={tkx('bg-transparent border-none cursor-pointer rounded p-[2px] shrink-0 flex items-center justify-center focus-visible:focus-ring')}
-          style={{ color: theme.textMuted }}
-        >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
-            <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
-          </svg>
-        </button>
-      )}
-    </div>
-  );
-}

package/src/components/TkxAnchor.tsx

@@ -1,195 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { useTheme } from '../themes';
-import { sanitizeString } from '../engine/security';
-import { useReducedMotion } from '../hooks';
-import { tkx } from '../engine/tkx';
-
-// ── Types ────────────────────────────────────────────────────────────────────
-
-export interface AnchorLink {
-  key: string;
-  href: string;
-  title: string;
-  children?: AnchorLink[];
-}
-
-export interface TkxAnchorProps {
-  items: AnchorLink[];
-  offsetTop?: number;
-  getCurrentAnchor?: (activeLink: string) => string;
-  onChange?: (currentLink: string) => void;
-}
-
-// ── Helpers ──────────────────────────────────────────────────────────────────
-
-function flattenLinks(items: AnchorLink[]): AnchorLink[] {
-  const result: AnchorLink[] = [];
-  for (const item of items) {
-    result.push(item);
-    if (item.children) result.push(...flattenLinks(item.children));
-  }
-  return result;
-}
-
-function getAnchorId(href: string): string {
-  return href.startsWith('#') ? href.slice(1) : href;
-}
-
-// ── Link Item ────────────────────────────────────────────────────────────────
-
-function AnchorItem({
-  item,
-  activeKey,
-  depth,
-  onClick,
-  theme,
-  reducedMotion,
-}: {
-  item: AnchorLink;
-  activeKey: string;
-  depth: number;
-  onClick: (href: string) => void;
-  theme: ReturnType<typeof useTheme>;
-  reducedMotion: boolean;
-}) {
-  const isActive = item.key === activeKey;
-  const safeTitle = sanitizeString(item.title);
-
-  return (
-    <li role="none" style={{ listStyle: 'none' }}>
-      <a
-        role="treeitem"
-        aria-current={isActive ? 'location' : undefined}
-        href={item.href}
-        onClick={(e) => {
-          e.preventDefault();
-          onClick(item.href);
-        }}
-        className={tkx('block text-sm py-1 no-underline')}
-        style={{
-          paddingLeft: 12 + depth * 16,
-          color: isActive ? theme.primary : theme.textMuted,
-          fontWeight: isActive ? 600 : 400,
-          borderLeft: `2px solid ${isActive ? theme.primary : 'transparent'}`,
-          transition: reducedMotion ? 'none' : 'color 0.15s ease, border-color 0.15s ease',
-        }}
-      >
-        {safeTitle}
-      </a>
-      {item.children && item.children.length > 0 && (
-        <ul role="group" style={{ margin: 0, padding: 0 }}>
-          {item.children.map((child) => (
-            <AnchorItem
-              key={child.key}
-              item={child}
-              activeKey={activeKey}
-              depth={depth + 1}
-              onClick={onClick}
-              theme={theme}
-              reducedMotion={reducedMotion}
-            />
-          ))}
-        </ul>
-      )}
-    </li>
-  );
-}
-
-// ── Component ────────────────────────────────────────────────────────────────
-
-export function TkxAnchor({
-  items,
-  offsetTop = 0,
-  getCurrentAnchor,
-  onChange,
-}: TkxAnchorProps) {
-  const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const [activeKey, setActiveKey] = useState(items[0]?.key ?? '');
-  const isScrolling = useRef(false);
-
-  const flat = flattenLinks(items);
-
-  const updateActive = useCallback(() => {
-    if (isScrolling.current) return;
-
-    let current = flat[0]?.key ?? '';
-    for (const link of flat) {
-      const id = getAnchorId(link.href);
-      const el = document.getElementById(id);
-      if (el) {
-        const top = el.getBoundingClientRect().top;
-        if (top <= offsetTop + 10) {
-          current = link.key;
-        }
-      }
-    }
-
-    if (getCurrentAnchor) {
-      current = getCurrentAnchor(current);
-    }
-
-    if (current !== activeKey) {
-      setActiveKey(current);
-      onChange?.(current);
-    }
-  }, [flat, offsetTop, getCurrentAnchor, activeKey, onChange]);
-
-  useEffect(() => {
-    window.addEventListener('scroll', updateActive, { passive: true });
-    updateActive();
-    return () => window.removeEventListener('scroll', updateActive);
-  }, [updateActive]);
-
-  const handleClick = useCallback(
-    (href: string) => {
-      const id = getAnchorId(href);
-      const el = document.getElementById(id);
-      if (!el) return;
-
-      isScrolling.current = true;
-      const top = el.getBoundingClientRect().top + window.scrollY - offsetTop;
-      window.scrollTo({ top, behavior: reducedMotion ? 'auto' : 'smooth' });
-
-      // Find the link by href and set active
-      const link = flat.find((l) => l.href === href);
-      if (link) {
-        setActiveKey(link.key);
-        onChange?.(link.key);
-      }
-
-      setTimeout(() => {
-        isScrolling.current = false;
-      }, 800);
-    },
-    [flat, offsetTop, reducedMotion, onChange],
-  );
-
-  return (
-    <nav
-      role="tree"
-      aria-label="Anchor navigation"
-      className={tkx('font-sans')}
-      style={{
-        borderLeft: `1px solid ${theme.border}`,
-        padding: '4px 0',
-      }}
-    >
-      <ul role="group" style={{ margin: 0, padding: 0 }}>
-        {items.map((item) => (
-          <AnchorItem
-            key={item.key}
-            item={item}
-            activeKey={activeKey}
-            depth={0}
-            onClick={handleClick}
-            theme={theme}
-            reducedMotion={reducedMotion}
-          />
-        ))}
-      </ul>
-    </nav>
-  );
-}

package/src/components/TkxAppBar.tsx

@@ -1,262 +0,0 @@
-'use client';
-
-import {
-  useState,
-  useEffect,
-  useCallback,
-  useRef,
-  useId,
-  type ReactNode,
-  type CSSProperties,
-} from 'react';
-import { useTheme } from '../themes';
-import { sanitizeString } from '../engine/security';
-import { useReducedMotion, useEscapeKey } from '../hooks';
-import { tkx } from '../engine/tkx';
-
-// ── Types ─────────────────────────────────────────────────────────────────────
-
-export interface TkxAppBarProps {
-  title?: ReactNode;
-  logo?: ReactNode;
-  actions?: ReactNode;
-  navigation?: ReactNode;
-  position?: 'fixed' | 'sticky' | 'static';
-  variant?: 'default' | 'transparent' | 'elevated';
-  color?: 'primary' | 'surface';
-}
-
-// ── Constants ─────────────────────────────────────────────────────────────────
-
-const MOBILE_BREAKPOINT = 768;
-const BAR_HEIGHT = 56;
-
-// ── Hamburger icon ──────────────────────────────────────────────────────────
-
-function HamburgerIcon({ open }: { open: boolean }) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      aria-hidden="true"
-    >
-      {open ? (
-        <>
-          <line x1="18" y1="6" x2="6" y2="18" />
-          <line x1="6" y1="6" x2="18" y2="18" />
-        </>
-      ) : (
-        <>
-          <line x1="3" y1="6" x2="21" y2="6" />
-          <line x1="3" y1="12" x2="21" y2="12" />
-          <line x1="3" y1="18" x2="21" y2="18" />
-        </>
-      )}
-    </svg>
-  );
-}
-
-// ── Breakpoint hook ─────────────────────────────────────────────────────────
-
-function useIsMobile(): boolean {
-  const [isMobile, setIsMobile] = useState(() => {
-    if (typeof window === 'undefined') return false;
-    return window.innerWidth < MOBILE_BREAKPOINT;
-  });
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    const handler = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    window.addEventListener('resize', handler);
-    return () => window.removeEventListener('resize', handler);
-  }, []);
-
-  return isMobile;
-}
-
-// ── Component ─────────────────────────────────────────────────────────────────
-
-export function TkxAppBar({
-  title,
-  logo,
-  actions,
-  navigation,
-  position = 'sticky',
-  variant = 'default',
-  color = 'surface',
-}: TkxAppBarProps) {
-  const theme = useTheme();
-  const reduced = useReducedMotion();
-  const isMobile = useIsMobile();
-  const [menuOpen, setMenuOpen] = useState(false);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const navId = useId();
-
-  // Close mobile menu on escape
-  useEscapeKey(() => setMenuOpen(false), menuOpen);
-
-  // Close on resize to desktop
-  useEffect(() => {
-    if (!isMobile && menuOpen) setMenuOpen(false);
-  }, [isMobile, menuOpen]);
-
-  // Close on outside click
-  useEffect(() => {
-    if (!menuOpen) return;
-    const handler = (e: PointerEvent) => {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
-        setMenuOpen(false);
-      }
-    };
-    document.addEventListener('pointerdown', handler);
-    return () => document.removeEventListener('pointerdown', handler);
-  }, [menuOpen]);
-
-  const toggleMenu = useCallback(() => {
-    setMenuOpen((prev) => !prev);
-  }, []);
-
-  // ── Color resolution ────────────────────────────────────────────────────
-
-  const bgColor = color === 'primary' ? theme.primary : theme.surface;
-  const textColor = color === 'primary' ? theme.bg : theme.text;
-
-  // ── Variant styles ──────────────────────────────────────────────────────
-
-  const variantStyles: Record<string, CSSProperties> = {
-    default: {
-      backgroundColor: bgColor,
-      borderBottom: `1px solid ${theme.border}`,
-    },
-    transparent: {
-      backgroundColor: 'transparent',
-      borderBottom: 'none',
-    },
-    elevated: {
-      backgroundColor: bgColor,
-      boxShadow: `0 2px 8px ${theme.bg}66`,
-      borderBottom: 'none',
-    },
-  };
-
-  // ── Position styles ─────────────────────────────────────────────────────
-
-  const positionStyles: Record<string, CSSProperties> = {
-    fixed: { position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1100 },
-    sticky: { position: 'sticky', top: 0, zIndex: 1100 },
-    static: { position: 'static' },
-  };
-
-  const safeTitle = typeof title === 'string' ? sanitizeString(title) : title;
-
-  // ── Transition ──────────────────────────────────────────────────────────
-
-  const slideTransition = reduced
-    ? 'none'
-    : 'max-height 300ms cubic-bezier(0.4,0,0.2,1), opacity 300ms ease';
-
-  return (
-    <header
-      role="banner"
-      className={tkx('font-sans w-full')}
-      style={{
-        ...positionStyles[position],
-        ...variantStyles[variant],
-        color: textColor,
-        height: BAR_HEIGHT,
-      }}
-    >
-      <div
-        ref={menuRef}
-        className={tkx('flex items-center h-full px-4')}
-        style={{ maxWidth: 1440, margin: '0 auto' }}
-      >
-        {/* Logo area */}
-        {logo && (
-          <div
-            className={tkx('flex items-center shrink-0 mr-3')}
-            aria-hidden="true"
-          >
-            {logo}
-          </div>
-        )}
-
-        {/* Title */}
-        {safeTitle && (
-          <div
-            className={tkx('text-base font-semibold shrink-0 mr-4 leading-snug')}
-            style={{ color: textColor }}
-          >
-            {safeTitle}
-          </div>
-        )}
-
-        {/* Desktop navigation */}
-        {!isMobile && navigation && (
-          <nav
-            id={navId}
-            aria-label="Main navigation"
-            className={tkx('flex items-center flex-1 gap-1')}
-          >
-            {navigation}
-          </nav>
-        )}
-
-        {/* Spacer for mobile */}
-        {isMobile && <div className={tkx('flex-1')} />}
-
-        {/* Desktop actions */}
-        {actions && (
-          <div className={tkx('flex items-center gap-2 ml-auto shrink-0')}>
-            {actions}
-          </div>
-        )}
-
-        {/* Mobile hamburger */}
-        {isMobile && navigation && (
-          <button
-            onClick={toggleMenu}
-            aria-expanded={menuOpen}
-            aria-controls={navId}
-            aria-label={menuOpen ? 'Close navigation menu' : 'Open navigation menu'}
-            className={tkx(
-              'bg-transparent border-none cursor-pointer p-2 ml-2 rounded flex items-center justify-center',
-              'focus-visible:focus-ring',
-            )}
-            style={{ color: textColor }}
-          >
-            <HamburgerIcon open={menuOpen} />
-          </button>
-        )}
-      </div>
-
-      {/* Mobile dropdown menu */}
-      {isMobile && navigation && (
-        <nav
-          id={navId}
-          aria-label="Main navigation"
-          style={{
-            maxHeight: menuOpen ? 400 : 0,
-            opacity: menuOpen ? 1 : 0,
-            overflow: 'hidden',
-            transition: slideTransition,
-            backgroundColor: theme.surface,
-            borderBottom: menuOpen ? `1px solid ${theme.border}` : 'none',
-          }}
-        >
-          <div
-            className={tkx('flex flex-col gap-1 px-4 py-3')}
-            role="menu"
-          >
-            {navigation}
-          </div>
-        </nav>
-      )}
-    </header>
-  );
-}