@stackframe/stack-ui 2.8.61 → 2.8.63

package/dist/esm/components/data-table/cells.js

@@ -0,0 +1,88 @@
+"use client";
+"use client";
+
+// src/components/data-table/cells.tsx
+import { DotsHorizontalIcon } from "@radix-ui/react-icons";
+import React, { useEffect, useRef, useState } from "react";
+import { Avatar, AvatarFallback, AvatarImage, Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, SimpleTooltip, cn } from "../../index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+function TextCell(props) {
+  const textRef = useRef(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const overflowStyle = "text-ellipsis text-nowrap overflow-x-hidden";
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (textRef.current) {
+        const isOverflowing2 = textRef.current.scrollWidth > textRef.current.clientWidth;
+        setIsOverflowing(isOverflowing2);
+      }
+    };
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+    return () => {
+      window.removeEventListener("resize", checkOverflow);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "relative", style: { minWidth: props.size }, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 absolute inset-0", children: [
+    /* @__PURE__ */ jsx("div", { className: overflowStyle, ref: textRef, children: isOverflowing ? /* @__PURE__ */ jsx(SimpleTooltip, { tooltip: props.children, children: /* @__PURE__ */ jsx("div", { className: overflowStyle, children: props.children }) }) : props.children }),
+    props.icon && /* @__PURE__ */ jsx("div", { children: props.icon })
+  ] }) });
+}
+function AvatarCell(props) {
+  return /* @__PURE__ */ jsxs(Avatar, { className: "h-6 w-6", children: [
+    /* @__PURE__ */ jsx(AvatarImage, { src: props.src }),
+    /* @__PURE__ */ jsx(AvatarFallback, { children: props.fallback })
+  ] });
+}
+function DateCell(props) {
+  const ignore = !!props.ignoreAfterYears && new Date((/* @__PURE__ */ new Date()).setFullYear((/* @__PURE__ */ new Date()).getFullYear() + props.ignoreAfterYears)) < props.date;
+  const timeString = props.date.toLocaleTimeString([], { year: "numeric", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit" });
+  return /* @__PURE__ */ jsx(TextCell, { size: 140, children: ignore ? "Never" : timeString });
+}
+function ActionCell(props) {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        className: cn(
+          "flex h-8 w-8 p-0 data-[state=open]:bg-muted",
+          props.invisible && "invisible"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(DotsHorizontalIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Open menu" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "min-w-[150px] max-w-[300px] stack-scope", children: props.items?.map((item, index) => {
+      if (item === "-") {
+        return /* @__PURE__ */ jsx(DropdownMenuSeparator, {}, index);
+      }
+      const menuItemProps = {
+        onClick: item.onClick,
+        className: cn(item.danger ? "text-destructive" : ""),
+        disabled: item.disabled
+      };
+      const menuItem = /* @__PURE__ */ createElement(DropdownMenuItem, { ...menuItemProps, key: index }, item.item);
+      if (item.disabled && item.disabledTooltip) {
+        return /* @__PURE__ */ jsx(SimpleTooltip, { tooltip: item.disabledTooltip, children: React.cloneElement(menuItem, {
+          className: cn(menuItemProps.className, "opacity-50 cursor-not-allowed")
+        }) }, index);
+      }
+      return menuItem;
+    }) })
+  ] });
+}
+function BadgeCell(props) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 flex-wrap", children: props.badges.map((badge, index) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: badge }, index)) });
+}
+export {
+  ActionCell,
+  AvatarCell,
+  BadgeCell,
+  DateCell,
+  TextCell
+};
+//# sourceMappingURL=cells.js.map

