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

package/dist/index.mjs

@@ -203,6 +203,7 @@ import { CaretDownIcon as PhosphorCaretDown } from "@phosphor-icons/react/CaretD
 import { CaretLeftIcon as PhosphorCaretLeft } from "@phosphor-icons/react/CaretLeft";
 import { CaretRightIcon as PhosphorCaretRight } from "@phosphor-icons/react/CaretRight";
 import { CaretUpIcon as PhosphorCaretUp } from "@phosphor-icons/react/CaretUp";
+import { ArrowsDownUpIcon as PhosphorArrowsDownUp } from "@phosphor-icons/react/ArrowsDownUp";
 import { ChatCircleIcon as PhosphorChatCircle } from "@phosphor-icons/react/ChatCircle";
 import { CheckSquareIcon as PhosphorCheckSquare } from "@phosphor-icons/react/CheckSquare";
 import { XIcon as PhosphorX } from "@phosphor-icons/react/X";
@@ -284,6 +285,7 @@ var CaretDownIcon = createIcon(PhosphorCaretDown);
 var CaretLeftIcon = createIcon(PhosphorCaretLeft);
 var CaretRightIcon = createIcon(PhosphorCaretRight);
 var CaretUpIcon = createIcon(PhosphorCaretUp);
+var ArrowsDownUpIcon = createIcon(PhosphorArrowsDownUp);
 var ChatIcon = createIcon(PhosphorChatCircle);
 var CheckmarkSquareIcon = createIcon(PhosphorCheckSquare);
 var CloseIcon = createIcon(PhosphorX);
