tekivex-ui 2.5.15 → 2.6.0

package/src/components/TkxTreeView.tsx

@@ -1,423 +0,0 @@
-'use client';
-
-import {
-  useState,
-  useCallback,
-  useRef,
-  useId,
-  type ReactNode,
-  type CSSProperties,
-  type KeyboardEvent,
-} from 'react';
-import { useTheme } from '../themes';
-import { sanitizeString } from '../engine/security';
-import { useReducedMotion } from '../hooks';
-import { tkx } from '../engine/tkx';
-
-// ── Types ─────────────────────────────────────────────────────────────────────
-
-export interface TreeNode {
-  id: string;
-  label: string;
-  icon?: ReactNode;
-  children?: TreeNode[];
-  disabled?: boolean;
-}
-
-export interface TkxTreeViewProps {
-  data: TreeNode[];
-  selected?: string[];
-  onSelect?: (ids: string[]) => void;
-  expanded?: string[];
-  onExpand?: (ids: string[]) => void;
-  multiSelect?: boolean;
-  showCheckboxes?: boolean;
-  showLines?: boolean;
-  className?: string;
-  style?: CSSProperties;
-}
-
-// ── Helpers ─────────────────────────────────────────────────────────────────
-
-function flattenVisible(
-  nodes: TreeNode[],
-  expandedSet: Set<string>,
-): { node: TreeNode; depth: number }[] {
-  const result: { node: TreeNode; depth: number }[] = [];
-  function walk(items: TreeNode[], depth: number) {
-    for (const item of items) {
-      result.push({ node: item, depth });
-      if (item.children?.length && expandedSet.has(item.id)) {
-        walk(item.children, depth + 1);
-      }
-    }
-  }
-  walk(nodes, 0);
-  return result;
-}
-
-function getAllIds(nodes: TreeNode[]): string[] {
-  const ids: string[] = [];
-  function walk(items: TreeNode[]) {
-    for (const item of items) {
-      ids.push(item.id);
-      if (item.children) walk(item.children);
-    }
-  }
-  walk(nodes);
-  return ids;
-}
-
-// ── Chevron icon ────────────────────────────────────────────────────────────
-
-function ChevronIcon({
-  expanded,
-  color,
-  reducedMotion,
-}: {
-  expanded: boolean;
-  color: string;
-  reducedMotion: boolean;
-}) {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      aria-hidden="true"
-      style={{
-        transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
-        transition: reducedMotion ? 'none' : 'transform 150ms ease',
-        flexShrink: 0,
-      }}
-    >
-      <path
-        d="M6 3l5 5-5 5"
-        stroke={color}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-// ── Checkbox ────────────────────────────────────────────────────────────────
-
-function TreeCheckbox({
-  checked,
-  color,
-  borderColor,
-}: {
-  checked: boolean;
-  color: string;
-  borderColor: string;
-}) {
-  return (
-    <span
-      role="presentation"
-      aria-hidden="true"
-      className={tkx('inline-flex items-center justify-center flex-shrink-0')}
-      style={{
-        width: 16,
-        height: 16,
-        borderRadius: 3,
-        border: `1.5px solid ${checked ? color : borderColor}`,
-        backgroundColor: checked ? color : 'transparent',
-        transition: 'all 100ms ease',
-      }}
-    >
-      {checked && (
-        <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
-          <path
-            d="M2 5l2.5 2.5L8 3"
-            stroke="#fff"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      )}
-    </span>
-  );
-}
-
-// ── Component ───────────────────────────────────────────────────────────────
-
-const INDENT_PX = 24;
-
-export function TkxTreeView({
-  data,
-  selected: controlledSelected,
-  onSelect,
-  expanded: controlledExpanded,
-  onExpand,
-  multiSelect = false,
-  showCheckboxes = false,
-  showLines = false,
-  className,
-  style,
-}: TkxTreeViewProps) {
-  const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const treeId = useId();
-
-  // Internal state fallbacks
-  const [internalSelected, setInternalSelected] = useState<string[]>([]);
-  const [internalExpanded, setInternalExpanded] = useState<string[]>([]);
-
-  const selectedSet = new Set(controlledSelected ?? internalSelected);
-  const expandedSet = new Set(controlledExpanded ?? internalExpanded);
-
-  const setExpanded = useCallback(
-    (ids: string[]) => {
-      if (controlledExpanded === undefined) setInternalExpanded(ids);
-      onExpand?.(ids);
-    },
-    [controlledExpanded, onExpand],
-  );
-
-  const setSelected = useCallback(
-    (ids: string[]) => {
-      if (controlledSelected === undefined) setInternalSelected(ids);
-      onSelect?.(ids);
-    },
-    [controlledSelected, onSelect],
-  );
-
-  const toggleExpand = useCallback(
-    (id: string) => {
-      const arr = Array.from(expandedSet);
-      if (expandedSet.has(id)) {
-        setExpanded(arr.filter((x) => x !== id));
-      } else {
-        setExpanded([...arr, id]);
-      }
-    },
-    [expandedSet, setExpanded],
-  );
-
-  const toggleSelect = useCallback(
-    (id: string) => {
-      if (multiSelect) {
-        const arr = Array.from(selectedSet);
-        if (selectedSet.has(id)) {
-          setSelected(arr.filter((x) => x !== id));
-        } else {
-          setSelected([...arr, id]);
-        }
-      } else {
-        setSelected(selectedSet.has(id) ? [] : [id]);
-      }
-    },
-    [multiSelect, selectedSet, setSelected],
-  );
-
-  const flatItems = flattenVisible(data, expandedSet);
-  const focusedIndexRef = useRef(0);
-  const itemRefs = useRef<Map<number, HTMLElement>>(new Map());
-
-  const focusItem = (index: number) => {
-    focusedIndexRef.current = index;
-    itemRefs.current.get(index)?.focus();
-  };
-
-  const findNodeById = (id: string, nodes: TreeNode[]): TreeNode | undefined => {
-    for (const n of nodes) {
-      if (n.id === id) return n;
-      if (n.children) {
-        const found = findNodeById(id, n.children);
-        if (found) return found;
-      }
-    }
-    return undefined;
-  };
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLElement>, index: number) => {
-    const item = flatItems[index];
-    if (!item) return;
-    const { node } = item;
-    const hasChildren = (node.children?.length ?? 0) > 0;
-
-    switch (e.key) {
-      case 'ArrowDown': {
-        e.preventDefault();
-        if (index < flatItems.length - 1) focusItem(index + 1);
-        break;
-      }
-      case 'ArrowUp': {
-        e.preventDefault();
-        if (index > 0) focusItem(index - 1);
-        break;
-      }
-      case 'ArrowRight': {
-        e.preventDefault();
-        if (hasChildren && !expandedSet.has(node.id)) {
-          toggleExpand(node.id);
-        } else if (hasChildren && expandedSet.has(node.id)) {
-          // Move to first child
-          if (index < flatItems.length - 1) focusItem(index + 1);
-        }
-        break;
-      }
-      case 'ArrowLeft': {
-        e.preventDefault();
-        if (hasChildren && expandedSet.has(node.id)) {
-          toggleExpand(node.id);
-        } else {
-          // Move to parent: find the item at depth - 1
-          for (let i = index - 1; i >= 0; i--) {
-            if (flatItems[i].depth < item.depth) {
-              focusItem(i);
-              break;
-            }
-          }
-        }
-        break;
-      }
-      case 'Enter':
-      case ' ': {
-        e.preventDefault();
-        if (!node.disabled) toggleSelect(node.id);
-        break;
-      }
-      case 'Home': {
-        e.preventDefault();
-        focusItem(0);
-        break;
-      }
-      case 'End': {
-        e.preventDefault();
-        focusItem(flatItems.length - 1);
-        break;
-      }
-    }
-  };
-
-  return (
-    <ul
-      role="tree"
-      aria-label="Tree view"
-      aria-multiselectable={multiSelect || undefined}
-      className={tkx('list-none m-0 p-0 font-sans select-none', className ?? '')}
-      style={{
-        color: theme.text,
-        ...style,
-      }}
-    >
-      {flatItems.map(({ node, depth }, index) => {
-        const hasChildren = (node.children?.length ?? 0) > 0;
-        const isExpanded = expandedSet.has(node.id);
-        const isSelected = selectedSet.has(node.id);
-        const safeLabel = sanitizeString(node.label);
-
-        return (
-          <li
-            key={node.id}
-            role="treeitem"
-            aria-selected={isSelected}
-            aria-expanded={hasChildren ? isExpanded : undefined}
-            aria-disabled={node.disabled || undefined}
-            aria-level={depth + 1}
-            aria-setsize={flatItems.filter((f) => f.depth === depth).length}
-            tabIndex={index === 0 ? 0 : -1}
-            ref={(el) => {
-              if (el) itemRefs.current.set(index, el);
-              else itemRefs.current.delete(index);
-            }}
-            onKeyDown={(e) => handleKeyDown(e, index)}
-            onClick={() => {
-              if (node.disabled) return;
-              if (hasChildren) toggleExpand(node.id);
-              toggleSelect(node.id);
-            }}
-            className={tkx(
-              'relative flex items-center gap-1.5 py-1 px-2 rounded-md cursor-pointer',
-              'outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
-              node.disabled ? 'opacity-50 cursor-not-allowed' : '',
-            )}
-            style={{
-              paddingLeft: depth * INDENT_PX + 8,
-              backgroundColor: isSelected ? `${theme.primary}18` : 'transparent',
-              transition: reducedMotion ? 'none' : 'background-color 100ms ease',
-              minHeight: 32,
-            }}
-            onMouseEnter={(e) => {
-              if (!isSelected && !node.disabled) {
-                (e.currentTarget as HTMLElement).style.backgroundColor = theme.surfaceAlt;
-              }
-            }}
-            onMouseLeave={(e) => {
-              (e.currentTarget as HTMLElement).style.backgroundColor = isSelected
-                ? `${theme.primary}18`
-                : 'transparent';
-            }}
-          >
-            {/* Connecting lines */}
-            {showLines && depth > 0 && (
-              <span
-                aria-hidden="true"
-                style={{
-                  position: 'absolute',
-                  left: (depth - 1) * INDENT_PX + 16,
-                  top: 0,
-                  bottom: 0,
-                  width: 1,
-                  backgroundColor: theme.border,
-                }}
-              />
-            )}
-
-            {/* Expand/collapse chevron */}
-            {hasChildren ? (
-              <span
-                role="presentation"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  toggleExpand(node.id);
-                }}
-                className={tkx('inline-flex items-center justify-center cursor-pointer')}
-                style={{ width: 20, height: 20 }}
-              >
-                <ChevronIcon
-                  expanded={isExpanded}
-                  color={theme.textMuted}
-                  reducedMotion={reducedMotion}
-                />
-              </span>
-            ) : (
-              <span style={{ width: 20, height: 20 }} aria-hidden="true" />
-            )}
-
-            {/* Checkbox */}
-            {showCheckboxes && (
-              <TreeCheckbox
-                checked={isSelected}
-                color={theme.primary}
-                borderColor={theme.border}
-              />
-            )}
-
-            {/* Icon */}
-            {node.icon && (
-              <span aria-hidden="true" className={tkx('flex-shrink-0')}>
-                {node.icon}
-              </span>
-            )}
-
-            {/* Label */}
-            <span
-              className={tkx('text-sm truncate')}
-              style={{ color: node.disabled ? theme.textMuted : theme.text }}
-            >
-              {safeLabel}
-            </span>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
-
-export default TkxTreeView;

package/src/components/TkxTypography.tsx

@@ -1,267 +0,0 @@
-'use client';
-
-import React, {
-  useState,
-  useCallback,
-  type ReactNode,
-  type CSSProperties,
-  createElement,
-} from 'react';
-import { useTheme } from '../themes';
-import { sanitizeString } from '../engine/security';
-
-// ── Interfaces ──────────────────────────────────────────────────────────────
-
-export type TypographyType = 'default' | 'secondary' | 'success' | 'warning' | 'danger';
-
-export interface TkxTitleProps {
-  level?: 1 | 2 | 3 | 4 | 5;
-  children: ReactNode;
-  copyable?: boolean;
-  type?: TypographyType;
-  style?: CSSProperties;
-}
-
-export interface TkxTextProps {
-  children: ReactNode;
-  type?: TypographyType;
-  strong?: boolean;
-  italic?: boolean;
-  underline?: boolean;
-  delete?: boolean;
-  code?: boolean;
-  mark?: boolean;
-  copyable?: boolean;
-  style?: CSSProperties;
-}
-
-export interface TkxParagraphProps {
-  children: ReactNode;
-  type?: 'default' | 'secondary';
-  copyable?: boolean;
-  ellipsis?: boolean | { rows?: number };
-  style?: CSSProperties;
-}
-
-// ── Helpers ─────────────────────────────────────────────────────────────────
-
-function getTextContent(node: ReactNode): string {
-  if (typeof node === 'string') return node;
-  if (typeof node === 'number') return String(node);
-  if (Array.isArray(node)) return node.map(getTextContent).join('');
-  if (node && typeof node === 'object' && 'props' in node) {
-    return getTextContent((node as { props: { children?: ReactNode } }).props.children);
-  }
-  return '';
-}
-
-// ── CopyButton ──────────────────────────────────────────────────────────────
-
-function CopyButton({ text }: { text: string }) {
-  const theme = useTheme();
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(text).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    });
-  }, [text]);
-
-  return createElement(
-    'button',
-    {
-      type: 'button' as const,
-      onClick: handleCopy,
-      'aria-label': copied ? 'Copied' : 'Copy to clipboard',
-      style: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        marginLeft: '4px',
-        padding: '2px 6px',
-        border: 'none',
-        background: 'transparent',
-        color: copied ? theme.success : theme.textMuted,
-        cursor: 'pointer',
-        fontSize: '0.8em',
-        borderRadius: '4px',
-        transition: 'color 0.2s',
-      },
-    },
-    copied ? 'Copied!' : '\u2398',
-  );
-}
-
-// ── Color Map ───────────────────────────────────────────────────────────────
-
-function useTypeColor(type: TypographyType = 'default') {
-  const theme = useTheme();
-  const map: Record<TypographyType, string> = {
-    default: theme.text,
-    secondary: theme.textMuted,
-    success: theme.success,
-    warning: theme.warning,
-    danger: theme.danger,
-  };
-  return map[type];
-}
-
-// ── Title Sizes ─────────────────────────────────────────────────────────────
-
-const TITLE_SIZES: Record<number, { fontSize: string; lineHeight: string; fontWeight: number }> = {
-  1: { fontSize: '2.25rem', lineHeight: '1.2', fontWeight: 700 },
-  2: { fontSize: '1.875rem', lineHeight: '1.25', fontWeight: 700 },
-  3: { fontSize: '1.5rem', lineHeight: '1.3', fontWeight: 600 },
-  4: { fontSize: '1.25rem', lineHeight: '1.35', fontWeight: 600 },
-  5: { fontSize: '1rem', lineHeight: '1.4', fontWeight: 600 },
-};
-
-// ── TkxTitle ────────────────────────────────────────────────────────────────
-
-export function TkxTitle({
-  level = 1,
-  children,
-  copyable = false,
-  type = 'default',
-  style,
-}: TkxTitleProps) {
-  const color = useTypeColor(type);
-  const theme = useTheme();
-  const sizeConfig = TITLE_SIZES[level];
-  const tag = `h${level}` as keyof React.JSX.IntrinsicElements;
-
-  const safeChildren = typeof children === 'string' ? sanitizeString(children) : children;
-  const textContent = getTextContent(children);
-
-  return createElement(
-    tag,
-    {
-      style: {
-        color,
-        fontSize: sizeConfig.fontSize,
-        lineHeight: sizeConfig.lineHeight,
-        fontWeight: sizeConfig.fontWeight,
-        margin: '0 0 0.5em 0',
-        fontFamily: 'inherit',
-        ...style,
-      },
-    },
-    safeChildren,
-    copyable && createElement(CopyButton, { text: textContent }),
-  );
-}
-
-// ── TkxText ─────────────────────────────────────────────────────────────────
-
-export function TkxText({
-  children,
-  type = 'default',
-  strong = false,
-  italic = false,
-  underline = false,
-  delete: strikethrough = false,
-  code = false,
-  mark = false,
-  copyable = false,
-  style,
-}: TkxTextProps) {
-  const color = useTypeColor(type);
-  const theme = useTheme();
-  const textContent = getTextContent(children);
-  const safeChildren = typeof children === 'string' ? sanitizeString(children) : children;
-
-  const decorations: string[] = [];
-  if (underline) decorations.push('underline');
-  if (strikethrough) decorations.push('line-through');
-
-  let content: ReactNode = safeChildren;
-
-  if (code) {
-    content = createElement(
-      'code',
-      {
-        style: {
-          padding: '0.15em 0.4em',
-          fontSize: '0.875em',
-          backgroundColor: theme.surfaceAlt,
-          border: `1px solid ${theme.border}`,
-          borderRadius: '4px',
-          fontFamily: 'monospace',
-        },
-      },
-      content,
-    );
-  }
-
-  if (mark) {
-    content = createElement(
-      'mark',
-      {
-        style: {
-          backgroundColor: `${theme.warning}33`,
-          color,
-          padding: '0 2px',
-          borderRadius: '2px',
-        },
-      },
-      content,
-    );
-  }
-
-  // Use semantic HTML elements when appropriate
-  const tag = strong ? 'strong' : italic ? 'em' : 'span';
-
-  return createElement(
-    tag,
-    {
-      style: {
-        color,
-        fontStyle: italic ? 'italic' : 'normal',
-        textDecoration: decorations.length > 0 ? decorations.join(' ') : 'none',
-        ...style,
-      },
-    },
-    content,
-    copyable && createElement(CopyButton, { text: textContent }),
-  );
-}
-
-// ── TkxParagraph ────────────────────────────────────────────────────────────
-
-export function TkxParagraph({
-  children,
-  type = 'default',
-  copyable = false,
-  ellipsis = false,
-  style,
-}: TkxParagraphProps) {
-  const theme = useTheme();
-  const color = type === 'secondary' ? theme.textMuted : theme.text;
-  const textContent = getTextContent(children);
-  const safeChildren = typeof children === 'string' ? sanitizeString(children) : children;
-
-  const ellipsisStyle: CSSProperties = {};
-  if (ellipsis) {
-    const rows = typeof ellipsis === 'object' ? (ellipsis.rows ?? 3) : 3;
-    ellipsisStyle.display = '-webkit-box';
-    ellipsisStyle.WebkitLineClamp = rows;
-    ellipsisStyle.WebkitBoxOrient = 'vertical';
-    ellipsisStyle.overflow = 'hidden';
-  }
-
-  return createElement(
-    'div',
-    {
-      style: {
-        color,
-        fontSize: '1rem',
-        lineHeight: '1.6',
-        margin: '0 0 1em 0',
-        ...ellipsisStyle,
-        ...style,
-      },
-    },
-    safeChildren,
-    copyable && createElement(CopyButton, { text: textContent }),
-  );
-}