package/dist/esm/components/data-table/cells.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/data-table/cells.tsx"],"sourcesContent":["\n'use client';\nimport { DotsHorizontalIcon } from \"@radix-ui/react-icons\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { Avatar, AvatarFallback, AvatarImage, Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, SimpleTooltip, cn } from \"../..\";\n\nexport function TextCell(props: { children: React.ReactNode, size?: number, icon?: React.ReactNode }) {\n  const textRef = useRef<HTMLDivElement>(null);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  const overflowStyle = \"text-ellipsis text-nowrap overflow-x-hidden\";\n\n  useEffect(() => {\n    const checkOverflow = () => {\n      if (textRef.current) {\n        const isOverflowing = textRef.current.scrollWidth > textRef.current.clientWidth;\n        setIsOverflowing(isOverflowing);\n      }\n    };\n\n    checkOverflow();\n    window.addEventListener('resize', checkOverflow);\n    return () => {\n      window.removeEventListener('resize', checkOverflow);\n    };\n  }, []);\n\n  return (\n    <div className=\"relative\" style={{ minWidth: props.size }}>\n      <div className=\"flex items-center gap-2 absolute inset-0\">\n        <div className={overflowStyle} ref={textRef}>\n          {isOverflowing ? (\n            <SimpleTooltip tooltip={props.children}>\n              <div className={overflowStyle}>\n                {props.children}\n              </div>\n            </SimpleTooltip>\n          ) : props.children}\n        </div>\n        {props.icon && <div>{props.icon}</div>}\n      </div>\n    </div>\n  );\n}\n\nexport function AvatarCell(props: { src?: string, fallback?: string }) {\n  return (\n    <Avatar className=\"h-6 w-6\">\n      <AvatarImage src={props.src} />\n      <AvatarFallback>{props.fallback}</AvatarFallback>\n    </Avatar>\n  );\n}\n\nexport function DateCell(props: { date: Date, ignoreAfterYears?: number }) {\n  const ignore = !!props.ignoreAfterYears && new Date(new Date().setFullYear(new Date().getFullYear() + props.ignoreAfterYears)) < props.date;\n  const timeString = props.date.toLocaleTimeString([], { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' });\n  return (\n    <TextCell size={140}>\n      {ignore ? 'Never' : timeString}\n    </TextCell>\n  );\n}\n\ntype ActionItem = '-' | {\n  item: React.ReactNode,\n  onClick: (e: React.MouseEvent) => void | Promise<void>,\n  danger?: boolean,\n  disabled?: boolean,\n  disabledTooltip?: string,\n}\n\nexport function ActionCell(props: {\n  items?: ActionItem[],\n  invisible?: boolean,\n}) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          variant=\"ghost\"\n          className={cn(\n            \"flex h-8 w-8 p-0 data-[state=open]:bg-muted\",\n            props.invisible && \"invisible\",\n          )}\n        >\n          <DotsHorizontalIcon className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Open menu</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"min-w-[150px] max-w-[300px] stack-scope\">\n        {props.items?.map((item, index) => {\n          if (item === '-') {\n            return <DropdownMenuSeparator key={index} />;\n          }\n\n          const menuItemProps = {\n            onClick: item.onClick,\n            className: cn(item.danger ? \"text-destructive\" : \"\"),\n            disabled: item.disabled\n          };\n\n          const menuItem = (\n            <DropdownMenuItem {...menuItemProps} key={index}>\n              {item.item}\n            </DropdownMenuItem>\n          );\n\n          if (item.disabled && item.disabledTooltip) {\n            return (\n              <SimpleTooltip tooltip={item.disabledTooltip} key={index}>\n                {React.cloneElement(menuItem, {\n                  className: cn(menuItemProps.className, \"opacity-50 cursor-not-allowed\")\n                })}\n              </SimpleTooltip>\n            );\n          }\n\n          return menuItem;\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\nexport function BadgeCell(props: { badges: string[], size?: number }) {\n  return (\n    <div className=\"flex items-center gap-1 flex-wrap\">\n      {props.badges.map((badge, index) => (\n        <Badge key={index} variant=\"secondary\">{badge}</Badge>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,0BAA0B;AACnC,OAAO,SAAS,WAAW,QAAQ,gBAAgB;AACnD,SAAS,QAAQ,gBAAgB,aAAa,OAAO,QAAQ,cAAc,qBAAqB,kBAAkB,uBAAuB,qBAAqB,eAAe,UAAU;AAwBjL,SAIQ,KAJR;AA0EM;AAhGL,SAAS,SAAS,OAA6E;AACpG,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,gBAAgB;AAEtB,YAAU,MAAM;AACd,UAAM,gBAAgB,MAAM;AAC1B,UAAI,QAAQ,SAAS;AACnB,cAAMA,iBAAgB,QAAQ,QAAQ,cAAc,QAAQ,QAAQ;AACpE,yBAAiBA,cAAa;AAAA,MAChC;AAAA,IACF;AAEA,kBAAc;AACd,WAAO,iBAAiB,UAAU,aAAa;AAC/C,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,aAAa;AAAA,IACpD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,SAAI,WAAU,YAAW,OAAO,EAAE,UAAU,MAAM,KAAK,GACtD,+BAAC,SAAI,WAAU,4CACb;AAAA,wBAAC,SAAI,WAAW,eAAe,KAAK,SACjC,0BACC,oBAAC,iBAAc,SAAS,MAAM,UAC5B,8BAAC,SAAI,WAAW,eACb,gBAAM,UACT,GACF,IACE,MAAM,UACZ;AAAA,IACC,MAAM,QAAQ,oBAAC,SAAK,gBAAM,MAAK;AAAA,KAClC,GACF;AAEJ;AAEO,SAAS,WAAW,OAA4C;AACrE,SACE,qBAAC,UAAO,WAAU,WAChB;AAAA,wBAAC,eAAY,KAAK,MAAM,KAAK;AAAA,IAC7B,oBAAC,kBAAgB,gBAAM,UAAS;AAAA,KAClC;AAEJ;AAEO,SAAS,SAAS,OAAkD;AACzE,QAAM,SAAS,CAAC,CAAC,MAAM,oBAAoB,IAAI,MAAK,oBAAI,KAAK,GAAE,aAAY,oBAAI,KAAK,GAAE,YAAY,IAAI,MAAM,gBAAgB,CAAC,IAAI,MAAM;AACvI,QAAM,aAAa,MAAM,KAAK,mBAAmB,CAAC,GAAG,EAAE,MAAM,WAAW,OAAO,WAAW,KAAK,WAAW,MAAM,WAAW,QAAQ,UAAU,CAAC;AAC9I,SACE,oBAAC,YAAS,MAAM,KACb,mBAAS,UAAU,YACtB;AAEJ;AAUO,SAAS,WAAW,OAGxB;AACD,SACE,qBAAC,gBACC;AAAA,wBAAC,uBAAoB,SAAO,MAC1B;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAW;AAAA,UACT;AAAA,UACA,MAAM,aAAa;AAAA,QACrB;AAAA,QAEA;AAAA,8BAAC,sBAAmB,WAAU,WAAU;AAAA,UACxC,oBAAC,UAAK,WAAU,WAAU,uBAAS;AAAA;AAAA;AAAA,IACrC,GACF;AAAA,IACA,oBAAC,uBAAoB,OAAM,OAAM,WAAU,2CACxC,gBAAM,OAAO,IAAI,CAAC,MAAM,UAAU;AACjC,UAAI,SAAS,KAAK;AAChB,eAAO,oBAAC,2BAA2B,KAAO;AAAA,MAC5C;AAEA,YAAM,gBAAgB;AAAA,QACpB,SAAS,KAAK;AAAA,QACd,WAAW,GAAG,KAAK,SAAS,qBAAqB,EAAE;AAAA,QACnD,UAAU,KAAK;AAAA,MACjB;AAEA,YAAM,WACJ,8BAAC,oBAAkB,GAAG,eAAe,KAAK,SACvC,KAAK,IACR;AAGF,UAAI,KAAK,YAAY,KAAK,iBAAiB;AACzC,eACE,oBAAC,iBAAc,SAAS,KAAK,iBAC1B,gBAAM,aAAa,UAAU;AAAA,UAC5B,WAAW,GAAG,cAAc,WAAW,+BAA+B;AAAA,QACxE,CAAC,KAHgD,KAInD;AAAA,MAEJ;AAEA,aAAO;AAAA,IACT,CAAC,GACH;AAAA,KACF;AAEJ;AAEO,SAAS,UAAU,OAA4C;AACpE,SACE,oBAAC,SAAI,WAAU,qCACZ,gBAAM,OAAO,IAAI,CAAC,OAAO,UACxB,oBAAC,SAAkB,SAAQ,aAAa,mBAA5B,KAAkC,CAC/C,GACH;AAEJ;","names":["isOverflowing"]}

