@hexclave/ui 1.0.0

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

@@ -0,0 +1,193 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../../chunk-BE-pF4vm.js');
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _stackframe_stack_shared_dist_utils_promises = require("@hexclave/shared/dist/utils/promises");
+let ___ui_table_js = require("../ui/table.js");
+let _tanstack_react_table = require("@tanstack/react-table");
+let __pagination_js = require("./pagination.js");
+let __toolbar_js = require("./toolbar.js");
+
+//#region src/components/data-table/data-table.tsx
+function TableView(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__toolbar_js.DataTableToolbar, {
+				table: props.table,
+				toolbarRender: props.toolbarRender,
+				showDefaultToolbar: props.showDefaultToolbar,
+				defaultColumnFilters: props.defaultColumnFilters,
+				defaultSorting: props.defaultSorting
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "rounded-md border",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(___ui_table_js.Table, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_table_js.TableHeader, { children: props.table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_table_js.TableRow, { children: headerGroup.headers.map((header) => {
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_table_js.TableHead, {
+						colSpan: header.colSpan,
+						children: header.isPlaceholder ? null : (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+					}, header.id);
+				}) }, headerGroup.id)) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_table_js.TableBody, { children: props.table.getRowModel().rows.length ? props.table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_table_js.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__ */ (0, react_jsx_runtime.jsx)(___ui_table_js.TableCell, { children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+				}, row.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_table_js.TableRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_table_js.TableCell, {
+					colSpan: props.columns.length,
+					className: "h-24 text-center",
+					children: "No results."
+				}) }) })] })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pagination_js.DataTablePagination, { table: props.table })
+		]
+	});
+}
+function DataTable({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, showDefaultToolbar = true, onRowClick }) {
+	const [sorting, setSorting] = react.default.useState(defaultSorting);
+	const [columnFilters, setColumnFilters] = react.default.useState(defaultColumnFilters);
+	const [pagination, setPagination] = react.default.useState({
+		pageIndex: 0,
+		pageSize: 10
+	});
+	const [globalFilter, setGlobalFilter] = react.default.useState();
+	return /* @__PURE__ */ (0, react_jsx_runtime.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.default.useState(defaultSorting);
+	const [pagination, setPagination] = react.default.useState({
+		pageIndex: 0,
+		pageSize: 10
+	});
+	const [cursors, setCursors] = react.default.useState({});
+	const [columnFilters, setColumnFilters] = react.default.useState(defaultColumnFilters);
+	const [globalFilter, setGlobalFilter] = react.default.useState();
+	const [refreshCounter, setRefreshCounter] = react.default.useState(0);
+	react.default.useEffect(() => {
+		(0, _stackframe_stack_shared_dist_utils_promises.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.default.useEffect(() => {
+		setPagination((pagination) => ({
+			...pagination,
+			pageIndex: 0
+		}));
+		setCursors({});
+	}, [
+		columnFilters,
+		sorting,
+		pagination.pageSize
+	]);
+	react.default.useEffect(() => {
+		const timer = setTimeout(() => {
+			setRefreshCounter((x) => x + 1);
+		}, 3e3);
+		return () => clearTimeout(timer);
+	}, [globalFilter]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.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.default.useState({});
+	const [columnVisibility, setColumnVisibility] = react.default.useState(defaultVisibility || {});
+	const table = (0, _tanstack_react_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 ?? _tanstack_react_table.GlobalFiltering.getDefaultOptions(table).getColumnCanGlobalFilter(c),
+		getCoreRowModel: (0, _tanstack_react_table.getCoreRowModel)(),
+		getFilteredRowModel: (0, _tanstack_react_table.getFilteredRowModel)(),
+		getPaginationRowModel: (0, _tanstack_react_table.getPaginationRowModel)(),
+		getSortedRowModel: (0, _tanstack_react_table.getSortedRowModel)(),
+		getFacetedRowModel: (0, _tanstack_react_table.getFacetedRowModel)(),
+		getFacetedUniqueValues: (0, _tanstack_react_table.getFacetedUniqueValues)(),
+		autoResetAll: false,
+		manualPagination,
+		manualFiltering,
+		rowCount
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableView, {
+		table,
+		columns,
+		toolbarRender,
+		showDefaultToolbar,
+		defaultColumnFilters,
+		defaultSorting,
+		onRowClick
+	});
+}
+
+//#endregion
+exports.DataTable = DataTable;
+exports.DataTableManualPagination = DataTableManualPagination;
+exports.TableView = TableView;
+//# sourceMappingURL=data-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","names":["DataTableToolbar","Table","TableHeader","TableRow","TableHead","TableBody","TableCell","DataTablePagination","React","GlobalFiltering"],"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/components/data-table/faceted-filter.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+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/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/components/data-table/faceted-filter.js

@@ -0,0 +1,88 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../../chunk-BE-pF4vm.js');
+let lucide_react = require("lucide-react");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_icons = require("@radix-ui/react-icons");
+let ___ui_button_js = require("../ui/button.js");
+let ______lib_utils_js = require("../../lib/utils.js");
+let ___ui_badge_js = require("../ui/badge.js");
+let ___ui_command_js = require("../ui/command.js");
+let ___ui_popover_js = require("../ui/popover.js");
+let ___ui_separator_js = require("../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__ */ (0, react_jsx_runtime.jsxs)(___ui_popover_js.Popover, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_popover_js.PopoverTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(___ui_button_js.Button, {
+			variant: "outline",
+			size: "sm",
+			className: "h-8 border",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ListFilter, { className: "mr-2 h-4 w-4 text-gray-500" }),
+				title,
+				selectedValues.size > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_separator_js.Separator, {
+						orientation: "vertical",
+						className: "mx-2 h-4"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_badge_js.Badge, {
+						variant: "secondary",
+						className: "rounded-sm px-1 font-normal lg:hidden",
+						children: selectedValues.size
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "hidden space-x-1 lg:flex",
+						children: selectedValues.size > 2 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(___ui_badge_js.Badge, {
+							variant: "secondary",
+							className: "rounded-sm px-1 font-normal",
+							children: [selectedValues.size, " selected"]
+						}) : options.filter((option) => selectedValues.has(option.value)).map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_badge_js.Badge, {
+							variant: "secondary",
+							className: "rounded-sm px-1 font-normal",
+							children: option.label
+						}, option.value))
+					})
+				] })
+			]
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_popover_js.PopoverContent, {
+		className: "w-[200px] p-0",
+		align: "start",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(___ui_command_js.Command, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_command_js.CommandInput, { placeholder: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(___ui_command_js.CommandList, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_command_js.CommandEmpty, { children: "No results found." }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_command_js.CommandGroup, { children: options.map((option) => {
+				const isSelected = selectedValues.has(option.value);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(___ui_command_js.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__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, ______lib_utils_js.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__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_icons.CheckIcon, { className: (0, ______lib_utils_js.cn)("h-4 w-4") })
+						}),
+						option.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(option.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: option.label })
+					]
+				}, option.value);
+			}) }),
+			selectedValues.size > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_command_js.CommandSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_command_js.CommandGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_command_js.CommandItem, {
+				onSelect: () => column?.setFilterValue(void 0),
+				className: "justify-center text-center",
+				children: "Clear filters"
+			}) })] })
+		] })] })
+	})] });
+}
+
+//#endregion
+exports.DataTableFacetedFilter = DataTableFacetedFilter;
+//# sourceMappingURL=faceted-filter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"faceted-filter.js","names":["Popover","PopoverTrigger","Button","ListFilter","Separator","Badge","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","CheckIcon","CommandSeparator"],"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,4CAACA,uCACC,2CAACC;EAAe;YACd,4CAACC;GAAO,SAAQ;GAAU,MAAK;GAAK,WAAU;;IAC5C,2CAACC,2BAAW,WAAU,+BAA+B;IACpD;IACA,eAAe,OAAO,KACrB;KACE,2CAACC;MAAU,aAAY;MAAW,WAAU;OAAa;KACzD,2CAACC;MACC,SAAQ;MACR,WAAU;gBAET,eAAe;OACV;KACR,2CAAC;MAAI,WAAU;gBACZ,eAAe,OAAO,IACrB,4CAACA;OACC,SAAQ;OACR,WAAU;kBAET,eAAe,MAAK;QACf,GAER,QACG,QAAQ,WAAW,eAAe,IAAI,OAAO,MAAM,CAAC,CACpD,KAAK,WACJ,2CAACA;OACC,SAAQ;OAER,WAAU;iBAET,OAAO;SAHH,OAAO,MAIN,CACR;OAEF;QACL;;IAEE;GACM,EACjB,2CAACC;EAAe,WAAU;EAAgB,OAAM;YAC9C,4CAACC,uCACC,2CAACC,iCAAa,aAAa,QAAS,EACpC,4CAACC;GACC,2CAACC,2CAAa,sBAAgC;GAC9C,2CAACC,2CACE,QAAQ,KAAK,WAAW;IACvB,MAAM,aAAa,eAAe,IAAI,OAAO,MAAM;AACnD,WACE,4CAACC;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,2CAAC;OACC,sCACE,kFACA,aACI,uCACA,+BACL;iBAED,2CAACC,mCAAU,sCAAc,UAAU,GAAI;QACnC;MACL,OAAO,QACN,2CAAC,OAAO,QAAK,WAAU,uCAAuC;MAEhE,2CAAC,oBAAM,OAAO,QAAa;;OA1BtB,OAAO,MA2BA;KAEhB,GACW;GACd,eAAe,OAAO,KACrB,qFACE,2CAACC,sCAAmB,EACpB,2CAACH,2CACC,2CAACC;IACC,gBAAgB,QAAQ,eAAe,OAAU;IACjD,WAAU;cACX;KAEa,GACD,IACd;MAEO,IACN;GACK,IACT"}

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