@@ -404,15 +406,75 @@ import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { cva as cva3 } from "class-variance-authority";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var buttonVariants = cva3(
-  "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",
@@ -425,17 +487,26 @@ var buttonVariants = cva3(
       {
         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: {
@@ -6125,162 +6196,420 @@ function PieChart({
 }
 
 // src/components/ui/table.tsx
-import { useCallback as useCallback8 } from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
+function Table({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx44(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: "relative w-full overflow-x-auto",
+      children: /* @__PURE__ */ jsx44(
+        "table",
+        {
+          ref,
+          "data-slot": "table",
+          className: cn(
+            // Layout
+            "w-full caption-bottom",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx44(
+    "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__ */ jsx44("tbody", { ref, "data-slot": "table-body", className, ...props });
+}
+function TableFooter({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx44(
+    "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__ */ jsx44(
+    "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__ */ jsx44(
+    "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__ */ jsx44(
+    "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__ */ jsx44(
+    "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
 import {
   flexRender
 } from "@tanstack/react-table";
-import { Fragment as Fragment3, jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
-function Table({
+import { jsx as jsx45, jsxs as jsxs24 } from "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 = useCallback8(() => {
-    table.previousPage();
-  }, [table]);
-  const handleNextPage = useCallback8(() => {
-    table.nextPage();
-  }, [table]);
-  const handlePageChange = useCallback8(
-    (pageIndex) => {
-      table.setPageIndex(pageIndex);
-    },
-    [table]
+  return /* @__PURE__ */ jsx45(
+    "div",
+    {
+      className: cn("relative", loading && "opacity-50 pointer-events-none"),
+      "aria-busy": loading || void 0,
+      children: /* @__PURE__ */ jsxs24(Table, { className, ...props, children: [
+        /* @__PURE__ */ jsx45(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx45(TableRow, { children: headerGroup.headers.map((header) => {
+          const sorted = header.column.getIsSorted();
+          return /* @__PURE__ */ jsx45(
+            TableHead,
+            {
+              colSpan: header.colSpan,
+              "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0,
+              children: header.isPlaceholder ? null : flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              )
+            },
+            header.id
+          );
+        }) }, headerGroup.id)) }),
+        /* @__PURE__ */ jsx45(TableBody, { children: table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row) => {
+          const rowProps = getRowProps?.(row);
+          return /* @__PURE__ */ jsx45(
+            TableRow,
+            {
+              "data-state": row.getIsSelected() ? "selected" : void 0,
+              ...rowProps,
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx45(TableCell, { children: flexRender(
+                cell.column.columnDef.cell,
+                cell.getContext()
+              ) }, cell.id))
+            },
+            row.id
+          );
+        }) : /* @__PURE__ */ jsx45(TableRow, { children: /* @__PURE__ */ jsx45(
+          TableCell,
+          {
+            colSpan: table.getVisibleLeafColumns().length,
+            className: "h-24 text-center text-secondary",
+            children: emptyState
+          }
+        ) }) })
+      ] })
+    }
   );
-  const handlePageSizeChange = useCallback8(
-    (value) => {
-      table.setPageSize(Number(value));
-    },
-    [table]
+}
+
+// src/components/ui/data-table/data-table-pagination.tsx
+import { jsx as jsx46, jsxs as jsxs25 } from "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__ */ jsxs25(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center justify-between gap-4 px-2 py-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx46(
+          Text,
+          {
+            variant: "body-sm",
+            className: "text-secondary whitespace-nowrap",
+            "aria-live": "polite",
+            children: totalRows > 0 ? `Showing ${from}\u2013${to} of ${totalRows}` : "No results"
+          }
+        ),
+        /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx46(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => table.firstPage(),
+              disabled: !table.getCanPreviousPage(),
+              "aria-label": "Go to first page",
+              children: /* @__PURE__ */ jsx46(ArrowLeftIcon, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx46(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => table.previousPage(),
+              disabled: !table.getCanPreviousPage(),
+              "aria-label": "Go to previous page",
+              children: /* @__PURE__ */ jsx46(CaretLeftIcon, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx46(Text, { as: "span", variant: "body-sm", className: "px-2 whitespace-nowrap", children: table.getPageCount() > 0 ? `Page ${pageIndex + 1} of ${table.getPageCount()}` : "No pages" }),
+          /* @__PURE__ */ jsx46(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => table.nextPage(),
+              disabled: !table.getCanNextPage(),
+              "aria-label": "Go to next page",
+              children: /* @__PURE__ */ jsx46(CaretRightIcon, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx46(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => table.lastPage(),
+              disabled: !table.getCanNextPage(),
+              "aria-label": "Go to last page",
+              children: /* @__PURE__ */ jsx46(ArrowRightIcon, { "aria-hidden": "true" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx46(
+            Text,
+            {
+              as: "span",
+              variant: "body-sm",
+              className: "text-secondary whitespace-nowrap",
+              children: "Rows per page"
+            }
+          ),
+          /* @__PURE__ */ jsxs25(
+            Select,
+            {
+              value: pageSize.toString(),
+              onValueChange: (value) => table.setPageSize(Number(value)),
+              children: [
+                /* @__PURE__ */ jsx46(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx46(SelectValue, {}) }),
+                /* @__PURE__ */ jsx46(SelectContent, { children: resolvedPageSizeOptions.map((size) => /* @__PURE__ */ jsx46(SelectItem, { value: size.toString(), children: size }, size)) })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
   );
-  return /* @__PURE__ */ jsxs24("div", { children: [
-    /* @__PURE__ */ jsx44("div", { className: cn("overflow-x-auto", className), children: /* @__PURE__ */ jsxs24("table", { className: "min-w-full divide-y divide-border", children: [
-      /* @__PURE__ */ jsx44("thead", { className: "bg-inverse text-inverse", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx44("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx44("th", { className: "px-6 py-3 text-left", children: /* @__PURE__ */ jsxs24(
-        "div",
-        {
-          className: `flex items-center space-x-1 ${header.column.getCanSort() ? "cursor-pointer select-none" : ""}`,
-          onClick: header.column.getToggleSortingHandler(),
-          children: [
-            /* @__PURE__ */ jsx44(
-              Text,
-              {
-                as: "span",
-                variant: "label-xs",
-                className: "text-inverse uppercase tracking-wider",
-                children: flexRender(
-                  header.column.columnDef.header,
-                  header.getContext()
-                )
-              }
-            ),
-            header.column.getCanSort() && /* @__PURE__ */ jsxs24("span", { className: "ml-1", children: [
-              header.column.getIsSorted() === "asc" && /* @__PURE__ */ jsx44(CaretUpIcon, { className: "text-inverse" }),
-              header.column.getIsSorted() === "desc" && /* @__PURE__ */ jsx44(CaretDownIcon, { className: "text-inverse" })
-            ] })
-          ]
-        }
-      ) }, header.id)) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx44("tbody", { className: "surface-default divide-y divide-border", children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx44("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx44("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx44(Text, { variant: "body-sm", children: flexRender(
-        cell.column.columnDef.cell,
-        cell.getContext()
-      ) }) }, cell.id)) }, row.id)) })
-    ] }) }),
-    showPagination && /* @__PURE__ */ jsxs24(
-      "div",
+}
+
+// src/components/ui/data-table/data-table-column-header.tsx
+import { jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
+function DataTableColumnHeader({
+  column,
+  title,
+  className,
+  ...props
+}) {
+  if (!column.getCanSort()) {
+    return /* @__PURE__ */ jsx47(
+      Text,
       {
-        className: cn(
-          "flex items-center justify-between px-6 py-3 surface-default border-t border-subtle",
-          paginationClassName
-        ),
-        children: [
-          /* @__PURE__ */ jsx44("div", { className: "flex items-center", children: /* @__PURE__ */ jsx44(Text, { variant: "body-sm", className: "text-secondary", children: showingText }) }),
-          /* @__PURE__ */ jsxs24("div", { className: "flex items-center space-x-1", children: [
-            /* @__PURE__ */ jsx44(
-              Button,
-              {
-                variant: "ghost",
-                size: "sm",
-                onClick: handlePreviousPage,
-                disabled: !table.getCanPreviousPage(),
-                className: "p-2",
-                children: /* @__PURE__ */ jsx44(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__ */ jsx44(
-                  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__ */ jsxs24(Fragment3, { children: [
-              /* @__PURE__ */ jsx44("span", { className: "px-1 text-secondary", children: "..." }),
-              /* @__PURE__ */ jsx44(Text, { variant: "body-sm", className: "text-secondary", children: totalPages })
-            ] }),
-            /* @__PURE__ */ jsx44(
-              Button,
-              {
-                variant: "ghost",
-                size: "sm",
-                onClick: handleNextPage,
-                disabled: !table.getCanNextPage(),
-                className: "p-2",
-                children: /* @__PURE__ */ jsx44(ArrowRightIcon, {})
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-3 w-48", children: [
-            /* @__PURE__ */ jsx44(
-              Text,
-              {
-                variant: "body-sm",
-                className: "text-secondary whitespace-nowrap",
-                children: "Rows per page:"
-              }
-            ),
-            /* @__PURE__ */ jsxs24(
-              Select,
-              {
-                value: table.getState().pagination.pageSize.toString(),
-                onValueChange: handlePageSizeChange,
-                children: [
-                  /* @__PURE__ */ jsx44(SelectTrigger, { className: "min-w-0 h-8", children: /* @__PURE__ */ jsx44(SelectValue, {}) }),
-                  /* @__PURE__ */ jsx44(SelectContent, { children: [10, 20, 50, 100].map((size) => /* @__PURE__ */ jsx44(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__ */ jsxs26("div", { className: cn("flex items-center gap-2", className), ...props, children: [
+    /* @__PURE__ */ jsx47(Text, { as: "span", variant: "body-sm-medium", children: title }),
+    /* @__PURE__ */ jsx47(
+      Button,
+      {
+        variant: "ghost",
+        size: "mini",
+        onClick: () => {
+          setTimeout(() => {
+            column.toggleSorting(sorted === "asc");
+          }, 0);
+        },
+        "aria-label": `Sort by ${title}`,
+        className: "text-secondary",
+        children: sorted === "desc" ? /* @__PURE__ */ jsx47(CaretDownIcon, { "aria-hidden": "true" }) : sorted === "asc" ? /* @__PURE__ */ jsx47(CaretUpIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx47(ArrowsDownUpIcon, { "aria-hidden": "true", size: 16 })
       }
     )
   ] });
 }
+
+// src/components/ui/data-table/data-table-view-options.tsx
+import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
+function DataTableViewOptions({
+  table,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs27(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx48(
+      DropdownMenuTrigger,
+      {
+        render: /* @__PURE__ */ jsx48(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            ...props,
+            "aria-label": "Table options",
+            children: /* @__PURE__ */ jsx48(CogIcon, { "aria-hidden": "true" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs27(DropdownMenuContent, { align: "end", children: [
+      /* @__PURE__ */ jsx48(DropdownMenuLabel, { children: "Toggle columns" }),
+      /* @__PURE__ */ jsx48(DropdownMenuSeparator, {}),
+      table.getAllColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ jsx48(
+        DropdownMenuCheckboxItem,
+        {
+          checked: column.getIsVisible(),
+          onCheckedChange: (value) => column.toggleVisibility(!!value),
+          children: typeof column.columnDef.header === "string" ? column.columnDef.header : column.id
+        },
+        column.id
+      ))
+    ] })
+  ] });
+}
 export {
   Accordion,
   AccordionContent,
@@ -6304,6 +6633,7 @@ export {
   ArrowLeftIcon,
   ArrowRightIcon,
   ArrowUpIcon,
+  ArrowsDownUpIcon,
   Avatar,
   AvatarFallback,
   AvatarGroup,
@@ -6350,6 +6680,10 @@ export {
   CloseIcon,
   CogIcon,
   CredentialsIcon,
+  DataTableColumnHeader,
+  DataTablePagination,
+  DataTableView,
+  DataTableViewOptions,
   DatePicker,
   DatePickerTrigger,
   Dialog,
@@ -6479,7 +6813,14 @@ export {
   StatementIcon,
   Switch,
   Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
   TableIcon,
+  TableRow,
   Tabs,
   TabsContent,
   TabsList,