package/dist/esm/components/data-table/column-header.js

@@ -0,0 +1,40 @@
+// src/components/data-table/column-header.tsx
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Item(props) {
+  return /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: props.onClick, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsx(props.icon, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
+    props.children
+  ] }) });
+}
+function DataTableColumnHeader({
+  column,
+  columnTitle,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center space-x-2", className), children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: cn("-ml-3 h-8 data-[state=open]:bg-accent", !column.getCanSort() && "pointer-events-none"),
+        children: [
+          /* @__PURE__ */ jsx("span", { children: columnTitle }),
+          column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "ml-2 h-4 w-4" }) : column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "ml-2 h-4 w-4" }) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "stack-scope", children: [
+      /* @__PURE__ */ jsx(Item, { icon: ArrowUp, onClick: () => column.toggleSorting(false), children: "Asc" }),
+      /* @__PURE__ */ jsx(Item, { icon: ArrowDown, onClick: () => column.toggleSorting(true), children: "Desc" })
+    ] })
+  ] }) });
+}
+export {
+  DataTableColumnHeader
+};
+//# sourceMappingURL=column-header.js.map

package/dist/esm/components/data-table/column-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/data-table/column-header.tsx"],"sourcesContent":["import { Button } from \"../ui/button\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from \"../ui/dropdown-menu\";\nimport { Column } from \"@tanstack/react-table\";\nimport { ArrowDown, ArrowUp, LucideIcon } from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\n\ntype DataTableColumnHeaderProps<TData, TValue> = {\n  column: Column<TData, TValue>,\n  columnTitle: React.ReactNode,\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction Item(props: { icon: LucideIcon, onClick: () => void, children: React.ReactNode }) {\n  return (\n    <DropdownMenuItem onClick={props.onClick}>\n      <div className=\"flex items-center\">\n        <props.icon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground/70\" />\n        {props.children}\n      </div>\n    </DropdownMenuItem>\n  );\n}\n\nexport function DataTableColumnHeader<TData, TValue>({\n  column,\n  columnTitle,\n  className,\n}: DataTableColumnHeaderProps<TData, TValue>) {\n  return (\n    <div className={cn(\"flex items-center space-x-2\", className)}>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className={cn(\"-ml-3 h-8 data-[state=open]:bg-accent\", !column.getCanSort() && \"pointer-events-none\")}\n          >\n            <span>{columnTitle}</span>\n            {column.getIsSorted() === \"desc\" ? (\n              <ArrowDown className=\"ml-2 h-4 w-4\" />\n            ) : column.getIsSorted() === \"asc\" ? (\n              <ArrowUp className=\"ml-2 h-4 w-4\" />\n            ) : null}\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" className=\"stack-scope\">\n          <Item icon={ArrowUp} onClick={() => column.toggleSorting(false)}>Asc</Item>\n          <Item icon={ArrowDown} onClick={() => column.toggleSorting(true)}>Desc</Item>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n}\n"],"mappings":";AAAA,SAAS,cAAc;AACvB,SAAS,cAAc,qBAAqB,kBAAkB,2BAA2B;AAEzF,SAAS,WAAW,eAA2B;AAC/C,SAAS,UAAU;AAUb,SACE,KADF;AAHN,SAAS,KAAK,OAA6E;AACzF,SACE,oBAAC,oBAAiB,SAAS,MAAM,SAC/B,+BAAC,SAAI,WAAU,qBACb;AAAA,wBAAC,MAAM,MAAN,EAAW,WAAU,6CAA4C;AAAA,IACjE,MAAM;AAAA,KACT,GACF;AAEJ;AAEO,SAAS,sBAAqC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AACF,GAA8C;AAC5C,SACE,oBAAC,SAAI,WAAW,GAAG,+BAA+B,SAAS,GACzD,+BAAC,gBACC;AAAA,wBAAC,uBAAoB,SAAO,MAC1B;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAW,GAAG,yCAAyC,CAAC,OAAO,WAAW,KAAK,qBAAqB;AAAA,QAEpG;AAAA,8BAAC,UAAM,uBAAY;AAAA,UAClB,OAAO,YAAY,MAAM,SACxB,oBAAC,aAAU,WAAU,gBAAe,IAClC,OAAO,YAAY,MAAM,QAC3B,oBAAC,WAAQ,WAAU,gBAAe,IAChC;AAAA;AAAA;AAAA,IACN,GACF;AAAA,IACA,qBAAC,uBAAoB,OAAM,SAAQ,WAAU,eAC3C;AAAA,0BAAC,QAAK,MAAM,SAAS,SAAS,MAAM,OAAO,cAAc,KAAK,GAAG,iBAAG;AAAA,MACpE,oBAAC,QAAK,MAAM,WAAW,SAAS,MAAM,OAAO,cAAc,IAAI,GAAG,kBAAI;AAAA,OACxE;AAAA,KACF,GACF;AAEJ;","names":[]}

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

