@parto-system-design/ui 1.1.5 → 1.1.8

package/dist/chunk-GCZ6YATL.js

@@ -0,0 +1,940 @@
+import { buttonVariants } from './chunk-3QYYPPFJ.js';
+import { Checkbox } from './chunk-5JJSRGJD.js';
+import { Skeleton } from './chunk-SB5DSYR5.js';
+import { getUIStrings, isRTL } from './chunk-CV3N3HVK.js';
+import { cn, convertToLocalNumbers } from './chunk-4SVQNEVH.js';
+import * as React5 from 'react';
+import { Loader2, ChevronRightIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronDown, ChevronRight } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+function Table({
+  className,
+  size = "md",
+  striped = false,
+  bordered = false,
+  stickyHeader = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      "data-slot": "table",
+      "data-size": size,
+      "data-striped": striped || void 0,
+      "data-bordered": bordered || void 0,
+      "data-sticky-header": stickyHeader || void 0,
+      className: cn("w-full caption-bottom", className),
+      ...props
+    }
+  ) });
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn(
+        "[&_tr]:border-b bg-surface-75",
+        "[[data-sticky-header]_&]:sticky [[data-sticky-header]_&]:top-0 [[data-sticky-header]_&]:z-[9] [[data-sticky-header]_&]:bg-surface-75",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn(
+        "[&_tr:last-child]:border-0",
+        "[[data-striped]_&_tr:nth-child(even)]:bg-surface-75 [[data-striped]_&_tr:nth-child(even):hover]:bg-surface-200",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tfoot",
+    {
+      "data-slot": "table-footer",
+      className: cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn("hover:bg-surface-200 data-[state=selected]:bg-selection border-b transition-colors", className),
+      ...props
+    }
+  );
+}
+function TableHead({ className, sortDirection, ...props }) {
+  const ariaSort = sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : sortDirection === "none" ? "none" : void 0;
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      "data-slot": "table-head",
+      "aria-sort": ariaSort,
+      className: cn(
+        "text-foreground-lighter text-start align-middle font-semibold whitespace-nowrap [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
+        // Size variants (inherited from parent table)
+        "[[data-size=sm]_&]:h-8 [[data-size=sm]_&]:px-2 [[data-size=sm]_&]:text-xs",
+        "[[data-size=md]_&]:h-10 [[data-size=md]_&]:px-3 [[data-size=md]_&]:text-sm",
+        "[[data-size=lg]_&]:h-12 [[data-size=lg]_&]:px-4 [[data-size=lg]_&]:text-base",
+        // Bordered variant
+        "[[data-bordered]_&]:border [[data-bordered]_&]:border-border",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
+        // Size variants (inherited from parent table)
+        "[[data-size=sm]_&]:px-2 [[data-size=sm]_&]:py-1.5 [[data-size=sm]_&]:text-xs",
+        "[[data-size=md]_&]:px-3 [[data-size=md]_&]:py-2 [[data-size=md]_&]:text-sm",
+        "[[data-size=lg]_&]:px-4 [[data-size=lg]_&]:py-3 [[data-size=lg]_&]:text-base",
+        // Bordered variant
+        "[[data-bordered]_&]:border [[data-bordered]_&]:border-border",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCaption({ className, ...props }) {
+  return /* @__PURE__ */ jsx("caption", { "data-slot": "table-caption", className: cn("text-foreground-muted mt-4 text-sm", className), ...props });
+}
+function TableSortHeader({ className, children, sorted, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "data-slot": "table-sort-header",
+      className: cn(
+        "inline-flex items-center gap-1.5 cursor-pointer select-none hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm",
+        sorted && "text-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs("span", { className: "inline-flex flex-col -space-y-0.5", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "8",
+              height: "5",
+              viewBox: "0 0 8 5",
+              className: cn("transition-colors", sorted === "asc" ? "text-foreground" : "text-foreground-muted"),
+              children: /* @__PURE__ */ jsx("path", { d: "M4 0L8 5H0L4 0Z", fill: "currentColor" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "8",
+              height: "5",
+              viewBox: "0 0 8 5",
+              className: cn("transition-colors", sorted === "desc" ? "text-foreground" : "text-foreground-muted"),
+              children: /* @__PURE__ */ jsx("path", { d: "M4 5L0 0H8L4 5Z", fill: "currentColor" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+Table.displayName = "Table";
+TableHeader.displayName = "TableHeader";
+TableBody.displayName = "TableBody";
+TableFooter.displayName = "TableFooter";
+TableHead.displayName = "TableHead";
+TableRow.displayName = "TableRow";
+TableCell.displayName = "TableCell";
+TableCaption.displayName = "TableCaption";
+TableSortHeader.displayName = "TableSortHeader";
+var PaginationDirectionContext = React5.createContext("rtl");
+function usePaginationDirection() {
+  return React5.useContext(PaginationDirectionContext);
+}
+function Pagination({ className, dir, children, ...props }) {
+  const resolvedDir = dir ?? "rtl";
+  return /* @__PURE__ */ jsx(PaginationDirectionContext.Provider, { value: resolvedDir, children: /* @__PURE__ */ jsx(
+    "nav",
+    {
+      role: "navigation",
+      "aria-label": "pagination",
+      "data-slot": "pagination",
+      dir: resolvedDir,
+      className: cn("mx-auto flex w-full justify-center not-prose", className),
+      ...props,
+      children
+    }
+  ) });
+}
+function PaginationContent({ className, ...props }) {
+  const dir = usePaginationDirection();
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "pagination-content",
+      dir,
+      className: cn("flex flex-row items-center gap-1 list-none", className),
+      ...props
+    }
+  );
+}
+function PaginationItem({ ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-slot": "pagination-item", ...props });
+}
+function PaginationLink({ className, isActive, size = "icon", dir, ...props }) {
+  const contextDir = usePaginationDirection();
+  const linkDir = dir ?? (contextDir === "rtl" ? "rtl" : "ltr");
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      "aria-current": isActive ? "page" : void 0,
+      "data-slot": "pagination-link",
+      "data-active": isActive,
+      dir: linkDir,
+      className: cn(
+        buttonVariants({
+          variant: "outline",
+          size
+        }),
+        // Remove underline from links
+        "no-underline",
+        // Active state styling with green color
+        isActive && [
+          "border-brand-500 bg-brand/10 text-brand-600",
+          "dark:border-brand-600 dark:bg-brand/10 dark:text-brand-400",
+          "pointer-events-none"
+        ],
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PaginationPrevious({ className, ...props }) {
+  const dir = usePaginationDirection();
+  const isRTL2 = dir === "rtl";
+  const strings = getUIStrings(isRTL2 ? "fa" : "en");
+  const Icon = isRTL2 ? ChevronRightIcon : ChevronLeftIcon;
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      "aria-label": strings.goToPreviousPage,
+      size: "default",
+      className: cn("gap-1 ps-2.5 pe-2.5 no-underline flex items-center", className),
+      dir: "ltr",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline no-underline", children: strings.previous })
+      ]
+    }
+  );
+}
+function PaginationNext({ className, ...props }) {
+  const dir = usePaginationDirection();
+  const isRTL2 = dir === "rtl";
+  const strings = getUIStrings(isRTL2 ? "fa" : "en");
+  const Icon = isRTL2 ? ChevronLeftIcon : ChevronRightIcon;
+  return /* @__PURE__ */ jsx(
+    PaginationLink,
+    {
+      "aria-label": strings.goToNextPage,
+      size: "default",
+      className: cn("gap-1 ps-2.5 pe-2.5 no-underline flex items-center", className),
+      dir: "ltr",
+      ...props,
+      children: isRTL2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline no-underline", children: strings.next })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline no-underline", children: strings.next }),
+        /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+      ] })
+    }
+  );
+}
+function PaginationEllipsis({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-slot": "pagination-ellipsis",
+      className: cn("flex size-9 items-center justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+      ]
+    }
+  );
+}
+Pagination.displayName = "Pagination";
+PaginationContent.displayName = "PaginationContent";
+PaginationItem.displayName = "PaginationItem";
+PaginationLink.displayName = "PaginationLink";
+PaginationPrevious.displayName = "PaginationPrevious";
+PaginationNext.displayName = "PaginationNext";
+PaginationEllipsis.displayName = "PaginationEllipsis";
+var PaginationControlled = React5.forwardRef(
+  ({
+    currentPage,
+    totalPages,
+    onPageChange,
+    siblingCount = 1,
+    showFirstLast = false,
+    showPrevNext = true,
+    showEllipsis = true,
+    className,
+    locale = "fa"
+  }, ref) => {
+    const isRTL2 = locale === "fa" || locale === "ar";
+    const localizeNumber = (n) => convertToLocalNumbers(String(n), locale);
+    const handlePageChange = (page) => {
+      if (page >= 1 && page <= totalPages && page !== currentPage) {
+        onPageChange(page);
+      }
+    };
+    const generatePageNumbers = () => {
+      const pages = [];
+      const totalNumbers = siblingCount * 2 + 5;
+      const totalBlocks = totalNumbers + 2;
+      if (totalPages <= totalBlocks) {
+        for (let i = 1; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+        const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+        const shouldShowLeftEllipsis = leftSiblingIndex > 2;
+        const shouldShowRightEllipsis = rightSiblingIndex < totalPages - 1;
+        if (!shouldShowLeftEllipsis && shouldShowRightEllipsis) {
+          const leftItemCount = 3 + 2 * siblingCount;
+          const leftRange = [];
+          for (let i = 1; i <= leftItemCount; i++) {
+            leftRange.push(i);
+          }
+          pages.push(...leftRange);
+          if (showEllipsis) pages.push("ellipsis");
+          pages.push(totalPages);
+        } else if (shouldShowLeftEllipsis && !shouldShowRightEllipsis) {
+          pages.push(1);
+          if (showEllipsis) pages.push("ellipsis");
+          const rightItemCount = 3 + 2 * siblingCount;
+          const rightRange = [];
+          for (let i = totalPages - rightItemCount + 1; i <= totalPages; i++) {
+            rightRange.push(i);
+          }
+          pages.push(...rightRange);
+        } else if (shouldShowLeftEllipsis && shouldShowRightEllipsis) {
+          pages.push(1);
+          if (showEllipsis) pages.push("ellipsis");
+          for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+            pages.push(i);
+          }
+          if (showEllipsis) pages.push("ellipsis");
+          pages.push(totalPages);
+        }
+      }
+      return pages;
+    };
+    const pageNumbers = generatePageNumbers();
+    const showFirstButton = showFirstLast && !pageNumbers.includes(1) && currentPage > 1;
+    const showLastButton = showFirstLast && !pageNumbers.includes(totalPages) && currentPage < totalPages;
+    return /* @__PURE__ */ jsx(Pagination, { ref, "data-slot": "pagination-controlled", className: cn(className), dir: isRTL2 ? "rtl" : "ltr", children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+      showFirstButton && /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+        PaginationLink,
+        {
+          href: "#",
+          onClick: (e) => {
+            e.preventDefault();
+            handlePageChange(1);
+          },
+          children: localizeNumber(1)
+        }
+      ) }),
+      showPrevNext && /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+        PaginationPrevious,
+        {
+          href: "#",
+          onClick: (e) => {
+            e.preventDefault();
+            handlePageChange(currentPage - 1);
+          },
+          className: currentPage === 1 ? "pointer-events-none opacity-50" : ""
+        }
+      ) }),
+      pageNumbers.map((page, index) => {
+        if (page === "ellipsis") {
+          return /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, `ellipsis-${index}`);
+        }
+        return /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+          PaginationLink,
+          {
+            href: "#",
+            isActive: page === currentPage,
+            onClick: (e) => {
+              e.preventDefault();
+              handlePageChange(page);
+            },
+            children: localizeNumber(page)
+          }
+        ) }, page);
+      }),
+      showPrevNext && /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+        PaginationNext,
+        {
+          href: "#",
+          onClick: (e) => {
+            e.preventDefault();
+            handlePageChange(currentPage + 1);
+          },
+          className: currentPage === totalPages ? "pointer-events-none opacity-50" : ""
+        }
+      ) }),
+      showLastButton && /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+        PaginationLink,
+        {
+          href: "#",
+          onClick: (e) => {
+            e.preventDefault();
+            handlePageChange(totalPages);
+          },
+          children: localizeNumber(totalPages)
+        }
+      ) })
+    ] }) });
+  }
+);
+PaginationControlled.displayName = "PaginationControlled";
+function useInfiniteScroll({
+  onLoadMore,
+  hasMore,
+  isLoading = false,
+  rootMargin = "200px",
+  threshold = 0
+}) {
+  const observerRef = React5.useRef(null);
+  const callbackRef = React5.useRef(onLoadMore);
+  React5.useEffect(() => {
+    callbackRef.current = onLoadMore;
+  }, [onLoadMore]);
+  const hasMoreRef = React5.useRef(hasMore);
+  React5.useEffect(() => {
+    hasMoreRef.current = hasMore;
+  }, [hasMore]);
+  const isLoadingRef = React5.useRef(isLoading);
+  React5.useEffect(() => {
+    isLoadingRef.current = isLoading;
+  }, [isLoading]);
+  const sentinelRef = React5.useCallback(
+    (node) => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+      if (!node) return;
+      observerRef.current = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          if (entry?.isIntersecting && hasMoreRef.current && !isLoadingRef.current) {
+            callbackRef.current();
+          }
+        },
+        { rootMargin, threshold }
+      );
+      observerRef.current.observe(node);
+    },
+    [rootMargin, threshold]
+  );
+  React5.useEffect(() => {
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, []);
+  return { sentinelRef };
+}
+var spinnerVariants = cva("animate-spin text-muted-foreground", {
+  variants: {
+    size: {
+      xs: "size-3",
+      sm: "size-4",
+      md: "size-5",
+      lg: "size-6",
+      xl: "size-8"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+var Spinner = React5.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    ref,
+    "data-slot": "spinner",
+    role: "status",
+    "aria-label": "\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0630\u0627\u0631\u06CC...",
+    className: cn("inline-flex items-center justify-center", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(Loader2, { className: spinnerVariants({ size }), "aria-hidden": "true" })
+  }
+));
+Spinner.displayName = "Spinner";
+var noop = () => {
+};
+function DataTableInner({
+  columns,
+  data,
+  size = "md",
+  isLoading = false,
+  loadingRows = 5,
+  emptyState,
+  pagination,
+  sort,
+  multiSort,
+  footer = false,
+  stickyFooter = true,
+  onColumnResize,
+  selection,
+  columnVisibility,
+  expansion,
+  infiniteScroll,
+  virtualize,
+  striped = false,
+  bordered = false,
+  stickyHeader = false,
+  className,
+  caption,
+  resultCount,
+  locale = "fa"
+}, ref) {
+  const t = getUIStrings(locale);
+  const hasSelection = !!selection;
+  const hasExpansion = !!expansion;
+  const rtl = isRTL(locale);
+  const visibleColumns = React5.useMemo(() => {
+    return columns.filter((col) => {
+      const explicit = columnVisibility?.visible[col.id];
+      if (explicit !== void 0) return explicit;
+      return col.defaultVisible !== false;
+    });
+  }, [columns, columnVisibility]);
+  const allColumnCount = visibleColumns.length + (hasSelection ? 1 : 0) + (hasExpansion ? 1 : 0);
+  const getRowKey = React5.useMemo(
+    () => selection?.getRowKey ?? ((_, index) => index),
+    [selection?.getRowKey]
+  );
+  const allRowKeys = React5.useMemo(() => data.map((row, i) => getRowKey(row, i)), [data, getRowKey]);
+  const allSelected = hasSelection && data.length > 0 && allRowKeys.every((key) => selection.selectedRows.has(key));
+  const someSelected = hasSelection && !allSelected && allRowKeys.some((key) => selection.selectedRows.has(key));
+  const handleSelectAll = () => {
+    if (!selection) return;
+    if (allSelected) {
+      selection.onSelectionChange(/* @__PURE__ */ new Set());
+    } else {
+      selection.onSelectionChange(new Set(allRowKeys));
+    }
+  };
+  const handleSelectRow = (key) => {
+    if (!selection) return;
+    const next = new Set(selection.selectedRows);
+    if (next.has(key)) {
+      next.delete(key);
+    } else {
+      next.add(key);
+    }
+    selection.onSelectionChange(next);
+  };
+  const handleSort = (columnId, e) => {
+    if (multiSort) {
+      const isShift = !!e && "shiftKey" in e && e.shiftKey;
+      const existing = multiSort.rules.find((r) => r.column === columnId);
+      const maxRules = multiSort.maxRules ?? 3;
+      let next;
+      if (!isShift) {
+        if (existing) {
+          next = [{ column: columnId, direction: existing.direction === "asc" ? "desc" : "asc" }];
+        } else {
+          next = [{ column: columnId, direction: "asc" }];
+        }
+      } else {
+        if (existing) {
+          if (existing.direction === "asc") {
+            next = multiSort.rules.map((r) => r.column === columnId ? { ...r, direction: "desc" } : r);
+          } else {
+            next = multiSort.rules.filter((r) => r.column !== columnId);
+          }
+        } else {
+          next = [...multiSort.rules, { column: columnId, direction: "asc" }].slice(0, maxRules);
+        }
+      }
+      multiSort.onSortChange(next);
+      return;
+    }
+    if (!sort) return;
+    const nextDirection = sort.column === columnId && sort.direction === "asc" ? "desc" : "asc";
+    sort.onSort(columnId, nextDirection);
+  };
+  const getSortDir = (columnId) => {
+    if (multiSort) {
+      const rule = multiSort.rules.find((r) => r.column === columnId);
+      return rule ? rule.direction : "none";
+    }
+    if (!sort || sort.column !== columnId || !sort.direction) return "none";
+    return sort.direction;
+  };
+  const getSortPriority = (columnId) => {
+    if (!multiSort) return 0;
+    const idx = multiSort.rules.findIndex((r) => r.column === columnId);
+    return idx === -1 ? 0 : idx + 1;
+  };
+  const alignClass = (align) => {
+    if (align === "center") return "text-center";
+    if (align === "end") return "text-end";
+    return "text-start";
+  };
+  const pinClass = (pinned) => {
+    if (!pinned) return "";
+    const sideClass = pinned === "start" ? "sticky inset-inline-start-0 z-[1]" : "sticky inset-inline-end-0 z-[1]";
+    return `${sideClass} bg-background`;
+  };
+  const handleToggleExpand = (rowKey) => {
+    if (!expansion) return;
+    const next = new Set(expansion.expandedRows);
+    if (next.has(rowKey)) next.delete(rowKey);
+    else next.add(rowKey);
+    expansion.onExpandedRowsChange(next);
+  };
+  const [resizeWidths, setResizeWidths] = React5.useState({});
+  const dragRef = React5.useRef(null);
+  const startResize = React5.useCallback(
+    (columnId, e) => {
+      const col = columns.find((c) => c.id === columnId);
+      if (!col) return;
+      const headerCell = e.currentTarget.closest("th");
+      const measured = headerCell?.getBoundingClientRect().width || 0;
+      const startWidth = typeof col.width === "number" ? col.width : measured > 0 ? measured : 120;
+      dragRef.current = {
+        columnId,
+        startX: e.clientX,
+        startWidth,
+        currentWidth: startWidth,
+        minWidth: col.minWidth ?? 60,
+        maxWidth: col.maxWidth ?? 800
+      };
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    [columns]
+  );
+  const onResizePointerMove = React5.useCallback(
+    (e) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      const dx = (rtl ? -1 : 1) * (e.clientX - drag.startX);
+      const next = Math.max(drag.minWidth, Math.min(drag.maxWidth, drag.startWidth + dx));
+      drag.currentWidth = next;
+      setResizeWidths((prev) => prev[drag.columnId] === next ? prev : { ...prev, [drag.columnId]: next });
+    },
+    [rtl]
+  );
+  const endResize = React5.useCallback(
+    (e) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      onColumnResize?.(drag.columnId, drag.currentWidth);
+      dragRef.current = null;
+      e.currentTarget.releasePointerCapture?.(e.pointerId);
+    },
+    [onColumnResize]
+  );
+  const getColumnWidth = (col) => {
+    return resizeWidths[col.id] ?? col.width;
+  };
+  const handleResizeKeyDown = React5.useCallback(
+    (columnId, e) => {
+      const isArrowGrow = rtl ? e.key === "ArrowLeft" : e.key === "ArrowRight";
+      const isArrowShrink = rtl ? e.key === "ArrowRight" : e.key === "ArrowLeft";
+      if (!isArrowGrow && !isArrowShrink && e.key !== "Home" && e.key !== "End") return;
+      const col = columns.find((c) => c.id === columnId);
+      if (!col) return;
+      const headerCell = e.currentTarget.closest("th");
+      const measured = headerCell?.getBoundingClientRect().width || 0;
+      const minWidth = col.minWidth ?? 60;
+      const maxWidth = col.maxWidth ?? 800;
+      const current = resizeWidths[columnId] ?? (typeof col.width === "number" ? col.width : measured > 0 ? measured : 120);
+      const step = e.shiftKey ? 32 : 8;
+      let next;
+      if (e.key === "Home") next = minWidth;
+      else if (e.key === "End") next = maxWidth;
+      else if (isArrowGrow) next = Math.min(maxWidth, current + step);
+      else next = Math.max(minWidth, current - step);
+      e.preventDefault();
+      setResizeWidths((prev) => prev[columnId] === next ? prev : { ...prev, [columnId]: next });
+      onColumnResize?.(columnId, next);
+    },
+    [columns, resizeWidths, rtl, onColumnResize]
+  );
+  const { sentinelRef } = useInfiniteScroll({
+    onLoadMore: infiniteScroll?.onLoadMore ?? noop,
+    hasMore: !!infiniteScroll?.hasMore,
+    isLoading: !!infiniteScroll?.isLoadingMore,
+    rootMargin: infiniteScroll?.rootMargin ?? "200px"
+  });
+  const virtRowHeight = virtualize?.rowHeight ?? 0;
+  const virtViewportHeight = virtualize?.viewportHeight ?? 480;
+  const virtOverscan = virtualize?.overscan ?? 6;
+  const virtScrollRef = React5.useRef(null);
+  const [virtScrollTop, setVirtScrollTop] = React5.useState(0);
+  const handleVirtScroll = React5.useCallback((e) => {
+    setVirtScrollTop(e.currentTarget.scrollTop);
+  }, []);
+  const { virtStartIndex, virtEndIndex, virtTopSpacer, virtBottomSpacer } = React5.useMemo(() => {
+    if (!virtualize || data.length === 0) {
+      return { virtStartIndex: 0, virtEndIndex: data.length, virtTopSpacer: 0, virtBottomSpacer: 0 };
+    }
+    const start = Math.max(0, Math.floor(virtScrollTop / virtRowHeight) - virtOverscan);
+    const visibleCount = Math.ceil(virtViewportHeight / virtRowHeight) + virtOverscan * 2;
+    const end = Math.min(data.length, start + visibleCount);
+    return {
+      virtStartIndex: start,
+      virtEndIndex: end,
+      virtTopSpacer: start * virtRowHeight,
+      virtBottomSpacer: (data.length - end) * virtRowHeight
+    };
+  }, [virtualize, data.length, virtScrollTop, virtRowHeight, virtViewportHeight, virtOverscan]);
+  return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "data-table", className: cn("flex flex-col gap-4", className), children: [
+    resultCount && /* @__PURE__ */ jsx("div", { "data-slot": "data-table-result-count", className: "text-sm text-foreground-muted", children: resultCount }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: virtualize ? virtScrollRef : void 0,
+        onScroll: virtualize ? handleVirtScroll : void 0,
+        style: virtualize ? { maxHeight: virtViewportHeight, overflowY: "auto" } : void 0,
+        "data-slot": virtualize ? "data-table-virtual-scroll" : void 0,
+        children: /* @__PURE__ */ jsxs(Table, { size, striped, bordered, stickyHeader: stickyHeader || !!virtualize, children: [
+          caption && /* @__PURE__ */ jsx("caption", { className: "text-foreground-muted mt-4 text-sm", children: caption }),
+          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            hasSelection && /* @__PURE__ */ jsx(TableHead, { className: cn("w-[40px]", pinClass("start")), children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: allSelected ? true : someSelected ? "indeterminate" : false,
+                onCheckedChange: handleSelectAll,
+                "aria-label": t.selectAll
+              }
+            ) }),
+            hasExpansion && /* @__PURE__ */ jsx(TableHead, { className: cn("w-[36px]", pinClass("start")), "aria-hidden": "true" }),
+            visibleColumns.map((col) => {
+              const sortable = col.sortable && (sort || multiSort);
+              const dir = sortable ? getSortDir(col.id) : "none";
+              const priority = getSortPriority(col.id);
+              const liveWidth = getColumnWidth(col);
+              return /* @__PURE__ */ jsxs(
+                TableHead,
+                {
+                  sortDirection: sortable ? dir : void 0,
+                  className: cn("relative", alignClass(col.align), pinClass(col.pinned), col.className),
+                  style: liveWidth ? { width: liveWidth } : void 0,
+                  children: [
+                    sortable ? /* @__PURE__ */ jsx(
+                      TableSortHeader,
+                      {
+                        sorted: dir === "none" ? false : dir,
+                        onClick: (e) => handleSort(col.id, e),
+                        children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+                          col.header,
+                          priority > 0 && multiSort && multiSort.rules.length > 1 && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              "data-slot": "data-table-sort-priority",
+                              className: "inline-flex h-4 min-w-4 items-center justify-center rounded bg-overlay-active px-1 text-[10px] font-medium tabular-nums text-foreground-light",
+                              "aria-label": `\u0627\u0648\u0644\u0648\u06CC\u062A \u0645\u0631\u062A\u0628\u200C\u0633\u0627\u0632\u06CC ${priority}`,
+                              children: priority
+                            }
+                          )
+                        ] })
+                      }
+                    ) : col.header,
+                    col.resizable && // role="separator" + tabIndex + ArrowKey handler is the
+                    // WAI-ARIA windowsplitter pattern (resizable separator).
+                    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "data-slot": "data-table-resize-handle",
+                        role: "separator",
+                        "aria-orientation": "vertical",
+                        "aria-label": "\u062A\u063A\u06CC\u06CC\u0631 \u0627\u0646\u062F\u0627\u0632\u0647 \u0633\u062A\u0648\u0646",
+                        tabIndex: 0,
+                        "aria-valuenow": getColumnWidth(col),
+                        "aria-valuemin": col.minWidth ?? 60,
+                        "aria-valuemax": col.maxWidth ?? 800,
+                        onKeyDown: (e) => handleResizeKeyDown(col.id, e),
+                        onPointerDown: (e) => startResize(col.id, e),
+                        onPointerMove: onResizePointerMove,
+                        onPointerUp: endResize,
+                        onPointerCancel: endResize,
+                        className: cn(
+                          "absolute inset-block-0 inset-inline-end-0 w-1.5 cursor-col-resize select-none touch-none",
+                          "before:absolute before:inset-block-2 before:inset-inline-1/2 before:w-px before:-translate-x-1/2 before:bg-border-default before:opacity-0 before:transition-opacity",
+                          "hover:before:opacity-100 focus:before:opacity-100 focus-visible:outline-none focus-visible:before:!bg-brand focus-visible:before:opacity-100",
+                          dragRef.current?.columnId === col.id && "before:!bg-brand before:opacity-100"
+                        )
+                      }
+                    )
+                  ]
+                },
+                col.id
+              );
+            })
+          ] }) }),
+          /* @__PURE__ */ jsxs(TableBody, { children: [
+            virtualize && !isLoading && data.length > 0 && virtTopSpacer > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", "data-slot": "data-table-virtual-spacer-top", children: /* @__PURE__ */ jsx("td", { colSpan: allColumnCount, style: { height: virtTopSpacer, padding: 0 } }) }),
+            isLoading ? Array.from({ length: loadingRows }).map((_, rowIdx) => /* @__PURE__ */ jsxs(TableRow, { children: [
+              hasSelection && /* @__PURE__ */ jsx(TableCell, { className: pinClass("start"), children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4" }) }),
+              hasExpansion && /* @__PURE__ */ jsx(TableCell, { className: pinClass("start"), children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4" }) }),
+              visibleColumns.map((col) => {
+                const liveWidth = getColumnWidth(col);
+                return /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    className: cn(alignClass(col.align), pinClass(col.pinned), col.className),
+                    style: liveWidth ? { width: liveWidth } : void 0,
+                    children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full max-w-[120px]" })
+                  },
+                  col.id
+                );
+              })
+            ] }, `skeleton-${rowIdx}`)) : data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: allColumnCount, children: emptyState || /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-10 text-foreground-muted text-sm", children: t.noDataToDisplay }) }) }) : (virtualize ? data.slice(virtStartIndex, virtEndIndex) : data).map((row, sliceIdx) => {
+              const rowIdx = virtualize ? virtStartIndex + sliceIdx : sliceIdx;
+              const rowKey = getRowKey(row, rowIdx);
+              const isSelected = hasSelection && selection.selectedRows.has(rowKey);
+              const isExpanded = hasExpansion && expansion.expandedRows.has(rowKey);
+              const ChevronIcon = ChevronRight;
+              return /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+                /* @__PURE__ */ jsxs(TableRow, { "data-state": isSelected ? "selected" : void 0, children: [
+                  hasSelection && /* @__PURE__ */ jsx(TableCell, { className: pinClass("start"), children: /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: isSelected,
+                      onCheckedChange: () => handleSelectRow(rowKey),
+                      "aria-label": `${t.selectRow} ${(rowIdx + 1).toLocaleString(locale === "fa" ? "fa-IR" : locale === "ar" ? "ar-SA" : "en-US")}`
+                    }
+                  ) }),
+                  hasExpansion && /* @__PURE__ */ jsx(TableCell, { className: pinClass("start"), children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": isExpanded ? "collapse" : "expand",
+                      "aria-expanded": isExpanded,
+                      onClick: () => handleToggleExpand(rowKey),
+                      className: "inline-flex size-6 items-center justify-center rounded text-foreground-lighter hover:bg-surface-100 hover:text-foreground transition-colors",
+                      children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronIcon, { className: cn("size-4", rtl && "rotate-180"), "aria-hidden": "true" })
+                    }
+                  ) }),
+                  visibleColumns.map((col) => {
+                    const liveWidth = getColumnWidth(col);
+                    return /* @__PURE__ */ jsx(
+                      TableCell,
+                      {
+                        className: cn(alignClass(col.align), pinClass(col.pinned), col.className),
+                        style: liveWidth ? { width: liveWidth } : void 0,
+                        children: col.cell(row, rowIdx)
+                      },
+                      col.id
+                    );
+                  })
+                ] }),
+                hasExpansion && isExpanded && /* @__PURE__ */ jsx(TableRow, { "data-slot": "data-table-expanded-row", children: /* @__PURE__ */ jsx(TableCell, { colSpan: allColumnCount, className: "bg-surface-100/50 border-t-0", children: expansion.renderExpandedRow(row, rowIdx) }) })
+              ] }, rowKey);
+            }),
+            virtualize && !isLoading && data.length > 0 && virtBottomSpacer > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", "data-slot": "data-table-virtual-spacer-bottom", children: /* @__PURE__ */ jsx("td", { colSpan: allColumnCount, style: { height: virtBottomSpacer, padding: 0 } }) }),
+            infiniteScroll && !isLoading && data.length > 0 && infiniteScroll.hasMore && /* @__PURE__ */ jsx("tr", { "data-slot": "data-table-infinite-sentinel", "aria-hidden": !infiniteScroll.isLoadingMore, children: /* @__PURE__ */ jsx(
+              "td",
+              {
+                ref: sentinelRef,
+                colSpan: allColumnCount,
+                className: "border-0",
+                children: infiniteScroll.isLoadingMore ? infiniteScroll.loadingMoreContent ?? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-3 text-sm text-foreground-lighter", children: [
+                  /* @__PURE__ */ jsx(Spinner, { size: "sm" }),
+                  /* @__PURE__ */ jsx("span", { children: t.loading ?? "\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0630\u0627\u0631\u06CC" })
+                ] }) : /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "h-px" })
+              }
+            ) }),
+            infiniteScroll && !isLoading && data.length > 0 && !infiniteScroll.hasMore && infiniteScroll.endContent && /* @__PURE__ */ jsx("tr", { "data-slot": "data-table-infinite-end", children: /* @__PURE__ */ jsx("td", { colSpan: allColumnCount, className: "border-0 py-3 text-center text-xs text-foreground-lighter", children: infiniteScroll.endContent }) })
+          ] }),
+          footer && visibleColumns.some((c) => !!c.footer) && !isLoading && data.length > 0 && /* @__PURE__ */ jsx(
+            "tfoot",
+            {
+              "data-slot": "data-table-footer",
+              "data-sticky": stickyFooter || void 0,
+              className: cn(
+                "bg-surface-75 border-t border-border-default font-medium",
+                stickyFooter && "[&>tr>td]:sticky [&>tr>td]:inset-block-end-0 [&>tr>td]:bg-surface-75 [&>tr>td]:z-[8]"
+              ),
+              children: /* @__PURE__ */ jsxs("tr", { children: [
+                hasSelection && /* @__PURE__ */ jsx("td", { className: pinClass("start"), "aria-hidden": "true" }),
+                hasExpansion && /* @__PURE__ */ jsx("td", { className: pinClass("start"), "aria-hidden": "true" }),
+                visibleColumns.map((col) => {
+                  const liveWidth = getColumnWidth(col);
+                  return /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      className: cn(
+                        alignClass(col.align),
+                        pinClass(col.pinned),
+                        col.className,
+                        "[[data-size=sm]_&]:px-2 [[data-size=sm]_&]:py-1.5 [[data-size=sm]_&]:text-xs",
+                        "[[data-size=md]_&]:px-3 [[data-size=md]_&]:py-2 [[data-size=md]_&]:text-sm",
+                        "[[data-size=lg]_&]:px-4 [[data-size=lg]_&]:py-3 [[data-size=lg]_&]:text-base"
+                      ),
+                      style: liveWidth ? { width: liveWidth } : void 0,
+                      children: col.footer ? col.footer() : null
+                    },
+                    col.id
+                  );
+                })
+              ] })
+            }
+          )
+        ] })
+      }
+    ),
+    pagination && pagination.totalPages > 1 && /* @__PURE__ */ jsx("div", { "data-slot": "data-table-pagination", className: "flex justify-center", children: /* @__PURE__ */ jsx(
+      PaginationControlled,
+      {
+        currentPage: pagination.currentPage,
+        totalPages: pagination.totalPages,
+        onPageChange: pagination.onPageChange
+      }
+    ) })
+  ] });
+}
+var DataTable = React5.forwardRef(DataTableInner);
+DataTable.displayName = "DataTable";
+
+export { DataTable, Pagination, PaginationContent, PaginationControlled, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Spinner, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSortHeader, spinnerVariants, useInfiniteScroll };
+//# sourceMappingURL=chunk-GCZ6YATL.js.map
+//# sourceMappingURL=chunk-GCZ6YATL.js.map