tekivex-ui 2.0.2 → 2.1.0

package/src/components/TkxMasonry.tsx

@@ -0,0 +1,176 @@
+import {
+  useState,
+  useEffect,
+  useMemo,
+  Children,
+  type ReactNode,
+  type CSSProperties,
+} from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export interface TkxMasonryProps {
+  columns?: number | { sm?: number; md?: number; lg?: number };
+  gap?: number;
+  children: ReactNode;
+}
+
+// ── Breakpoint constants ────────────────────────────────────────────────────
+
+const BREAKPOINTS = {
+  sm: 0,
+  md: 768,
+  lg: 1024,
+};
+
+// ── Breakpoint hook ─────────────────────────────────────────────────────────
+
+function useBreakpoint(): 'sm' | 'md' | 'lg' {
+  const [bp, setBp] = useState<'sm' | 'md' | 'lg'>(() => {
+    if (typeof window === 'undefined') return 'lg';
+    const w = window.innerWidth;
+    if (w >= BREAKPOINTS.lg) return 'lg';
+    if (w >= BREAKPOINTS.md) return 'md';
+    return 'sm';
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handler = () => {
+      const w = window.innerWidth;
+      if (w >= BREAKPOINTS.lg) setBp('lg');
+      else if (w >= BREAKPOINTS.md) setBp('md');
+      else setBp('sm');
+    };
+
+    window.addEventListener('resize', handler);
+    return () => window.removeEventListener('resize', handler);
+  }, []);
+
+  return bp;
+}
+
+// ── Resolve column count ────────────────────────────────────────────────────
+
+function resolveColumns(
+  columns: number | { sm?: number; md?: number; lg?: number } | undefined,
+  breakpoint: 'sm' | 'md' | 'lg',
+): number {
+  if (columns === undefined) return 3;
+  if (typeof columns === 'number') return Math.max(1, columns);
+
+  // Resolve responsive: fall back from current breakpoint to smaller ones
+  if (breakpoint === 'lg') {
+    return columns.lg ?? columns.md ?? columns.sm ?? 3;
+  }
+  if (breakpoint === 'md') {
+    return columns.md ?? columns.sm ?? 2;
+  }
+  return columns.sm ?? 1;
+}
+
+// ── Keyframe injection ──────────────────────────────────────────────────────
+
+let injected = false;
+function injectKeyframes() {
+  if (injected || typeof document === 'undefined') return;
+  injected = true;
+  const style = document.createElement('style');
+  style.id = 'tkx-masonry-kf';
+  style.textContent = `
+    @keyframes tkx-masonry-fade-in {
+      from { opacity: 0; transform: translateY(8px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function TkxMasonry({
+  columns,
+  gap = 16,
+  children,
+}: TkxMasonryProps) {
+  const theme = useTheme();
+  const reduced = useReducedMotion();
+  const breakpoint = useBreakpoint();
+
+  // Inject keyframes once
+  useEffect(() => {
+    injectKeyframes();
+  }, []);
+
+  const colCount = resolveColumns(columns, breakpoint);
+
+  // ── Distribute children into columns ────────────────────────────────────
+
+  const childArray = Children.toArray(children);
+
+  const columnBuckets = useMemo(() => {
+    const buckets: ReactNode[][] = Array.from({ length: colCount }, () => []);
+
+    childArray.forEach((child, i) => {
+      // Round-robin distribution to approximate masonry layout
+      buckets[i % colCount].push(child);
+    });
+
+    return buckets;
+  }, [childArray, colCount]);
+
+  // ── Animation style per item ────────────────────────────────────────────
+
+  const itemAnimation = (index: number): CSSProperties => {
+    if (reduced) return {};
+    return {
+      animation: `tkx-masonry-fade-in 300ms cubic-bezier(0.16,1,0.3,1) both`,
+      animationDelay: `${Math.min(index * 40, 400)}ms`,
+    };
+  };
+
+  // ── CSS-columns approach ────────────────────────────────────────────────
+  // Using a flex-based column approach for more predictable layout
+
+  return (
+    <div
+      role="list"
+      aria-label="Masonry grid"
+      className={tkx('flex w-full')}
+      style={{
+        gap,
+        alignItems: 'flex-start',
+      }}
+    >
+      {columnBuckets.map((bucket, colIndex) => (
+        <div
+          key={colIndex}
+          className={tkx('flex flex-col')}
+          style={{
+            flex: 1,
+            gap,
+            minWidth: 0,
+          }}
+        >
+          {bucket.map((child, itemIndex) => {
+            const globalIndex = itemIndex * colCount + colIndex;
+            return (
+              <div
+                key={itemIndex}
+                role="listitem"
+                style={itemAnimation(globalIndex)}
+              >
+                {child}
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/TkxModal.tsx

@@ -2,7 +2,7 @@ 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 { useFocusTrap, useEscapeKey, useAnnounce, useReducedMotion } from '../hooks';
 import { tkx } from '../engine/tkx';
 
 export type ModalSize = 'sm' | 'md' | 'lg' | 'full';
@@ -28,6 +28,7 @@ export function TkxModal({ isOpen, onClose, title, size = 'md', closeOnOverlayCl
   const theme = useTheme();
   const titleId = useId();
   const trapRef = useFocusTrap(isOpen);
+  const reducedMotion = useReducedMotion();
   const announce = useAnnounce();
   const safeTitle = sanitizeString(title);
   const isFull = size === 'full';
@@ -51,7 +52,7 @@ export function TkxModal({ isOpen, onClose, title, size = 'md', closeOnOverlayCl
       <div
         aria-hidden="true"
         onClick={closeOnOverlayClick ? onClose : undefined}
-        className={tkx('absolute inset-0 animate-fade-in')}
+        className={tkx('absolute inset-0', !reducedMotion && 'animate-fade-in')}
         style={{ backgroundColor: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)' }}
       />
 
@@ -61,7 +62,7 @@ export function TkxModal({ isOpen, onClose, title, size = 'md', closeOnOverlayCl
         role="dialog"
         aria-modal="true"
         aria-labelledby={titleId}
-        className={tkx('relative z-10 flex flex-col overflow-hidden animate-slide-up', isFull ? '' : 'rounded-xl')}
+        className={tkx('relative z-10 flex flex-col overflow-hidden', !reducedMotion && 'animate-slide-up', isFull ? '' : 'rounded-xl')}
         style={{
           backgroundColor: theme.surface,
           border: `1px solid ${theme.border}`,

package/src/components/TkxPopover.tsx

@@ -0,0 +1,295 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useId,
+  type ReactNode,
+  type CSSProperties,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { useTheme } from '../themes';
+import { useReducedMotion, useEscapeKey, useClickOutside } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export interface TkxPopoverProps {
+  trigger: ReactNode;
+  content: ReactNode;
+  placement?: PopoverPlacement;
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  closeOnClickOutside?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+
+// ── Arrow dimensions ────────────────────────────────────────────────────────
+
+const ARROW_SIZE = 8;
+const GAP = 8;
+
+// ── Position calculator ─────────────────────────────────────────────────────
+
+interface PopoverPosition {
+  top: number;
+  left: number;
+  arrowStyle: CSSProperties;
+  resolvedPlacement: PopoverPlacement;
+}
+
+function calcPosition(
+  triggerRect: DOMRect,
+  popoverEl: HTMLElement,
+  placement: PopoverPlacement,
+): PopoverPosition {
+  const popRect = popoverEl.getBoundingClientRect();
+  const scrollX = window.scrollX;
+  const scrollY = window.scrollY;
+
+  const viewW = window.innerWidth;
+  const viewH = window.innerHeight;
+
+  let top = 0;
+  let left = 0;
+  let resolved = placement;
+
+  // Attempt requested placement, flip if insufficient space
+  const fits = {
+    top: triggerRect.top - popRect.height - GAP - ARROW_SIZE > 0,
+    bottom: triggerRect.bottom + popRect.height + GAP + ARROW_SIZE < viewH,
+    left: triggerRect.left - popRect.width - GAP - ARROW_SIZE > 0,
+    right: triggerRect.right + popRect.width + GAP + ARROW_SIZE < viewW,
+  };
+
+  if (!fits[placement]) {
+    const flip: Record<PopoverPlacement, PopoverPlacement> = {
+      top: 'bottom',
+      bottom: 'top',
+      left: 'right',
+      right: 'left',
+    };
+    if (fits[flip[placement]]) resolved = flip[placement];
+  }
+
+  switch (resolved) {
+    case 'top':
+      top = triggerRect.top + scrollY - popRect.height - GAP - ARROW_SIZE;
+      left = triggerRect.left + scrollX + triggerRect.width / 2 - popRect.width / 2;
+      break;
+    case 'bottom':
+      top = triggerRect.bottom + scrollY + GAP + ARROW_SIZE;
+      left = triggerRect.left + scrollX + triggerRect.width / 2 - popRect.width / 2;
+      break;
+    case 'left':
+      top = triggerRect.top + scrollY + triggerRect.height / 2 - popRect.height / 2;
+      left = triggerRect.left + scrollX - popRect.width - GAP - ARROW_SIZE;
+      break;
+    case 'right':
+      top = triggerRect.top + scrollY + triggerRect.height / 2 - popRect.height / 2;
+      left = triggerRect.right + scrollX + GAP + ARROW_SIZE;
+      break;
+  }
+
+  // Clamp to viewport
+  left = Math.max(8, Math.min(left, viewW + scrollX - popRect.width - 8));
+  top = Math.max(8, Math.min(top, viewH + scrollY - popRect.height - 8));
+
+  // Arrow style
+  const arrowStyle: CSSProperties = {
+    position: 'absolute',
+    width: 0,
+    height: 0,
+    borderStyle: 'solid',
+    borderWidth: ARROW_SIZE,
+  };
+
+  switch (resolved) {
+    case 'top':
+      Object.assign(arrowStyle, {
+        bottom: -ARROW_SIZE * 2,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        borderColor: 'var(--tkx-popover-bg) transparent transparent transparent',
+      });
+      break;
+    case 'bottom':
+      Object.assign(arrowStyle, {
+        top: -ARROW_SIZE * 2,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        borderColor: 'transparent transparent var(--tkx-popover-bg) transparent',
+      });
+      break;
+    case 'left':
+      Object.assign(arrowStyle, {
+        right: -ARROW_SIZE * 2,
+        top: '50%',
+        transform: 'translateY(-50%)',
+        borderColor: 'transparent transparent transparent var(--tkx-popover-bg)',
+      });
+      break;
+    case 'right':
+      Object.assign(arrowStyle, {
+        left: -ARROW_SIZE * 2,
+        top: '50%',
+        transform: 'translateY(-50%)',
+        borderColor: 'transparent var(--tkx-popover-bg) transparent transparent',
+      });
+      break;
+  }
+
+  return { top, left, arrowStyle, resolvedPlacement: resolved };
+}
+
+// ── Component ───────────────────────────────────────────────────────────────
+
+export function TkxPopover({
+  trigger,
+  content,
+  placement = 'bottom',
+  isOpen: controlledOpen,
+  onOpenChange,
+  closeOnClickOutside = true,
+  className,
+  style,
+}: TkxPopoverProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const popoverId = useId();
+
+  const isControlled = controlledOpen !== undefined;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = isControlled ? controlledOpen : internalOpen;
+
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const [position, setPosition] = useState<PopoverPosition | null>(null);
+
+  const setOpen = useCallback(
+    (value: boolean) => {
+      if (!isControlled) setInternalOpen(value);
+      onOpenChange?.(value);
+    },
+    [isControlled, onOpenChange],
+  );
+
+  const close = useCallback(() => setOpen(false), [setOpen]);
+  const toggle = useCallback(() => setOpen(!open), [setOpen, open]);
+
+  useEscapeKey(close, open);
+
+  // Click outside
+  useEffect(() => {
+    if (!open || !closeOnClickOutside) return;
+    const handler = (e: PointerEvent) => {
+      const target = e.target as Node;
+      if (triggerRef.current?.contains(target)) return;
+      if (popoverRef.current?.contains(target)) return;
+      close();
+    };
+    document.addEventListener('pointerdown', handler);
+    return () => document.removeEventListener('pointerdown', handler);
+  }, [open, closeOnClickOutside, close]);
+
+  // Calculate position
+  useEffect(() => {
+    if (!open || !triggerRef.current) return;
+
+    const updatePosition = () => {
+      if (!triggerRef.current || !popoverRef.current) return;
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      setPosition(calcPosition(triggerRect, popoverRef.current, placement));
+    };
+
+    // Initial calc after portal mount
+    requestAnimationFrame(updatePosition);
+
+    window.addEventListener('scroll', updatePosition, true);
+    window.addEventListener('resize', updatePosition);
+
+    return () => {
+      window.removeEventListener('scroll', updatePosition, true);
+      window.removeEventListener('resize', updatePosition);
+    };
+  }, [open, placement]);
+
+  const animationStyle: CSSProperties = reducedMotion
+    ? { opacity: 1 }
+    : {
+        animation: 'tkxPopoverFadeIn 150ms ease forwards',
+        opacity: 0,
+      };
+
+  const portalContent = open && typeof document !== 'undefined' ? (
+    createPortal(
+      <div
+        ref={popoverRef}
+        id={popoverId}
+        role="dialog"
+        aria-modal="false"
+        className={tkx(
+          'absolute z-[9100] rounded-lg font-sans',
+          className ?? '',
+        )}
+        style={{
+          '--tkx-popover-bg': theme.surface,
+          top: position?.top ?? -9999,
+          left: position?.left ?? -9999,
+          backgroundColor: theme.surface,
+          border: `1px solid ${theme.border}`,
+          boxShadow: `0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1)`,
+          minWidth: 200,
+          maxWidth: 420,
+          padding: '12px 16px',
+          color: theme.text,
+          ...animationStyle,
+          ...style,
+        } as CSSProperties}
+      >
+        {/* Arrow */}
+        {position && <span style={position.arrowStyle} aria-hidden="true" />}
+        {content}
+      </div>,
+      document.body,
+    )
+  ) : null;
+
+  return (
+    <>
+      <div
+        ref={triggerRef}
+        className={tkx('inline-flex')}
+        onClick={toggle}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggle();
+          }
+        }}
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        aria-controls={open ? popoverId : undefined}
+      >
+        {trigger}
+      </div>
+      {portalContent}
+      {/* Inject animation keyframes */}
+      {open && !reducedMotion && (
+        <style>{`
+          @keyframes tkxPopoverFadeIn {
+            from { opacity: 0; transform: translateY(4px); }
+            to { opacity: 1; transform: translateY(0); }
+          }
+        `}</style>
+      )}
+    </>
+  );
+}
+
+export default TkxPopover;