@@ -0,0 +1,249 @@
+"use client";
+"use client";
+
+// src/components/data-table/data-table.tsx
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "../ui/table.js";
+import {
+  GlobalFiltering,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import React from "react";
+import { DataTablePagination } from "./pagination.js";
+import { DataTableToolbar } from "./toolbar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TableView(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx(
+      DataTableToolbar,
+      {
+        table: props.table,
+        toolbarRender: props.toolbarRender,
+        showDefaultToolbar: props.showDefaultToolbar,
+        defaultColumnFilters: props.defaultColumnFilters,
+        defaultSorting: props.defaultSorting
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: props.table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+        return /* @__PURE__ */ jsx(TableHead, { colSpan: header.colSpan, children: header.isPlaceholder ? null : flexRender(
+          header.column.columnDef.header,
+          header.getContext()
+        ) }, header.id);
+      }) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx(TableBody, { children: props.table.getRowModel().rows.length ? props.table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+        TableRow,
+        {
+          "data-state": row.getIsSelected() && "selected",
+          onClick: (ev) => {
+            if (ev.target instanceof Node && ev.currentTarget.contains(ev.target)) {
+              props.onRowClick?.(row.original);
+            }
+          },
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(
+            cell.column.columnDef.cell,
+            cell.getContext()
+          ) }, cell.id))
+        },
+        row.id
+      )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          colSpan: props.columns.length,
+          className: "h-24 text-center",
+          children: "No results."
+        }
+      ) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(DataTablePagination, { table: props.table })
+  ] });
+}
+function DataTable({
+  columns,
+  data,
+  toolbarRender,
+  defaultVisibility,
+  defaultColumnFilters,
+  defaultSorting,
+  showDefaultToolbar = true,
+  onRowClick
+}) {
+  const [sorting, setSorting] = React.useState(defaultSorting);
+  const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters);
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 10
+  });
+  const [globalFilter, setGlobalFilter] = React.useState();
+  return /* @__PURE__ */ jsx(
+    DataTableBase,
+    {
+      columns,
+      data,
+      toolbarRender,
+      defaultVisibility,
+      sorting,
+      setSorting,
+      defaultSorting,
+      columnFilters,
+      setColumnFilters,
+      defaultColumnFilters,
+      manualPagination: false,
+      manualFiltering: false,
+      pagination,
+      setPagination,
+      globalFilter,
+      setGlobalFilter,
+      showDefaultToolbar,
+      onRowClick
+    }
+  );
+}
+function DataTableManualPagination({
+  columns,
+  data,
+  toolbarRender,
+  defaultVisibility,
+  defaultColumnFilters,
+  defaultSorting,
+  onRowClick,
+  onUpdate,
+  showDefaultToolbar = true
+}) {
+  const [sorting, setSorting] = React.useState(defaultSorting);
+  const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 10 });
+  const [cursors, setCursors] = React.useState({});
+  const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters);
+  const [globalFilter, setGlobalFilter] = React.useState();
+  const [refreshCounter, setRefreshCounter] = React.useState(0);
+  React.useEffect(() => {
+    runAsynchronouslyWithAlert(async () => {
+      const { nextCursor } = await onUpdate({
+        cursor: cursors[pagination.pageIndex],
+        limit: pagination.pageSize,
+        sorting,
+        columnFilters,
+        globalFilters: globalFilter
+      });
+      setCursors((c) => nextCursor ? { ...c, [pagination.pageIndex + 1]: nextCursor } : c);
+    });
+  }, [pagination, sorting, columnFilters, refreshCounter]);
+  React.useEffect(() => {
+    setPagination((pagination2) => ({ ...pagination2, pageIndex: 0 }));
+    setCursors({});
+  }, [columnFilters, sorting, pagination.pageSize]);
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setRefreshCounter((x) => x + 1);
+    }, 3e3);
+    return () => clearTimeout(timer);
+  }, [globalFilter]);
+  return /* @__PURE__ */ jsx(
+    DataTableBase,
+    {
+      columns,
+      data,
+      toolbarRender,
+      sorting,
+      setSorting,
+      pagination,
+      setPagination,
+      columnFilters,
+      setColumnFilters,
+      rowCount: pagination.pageSize * Object.keys(cursors).length + (cursors[pagination.pageIndex + 1] ? 1 : 0),
+      globalFilter,
+      setGlobalFilter,
+      defaultColumnFilters,
+      defaultSorting,
+      defaultVisibility,
+      showDefaultToolbar,
+      onRowClick
+    }
+  );
+}
+function DataTableBase({
+  columns,
+  data,
+  toolbarRender,
+  defaultVisibility,
+  sorting,
+  setSorting,
+  defaultColumnFilters,
+  defaultSorting,
+  pagination,
+  setPagination,
+  rowCount,
+  columnFilters,
+  setColumnFilters,
+  globalFilter,
+  setGlobalFilter,
+  manualPagination = true,
+  manualFiltering = true,
+  showDefaultToolbar = true,
+  onRowClick
+}) {
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [columnVisibility, setColumnVisibility] = React.useState(defaultVisibility || {});
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+      pagination,
+      globalFilter
+    },
+    enableRowSelection: true,
+    onGlobalFilterChange: setGlobalFilter,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: setPagination,
+    getColumnCanGlobalFilter: (c) => c.columnDef.enableGlobalFilter ?? GlobalFiltering.getDefaultOptions(table).getColumnCanGlobalFilter(c),
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    autoResetAll: false,
+    manualPagination,
+    manualFiltering,
+    rowCount
+  });
+  return /* @__PURE__ */ jsx(
+    TableView,
+    {
+      table,
+      columns,
+      toolbarRender,
+      showDefaultToolbar,
+      defaultColumnFilters,
+      defaultSorting,
+      onRowClick
+    }
+  );
+}
+export {
+  DataTable,
+  DataTableManualPagination,
+  TableView
+};
+//# sourceMappingURL=data-table.js.map

