@northslopetech/altitude-ui 3.0.0-alpha.13 → 3.0.0-alpha.14

package/dist/index.js

@@ -52,6 +52,7 @@ __export(index_exports, {
   ArrowLeftIcon: () => ArrowLeftIcon,
   ArrowRightIcon: () => ArrowRightIcon,
   ArrowUpIcon: () => ArrowUpIcon,
+  ArrowsDownUpIcon: () => ArrowsDownUpIcon,
   Avatar: () => Avatar,
   AvatarFallback: () => AvatarFallback,
   AvatarGroup: () => AvatarGroup,
@@ -98,6 +99,10 @@ __export(index_exports, {
   CloseIcon: () => CloseIcon,
   CogIcon: () => CogIcon,
   CredentialsIcon: () => CredentialsIcon,
+  DataTableColumnHeader: () => DataTableColumnHeader,
+  DataTablePagination: () => DataTablePagination,
+  DataTableView: () => DataTableView,
+  DataTableViewOptions: () => DataTableViewOptions,
   DatePicker: () => DatePicker,
   DatePickerTrigger: () => DatePickerTrigger,
   Dialog: () => Dialog,
@@ -227,7 +232,14 @@ __export(index_exports, {
   StatementIcon: () => StatementIcon,
   Switch: () => Switch,
   Table: () => Table,
+  TableBody: () => TableBody,
+  TableCaption: () => TableCaption,
+  TableCell: () => TableCell,
+  TableFooter: () => TableFooter,
+  TableHead: () => TableHead,
+  TableHeader: () => TableHeader,
   TableIcon: () => TableIcon,
+  TableRow: () => TableRow,
   Tabs: () => Tabs,
   TabsContent: () => TabsContent,
   TabsList: () => TabsList,
@@ -489,6 +501,7 @@ var import_CaretDown = require("@phosphor-icons/react/CaretDown");
 var import_CaretLeft = require("@phosphor-icons/react/CaretLeft");
 var import_CaretRight = require("@phosphor-icons/react/CaretRight");
 var import_CaretUp = require("@phosphor-icons/react/CaretUp");
+var import_ArrowsDownUp = require("@phosphor-icons/react/ArrowsDownUp");
 var import_ChatCircle = require("@phosphor-icons/react/ChatCircle");
 var import_CheckSquare = require("@phosphor-icons/react/CheckSquare");
 var import_X = require("@phosphor-icons/react/X");
@@ -570,6 +583,7 @@ var CaretDownIcon = createIcon(import_CaretDown.CaretDownIcon);
 var CaretLeftIcon = createIcon(import_CaretLeft.CaretLeftIcon);
 var CaretRightIcon = createIcon(import_CaretRight.CaretRightIcon);
 var CaretUpIcon = createIcon(import_CaretUp.CaretUpIcon);
+var ArrowsDownUpIcon = createIcon(import_ArrowsDownUp.ArrowsDownUpIcon);
 var ChatIcon = createIcon(import_ChatCircle.ChatCircleIcon);
 var CheckmarkSquareIcon = createIcon(import_CheckSquare.CheckSquareIcon);
 var CloseIcon = createIcon(import_X.XIcon);
@@ -690,15 +704,75 @@ var import_button = require("@base-ui/react/button");
 var import_class_variance_authority3 = require("class-variance-authority");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority3.cva)(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  [
+    // Base layout
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap",
+    // Transitions
+    "transition-colors",
+    // Focus
+    "focus-visible:outline-none",
+    // Disabled
+    "disabled:pointer-events-none disabled:opacity-50",
+    // SVG children
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
   {
     variants: {
       variant: {
-        default: "interactive-default interactive-default-fg border border-default shadow-sm hover:brightness-[90%] dark:hover:brightness-[130%] active:brightness-[80%] dark:active:brightness-[120%] focus-visible:ring-2 focus-visible:ring-focus-default focus-visible:border-strong",
-        primary: "interactive-accent interactive-accent-fg hover:brightness-[90%] dark:hover:brightness-[130%] active:brightness-[80%] dark:active:brightness-[120%] focus-visible:ring-2 focus-visible:ring-focus-default",
-        destructive: "interactive-destructive interactive-destructive-fg hover:brightness-[90%] dark:hover:brightness-[130%] active:brightness-[80%] dark:active:brightness-[120%] focus-visible:ring-3 focus-visible:ring-focus-error",
-        ghost: "interactive-default interactive-default-fg hover:brightness-[90%] dark:hover:brightness-[130%] active:brightness-[80%] dark:active:brightness-[120%] focus-visible:ring-2 focus-visible:ring-focus-default",
-        link: "h-6 px-0 py-0 rounded-sm text-default underline underline-offset-2 focus-visible:ring-2 focus-visible:ring-focus-default"
+        default: [
+          // Base
+          "interactive-default interactive-default-fg",
+          "border border-default shadow-xs",
+          // Hover & active
+          "hover:brightness-[90%] dark:hover:brightness-[130%]",
+          "active:brightness-[80%] dark:active:brightness-[120%]",
+          // Focus
+          "focus-visible:ring-2 focus-visible:ring-focus-default focus-visible:border-strong"
+        ],
+        primary: [
+          // Base
+          "interactive-accent interactive-accent-fg",
+          // Hover & active
+          "hover:brightness-[90%] dark:hover:brightness-[130%]",
+          "active:brightness-[80%] dark:active:brightness-[120%]",
+          // Focus
+          "focus-visible:ring-2 focus-visible:ring-focus-default"
+        ],
+        destructive: [
+          // Base
+          "interactive-destructive interactive-destructive-fg",
+          // Hover & active
+          "hover:brightness-[90%] dark:hover:brightness-[130%]",
+          "active:brightness-[80%] dark:active:brightness-[120%]",
+          // Focus
+          "focus-visible:ring-3 focus-visible:ring-focus-error"
+        ],
+        "destructive-subtle": [
+          // Base
+          "interactive-default text-error shadow-xs",
+          "border border-default",
+          // Hover & active
+          "hover:interactive-hover",
+          "active:brightness-[80%] dark:active:brightness-[120%]",
+          // Focus
+          "focus-visible:ring-3 focus-visible:ring-focus-error"
+        ],
+        ghost: [
+          // Base
+          "bg-transparent interactive-default-fg",
+          // Hover & active
+          "hover:interactive-hover",
+          "active:interactive-active",
+          // Focus
+          "focus-visible:ring-2 focus-visible:ring-focus-default"
+        ],
+        link: [
+          // Base
+          "h-6 px-0 py-0 rounded-sm",
+          "text-default underline underline-offset-2",
+          // Focus
+          "focus-visible:ring-2 focus-visible:ring-focus-default"
+        ]
       },
       size: {
         default: "h-9 rounded-md px-4 py-2 type-label-sm-medium",
@@ -711,17 +785,26 @@ var buttonVariants = (0, import_class_variance_authority3.cva)(
       {
         variant: "link",
         size: ["default", "sm"],
-        className: "type-body-sm-regular hover:type-body-sm-semibold active:type-body-sm-semibold"
+        className: [
+          "type-body-sm-regular",
+          "hover:type-body-sm-semibold active:type-body-sm-semibold"
+        ]
       },
       {
         variant: "link",
         size: "lg",
-        className: "type-body-md-regular hover:type-body-md-semibold active:type-body-md-semibold"
+        className: [
+          "type-body-md-regular",
+          "hover:type-body-md-semibold active:type-body-md-semibold"
+        ]
       },
       {
         variant: "link",
         size: "mini",
-        className: "type-body-xs-regular hover:type-body-xs-semibold active:type-body-xs-semibold"
+        className: [
+          "type-body-xs-regular",
+          "hover:type-body-xs-semibold active:type-body-xs-semibold"
+        ]
       }
     ],
     defaultVariants: {
@@ -6394,160 +6477,418 @@ function PieChart({
 }
 
 // src/components/ui/table.tsx
-var import_react2 = require("react");
-var import_react_table = require("@tanstack/react-table");
 var import_jsx_runtime44 = require("react/jsx-runtime");
-function Table({
+function Table({ className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: "relative w-full overflow-x-auto",
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        "table",
+        {
+          ref,
+          "data-slot": "table",
+          className: cn(
+            // Layout
+            "w-full caption-bottom",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "thead",
+    {
+      ref,
+      "data-slot": "table-header",
+      className: cn(
+        // Surface
+        "surface-secondary",
+        // Border
+        "[&_tr]:border-b [&_tr]:border-default",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableBody({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("tbody", { ref, "data-slot": "table-body", className, ...props });
+}
+function TableFooter({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "tfoot",
+    {
+      ref,
+      "data-slot": "table-footer",
+      className: cn(
+        // Surface
+        "surface-secondary",
+        // Border
+        "border-t border-t-[var(--color-border-default)] [&>tr]:last:border-b-0",
+        // Typography — descendant selector overrides TableCell's type-label-md-regular
+        "[&_td]:font-medium",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "tr",
+    {
+      ref,
+      "data-slot": "table-row",
+      className: cn(
+        // Border
+        "border-b border-default",
+        // Surface & states
+        "hover:interactive-hover data-[state=selected]:bg-[var(--color-surface-secondary)]",
+        // Transition
+        "transition-colors",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({
+  className,
+  ref,
+  align = "left",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "th",
+    {
+      ref,
+      scope: "col",
+      "data-slot": "table-head",
+      className: cn(
+        // Layout
+        "h-8 px-2 align-middle gap-2",
+        // Alignment
+        align === "right" && "text-right",
+        align === "left" && "text-left",
+        // Typography
+        "text-default type-body-sm-medium whitespace-nowrap",
+        // Checkbox alignment
+        "[&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({
+  className,
+  ref,
+  align = "left",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "td",
+    {
+      ref,
+      "data-slot": "table-cell",
+      className: cn(
+        // Layout
+        "h-8 p-2 align-middle gap-2",
+        // Alignment
+        align === "right" && "text-right",
+        align === "left" && "text-left",
+        // Typography
+        "text-default type-body-sm-regular whitespace-nowrap",
+        // Checkbox alignment
+        "[&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCaption({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "caption",
+    {
+      ref,
+      "data-slot": "table-caption",
+      className: cn(
+        // Layout
+        "mt-4",
+        // Typography
+        "text-secondary type-body-sm-regular",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/data-table/data-table-view.tsx
+var import_react_table = require("@tanstack/react-table");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function DataTableView({
   table,
+  emptyState = "No results.",
+  loading = false,
+  getRowProps,
   className,
-  showPagination = false,
-  paginationClassName
+  ...props
 }) {
-  const currentPage = table.getState().pagination.pageIndex;
-  const pageSize = table.getState().pagination.pageSize;
-  const totalPages = table.getPageCount();
-  const totalRows = table.getFilteredRowModel().rows.length;
-  const showingText = totalRows > 0 ? "Showing " + (currentPage * pageSize + 1) + "-" + Math.min((currentPage + 1) * pageSize, totalRows) + " of " + totalRows + " results" : "No results found";
-  const handlePreviousPage = (0, import_react2.useCallback)(() => {
-    table.previousPage();
-  }, [table]);
-  const handleNextPage = (0, import_react2.useCallback)(() => {
-    table.nextPage();
-  }, [table]);
-  const handlePageChange = (0, import_react2.useCallback)(
-    (pageIndex) => {
-      table.setPageIndex(pageIndex);
-    },
-    [table]
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    "div",
+    {
+      className: cn("relative", loading && "opacity-50 pointer-events-none"),
+      "aria-busy": loading || void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Table, { className, ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableRow, { children: headerGroup.headers.map((header) => {
+          const sorted = header.column.getIsSorted();
+          return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            TableHead,
+            {
+              colSpan: header.colSpan,
+              "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0,
+              children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+                header.column.columnDef.header,
+                header.getContext()
+              )
+            },
+            header.id
+          );
+        }) }, headerGroup.id)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableBody, { children: table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row) => {
+          const rowProps = getRowProps?.(row);
+          return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            TableRow,
+            {
+              "data-state": row.getIsSelected() ? "selected" : void 0,
+              ...rowProps,
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableCell, { children: (0, import_react_table.flexRender)(
+                cell.column.columnDef.cell,
+                cell.getContext()
+              ) }, cell.id))
+            },
+            row.id
+          );
+        }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          TableCell,
+          {
+            colSpan: table.getVisibleLeafColumns().length,
+            className: "h-24 text-center text-secondary",
+            children: emptyState
+          }
+        ) }) })
+      ] })
+    }
   );
-  const handlePageSizeChange = (0, import_react2.useCallback)(
-    (value) => {
-      table.setPageSize(Number(value));
-    },
-    [table]
+}
+
+// src/components/ui/data-table/data-table-pagination.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function DataTablePagination({
+  table,
+  pageSizeOptions = [10, 20, 50, 100],
+  className,
+  ...props
+}) {
+  const { pageIndex, pageSize } = table.getState().pagination;
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const from = totalRows > 0 ? pageIndex * pageSize + 1 : 0;
+  const to = Math.min((pageIndex + 1) * pageSize, totalRows);
+  const resolvedPageSizeOptions = pageSizeOptions.includes(pageSize) ? pageSizeOptions : [...pageSizeOptions, pageSize].sort((a, b) => a - b);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center justify-between gap-4 px-2 py-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          Text,
+          {
+            variant: "body-sm",
+            className: "text-secondary whitespace-nowrap",
+            "aria-live": "polite",
+            children: totalRows > 0 ? `Showing ${from}\u2013${to} of ${totalRows}` : "No results"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => table.firstPage(),
+              disabled: !table.getCanPreviousPage(),
+              "aria-label": "Go to first page",
+              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ArrowLeftIcon, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => table.previousPage(),
+              disabled: !table.getCanPreviousPage(),
+              "aria-label": "Go to previous page",
+              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CaretLeftIcon, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { as: "span", variant: "body-sm", className: "px-2 whitespace-nowrap", children: table.getPageCount() > 0 ? `Page ${pageIndex + 1} of ${table.getPageCount()}` : "No pages" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => table.nextPage(),
+              disabled: !table.getCanNextPage(),
+              "aria-label": "Go to next page",
+              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CaretRightIcon, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => table.lastPage(),
+              disabled: !table.getCanNextPage(),
+              "aria-label": "Go to last page",
+              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ArrowRightIcon, { "aria-hidden": "true" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            Text,
+            {
+              as: "span",
+              variant: "body-sm",
+              className: "text-secondary whitespace-nowrap",
+              children: "Rows per page"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+            Select,
+            {
+              value: pageSize.toString(),
+              onValueChange: (value) => table.setPageSize(Number(value)),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SelectValue, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SelectContent, { children: resolvedPageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SelectItem, { value: size.toString(), children: size }, size)) })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: cn("overflow-x-auto", className), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("table", { className: "min-w-full divide-y divide-border", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("thead", { className: "bg-inverse text-inverse", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("th", { className: "px-6 py-3 text-left", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-        "div",
-        {
-          className: `flex items-center space-x-1 ${header.column.getCanSort() ? "cursor-pointer select-none" : ""}`,
-          onClick: header.column.getToggleSortingHandler(),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-              Text,
-              {
-                as: "span",
-                variant: "label-xs",
-                className: "text-inverse uppercase tracking-wider",
-                children: (0, import_react_table.flexRender)(
-                  header.column.columnDef.header,
-                  header.getContext()
-                )
-              }
-            ),
-            header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "ml-1", children: [
-              header.column.getIsSorted() === "asc" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CaretUpIcon, { className: "text-inverse" }),
-              header.column.getIsSorted() === "desc" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CaretDownIcon, { className: "text-inverse" })
-            ] })
-          ]
-        }
-      ) }, header.id)) }, headerGroup.id)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("tbody", { className: "surface-default divide-y divide-border", children: table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { variant: "body-sm", children: (0, import_react_table.flexRender)(
-        cell.column.columnDef.cell,
-        cell.getContext()
-      ) }) }, cell.id)) }, row.id)) })
-    ] }) }),
-    showPagination && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-      "div",
+}
+
+// src/components/ui/data-table/data-table-column-header.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+function DataTableColumnHeader({
+  column,
+  title,
+  className,
+  ...props
+}) {
+  if (!column.getCanSort()) {
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      Text,
       {
-        className: cn(
-          "flex items-center justify-between px-6 py-3 surface-default border-t border-subtle",
-          paginationClassName
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { variant: "body-sm", className: "text-secondary", children: showingText }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center space-x-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-              Button,
-              {
-                variant: "ghost",
-                size: "sm",
-                onClick: handlePreviousPage,
-                disabled: !table.getCanPreviousPage(),
-                className: "p-2",
-                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ArrowLeftIcon, {})
-              }
-            ),
-            Array.from(
-              { length: Math.min(5, table.getPageCount()) },
-              (_, i) => {
-                let pageNumber;
-                if (totalPages <= 5) {
-                  pageNumber = i;
-                } else if (currentPage <= 2) {
-                  pageNumber = i;
-                } else if (currentPage >= totalPages - 3) {
-                  pageNumber = totalPages - 5 + i;
-                } else {
-                  pageNumber = currentPage - 2 + i;
-                }
-                const isActive = pageNumber === currentPage;
-                return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                  Button,
-                  {
-                    variant: isActive ? "default" : "ghost",
-                    size: "sm",
-                    onClick: () => handlePageChange(pageNumber),
-                    className: "min-w-8 h-8 p-0",
-                    children: pageNumber + 1
-                  },
-                  pageNumber
-                );
-              }
-            ),
-            table.getPageCount() > 5 && currentPage < totalPages - 3 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "px-1 text-secondary", children: "..." }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { variant: "body-sm", className: "text-secondary", children: totalPages })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-              Button,
-              {
-                variant: "ghost",
-                size: "sm",
-                onClick: handleNextPage,
-                disabled: !table.getCanNextPage(),
-                className: "p-2",
-                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ArrowRightIcon, {})
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-3 w-48", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-              Text,
-              {
-                variant: "body-sm",
-                className: "text-secondary whitespace-nowrap",
-                children: "Rows per page:"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-              Select,
-              {
-                value: table.getState().pagination.pageSize.toString(),
-                onValueChange: handlePageSizeChange,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SelectTrigger, { className: "min-w-0 h-8", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SelectValue, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SelectContent, { children: [10, 20, 50, 100].map((size) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SelectItem, { value: size.toString(), children: size }, size)) })
-                ]
-              }
-            )
-          ] })
-        ]
+        as: "div",
+        variant: "body-sm-medium",
+        className: cn(className),
+        ...props,
+        children: title
+      }
+    );
+  }
+  const sorted = column.getIsSorted();
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("flex items-center gap-2", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { as: "span", variant: "body-sm-medium", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      Button,
+      {
+        variant: "ghost",
+        size: "mini",
+        onClick: () => {
+          setTimeout(() => {
+            column.toggleSorting(sorted === "asc");
+          }, 0);
+        },
+        "aria-label": `Sort by ${title}`,
+        className: "text-secondary",
+        children: sorted === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CaretDownIcon, { "aria-hidden": "true" }) : sorted === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CaretUpIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowsDownUpIcon, { "aria-hidden": "true", size: 16 })
       }
     )
   ] });
 }
