@thangnqdev/ui 0.1.0

package/src/data-display/DataTablePro.tsx

@@ -0,0 +1,356 @@
+import React, { useState, useMemo, forwardRef } from 'react';
+import {
+  ChevronUp,
+  ChevronDown,
+  ChevronsUpDown,
+  Search,
+  Download,
+  Trash2,
+  ChevronLeft,
+  ChevronRight,
+  Filter,
+} from 'lucide-react';
+import { cn } from '../utils/cn';
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from './Table';
+import { Button } from '../buttons/Button';
+import { Input } from '../forms/Input';
+import { Checkbox } from '../forms/Checkbox';
+import { Chip } from './Chip';
+
+export interface ColumnDef<T> {
+  key: string;
+  header: string | React.ReactNode;
+  accessor?: (row: T) => any;
+  render?: (row: T, index: number) => React.ReactNode;
+  sortable?: boolean;
+  width?: string;
+}
+
+export interface DataTableProProps<T> {
+  data: T[];
+  columns: ColumnDef<T>[];
+  keyExtractor: (row: T) => string;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  selectable?: boolean;
+  onSelectionChange?: (selectedKeys: string[]) => void;
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  title?: string;
+  description?: string;
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+export function DataTablePro<T extends Record<string, any>>({
+  data,
+  columns,
+  keyExtractor,
+  searchable = true,
+  searchPlaceholder = 'Search all records...',
+  selectable = true,
+  onSelectionChange,
+  pageSize: initialPageSize = 10,
+  pageSizeOptions = [5, 10, 25, 50],
+  title,
+  description,
+  actions,
+  className,
+}: DataTableProProps<T>) {
+  const [search, setSearch] = useState('');
+  const [sortKey, setSortKey] = useState<string | null>(null);
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(initialPageSize);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+
+  // 1. Search filter
+  const filteredData = useMemo(() => {
+    if (!search.trim()) return data;
+    const q = search.toLowerCase();
+    return data.filter((row) => {
+      return Object.values(row).some((val) => {
+        if (val === null || val === undefined) return false;
+        return String(val).toLowerCase().includes(q);
+      });
+    });
+  }, [data, search]);
+
+  // 2. Sorting
+  const sortedData = useMemo(() => {
+    if (!sortKey) return filteredData;
+    const col = columns.find((c) => c.key === sortKey);
+
+    return [...filteredData].sort((a, b) => {
+      const valA = col?.accessor ? col.accessor(a) : a[sortKey];
+      const valB = col?.accessor ? col.accessor(b) : b[sortKey];
+
+      if (valA === valB) return 0;
+      if (valA === null || valA === undefined) return 1;
+      if (valB === null || valB === undefined) return -1;
+
+      const comp = valA < valB ? -1 : 1;
+      return sortDirection === 'asc' ? comp : -comp;
+    });
+  }, [filteredData, sortKey, sortDirection, columns]);
+
+  // 3. Pagination
+  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
+  const paginatedData = useMemo(() => {
+    const start = (currentPage - 1) * pageSize;
+    return sortedData.slice(start, start + pageSize);
+  }, [sortedData, currentPage, pageSize]);
+
+  const handleSort = (key: string) => {
+    if (sortKey === key) {
+      if (sortDirection === 'asc') {
+        setSortDirection('desc');
+      } else {
+        setSortKey(null);
+        setSortDirection('asc');
+      }
+    } else {
+      setSortKey(key);
+      setSortDirection('asc');
+    }
+  };
+
+  const toggleSelectAll = () => {
+    if (selectedKeys.length === paginatedData.length) {
+      setSelectedKeys([]);
+      onSelectionChange?.([]);
+    } else {
+      const allKeys = paginatedData.map(keyExtractor);
+      setSelectedKeys(allKeys);
+      onSelectionChange?.(allKeys);
+    }
+  };
+
+  const toggleSelectRow = (key: string) => {
+    const next = selectedKeys.includes(key)
+      ? selectedKeys.filter((k) => k !== key)
+      : [...selectedKeys, key];
+    setSelectedKeys(next);
+    onSelectionChange?.(next);
+  };
+
+  const exportCSV = () => {
+    const headers = columns.map((c) => (typeof c.header === 'string' ? c.header : c.key));
+    const rows = sortedData.map((row) =>
+      columns.map((c) => {
+        const val = c.accessor ? c.accessor(row) : row[c.key];
+        return `"${String(val ?? '').replace(/"/g, '""')}"`;
+      }).join(',')
+    );
+    const csvContent = 'data:text/csv;charset=utf-8,' + [headers.join(','), ...rows].join('\n');
+    const encodedUri = encodeURI(csvContent);
+    const link = document.createElement('a');
+    link.setAttribute('href', encodedUri);
+    link.setAttribute('download', `export_${Date.now()}.csv`);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const isAllSelected =
+    paginatedData.length > 0 && selectedKeys.length === paginatedData.length;
+
+  return (
+    <div className={cn('w-full space-y-4', className)}>
+      {/* Header Toolbar */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        {(title || description) && (
+          <div>
+            {title && <h3 className="text-base font-bold tracking-tight text-[var(--ui-text-primary)]">{title}</h3>}
+            {description && <p className="text-xs text-[var(--ui-text-muted)]">{description}</p>}
+          </div>
+        )}
+
+        <div className="flex flex-wrap items-center gap-2.5">
+          {searchable && (
+            <div className="relative w-full sm:w-64">
+              <Search className="absolute left-3 w-3.5 h-3.5 text-[var(--ui-text-muted)] pointer-events-none" />
+              <input
+                type="text"
+                placeholder={searchPlaceholder}
+                value={search}
+                onChange={(e) => {
+                  setSearch(e.target.value);
+                  setCurrentPage(1);
+                }}
+                className="w-full h-8 pl-8 pr-3 text-xs rounded-xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] focus:outline-none focus:ring-2 focus:ring-[var(--ui-primary)]/40 text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)] transition-all shadow-inner"
+              />
+            </div>
+          )}
+
+          <Button size="xs" variant="outline" leftIcon={<Download className="w-3 h-3" />} onClick={exportCSV}>
+            Export CSV
+          </Button>
+
+          {actions}
+        </div>
+      </div>
+
+      {/* Bulk selection pill */}
+      {selectedKeys.length > 0 && (
+        <div className="px-4 py-2 rounded-xl bg-[var(--ui-primary)]/15 border border-[var(--ui-primary)]/30 flex items-center justify-between animate-in fade-in duration-200">
+          <div className="flex items-center gap-2 text-xs font-semibold text-[var(--ui-primary)]">
+            <span>Selected {selectedKeys.length} of {sortedData.length} records</span>
+          </div>
+          <Button
+            size="xs"
+            variant="ghost"
+            className="text-xs text-rose-500 hover:text-rose-600 hover:bg-rose-500/10"
+            onClick={() => {
+              setSelectedKeys([]);
+              onSelectionChange?.([]);
+            }}
+          >
+            Clear Selection
+          </Button>
+        </div>
+      )}
+
+      {/* Table Container */}
+      <div className="relative w-full overflow-x-auto rounded-2xl border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] shadow-sm">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {selectable && (
+                <TableHead className="w-10 px-4">
+                  <input
+                    type="checkbox"
+                    checked={isAllSelected}
+                    onChange={toggleSelectAll}
+                    className="rounded border-[var(--ui-border-default)] text-[var(--ui-primary)] focus:ring-[var(--ui-primary)] cursor-pointer"
+                  />
+                </TableHead>
+              )}
+
+              {columns.map((col) => (
+                <TableHead
+                  key={col.key}
+                  style={{ width: col.width }}
+                  onClick={() => col.sortable !== false && handleSort(col.key)}
+                  className={cn(
+                    col.sortable !== false && 'cursor-pointer select-none hover:text-[var(--ui-text-primary)] transition-colors'
+                  )}
+                >
+                  <div className="flex items-center gap-1.5">
+                    <span>{col.header}</span>
+                    {col.sortable !== false && (
+                      <span className="text-[var(--ui-text-muted)]">
+                        {sortKey === col.key ? (
+                          sortDirection === 'asc' ? (
+                            <ChevronUp className="w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" />
+                          ) : (
+                            <ChevronDown className="w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" />
+                          )
+                        ) : (
+                          <ChevronsUpDown className="w-3 h-3 opacity-40" />
+                        )}
+                      </span>
+                    )}
+                  </div>
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {paginatedData.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={columns.length + (selectable ? 1 : 0)} className="h-32 text-center text-xs text-[var(--ui-text-muted)]">
+                  No matching records found.
+                </TableCell>
+              </TableRow>
+            ) : (
+              paginatedData.map((row, rowIdx) => {
+                const key = keyExtractor(row);
+                const isSelected = selectedKeys.includes(key);
+
+                return (
+                  <TableRow
+                    key={key}
+                    data-state={isSelected ? 'selected' : undefined}
+                    className={cn(isSelected && 'bg-[var(--ui-primary)]/10')}
+                  >
+                    {selectable && (
+                      <TableCell className="w-10 px-4">
+                        <input
+                          type="checkbox"
+                          checked={isSelected}
+                          onChange={() => toggleSelectRow(key)}
+                          className="rounded border-[var(--ui-border-default)] text-[var(--ui-primary)] focus:ring-[var(--ui-primary)] cursor-pointer"
+                        />
+                      </TableCell>
+                    )}
+
+                    {columns.map((col) => {
+                      const cellContent = col.render
+                        ? col.render(row, rowIdx)
+                        : col.accessor
+                        ? col.accessor(row)
+                        : row[col.key];
+
+                      return <TableCell key={col.key}>{cellContent}</TableCell>;
+                    })}
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination Footer */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 px-1 text-xs text-[var(--ui-text-muted)] font-mono">
+        <div className="flex items-center gap-2">
+          <span>Rows per page:</span>
+          <select
+            value={pageSize}
+            onChange={(e) => {
+              setPageSize(Number(e.target.value));
+              setCurrentPage(1);
+            }}
+            className="px-2 py-1 rounded-lg bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] text-[var(--ui-text-primary)] font-mono text-xs focus:outline-none"
+          >
+            {pageSizeOptions.map((opt) => (
+              <option key={opt} value={opt}>
+                {opt}
+              </option>
+            ))}
+          </select>
+          <span className="text-[var(--ui-text-muted)]">
+            Showing {Math.min((currentPage - 1) * pageSize + 1, sortedData.length)}–
+            {Math.min(currentPage * pageSize, sortedData.length)} of {sortedData.length}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-1.5">
+          <Button
+            size="xs"
+            variant="outline"
+            disabled={currentPage === 1}
+            onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+          >
+            <ChevronLeft className="w-3.5 h-3.5" />
+          </Button>
+
+          <span className="px-2 font-bold text-[var(--ui-text-primary)]">
+            {currentPage} / {totalPages}
+          </span>
+
+          <Button
+            size="xs"
+            variant="outline"
+            disabled={currentPage === totalPages}
+            onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+          >
+            <ChevronRight className="w-3.5 h-3.5" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/data-display/StatCard.tsx

@@ -0,0 +1,60 @@
+import React, { forwardRef } from 'react';
+import { ArrowUpRight, ArrowDownRight, Minus } from 'lucide-react';
+import { Card } from './Card';
+import { cn } from '../utils/cn';
+
+export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: string;
+  value: string | number;
+  change?: string | number;
+  trend?: 'up' | 'down' | 'neutral';
+  trendLabel?: string;
+  icon?: React.ReactNode;
+}
+
+export const StatCard = forwardRef<HTMLDivElement, StatCardProps>(
+  ({ className, label, value, change, trend, trendLabel, icon, ...props }, ref) => {
+    return (
+      <Card ref={ref} className={cn('p-6', className)} {...props}>
+        <div className="flex items-center justify-between">
+          <span className="text-xs font-semibold uppercase tracking-wider text-[var(--ui-text-muted)]">
+            {label}
+          </span>
+          {icon && (
+            <div className="p-2 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg-secondary)] text-[var(--ui-text-secondary)]">
+              {icon}
+            </div>
+          )}
+        </div>
+
+        <div className="mt-3 flex items-baseline gap-2">
+          <span className="text-2xl sm:text-3xl font-extrabold tracking-tight text-[var(--ui-text-primary)]">
+            {value}
+          </span>
+
+          {change !== undefined && (
+            <div
+              className={cn(
+                'inline-flex items-center gap-0.5 text-xs font-bold px-1.5 py-0.5 rounded-full',
+                trend === 'up' && 'text-[var(--ui-success)] bg-[var(--ui-success-subtle)]',
+                trend === 'down' && 'text-[var(--ui-error)] bg-[var(--ui-error-subtle)]',
+                trend === 'neutral' && 'text-[var(--ui-text-muted)] bg-[var(--ui-bg-tertiary)]'
+              )}
+            >
+              {trend === 'up' && <ArrowUpRight className="w-3.5 h-3.5" />}
+              {trend === 'down' && <ArrowDownRight className="w-3.5 h-3.5" />}
+              {trend === 'neutral' && <Minus className="w-3.5 h-3.5" />}
+              <span>{change}</span>
+            </div>
+          )}
+        </div>
+
+        {trendLabel && (
+          <p className="mt-2 text-xs text-[var(--ui-text-muted)]">{trendLabel}</p>
+        )}
+      </Card>
+    );
+  }
+);
+
+StatCard.displayName = 'StatCard';

package/src/data-display/Table.tsx

@@ -0,0 +1,74 @@
+import React, { forwardRef } from 'react';
+import { cn } from '../utils/cn';
+
+export const Table = forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto rounded-[var(--ui-radius-lg)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)]">
+      <table ref={ref} className={cn('w-full caption-bottom text-sm text-left', className)} {...props} />
+    </div>
+  )
+);
+Table.displayName = 'Table';
+
+export const TableHeader = forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <thead ref={ref} className={cn('bg-[var(--ui-bg-secondary)] border-b border-[var(--ui-border-default)]', className)} {...props} />
+  )
+);
+TableHeader.displayName = 'TableHeader';
+
+export const TableBody = forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+  )
+);
+TableBody.displayName = 'TableBody';
+
+export const TableFooter = forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot ref={ref} className={cn('bg-[var(--ui-bg-secondary)] font-medium border-t border-[var(--ui-border-default)]', className)} {...props} />
+  )
+);
+TableFooter.displayName = 'TableFooter';
+
+export const TableRow = forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        'border-b border-[var(--ui-border-subtle)] transition-colors hover:bg-[var(--ui-bg-tertiary)]/50 data-[state=selected]:bg-[var(--ui-bg-tertiary)]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableRow.displayName = 'TableRow';
+
+export const TableHead = forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        'h-11 px-4 text-left align-middle font-semibold text-xs text-[var(--ui-text-muted)] uppercase tracking-wider',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableHead.displayName = 'TableHead';
+
+export const TableCell = forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td ref={ref} className={cn('p-4 align-middle text-sm text-[var(--ui-text-primary)]', className)} {...props} />
+  )
+);
+TableCell.displayName = 'TableCell';
+
+export const TableCaption = forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption ref={ref} className={cn('mt-4 text-xs text-[var(--ui-text-muted)]', className)} {...props} />
+  )
+);
+TableCaption.displayName = 'TableCaption';