package/dist/esm/components/data-table/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/data-table/data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"../ui/table\";\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  GlobalFiltering,\n  OnChangeFn,\n  PaginationState,\n  SortingState,\n  Table as TableType,\n  VisibilityState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport React from \"react\";\nimport { DataTablePagination } from \"./pagination\";\nimport { DataTableToolbar } from \"./toolbar\";\n\nexport function TableView<TData, TValue>(props: {\n  table: TableType<TData>,\n  columns: ColumnDef<TData, TValue>[],\n  toolbarRender?: (table: TableType<TData>) => React.ReactNode,\n  showDefaultToolbar?: boolean,\n  defaultColumnFilters: ColumnFiltersState,\n  defaultSorting: SortingState,\n  onRowClick?: (row: TData) => void,\n}) {\n  return (\n    <div className=\"space-y-4\">\n      <DataTableToolbar\n        table={props.table}\n        toolbarRender={props.toolbarRender}\n        showDefaultToolbar={props.showDefaultToolbar}\n        defaultColumnFilters={props.defaultColumnFilters}\n        defaultSorting={props.defaultSorting}\n      />\n      <div className=\"rounded-md border\">\n        <Table>\n          <TableHeader>\n            {props.table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id} >\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead key={header.id} colSpan={header.colSpan}>\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {props.table.getRowModel().rows.length ? (\n              props.table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                  onClick={(ev) => {\n                    // only trigger onRowClick if the element is a direct descendant; don't trigger for portals\n                    if (ev.target instanceof Node && ev.currentTarget.contains(ev.target)) {\n                      props.onRowClick?.(row.original);\n                    }\n                  }}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={props.columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      <DataTablePagination table={props.table} />\n    </div>\n  );\n}\n\ntype DataTableProps<TData, TValue> = {\n  columns: ColumnDef<TData, TValue>[],\n  data: TData[],\n  toolbarRender?: (table: TableType<TData>) => React.ReactNode,\n  defaultVisibility?: VisibilityState,\n  defaultColumnFilters: ColumnFiltersState,\n  defaultSorting: SortingState,\n  showDefaultToolbar?: boolean,\n  onRowClick?: (row: TData) => void,\n}\n\nexport function DataTable<TData, TValue>({\n  columns,\n  data,\n  toolbarRender,\n  defaultVisibility,\n  defaultColumnFilters,\n  defaultSorting,\n  showDefaultToolbar = true,\n  onRowClick,\n}: DataTableProps<TData, TValue>) {\n  const [sorting, setSorting] = React.useState<SortingState>(defaultSorting);\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(defaultColumnFilters);\n  const [pagination, setPagination] = React.useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 10,\n  });\n  const [globalFilter, setGlobalFilter] = React.useState<any>();\n\n  return <DataTableBase\n    columns={columns}\n    data={data}\n    toolbarRender={toolbarRender}\n    defaultVisibility={defaultVisibility}\n    sorting={sorting}\n    setSorting={setSorting}\n    defaultSorting={defaultSorting}\n    columnFilters={columnFilters}\n    setColumnFilters={setColumnFilters}\n    defaultColumnFilters={defaultColumnFilters}\n    manualPagination={false}\n    manualFiltering={false}\n    pagination={pagination}\n    setPagination={setPagination}\n    globalFilter={globalFilter}\n    setGlobalFilter={setGlobalFilter}\n    showDefaultToolbar={showDefaultToolbar}\n    onRowClick={onRowClick}\n  />;\n}\n\ntype DataTableManualPaginationProps<TData, TValue> = DataTableProps<TData, TValue> & {\n  onUpdate: (options: {\n    cursor: string,\n    limit: number,\n    sorting: SortingState,\n    columnFilters: ColumnFiltersState,\n    globalFilters: any,\n  }) => Promise<{ nextCursor: string | null }>,\n}\n\nexport function DataTableManualPagination<TData, TValue>({\n  columns,\n  data,\n  toolbarRender,\n  defaultVisibility,\n  defaultColumnFilters,\n  defaultSorting,\n  onRowClick,\n  onUpdate,\n  showDefaultToolbar = true,\n}: DataTableManualPaginationProps<TData, TValue>) {\n  const [sorting, setSorting] = React.useState<SortingState>(defaultSorting);\n  const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 10 });\n  const [cursors, setCursors] = React.useState<Record<number, string>>({});\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(defaultColumnFilters);\n  const [globalFilter, setGlobalFilter] = React.useState<any>();\n  const [refreshCounter, setRefreshCounter] = React.useState(0);\n\n  React.useEffect(() => {\n    runAsynchronouslyWithAlert(async () => {\n      const { nextCursor } = await onUpdate({\n        cursor: cursors[pagination.pageIndex],\n        limit: pagination.pageSize,\n        sorting,\n        columnFilters,\n        globalFilters: globalFilter,\n      });\n      setCursors(c => nextCursor ? { ...c, [pagination.pageIndex + 1]: nextCursor } : c);\n    });\n  }, [pagination, sorting, columnFilters, refreshCounter]);\n\n  // Reset to first page when filters change\n  React.useEffect(() => {\n    setPagination(pagination => ({ ...pagination, pageIndex: 0 }));\n    setCursors({});\n  }, [columnFilters, sorting, pagination.pageSize]);\n\n  // Refresh the users when the global filter changes. Delay to prevent unnecessary re-renders.\n  React.useEffect(() => {\n    const timer = setTimeout(() => {\n      setRefreshCounter(x => x + 1);\n    }, 3_000);\n    return () => clearTimeout(timer);\n  }, [globalFilter]);\n\n  return <DataTableBase\n    columns={columns}\n    data={data}\n    toolbarRender={toolbarRender}\n    sorting={sorting}\n    setSorting={setSorting}\n    pagination={pagination}\n    setPagination={setPagination}\n    columnFilters={columnFilters}\n    setColumnFilters={setColumnFilters}\n    rowCount={pagination.pageSize * Object.keys(cursors).length + (cursors[pagination.pageIndex + 1] ? 1 : 0)}\n    globalFilter={globalFilter}\n    setGlobalFilter={setGlobalFilter}\n    defaultColumnFilters={defaultColumnFilters}\n    defaultSorting={defaultSorting}\n    defaultVisibility={defaultVisibility}\n    showDefaultToolbar={showDefaultToolbar}\n    onRowClick={onRowClick}\n  />;\n}\n\ntype DataTableBaseProps<TData, TValue> = DataTableProps<TData, TValue> & {\n  sorting?: SortingState,\n  setSorting?: OnChangeFn<SortingState>,\n  pagination?: PaginationState,\n  setPagination?: OnChangeFn<PaginationState>,\n  rowCount?: number,\n  columnFilters?: ColumnFiltersState,\n  setColumnFilters?: OnChangeFn<ColumnFiltersState>,\n  manualPagination?: boolean,\n  manualFiltering?: boolean,\n  globalFilter?: any,\n  setGlobalFilter?: OnChangeFn<any>,\n}\n\nfunction DataTableBase<TData, TValue>({\n  columns,\n  data,\n  toolbarRender,\n  defaultVisibility,\n  sorting,\n  setSorting,\n  defaultColumnFilters,\n  defaultSorting,\n  pagination,\n  setPagination,\n  rowCount,\n  columnFilters,\n  setColumnFilters,\n  globalFilter,\n  setGlobalFilter,\n  manualPagination = true,\n  manualFiltering = true,\n  showDefaultToolbar = true,\n  onRowClick,\n}: DataTableBaseProps<TData, TValue>) {\n  const [rowSelection, setRowSelection] = React.useState({});\n  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(defaultVisibility || {});\n\n  const table: TableType<TData> = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n      globalFilter: globalFilter,\n    },\n    enableRowSelection: true,\n    onGlobalFilterChange: setGlobalFilter,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getColumnCanGlobalFilter: (c) => c.columnDef.enableGlobalFilter ?? GlobalFiltering.getDefaultOptions!(table).getColumnCanGlobalFilter!(c),\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n    autoResetAll: false,\n    manualPagination,\n    manualFiltering,\n    rowCount,\n  });\n\n  return <TableView\n    table={table}\n    columns={columns}\n    toolbarRender={toolbarRender}\n    showDefaultToolbar={showDefaultToolbar}\n    defaultColumnFilters={defaultColumnFilters}\n    defaultSorting={defaultSorting}\n    onRowClick={onRowClick}\n  />;\n}\n"],"mappings":"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","names":["pagination"]}

