tekivex-ui 2.0.0

package/src/components/TkxDivider.tsx

@@ -0,0 +1,49 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { tkx, cx } from '../engine/tkx';
+
+export interface TkxDividerProps extends HTMLAttributes<HTMLElement> {
+  orientation?: 'horizontal' | 'vertical';
+  label?: string;
+  variant?: 'solid' | 'dashed' | 'dotted';
+}
+
+export const TkxDivider = forwardRef<HTMLHRElement, TkxDividerProps>(
+  ({ orientation = 'horizontal', label, variant = 'solid', className, style, ...rest }, ref) => {
+    const theme = useTheme();
+    const safeLabel = label ? sanitizeString(label) : undefined;
+    const isVertical = orientation === 'vertical';
+    const borderProp = isVertical ? 'borderLeft' : 'borderTop';
+    const borderVal = `1px ${variant} ${theme.border}`;
+
+    if (safeLabel) {
+      return (
+        <div
+          role="separator"
+          aria-orientation={orientation}
+          className={cx(tkx('flex items-center gap-3 text-xs'), className)}
+          style={{ color: theme.textMuted, ...style }}
+          {...(rest as HTMLAttributes<HTMLDivElement>)}
+        >
+          <hr className={tkx('flex-1 m-0 border-none')} style={{ [borderProp]: borderVal }} />
+          <span>{safeLabel}</span>
+          <hr className={tkx('flex-1 m-0 border-none')} style={{ [borderProp]: borderVal }} />
+        </div>
+      );
+    }
+
+    return (
+      <hr
+        ref={ref}
+        role="separator"
+        aria-orientation={orientation}
+        className={cx(tkx(isVertical ? 'inline-block self-stretch border-none w-0 h-full' : 'w-full border-none m-0'), className)}
+        style={{ [borderProp]: borderVal, ...style }}
+        {...rest}
+      />
+    );
+  },
+);
+
+TkxDivider.displayName = 'TkxDivider';

package/src/components/TkxDrawer.tsx

