tekivex-ui 2.0.2 → 2.2.0

package/src/components/TkxTreeView.tsx

@@ -0,0 +1,421 @@
+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

@@ -0,0 +1,263 @@
+import {
+  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 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,
+    );
+  }
+
+  return createElement(
+    'span',
+    {
+      style: {
+        color,
+        fontWeight: strong ? 600 : 'inherit',
+        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 }),
+  );
+}

package/src/components/index.ts

@@ -38,3 +38,23 @@ export * from './TkxNumberInput';
 export * from './TkxOTP';
 export * from './TkxCommand';
 export * from './TkxCarousel';
+export * from './TkxBreadcrumb';
+export * from './TkxPopover';
+export * from './TkxAutocomplete';
+export * from './TkxTreeView';
+export * from './TkxToolbar';
+export * from './TkxTransferList';
+export * from './TkxSpeedDial';
+export * from './TkxAppBar';
+export * from './TkxBottomNav';
+export * from './TkxSnackbar';
+export * from './TkxDataGrid';
+export * from './TkxMasonry';
+export * from './TkxRichTextDisplay';
+export * from './TkxForm';
+export * from './TkxLayout';
+export * from './TkxConfigProvider';
+export * from './TkxTypography';
+export * from './TkxSpin';
+export * from './TkxEmpty';
+export * from './TkxStatistic';