@beyondcorp/beyond-ui 1.0.5 → 1.0.7

package/dist/index.js

@@ -1,11 +1,11 @@
 import * as React11 from 'react';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Check, X, Menu, ChevronRight, ChevronLeft, User, LogOut, Search, Bell, Settings, Minus, TrendingDown, TrendingUp, Home, BarChart3, Users, FileText, Calendar, Mail, ChevronDown, Info, AlertTriangle, AlertCircle, CheckCircle, Palette, Monitor, Tablet, Smartphone, Sun, Moon, Eye, Code, Copy, Book, Layout, MousePointer } from 'lucide-react';
+import { Check, X, Menu, ChevronRight, ChevronLeft, User, LogOut, Search, Bell, Settings, Minus, TrendingDown, TrendingUp, Home, BarChart3, Users, FileText, Calendar, Mail, ChevronDown, Download, Plus, DollarSign, Filter, ChevronUp, ChevronsLeft, ChevronsRight, Eye, Edit, Trash2, Info, AlertTriangle, AlertCircle, CheckCircle, Palette, Monitor, Tablet, Smartphone, Sun, Moon, Code, Copy, Book, Layout, MousePointer } from 'lucide-react';
 import toast, { Toaster, ToastBar } from 'react-hot-toast';
 
 // src/components/Button/Button.tsx
@@ -1318,6 +1318,948 @@ var DashboardGridItem = React11.forwardRef(
 );
 DashboardGrid.displayName = "DashboardGrid";
 DashboardGridItem.displayName = "DashboardGridItem";
