tekivex-ui 2.1.0 → 2.3.0

package/src/components/TkxResult.tsx

@@ -0,0 +1,128 @@
+import { type ReactNode } from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export type ResultStatus = 'success' | 'error' | 'warning' | 'info' | '404' | '403' | '500';
+
+export interface TkxResultProps {
+  status: ResultStatus;
+  title: string;
+  subTitle?: string;
+  icon?: ReactNode;
+  extra?: ReactNode;
+}
+
+// ── Status Icons (SVG) ──────────────────────────────────────────────────────
+
+const STATUS_ICONS: Record<ResultStatus, (color: string) => ReactNode> = {
+  success: (c) => (
+    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
+      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
+      <path d="M22 37l9 9 19-19" stroke={c} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  error: (c) => (
+    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
+      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
+      <path d="M26 26l20 20M46 26L26 46" stroke={c} strokeWidth="4" strokeLinecap="round" />
+    </svg>
+  ),
+  warning: (c) => (
+    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
+      <path d="M36 6L4 64h64L36 6z" stroke={c} strokeWidth="3" fill={`${c}18`} />
+      <path d="M36 30v16" stroke={c} strokeWidth="4" strokeLinecap="round" />
+      <circle cx="36" cy="54" r="2.5" fill={c} />
+    </svg>
+  ),
+  info: (c) => (
+    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
+      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
+      <path d="M36 32v18" stroke={c} strokeWidth="4" strokeLinecap="round" />
+      <circle cx="36" cy="22" r="2.5" fill={c} />
+    </svg>
+  ),
+  '404': (c) => (
+    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
+      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
+      <text x="36" y="44" textAnchor="middle" fontSize="22" fontWeight="bold" fill={c}>404</text>
+    </svg>
+  ),
+  '403': (c) => (
+    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
+      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
+      <path d="M28 30h16v16H28z" stroke={c} strokeWidth="3" fill="none" />
+      <path d="M32 30v-4a4 4 0 018 0v4" stroke={c} strokeWidth="3" fill="none" />
+    </svg>
+  ),
+  '500': (c) => (
+    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
+      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
+      <text x="36" y="44" textAnchor="middle" fontSize="22" fontWeight="bold" fill={c}>500</text>
+    </svg>
+  ),
+};
+
+// ── Color Mapping ────────────────────────────────────────────────────────────
+
+function getStatusColor(status: ResultStatus, theme: ReturnType<typeof useTheme>): string {
+  switch (status) {
+    case 'success': return theme.success;
+    case 'error':
+    case '500': return theme.danger;
+    case 'warning': return theme.warning;
+    case 'info': return theme.info;
+    case '404':
+    case '403': return theme.textMuted;
+  }
+}
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function TkxResult({ status, title, subTitle, icon, extra }: TkxResultProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const accentColor = getStatusColor(status, theme);
+  const safeTitle = sanitizeString(title);
+  const safeSubTitle = subTitle ? sanitizeString(subTitle) : undefined;
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className={tkx('flex flex-col items-center text-center px-6 py-12 font-sans')}
+      style={{
+        animation: reducedMotion ? 'none' : 'tkxFadeIn 0.3s ease',
+      }}
+    >
+      <div className={tkx('mb-6')}>
+        {icon ?? STATUS_ICONS[status](accentColor)}
+      </div>
+
+      <h2
+        className={tkx('text-xl font-semibold m-0 mb-2')}
+        style={{ color: theme.text }}
+      >
+        {safeTitle}
+      </h2>
+
+      {safeSubTitle && (
+        <p
+          className={tkx('text-sm m-0 mb-6 max-w-md leading-relaxed')}
+          style={{ color: theme.textMuted }}
+        >
+          {safeSubTitle}
+        </p>
+      )}
+
+      {extra && (
+        <div className={tkx('flex items-center gap-3 mt-4')}>
+          {extra}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/TkxSegmented.tsx

@@ -0,0 +1,169 @@
+import { type ReactNode, useState, useRef, useEffect, useCallback } from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export interface SegmentedOption {
+  value: string;
+  label: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface TkxSegmentedProps {
+  options: SegmentedOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  size?: 'sm' | 'md' | 'lg';
+  block?: boolean;
+}
+
+// ── Size Map ─────────────────────────────────────────────────────────────────
+
+const SIZE_MAP = {
+  sm: { height: 28, fontSize: 12, px: 10 },
+  md: { height: 36, fontSize: 14, px: 16 },
+  lg: { height: 44, fontSize: 16, px: 20 },
+} as const;
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function TkxSegmented({
+  options,
+  value,
+  onChange,
+  size = 'md',
+  block = false,
+}: TkxSegmentedProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [activeIndex, setActiveIndex] = useState(() =>
+    Math.max(0, options.findIndex((o) => o.value === value)),
+  );
+  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({});
+  const dims = SIZE_MAP[size];
+
+  // Sync external value
+  useEffect(() => {
+    const idx = options.findIndex((o) => o.value === value);
+    if (idx >= 0) setActiveIndex(idx);
+  }, [value, options]);
+
+  // Sliding indicator position
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const buttons = container.querySelectorAll<HTMLButtonElement>('[data-seg-btn]');
+    const btn = buttons[activeIndex];
+    if (!btn) return;
+    setIndicatorStyle({
+      left: btn.offsetLeft,
+      width: btn.offsetWidth,
+      height: btn.offsetHeight,
+      transition: reducedMotion ? 'none' : 'left 0.2s ease, width 0.2s ease',
+    });
+  }, [activeIndex, options, reducedMotion]);
+
+  const handleSelect = useCallback(
+    (idx: number) => {
+      const opt = options[idx];
+      if (!opt || opt.disabled) return;
+      setActiveIndex(idx);
+      onChange?.(opt.value);
+    },
+    [options, onChange],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      let next = activeIndex;
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        next = (activeIndex + 1) % options.length;
+        while (options[next]?.disabled && next !== activeIndex) {
+          next = (next + 1) % options.length;
+        }
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        next = (activeIndex - 1 + options.length) % options.length;
+        while (options[next]?.disabled && next !== activeIndex) {
+          next = (next - 1 + options.length) % options.length;
+        }
+      }
+      if (next !== activeIndex) {
+        handleSelect(next);
+        const container = containerRef.current;
+        const buttons = container?.querySelectorAll<HTMLButtonElement>('[data-seg-btn]');
+        buttons?.[next]?.focus();
+      }
+    },
+    [activeIndex, options, handleSelect],
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      role="radiogroup"
+      aria-label="Segmented control"
+      className={tkx('relative inline-flex items-center rounded-lg p-1')}
+      style={{
+        backgroundColor: theme.surfaceAlt,
+        border: `1px solid ${theme.border}`,
+        width: block ? '100%' : undefined,
+      }}
+      onKeyDown={handleKeyDown}
+    >
+      {/* Sliding indicator */}
+      <div
+        aria-hidden="true"
+        className={tkx('absolute top-1 rounded-md')}
+        style={{
+          ...indicatorStyle,
+          backgroundColor: theme.surface,
+          boxShadow: `0 1px 3px ${theme.border}`,
+          zIndex: 0,
+        }}
+      />
+
+      {options.map((opt, idx) => {
+        const isActive = idx === activeIndex;
+        const safeLabel = sanitizeString(opt.label);
+        return (
+          <button
+            key={opt.value}
+            data-seg-btn
+            type="button"
+            role="radio"
+            aria-checked={isActive}
+            aria-disabled={opt.disabled || undefined}
+            disabled={opt.disabled}
+            tabIndex={isActive ? 0 : -1}
+            className={tkx(
+              'relative z-10 flex items-center justify-center gap-1 rounded-md border-0 cursor-pointer',
+              'font-sans whitespace-nowrap select-none',
+            )}
+            style={{
+              height: dims.height,
+              fontSize: dims.fontSize,
+              padding: `0 ${dims.px}px`,
+              flex: block ? 1 : undefined,
+              color: isActive ? theme.text : theme.textMuted,
+              backgroundColor: 'transparent',
+              opacity: opt.disabled ? 0.4 : 1,
+              fontWeight: isActive ? 600 : 400,
+              transition: reducedMotion ? 'none' : 'color 0.15s ease',
+            }}
+            onClick={() => handleSelect(idx)}
+          >
+            {opt.icon && <span aria-hidden="true">{opt.icon}</span>}
+            {safeLabel}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/TkxSelect.tsx

@@ -44,6 +44,10 @@ export interface TkxSelectProps {
   onChange?: (value: string | string[]) => void;
   renderOption?: (option: SelectOption, isSelected: boolean) => ReactNode;
   maxMenuHeight?: number;
+  /** Enable virtual scrolling for the dropdown. Defaults to auto (enabled when 100+ options). */
+  virtualScroll?: boolean;
+  /** Fixed option height in pixels for virtual scroll calculations. Default: 36 */
+  optionHeight?: number;
   id?: string;
   className?: string;
   style?: CSSProperties;
@@ -139,6 +143,8 @@ export function TkxSelect({
   onChange,
   renderOption,
   maxMenuHeight = 280,
+  virtualScroll,
+  optionHeight = 36,
   id: idProp,
   className,
   style,
@@ -172,6 +178,32 @@ export function TkxSelect({
   const sz = SIZE_MAP[size];
   const hasError = isInvalid || !!errorMessage;
 
+  // ── Virtual scroll for options ─────────────────────────────────────────
+
+  const optionsListRef = useRef<HTMLDivElement>(null);
+  const [optScrollTop, setOptScrollTop] = useState(0);
+  const [optContainerHeight, setOptContainerHeight] = useState(0);
+
+  const handleOptScroll = useCallback(() => {
+    if (!optionsListRef.current) return;
+    setOptScrollTop(optionsListRef.current.scrollTop);
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setOptScrollTop(0);
+      return;
+    }
+    const el = optionsListRef.current;
+    if (!el) return;
+    setOptContainerHeight(el.clientHeight);
+    const ro = new ResizeObserver(() => {
+      setOptContainerHeight(el.clientHeight);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [isOpen]);
+
   // ── Filtered + grouped options ────────────────────────────────────────────
 
   const filteredOptions = searchable && search
@@ -182,6 +214,25 @@ export function TkxSelect({
 
   const flatEnabled = filteredOptions.filter((o) => !o.disabled);
 
+  const hasGroups = filteredOptions.some((o) => !!o.group);
+  const isVirtualSelect =
+    virtualScroll !== undefined
+      ? virtualScroll
+      : filteredOptions.length >= 100;
+  // Only virtualize when we have a flat list (no groups) for simplicity
+  const useVirtual = isVirtualSelect && !hasGroups;
+
+  const OPTION_OVERSCAN = 8;
+  const virtualTotalHeight = filteredOptions.length * optionHeight;
+  const vStartIndex = useVirtual
+    ? Math.max(0, Math.floor(optScrollTop / optionHeight) - OPTION_OVERSCAN)
+    : 0;
+  const vEndIndex = useVirtual
+    ? Math.min(filteredOptions.length, Math.ceil((optScrollTop + optContainerHeight) / optionHeight) + OPTION_OVERSCAN)
+    : filteredOptions.length;
+  const visibleOptions = useVirtual ? filteredOptions.slice(vStartIndex, vEndIndex) : filteredOptions;
+  const vOffsetY = vStartIndex * optionHeight;
+
   const groups = filteredOptions.reduce<Record<string, SelectOption[]>>(
     (acc, opt) => {
       const g = opt.group ?? '';
@@ -285,11 +336,23 @@ export function TkxSelect({
 
   useEffect(() => {
     if (!isOpen || activeIndex < 0) return;
-    const el = listRef.current?.querySelector(
-      `[data-idx="${activeIndex}"]`,
-    ) as HTMLElement | null;
-    el?.scrollIntoView({ block: 'nearest' });
-  }, [activeIndex, isOpen]);
+    if (useVirtual && optionsListRef.current) {
+      // For virtual scroll, compute position directly
+      const itemTop = activeIndex * optionHeight;
+      const itemBottom = itemTop + optionHeight;
+      const el = optionsListRef.current;
+      if (itemTop < el.scrollTop) {
+        el.scrollTop = itemTop;
+      } else if (itemBottom > el.scrollTop + el.clientHeight) {
+        el.scrollTop = itemBottom - el.clientHeight;
+      }
+    } else {
+      const el = listRef.current?.querySelector(
+        `[data-idx="${activeIndex}"]`,
+      ) as HTMLElement | null;
+      el?.scrollIntoView({ block: 'nearest' });
+    }
+  }, [activeIndex, isOpen, useVirtual, optionHeight]);
 
   // ── Keyboard: trigger button ───────────────────────────────────────────────
 
@@ -494,13 +557,151 @@ export function TkxSelect({
 
           {/* Options list */}
           <div
-            ref={listRef}
+            ref={(el) => {
+              (listRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+              (optionsListRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+            }}
+            onScroll={useVirtual ? handleOptScroll : undefined}
             style={{
               overflowY: 'auto',
               flexGrow: 1,
               maxHeight: maxMenuHeight - (searchable ? 48 : 0),
             }}
           >
+            {useVirtual ? (
+              /* Virtualized flat list (no groups) */
+              <div style={{ height: virtualTotalHeight, position: 'relative' }}>
+                <div style={{ position: 'absolute', top: vOffsetY, left: 0, right: 0 }}>
+                  {visibleOptions.map((opt) => {
+                    const flatIdx = flatEnabled.indexOf(opt);
+                    const isActive = flatIdx === activeIndex;
+                    const isSelected = selectedValues.includes(opt.value);
+
+                    const optionContent = renderOption ? (
+                      renderOption(opt, isSelected)
+                    ) : (
+                      <span
+                        style={{
+                          display: 'flex',
+                          flexDirection: 'column',
+                          flex: 1,
+                          minWidth: 0,
+                        }}
+                      >
+                        <span
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 8,
+                          }}
+                        >
+                          {opt.icon && (
+                            <span style={{ flexShrink: 0, display: 'flex' }}>
+                              {opt.icon}
+                            </span>
+                          )}
+                          <span
+                            style={{
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              whiteSpace: 'nowrap',
+                            }}
+                          >
+                            {sanitizeString(opt.label)}
+                          </span>
+                        </span>
+                        {opt.description && (
+                          <span
+                            style={{
+                              fontSize: '12px',
+                              color: theme.textMuted,
+                              marginTop: 1,
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              whiteSpace: 'nowrap',
+                            }}
+                          >
+                            {sanitizeString(opt.description)}
+                          </span>
+                        )}
+                      </span>
+                    );
+
+                    return (
+                      <div
+                        key={opt.value}
+                        id={`${id}-opt-${opt.value}`}
+                        data-idx={flatIdx >= 0 ? flatIdx : undefined}
+                        role="option"
+                        aria-selected={isSelected}
+                        aria-disabled={opt.disabled || undefined}
+                        onClick={() => !opt.disabled && commitValue(opt.value)}
+                        onMouseEnter={() =>
+                          !opt.disabled && flatIdx >= 0 && setActiveIndex(flatIdx)
+                        }
+                        style={{
+                          height: optionHeight,
+                          boxSizing: 'border-box',
+                          padding: `0 ${sz.px}`,
+                          fontSize: sz.fontSize,
+                          fontFamily: 'inherit',
+                          color: opt.disabled ? theme.textMuted : theme.text,
+                          backgroundColor: isActive
+                            ? `${theme.primary}22`
+                            : isSelected
+                            ? `${theme.primary}12`
+                            : 'transparent',
+                          cursor: opt.disabled ? 'not-allowed' : 'pointer',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                          gap: 8,
+                          transition: 'background-color 80ms',
+                          opacity: opt.disabled ? 0.5 : 1,
+                          userSelect: 'none',
+                          touchAction: 'manipulation',
+                        }}
+                      >
+                        {optionContent}
+                        {isSelected && !renderOption && (
+                          <svg
+                            width="14"
+                            height="14"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke={theme.primary}
+                            strokeWidth="2.5"
+                            aria-hidden="true"
+                            style={{ flexShrink: 0 }}
+                          >
+                            <path d="M20 6L9 17l-5-5" />
+                          </svg>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+                {filteredOptions.length === 0 && (
+                  <div
+                    style={{
+                      padding: `${sz.py} ${sz.px}`,
+                      fontSize: sz.fontSize,
+                      fontFamily: 'inherit',
+                      color: theme.textMuted,
+                      textAlign: 'center',
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                    }}
+                  >
+                    {isLoading ? 'Loading\u2026' : 'No options found'}
+                  </div>
+                )}
+              </div>
+            ) : (
+            /* Non-virtual: grouped rendering */
+            <>
             {Object.entries(groups).map(([group, groupOpts]) => (
               <div key={group}>
                 {group && (
@@ -646,6 +847,8 @@ export function TkxSelect({
                 {isLoading ? 'Loading…' : 'No options found'}
               </div>
             )}
+            </>
+            )}
           </div>
         </div>,
         document.body,