@hexclave/ui 1.0.0

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

@@ -0,0 +1,107 @@
+'use client';
+
+import React, { createElement, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DotsHorizontalIcon } from "@radix-ui/react-icons";
+import { Avatar, AvatarFallback, AvatarImage, Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, SimpleTooltip, cn } from "../../index.js";
+
+//#region src/components/data-table/cells.tsx
+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) setIsOverflowing(textRef.current.scrollWidth > textRef.current.clientWidth);
+		};
+		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))
+	});
+}
+
+//#endregion
+export { ActionCell, AvatarCell, BadgeCell, DateCell, TextCell };
+//# sourceMappingURL=cells.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cells.js","names":[],"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":";;;;;;;;AAMA,SAAgB,SAAS,OAA6E;CACpG,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;CACzD,MAAM,gBAAgB;AAEtB,iBAAgB;EACd,MAAM,sBAAsB;AAC1B,OAAI,QAAQ,QAEV,kBADsB,QAAQ,QAAQ,cAAc,QAAQ,QAAQ,YACrC;;AAInC,iBAAe;AACf,SAAO,iBAAiB,UAAU,cAAc;AAChD,eAAa;AACX,UAAO,oBAAoB,UAAU,cAAc;;IAEpD,EAAE,CAAC;AAEN,QACE,oBAAC;EAAI,WAAU;EAAW,OAAO,EAAE,UAAU,MAAM,MAAM;YACvD,qBAAC;GAAI,WAAU;cACb,oBAAC;IAAI,WAAW;IAAe,KAAK;cACjC,gBACC,oBAAC;KAAc,SAAS,MAAM;eAC5B,oBAAC;MAAI,WAAW;gBACb,MAAM;OACH;MACQ,GACd,MAAM;KACN,EACL,MAAM,QAAQ,oBAAC,mBAAK,MAAM,OAAW;IAClC;GACF;;AAIV,SAAgB,WAAW,OAA4C;AACrE,QACE,qBAAC;EAAO,WAAU;aAChB,oBAAC,eAAY,KAAK,MAAM,MAAO,EAC/B,oBAAC,4BAAgB,MAAM,WAA0B;GAC1C;;AAIb,SAAgB,SAAS,OAAkD;CACzE,MAAM,SAAS,CAAC,CAAC,MAAM,oBAAoB,IAAI,sBAAK,IAAI,MAAM,EAAC,6BAAY,IAAI,MAAM,EAAC,aAAa,GAAG,MAAM,iBAAiB,CAAC,GAAG,MAAM;CACvI,MAAM,aAAa,MAAM,KAAK,mBAAmB,EAAE,EAAE;EAAE,MAAM;EAAW,OAAO;EAAW,KAAK;EAAW,MAAM;EAAW,QAAQ;EAAW,CAAC;AAC/I,QACE,oBAAC;EAAS,MAAM;YACb,SAAS,UAAU;GACX;;AAYf,SAAgB,WAAW,OAGxB;AACD,QACE,qBAAC,2BACC,oBAAC;EAAoB;YACnB,qBAAC;GACC,SAAQ;GACR,WAAW,GACT,+CACA,MAAM,aAAa,YACpB;cAED,oBAAC,sBAAmB,WAAU,YAAY,EAC1C,oBAAC;IAAK,WAAU;cAAU;KAAgB;IACnC;GACW,EACtB,oBAAC;EAAoB,OAAM;EAAM,WAAU;YACxC,MAAM,OAAO,KAAK,MAAM,UAAU;AACjC,OAAI,SAAS,IACX,QAAO,oBAAC,2BAA2B,MAAS;GAG9C,MAAM,gBAAgB;IACpB,SAAS,KAAK;IACd,WAAW,GAAG,KAAK,SAAS,qBAAqB,GAAG;IACpD,UAAU,KAAK;IAChB;GAED,MAAM,WACJ,8BAAC;IAAiB,GAAI;IAAe,KAAK;MACvC,KAAK,KACW;AAGrB,OAAI,KAAK,YAAY,KAAK,gBACxB,QACE,oBAAC;IAAc,SAAS,KAAK;cAC1B,MAAM,aAAa,UAAU,EAC5B,WAAW,GAAG,cAAc,WAAW,gCAAgC,EACxE,CAAC;MAH+C,MAInC;AAIpB,UAAO;IACP;GACkB,IACT;;AAInB,SAAgB,UAAU,OAA4C;AACpE,QACE,oBAAC;EAAI,WAAU;YACZ,MAAM,OAAO,KAAK,OAAO,UACxB,oBAAC;GAAkB,SAAQ;aAAa;KAA5B,MAA0C,CACtD;GACE"}