@@ -0,0 +1,10 @@
+import { ActionCell, AvatarCell, BadgeCell, DateCell, TextCell } from "./cells.js";
+import { DataTableColumnHeader } from "./column-header.js";
+import { DataTable, DataTableManualPagination, TableView } from "./data-table.js";
+import { DataTableFacetedFilter } from "./faceted-filter.js";
+import { DataTablePagination } from "./pagination.js";
+import { SearchToolbarItem } from "./toolbar-items.js";
+import { DataTableToolbar } from "./toolbar.js";
+import { arrayFilterFn, standardFilterFn } from "./utils.js";
+import { DataTableViewOptions } from "./view-options.js";
+export { ActionCell, AvatarCell, BadgeCell, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DataTableManualPagination, DataTablePagination, DataTableToolbar, DataTableViewOptions, DateCell, SearchToolbarItem, TableView, TextCell, arrayFilterFn, standardFilterFn };

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

@@ -0,0 +1,73 @@
+
+
+var __cells_js = require("./cells.js");
+Object.keys(__cells_js).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return __cells_js[k]; }
+  });
+});
+
+var __column_header_js = require("./column-header.js");
+Object.keys(__column_header_js).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return __column_header_js[k]; }
+  });
+});
+
+var __data_table_js = require("./data-table.js");
+Object.keys(__data_table_js).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return __data_table_js[k]; }
+  });
+});
+
+var __faceted_filter_js = require("./faceted-filter.js");
+Object.keys(__faceted_filter_js).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return __faceted_filter_js[k]; }
+  });
+});
+
+var __pagination_js = require("./pagination.js");
+Object.keys(__pagination_js).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return __pagination_js[k]; }
+  });
+});
+
+var __toolbar_items_js = require("./toolbar-items.js");
+Object.keys(__toolbar_items_js).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return __toolbar_items_js[k]; }
+  });
+});
+
+var __toolbar_js = require("./toolbar.js");
+Object.keys(__toolbar_js).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return __toolbar_js[k]; }
+  });
+});
+
+var __utils_js = require("./utils.js");
+Object.keys(__utils_js).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return __utils_js[k]; }
+  });
+});
+
+var __view_options_js = require("./view-options.js");
+Object.keys(__view_options_js).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return __view_options_js[k]; }
+  });
+});

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

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Table } from "@tanstack/react-table";
+
+//#region src/components/data-table/pagination.d.ts
+type DataTablePaginationProps<TData> = {
+  table: Table<TData>;
+};
+declare function DataTablePagination<TData>({
+  table
+}: DataTablePaginationProps<TData>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DataTablePagination };
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","names":[],"sources":["../../../src/components/data-table/pagination.tsx"],"mappings":";;;;KAWK,wBAAA;EACH,KAAA,EAAO,KAAA,CAAM,KAAA;AAAA;AAAA,iBAGC,mBAAA,OAAA,CAAA;EACd;AAAA,GACC,wBAAA,CAAyB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,78 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../../chunk-BE-pF4vm.js');
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_icons = require("@radix-ui/react-icons");
+let ___ui_button_js = require("../ui/button.js");
+let ___ui_select_js = require("../ui/select.js");
+
+//#region src/components/data-table/pagination.tsx
+function DataTablePagination({ table }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-between px-2 flex-col sm:flex-row gap-y-4 sm:gap-y-0",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex-1 text-sm text-muted-foreground",
+			children: table.getFilteredSelectedRowModel().rows.length !== 0 ? `${table.getFilteredSelectedRowModel().rows.length} of ${table.getFilteredRowModel().rows.length} row(s) selected` : void 0
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-x-6 lg:gap-x-8 flex-col sm:flex-row gap-y-4 sm:gap-y-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center space-x-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-sm font-medium",
+					children: "Rows per page"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(___ui_select_js.Select, {
+					value: `${table.getState().pagination.pageSize}`,
+					onValueChange: (value) => {
+						table.setPageSize(Number(value));
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_select_js.SelectTrigger, {
+						className: "h-8 w-[70px]",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_select_js.SelectValue, { placeholder: table.getState().pagination.pageSize })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_select_js.SelectContent, {
+						side: "top",
+						children: [
+							10,
+							20,
+							30,
+							40,
+							50
+						].map((pageSize) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___ui_select_js.SelectItem, {
+							value: `${pageSize}`,
+							children: pageSize
+						}, pageSize))
+					})]
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex items-center justify-center text-sm font-medium",
+					children: table.getState().pagination.pageIndex + 1
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center space-x-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(___ui_button_js.Button, {
+						variant: "outline",
+						className: "h-8 w-8 p-0",
+						onClick: () => table.previousPage(),
+						disabled: !table.getCanPreviousPage(),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "sr-only",
+							children: "Go to previous page"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_icons.ChevronLeftIcon, { className: "h-4 w-4" })]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(___ui_button_js.Button, {
+						variant: "outline",
+						className: "h-8 w-8 p-0",
+						onClick: () => table.nextPage(),
+						disabled: !table.getCanNextPage(),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "sr-only",
+							children: "Go to next page"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_icons.ChevronRightIcon, { className: "h-4 w-4" })]
+					})]
+				})]
+			})]
+		})]
+	});
+}
+
+//#endregion
+exports.DataTablePagination = DataTablePagination;
+//# sourceMappingURL=pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":["Select","SelectTrigger","SelectValue","SelectContent","SelectItem","Button","ChevronLeftIcon","ChevronRightIcon"],"sources":["../../../src/components/data-table/pagination.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\";\nimport { Button } from \"../ui/button\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../ui/select\";\nimport { Table } from \"@tanstack/react-table\";\n\ntype DataTablePaginationProps<TData> = {\n  table: Table<TData>,\n}\n\nexport function DataTablePagination<TData>({\n  table,\n}: DataTablePaginationProps<TData>) {\n  return (\n    <div className=\"flex items-center justify-between px-2 flex-col sm:flex-row gap-y-4 sm:gap-y-0\">\n      <div className=\"flex-1 text-sm text-muted-foreground\">\n        {table.getFilteredSelectedRowModel().rows.length !== 0 ?\n          `${table.getFilteredSelectedRowModel().rows.length} of ${table.getFilteredRowModel().rows.length} row(s) selected` :\n          undefined}\n      </div>\n      <div className=\"flex items-center gap-x-6 lg:gap-x-8 flex-col sm:flex-row gap-y-4 sm:gap-y-0\">\n        <div className=\"flex items-center space-x-2\">\n          <p className=\"text-sm font-medium\">Rows per page</p>\n          <Select\n            value={`${table.getState().pagination.pageSize}`}\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n          >\n            <SelectTrigger className=\"h-8 w-[70px]\">\n              <SelectValue placeholder={table.getState().pagination.pageSize} />\n            </SelectTrigger>\n            <SelectContent side=\"top\">\n              {[10, 20, 30, 40, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={`${pageSize}`}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"flex items-center gap-4\">\n          <div className=\"flex items-center justify-center text-sm font-medium\">\n            {table.getState().pagination.pageIndex + 1}\n            {/* {\" / \"}{table.getPageCount()} */}\n          </div>\n          <div className=\"flex items-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              className=\"h-8 w-8 p-0\"\n              onClick={() => table.previousPage()}\n              disabled={!table.getCanPreviousPage()}\n            >\n              <span className=\"sr-only\">Go to previous page</span>\n              <ChevronLeftIcon className=\"h-4 w-4\" />\n            </Button>\n            <Button\n              variant=\"outline\"\n              className=\"h-8 w-8 p-0\"\n              onClick={() => table.nextPage()}\n              disabled={!table.getCanNextPage()}\n            >\n              <span className=\"sr-only\">Go to next page</span>\n              <ChevronRightIcon className=\"h-4 w-4\" />\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAeA,SAAgB,oBAA2B,EACzC,SACkC;AAClC,QACE,4CAAC;EAAI,WAAU;aACb,2CAAC;GAAI,WAAU;aACZ,MAAM,6BAA6B,CAAC,KAAK,WAAW,IACnD,GAAG,MAAM,6BAA6B,CAAC,KAAK,OAAO,MAAM,MAAM,qBAAqB,CAAC,KAAK,OAAO,oBACjG;IACE,EACN,4CAAC;GAAI,WAAU;cACb,4CAAC;IAAI,WAAU;eACb,2CAAC;KAAE,WAAU;eAAsB;MAAiB,EACpD,4CAACA;KACC,OAAO,GAAG,MAAM,UAAU,CAAC,WAAW;KACtC,gBAAgB,UAAU;AACxB,YAAM,YAAY,OAAO,MAAM,CAAC;;gBAGlC,2CAACC;MAAc,WAAU;gBACvB,2CAACC,+BAAY,aAAa,MAAM,UAAU,CAAC,WAAW,WAAY;OACpD,EAChB,2CAACC;MAAc,MAAK;gBACjB;OAAC;OAAI;OAAI;OAAI;OAAI;OAAG,CAAC,KAAK,aACzB,2CAACC;OAA0B,OAAO,GAAG;iBAClC;SADc,SAEJ,CACb;OACY;MACT;KACL,EACN,4CAAC;IAAI,WAAU;eACb,2CAAC;KAAI,WAAU;eACZ,MAAM,UAAU,CAAC,WAAW,YAAY;MAErC,EACN,4CAAC;KAAI,WAAU;gBACb,4CAACC;MACC,SAAQ;MACR,WAAU;MACV,eAAe,MAAM,cAAc;MACnC,UAAU,CAAC,MAAM,oBAAoB;iBAErC,2CAAC;OAAK,WAAU;iBAAU;QAA0B,EACpD,2CAACC,yCAAgB,WAAU,YAAY;OAChC,EACT,4CAACD;MACC,SAAQ;MACR,WAAU;MACV,eAAe,MAAM,UAAU;MAC/B,UAAU,CAAC,MAAM,gBAAgB;iBAEjC,2CAAC;OAAK,WAAU;iBAAU;QAAsB,EAChD,2CAACE,0CAAiB,WAAU,YAAY;OACjC;MACL;KACF;IACF;GACF"}

