tekivex-ui 2.5.15 → 2.6.0

package/src/components/TkxBottomNav.tsx

@@ -1,241 +0,0 @@
-'use client';
-
-import {
-  useCallback,
-  useRef,
-  useEffect,
-  type ReactNode,
-  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 BottomNavItem {
-  id: string;
-  label: string;
-  icon: ReactNode;
-  badge?: number;
-}
-
-export interface TkxBottomNavProps {
-  items: BottomNavItem[];
-  activeId?: string;
-  onChange?: (id: string) => void;
-  showLabels?: boolean;
-}
-
-// ── Constants ─────────────────────────────────────────────────────────────────
-
-const MAX_ITEMS = 5;
-const NAV_HEIGHT = 56;
-
-// ── Keyframe injection ──────────────────────────────────────────────────────
-
-let injected = false;
-function injectKeyframes() {
-  if (injected || typeof document === 'undefined') return;
-  injected = true;
-  const style = document.createElement('style');
-  style.id = 'tkx-bottom-nav-kf';
-  style.textContent = `
-    @keyframes tkx-bottom-nav-pulse {
-      0% { transform: scale(1); }
-      50% { transform: scale(1.15); }
-      100% { transform: scale(1); }
-    }
-  `;
-  document.head.appendChild(style);
-}
-
-// ── Component ─────────────────────────────────────────────────────────────────
-
-export function TkxBottomNav({
-  items,
-  activeId,
-  onChange,
-  showLabels = true,
-}: TkxBottomNavProps) {
-  const theme = useTheme();
-  const reduced = useReducedMotion();
-  const navRef = useRef<HTMLElement>(null);
-
-  // Inject keyframes once
-  useEffect(() => {
-    injectKeyframes();
-  }, []);
-
-  // Clamp to max 5 items
-  const visibleItems = items.slice(0, MAX_ITEMS);
-
-  const handleSelect = useCallback(
-    (id: string) => {
-      onChange?.(id);
-    },
-    [onChange],
-  );
-
-  // ── Keyboard navigation (left/right arrows) ────────────────────────────
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLElement>) => {
-      const nav = navRef.current;
-      if (!nav) return;
-
-      const buttons = Array.from(
-        nav.querySelectorAll<HTMLButtonElement>('[role="tab"]'),
-      );
-      const currentIndex = buttons.findIndex(
-        (btn) => btn === document.activeElement,
-      );
-      if (currentIndex === -1) return;
-
-      let nextIndex = currentIndex;
-
-      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
-        e.preventDefault();
-        nextIndex = (currentIndex + 1) % buttons.length;
-      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
-        e.preventDefault();
-        nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
-      } else if (e.key === 'Home') {
-        e.preventDefault();
-        nextIndex = 0;
-      } else if (e.key === 'End') {
-        e.preventDefault();
-        nextIndex = buttons.length - 1;
-      }
-
-      if (nextIndex !== currentIndex) {
-        buttons[nextIndex].focus();
-        handleSelect(visibleItems[nextIndex].id);
-      }
-    },
-    [handleSelect, visibleItems],
-  );
-
-  // ── Transition ──────────────────────────────────────────────────────────
-
-  const transition = reduced ? 'none' : 'color 200ms ease, transform 150ms ease';
-
-  return (
-    <nav
-      ref={navRef}
-      role="navigation"
-      aria-label="Bottom navigation"
-      className={tkx('fixed bottom-0 left-0 right-0 z-[1000] font-sans')}
-      style={{
-        height: NAV_HEIGHT,
-        backgroundColor: theme.surface,
-        borderTop: `1px solid ${theme.border}`,
-        boxShadow: `0 -2px 12px ${theme.bg}44`,
-      }}
-    >
-      <div
-        role="tablist"
-        aria-label="Navigation tabs"
-        className={tkx('flex items-center justify-around h-full')}
-        onKeyDown={handleKeyDown}
-      >
-        {visibleItems.map((item) => {
-          const isActive = item.id === activeId;
-          const safeLabel = sanitizeString(item.label);
-          const color = isActive ? theme.primary : theme.textMuted;
-
-          return (
-            <button
-              key={item.id}
-              role="tab"
-              aria-selected={isActive}
-              aria-label={safeLabel}
-              tabIndex={isActive ? 0 : -1}
-              onClick={() => handleSelect(item.id)}
-              className={tkx(
-                'flex flex-col items-center justify-center gap-0.5',
-                'bg-transparent border-none cursor-pointer p-1',
-                'flex-1 h-full relative',
-                'focus-visible:focus-ring',
-              )}
-              style={{
-                color,
-                transition,
-                outline: 'none',
-              }}
-            >
-              {/* Active indicator bar */}
-              {isActive && (
-                <div
-                  aria-hidden="true"
-                  style={{
-                    position: 'absolute',
-                    top: 0,
-                    left: '25%',
-                    right: '25%',
-                    height: 3,
-                    borderRadius: '0 0 3px 3px',
-                    backgroundColor: theme.primary,
-                    transition: reduced ? 'none' : 'width 200ms ease',
-                  }}
-                />
-              )}
-
-              {/* Icon wrapper with badge */}
-              <div
-                className={tkx('relative flex items-center justify-center')}
-                style={{
-                  animation:
-                    isActive && !reduced
-                      ? 'tkx-bottom-nav-pulse 300ms ease-out'
-                      : 'none',
-                }}
-              >
-                {item.icon}
-
-                {/* Badge */}
-                {item.badge !== undefined && item.badge > 0 && (
-                  <span
-                    aria-label={`${item.badge} notifications`}
-                    className={tkx(
-                      'absolute flex items-center justify-center',
-                      'text-[10px] font-bold leading-none rounded-full',
-                    )}
-                    style={{
-                      top: -4,
-                      right: -8,
-                      minWidth: 16,
-                      height: 16,
-                      padding: '0 4px',
-                      backgroundColor: theme.danger,
-                      color: theme.bg,
-                    }}
-                  >
-                    {item.badge > 99 ? '99+' : item.badge}
-                  </span>
-                )}
-              </div>
-
-              {/* Label */}
-              {showLabels && (
-                <span
-                  className={tkx('text-[10px] leading-tight mt-0.5')}
-                  style={{
-                    fontWeight: isActive ? 600 : 400,
-                    maxWidth: '100%',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                  }}
-                >
-                  {safeLabel}
-                </span>
-              )}
-            </button>
-          );
-        })}
-      </div>
-    </nav>
-  );
-}

