tekivex-ui 2.0.0

package/src/components/TkxOTP.tsx

@@ -0,0 +1,295 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useId,
+  type CSSProperties,
+  type ReactNode,
+  type ClipboardEvent,
+  type KeyboardEvent,
+} from 'react';
+import { useTheme } from '../themes';
+import { tkx, cx } from '../engine/tkx';
+import { sanitizeString } from '../engine/security';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export interface TkxOTPProps {
+  length?: number;
+  value?: string;
+  onChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
+  type?: 'number' | 'alphanumeric' | 'alpha';
+  mask?: boolean;
+  autoFocus?: boolean;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  errorMessage?: string;
+  hint?: string;
+  size?: 'sm' | 'md' | 'lg';
+  separator?: ReactNode;
+  separatorPosition?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const SIZE_MAP = {
+  sm: { box: '36px', fontSize: '1rem',  gap: '6px' },
+  md: { box: '44px', fontSize: '1.25rem', gap: '8px' },
+  lg: { box: '52px', fontSize: '1.5rem',  gap: '10px' },
+};
+
+const TYPE_PATTERN: Record<NonNullable<TkxOTPProps['type']>, RegExp> = {
+  number:       /^\d$/,
+  alphanumeric: /^[a-zA-Z0-9]$/,
+  alpha:        /^[a-zA-Z]$/,
+};
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function filterByType(char: string, type: NonNullable<TkxOTPProps['type']>): string {
+  return TYPE_PATTERN[type].test(char) ? char.toUpperCase() : '';
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function TkxOTP({
+  length = 6,
+  value,
+  onChange,
+  onComplete,
+  type = 'number',
+  mask = false,
+  autoFocus = false,
+  isDisabled = false,
+  isInvalid = false,
+  errorMessage,
+  hint,
+  size = 'md',
+  separator,
+  separatorPosition,
+  className,
+  style,
+}: TkxOTPProps) {
+  const theme = useTheme();
+  const groupId = useId();
+  const hintId = `${groupId}-hint`;
+  const errorId = `${groupId}-error`;
+
+  const isControlled = value !== undefined;
+
+  const toArr = (v: string): string[] => {
+    const arr = v.split('').slice(0, length);
+    while (arr.length < length) arr.push('');
+    return arr;
+  };
+
+  const [internalDigits, setInternalDigits] = useState<string[]>(() =>
+    toArr(isControlled ? value! : ''),
+  );
+
+  const digits = isControlled ? toArr(value!) : internalDigits;
+
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  const sz = SIZE_MAP[size];
+  const hasError = isInvalid || !!errorMessage;
+  const isComplete = digits.every((d) => d !== '');
+
+  const safeHint = hint ? sanitizeString(hint) : undefined;
+  const safeError = errorMessage ? sanitizeString(errorMessage) : undefined;
+
+  // Compute success/error state colours
+  const boxBorder = (idx: number): string => {
+    if (hasError) return theme.danger;
+    if (isComplete) return theme.success;
+    return theme.border;
+  };
+
+  // Auto focus first input
+  useEffect(() => {
+    if (autoFocus) {
+      inputRefs.current[0]?.focus();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const setDigits = useCallback((next: string[]) => {
+    if (!isControlled) setInternalDigits(next);
+    const joined = next.join('');
+    onChange?.(joined);
+    if (next.every((d) => d !== '')) {
+      onComplete?.(joined);
+    }
+  }, [isControlled, onChange, onComplete]);
+
+  const focusAt = (idx: number) => {
+    const clamped = Math.max(0, Math.min(length - 1, idx));
+    inputRefs.current[clamped]?.focus();
+  };
+
+  const handleKeyDown = (idx: number) => (e: KeyboardEvent<HTMLInputElement>) => {
+    if (isDisabled) return;
+
+    if (e.key === 'Backspace') {
+      e.preventDefault();
+      if (digits[idx] !== '') {
+        const next = [...digits];
+        next[idx] = '';
+        setDigits(next);
+      } else if (idx > 0) {
+        const next = [...digits];
+        next[idx - 1] = '';
+        setDigits(next);
+        focusAt(idx - 1);
+      }
+      return;
+    }
+
+    if (e.key === 'Delete') {
+      e.preventDefault();
+      const next = [...digits];
+      next[idx] = '';
+      setDigits(next);
+      return;
+    }
+
+    if (e.key === 'ArrowLeft') { e.preventDefault(); focusAt(idx - 1); return; }
+    if (e.key === 'ArrowRight') { e.preventDefault(); focusAt(idx + 1); return; }
+    if (e.key === 'Home') { e.preventDefault(); focusAt(0); return; }
+    if (e.key === 'End') { e.preventDefault(); focusAt(length - 1); return; }
+  };
+
+  const handleInput = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (isDisabled) return;
+    // The value might be empty (deletion handled by keydown) or contain a char
+    const raw = e.target.value;
+    // Take only the last character typed (handles replacement)
+    const char = raw.slice(-1);
+    if (!char) return;
+
+    const filtered = filterByType(char, type);
+    if (!filtered) return;
+
+    const next = [...digits];
+    next[idx] = filtered;
+    setDigits(next);
+
+    // Advance focus
+    if (idx < length - 1) focusAt(idx + 1);
+  };
+
+  const handlePaste = (idx: number) => (e: ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    if (isDisabled) return;
+    const pasted = e.clipboardData.getData('text');
+    const chars = pasted.split('').map((c) => filterByType(c, type)).filter(Boolean);
+    if (!chars.length) return;
+
+    const next = [...digits];
+    let cursor = idx;
+    for (const ch of chars) {
+      if (cursor >= length) break;
+      next[cursor] = ch;
+      cursor++;
+    }
+    setDigits(next);
+    focusAt(Math.min(cursor, length - 1));
+  };
+
+  const describedBy = [safeHint && hintId, hasError && errorId].filter(Boolean).join(' ') || undefined;
+
+  return (
+    <div className={cx(tkx('flex flex-col gap-2 w-fit'), className)} style={style}>
+      <div
+        role="group"
+        aria-label="One-time password"
+        aria-describedby={describedBy}
+        className={tkx('flex items-center')}
+        style={{ gap: sz.gap }}
+      >
+        {Array.from({ length }, (_, idx) => {
+          const borderCol = boxBorder(idx);
+          const isFocusedEl = typeof document !== 'undefined' && document.activeElement === inputRefs.current[idx];
+
+          return (
+            <div key={idx} className={tkx('flex items-center')} style={{ gap: sz.gap }}>
+              {/* Separator before this index (when separatorPosition === idx) */}
+              {separator && separatorPosition === idx && idx !== 0 && (
+                <span
+                  aria-hidden="true"
+                  style={{ color: theme.textMuted, userSelect: 'none', flexShrink: 0 }}
+                >
+                  {separator}
+                </span>
+              )}
+
+              <input
+                ref={(el) => { inputRefs.current[idx] = el; }}
+                type={mask ? 'password' : 'text'}
+                inputMode={type === 'number' ? 'numeric' : 'text'}
+                maxLength={1}
+                value={digits[idx]}
+                disabled={isDisabled}
+                aria-label={`Digit ${idx + 1} of ${length}`}
+                autoComplete="one-time-code"
+                spellCheck={false}
+                onChange={handleInput(idx)}
+                onKeyDown={handleKeyDown(idx)}
+                onPaste={handlePaste(idx)}
+                onFocus={(e) => e.target.select()}
+                style={{
+                  width: sz.box,
+                  height: sz.box,
+                  textAlign: 'center',
+                  fontSize: sz.fontSize,
+                  fontFamily: 'monospace',
+                  fontWeight: 600,
+                  border: `1.5px solid ${borderCol}`,
+                  borderRadius: '8px',
+                  backgroundColor: isDisabled ? theme.surfaceAlt : theme.surface,
+                  color: theme.text,
+                  outline: 'none',
+                  boxShadow: 'none',
+                  cursor: isDisabled ? 'not-allowed' : 'text',
+                  transition: 'border-color 150ms ease, box-shadow 150ms ease',
+                  opacity: isDisabled ? 0.6 : 1,
+                  // Focus ring applied via style since we can't rely on :focus in inline styles
+                }}
+                onFocusCapture={(e) => {
+                  if (!isDisabled) {
+                    (e.currentTarget as HTMLInputElement).style.borderColor = hasError ? theme.danger : theme.primary;
+                    (e.currentTarget as HTMLInputElement).style.boxShadow = `0 0 0 3px ${hasError ? theme.danger : theme.primary}33`;
+                  }
+                }}
+                onBlurCapture={(e) => {
+                  (e.currentTarget as HTMLInputElement).style.borderColor = boxBorder(idx);
+                  (e.currentTarget as HTMLInputElement).style.boxShadow = 'none';
+                }}
+              />
+            </div>
+          );
+        })}
+      </div>
+
+      {safeHint && !safeError && (
+        <span id={hintId} className={tkx('text-xs')} style={{ color: theme.textMuted }}>
+          {safeHint}
+        </span>
+      )}
+      {safeError && (
+        <span id={errorId} role="alert" className={tkx('text-xs flex items-center gap-1')} style={{ color: theme.danger }}>
+          <svg width="12" height="12" 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>
+          {safeError}
+        </span>
+      )}
+    </div>
+  );
+}
+
+TkxOTP.displayName = 'TkxOTP';

package/src/components/TkxPagination.tsx

@@ -0,0 +1,388 @@
+import { useState, useId } from 'react';
+import { useTheme } from '../themes';
+import { tkx } from '../engine/tkx';
+import { sanitizeString } from '../engine/security';
+
+export interface TkxPaginationProps {
+  total: number;
+  pageSize?: number;
+  page?: number;
+  defaultPage?: number;
+  onChange?: (page: number) => void;
+  siblingCount?: number;
+  showEdges?: boolean;
+  showPageSize?: boolean;
+  onPageSizeChange?: (size: number) => void;
+  pageSizeOptions?: number[];
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'outline' | 'ghost';
+}
+
+const SIZE_MAP = {
+  sm: { height: 28, minWidth: 28, fontSize: '0.75rem', px: 8 },
+  md: { height: 36, minWidth: 36, fontSize: '0.875rem', px: 10 },
+  lg: { height: 44, minWidth: 44, fontSize: '1rem', px: 12 },
+};
+
+const ELLIPSIS = '…';
+
+function buildPageRange(
+  currentPage: number,
+  totalPages: number,
+  siblingCount: number,
+  showEdges: boolean,
+): (number | typeof ELLIPSIS)[] {
+  if (totalPages <= 1) return [1];
+
+  const range = (lo: number, hi: number): number[] =>
+    Array.from({ length: hi - lo + 1 }, (_, i) => lo + i);
+
+  const siblingStart = Math.max(currentPage - siblingCount, 1);
+  const siblingEnd = Math.min(currentPage + siblingCount, totalPages);
+
+  const showLeftEllipsis = siblingStart > 2;
+  const showRightEllipsis = siblingEnd < totalPages - 1;
+
+  if (!showEdges) {
+    const pages: (number | typeof ELLIPSIS)[] = [];
+    if (showLeftEllipsis) pages.push(ELLIPSIS);
+    pages.push(...range(siblingStart, siblingEnd));
+    if (showRightEllipsis) pages.push(ELLIPSIS);
+    return pages;
+  }
+
+  const pages: (number | typeof ELLIPSIS)[] = [1];
+
+  if (showLeftEllipsis) {
+    pages.push(ELLIPSIS);
+  } else {
+    for (let i = 2; i < siblingStart; i++) pages.push(i);
+  }
+
+  pages.push(...range(siblingStart, siblingEnd));
+
+  if (showRightEllipsis) {
+    pages.push(ELLIPSIS);
+  } else {
+    for (let i = siblingEnd + 1; i < totalPages; i++) pages.push(i);
+  }
+
+  if (totalPages > 1) pages.push(totalPages);
+
+  // deduplicate preserving order
+  const seen = new Set<number | typeof ELLIPSIS>();
+  const result: (number | typeof ELLIPSIS)[] = [];
+  for (const p of pages) {
+    const key = p === ELLIPSIS ? `${ELLIPSIS}${result.length}` : p;
+    if (!seen.has(p === ELLIPSIS ? (key as unknown as typeof ELLIPSIS) : p)) {
+      seen.add(p === ELLIPSIS ? (key as unknown as typeof ELLIPSIS) : p);
+      result.push(p);
+    }
+  }
+  return result;
+}
+
+function buildPages(
+  currentPage: number,
+  totalPages: number,
+  siblingCount: number,
+  showEdges: boolean,
+): (number | string)[] {
+  if (totalPages <= 1) return [1];
+
+  const range = (lo: number, hi: number): number[] =>
+    Array.from({ length: Math.max(0, hi - lo + 1) }, (_, i) => lo + i);
+
+  const siblingStart = Math.max(currentPage - siblingCount, 1);
+  const siblingEnd = Math.min(currentPage + siblingCount, totalPages);
+
+  if (!showEdges) {
+    const pages: (number | string)[] = [];
+    if (siblingStart > 1) pages.push('...');
+    pages.push(...range(siblingStart, siblingEnd));
+    if (siblingEnd < totalPages) pages.push('...');
+    return pages;
+  }
+
+  const leftBoundary = 1;
+  const rightBoundary = totalPages;
+
+  const showLeftEllipsis = siblingStart > leftBoundary + 2;
+  const showRightEllipsis = siblingEnd < rightBoundary - 2;
+
+  const result: (number | string)[] = [];
+  result.push(1);
+
+  if (showLeftEllipsis) {
+    result.push('left-ellipsis');
+  } else {
+    result.push(...range(2, siblingStart - 1));
+  }
+
+  result.push(...range(Math.max(siblingStart, 2), Math.min(siblingEnd, totalPages - 1)));
+
+  if (showRightEllipsis) {
+    result.push('right-ellipsis');
+  } else {
+    result.push(...range(siblingEnd + 1, totalPages - 1));
+  }
+
+  if (totalPages > 1) result.push(totalPages);
+
+  // deduplicate numbers
+  const seen = new Set<number>();
+  const deduped: (number | string)[] = [];
+  for (const p of result) {
+    if (typeof p === 'number') {
+      if (!seen.has(p)) { seen.add(p); deduped.push(p); }
+    } else {
+      deduped.push(p);
+    }
+  }
+  return deduped;
+  void buildPageRange;
+}
+
+export function TkxPagination({
+  total,
+  pageSize: pageSizeProp = 10,
+  page,
+  defaultPage = 1,
+  onChange,
+  siblingCount = 1,
+  showEdges = true,
+  showPageSize = false,
+  onPageSizeChange,
+  pageSizeOptions = [10, 25, 50, 100],
+  size = 'md',
+  variant = 'default',
+}: TkxPaginationProps) {
+  const theme = useTheme();
+  const selectId = useId();
+
+  const isControlled = page !== undefined;
+  const [internalPage, setInternalPage] = useState(defaultPage);
+  const currentPage = isControlled ? page! : internalPage;
+
+  const [internalPageSize, setInternalPageSize] = useState(pageSizeProp);
+  const pageSize = pageSizeProp;
+
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+
+  const goTo = (p: number) => {
+    const next = Math.min(Math.max(p, 1), totalPages);
+    if (next === currentPage) return;
+    if (!isControlled) setInternalPage(next);
+    onChange?.(next);
+  };
+
+  const handlePageSizeChange = (newSize: number) => {
+    setInternalPageSize(newSize);
+    onPageSizeChange?.(newSize);
+    goTo(1);
+  };
+
+  const pages = buildPages(currentPage, totalPages, siblingCount, showEdges);
+  const s = SIZE_MAP[size];
+
+  const itemStart = Math.min((currentPage - 1) * pageSize + 1, total);
+  const itemEnd = Math.min(currentPage * pageSize, total);
+
+  const getButtonStyle = (isActive: boolean, isDisabled: boolean) => {
+    const base: React.CSSProperties = {
+      height: s.height,
+      minWidth: s.minWidth,
+      paddingLeft: s.px,
+      paddingRight: s.px,
+      fontSize: s.fontSize,
+      borderRadius: '8px',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: isDisabled ? 'not-allowed' : 'pointer',
+      border: 'none',
+      outline: 'none',
+      fontFamily: 'inherit',
+      transition: 'background 120ms ease, color 120ms ease',
+      opacity: isDisabled ? 0.4 : 1,
+    };
+
+    if (isActive) {
+      return {
+        ...base,
+        backgroundColor: theme.primary,
+        color: theme.bg,
+        fontWeight: 600,
+        boxShadow: `0 0 0 2px ${theme.primary}44`,
+      };
+    }
+
+    if (variant === 'default') {
+      return {
+        ...base,
+        backgroundColor: theme.surface,
+        color: theme.text,
+        border: `1px solid ${theme.border}`,
+      };
+    }
+    if (variant === 'outline') {
+      return {
+        ...base,
+        backgroundColor: 'transparent',
+        color: theme.text,
+        border: `1px solid ${theme.border}`,
+      };
+    }
+    // ghost
+    return {
+      ...base,
+      backgroundColor: 'transparent',
+      color: theme.text,
+    };
+  };
+
+  const NavIcon = ({ d }: { d: string }) => (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
+      <polyline points={d} />
+    </svg>
+  );
+
+  return (
+    <nav aria-label="Pagination" className={tkx('flex flex-col gap-2')}>
+      {/* Showing X-Y of Z */}
+      {total > 0 && (
+        <p className={tkx('text-sm')} style={{ color: theme.textMuted, fontSize: s.fontSize }}>
+          {sanitizeString(`Showing ${itemStart}–${itemEnd} of ${total} items`)}
+        </p>
+      )}
+
+      <div className={tkx('flex items-center gap-1 flex-wrap')}>
+        {/* First */}
+        {showEdges && (
+          <button
+            type="button"
+            aria-label="First page"
+            disabled={currentPage === 1}
+            onClick={() => goTo(1)}
+            style={getButtonStyle(false, currentPage === 1)}
+          >
+            <NavIcon d="15 18 9 12 15 6" />
+            <NavIcon d="20 18 14 12 20 6" />
+          </button>
+        )}
+
+        {/* Prev */}
+        <button
+          type="button"
+          aria-label="Previous page"
+          disabled={currentPage === 1}
+          onClick={() => goTo(currentPage - 1)}
+          style={getButtonStyle(false, currentPage === 1)}
+        >
+          <NavIcon d="15 18 9 12 15 6" />
+        </button>
+
+        {/* Page numbers */}
+        {pages.map((p, idx) => {
+          const isEllipsis = typeof p === 'string';
+          if (isEllipsis) {
+            return (
+              <span
+                key={`${p}-${idx}`}
+                aria-hidden="true"
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  minWidth: s.minWidth,
+                  height: s.height,
+                  fontSize: s.fontSize,
+                  color: theme.textMuted,
+                  userSelect: 'none',
+                }}
+              >
+                …
+              </span>
+            );
+          }
+          const pageNum = p as number;
+          const isActive = pageNum === currentPage;
+          return (
+            <button
+              key={pageNum}
+              type="button"
+              aria-label={`Page ${pageNum}`}
+              aria-current={isActive ? 'page' : undefined}
+              onClick={() => goTo(pageNum)}
+              style={getButtonStyle(isActive, false)}
+            >
+              {pageNum}
+            </button>
+          );
+        })}
+
+        {/* Next */}
+        <button
+          type="button"
+          aria-label="Next page"
+          disabled={currentPage === totalPages}
+          onClick={() => goTo(currentPage + 1)}
+          style={getButtonStyle(false, currentPage === totalPages)}
+        >
+          <NavIcon d="9 18 15 12 9 6" />
+        </button>
+
+        {/* Last */}
+        {showEdges && (
+          <button
+            type="button"
+            aria-label="Last page"
+            disabled={currentPage === totalPages}
+            onClick={() => goTo(totalPages)}
+            style={getButtonStyle(false, currentPage === totalPages)}
+          >
+            <NavIcon d="4 18 10 12 4 6" />
+            <NavIcon d="14 18 20 12 14 6" />
+          </button>
+        )}
+
+        {/* Page size selector */}
+        {showPageSize && (
+          <div className={tkx('flex items-center gap-2 ml-2')}>
+            <label
+              htmlFor={selectId}
+              className={tkx('text-sm')}
+              style={{ color: theme.textMuted, fontSize: s.fontSize, whiteSpace: 'nowrap' }}
+            >
+              Rows per page
+            </label>
+            <select
+              id={selectId}
+              value={internalPageSize}
+              onChange={e => handlePageSizeChange(Number(e.target.value))}
+              style={{
+                height: s.height,
+                paddingLeft: s.px,
+                paddingRight: s.px,
+                fontSize: s.fontSize,
+                borderRadius: '8px',
+                border: `1px solid ${theme.border}`,
+                backgroundColor: theme.surface,
+                color: theme.text,
+                cursor: 'pointer',
+                outline: 'none',
+                fontFamily: 'inherit',
+              }}
+            >
+              {pageSizeOptions.map(opt => (
+                <option key={opt} value={opt}>{opt}</option>
+              ))}
+            </select>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}
+
+TkxPagination.displayName = 'TkxPagination';