package/dist/components/data-table/toolbar-items.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Table } from "@tanstack/react-table";
+
+//#region src/components/data-table/toolbar-items.d.ts
+declare function SearchToolbarItem<TData>(props: {
+  table: Table<TData>;
+  keyName?: string | null;
+  placeholder: string;
+  className?: string;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SearchToolbarItem };
+//# sourceMappingURL=toolbar-items.d.ts.map

package/dist/components/data-table/toolbar-items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-items.d.ts","names":[],"sources":["../../../src/components/data-table/toolbar-items.tsx"],"mappings":";;;;iBAGgB,iBAAA,OAAA,CAAyB,KAAA;EAAS,KAAA,EAAO,KAAA,CAAM,KAAA;EAAQ,OAAA;EAAyB,WAAA;EAAqB,SAAA;AAAA,IAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/data-table/toolbar-items.js

@@ -0,0 +1,18 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../../chunk-BE-pF4vm.js');
+let react_jsx_runtime = require("react/jsx-runtime");
+let ______index_js = require("../../index.js");
+
+//#region src/components/data-table/toolbar-items.tsx
+function SearchToolbarItem(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(______index_js.Input, {
+		placeholder: props.placeholder,
+		value: props.keyName ? `${props.table.getColumn(props.keyName)?.getFilterValue() ?? ""}` : props.table.getState().globalFilter ?? "",
+		onChange: (event) => props.keyName ? props.table.getColumn(props.keyName)?.setFilterValue(event.target.value) : props.table.setGlobalFilter(event.target.value),
+		className: (0, ______index_js.cn)("h-8 w-[250px]", props.className)
+	});
+}
+
+//#endregion
+exports.SearchToolbarItem = SearchToolbarItem;
+//# sourceMappingURL=toolbar-items.js.map

package/dist/components/data-table/toolbar-items.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-items.js","names":["Input"],"sources":["../../../src/components/data-table/toolbar-items.tsx"],"sourcesContent":["import { Input, cn } from \"../..\";\nimport { Table } from \"@tanstack/react-table\";\n\nexport function SearchToolbarItem<TData>(props: { table: Table<TData>, keyName?: string | null, placeholder: string, className?: string }) {\n  return (\n    <Input\n      placeholder={props.placeholder}\n      value={props.keyName ? `${props.table.getColumn(props.keyName)?.getFilterValue() ?? \"\"}` : props.table.getState().globalFilter ?? \"\"}\n      onChange={(event) => props.keyName ? props.table.getColumn(props.keyName)?.setFilterValue(event.target.value) : props.table.setGlobalFilter(event.target.value)}\n      className={cn(\"h-8 w-[250px]\", props.className)}\n    />\n  );\n}\n"],"mappings":";;;;;;AAGA,SAAgB,kBAAyB,OAAkG;AACzI,QACE,2CAACA;EACC,aAAa,MAAM;EACnB,OAAO,MAAM,UAAU,GAAG,MAAM,MAAM,UAAU,MAAM,QAAQ,EAAE,gBAAgB,IAAI,OAAO,MAAM,MAAM,UAAU,CAAC,gBAAgB;EAClI,WAAW,UAAU,MAAM,UAAU,MAAM,MAAM,UAAU,MAAM,QAAQ,EAAE,eAAe,MAAM,OAAO,MAAM,GAAG,MAAM,MAAM,gBAAgB,MAAM,OAAO,MAAM;EAC/J,kCAAc,iBAAiB,MAAM,UAAU;GAC/C"}

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

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ColumnFiltersState, SortingState, Table } from "@tanstack/react-table";
+
+//#region src/components/data-table/toolbar.d.ts
+type DataTableToolbarProps<TData> = {
+  table: Table<TData>;
+  toolbarRender?: (table: Table<TData>) => React.ReactNode;
+  showDefaultToolbar?: boolean;
+  defaultColumnFilters: ColumnFiltersState;
+  defaultSorting: SortingState;
+  showResetFilters?: boolean;
+};
+declare function DataTableToolbar<TData>({
+  table,
+  toolbarRender,
+  showDefaultToolbar,
+  defaultColumnFilters,
+  defaultSorting,
+  showResetFilters
+}: DataTableToolbarProps<TData>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DataTableToolbar };
+//# sourceMappingURL=toolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","names":[],"sources":["../../../src/components/data-table/toolbar.tsx"],"mappings":";;;;KAUK,qBAAA;EACH,KAAA,EAAO,KAAA,CAAM,KAAA;EACb,aAAA,IAAiB,KAAA,EAAO,KAAA,CAAM,KAAA,MAAW,KAAA,CAAM,SAAA;EAC/C,kBAAA;EACA,oBAAA,EAAsB,kBAAA;EACtB,cAAA,EAAgB,YAAA;EAChB,gBAAA;AAAA;AAAA,iBAGc,gBAAA,OAAA,CAAA;EACd,KAAA;EACA,aAAA;EACA,kBAAA;EACA,oBAAA;EACA,cAAA;EACA;AAAA,GACC,qBAAA,CAAsB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA"}