+var tableVariants = cva(
+  "w-full border-collapse bg-white",
+  {
+    variants: {
+      size: {
+        small: "text-xs",
+        middle: "text-sm",
+        large: "text-base"
+      },
+      bordered: {
+        true: "border border-gray-200",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "middle",
+      bordered: false
+    }
+  }
+);
+var cellVariants = cva(
+  "border-b border-gray-200 transition-colors",
+  {
+    variants: {
+      size: {
+        small: "px-2 py-1",
+        middle: "px-4 py-3",
+        large: "px-6 py-4"
+      },
+      align: {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right"
+      },
+      type: {
+        header: "bg-gray-50 font-semibold text-gray-900 border-b-2 border-gray-200",
+        body: "text-gray-700 hover:bg-gray-50"
+      }
+    },
+    defaultVariants: {
+      size: "middle",
+      align: "left",
+      type: "body"
+    }
+  }
+);
+var ColumnFilter = ({
+  column,
+  value,
+  onChange
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [tempValue, setTempValue] = useState(value || "");
+  const handleApply = () => {
+    onChange(tempValue);
+    setIsOpen(false);
+  };
+  const handleClear = () => {
+    setTempValue("");
+    onChange("");
+    setIsOpen(false);
+  };
+  if (!column.filterable) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-block", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: () => setIsOpen(!isOpen),
+        className: cn(
+          "p-1 h-6 w-6",
+          value && "text-primary-600"
+        ),
+        children: /* @__PURE__ */ jsx(Filter, { className: "h-3 w-3" })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-10",
+          onClick: () => setIsOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "absolute top-full left-0 z-20 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg p-3 min-w-[200px]", children: [
+        column.filterType === "select" && column.filterOptions ? /* @__PURE__ */ jsx("div", { className: "space-y-2", children: column.filterOptions.map((option) => /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: tempValue === option.value,
+              onChange: () => setTempValue(
+                tempValue === option.value ? "" : option.value
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm", children: option.label })
+        ] }, option.value)) }) : /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: `Filter ${column.title}`,
+            value: tempValue,
+            onChange: (e) => setTempValue(e.target.value),
+            className: "mb-2"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end space-x-2 mt-3", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleClear, children: "Clear" }),
+          /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: handleApply, children: "Apply" })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+var TablePagination = ({ pagination, onChange }) => {
+  const { current, pageSize, total, showSizeChanger = true, pageSizeOptions = [10, 20, 50, 100] } = pagination;
+  const totalPages = Math.ceil(total / pageSize);
+  const startRecord = (current - 1) * pageSize + 1;
+  const endRecord = Math.min(current * pageSize, total);
+  const getPageNumbers = () => {
+    const pages = [];
+    const maxVisible = 5;
+    if (totalPages <= maxVisible) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      const start = Math.max(1, current - 2);
+      const end = Math.min(totalPages, start + maxVisible - 1);
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+    }
+    return pages;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 bg-white border-t border-gray-200", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-700", children: [
+        "Showing ",
+        startRecord,
+        " to ",
+        endRecord,
+        " of ",
+        total,
+        " results"
+      ] }),
+      showSizeChanger && /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: "Show" }),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            value: pageSize,
+            onChange: (e) => onChange(1, Number(e.target.value)),
+            className: "border border-gray-300 rounded px-2 py-1 text-sm",
+            children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: "per page" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => onChange(1, pageSize),
+          disabled: current === 1,
+          children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => onChange(current - 1, pageSize),
+          disabled: current === 1,
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+        }
+      ),
+      getPageNumbers().map((page) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: current === page ? "primary" : "ghost",
+          size: "sm",
+          onClick: () => onChange(page, pageSize),
+          className: "min-w-[32px]",
+          children: page
+        },
+        page
+      )),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => onChange(current + 1, pageSize),
+          disabled: current === totalPages,
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => onChange(totalPages, pageSize),
+          disabled: current === totalPages,
+          children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+};
+var DataTable = ({
+  columns,
+  dataSource,
+  loading = false,
+  rowKey = "id",
+  pagination = { current: 1, pageSize: 10, total: 0 },
+  rowSelection,
+  size = "middle",
+  bordered = false,
+  showHeader = true,
+  title,
+  footer,
+  className,
+  onSort,
+  onFilter,
+  onChange,
+  ...props
+}) => {
+  const [sortConfig, setSortConfig] = useState({ key: "", direction: null });
+  const [filters, setFilters] = useState({});
+  const [selectedRowKeys, setSelectedRowKeys] = useState(
+    rowSelection?.selectedRowKeys || []
+  );
+  const getRowKey = useCallback((record, index) => {
+    if (typeof rowKey === "function") {
+      return rowKey(record);
+    }
+    return record[rowKey] || index;
+  }, [rowKey]);
+  const handleSort = useCallback((columnKey) => {
+    let newDirection;
+    if (sortConfig.key !== columnKey) {
+      newDirection = "asc";
+    } else if (sortConfig.direction === "asc") {
+      newDirection = "desc";
+    } else if (sortConfig.direction === "desc") {
+      newDirection = null;
+    } else {
+      newDirection = "asc";
+    }
+    const newSortConfig = { key: columnKey, direction: newDirection };
+    setSortConfig(newSortConfig);
+    onSort?.(newSortConfig);
+    onChange?.(pagination, filters, newSortConfig);
+  }, [sortConfig, pagination, filters, onSort, onChange]);
+  const handleFilter = useCallback((columnKey, value) => {
+    const newFilters = { ...filters };
+    if (value === "" || value === null || value === void 0) {
+      delete newFilters[columnKey];
+    } else {
+      newFilters[columnKey] = value;
+    }
+    setFilters(newFilters);
+    onFilter?.(newFilters);
+    onChange?.(pagination, newFilters, sortConfig);
+  }, [filters, pagination, sortConfig, onFilter, onChange]);
+  const handleRowSelect = useCallback((record, selected) => {
+    const key = getRowKey(record, 0);
+    let newSelectedKeys;
+    if (rowSelection?.type === "radio") {
+      newSelectedKeys = selected ? [key] : [];
+    } else {
+      newSelectedKeys = selected ? [...selectedRowKeys, key] : selectedRowKeys.filter((k) => k !== key);
+    }
+    setSelectedRowKeys(newSelectedKeys);
+    const selectedRows = dataSource.filter(
+      (item) => newSelectedKeys.includes(getRowKey(item, 0))
+    );
+    rowSelection?.onChange?.(newSelectedKeys, selectedRows);
+    rowSelection?.onSelect?.(record, selected, selectedRows, {});
+  }, [selectedRowKeys, rowSelection, dataSource, getRowKey]);
+  const handleSelectAll = useCallback((selected) => {
+    const newSelectedKeys = selected ? dataSource.map((item, index) => getRowKey(item, index)) : [];
+    setSelectedRowKeys(newSelectedKeys);
+    const selectedRows = selected ? dataSource : [];
+    rowSelection?.onChange?.(newSelectedKeys, selectedRows);
+    rowSelection?.onSelectAll?.(selected, selectedRows, dataSource);
+  }, [dataSource, rowSelection, getRowKey]);
+  const processedData = useMemo(() => {
+    let result = [...dataSource];
+    Object.entries(filters).forEach(([key, value]) => {
+      if (value !== "" && value !== null && value !== void 0) {
+        result = result.filter((item) => {
+          const itemValue = item[key];
+          if (typeof itemValue === "string") {
+            return itemValue.toLowerCase().includes(String(value).toLowerCase());
+          }
+          return itemValue === value;
+        });
+      }
+    });
+    if (sortConfig.key && sortConfig.direction) {
+      result.sort((a, b) => {
+        const aValue = a[sortConfig.key];
+        const bValue = b[sortConfig.key];
+        if (aValue === bValue) return 0;
+        const comparison = aValue < bValue ? -1 : 1;
+        return sortConfig.direction === "asc" ? comparison : -comparison;
+      });
+    }
+    return result;
+  }, [dataSource, filters, sortConfig]);
+  const paginatedData = useMemo(() => {
+    if (!pagination) return processedData;
+    const { current, pageSize } = pagination;
+    const startIndex = (current - 1) * pageSize;
+    return processedData.slice(startIndex, startIndex + pageSize);
+  }, [processedData, pagination]);
+  const currentPagination = useMemo(() => {
+    if (!pagination) return false;
+    return {
+      ...pagination,
+      total: processedData.length
+    };
+  }, [pagination, processedData.length]);
+  const isAllSelected = selectedRowKeys.length === dataSource.length && dataSource.length > 0;
+  const isIndeterminate = selectedRowKeys.length > 0 && selectedRowKeys.length < dataSource.length;
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+      title && /* @__PURE__ */ jsx("div", { className: "mb-4", children: title() }),
+      /* @__PURE__ */ jsx("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "p-4 space-y-3", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex space-x-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-8" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" })
+      ] }, i)) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    title && /* @__PURE__ */ jsx("div", { className: "mb-4", children: title() }),
+    /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: cn(tableVariants({ size, bordered })), children: [
+        showHeader && /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          rowSelection && /* @__PURE__ */ jsx("th", { className: cn(cellVariants({ size, type: "header" }), "w-12"), children: rowSelection.type !== "radio" && /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: isAllSelected,
+              onChange: (e) => handleSelectAll(e.target.checked),
+              className: cn(isIndeterminate && "indeterminate")
+            }
+          ) }),
+          columns.map((column) => /* @__PURE__ */ jsx(
+            "th",
+            {
+              className: cn(
+                cellVariants({
+                  size,
+                  align: column.align,
+                  type: "header"
+                }),
+                column.width && `w-[${column.width}]`
+              ),
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                  /* @__PURE__ */ jsx("span", { children: column.title }),
+                  column.sortable && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: () => handleSort(column.key),
+                      className: "flex flex-col items-center hover:text-primary-600",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          ChevronUp,
+                          {
+                            className: cn(
+                              "h-3 w-3",
+                              sortConfig.key === column.key && sortConfig.direction === "asc" ? "text-primary-600" : "text-gray-400"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          ChevronDown,
+                          {
+                            className: cn(
+                              "h-3 w-3 -mt-1",
+                              sortConfig.key === column.key && sortConfig.direction === "desc" ? "text-primary-600" : "text-gray-400"
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  ColumnFilter,
+                  {
+                    column,
+                    value: filters[column.key],
+                    onChange: (value) => handleFilter(column.key, value)
+                  }
+                )
+              ] })
+            },
+            column.key
+          ))
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: paginatedData.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          "td",
+          {
+            colSpan: columns.length + (rowSelection ? 1 : 0),
+            className: cn(cellVariants({ size, align: "center" }), "py-8"),
+            children: /* @__PURE__ */ jsxs("div", { className: "text-gray-500", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-4xl mb-2", children: "\u{1F4CB}" }),
+              /* @__PURE__ */ jsx("div", { children: "No data available" })
+            ] })
+          }
+        ) }) : paginatedData.map((record, index) => {
+          const key = getRowKey(record, index);
+          const isSelected = selectedRowKeys.includes(key);
+          return /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              className: cn(
+                "hover:bg-gray-50 transition-colors",
+                isSelected && "bg-primary-50"
+              ),
+              ...props.onRow?.(record, index) ?? {},
+              children: [
+                rowSelection && /* @__PURE__ */ jsx("td", { className: cn(cellVariants({ size })), children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: isSelected,
+                    onChange: (e) => handleRowSelect(record, e.target.checked),
+                    ...rowSelection.getCheckboxProps?.(record)
+                  }
+                ) }),
+                columns.map((column) => /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: cn(cellVariants({
+                      size,
+                      align: column.align
+                    })),
+                    children: column.render ? column.render(record[column.dataIndex], record, index) : String(record[column.dataIndex] || "")
+                  },
+                  column.key
+                ))
+              ]
+            },
+            key
+          );
+        }) })
+      ] }) }),
+      currentPagination && /* @__PURE__ */ jsx(
+        TablePagination,
+        {
+          pagination: currentPagination,
+          onChange: (page, pageSize) => {
+            const newPagination = { ...currentPagination, current: page, pageSize };
+            onChange?.(newPagination, filters, sortConfig);
+          }
+        }
+      )
+    ] }),
+    footer && /* @__PURE__ */ jsx("div", { className: "mt-4", children: footer() })
+  ] });
+};
+DataTable.displayName = "DataTable";
+var generateUsers = () => {
+  const roles = ["Admin", "Manager", "Developer", "Designer", "Analyst"];
+  const departments = ["Engineering", "Design", "Marketing", "Sales", "HR"];
+  const statuses = ["active", "inactive", "pending"];
+  return Array.from({ length: 50 }, (_, i) => ({
+    id: i + 1,
+    name: `User ${i + 1}`,
+    email: `user${i + 1}@company.com`,
+    role: roles[Math.floor(Math.random() * roles.length)],
+    status: statuses[Math.floor(Math.random() * statuses.length)],
+    avatar: `https://images.pexels.com/photos/${774909 + i}/pexels-photo-${774909 + i}.jpeg?auto=compress&cs=tinysrgb&w=64`,
+    joinDate: new Date(2020 + Math.floor(Math.random() * 4), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toISOString().split("T")[0],
+    lastLogin: new Date(Date.now() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1e3).toISOString().split("T")[0],
+    department: departments[Math.floor(Math.random() * departments.length)]
+  }));
+};
+var generateSales = () => {
+  const products = ["Pro Plan", "Basic Plan", "Enterprise", "Starter", "Premium"];
+  const regions = ["North America", "Europe", "Asia Pacific", "Latin America"];
+  const statuses = ["completed", "pending", "cancelled"];
+  return Array.from({ length: 75 }, (_, i) => ({
+    id: i + 1,
+    product: products[Math.floor(Math.random() * products.length)],
+    customer: `Customer ${i + 1}`,
+    amount: Math.floor(Math.random() * 1e4) + 100,
+    status: statuses[Math.floor(Math.random() * statuses.length)],
+    date: new Date(2024, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toISOString().split("T")[0],
+    region: regions[Math.floor(Math.random() * regions.length)],
+    salesperson: `Sales Rep ${Math.floor(Math.random() * 10) + 1}`
+  }));
+};
+var generateTasks = () => {
+  const priorities = ["low", "medium", "high", "urgent"];
+  const statuses = ["todo", "in-progress", "review", "completed"];
+  const projects = ["Website Redesign", "Mobile App", "API Integration", "Dashboard", "Marketing Campaign"];
+  const tagOptions = ["frontend", "backend", "design", "testing", "documentation", "bug", "feature"];
+  return Array.from({ length: 60 }, (_, i) => ({
+    id: i + 1,
+    title: `Task ${i + 1}: Implement feature`,
+    assignee: `Developer ${Math.floor(Math.random() * 8) + 1}`,
+    priority: priorities[Math.floor(Math.random() * priorities.length)],
+    status: statuses[Math.floor(Math.random() * statuses.length)],
+    dueDate: new Date(Date.now() + Math.floor(Math.random() * 60) * 24 * 60 * 60 * 1e3).toISOString().split("T")[0],
+    project: projects[Math.floor(Math.random() * projects.length)],
+    tags: Array.from(
+      { length: Math.floor(Math.random() * 3) + 1 },
+      () => tagOptions[Math.floor(Math.random() * tagOptions.length)]
+    ).filter((tag, index, arr) => arr.indexOf(tag) === index)
+  }));
+};
+var usersData = generateUsers();
+var salesData = generateSales();
+var tasksData = generateTasks();
+var DataTableShowcase = () => {
+  const [selectedTab, setSelectedTab] = useState("users");
+  const [selectedRows, setSelectedRows] = useState([]);
+  const userColumns = [
+    {
+      key: "user",
+      title: "User",
+      dataIndex: "name",
+      sortable: true,
+      filterable: true,
+      filterType: "text",
+      render: (_, record) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+        /* @__PURE__ */ jsxs(Avatar, { size: "sm", children: [
+          /* @__PURE__ */ jsx(AvatarImage, { src: record.avatar }),
+          /* @__PURE__ */ jsx(AvatarFallback, { children: record.name.split(" ").map((n) => n[0]).join("") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900", children: record.name }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: record.email })
+        ] })
+      ] })
+    },
+    {
+      key: "role",
+      title: "Role",
+      dataIndex: "role",
+      sortable: true,
+      filterable: true,
+      filterType: "select",
+      filterOptions: [
+        { label: "Admin", value: "Admin" },
+        { label: "Manager", value: "Manager" },
+        { label: "Developer", value: "Developer" },
+        { label: "Designer", value: "Designer" },
+        { label: "Analyst", value: "Analyst" }
+      ]
+    },
+    {
+      key: "department",
+      title: "Department",
+      dataIndex: "department",
+      sortable: true,
+      filterable: true,
+      filterType: "select",
+      filterOptions: [
+        { label: "Engineering", value: "Engineering" },
+        { label: "Design", value: "Design" },
+        { label: "Marketing", value: "Marketing" },
+        { label: "Sales", value: "Sales" },
+        { label: "HR", value: "HR" }
+      ]
+    },
+    {
+      key: "status",
+      title: "Status",
+      dataIndex: "status",
+      sortable: true,
+      filterable: true,
+      filterType: "select",
+      filterOptions: [
+        { label: "Active", value: "active" },
+        { label: "Inactive", value: "inactive" },
+        { label: "Pending", value: "pending" }
+      ],
+      render: (status) => /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: status === "active" ? "success" : status === "inactive" ? "secondary" : "warning",
+          children: status.charAt(0).toUpperCase() + status.slice(1)
+        }
+      )
+    },
+    {
+      key: "joinDate",
+      title: "Join Date",
+      dataIndex: "joinDate",
+      sortable: true,
+      filterable: true,
+      filterType: "date"
+    },
+    {
+      key: "actions",
+      title: "Actions",
+      dataIndex: "id",
+      align: "center",
+      render: (_, record) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center space-x-1", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => showToast.info(`View user ${record.name}`), children: /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => showToast.info(`Edit user ${record.name}`), children: /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => showToast.warning(`Delete user ${record.name}`), children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 text-danger-600" }) })
+      ] })
+    }
+  ];
+  const salesColumns = [
+    {
+      key: "product",
+      title: "Product",
+      dataIndex: "product",
+      sortable: true,
+      filterable: true,
+      filterType: "text",
+      render: (product) => /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900", children: product })
+    },
+    {
+      key: "customer",
+      title: "Customer",
+      dataIndex: "customer",
+      sortable: true,
+      filterable: true,
+      filterType: "text"
+    },
+    {
+      key: "amount",
+      title: "Amount",
+      dataIndex: "amount",
+      sortable: true,
+      filterable: true,
+      filterType: "number",
+      align: "right",
+      render: (amount) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end space-x-1", children: [
+        /* @__PURE__ */ jsx(DollarSign, { className: "h-4 w-4 text-gray-400" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: amount.toLocaleString() })
+      ] })
+    },
+    {
+      key: "status",
+      title: "Status",
+      dataIndex: "status",
+      sortable: true,
+      filterable: true,
+      filterType: "select",
+      filterOptions: [
+        { label: "Completed", value: "completed" },
+        { label: "Pending", value: "pending" },
+        { label: "Cancelled", value: "cancelled" }
+      ],
+      render: (status) => /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: status === "completed" ? "success" : status === "pending" ? "warning" : "danger",
+          children: status.charAt(0).toUpperCase() + status.slice(1)
+        }
+      )
+    },
+    {
+      key: "region",
+      title: "Region",
+      dataIndex: "region",
+      sortable: true,
+      filterable: true,
+      filterType: "select",
+      filterOptions: [
+        { label: "North America", value: "North America" },
+        { label: "Europe", value: "Europe" },
+        { label: "Asia Pacific", value: "Asia Pacific" },
+        { label: "Latin America", value: "Latin America" }
+      ]
+    },
+    {
+      key: "date",
+      title: "Date",
+      dataIndex: "date",
+      sortable: true,
+      filterable: true,
+      filterType: "date"
+    }
+  ];
+  const taskColumns = [
+    {
+      key: "title",
+      title: "Task",
+      dataIndex: "title",
+      sortable: true,
+      filterable: true,
+      filterType: "text",
+      render: (title, record) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900", children: title }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: record.project })
+      ] })
+    },
+    {
+      key: "assignee",
+      title: "Assignee",
+      dataIndex: "assignee",
+      sortable: true,
+      filterable: true,
+      filterType: "text"
+    },
+    {
+      key: "priority",
+      title: "Priority",
+      dataIndex: "priority",
+      sortable: true,
+      filterable: true,
+      filterType: "select",
+      filterOptions: [
+        { label: "Low", value: "low" },
+        { label: "Medium", value: "medium" },
+        { label: "High", value: "high" },
+        { label: "Urgent", value: "urgent" }
+      ],
+      render: (priority) => /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: priority === "urgent" ? "danger" : priority === "high" ? "warning" : priority === "medium" ? "secondary" : "outline",
+          children: priority.charAt(0).toUpperCase() + priority.slice(1)
+        }
+      )
+    },
+    {
+      key: "status",
+      title: "Status",
+      dataIndex: "status",
+      sortable: true,
+      filterable: true,
+      filterType: "select",
+      filterOptions: [
+        { label: "To Do", value: "todo" },
+        { label: "In Progress", value: "in-progress" },
+        { label: "Review", value: "review" },
+        { label: "Completed", value: "completed" }
+      ],
+      render: (status) => /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: status === "completed" ? "success" : status === "in-progress" ? "warning" : status === "review" ? "secondary" : "outline",
+          children: status.replace("-", " ").replace(/\b\w/g, (l) => l.toUpperCase())
+        }
+      )
+    },
+    {
+      key: "dueDate",
+      title: "Due Date",
+      dataIndex: "dueDate",
+      sortable: true,
+      filterable: true,
+      filterType: "date"
+    },
+    {
+      key: "tags",
+      title: "Tags",
+      dataIndex: "tags",
+      render: (tags) => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
+        tags.slice(0, 2).map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs", children: tag }, tag)),
+        tags.length > 2 && /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "text-xs", children: [
+          "+",
+          tags.length - 2
+        ] })
+      ] })
+    }
+  ];
+  const getCurrentData = () => {
+    switch (selectedTab) {
+      case "users":
+        return usersData;
+      case "sales":
+        return salesData;
+      case "tasks":
+        return tasksData;
+      default:
+        return [];
+    }
+  };
+  const getCurrentColumns = () => {
+    switch (selectedTab) {
+      case "users":
+        return userColumns;
+      case "sales":
+        return salesColumns;
+      case "tasks":
+        return taskColumns;
+      default:
+        return [];
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-gray-900", children: "DataTable Component" }),
+        /* @__PURE__ */ jsx("p", { className: "text-gray-600 mt-1", children: "A comprehensive table component with filtering, sorting, and pagination" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: () => showToast.info("Export functionality"), children: [
+          /* @__PURE__ */ jsx(Download, { className: "h-4 w-4 mr-2" }),
+          "Export"
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: () => showToast.success("Add new item"), children: [
+          /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
+          "Add New"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "border-b border-gray-200", children: /* @__PURE__ */ jsx("nav", { className: "-mb-px flex space-x-8", children: [
+      { key: "users", label: "Users", icon: Users },
+      { key: "sales", label: "Sales", icon: DollarSign },
+      { key: "tasks", label: "Tasks", icon: Calendar }
+    ].map(({ key, label, icon: Icon }) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setSelectedTab(key),
+        className: `
+                flex items-center space-x-2 py-2 px-1 border-b-2 font-medium text-sm
+                ${selectedTab === key ? "border-primary-500 text-primary-600" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"}
+              `,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { children: label })
+        ]
+      },
+      key
+    )) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-4", children: [
+      /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-600", children: "Total Records" }),
+          /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-gray-900", children: getCurrentData().length })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "p-2 bg-primary-100 rounded-lg", children: /* @__PURE__ */ jsx(Users, { className: "h-6 w-6 text-primary-600" }) })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-600", children: "Selected" }),
+          /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-gray-900", children: selectedRows.length })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "p-2 bg-success-100 rounded-lg", children: /* @__PURE__ */ jsx(Filter, { className: "h-6 w-6 text-success-600" }) })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-600", children: "Active Filters" }),
+          /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-gray-900", children: "0" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "p-2 bg-warning-100 rounded-lg", children: /* @__PURE__ */ jsx(Filter, { className: "h-6 w-6 text-warning-600" }) })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-600", children: "Performance" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1", children: [
+            /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4 text-success-600" }),
+            /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-gray-900", children: "Fast" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "p-2 bg-success-100 rounded-lg", children: /* @__PURE__ */ jsx(TrendingUp, { className: "h-6 w-6 text-success-600" }) })
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        columns: getCurrentColumns(),
+        dataSource: getCurrentData(),
+        rowKey: "id",
+        pagination: {
+          current: 1,
+          pageSize: 10,
+          total: getCurrentData().length,
+          showSizeChanger: true,
+          pageSizeOptions: [5, 10, 20, 50]
+        },
+        rowSelection: {
+          type: "checkbox",
+          selectedRowKeys: selectedRows,
+          onChange: (keys) => {
+            setSelectedRows(keys);
+            showToast.info(`Selected ${keys.length} items`);
+          }
+        },
+        size: "middle",
+        bordered: false,
+        title: () => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200", children: [
+          /* @__PURE__ */ jsxs("h3", { className: "text-lg font-semibold text-gray-900", children: [
+            selectedTab.charAt(0).toUpperCase() + selectedTab.slice(1),
+            " Data"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
+              getCurrentData().length,
+              " total"
+            ] }),
+            selectedRows.length > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "primary", children: [
+              selectedRows.length,
+              " selected"
+            ] })
+          ] })
+        ] }),
+        onChange: (pagination, filters, sorter) => {
+          console.log("Table changed:", { pagination, filters, sorter });
+        }
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Component Features" }) }),
+      /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-semibold text-gray-900 mb-2", children: "Core Features" }),
+          /* @__PURE__ */ jsxs("ul", { className: "space-y-1 text-sm text-gray-600", children: [
+            /* @__PURE__ */ jsx("li", { children: "\u2022 Sortable columns with visual indicators" }),
+            /* @__PURE__ */ jsx("li", { children: "\u2022 Advanced filtering (text, select, date)" }),
+            /* @__PURE__ */ jsx("li", { children: "\u2022 Pagination with configurable page sizes" }),
+            /* @__PURE__ */ jsx("li", { children: "\u2022 Row selection (single/multiple)" }),
+            /* @__PURE__ */ jsx("li", { children: "\u2022 Responsive design for all screen sizes" }),
+            /* @__PURE__ */ jsx("li", { children: "\u2022 Loading and empty states" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-semibold text-gray-900 mb-2", children: "Advanced Features" }),
+          /* @__PURE__ */ jsxs("ul", { className: "space-y-1 text-sm text-gray-600", children: [
+            /* @__PURE__ */ jsx("li", { children: "\u2022 Custom cell renderers" }),
+            /* @__PURE__ */ jsx("li", { children: "\u2022 TypeScript support with full typing" }),
+            /* @__PURE__ */ jsx("li", { children: "\u2022 Accessibility features (ARIA labels)" }),
+            /* @__PURE__ */ jsx("li", { children: "\u2022 Performance optimizations" }),
+            /* @__PURE__ */ jsx("li", { children: "\u2022 Customizable styling and themes" }),
+            /* @__PURE__ */ jsx("li", { children: "\u2022 Export and bulk actions support" })
+          ] })
+        ] })
+      ] }) })
+    ] })
+  ] });
+};
 function ShowcaseButtonDemo() {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
     /* @__PURE__ */ jsx(Button, { variant: "primary", children: "Primary" }),
@@ -1567,7 +2509,8 @@ var showcasePreviewMap = {
         ] })
       }
     ) });
