@mesob/ui 0.0.2

package/dist/components/data-table/index.js

@@ -0,0 +1,639 @@
+// src/components/data-table/data-table.tsx
+import {
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import * as React from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/table.tsx
+import { jsx } from "react/jsx-runtime";
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: "relative w-full overflow-x-auto",
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          "data-slot": "table",
+          className: cn("w-full caption-bottom text-sm", className),
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn("[&_tr]:border-b", className),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/data-table/data-table.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function DataTable({
+  columns,
+  data,
+  sorting = [],
+  onSortingChange,
+  columnFilters = [],
+  onColumnFiltersChange,
+  columnVisibility = {},
+  onColumnVisibilityChange,
+  rowSelection = {},
+  onRowSelectionChange,
+  pageSize = 10,
+  pageIndex = 0,
+  getRowId
+}) {
+  const [internalSorting, setInternalSorting] = React.useState(sorting);
+  const [internalColumnFilters, setInternalColumnFilters] = React.useState(columnFilters);
+  const [internalColumnVisibility, setInternalColumnVisibility] = React.useState(columnVisibility);
+  const [internalRowSelection, setInternalRowSelection] = React.useState(rowSelection);
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId: getRowId || ((_, index) => String(index)),
+    state: {
+      sorting: onSortingChange ? sorting : internalSorting,
+      columnFilters: onColumnFiltersChange ? columnFilters : internalColumnFilters,
+      columnVisibility: onColumnVisibilityChange ? columnVisibility : internalColumnVisibility,
+      rowSelection: onRowSelectionChange ? rowSelection : internalRowSelection,
+      pagination: { pageIndex, pageSize }
+    },
+    enableRowSelection: true,
+    onSortingChange: (updater) => {
+      const newSorting = typeof updater === "function" ? updater(onSortingChange ? sorting : internalSorting) : updater;
+      if (onSortingChange) {
+        onSortingChange(newSorting);
+      } else {
+        setInternalSorting(newSorting);
+      }
+    },
+    onColumnFiltersChange: (updater) => {
+      const newFilters = typeof updater === "function" ? updater(
+        onColumnFiltersChange ? columnFilters : internalColumnFilters
+      ) : updater;
+      if (onColumnFiltersChange) {
+        onColumnFiltersChange(newFilters);
+      } else {
+        setInternalColumnFilters(newFilters);
+      }
+    },
+    onColumnVisibilityChange: (updater) => {
+      const newVisibility = typeof updater === "function" ? updater(
+        onColumnVisibilityChange ? columnVisibility : internalColumnVisibility
+      ) : updater;
+      if (onColumnVisibilityChange) {
+        onColumnVisibilityChange(newVisibility);
+      } else {
+        setInternalColumnVisibility(newVisibility);
+      }
+    },
+    onRowSelectionChange: (updater) => {
+      const newSelection = typeof updater === "function" ? updater(onRowSelectionChange ? rowSelection : internalRowSelection) : updater;
+      if (onRowSelectionChange) {
+        onRowSelectionChange(newSelection);
+      } else {
+        setInternalRowSelection(newSelection);
+      }
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues()
+  });
+  return /* @__PURE__ */ jsx2("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx2(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx2(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx2(TableHead, { colSpan: header.colSpan, children: header.isPlaceholder ? null : flexRender(
+      header.column.columnDef.header,
+      header.getContext()
+    ) }, header.id)) }, headerGroup.id)) }),
+    /* @__PURE__ */ jsx2(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx2(
+      TableRow,
+      {
+        "data-state": row.getIsSelected() && "selected",
+        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx2(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+      },
+      row.id
+    )) : /* @__PURE__ */ jsx2(TableRow, { children: /* @__PURE__ */ jsx2(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
+  ] }) });
+}
+
+// src/components/data-table/data-table-column-header.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function DataTableColumnHeader({
+  column,
+  title,
+  className
+}) {
+  if (!column.getCanSort()) {
+    return /* @__PURE__ */ jsx3("div", { className: cn(className), children: title });
+  }
+  return /* @__PURE__ */ jsx3("div", { className: cn("flex items-center gap-2", className), children: /* @__PURE__ */ jsx3("span", { children: title }) });
+}
+
+// src/components/data-table/data-table-pagination.tsx
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconChevronsLeft,
+  IconChevronsRight
+} from "@tabler/icons-react";
+
+// src/components/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx4(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/select.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { IconCheck, IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(
+    SelectPrimitive.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx5(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx5(IconChevronDown, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      align,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx5(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx5(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx5(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx5("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx5(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx5(IconCheck, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx5(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx5(IconChevronUp, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx5(IconChevronDown, { className: "size-4" })
+    }
+  );
+}
+
+// src/components/data-table/data-table-pagination.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function DataTablePagination({
+  pageIndex,
+  pageSize,
+  pageCount,
+  totalRows,
+  selectedRows = 0,
+  onPageChange,
+  onPageSizeChange,
+  pageSizeOptions = [10, 20, 30, 50]
+}) {
+  const canPreviousPage = pageIndex > 0;
+  const canNextPage = pageIndex < pageCount - 1;
+  return /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-2 py-4", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "text-muted-foreground flex-1 text-sm", children: [
+      selectedRows > 0 && /* @__PURE__ */ jsxs3("span", { children: [
+        selectedRows,
+        " of ",
+        totalRows,
+        " row(s) selected."
+      ] }),
+      selectedRows === 0 && /* @__PURE__ */ jsxs3("span", { children: [
+        totalRows,
+        " row(s) total."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsx6("p", { className: "text-sm font-medium", children: "Rows per page" }),
+        /* @__PURE__ */ jsxs3(
+          Select,
+          {
+            value: `${pageSize}`,
+            onValueChange: (value) => onPageSizeChange(Number(value)),
+            children: [
+              /* @__PURE__ */ jsx6(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx6(SelectValue, { placeholder: pageSize }) }),
+              /* @__PURE__ */ jsx6(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx6(SelectItem, { value: `${size}`, children: size }, size)) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
+        "Page ",
+        pageIndex + 1,
+        " of ",
+        pageCount || 1
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxs3(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            className: "hidden h-8 w-8 lg:flex",
+            onClick: () => onPageChange(0),
+            disabled: !canPreviousPage,
+            children: [
+              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to first page" }),
+              /* @__PURE__ */ jsx6(IconChevronsLeft, { className: "h-4 w-4" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            className: "h-8 w-8",
+            onClick: () => onPageChange(pageIndex - 1),
+            disabled: !canPreviousPage,
+            children: [
+              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to previous page" }),
+              /* @__PURE__ */ jsx6(IconChevronLeft, { className: "h-4 w-4" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            className: "h-8 w-8",
+            onClick: () => onPageChange(pageIndex + 1),
+            disabled: !canNextPage,
+            children: [
+              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to next page" }),
+              /* @__PURE__ */ jsx6(IconChevronRight, { className: "h-4 w-4" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            className: "hidden h-8 w-8 lg:flex",
+            onClick: () => onPageChange(pageCount - 1),
+            disabled: !canNextPage,
+            children: [
+              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to last page" }),
+              /* @__PURE__ */ jsx6(IconChevronsRight, { className: "h-4 w-4" })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/data-table/data-table-view-options.tsx
+import { IconSettings } from "@tabler/icons-react";
+
+// src/components/dropdown-menu.tsx
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { IconCheck as IconCheck2, IconChevronRight as IconChevronRight2, IconCircle } from "@tabler/icons-react";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx7(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs4(
+    DropdownMenuPrimitive.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx7("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx7(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx7(IconCheck2, { className: "size-4" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    DropdownMenuPrimitive.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+
+// src/components/data-table/data-table-view-options.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function DataTableViewOptions({
+  table
+}) {
+  return /* @__PURE__ */ jsxs5(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx8(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "ml-auto hidden h-8 lg:flex",
+        children: [
+          /* @__PURE__ */ jsx8(IconSettings, { className: "mr-2 h-4 w-4" }),
+          "View"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs5(DropdownMenuContent, { align: "end", className: "w-[150px]", children: [
+      /* @__PURE__ */ jsx8(DropdownMenuLabel, { children: "Toggle columns" }),
+      /* @__PURE__ */ jsx8(DropdownMenuSeparator, {}),
+      table.getAllColumns().filter(
+        (column) => typeof column.accessorFn !== "undefined" && column.getCanHide()
+      ).map((column) => /* @__PURE__ */ jsx8(
+        DropdownMenuCheckboxItem,
+        {
+          className: "capitalize",
+          checked: column.getIsVisible(),
+          onCheckedChange: (value) => column.toggleVisibility(!!value),
+          children: column.id
+        },
+        column.id
+      ))
+    ] })
+  ] });
+}
+export {
+  DataTable,
+  DataTableColumnHeader,
+  DataTablePagination,
+  DataTableViewOptions
+};
+//# sourceMappingURL=index.js.map