package/src/components/TkxBreadcrumb.tsx

@@ -1,324 +0,0 @@
-'use client';
-
-import {
-  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 BreadcrumbItem {
-  label: string;
-  href?: string;
-  icon?: ReactNode;
-}
-
-export interface TkxBreadcrumbProps {
-  items: BreadcrumbItem[];
-  separator?: ReactNode;
-  maxItems?: number;
-  onNavigate?: (item: BreadcrumbItem, index: number) => void;
-  className?: string;
-  style?: CSSProperties;
-}
-
-// ── Chevron separator icon ──────────────────────────────────────────────────
-
-function DefaultSeparator({ color }: { color: string }) {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      aria-hidden="true"
-      style={{ flexShrink: 0 }}
-    >
-      <path
-        d="M6 3l5 5-5 5"
-        stroke={color}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-// ── Ellipsis button ─────────────────────────────────────────────────────────
-
-function EllipsisButton({
-  onClick,
-  bgColor,
-  hoverColor,
-  textColor,
-}: {
-  onClick: () => void;
-  bgColor: string;
-  hoverColor: string;
-  textColor: string;
-}) {
-  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      onClick();
-    }
-  };
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      onKeyDown={handleKeyDown}
-      aria-label="Show hidden breadcrumb items"
-      className={tkx(
-        'inline-flex items-center justify-center rounded px-1.5 py-0.5',
-        'text-sm font-medium cursor-pointer border-none outline-none',
-        'focus-visible:ring-2 focus-visible:ring-offset-1',
-      )}
-      style={{
-        backgroundColor: bgColor,
-        color: textColor,
-        transition: 'background-color 150ms ease',
-      }}
-      onMouseEnter={(e) => {
-        (e.currentTarget as HTMLElement).style.backgroundColor = hoverColor;
-      }}
-      onMouseLeave={(e) => {
-        (e.currentTarget as HTMLElement).style.backgroundColor = bgColor;
-      }}
-    >
-      &hellip;
-    </button>
-  );
-}
-
-// ── Component ───────────────────────────────────────────────────────────────
-
-export function TkxBreadcrumb({
-  items,
-  separator,
-  maxItems,
-  onNavigate,
-  className,
-  style,
-}: TkxBreadcrumbProps) {
-  const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-
-  // Collapse logic: show first, last, and ellipsis when items exceed maxItems
-  const shouldCollapse = maxItems !== undefined && maxItems > 1 && items.length > maxItems;
-
-  const getVisibleItems = useCallback((): { item: BreadcrumbItem; originalIndex: number }[] => {
-    if (!shouldCollapse || !maxItems) {
-      return items.map((item, i) => ({ item, originalIndex: i }));
-    }
-
-    const headCount = Math.ceil((maxItems - 1) / 2);
-    const tailCount = maxItems - 1 - headCount;
-
-    const head = items.slice(0, headCount).map((item, i) => ({
-      item,
-      originalIndex: i,
-    }));
-
-    const tail = items.slice(items.length - tailCount).map((item, i) => ({
-      item,
-      originalIndex: items.length - tailCount + i,
-    }));
-
-    return head.concat(tail);
-  }, [items, maxItems, shouldCollapse]);
-
-  const visibleItems = getVisibleItems();
-
-  // Where to insert the ellipsis
-  const headCount = shouldCollapse && maxItems ? Math.ceil((maxItems - 1) / 2) : -1;
-
-  const handleClick = (item: BreadcrumbItem, index: number) => {
-    onNavigate?.(item, index);
-  };
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLElement>, item: BreadcrumbItem, index: number) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      handleClick(item, index);
-    }
-  };
-
-  const transitionStyle: CSSProperties = reducedMotion
-    ? {}
-    : { transition: 'color 150ms ease, background-color 150ms ease' };
-
-  const renderSeparator = (key: string) => (
-    <li
-      key={key}
-      role="presentation"
-      aria-hidden="true"
-      className={tkx('flex items-center mx-1.5')}
-    >
-      {separator ?? <DefaultSeparator color={theme.textMuted} />}
-    </li>
-  );
-
-  const renderItem = (
-    item: BreadcrumbItem,
-    originalIndex: number,
-    isLast: boolean,
-  ) => {
-    const safeLabel = sanitizeString(item.label);
-
-    if (isLast) {
-      return (
-        <li key={`item-${originalIndex}`}>
-          <span
-            aria-current="page"
-            className={tkx('inline-flex items-center gap-1.5 text-sm font-medium')}
-            style={{ color: theme.text }}
-          >
-            {item.icon && (
-              <span aria-hidden="true" className={tkx('flex-shrink-0')}>
-                {item.icon}
-              </span>
-            )}
-            {safeLabel}
-          </span>
-        </li>
-      );
-    }
-
-    const isLink = !!item.href;
-
-    const commonStyle: CSSProperties = {
-      color: theme.textMuted,
-      textDecoration: 'none',
-      ...transitionStyle,
-    };
-
-    const hoverHandlers = {
-      onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {
-        (e.currentTarget as HTMLElement).style.color = theme.primary;
-      },
-      onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {
-        (e.currentTarget as HTMLElement).style.color = theme.textMuted;
-      },
-    };
-
-    const content = (
-      <>
-        {item.icon && (
-          <span aria-hidden="true" className={tkx('flex-shrink-0')}>
-            {item.icon}
-          </span>
-        )}
-        {safeLabel}
-      </>
-    );
-
-    if (isLink) {
-      return (
-        <li key={`item-${originalIndex}`}>
-          <a
-            href={item.href}
-            onClick={(e) => {
-              if (onNavigate) {
-                e.preventDefault();
-                handleClick(item, originalIndex);
-              }
-            }}
-            className={tkx(
-              'inline-flex items-center gap-1.5 text-sm rounded',
-              'outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
-            )}
-            style={{
-              ...commonStyle,
-              focusRingColor: theme.primary,
-            } as CSSProperties}
-            {...hoverHandlers}
-          >
-            {content}
-          </a>
-        </li>
-      );
-    }
-
-    return (
-      <li key={`item-${originalIndex}`}>
-        <button
-          type="button"
-          onClick={() => handleClick(item, originalIndex)}
-          onKeyDown={(e) => handleKeyDown(e, item, originalIndex)}
-          className={tkx(
-            'inline-flex items-center gap-1.5 text-sm rounded',
-            'border-none bg-transparent cursor-pointer p-0',
-            'outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
-          )}
-          style={commonStyle}
-          {...hoverHandlers}
-        >
-          {content}
-        </button>
-      </li>
-    );
-  };
-
-  // Build the rendered list
-  const rendered: ReactNode[] = [];
-  let ellipsisInserted = false;
-
-  for (let vi = 0; vi < visibleItems.length; vi++) {
-    const { item, originalIndex } = visibleItems[vi];
-    const isLast = originalIndex === items.length - 1;
-
-    // Insert ellipsis after headCount items
-    if (shouldCollapse && !ellipsisInserted && vi === headCount) {
-      if (rendered.length > 0) {
-        rendered.push(renderSeparator(`sep-ellipsis-before`));
-      }
-      rendered.push(
-        <li key="ellipsis" role="presentation">
-          <EllipsisButton
-            onClick={() => {
-              // Re-render without collapse -- parent can control maxItems
-            }}
-            bgColor={theme.surfaceAlt}
-            hoverColor={theme.surface}
-            textColor={theme.textMuted}
-          />
-        </li>,
-      );
-      ellipsisInserted = true;
-    }
-
-    if (rendered.length > 0 && rendered[rendered.length - 1] !== null) {
-      rendered.push(renderSeparator(`sep-${originalIndex}`));
-    }
-
-    rendered.push(renderItem(item, originalIndex, isLast));
-  }
-
-  return (
-    <nav
-      aria-label="Breadcrumb"
-      className={tkx('font-sans', className ?? '')}
-      style={{
-        ...style,
-      }}
-    >
-      <ol
-        role="list"
-        className={tkx('flex items-center flex-wrap list-none m-0 p-0')}
-      >
-        {rendered}
-      </ol>
-    </nav>
-  );
-}
-
-export default TkxBreadcrumb;