-  }
+  },
+  datatable: DataTableShowcase
 };
 function ShowcaseAlertDemo() {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
@@ -1657,7 +2600,8 @@ var componentCategories = {
       { name: "Badge", id: "badge" },
       { name: "Avatar", id: "avatar" },
       { name: "StatsCard", id: "statscard" },
-      { name: "Tabs", id: "tabs" }
+      { name: "Tabs", id: "tabs" },
+      { name: "DataTable", id: "datatable" }
     ]
   },
   "Feedback": {
@@ -1676,7 +2620,8 @@ var componentCategories = {
       { name: "DashboardLayout", id: "dashboard-layout" },
       { name: "DashboardGrid", id: "dashboard-grid" },
       { name: "Sidebar", id: "sidebar" },
-      { name: "Navbar", id: "navbar" }
+      { name: "Navbar", id: "navbar" },
+      { name: "DataTable", id: "datatable" }
     ]
   }
 };
@@ -1942,6 +2887,35 @@ var componentDocs = {
     ],
     component: showcasePreviewMap["dashboard-layout"]
   },
+  datatable: {
+    name: "DataTable",
+    description: "A comprehensive table component with filtering, sorting, pagination, and row selection capabilities.",
+    example: `<DataTable
+  columns={columns}
+  dataSource={data}
+  rowKey="id"
+  pagination={{
+    current: 1,
+    pageSize: 10,
+    total: data.length,
+  }}
+  rowSelection={{
+    type: 'checkbox',
+    onChange: (keys, rows) => console.log('Selected:', keys, rows),
+  }}
+/>`,
+    props: [
+      { name: "columns", type: "Column[]", required: true, description: "Table column configuration" },
+      { name: "dataSource", type: "T[]", required: true, description: "Data to display in the table" },
+      { name: "rowKey", type: "string | function", default: "id", description: "Unique key for each row" },
+      { name: "pagination", type: "PaginationConfig | false", description: "Pagination configuration" },
+      { name: "rowSelection", type: "RowSelection", description: "Row selection configuration" },
+      { name: "loading", type: "boolean", default: "false", description: "Loading state" },
+      { name: "size", type: `"small" | "middle" | "large"`, default: "middle", description: "Table size" },
+      { name: "bordered", type: "boolean", default: "false", description: "Show borders" }
+    ],
+    component: /* @__PURE__ */ jsx(DataTableShowcase, {})
+  },
   "dashboard-grid": {
     name: "DashboardGrid",
     description: "Grid container for dashboard widgets.",
@@ -2398,4 +3372,4 @@ var defaultTheme = {
   }
 };
 
-export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ComponentShowcase, DashboardGrid, DashboardGridItem, DashboardHeader, DashboardLayout, Input, Modal, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, NavItem, Navbar, Sidebar, Skeleton, Spinner, StatsCard, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, checkboxVariants, cn, defaultTheme, gridItemVariants, gridVariants, inputVariants, modalVariants, navbarVariants, showToast, sidebarVariants, skeletonVariants, spinnerVariants, statsCardVariants, switchVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, useBreakpoint, useDarkMode, useDebounce, useLocalStorage, useToggle };
+export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ComponentShowcase, DashboardGrid, DashboardGridItem, DashboardHeader, DashboardLayout, DataTable, Input, Modal, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, NavItem, Navbar, Sidebar, Skeleton, Spinner, StatsCard, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, checkboxVariants, cn, defaultTheme, gridItemVariants, gridVariants, inputVariants, modalVariants, navbarVariants, showToast, sidebarVariants, skeletonVariants, spinnerVariants, statsCardVariants, switchVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, useBreakpoint, useDarkMode, useDebounce, useLocalStorage, useToggle };