package/dist/esm/components/data-table/column-header.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Column } from "@tanstack/react-table";
+
+//#region src/components/data-table/column-header.d.ts
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  columnTitle: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function DataTableColumnHeader<TData, TValue>({
+  column,
+  columnTitle,
+  className
+}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DataTableColumnHeader };
+//# sourceMappingURL=column-header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"column-header.d.ts","names":[],"sources":["../../../../src/components/data-table/column-header.tsx"],"mappings":";;;;KAMK,0BAAA;EACH,MAAA,EAAQ,MAAA,CAAO,KAAA,EAAO,MAAA;EACtB,WAAA,EAAa,KAAA,CAAM,SAAA;AAAA,IACjB,KAAA,CAAM,cAAA,CAAe,cAAA;AAAA,iBAaT,qBAAA,eAAA,CAAA;EACd,MAAA;EACA,WAAA;EACA;AAAA,GACC,0BAAA,CAA2B,KAAA,EAAO,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,46 @@
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { cn } from "../../lib/utils.js";
+
+//#region src/components/data-table/column-header.tsx
+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"
+			})]
+		})] })
+	});
+}
+
+//#endregion
+export { DataTableColumnHeader };
+//# sourceMappingURL=column-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"column-header.js","names":[],"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":";;;;;;;AAWA,SAAS,KAAK,OAA6E;AACzF,QACE,oBAAC;EAAiB,SAAS,MAAM;YAC/B,qBAAC;GAAI,WAAU;cACb,oBAAC,MAAM,QAAK,WAAU,8CAA8C,EACnE,MAAM;IACH;GACW;;AAIvB,SAAgB,sBAAqC,EACnD,QACA,aACA,aAC4C;AAC5C,QACE,oBAAC;EAAI,WAAW,GAAG,+BAA+B,UAAU;YAC1D,qBAAC,2BACC,oBAAC;GAAoB;aACnB,qBAAC;IACC,SAAQ;IACR,MAAK;IACL,WAAW,GAAG,yCAAyC,CAAC,OAAO,YAAY,IAAI,sBAAsB;eAErG,oBAAC,oBAAM,cAAmB,EACzB,OAAO,aAAa,KAAK,SACxB,oBAAC,aAAU,WAAU,iBAAiB,GACpC,OAAO,aAAa,KAAK,QAC3B,oBAAC,WAAQ,WAAU,iBAAiB,GAClC;KACG;IACW,EACtB,qBAAC;GAAoB,OAAM;GAAQ,WAAU;cAC3C,oBAAC;IAAK,MAAM;IAAS,eAAe,OAAO,cAAc,MAAM;cAAE;KAAU,EAC3E,oBAAC;IAAK,MAAM;IAAW,eAAe,OAAO,cAAc,KAAK;cAAE;KAAW;IACzD,IACT;GACX"}

package/dist/esm/components/data-table/data-table.d.ts

