tekivex-ui 2.5.15 → 2.6.0

package/src/components/TkxMasonry.tsx

@@ -1,178 +0,0 @@
-'use client';
-
-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/TkxMentions.tsx

@@ -1,212 +0,0 @@
-'use client';
-
-import { type ReactNode, useState, useRef, useCallback, useEffect } from 'react';
-import { useTheme } from '../themes';
-import { sanitizeString } from '../engine/security';
-import { useReducedMotion } from '../hooks';
-import { tkx } from '../engine/tkx';
-
-// ── Types ────────────────────────────────────────────────────────────────────
-
-export interface MentionOption {
-  value: string;
-  label: string;
-  avatar?: string;
-}
-
-export interface TkxMentionsProps {
-  options: MentionOption[];
-  value?: string;
-  onChange?: (value: string) => void;
-  trigger?: string;
-  placeholder?: string;
-  label?: string;
-}
-
-// ── Component ────────────────────────────────────────────────────────────────
-
-export function TkxMentions({
-  options,
-  value = '',
-  onChange,
-  trigger = '@',
-  placeholder,
-  label,
-}: TkxMentionsProps) {
-  const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const dropdownRef = useRef<HTMLUListElement>(null);
-  const [text, setText] = useState(value);
-  const [showDropdown, setShowDropdown] = useState(false);
-  const [query, setQuery] = useState('');
-  const [activeIdx, setActiveIdx] = useState(0);
-  const [triggerPos, setTriggerPos] = useState(-1);
-
-  useEffect(() => {
-    if (value !== undefined) setText(value);
-  }, [value]);
-
-  const filtered = options.filter((o) =>
-    o.label.toLowerCase().includes(query.toLowerCase()),
-  );
-
-  const handleInput = useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      const val = e.target.value;
-      setText(val);
-      onChange?.(val);
-
-      const cursorPos = e.target.selectionStart ?? val.length;
-      const beforeCursor = val.slice(0, cursorPos);
-      const lastTrigger = beforeCursor.lastIndexOf(trigger);
-
-      if (lastTrigger >= 0) {
-        const afterTrigger = beforeCursor.slice(lastTrigger + trigger.length);
-        if (!/\s/.test(afterTrigger)) {
-          setQuery(afterTrigger);
-          setTriggerPos(lastTrigger);
-          setShowDropdown(true);
-          setActiveIdx(0);
-          return;
-        }
-      }
-      setShowDropdown(false);
-    },
-    [trigger, onChange],
-  );
-
-  const insertMention = useCallback(
-    (opt: MentionOption) => {
-      const before = text.slice(0, triggerPos);
-      const after = text.slice(
-        triggerPos + trigger.length + query.length,
-      );
-      const newText = `${before}${trigger}${opt.value} ${after}`;
-      setText(newText);
-      onChange?.(newText);
-      setShowDropdown(false);
-      inputRef.current?.focus();
-    },
-    [text, triggerPos, trigger, query, onChange],
-  );
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (!showDropdown) return;
-      if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        setActiveIdx((i) => (i + 1) % filtered.length);
-      } else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        setActiveIdx((i) => (i - 1 + filtered.length) % filtered.length);
-      } else if (e.key === 'Enter' && filtered[activeIdx]) {
-        e.preventDefault();
-        insertMention(filtered[activeIdx]);
-      } else if (e.key === 'Escape') {
-        setShowDropdown(false);
-      }
-    },
-    [showDropdown, filtered, activeIdx, insertMention],
-  );
-
-  // Scroll active option into view
-  useEffect(() => {
-    if (!showDropdown || !dropdownRef.current) return;
-    const active = dropdownRef.current.children[activeIdx] as HTMLElement;
-    active?.scrollIntoView({ block: 'nearest' });
-  }, [activeIdx, showDropdown]);
-
-  const safeLabel = label ? sanitizeString(label) : undefined;
-  const safePlaceholder = placeholder ? sanitizeString(placeholder) : undefined;
-
-  return (
-    <div className={tkx('relative font-sans')} style={{ width: '100%' }}>
-      {safeLabel && (
-        <label
-          className={tkx('block text-sm font-medium mb-1')}
-          style={{ color: theme.text }}
-        >
-          {safeLabel}
-        </label>
-      )}
-
-      <textarea
-        ref={inputRef}
-        role="combobox"
-        aria-expanded={showDropdown}
-        aria-haspopup="listbox"
-        aria-autocomplete="list"
-        aria-label={safeLabel ?? 'Mentions input'}
-        value={text}
-        placeholder={safePlaceholder}
-        onChange={handleInput}
-        onKeyDown={handleKeyDown}
-        onBlur={() => setTimeout(() => setShowDropdown(false), 200)}
-        className={tkx('w-full rounded-lg border px-3 py-2 text-sm resize-y')}
-        style={{
-          backgroundColor: theme.surface,
-          borderColor: theme.border,
-          color: theme.text,
-          minHeight: 80,
-          outline: 'none',
-        }}
-        rows={3}
-      />
-
-      {showDropdown && filtered.length > 0 && (
-        <ul
-          ref={dropdownRef}
-          role="listbox"
-          aria-label="Mention suggestions"
-          className={tkx('absolute left-0 right-0 z-50 rounded-lg border overflow-auto')}
-          style={{
-            backgroundColor: theme.surface,
-            borderColor: theme.border,
-            maxHeight: 200,
-            top: '100%',
-            marginTop: 4,
-            listStyle: 'none',
-            padding: 0,
-            boxShadow: `0 4px 12px ${theme.bg}80`,
-            animation: reducedMotion ? 'none' : 'tkxFadeIn 0.15s ease',
-          }}
-        >
-          {filtered.map((opt, idx) => (
-            <li
-              key={opt.value}
-              role="option"
-              aria-selected={idx === activeIdx}
-              className={tkx('flex items-center gap-3 px-3 py-2 cursor-pointer text-sm')}
-              style={{
-                backgroundColor: idx === activeIdx ? theme.surfaceAlt : 'transparent',
-                color: theme.text,
-              }}
-              onMouseDown={(e) => {
-                e.preventDefault();
-                insertMention(opt);
-              }}
-              onMouseEnter={() => setActiveIdx(idx)}
-            >
-              {opt.avatar && (
-                <img
-                  src={sanitizeString(opt.avatar)}
-                  alt=""
-                  aria-hidden="true"
-                  width={24}
-                  height={24}
-                  className={tkx('rounded-full')}
-                  style={{ objectFit: 'cover' }}
-                />
-              )}
-              <span>{sanitizeString(opt.label)}</span>
-              <span style={{ color: theme.textMuted, marginLeft: 'auto' }}>
-                {trigger}{sanitizeString(opt.value)}
-              </span>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}