+
+// src/components/ui/data-table/data-table-view-options.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function DataTableViewOptions({
+  table,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      DropdownMenuTrigger,
+      {
+        render: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            ...props,
+            "aria-label": "Table options",
+            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CogIcon, { "aria-hidden": "true" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(DropdownMenuContent, { align: "end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DropdownMenuLabel, { children: "Toggle columns" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DropdownMenuSeparator, {}),
+      table.getAllColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        DropdownMenuCheckboxItem,
+        {
+          checked: column.getIsVisible(),
+          onCheckedChange: (value) => column.toggleVisibility(!!value),
+          children: typeof column.columnDef.header === "string" ? column.columnDef.header : column.id
+        },
+        column.id
+      ))
+    ] })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -6572,6 +6913,7 @@ function Table({
   ArrowLeftIcon,
   ArrowRightIcon,
   ArrowUpIcon,
+  ArrowsDownUpIcon,
   Avatar,
   AvatarFallback,
   AvatarGroup,
@@ -6618,6 +6960,10 @@ function Table({
   CloseIcon,
   CogIcon,
   CredentialsIcon,
+  DataTableColumnHeader,
+  DataTablePagination,
+  DataTableView,
+  DataTableViewOptions,
   DatePicker,
   DatePickerTrigger,
   Dialog,
@@ -6747,7 +7093,14 @@ function Table({
   StatementIcon,
   Switch,
   Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
   TableIcon,
+  TableRow,
   Tabs,
   TabsContent,
   TabsList,