tekivex-ui 2.0.2 → 2.2.0

package/src/components/TkxAutocomplete.tsx

@@ -0,0 +1,453 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useId,
+  useMemo,
+  type ReactNode,
+  type CSSProperties,
+  type KeyboardEvent,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion, useEscapeKey } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export interface AutocompleteOption {
+  value: string;
+  label: string;
+  description?: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface TkxAutocompleteProps {
+  options: AutocompleteOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  onInputChange?: (input: string) => void;
+  placeholder?: string;
+  label: string;
+  isLoading?: boolean;
+  emptyMessage?: string;
+  filterFn?: (option: AutocompleteOption, input: string) => boolean;
+  freeSolo?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+
+// ── Default fuzzy filter ────────────────────────────────────────────────────
+
+function defaultFilter(option: AutocompleteOption, input: string): boolean {
+  if (!input) return true;
+  const query = input.toLowerCase();
+  const label = option.label.toLowerCase();
+  // Fuzzy: check if all chars of query appear in order in label
+  let qi = 0;
+  for (let li = 0; li < label.length && qi < query.length; li++) {
+    if (label[li] === query[qi]) qi++;
+  }
+  return qi === query.length;
+}
+
+// ── Dropdown positioning ────────────────────────────────────────────────────
+
+interface DropdownPos {
+  top: number;
+  left: number;
+  width: number;
+  placement: 'below' | 'above';
+}
+
+function calcDropdown(triggerEl: HTMLElement, maxHeight: number): DropdownPos {
+  const rect = triggerEl.getBoundingClientRect();
+  const gap = 4;
+  const spaceBelow = window.innerHeight - rect.bottom;
+  const spaceAbove = rect.top;
+
+  const placement = spaceBelow >= maxHeight + gap || spaceBelow >= spaceAbove ? 'below' : 'above';
+
+  return {
+    top:
+      placement === 'below'
+        ? rect.bottom + window.scrollY + gap
+        : rect.top + window.scrollY - maxHeight - gap,
+    left: rect.left + window.scrollX,
+    width: rect.width,
+    placement,
+  };
+}
+
+// ── Spinner ─────────────────────────────────────────────────────────────────
+
+function Spinner({ color }: { color: string }) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+      style={{ animation: 'spin 0.8s linear infinite', flexShrink: 0 }}
+    >
+      <circle cx="8" cy="8" r="6" stroke={color} strokeWidth="2" opacity="0.3" />
+      <path
+        d="M14 8a6 6 0 00-6-6"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+// ── Component ───────────────────────────────────────────────────────────────
+
+const MAX_DROPDOWN_HEIGHT = 280;
+
+export function TkxAutocomplete({
+  options,
+  value,
+  onChange,
+  onInputChange,
+  placeholder = '',
+  label,
+  isLoading = false,
+  emptyMessage = 'No results found',
+  filterFn,
+  freeSolo = false,
+  className,
+  style,
+}: TkxAutocompleteProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const inputId = useId();
+  const listboxId = useId();
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const [inputValue, setInputValue] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [dropdownPos, setDropdownPos] = useState<DropdownPos | null>(null);
+
+  // Sync input value from controlled value
+  useEffect(() => {
+    if (value !== undefined) {
+      const selectedOption = options.find((o) => o.value === value);
+      setInputValue(selectedOption ? selectedOption.label : value);
+    }
+  }, [value, options]);
+
+  const filter = filterFn ?? defaultFilter;
+
+  const filtered = useMemo(() => {
+    if (!isOpen) return [];
+    return options.filter((o) => filter(o, inputValue));
+  }, [options, inputValue, isOpen, filter]);
+
+  const safeLabel = sanitizeString(label);
+  const safeEmptyMessage = sanitizeString(emptyMessage);
+
+  // Position the dropdown
+  useEffect(() => {
+    if (!isOpen || !wrapperRef.current) return;
+    const update = () => {
+      if (!wrapperRef.current) return;
+      setDropdownPos(calcDropdown(wrapperRef.current, MAX_DROPDOWN_HEIGHT));
+    };
+    update();
+    window.addEventListener('scroll', update, true);
+    window.addEventListener('resize', update);
+    return () => {
+      window.removeEventListener('scroll', update, true);
+      window.removeEventListener('resize', update);
+    };
+  }, [isOpen]);
+
+  // Close on click outside
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: PointerEvent) => {
+      const target = e.target as Node;
+      if (wrapperRef.current?.contains(target)) return;
+      // check portal dropdown
+      const dropdown = document.getElementById(listboxId);
+      if (dropdown?.contains(target)) return;
+      setIsOpen(false);
+    };
+    document.addEventListener('pointerdown', handler);
+    return () => document.removeEventListener('pointerdown', handler);
+  }, [isOpen, listboxId]);
+
+  useEscapeKey(() => setIsOpen(false), isOpen);
+
+  const selectOption = useCallback(
+    (option: AutocompleteOption) => {
+      if (option.disabled) return;
+      setInputValue(option.label);
+      onChange?.(option.value);
+      setIsOpen(false);
+      setActiveIndex(-1);
+      inputRef.current?.focus();
+    },
+    [onChange],
+  );
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    setInputValue(val);
+    onInputChange?.(val);
+    if (!isOpen) setIsOpen(true);
+    setActiveIndex(-1);
+    if (freeSolo) {
+      onChange?.(val);
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (!isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+      setIsOpen(true);
+      return;
+    }
+
+    switch (e.key) {
+      case 'ArrowDown': {
+        e.preventDefault();
+        setActiveIndex((prev) => {
+          let next = prev + 1;
+          while (next < filtered.length && filtered[next].disabled) next++;
+          return next < filtered.length ? next : prev;
+        });
+        break;
+      }
+      case 'ArrowUp': {
+        e.preventDefault();
+        setActiveIndex((prev) => {
+          let next = prev - 1;
+          while (next >= 0 && filtered[next].disabled) next--;
+          return next >= 0 ? next : prev;
+        });
+        break;
+      }
+      case 'Enter': {
+        e.preventDefault();
+        if (activeIndex >= 0 && activeIndex < filtered.length) {
+          selectOption(filtered[activeIndex]);
+        } else if (freeSolo && inputValue) {
+          onChange?.(inputValue);
+          setIsOpen(false);
+        }
+        break;
+      }
+      case 'Escape': {
+        setIsOpen(false);
+        setActiveIndex(-1);
+        break;
+      }
+    }
+  };
+
+  // Scroll active option into view
+  useEffect(() => {
+    if (activeIndex < 0) return;
+    const optionId = `${listboxId}-opt-${activeIndex}`;
+    document.getElementById(optionId)?.scrollIntoView({ block: 'nearest' });
+  }, [activeIndex, listboxId]);
+
+  const activeDescendant =
+    activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined;
+
+  const animStyle: CSSProperties = reducedMotion
+    ? {}
+    : { animation: 'tkxAutoFadeIn 120ms ease forwards' };
+
+  const dropdown =
+    isOpen && typeof document !== 'undefined' && dropdownPos
+      ? createPortal(
+          <ul
+            id={listboxId}
+            role="listbox"
+            aria-label={safeLabel}
+            className={tkx('absolute z-[9200] list-none m-0 p-1 rounded-lg overflow-y-auto font-sans')}
+            style={{
+              top: dropdownPos.top,
+              left: dropdownPos.left,
+              width: dropdownPos.width,
+              maxHeight: MAX_DROPDOWN_HEIGHT,
+              backgroundColor: theme.surface,
+              border: `1px solid ${theme.border}`,
+              boxShadow: `0 8px 24px rgba(0,0,0,0.15)`,
+              ...animStyle,
+            }}
+          >
+            {isLoading ? (
+              <li
+                role="option"
+                aria-selected={false}
+                aria-disabled="true"
+                className={tkx('flex items-center gap-2 px-3 py-2 text-sm')}
+                style={{ color: theme.textMuted }}
+              >
+                <Spinner color={theme.primary} />
+                Loading...
+              </li>
+            ) : filtered.length === 0 ? (
+              <li
+                role="option"
+                aria-selected={false}
+                aria-disabled="true"
+                className={tkx('px-3 py-2 text-sm text-center')}
+                style={{ color: theme.textMuted }}
+              >
+                {safeEmptyMessage}
+              </li>
+            ) : (
+              filtered.map((option, idx) => {
+                const isActive = idx === activeIndex;
+                const safeOptionLabel = sanitizeString(option.label);
+                const safeDesc = option.description
+                  ? sanitizeString(option.description)
+                  : null;
+
+                return (
+                  <li
+                    key={option.value}
+                    id={`${listboxId}-opt-${idx}`}
+                    role="option"
+                    aria-selected={option.value === value}
+                    aria-disabled={option.disabled || undefined}
+                    className={tkx(
+                      'flex items-center gap-2 px-3 py-2 text-sm rounded-md cursor-pointer',
+                      option.disabled ? 'opacity-50 cursor-not-allowed' : '',
+                    )}
+                    style={{
+                      backgroundColor: isActive ? theme.surfaceAlt : 'transparent',
+                      color: option.disabled ? theme.textMuted : theme.text,
+                      transition: reducedMotion ? 'none' : 'background-color 100ms ease',
+                    }}
+                    onMouseEnter={() => !option.disabled && setActiveIndex(idx)}
+                    onMouseDown={(e) => {
+                      e.preventDefault(); // keep focus on input
+                      selectOption(option);
+                    }}
+                  >
+                    {option.icon && (
+                      <span aria-hidden="true" className={tkx('flex-shrink-0')}>
+                        {option.icon}
+                      </span>
+                    )}
+                    <span className={tkx('flex flex-col min-w-0')}>
+                      <span className={tkx('truncate')}>{safeOptionLabel}</span>
+                      {safeDesc && (
+                        <span
+                          className={tkx('text-xs truncate')}
+                          style={{ color: theme.textMuted }}
+                        >
+                          {safeDesc}
+                        </span>
+                      )}
+                    </span>
+                    {option.value === value && (
+                      <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        fill="none"
+                        aria-hidden="true"
+                        className={tkx('ml-auto flex-shrink-0')}
+                      >
+                        <path
+                          d="M3 8l3.5 3.5L13 5"
+                          stroke={theme.primary}
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    )}
+                  </li>
+                );
+              })
+            )}
+          </ul>,
+          document.body,
+        )
+      : null;
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={tkx('relative font-sans', className ?? '')}
+      style={style}
+    >
+      {/* Label */}
+      <label
+        htmlFor={inputId}
+        className={tkx('block text-sm font-medium mb-1.5')}
+        style={{ color: theme.text }}
+      >
+        {safeLabel}
+      </label>
+
+      {/* Input */}
+      <div
+        className={tkx('relative flex items-center')}
+        style={{
+          backgroundColor: theme.surface,
+          border: `1px solid ${isOpen ? theme.primary : theme.border}`,
+          borderRadius: 8,
+          transition: reducedMotion ? 'none' : 'border-color 150ms ease',
+        }}
+      >
+        <input
+          ref={inputRef}
+          id={inputId}
+          type="text"
+          role="combobox"
+          aria-expanded={isOpen}
+          aria-controls={listboxId}
+          aria-activedescendant={activeDescendant}
+          aria-autocomplete="list"
+          aria-label={safeLabel}
+          value={inputValue}
+          placeholder={placeholder}
+          onChange={handleInputChange}
+          onFocus={() => setIsOpen(true)}
+          onKeyDown={handleKeyDown}
+          className={tkx(
+            'w-full bg-transparent border-none outline-none text-sm py-2.5 px-3',
+            'placeholder:opacity-50',
+          )}
+          style={{
+            color: theme.text,
+          }}
+        />
+        {isLoading && (
+          <span className={tkx('pr-3')}>
+            <Spinner color={theme.primary} />
+          </span>
+        )}
+      </div>
+
+      {dropdown}
+
+      {/* Keyframes */}
+      {isOpen && !reducedMotion && (
+        <style>{`
+          @keyframes tkxAutoFadeIn {
+            from { opacity: 0; transform: translateY(4px); }
+            to { opacity: 1; transform: translateY(0); }
+          }
+        `}</style>
+      )}
+    </div>
+  );
+}
+
+export default TkxAutocomplete;

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>
+  );
+}