package/dist/esm/components/data-table/faceted-filter.js

@@ -0,0 +1,117 @@
+// src/components/data-table/faceted-filter.tsx
+import { CheckIcon } from "@radix-ui/react-icons";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator
+} from "../ui/command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { Separator } from "../ui/separator.js";
+import { ListFilter } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DataTableFacetedFilter({
+  column,
+  title,
+  options
+}) {
+  const facets = column?.getFacetedUniqueValues();
+  const selectedValues = new Set(column?.getFilterValue());
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "h-8 border", children: [
+      /* @__PURE__ */ jsx(ListFilter, { className: "mr-2 h-4 w-4 text-gray-500" }),
+      title,
+      selectedValues.size > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-2 h-4" }),
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: "secondary",
+            className: "rounded-sm px-1 font-normal lg:hidden",
+            children: selectedValues.size
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "hidden space-x-1 lg:flex", children: selectedValues.size > 2 ? /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            variant: "secondary",
+            className: "rounded-sm px-1 font-normal",
+            children: [
+              selectedValues.size,
+              " selected"
+            ]
+          }
+        ) : options.filter((option) => selectedValues.has(option.value)).map((option) => /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: "secondary",
+            className: "rounded-sm px-1 font-normal",
+            children: option.label
+          },
+          option.value
+        )) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[200px] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: title }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
+        /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
+          const isSelected = selectedValues.has(option.value);
+          return /* @__PURE__ */ jsxs(
+            CommandItem,
+            {
+              onSelect: () => {
+                if (isSelected) {
+                  selectedValues.delete(option.value);
+                } else {
+                  selectedValues.add(option.value);
+                }
+                const filterValues = Array.from(selectedValues);
+                column?.setFilterValue(
+                  filterValues.length ? filterValues : void 0
+                );
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                      isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                    ),
+                    children: /* @__PURE__ */ jsx(CheckIcon, { className: cn("h-4 w-4") })
+                  }
+                ),
+                option.icon && /* @__PURE__ */ jsx(option.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
+                /* @__PURE__ */ jsx("span", { children: option.label })
+              ]
+            },
+            option.value
+          );
+        }) }),
+        selectedValues.size > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(CommandSeparator, {}),
+          /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx(
+            CommandItem,
+            {
+              onSelect: () => column?.setFilterValue(void 0),
+              className: "justify-center text-center",
+              children: "Clear filters"
+            }
+          ) })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  DataTableFacetedFilter
+};
+//# sourceMappingURL=faceted-filter.js.map

