tekivex-ui 2.0.0

package/src/components/TkxModal.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useId, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useFocusTrap, useEscapeKey, useAnnounce } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+export type ModalSize = 'sm' | 'md' | 'lg' | 'full';
+
+export interface TkxModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  size?: ModalSize;
+  closeOnOverlayClick?: boolean;
+  closeOnEscape?: boolean;
+  children: ReactNode;
+  footer?: ReactNode;
+}
+
+const SIZE_W: Record<ModalSize, string> = { sm: '400px', md: '560px', lg: '720px', full: '100vw' };
+
+let scrollLockCount = 0;
+function lockScroll() { if (++scrollLockCount === 1) document.body.style.overflow = 'hidden'; }
+function unlockScroll() { if (--scrollLockCount <= 0) { scrollLockCount = 0; document.body.style.overflow = ''; } }
+
+export function TkxModal({ isOpen, onClose, title, size = 'md', closeOnOverlayClick = true, closeOnEscape = true, children, footer }: TkxModalProps) {
+  const theme = useTheme();
+  const titleId = useId();
+  const trapRef = useFocusTrap(isOpen);
+  const announce = useAnnounce();
+  const safeTitle = sanitizeString(title);
+  const isFull = size === 'full';
+
+  useEscapeKey(onClose, closeOnEscape && isOpen);
+
+  useEffect(() => {
+    if (isOpen) { lockScroll(); announce(safeTitle, 'polite'); }
+    else { unlockScroll(); }
+    return () => { if (isOpen) unlockScroll(); };
+  }, [isOpen, safeTitle, announce]);
+
+  if (!isOpen || typeof document === 'undefined') return null;
+
+  return createPortal(
+    <div
+      role="presentation"
+      className={tkx('fixed inset-0 z-[9000] flex', isFull ? 'items-stretch' : 'items-center justify-center', isFull ? '' : 'p-4')}
+    >
+      {/* Backdrop */}
+      <div
+        aria-hidden="true"
+        onClick={closeOnOverlayClick ? onClose : undefined}
+        className={tkx('absolute inset-0 animate-fade-in')}
+        style={{ backgroundColor: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)' }}
+      />
+
+      {/* Dialog */}
+      <div
+        ref={trapRef as React.RefObject<HTMLDivElement>}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        className={tkx('relative z-10 flex flex-col overflow-hidden animate-slide-up', isFull ? '' : 'rounded-xl')}
+        style={{
+          backgroundColor: theme.surface,
+          border: `1px solid ${theme.border}`,
+          width: SIZE_W[size],
+          maxWidth: '100%',
+          maxHeight: isFull ? '100vh' : '90vh',
+          boxShadow: `0 20px 60px ${theme.bg}80`,
+        }}
+      >
+        {/* Header */}
+        <div
+          className={tkx('flex items-center justify-between px-6 py-5 shrink-0')}
+          style={{ borderBottom: `1px solid ${theme.border}` }}
+        >
+          <h2
+            id={titleId}
+            className={tkx('m-0 text-lg font-semibold font-sans')}
+            style={{ color: theme.text }}
+          >
+            {safeTitle}
+          </h2>
+          <button
+            onClick={onClose}
+            aria-label="Close dialog"
+            className={tkx('bg-transparent border-none cursor-pointer rounded p-1 flex items-center justify-center focus-visible:focus-ring')}
+            style={{ color: theme.textMuted }}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+              <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Body */}
+        <div
+          className={tkx('flex-1 overflow-y-auto px-6 py-6 font-sans')}
+          style={{ color: theme.text }}
+        >
+          {children}
+        </div>
+
+        {/* Footer */}
+        {footer && (
+          <div
+            className={tkx('flex justify-end gap-2 px-6 py-4 shrink-0')}
+            style={{ borderTop: `1px solid ${theme.border}` }}
+          >
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+}

package/src/components/TkxNumberInput.tsx

@@ -0,0 +1,408 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useId,
+  type CSSProperties,
+  type KeyboardEvent,
+  type WheelEvent,
+} from 'react';
+import { useTheme } from '../themes';
+import { tkx, cx } from '../engine/tkx';
+import { sanitizeString } from '../engine/security';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export interface TkxNumberInputProps {
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number | null) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  precision?: number;
+  prefix?: string;
+  suffix?: string;
+  format?: 'decimal' | 'currency' | 'percent';
+  currency?: string;
+  locale?: string;
+  clampOnBlur?: boolean;
+  allowMouseWheel?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  label?: string;
+  hint?: string;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isInvalid?: boolean;
+  errorMessage?: string;
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+// ── Size maps ─────────────────────────────────────────────────────────────────
+
+const SIZE_MAP = {
+  sm: { height: '32px', fontSize: '0.8125rem', px: '8px', btnW: '28px', iconSz: 14 },
+  md: { height: '40px', fontSize: '0.875rem',  px: '12px', btnW: '34px', iconSz: 16 },
+  lg: { height: '48px', fontSize: '1rem',       px: '14px', btnW: '40px', iconSz: 18 },
+};
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function clamp(v: number, min?: number, max?: number): number {
+  let result = v;
+  if (min !== undefined) result = Math.max(result, min);
+  if (max !== undefined) result = Math.min(result, max);
+  return result;
+}
+
+function roundToPrecision(v: number, precision?: number): number {
+  if (precision === undefined) return v;
+  const factor = Math.pow(10, precision);
+  return Math.round(v * factor) / factor;
+}
+
+function formatValue(
+  value: number,
+  format?: TkxNumberInputProps['format'],
+  currency?: string,
+  locale?: string,
+  precision?: number,
+): string {
+  const loc = locale ?? 'en-US';
+  if (format === 'currency') {
+    return new Intl.NumberFormat(loc, {
+      style: 'currency',
+      currency: currency ?? 'USD',
+      minimumFractionDigits: precision ?? 2,
+      maximumFractionDigits: precision ?? 2,
+    }).format(value);
+  }
+  if (format === 'percent') {
+    return new Intl.NumberFormat(loc, {
+      style: 'percent',
+      minimumFractionDigits: precision ?? 0,
+      maximumFractionDigits: precision ?? 0,
+    }).format(value / 100);
+  }
+  if (format === 'decimal' || precision !== undefined) {
+    return new Intl.NumberFormat(loc, {
+      minimumFractionDigits: precision ?? 0,
+      maximumFractionDigits: precision ?? 20,
+    }).format(value);
+  }
+  return String(value);
+}
+
+// ── Stepper button ────────────────────────────────────────────────────────────
+
+interface StepperBtnProps {
+  direction: 'inc' | 'dec';
+  isDisabled: boolean;
+  btnW: string;
+  height: string;
+  primaryColor: string;
+  borderColor: string;
+  textMuted: string;
+  iconSz: number;
+  onStep: (dir: 1 | -1) => void;
+}
+
+function StepperBtn({ direction, isDisabled, btnW, height, primaryColor, borderColor, textMuted, iconSz, onStep }: StepperBtnProps) {
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const dir = direction === 'inc' ? 1 : -1;
+
+  const startHold = useCallback(() => {
+    onStep(dir);
+    timerRef.current = setTimeout(() => {
+      intervalRef.current = setInterval(() => onStep(dir), 60);
+    }, 400);
+  }, [dir, onStep]);
+
+  const stopHold = useCallback(() => {
+    if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null; }
+    if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null; }
+  }, []);
+
+  useEffect(() => () => stopHold(), [stopHold]);
+
+  const isInc = direction === 'inc';
+
+  return (
+    <button
+      type="button"
+      aria-label={isInc ? 'Increment' : 'Decrement'}
+      disabled={isDisabled}
+      onMouseDown={startHold}
+      onMouseUp={stopHold}
+      onMouseLeave={stopHold}
+      onTouchStart={(e) => { e.preventDefault(); startHold(); }}
+      onTouchEnd={stopHold}
+      style={{
+        width: btnW,
+        height,
+        minWidth: btnW,
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'transparent',
+        border: 'none',
+        borderRight: isInc ? undefined : `1px solid ${borderColor}`,
+        borderLeft: isInc ? `1px solid ${borderColor}` : undefined,
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        color: isDisabled ? textMuted : primaryColor,
+        transition: 'color 120ms ease, background 120ms ease',
+        outline: 'none',
+      }}
+      onFocus={(e) => { if (!isDisabled) (e.currentTarget as HTMLElement).style.background = `${primaryColor}12`; }}
+      onBlur={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
+    >
+      {isInc ? (
+        <svg width={iconSz} height={iconSz} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} aria-hidden="true">
+          <line x1="12" y1="5" x2="12" y2="19" />
+          <line x1="5" y1="12" x2="19" y2="12" />
+        </svg>
+      ) : (
+        <svg width={iconSz} height={iconSz} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} aria-hidden="true">
+          <line x1="5" y1="12" x2="19" y2="12" />
+        </svg>
+      )}
+    </button>
+  );
+}
+
+// ── Main component ────────────────────────────────────────────────────────────
+
+export function TkxNumberInput({
+  value,
+  defaultValue = 0,
+  onChange,
+  min,
+  max,
+  step = 1,
+  precision,
+  prefix,
+  suffix,
+  format,
+  currency,
+  locale,
+  clampOnBlur = true,
+  allowMouseWheel = false,
+  size = 'md',
+  label,
+  hint,
+  isDisabled = false,
+  isReadOnly = false,
+  isInvalid = false,
+  errorMessage,
+  id: idProp,
+  className,
+  style,
+}: TkxNumberInputProps) {
+  const theme = useTheme();
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const hintId = `${id}-hint`;
+  const errorId = `${id}-error`;
+
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState<number>(defaultValue);
+  const numericValue = isControlled ? value! : internalValue;
+
+  const [focused, setFocused] = useState(false);
+  const [rawInput, setRawInput] = useState('');
+
+  const sz = SIZE_MAP[size];
+  const hasError = isInvalid || !!errorMessage;
+  const borderColor = hasError ? theme.danger : focused ? theme.primary : theme.border;
+  const describedBy = [hint && hintId, hasError && errorId].filter(Boolean).join(' ') || undefined;
+
+  const safeLabel = label ? sanitizeString(label) : undefined;
+  const safeHint = hint ? sanitizeString(hint) : undefined;
+  const safeError = errorMessage ? sanitizeString(errorMessage) : undefined;
+  const safePrefix = prefix ? sanitizeString(prefix) : undefined;
+  const safeSuffix = suffix ? sanitizeString(suffix) : undefined;
+
+  const setVal = useCallback((v: number) => {
+    const rounded = roundToPrecision(v, precision);
+    if (!isControlled) setInternalValue(rounded);
+    onChange?.(rounded);
+  }, [isControlled, onChange, precision]);
+
+  const step_ = useCallback((dir: 1 | -1) => {
+    if (isDisabled || isReadOnly) return;
+    const next = clamp(roundToPrecision(numericValue + dir * step, precision), min, max);
+    setVal(next);
+  }, [isDisabled, isReadOnly, numericValue, step, precision, min, max, setVal]);
+
+  const handleFocus = () => {
+    setFocused(true);
+    setRawInput(String(numericValue));
+  };
+
+  const handleBlur = () => {
+    setFocused(false);
+    const parsed = parseFloat(rawInput);
+    if (isNaN(parsed)) {
+      onChange?.(null);
+      setRawInput(String(numericValue));
+      return;
+    }
+    let next = roundToPrecision(parsed, precision);
+    if (clampOnBlur) next = clamp(next, min, max);
+    setVal(next);
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setRawInput(e.target.value);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowUp') { e.preventDefault(); step_(1); }
+    if (e.key === 'ArrowDown') { e.preventDefault(); step_(-1); }
+  };
+
+  const handleWheel = (e: WheelEvent<HTMLInputElement>) => {
+    if (!allowMouseWheel || !focused) return;
+    e.preventDefault();
+    step_(e.deltaY < 0 ? 1 : -1);
+  };
+
+  const displayValue = focused ? rawInput : formatValue(numericValue, format, currency, locale, precision);
+
+  const showAdornment = (safePrefix || safeSuffix) && !focused;
+
+  return (
+    <div className={cx(tkx('flex flex-col gap-1 w-full'), className)} style={style}>
+      {safeLabel && (
+        <label
+          htmlFor={id}
+          className={tkx('text-sm font-medium font-sans')}
+          style={{ color: theme.text }}
+        >
+          {safeLabel}
+        </label>
+      )}
+
+      <div
+        className={tkx('flex items-stretch overflow-hidden rounded-lg transition-colors duration-150')}
+        style={{
+          border: `1.5px solid ${borderColor}`,
+          backgroundColor: isDisabled ? theme.surfaceAlt : theme.surface,
+          opacity: isDisabled ? 0.65 : 1,
+          height: sz.height,
+        }}
+      >
+        {/* Decrement */}
+        <StepperBtn
+          direction="dec"
+          isDisabled={isDisabled || isReadOnly}
+          btnW={sz.btnW}
+          height={sz.height}
+          primaryColor={theme.primary}
+          borderColor={theme.border}
+          textMuted={theme.textMuted}
+          iconSz={sz.iconSz}
+          onStep={step_}
+        />
+
+        {/* Input area */}
+        <div className={tkx('relative flex-1 flex items-center overflow-hidden')}>
+          {showAdornment && safePrefix && (
+            <span
+              style={{
+                position: 'absolute',
+                left: sz.px,
+                fontSize: sz.fontSize,
+                color: theme.textMuted,
+                pointerEvents: 'none',
+                userSelect: 'none',
+              }}
+            >
+              {safePrefix}
+            </span>
+          )}
+          <input
+            id={id}
+            type="text"
+            inputMode="decimal"
+            value={focused ? rawInput : displayValue}
+            readOnly={isReadOnly}
+            disabled={isDisabled}
+            aria-invalid={hasError}
+            aria-describedby={describedBy}
+            aria-valuemin={min}
+            aria-valuemax={max}
+            aria-valuenow={numericValue}
+            style={{
+              width: '100%',
+              height: '100%',
+              border: 'none',
+              background: 'transparent',
+              outline: 'none',
+              textAlign: 'center',
+              fontSize: sz.fontSize,
+              fontFamily: 'inherit',
+              color: theme.text,
+              paddingLeft: showAdornment && safePrefix ? `calc(${sz.px} + 1.2em)` : sz.px,
+              paddingRight: showAdornment && safeSuffix ? `calc(${sz.px} + 1.2em)` : sz.px,
+              cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'default' : 'text',
+            }}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            onWheel={handleWheel}
+          />
+          {showAdornment && safeSuffix && (
+            <span
+              style={{
+                position: 'absolute',
+                right: sz.px,
+                fontSize: sz.fontSize,
+                color: theme.textMuted,
+                pointerEvents: 'none',
+                userSelect: 'none',
+              }}
+            >
+              {safeSuffix}
+            </span>
+          )}
+        </div>
+
+        {/* Increment */}
+        <StepperBtn
+          direction="inc"
+          isDisabled={isDisabled || isReadOnly}
+          btnW={sz.btnW}
+          height={sz.height}
+          primaryColor={theme.primary}
+          borderColor={theme.border}
+          textMuted={theme.textMuted}
+          iconSz={sz.iconSz}
+          onStep={step_}
+        />
+      </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>
+  );
+}
+
+TkxNumberInput.displayName = 'TkxNumberInput';