tekivex-ui 2.5.15 → 2.6.0

package/src/components/TkxOTP.tsx

@@ -1,297 +0,0 @@
-'use client';
-
-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

@@ -1,390 +0,0 @@
-'use client';
-
-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';