tekivex-ui 2.0.1 → 2.1.0

package/src/components/TkxBottomNav.tsx

@@ -0,0 +1,239 @@
+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

@@ -0,0 +1,322 @@
+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;

package/src/components/TkxCard.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import { useTheme } from '../themes';
+import { useReducedMotion } from '../hooks';
 import { tkx, cx } from '../engine/tkx';
 
 export type CardVariant = 'default' | 'glass' | 'quantum' | 'elevated' | 'outlined';
@@ -20,6 +21,7 @@ const PADDING_CLASS: Record<CardPadding, string> = {
 export const TkxCard = forwardRef<HTMLElement, TkxCardProps>(
   ({ variant = 'default', isHoverable, isClickable, padding = 'md', as, children, className, style, ...rest }, ref) => {
     const theme = useTheme();
+    const reducedMotion = useReducedMotion();
     const Tag = (as ?? (isClickable ? 'button' : 'div')) as 'div';
 
     const variantStyle: React.CSSProperties = {
@@ -33,7 +35,7 @@ export const TkxCard = forwardRef<HTMLElement, TkxCardProps>(
     const base = tkx(
       'rounded-xl w-full text-left block font-sans focus-visible:focus-ring',
       PADDING_CLASS[padding],
-      (isHoverable || isClickable) && 'transition-transform duration-150 hover:scale-[1.01]',
+      (isHoverable || isClickable) && !reducedMotion && 'transition-transform duration-150 hover:scale-[1.01]',
       isClickable ? 'cursor-pointer' : 'cursor-default',
     );