@@ -0,0 +1,234 @@
+import {
+  useEffect,
+  useId,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useFocusTrap, useEscapeKey, useReducedMotion } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export interface TkxDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  placement?: DrawerPlacement;
+  size?: DrawerSize;
+  title?: ReactNode;
+  children: ReactNode;
+  footer?: ReactNode;
+  closeOnOverlayClick?: boolean;
+  closeOnEsc?: boolean;
+}
+
+// ── Size map ──────────────────────────────────────────────────────────────────
+
+const SIZE_MAP: Record<DrawerSize, string> = {
+  sm:   '280px',
+  md:   '380px',
+  lg:   '480px',
+  xl:   '600px',
+  full: '100%',
+};
+
+// ── Scroll lock ───────────────────────────────────────────────────────────────
+
+let scrollLockCount = 0;
+function lockScroll()   { if (++scrollLockCount === 1)  document.body.style.overflow = 'hidden'; }
+function unlockScroll() { if (--scrollLockCount <= 0) { scrollLockCount = 0; document.body.style.overflow = ''; } }
+
+// ── Transform helpers ─────────────────────────────────────────────────────────
+
+function getClosedTransform(placement: DrawerPlacement): string {
+  switch (placement) {
+    case 'left':   return 'translateX(-100%)';
+    case 'right':  return 'translateX(100%)';
+    case 'top':    return 'translateY(-100%)';
+    case 'bottom': return 'translateY(100%)';
+  }
+}
+
+function getPanelPositionStyle(placement: DrawerPlacement, size: DrawerSize): React.CSSProperties {
+  const dim = SIZE_MAP[size];
+  const isHorizontal = placement === 'left' || placement === 'right';
+
+  const base: React.CSSProperties = { position: 'absolute' };
+
+  if (isHorizontal) {
+    return {
+      ...base,
+      top: 0,
+      bottom: 0,
+      [placement]: 0,
+      width: dim,
+      maxWidth: '100vw',
+      height: '100%',
+    };
+  } else {
+    return {
+      ...base,
+      left: 0,
+      right: 0,
+      [placement]: 0,
+      height: dim,
+      maxHeight: '100vh',
+      width: '100%',
+    };
+  }
+}
+
+// ── Close button icon ─────────────────────────────────────────────────────────
+
+function CloseIcon() {
+  return (
+    <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>
+  );
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function TkxDrawer({
+  isOpen,
+  onClose,
+  placement = 'right',
+  size = 'md',
+  title,
+  children,
+  footer,
+  closeOnOverlayClick = true,
+  closeOnEsc = true,
+}: TkxDrawerProps) {
+  const theme     = useTheme();
+  const reduced   = useReducedMotion();
+  const titleId   = useId();
+  const trapRef   = useFocusTrap(isOpen);
+
+  useEscapeKey(onClose, closeOnEsc && isOpen);
+
+  useEffect(() => {
+    if (isOpen) lockScroll();
+    else unlockScroll();
+    return () => { if (isOpen) unlockScroll(); };
+  }, [isOpen]);
+
+  if (typeof document === 'undefined') return null;
+
+  const panelPositionStyle = getPanelPositionStyle(placement, size);
+  const closedTransform    = getClosedTransform(placement);
+  const transition         = reduced
+    ? 'none'
+    : 'transform 280ms cubic-bezier(0.4,0,0.2,1), opacity 280ms ease';
+
+  const safeTitle = typeof title === 'string' ? sanitizeString(title) : title;
+
+  return createPortal(
+    <div
+      role="presentation"
+      className={tkx('fixed inset-0 z-[9000]')}
+      style={{
+        pointerEvents: isOpen ? 'auto' : 'none',
+        visibility: isOpen ? 'visible' : 'hidden',
+      }}
+    >
+      {/* Backdrop */}
+      <div
+        aria-hidden="true"
+        onClick={closeOnOverlayClick ? onClose : undefined}
+        className={tkx('absolute inset-0')}
+        style={{
+          backgroundColor: 'rgba(0,0,0,0.55)',
+          backdropFilter: 'blur(3px)',
+          opacity: isOpen ? 1 : 0,
+          transition: reduced ? 'none' : 'opacity 280ms ease',
+          cursor: closeOnOverlayClick ? 'pointer' : 'default',
+        }}
+      />
+
+      {/* Drawer panel */}
+      <div
+        ref={trapRef as React.RefObject<HTMLDivElement>}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? titleId : undefined}
+        className={tkx('absolute flex flex-col font-sans')}
+        style={{
+          ...panelPositionStyle,
+          backgroundColor: theme.surface,
+          borderLeft: placement === 'right' ? `1px solid ${theme.border}` : undefined,
+          borderRight: placement === 'left' ? `1px solid ${theme.border}` : undefined,
+          borderTop: placement === 'bottom' ? `1px solid ${theme.border}` : undefined,
+          borderBottom: placement === 'top' ? `1px solid ${theme.border}` : undefined,
+          boxShadow: `0 20px 60px ${theme.bg}99`,
+          transform: isOpen ? 'translate(0,0)' : closedTransform,
+          opacity: isOpen ? 1 : 0,
+          transition,
+          willChange: 'transform',
+        }}
+      >
+        {/* Header */}
+        {(title !== undefined) && (
+          <div
+            className={tkx('flex items-center justify-between px-5 py-4 shrink-0')}
+            style={{ borderBottom: `1px solid ${theme.border}` }}
+          >
+            <h2
+              id={titleId}
+              className={tkx('m-0 text-base font-semibold leading-snug')}
+              style={{ color: theme.text }}
+            >
+              {safeTitle}
+            </h2>
+            <button
+              onClick={onClose}
+              aria-label="Close drawer"
+              className={tkx('bg-transparent border-none cursor-pointer rounded p-1 flex items-center justify-center focus-visible:focus-ring')}
+              style={{ color: theme.textMuted }}
+            >
+              <CloseIcon />
+            </button>
+          </div>
+        )}
+
+        {/* Close button when no title */}
+        {title === undefined && (
+          <div className={tkx('flex justify-end px-3 pt-3 shrink-0')}>
+            <button
+              onClick={onClose}
+              aria-label="Close drawer"
+              className={tkx('bg-transparent border-none cursor-pointer rounded p-1 flex items-center justify-center focus-visible:focus-ring')}
+              style={{ color: theme.textMuted }}
+            >
+              <CloseIcon />
+            </button>
+          </div>
+        )}
+
+        {/* Body */}
+        <div
+          className={tkx('flex-1 overflow-y-auto px-5 py-4')}
+          style={{ color: theme.text }}
+        >
+          {children}
+        </div>
+
+        {/* Footer */}
+        {footer && (
+          <div
+            className={tkx('flex items-center justify-end gap-2 px-5 py-4 shrink-0')}
+            style={{ borderTop: `1px solid ${theme.border}` }}
+          >
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+}

package/src/components/TkxFileUpload.tsx

@@ -0,0 +1,371 @@
+import {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  useId,
+  type DragEvent,
+  type ChangeEvent,
+} from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+import { tkx, cx } from '../engine/tkx';
+
+export interface TkxFileUploadProps {
+  accept?: string;
+  multiple?: boolean;
+  maxSize?: number;
+  maxFiles?: number;
+  onChange?: (files: File[]) => void;
+  onError?: (error: string) => void;
+  label?: string;
+  hint?: string;
+  isDisabled?: boolean;
+  preview?: boolean;
+  dragDrop?: boolean;
+  variant?: 'dropzone' | 'button';
+}
+
+interface UploadedFile {
+  file: File;
+  id: string;
+  objectUrl?: string;
+  progress: number;
+  error?: string;
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function FileTypeIcon({ mimeType, color }: { mimeType: string; color: string }) {
+  if (mimeType.startsWith('image/')) {
+    return (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={1.5} aria-hidden="true">
+        <rect x="3" y="3" width="18" height="18" rx="2" />
+        <circle cx="8.5" cy="8.5" r="1.5" />
+        <path d="M21 15l-5-5L5 21" />
+      </svg>
+    );
+  }
+  if (mimeType === 'application/pdf') {
+    return (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={1.5} aria-hidden="true">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+        <polyline points="14 2 14 8 20 8" />
+        <line x1="9" y1="13" x2="15" y2="13" />
+        <line x1="9" y1="17" x2="11" y2="17" />
+      </svg>
+    );
+  }
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={1.5} aria-hidden="true">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+    </svg>
+  );
+}
+
+let idCounter = 0;
+function uniqueId() { return `tkx-file-${++idCounter}`; }
+
+export function TkxFileUpload({
+  accept,
+  multiple = false,
+  maxSize,
+  maxFiles,
+  onChange,
+  onError,
+  label = 'Upload files',
+  hint,
+  isDisabled = false,
+  preview = true,
+  dragDrop = true,
+  variant = 'dropzone',
+}: TkxFileUploadProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const hintId = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [files, setFiles] = useState<UploadedFile[]>([]);
+
+  // Cleanup object URLs on unmount
+  useEffect(() => {
+    return () => {
+      files.forEach((f) => { if (f.objectUrl) URL.revokeObjectURL(f.objectUrl); });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const simulateProgress = useCallback((id: string) => {
+    let current = 0;
+    const interval = setInterval(() => {
+      current += Math.floor(Math.random() * 20) + 10;
+      if (current >= 100) {
+        current = 100;
+        clearInterval(interval);
+      }
+      setFiles((prev) =>
+        prev.map((f) => (f.id === id ? { ...f, progress: current } : f)),
+      );
+    }, 100);
+  }, []);
+
+  const validateFile = useCallback((file: File): string | undefined => {
+    if (maxSize && file.size > maxSize) {
+      return `"${sanitizeString(file.name)}" exceeds max size of ${formatSize(maxSize)}`;
+    }
+    if (accept) {
+      const accepted = accept.split(',').map((s) => s.trim());
+      const matched = accepted.some((pattern) => {
+        if (pattern.startsWith('.')) return file.name.toLowerCase().endsWith(pattern.toLowerCase());
+        if (pattern.endsWith('/*')) return file.type.startsWith(pattern.slice(0, -1));
+        return file.type === pattern;
+      });
+      if (!matched) {
+        return `"${sanitizeString(file.name)}" is not an accepted file type`;
+      }
+    }
+    return undefined;
+  }, [accept, maxSize]);
+
+  const processFiles = useCallback((incoming: File[]) => {
+    const available = maxFiles ? maxFiles - files.length : Infinity;
+    if (available <= 0) {
+      onError?.(`Maximum of ${maxFiles} file${maxFiles === 1 ? '' : 's'} allowed`);
+      return;
+    }
+    const toAdd = incoming.slice(0, available);
+    const newEntries: UploadedFile[] = toAdd.map((file) => {
+      const error = validateFile(file);
+      const objectUrl = preview && file.type.startsWith('image/') && !error
+        ? URL.createObjectURL(file)
+        : undefined;
+      return { file, id: uniqueId(), objectUrl, progress: error ? 0 : 0, error };
+    });
+
+    setFiles((prev) => {
+      const updated = multiple ? [...prev, ...newEntries] : newEntries;
+      const valid = updated.filter((f) => !f.error).map((f) => f.file);
+      onChange?.(valid);
+      return updated;
+    });
+
+    // Report per-file errors
+    newEntries.forEach((entry) => {
+      if (entry.error) onError?.(entry.error);
+    });
+
+    // Start progress simulation for valid files
+    newEntries.forEach((entry) => {
+      if (!entry.error) simulateProgress(entry.id);
+    });
+  }, [files.length, maxFiles, multiple, onChange, onError, preview, simulateProgress, validateFile]);
+
+  const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    const selected = Array.from(e.target.files ?? []);
+    if (selected.length) processFiles(selected);
+    // Reset input so same file can be re-added after removal
+    e.target.value = '';
+  }, [processFiles]);
+
+  const handleDrop = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    if (isDisabled) return;
+    const dropped = Array.from(e.dataTransfer.files);
+    if (dropped.length) processFiles(dropped);
+  }, [isDisabled, processFiles]);
+
+  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    if (!isDisabled) setIsDragOver(true);
+  }, [isDisabled]);
+
+  const handleDragLeave = useCallback(() => setIsDragOver(false), []);
+
+  const removeFile = useCallback((id: string) => {
+    setFiles((prev) => {
+      const target = prev.find((f) => f.id === id);
+      if (target?.objectUrl) URL.revokeObjectURL(target.objectUrl);
+      const next = prev.filter((f) => f.id !== id);
+      onChange?.(next.filter((f) => !f.error).map((f) => f.file));
+      return next;
+    });
+  }, [onChange]);
+
+  const openPicker = useCallback(() => {
+    if (!isDisabled) inputRef.current?.click();
+  }, [isDisabled]);
+
+  const borderColor = isDragOver ? theme.primary : theme.border;
+  const safeLabel = sanitizeString(label);
+  const safeHint = hint ? sanitizeString(hint) : '';
+
+  const dropzoneContent = (
+    <div
+      role="button"
+      tabIndex={isDisabled ? -1 : 0}
+      aria-label={safeLabel}
+      aria-describedby={hint ? hintId : undefined}
+      aria-disabled={isDisabled}
+      onClick={openPicker}
+      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openPicker(); } }}
+      onDrop={dragDrop ? handleDrop : undefined}
+      onDragOver={dragDrop ? handleDragOver : undefined}
+      onDragLeave={dragDrop ? handleDragLeave : undefined}
+      className={tkx('flex flex-col items-center justify-center gap-3 w-full p-8 rounded-lg')}
+      style={{
+        border: `2px dashed ${borderColor}`,
+        backgroundColor: isDragOver ? `${theme.primary}10` : theme.surface,
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        opacity: isDisabled ? 0.5 : 1,
+        transition: reducedMotion ? 'none' : 'border-color 150ms ease, background-color 150ms ease',
+        outline: 'none',
+      }}
+    >
+      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke={isDragOver ? theme.primary : theme.textMuted} strokeWidth={1.5} aria-hidden="true">
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+        <polyline points="17 8 12 3 7 8" />
+        <line x1="12" y1="3" x2="12" y2="15" />
+      </svg>
+      <div className={tkx('text-center')}>
+        <p className={tkx('m-0 text-sm font-medium')} style={{ color: theme.text }}>
+          {isDragOver ? 'Drop files here' : safeLabel}
+        </p>
+        {safeHint && (
+          <p id={hintId} className={tkx('m-0 text-xs mt-1')} style={{ color: theme.textMuted }}>
+            {safeHint}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+
+  const buttonContent = (
+    <button
+      type="button"
+      disabled={isDisabled}
+      onClick={openPicker}
+      aria-describedby={hint ? hintId : undefined}
+      className={tkx('flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium font-sans border-none cursor-pointer')}
+      style={{
+        backgroundColor: theme.primary,
+        color: theme.bg,
+        opacity: isDisabled ? 0.5 : 1,
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+      }}
+    >
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+        <polyline points="17 8 12 3 7 8" />
+        <line x1="12" y1="3" x2="12" y2="15" />
+      </svg>
+      {safeLabel}
+      {hint && (
+        <span id={hintId} className={tkx('sr-only')}>{safeHint}</span>
+      )}
+    </button>
+  );
+
+  return (
+    <div className={tkx('flex flex-col gap-3 w-full font-sans')}>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        disabled={isDisabled}
+        onChange={handleInputChange}
+        className={tkx('sr-only')}
+        tabIndex={-1}
+        aria-hidden="true"
+      />
+
+      {variant === 'dropzone' ? dropzoneContent : buttonContent}
+
+      {files.length > 0 && (
+        <ul
+          role="status"
+          aria-live="polite"
+          aria-label="Uploaded files"
+          className={tkx('m-0 p-0 flex flex-col gap-2')}
+          style={{ listStyle: 'none' }}
+        >
+          {files.map((entry) => (
+            <li
+              key={entry.id}
+              className={tkx('flex flex-col gap-1 rounded-md p-3')}
+              style={{
+                backgroundColor: theme.surfaceAlt,
+                border: `1px solid ${entry.error ? theme.danger : theme.border}`,
+              }}
+            >
+              <div className={tkx('flex items-center gap-3')}>
+                {entry.objectUrl && preview ? (
+                  <img
+                    src={entry.objectUrl}
+                    alt={sanitizeString(entry.file.name)}
+                    className={tkx('rounded')}
+                    style={{ width: 40, height: 40, objectFit: 'cover', flexShrink: 0 }}
+                  />
+                ) : (
+                  <span style={{ flexShrink: 0 }}>
+                    <FileTypeIcon mimeType={entry.file.type} color={entry.error ? theme.danger : theme.textMuted} />
+                  </span>
+                )}
+                <div className={tkx('flex flex-col gap-0.5 flex-1 min-w-0')}>
+                  <span
+                    className={tkx('text-sm font-medium truncate')}
+                    style={{ color: entry.error ? theme.danger : theme.text }}
+                    title={entry.file.name}
+                  >
+                    {sanitizeString(entry.file.name)}
+                  </span>
+                  <span className={tkx('text-xs')} style={{ color: theme.textMuted }}>
+                    {formatSize(entry.file.size)}
+                    {entry.error && ` — ${entry.error}`}
+                  </span>
+                </div>
+                <button
+                  type="button"
+                  aria-label={`Remove ${sanitizeString(entry.file.name)}`}
+                  onClick={() => removeFile(entry.id)}
+                  className={tkx('flex items-center justify-center bg-transparent border-none cursor-pointer rounded p-1')}
+                  style={{ color: theme.textMuted, flexShrink: 0 }}
+                >
+                  <svg width="14" height="14" 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>
+
+              {!entry.error && entry.progress < 100 && (
+                <div
+                  className={tkx('w-full overflow-hidden')}
+                  style={{ height: '3px', borderRadius: '3px', backgroundColor: theme.border }}
+                  aria-hidden="true"
+                >
+                  <div
+                    style={{
+                      height: '100%',
+                      borderRadius: '3px',
+                      backgroundColor: theme.primary,
+                      width: `${entry.progress}%`,
+                      transition: reducedMotion ? 'none' : 'width 100ms ease',
+                    }}
+                  />
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}