@@ -0,0 +1,59 @@
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ColumnDef, ColumnFiltersState, SortingState, Table, VisibilityState } from "@tanstack/react-table";
+
+//#region src/components/data-table/data-table.d.ts
+declare function TableView<TData, TValue>(props: {
+  table: Table<TData>;
+  columns: ColumnDef<TData, TValue>[];
+  toolbarRender?: (table: Table<TData>) => React.ReactNode;
+  showDefaultToolbar?: boolean;
+  defaultColumnFilters: ColumnFiltersState;
+  defaultSorting: SortingState;
+  onRowClick?: (row: TData) => void;
+}): react_jsx_runtime0.JSX.Element;
+type DataTableProps<TData, TValue> = {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  toolbarRender?: (table: Table<TData>) => React.ReactNode;
+  defaultVisibility?: VisibilityState;
+  defaultColumnFilters: ColumnFiltersState;
+  defaultSorting: SortingState;
+  showDefaultToolbar?: boolean;
+  onRowClick?: (row: TData) => void;
+};
+declare function DataTable<TData, TValue>({
+  columns,
+  data,
+  toolbarRender,
+  defaultVisibility,
+  defaultColumnFilters,
+  defaultSorting,
+  showDefaultToolbar,
+  onRowClick
+}: DataTableProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
+type DataTableManualPaginationProps<TData, TValue> = DataTableProps<TData, TValue> & {
+  onUpdate: (options: {
+    cursor: string;
+    limit: number;
+    sorting: SortingState;
+    columnFilters: ColumnFiltersState;
+    globalFilters: any;
+  }) => Promise<{
+    nextCursor: string | null;
+  }>;
+};
+declare function DataTableManualPagination<TData, TValue>({
+  columns,
+  data,
+  toolbarRender,
+  defaultVisibility,
+  defaultColumnFilters,
+  defaultSorting,
+  onRowClick,
+  onUpdate,
+  showDefaultToolbar
+}: DataTableManualPaginationProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DataTable, DataTableManualPagination, TableView };
+//# sourceMappingURL=data-table.d.ts.map

package/dist/esm/components/data-table/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","names":[],"sources":["../../../../src/components/data-table/data-table.tsx"],"mappings":";;;;;iBAiCgB,SAAA,eAAA,CAAyB,KAAA;EACvC,KAAA,EAAO,KAAA,CAAU,KAAA;EACjB,OAAA,EAAS,SAAA,CAAU,KAAA,EAAO,MAAA;EAC1B,aAAA,IAAiB,KAAA,EAAO,KAAA,CAAU,KAAA,MAAW,KAAA,CAAM,SAAA;EACnD,kBAAA;EACA,oBAAA,EAAsB,kBAAA;EACtB,cAAA,EAAgB,YAAA;EAChB,UAAA,IAAc,GAAA,EAAK,KAAA;AAAA,IACpB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAuEI,cAAA;EACH,OAAA,EAAS,SAAA,CAAU,KAAA,EAAO,MAAA;EAC1B,IAAA,EAAM,KAAA;EACN,aAAA,IAAiB,KAAA,EAAO,KAAA,CAAU,KAAA,MAAW,KAAA,CAAM,SAAA;EACnD,iBAAA,GAAoB,eAAA;EACpB,oBAAA,EAAsB,kBAAA;EACtB,cAAA,EAAgB,YAAA;EAChB,kBAAA;EACA,UAAA,IAAc,GAAA,EAAK,KAAA;AAAA;AAAA,iBAGL,SAAA,eAAA,CAAA;EACd,OAAA;EACA,IAAA;EACA,aAAA;EACA,iBAAA;EACA,oBAAA;EACA,cAAA;EACA,kBAAA;EACA;AAAA,GACC,cAAA,CAAe,KAAA,EAAO,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KA+B3B,8BAAA,kBAAgD,cAAA,CAAe,KAAA,EAAO,MAAA;EACzE,QAAA,GAAW,OAAA;IACT,MAAA;IACA,KAAA;IACA,OAAA,EAAS,YAAA;IACT,aAAA,EAAe,kBAAA;IACf,aAAA;EAAA,MACI,OAAA;IAAU,UAAA;EAAA;AAAA;AAAA,iBAGF,yBAAA,eAAA,CAAA;EACd,OAAA;EACA,IAAA;EACA,aAAA;EACA,iBAAA;EACA,oBAAA;EACA,cAAA;EACA,UAAA;EACA,QAAA;EACA;AAAA,GACC,8BAAA,CAA+B,KAAA,EAAO,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,188 @@
+"use client";
+
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { runAsynchronouslyWithAlert } from "@hexclave/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 { DataTablePagination } from "./pagination.js";
+import { DataTableToolbar } from "./toolbar.js";
+
+//#region src/components/data-table/data-table.tsx
+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((pagination) => ({
+			...pagination,
+			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
+	});
+}
+
+//#endregion
+export { DataTable, DataTableManualPagination, TableView };
+//# sourceMappingURL=data-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","names":[],"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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"}

package/dist/esm/components/data-table/faceted-filter.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Column } from "@tanstack/react-table";
+
+//#region src/components/data-table/faceted-filter.d.ts
+type DataTableFacetedFilterProps<TData, TValue> = {
+  column?: Column<TData, TValue>;
+  title?: string;
+  options: {
+    label: string;
+    value: string;
+    icon?: React.ComponentType<{
+      className?: string;
+    }>;
+  }[];
+};
+declare function DataTableFacetedFilter<TData, TValue>({
+  column,
+  title,
+  options
+}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DataTableFacetedFilter };
+//# sourceMappingURL=faceted-filter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"faceted-filter.d.ts","names":[],"sources":["../../../../src/components/data-table/faceted-filter.tsx"],"mappings":";;;;;KAmBK,2BAAA;EACH,MAAA,GAAS,MAAA,CAAO,KAAA,EAAO,MAAA;EACvB,KAAA;EACA,OAAA;IACE,KAAA;IACA,KAAA;IACA,IAAA,GAAO,KAAA,CAAM,aAAA;MAAgB,SAAA;IAAA;EAAA;AAAA;AAAA,iBAIjB,sBAAA,eAAA,CAAA;EACd,MAAA;EACA,KAAA;EACA;AAAA,GACC,2BAAA,CAA4B,KAAA,EAAO,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,85 @@
+import { ListFilter } from "lucide-react";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { Button } from "../ui/button.js";
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../ui/badge.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";
+
+//#region src/components/data-table/faceted-filter.tsx
+function DataTableFacetedFilter({ column, title, options }) {
+	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"
+			}) })] })
+		] })] })
+	})] });
+}
+
+//#endregion
+export { DataTableFacetedFilter };
+//# sourceMappingURL=faceted-filter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"faceted-filter.js","names":[],"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":";;;;;;;;;;;;AA6BA,SAAgB,uBAAsC,EACpD,QACA,OACA,WAC6C;AAC9B,SAAQ,wBAAwB;CAC/C,MAAM,iBAAiB,IAAI,IAAI,QAAQ,gBAAgB,CAAa;AAEpE,QACE,qBAAC,sBACC,oBAAC;EAAe;YACd,qBAAC;GAAO,SAAQ;GAAU,MAAK;GAAK,WAAU;;IAC5C,oBAAC,cAAW,WAAU,+BAA+B;IACpD;IACA,eAAe,OAAO,KACrB;KACE,oBAAC;MAAU,aAAY;MAAW,WAAU;OAAa;KACzD,oBAAC;MACC,SAAQ;MACR,WAAU;gBAET,eAAe;OACV;KACR,oBAAC;MAAI,WAAU;gBACZ,eAAe,OAAO,IACrB,qBAAC;OACC,SAAQ;OACR,WAAU;kBAET,eAAe,MAAK;QACf,GAER,QACG,QAAQ,WAAW,eAAe,IAAI,OAAO,MAAM,CAAC,CACpD,KAAK,WACJ,oBAAC;OACC,SAAQ;OAER,WAAU;iBAET,OAAO;SAHH,OAAO,MAIN,CACR;OAEF;QACL;;IAEE;GACM,EACjB,oBAAC;EAAe,WAAU;EAAgB,OAAM;YAC9C,qBAAC,sBACC,oBAAC,gBAAa,aAAa,QAAS,EACpC,qBAAC;GACC,oBAAC,0BAAa,sBAAgC;GAC9C,oBAAC,0BACE,QAAQ,KAAK,WAAW;IACvB,MAAM,aAAa,eAAe,IAAI,OAAO,MAAM;AACnD,WACE,qBAAC;KAEC,gBAAgB;AACd,UAAI,WACF,gBAAe,OAAO,OAAO,MAAM;UAEnC,gBAAe,IAAI,OAAO,MAAM;MAElC,MAAM,eAAe,MAAM,KAAK,eAAe;AAC/C,cAAQ,eACN,aAAa,SAAS,eAAe,OACtC;;;MAGH,oBAAC;OACC,WAAW,GACT,kFACA,aACI,uCACA,+BACL;iBAED,oBAAC,aAAU,WAAW,GAAG,UAAU,GAAI;QACnC;MACL,OAAO,QACN,oBAAC,OAAO,QAAK,WAAU,uCAAuC;MAEhE,oBAAC,oBAAM,OAAO,QAAa;;OA1BtB,OAAO,MA2BA;KAEhB,GACW;GACd,eAAe,OAAO,KACrB,4CACE,oBAAC,qBAAmB,EACpB,oBAAC,0BACC,oBAAC;IACC,gBAAgB,QAAQ,eAAe,OAAU;IACjD,WAAU;cACX;KAEa,GACD,IACd;MAEO,IACN;GACK,IACT"}

package/dist/esm/components/data-table/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./cells";
+export * from "./column-header";
+export * from "./data-table";
+export * from "./faceted-filter";
+export * from "./pagination";
+export * from "./toolbar-items";
+export * from "./toolbar";
+export * from "./utils";
+export * from "./view-options";

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

@@ -0,0 +1,19 @@
+export * from "./pagination.js"
+
+export * from "./toolbar.js"
+
+export * from "./cells.js"
+
+export * from "./column-header.js"
+
+export * from "./data-table.js"
+
+export * from "./faceted-filter.js"
+
+export * from "./toolbar-items.js"
+
+export * from "./utils.js"
+
+export * from "./view-options.js"
+
+export {  };