package/src/data-display/Timeline.tsx

@@ -0,0 +1,62 @@
+import React, { forwardRef } from 'react';
+import { cn } from '../utils/cn';
+
+export interface TimelineItem {
+  id: string | number;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  timestamp?: string;
+  icon?: React.ReactNode;
+  status?: 'completed' | 'active' | 'pending';
+}
+
+export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: TimelineItem[];
+}
+
+export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
+  ({ className, items, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('relative pl-6 space-y-6', className)} {...props}>
+        {/* Vertical track line */}
+        <div className="absolute left-[11px] top-2 bottom-2 w-0.5 bg-[var(--ui-border-subtle)]" />
+
+        {items.map((item) => {
+          const isCompleted = item.status === 'completed';
+          const isActive = item.status === 'active';
+
+          return (
+            <div key={item.id} className="relative flex items-start gap-4">
+              {/* Dot */}
+              <div
+                className={cn(
+                  'absolute -left-6 flex items-center justify-center w-6 h-6 rounded-full ring-4 ring-[var(--ui-bg-surface)] text-xs font-bold transition-all',
+                  isCompleted && 'bg-[var(--ui-primary)] text-[var(--ui-primary-fg)]',
+                  isActive && 'bg-[var(--ui-bg-surface)] border-2 border-[var(--ui-primary)] text-[var(--ui-primary)]',
+                  (!item.status || item.status === 'pending') && 'bg-[var(--ui-bg-tertiary)] border border-[var(--ui-border-default)] text-[var(--ui-text-muted)]'
+                )}
+              >
+                {item.icon || <span className="w-1.5 h-1.5 rounded-full bg-current" />}
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 space-y-1 pt-0.5">
+                <div className="flex items-center justify-between gap-2">
+                  <h4 className="text-sm font-semibold text-[var(--ui-text-primary)]">{item.title}</h4>
+                  {item.timestamp && (
+                    <span className="text-xs text-[var(--ui-text-muted)] font-mono">{item.timestamp}</span>
+                  )}
+                </div>
+                {item.description && (
+                  <p className="text-xs text-[var(--ui-text-secondary)] leading-relaxed">{item.description}</p>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);
+
+Timeline.displayName = 'Timeline';

package/src/data-display/TreeView.tsx

@@ -0,0 +1,140 @@
+import React, { useState, forwardRef } from 'react';
+import { ChevronRight, Folder, FolderOpen, File, FileCode, FileText, Image as ImageIcon } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export interface TreeItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  badge?: string | number;
+  children?: TreeItem[];
+  defaultExpanded?: boolean;
+}
+
+export interface TreeViewProps {
+  data: TreeItem[];
+  selectedId?: string;
+  onSelect?: (item: TreeItem) => void;
+  className?: string;
+}
+
+interface TreeNodeProps {
+  item: TreeItem;
+  level: number;
+  selectedId?: string;
+  onSelect?: (item: TreeItem) => void;
+}
+
+function TreeNode({ item, level, selectedId, onSelect }: TreeNodeProps) {
+  const [isExpanded, setIsExpanded] = useState(Boolean(item.defaultExpanded));
+  const hasChildren = Boolean(item.children && item.children.length > 0);
+  const isSelected = selectedId === item.id;
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (hasChildren) {
+      setIsExpanded(!isExpanded);
+    }
+    onSelect?.(item);
+  };
+
+  const getIcon = () => {
+    if (item.icon) return item.icon;
+    if (hasChildren) {
+      return isExpanded ? (
+        <FolderOpen className="w-4 h-4 text-amber-500 shrink-0" />
+      ) : (
+        <Folder className="w-4 h-4 text-amber-500 shrink-0" />
+      );
+    }
+    if (item.label.endsWith('.tsx') || item.label.endsWith('.ts') || item.label.endsWith('.js')) {
+      return <FileCode className="w-4 h-4 text-blue-500 shrink-0" />;
+    }
+    if (item.label.endsWith('.png') || item.label.endsWith('.jpg') || item.label.endsWith('.svg')) {
+      return <ImageIcon className="w-4 h-4 text-purple-500 shrink-0" />;
+    }
+    return <FileText className="w-4 h-4 text-[var(--ui-text-muted)] shrink-0" />;
+  };
+
+  return (
+    <div className="select-none text-xs">
+      <div
+        onClick={handleClick}
+        style={{ paddingLeft: `${level * 16 + 8}px` }}
+        className={cn(
+          'flex items-center justify-between py-1.5 pr-2.5 rounded-xl cursor-pointer transition-colors group',
+          isSelected
+            ? 'bg-[var(--ui-primary)] text-white font-semibold shadow-xs'
+            : 'text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]'
+        )}
+      >
+        <div className="flex items-center gap-2 truncate">
+          {hasChildren ? (
+            <span className={cn('p-0.5 rounded transition-transform duration-200', isExpanded && 'rotate-90')}>
+              <ChevronRight className={cn('w-3 h-3', isSelected ? 'text-white' : 'text-[var(--ui-text-muted)]')} />
+            </span>
+          ) : (
+            <span className="w-4" />
+          )}
+
+          {getIcon()}
+          <span className="truncate">{item.label}</span>
+        </div>
+
+        {item.badge !== undefined && (
+          <span
+            className={cn(
+              'px-1.5 py-0.5 rounded-md text-[10px] font-mono',
+              isSelected ? 'bg-white/20 text-white' : 'bg-[var(--ui-bg-secondary)] text-[var(--ui-text-muted)]'
+            )}
+          >
+            {item.badge}
+          </span>
+        )}
+      </div>
+
+      {hasChildren && isExpanded && (
+        <div className="relative space-y-0.5 animate-in fade-in duration-150">
+          <div
+            className="absolute left-[15px] top-0 bottom-0 w-[1px] bg-[var(--ui-border-subtle)]"
+            style={{ left: `${level * 16 + 15}px` }}
+          />
+          {item.children!.map((child) => (
+            <TreeNode
+              key={child.id}
+              item={child}
+              level={level + 1}
+              selectedId={selectedId}
+              onSelect={onSelect}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const TreeView = forwardRef<HTMLDivElement, TreeViewProps>(
+  ({ data, selectedId, onSelect, className }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'w-full p-2 rounded-2xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] space-y-0.5 shadow-sm overflow-hidden',
+          className
+        )}
+      >
+        {data.map((item) => (
+          <TreeNode
+            key={item.id}
+            item={item}
+            level={0}
+            selectedId={selectedId}
+            onSelect={onSelect}
+          />
+        ))}
+      </div>
+    );
+  }
+);
+TreeView.displayName = 'TreeView';