package/dist/esm/components/data-table/faceted-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/data-table/faceted-filter.tsx"],"sourcesContent":["import { CheckIcon } from \"@radix-ui/react-icons\";\nimport { Badge } from \"../ui/badge\";\nimport { Button } from \"../ui/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"../ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/popover\";\nimport { Separator } from \"../ui/separator\";\nimport { Column } from \"@tanstack/react-table\";\nimport { ListFilter } from \"lucide-react\";\nimport React from \"react\";\nimport { cn } from \"../../lib/utils\";\n\ntype DataTableFacetedFilterProps<TData, TValue> = {\n  column?: Column<TData, TValue>,\n  title?: string,\n  options: {\n    label: string,\n    value: string,\n    icon?: React.ComponentType<{ className?: string }>,\n  }[],\n}\n\nexport function DataTableFacetedFilter<TData, TValue>({\n  column,\n  title,\n  options,\n}: DataTableFacetedFilterProps<TData, TValue>) {\n  const facets = column?.getFacetedUniqueValues();\n  const selectedValues = new Set(column?.getFilterValue() as string[]);\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\" size=\"sm\" className=\"h-8 border\">\n          <ListFilter className=\"mr-2 h-4 w-4 text-gray-500\" />\n          {title}\n          {selectedValues.size > 0 && (\n            <>\n              <Separator orientation=\"vertical\" className=\"mx-2 h-4\" />\n              <Badge\n                variant=\"secondary\"\n                className=\"rounded-sm px-1 font-normal lg:hidden\"\n              >\n                {selectedValues.size}\n              </Badge>\n              <div className=\"hidden space-x-1 lg:flex\">\n                {selectedValues.size > 2 ? (\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"rounded-sm px-1 font-normal\"\n                  >\n                    {selectedValues.size} selected\n                  </Badge>\n                ) : (\n                  options\n                    .filter((option) => selectedValues.has(option.value))\n                    .map((option) => (\n                      <Badge\n                        variant=\"secondary\"\n                        key={option.value}\n                        className=\"rounded-sm px-1 font-normal\"\n                      >\n                        {option.label}\n                      </Badge>\n                    ))\n                )}\n              </div>\n            </>\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n        <Command>\n          <CommandInput placeholder={title} />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              {options.map((option) => {\n                const isSelected = selectedValues.has(option.value);\n                return (\n                  <CommandItem\n                    key={option.value}\n                    onSelect={() => {\n                      if (isSelected) {\n                        selectedValues.delete(option.value);\n                      } else {\n                        selectedValues.add(option.value);\n                      }\n                      const filterValues = Array.from(selectedValues);\n                      column?.setFilterValue(\n                        filterValues.length ? filterValues : undefined\n                      );\n                    }}\n                  >\n                    <div\n                      className={cn(\n                        \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\n                        isSelected\n                          ? \"bg-primary text-primary-foreground\"\n                          : \"opacity-50 [&_svg]:invisible\"\n                      )}\n                    >\n                      <CheckIcon className={cn(\"h-4 w-4\")} />\n                    </div>\n                    {option.icon && (\n                      <option.icon className=\"mr-2 h-4 w-4 text-muted-foreground\" />\n                    )}\n                    <span>{option.label}</span>\n                  </CommandItem>\n                );\n              })}\n            </CommandGroup>\n            {selectedValues.size > 0 && (\n              <>\n                <CommandSeparator />\n                <CommandGroup>\n                  <CommandItem\n                    onSelect={() => column?.setFilterValue(undefined)}\n                    className=\"justify-center text-center\"\n                  >\n                    Clear filters\n                  </CommandItem>\n                </CommandGroup>\n              </>\n            )}\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";AAAA,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,iBAAiB;AAE1B,SAAS,kBAAkB;AAE3B,SAAS,UAAU;AAwBT,SAGE,UAHF,KAaQ,YAbR;AAZH,SAAS,uBAAsC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AACF,GAA+C;AAC7C,QAAM,SAAS,QAAQ,uBAAuB;AAC9C,QAAM,iBAAiB,IAAI,IAAI,QAAQ,eAAe,CAAa;AAEnE,SACE,qBAAC,WACC;AAAA,wBAAC,kBAAe,SAAO,MACrB,+BAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,WAAU,cAC5C;AAAA,0BAAC,cAAW,WAAU,8BAA6B;AAAA,MAClD;AAAA,MACA,eAAe,OAAO,KACrB,iCACE;AAAA,4BAAC,aAAU,aAAY,YAAW,WAAU,YAAW;AAAA,QACvD;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAU;AAAA,YAET,yBAAe;AAAA;AAAA,QAClB;AAAA,QACA,oBAAC,SAAI,WAAU,4BACZ,yBAAe,OAAO,IACrB;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAU;AAAA,YAET;AAAA,6BAAe;AAAA,cAAK;AAAA;AAAA;AAAA,QACvB,IAEA,QACG,OAAO,CAAC,WAAW,eAAe,IAAI,OAAO,KAAK,CAAC,EACnD,IAAI,CAAC,WACJ;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YAER,WAAU;AAAA,YAET,iBAAO;AAAA;AAAA,UAHH,OAAO;AAAA,QAId,CACD,GAEP;AAAA,SACF;AAAA,OAEJ,GACF;AAAA,IACA,oBAAC,kBAAe,WAAU,iBAAgB,OAAM,SAC9C,+BAAC,WACC;AAAA,0BAAC,gBAAa,aAAa,OAAO;AAAA,MAClC,qBAAC,eACC;AAAA,4BAAC,gBAAa,+BAAiB;AAAA,QAC/B,oBAAC,gBACE,kBAAQ,IAAI,CAAC,WAAW;AACvB,gBAAM,aAAa,eAAe,IAAI,OAAO,KAAK;AAClD,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,UAAU,MAAM;AACd,oBAAI,YAAY;AACd,iCAAe,OAAO,OAAO,KAAK;AAAA,gBACpC,OAAO;AACL,iCAAe,IAAI,OAAO,KAAK;AAAA,gBACjC;AACA,sBAAM,eAAe,MAAM,KAAK,cAAc;AAC9C,wBAAQ;AAAA,kBACN,aAAa,SAAS,eAAe;AAAA,gBACvC;AAAA,cACF;AAAA,cAEA;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW;AAAA,sBACT;AAAA,sBACA,aACI,uCACA;AAAA,oBACN;AAAA,oBAEA,8BAAC,aAAU,WAAW,GAAG,SAAS,GAAG;AAAA;AAAA,gBACvC;AAAA,gBACC,OAAO,QACN,oBAAC,OAAO,MAAP,EAAY,WAAU,sCAAqC;AAAA,gBAE9D,oBAAC,UAAM,iBAAO,OAAM;AAAA;AAAA;AAAA,YA1Bf,OAAO;AAAA,UA2Bd;AAAA,QAEJ,CAAC,GACH;AAAA,QACC,eAAe,OAAO,KACrB,iCACE;AAAA,8BAAC,oBAAiB;AAAA,UAClB,oBAAC,gBACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,MAAM,QAAQ,eAAe,MAAS;AAAA,cAChD,WAAU;AAAA,cACX;AAAA;AAAA,UAED,GACF;AAAA,WACF;AAAA,SAEJ;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,11 @@
+// src/components/data-table/index.tsx
+export * from "./cells.js";
+export * from "./column-header.js";
+export * from "./data-table.js";
+export * from "./faceted-filter.js";
+export * from "./pagination.js";
+export * from "./toolbar-items.js";
+export * from "./toolbar.js";
+export * from "./utils.js";
+export * from "./view-options.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/data-table/index.tsx"],"sourcesContent":["export * from \"./cells\";\nexport * from \"./column-header\";\nexport * from \"./data-table\";\nexport * from \"./faceted-filter\";\nexport * from \"./pagination\";\nexport * from \"./toolbar-items\";\nexport * from \"./toolbar\";\nexport * from \"./utils\";\nexport * from \"./view-options\";\n"],"mappings":";AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}