@tulip-systems/core 0.3.0 → 0.4.1

package/dist/modules/data-tables/components/filters/slider.client.d.mts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime37 from "react/jsx-runtime";
+import { ParserBuilder } from "nuqs";
+
+//#region src/modules/data-tables/components/filters/slider.client.d.ts
+type TableFilterSliderProps = {
+  title?: string;
+  filter: {
+    name: string;
+    parser: ParserBuilder<[number, number] | null>;
+  };
+  options?: {
+    min: number;
+    max: number;
+  };
+};
+declare function TableFilterSlider({
+  title,
+  filter,
+  options
+}: TableFilterSliderProps): react_jsx_runtime37.JSX.Element;
+//#endregion
+export { TableFilterSlider, TableFilterSliderProps };
+//# sourceMappingURL=slider.client.d.mts.map

package/dist/modules/data-tables/components/filters/slider.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.client.d.mts","names":[],"sources":["../../../../../src/modules/data-tables/components/filters/slider.client.tsx"],"sourcesContent":[],"mappings":";;;;KAaY,sBAAA;;;IAAA,IAAA,EAAA,MAAA;IAMI,MAAA,EAJkB,aAID,CAAA,CAAA,MAAA,EAAA,MAAA,CAAA,GAAA,IAAA,CAAA;EAC/B,CAAA;EACA,OAAA,CAAA,EAAA;IACA,GAAA,EAAA,MAAA;IACC,GAAA,EAAA,MAAA;EAAsB,CAAA;CAAA;iBAJT,iBAAA;;;;GAIb,yBAAsB,mBAAA,CAAA,GAAA,CAAA"}

package/dist/modules/data-tables/components/filters/slider.client.mjs

@@ -0,0 +1,129 @@
+"use client";
+
+import { Badge } from "../../../../components/ui/badge.mjs";
+import { Button } from "../../../../components/ui/button.mjs";
+import { Input } from "../../../../components/ui/input.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../../components/ui/popover.mjs";
+import { Separator } from "../../../../components/ui/separator.mjs";
+import { Slider } from "../../../../components/ui/slider.mjs";
+import { PlusCircle } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { startTransition, useState } from "react";
+import { useQueryState } from "nuqs";
+import { useDebouncedCallback } from "use-debounce";
+
+//#region src/modules/data-tables/components/filters/slider.client.tsx
+function TableFilterSlider({ title, filter, options = {
+	min: 0,
+	max: 100
+} }) {
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useQueryState(filter.name, filter.parser);
+	const [selectedValues, setSelectedValues] = useState(query);
+	const handleSliderChange = useDebouncedCallback((values) => setQuery(values, { startTransition }), 300);
+	const { min, max } = options;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				className: "h-8 border-dashed",
+				children: [
+					/* @__PURE__ */ jsx(PlusCircle, { className: "mr-2 h-4 w-4" }),
+					title,
+					selectedValues && selectedValues?.length > 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 && selectedValues.length
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "hidden space-x-1 lg:flex",
+							children: /* @__PURE__ */ jsxs(Badge, {
+								variant: "secondary",
+								className: "rounded-sm px-1 font-normal",
+								children: [
+									query?.[0],
+									" tot ",
+									query?.[1]
+								]
+							})
+						})
+					] })
+				]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "w-[20rem] p-0",
+			align: "start",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "space-y-8 p-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Input, {
+						type: "number",
+						value: selectedValues?.[0] ?? void 0,
+						placeholder: "Min",
+						onChange: (e) => {
+							startTransition(() => {
+								setSelectedValues(e.target.value ? [Number(e.target.value), selectedValues?.[1] ?? max] : null);
+							});
+						},
+						onBlur: () => handleSliderChange(selectedValues)
+					}), /* @__PURE__ */ jsx(Input, {
+						type: "number",
+						value: selectedValues?.[1] ?? void 0,
+						placeholder: "Max",
+						max,
+						onChange: (e) => {
+							startTransition(() => {
+								setSelectedValues(e.target.value ? [selectedValues?.[0] ?? min, Number(e.target.value)] : null);
+							});
+						},
+						onBlur: () => handleSliderChange(selectedValues)
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "space-y-3",
+					children: [/* @__PURE__ */ jsx(Slider, {
+						value: selectedValues ?? [min, max],
+						onValueChange: (values) => startTransition(() => {
+							setSelectedValues(values);
+							handleSliderChange(values);
+						}),
+						step: 1,
+						min,
+						max
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "text-muted-foreground flex justify-between text-xs",
+						children: [/* @__PURE__ */ jsx("span", { children: min }), /* @__PURE__ */ jsx("span", { children: max })]
+					})]
+				})]
+			}), selectedValues && selectedValues.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "w-full space-y-2 p-1.5",
+				children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					type: "button",
+					variant: "ghost",
+					onClick: () => {
+						setOpen(false);
+						setSelectedValues(null);
+						handleSliderChange(null);
+					},
+					className: "w-full text-center",
+					children: "Clear filters"
+				})]
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { TableFilterSlider };
+//# sourceMappingURL=slider.client.mjs.map

package/dist/modules/data-tables/components/filters/slider.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.client.mjs","names":[],"sources":["../../../../../src/modules/data-tables/components/filters/slider.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Slider } from \"@/components/ui/slider\";\nimport { PlusCircle } from \"lucide-react\";\nimport { ParserBuilder, useQueryState } from \"nuqs\";\nimport { startTransition, useState } from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\n\nexport type TableFilterSliderProps = {\n  title?: string;\n  filter: { name: string; parser: ParserBuilder<[number, number] | null> };\n  options?: { min: number; max: number };\n};\n\nexport function TableFilterSlider({\n  title,\n  filter,\n  options = { min: 0, max: 100 },\n}: TableFilterSliderProps) {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useQueryState(filter.name, filter.parser);\n\n  const [selectedValues, setSelectedValues] = useState(query);\n\n  const handleSliderChange = useDebouncedCallback(\n    (values: [number, number] | null) => setQuery(values, { startTransition }),\n    300,\n  );\n\n  const { min, max } = options;\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"h-8 border-dashed\">\n          <PlusCircle className=\"mr-2 h-4 w-4\" />\n          {title}\n          {selectedValues && selectedValues?.length > 0 && (\n            <>\n              <Separator orientation=\"vertical\" className=\"mx-2 h-4\" />\n              <Badge variant=\"secondary\" className=\"rounded-sm px-1 font-normal lg:hidden\">\n                {selectedValues && selectedValues.length}\n              </Badge>\n\n              <div className=\"hidden space-x-1 lg:flex\">\n                <Badge variant=\"secondary\" className=\"rounded-sm px-1 font-normal\">\n                  {query?.[0]} tot {query?.[1]}\n                </Badge>\n              </div>\n            </>\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[20rem] p-0\" align=\"start\">\n        <div className=\"space-y-8 p-4\">\n          <div className=\"flex items-center gap-2\">\n            <Input\n              type=\"number\"\n              value={selectedValues?.[0] ?? undefined}\n              placeholder=\"Min\"\n              onChange={(e) => {\n                startTransition(() => {\n                  const newValues = e.target.value\n                    ? ([Number(e.target.value), selectedValues?.[1] ?? max] as [number, number])\n                    : null;\n\n                  setSelectedValues(newValues);\n                });\n              }}\n              onBlur={() => handleSliderChange(selectedValues)}\n            />\n            <Input\n              type=\"number\"\n              value={selectedValues?.[1] ?? undefined}\n              placeholder=\"Max\"\n              max={max}\n              onChange={(e) => {\n                startTransition(() => {\n                  const newValues = e.target.value\n                    ? ([selectedValues?.[0] ?? min, Number(e.target.value)] as [number, number])\n                    : null;\n\n                  setSelectedValues(newValues);\n                });\n              }}\n              onBlur={() => handleSliderChange(selectedValues)}\n            />\n          </div>\n\n          <div className=\"space-y-3\">\n            <Slider\n              value={selectedValues ?? [min, max]}\n              onValueChange={(values: [number, number]) =>\n                startTransition(() => {\n                  setSelectedValues(values);\n                  handleSliderChange(values);\n                })\n              }\n              step={1}\n              min={min}\n              max={max}\n            />\n\n            <div className=\"text-muted-foreground flex justify-between text-xs\">\n              <span>{min}</span>\n              <span>{max}</span>\n            </div>\n          </div>\n        </div>\n\n        {selectedValues && selectedValues.length > 0 && (\n          <div className=\"w-full space-y-2 p-1.5\">\n            <Separator />\n\n            <Button\n              size=\"sm\"\n              type=\"button\"\n              variant=\"ghost\"\n              onClick={() => {\n                setOpen(false);\n                setSelectedValues(null);\n                handleSliderChange(null);\n              }}\n              className=\"w-full text-center\"\n            >\n              Clear filters\n            </Button>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,SAAgB,kBAAkB,EAChC,OACA,QACA,UAAU;CAAE,KAAK;CAAG,KAAK;CAAK,IACL;CACzB,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,CAAC,OAAO,YAAY,cAAc,OAAO,MAAM,OAAO,OAAO;CAEnE,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM;CAE3D,MAAM,qBAAqB,sBACxB,WAAoC,SAAS,QAAQ,EAAE,iBAAiB,CAAC,EAC1E,IACD;CAED,MAAM,EAAE,KAAK,QAAQ;AAErB,QACE,qBAAC;EAAc;EAAM,cAAc;aACjC,oBAAC;GAAe;aACd,qBAAC;IAAO,MAAK;IAAS,SAAQ;IAAU,MAAK;IAAK,WAAU;;KAC1D,oBAAC,cAAW,WAAU,iBAAiB;KACtC;KACA,kBAAkB,gBAAgB,SAAS,KAC1C;MACE,oBAAC;OAAU,aAAY;OAAW,WAAU;QAAa;MACzD,oBAAC;OAAM,SAAQ;OAAY,WAAU;iBAClC,kBAAkB,eAAe;QAC5B;MAER,oBAAC;OAAI,WAAU;iBACb,qBAAC;QAAM,SAAQ;QAAY,WAAU;;SAClC,QAAQ;SAAG;SAAM,QAAQ;;SACpB;QACJ;SACL;;KAEE;IACM,EACjB,qBAAC;GAAe,WAAU;GAAgB,OAAM;cAC9C,qBAAC;IAAI,WAAU;eACb,qBAAC;KAAI,WAAU;gBACb,oBAAC;MACC,MAAK;MACL,OAAO,iBAAiB,MAAM;MAC9B,aAAY;MACZ,WAAW,MAAM;AACf,6BAAsB;AAKpB,0BAJkB,EAAE,OAAO,QACtB,CAAC,OAAO,EAAE,OAAO,MAAM,EAAE,iBAAiB,MAAM,IAAI,GACrD,KAEwB;SAC5B;;MAEJ,cAAc,mBAAmB,eAAe;OAChD,EACF,oBAAC;MACC,MAAK;MACL,OAAO,iBAAiB,MAAM;MAC9B,aAAY;MACP;MACL,WAAW,MAAM;AACf,6BAAsB;AAKpB,0BAJkB,EAAE,OAAO,QACtB,CAAC,iBAAiB,MAAM,KAAK,OAAO,EAAE,OAAO,MAAM,CAAC,GACrD,KAEwB;SAC5B;;MAEJ,cAAc,mBAAmB,eAAe;OAChD;MACE,EAEN,qBAAC;KAAI,WAAU;gBACb,oBAAC;MACC,OAAO,kBAAkB,CAAC,KAAK,IAAI;MACnC,gBAAgB,WACd,sBAAsB;AACpB,yBAAkB,OAAO;AACzB,0BAAmB,OAAO;QAC1B;MAEJ,MAAM;MACD;MACA;OACL,EAEF,qBAAC;MAAI,WAAU;iBACb,oBAAC,oBAAM,MAAW,EAClB,oBAAC,oBAAM,MAAW;OACd;MACF;KACF,EAEL,kBAAkB,eAAe,SAAS,KACzC,qBAAC;IAAI,WAAU;eACb,oBAAC,cAAY,EAEb,oBAAC;KACC,MAAK;KACL,MAAK;KACL,SAAQ;KACR,eAAe;AACb,cAAQ,MAAM;AACd,wBAAkB,KAAK;AACvB,yBAAmB,KAAK;;KAE1B,WAAU;eACX;MAEQ;KACL;IAEO;GACT"}

package/dist/modules/data-tables/components/footer.mjs

@@ -0,0 +1,29 @@
+"use client";
+
+import { InfinteTableBottombar, InfinteTableFooter } from "../strategies/infinite/components.mjs";
+import { PaginationTableFooter } from "../strategies/pagination/components.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/modules/data-tables/components/footer.tsx
+/**
+* Table bottombar
+*/
+function TableFooter({ table }) {
+	const meta = table.options.meta;
+	if (meta.strategy.name === "pagination") return null;
+	if (meta.strategy.name === "infinite") return /* @__PURE__ */ jsx(InfinteTableFooter, { table });
+	throw new Error(`Unknown strategy: ${meta.strategy.name}`);
+}
+/**
+* Table bottombar
+*/
+function TableBottombar({ table }) {
+	const meta = table.options.meta;
+	if (meta.strategy.name === "pagination") return /* @__PURE__ */ jsx(PaginationTableFooter, { table });
+	if (meta.strategy.name === "infinite") return /* @__PURE__ */ jsx(InfinteTableBottombar, { table });
+	throw new Error(`Unknown strategy: ${meta.strategy.name}`);
+}
+
+//#endregion
+export { TableBottombar, TableFooter };
+//# sourceMappingURL=footer.mjs.map

package/dist/modules/data-tables/components/footer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.mjs","names":[],"sources":["../../../../src/modules/data-tables/components/footer.tsx"],"sourcesContent":["\"use client\";\n\nimport { Table } from \"@tanstack/react-table\";\nimport { TableMeta } from \"../lib/types\";\nimport { InfinteTableBottombar, InfinteTableFooter } from \"../strategies/infinite/components\";\nimport { PaginationTableFooter } from \"../strategies/pagination/components\";\n\n/**\n * Table bottombar\n */\nexport function TableFooter<TData extends { id: string }>({ table }: { table: Table<TData> }) {\n  const meta = table.options.meta as TableMeta<TData>;\n\n  if (meta.strategy.name === \"pagination\") {\n    return null;\n  }\n\n  if (meta.strategy.name === \"infinite\") {\n    return <InfinteTableFooter table={table} />;\n  }\n\n  throw new Error(`Unknown strategy: ${meta.strategy.name}`);\n}\n\n/**\n * Table bottombar\n */\nexport function TableBottombar<TData extends { id: string }>({ table }: { table: Table<TData> }) {\n  const meta = table.options.meta as TableMeta<TData>;\n\n  if (meta.strategy.name === \"pagination\") {\n    return <PaginationTableFooter table={table} />;\n  }\n\n  if (meta.strategy.name === \"infinite\") {\n    return <InfinteTableBottombar table={table} />;\n  }\n\n  throw new Error(`Unknown strategy: ${meta.strategy.name}`);\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,YAA0C,EAAE,SAAkC;CAC5F,MAAM,OAAO,MAAM,QAAQ;AAE3B,KAAI,KAAK,SAAS,SAAS,aACzB,QAAO;AAGT,KAAI,KAAK,SAAS,SAAS,WACzB,QAAO,oBAAC,sBAA0B,QAAS;AAG7C,OAAM,IAAI,MAAM,qBAAqB,KAAK,SAAS,OAAO;;;;;AAM5D,SAAgB,eAA6C,EAAE,SAAkC;CAC/F,MAAM,OAAO,MAAM,QAAQ;AAE3B,KAAI,KAAK,SAAS,SAAS,aACzB,QAAO,oBAAC,yBAA6B,QAAS;AAGhD,KAAI,KAAK,SAAS,SAAS,WACzB,QAAO,oBAAC,yBAA6B,QAAS;AAGhD,OAAM,IAAI,MAAM,qBAAqB,KAAK,SAAS,OAAO"}

package/dist/modules/data-tables/components/header.d.mts

@@ -0,0 +1,41 @@
+import { TableRow } from "./table.mjs";
+import * as react_jsx_runtime97 from "react/jsx-runtime";
+import { Header, Table } from "@tanstack/react-table";
+
+//#region src/modules/data-tables/components/header.d.ts
+/**
+ * TableHeaderProps
+ */
+type TableHeaderProps<TData> = {
+  table: Table<TData>;
+};
+/**
+ * DataTableHeader
+ */
+declare function TableHeader({
+  className,
+  ...props
+}: React.ComponentProps<"thead">): react_jsx_runtime97.JSX.Element;
+/**
+ * DataTableHeaderRow
+ */
+declare const TableHeaderRow: typeof TableRow;
+/**
+ * TableHead
+ */
+declare function TableHead({
+  className,
+  ...props
+}: React.ComponentProps<"th">): react_jsx_runtime97.JSX.Element;
+/**
+ * DataTableHeaderCell
+ */
+type DataTableHeaderCellProps<TData> = {
+  header: Header<TData, unknown>;
+};
+declare function TableHeaderCell<TData>({
+  header
+}: DataTableHeaderCellProps<TData>): react_jsx_runtime97.JSX.Element;
+//#endregion
+export { TableHead, TableHeader, TableHeaderCell, TableHeaderProps, TableHeaderRow };
+//# sourceMappingURL=header.d.mts.map

package/dist/modules/data-tables/components/header.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.mts","names":[],"sources":["../../../../src/modules/data-tables/components/header.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AASY,KAAA,gBAAgB,CAAA,KAAA,CAAA,GAAA;EAOZ,KAAA,EANP,KAMO,CAND,KAMY,CAAA;CAAG;;;;AAOjB,iBAPG,WAAA,CAOW;EAAA,SAAW;EAAA,GAAA;AAAA,CAAA,EAPe,KAAA,CAAM,cAOrB,CAAA,OAAA,CAAA,CAAA,EAP4C,mBAAA,CAAA,GAAA,CAAA,OAO5C;AAKtC;;;AAA6E,cALhE,cAKgE,EAAA,OALlD,QAKkD;;AAW5E;AASD;AAAyC,iBApBzB,SAAA,CAoByB;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EApBU,KAAA,CAAM,cAoBhB,CAAA,IAAA,CAAA,CAAA,EApBoC,mBAAA,CAAA,GAAA,CAAA,OAoBpC;;;;KAJpC,wBAI6E,CAAA,KAAA,CAAA,GAAA;UAHxE,OAAO;;iBAGD;;GAAmC,yBAAyB,SAAM,mBAAA,CAAA,GAAA,CAAA"}

package/dist/modules/data-tables/components/header.mjs

@@ -0,0 +1,44 @@
+import { cn } from "../../../lib/utils/cn.mjs";
+import { Allowed } from "../../auth/components/allowed.client.mjs";
+import { TableRow } from "./table.mjs";
+import { jsx } from "react/jsx-runtime";
+import { flexRender } from "@tanstack/react-table";
+
+//#region src/modules/data-tables/components/header.tsx
+/**
+* DataTableHeader
+*/
+function TableHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("thead", {
+		"data-slot": "table-header",
+		className: cn("[&_tr]:border-b", className),
+		...props
+	});
+}
+/**
+* DataTableHeaderRow
+*/
+const TableHeaderRow = TableRow;
+/**
+* TableHead
+*/
+function TableHead({ className, ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		"data-slot": "table-head",
+		className: cn("text-muted-foreground bg-muted/70 h-10 whitespace-nowrap px-2 text-left align-middle font-medium", className),
+		...props
+	});
+}
+function TableHeaderCell({ header }) {
+	const columnDef = header.column.columnDef;
+	const children = /* @__PURE__ */ jsx(TableHead, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
+	if (!columnDef.permissions) return children;
+	return /* @__PURE__ */ jsx(Allowed, {
+		permission: columnDef.permissions,
+		children
+	}, header.id);
+}
+
+//#endregion
+export { TableHead, TableHeader, TableHeaderCell, TableHeaderRow };
+//# sourceMappingURL=header.mjs.map

package/dist/modules/data-tables/components/header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.mjs","names":[],"sources":["../../../../src/modules/data-tables/components/header.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils/cn\";\nimport { Allowed } from \"@/modules/auth/components/allowed.client\";\nimport { TableRow } from \"@/modules/data-tables/components/table\";\nimport { flexRender, Header, Table } from \"@tanstack/react-table\";\nimport { TableColumnDef } from \"../lib/types\";\n\n/**\n * TableHeaderProps\n */\nexport type TableHeaderProps<TData> = {\n  table: Table<TData>;\n};\n\n/**\n * DataTableHeader\n */\nexport function TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return <thead data-slot=\"table-header\" className={cn(\"[&_tr]:border-b\", className)} {...props} />;\n}\n\n/**\n * DataTableHeaderRow\n */\nexport const TableHeaderRow = TableRow;\n\n/**\n * TableHead\n */\nexport function TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-muted-foreground bg-muted/70 h-10 whitespace-nowrap px-2 text-left align-middle font-medium\", //[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * DataTableHeaderCell\n */\ntype DataTableHeaderCellProps<TData> = {\n  header: Header<TData, unknown>;\n};\n\nexport function TableHeaderCell<TData>({ header }: DataTableHeaderCellProps<TData>) {\n  const columnDef = header.column.columnDef as TableColumnDef<TData>;\n\n  const children = (\n    <TableHead key={header.id}>\n      {header.isPlaceholder\n        ? null\n        : flexRender(header.column.columnDef.header, header.getContext())}\n    </TableHead>\n  );\n\n  if (!columnDef.permissions) return children;\n\n  return (\n    <Allowed key={header.id} permission={columnDef.permissions}>\n      {children}\n    </Allowed>\n  );\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAAwC;AAClF,QAAO,oBAAC;EAAM,aAAU;EAAe,WAAW,GAAG,mBAAmB,UAAU;EAAE,GAAI;GAAS;;;;;AAMnG,MAAa,iBAAiB;;;;AAK9B,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAqC;AAC7E,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GACT,oGACA,UACD;EACD,GAAI;GACJ;;AAWN,SAAgB,gBAAuB,EAAE,UAA2C;CAClF,MAAM,YAAY,OAAO,OAAO;CAEhC,MAAM,WACJ,oBAAC,uBACE,OAAO,gBACJ,OACA,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,YAAY,CAAC,IAHrD,OAAO,GAIX;AAGd,KAAI,CAAC,UAAU,YAAa,QAAO;AAEnC,QACE,oBAAC;EAAwB,YAAY,UAAU;EAC5C;IADW,OAAO,GAEX"}

package/dist/modules/data-tables/components/layout.d.mts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime100 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+
+//#region src/modules/data-tables/components/layout.d.ts
+declare function TableLayout({
+  className,
+  children,
+  ...props
+}: ComponentProps<"div">): react_jsx_runtime100.JSX.Element;
+//#endregion
+export { TableLayout };
+//# sourceMappingURL=layout.d.mts.map

package/dist/modules/data-tables/components/layout.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.mts","names":[],"sources":["../../../../src/modules/data-tables/components/layout.tsx"],"sourcesContent":[],"mappings":";;;;iBAGgB,WAAA;;;;GAA+C,wBAAqB,oBAAA,CAAA,GAAA,CAAA"}

package/dist/modules/data-tables/components/layout.mjs

@@ -0,0 +1,15 @@
+import { cn } from "../../../lib/utils/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/modules/data-tables/components/layout.tsx
+function TableLayout({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("space-y-3", className),
+		...props,
+		children
+	});
+}
+
+//#endregion
+export { TableLayout };
+//# sourceMappingURL=layout.mjs.map

package/dist/modules/data-tables/components/layout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.mjs","names":[],"sources":["../../../../src/modules/data-tables/components/layout.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils/cn\";\nimport { ComponentProps } from \"react\";\n\nexport function TableLayout({ className, children, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"space-y-3\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;AAGA,SAAgB,YAAY,EAAE,WAAW,UAAU,GAAG,SAAgC;AACpF,QACE,oBAAC;EAAI,WAAW,GAAG,aAAa,UAAU;EAAE,GAAI;EAC7C;GACG"}

package/dist/modules/data-tables/components/search-input.client.d.mts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime38 from "react/jsx-runtime";
+
+//#region src/modules/data-tables/components/search-input.client.d.ts
+declare function TableSearchInput(): react_jsx_runtime38.JSX.Element;
+//#endregion
+export { TableSearchInput };
+//# sourceMappingURL=search-input.client.d.mts.map

package/dist/modules/data-tables/components/search-input.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-input.client.d.mts","names":[],"sources":["../../../../src/modules/data-tables/components/search-input.client.tsx"],"sourcesContent":[],"mappings":";;;iBAKgB,gBAAA,CAAA,GAAgB,mBAAA,CAAA,GAAA,CAAA"}

package/dist/modules/data-tables/components/search-input.client.mjs

@@ -0,0 +1,20 @@
+"use client";
+
+import { Input } from "../../../components/ui/input.mjs";
+import { useSearch } from "../hooks/use-search.client.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/modules/data-tables/components/search-input.client.tsx
+function TableSearchInput() {
+	const { defaultValue, handleSearch } = useSearch();
+	return /* @__PURE__ */ jsx(Input, {
+		placeholder: "Zoeken...",
+		defaultValue,
+		onChange: (e) => handleSearch(e.target.value),
+		className: "h-8 w-[150px] min-w-fit lg:w-[250px]"
+	});
+}
+
+//#endregion
+export { TableSearchInput };
+//# sourceMappingURL=search-input.client.mjs.map

package/dist/modules/data-tables/components/search-input.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-input.client.mjs","names":[],"sources":["../../../../src/modules/data-tables/components/search-input.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { Input } from \"@/components/ui/input\";\nimport { useSearch } from \"../hooks/use-search.client\";\n\nexport function TableSearchInput() {\n  const { defaultValue, handleSearch } = useSearch();\n\n  return (\n    <Input\n      placeholder=\"Zoeken...\"\n      defaultValue={defaultValue}\n      onChange={(e) => handleSearch(e.target.value)}\n      className=\"h-8 w-[150px] min-w-fit lg:w-[250px]\"\n    />\n  );\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,mBAAmB;CACjC,MAAM,EAAE,cAAc,iBAAiB,WAAW;AAElD,QACE,oBAAC;EACC,aAAY;EACE;EACd,WAAW,MAAM,aAAa,EAAE,OAAO,MAAM;EAC7C,WAAU;GACV"}

package/dist/modules/data-tables/components/skeleton.d.mts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime101 from "react/jsx-runtime";
+
+//#region src/modules/data-tables/components/skeleton.d.ts
+declare function TableSkeleton(): react_jsx_runtime101.JSX.Element;
+//#endregion
+export { TableSkeleton };
+//# sourceMappingURL=skeleton.d.mts.map

package/dist/modules/data-tables/components/skeleton.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.mts","names":[],"sources":["../../../../src/modules/data-tables/components/skeleton.tsx"],"sourcesContent":[],"mappings":";;;iBASgB,aAAA,CAAA,GAAa,oBAAA,CAAA,GAAA,CAAA"}

package/dist/modules/data-tables/components/skeleton.mjs

@@ -0,0 +1,22 @@
+import { Skeleton } from "../../../components/ui/skeleton.mjs";
+import { Table, TableBody, TableCell, TableRow } from "./table.mjs";
+import { TableHead, TableHeader } from "./header.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/modules/data-tables/components/skeleton.tsx
+function TableSkeleton() {
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
+		className: "rounded-md border",
+		children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, {
+			className: "bg-muted relative",
+			children: Array.from({ length: 15 }).map((_, index) => /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(Skeleton, { className: "bg-background my-2 h-2 w-full rounded-full" }) }, index))
+		}) }), /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: 15 }).map((_, index) => /* @__PURE__ */ jsx(TableRow, {
+			className: "relative",
+			children: Array.from({ length: 15 }).map((_$1, index$1) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "my-2 h-2 w-full rounded-full" }) }, index$1))
+		}, index)) })] })
+	}) });
+}
+
+//#endregion
+export { TableSkeleton };
+//# sourceMappingURL=skeleton.mjs.map

package/dist/modules/data-tables/components/skeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.mjs","names":["index"],"sources":["../../../../src/modules/data-tables/components/skeleton.tsx"],"sourcesContent":["import { Skeleton } from \"@/components/ui/skeleton\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableRow,\n} from \"@/modules/data-tables/components/table\";\nimport { TableHead, TableHeader } from \"./header\";\n\nexport function TableSkeleton() {\n  return (\n    <>\n      <div className=\"rounded-md border\">\n        <Table>\n          <TableHeader>\n            <TableRow className=\"bg-muted relative\">\n              {Array.from({ length: 15 }).map((_, index) => (\n                <TableHead key={index}>\n                  <Skeleton className=\"bg-background my-2 h-2 w-full rounded-full\" />\n                </TableHead>\n              ))}\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {Array.from({ length: 15 }).map((_, index) => (\n              <TableRow key={index} className=\"relative\">\n                {Array.from({ length: 15 }).map((_, index) => (\n                  <TableCell key={index}>\n                    <Skeleton className=\"my-2 h-2 w-full rounded-full\" />\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n    </>\n  );\n}\n"],"mappings":";;;;;;AASA,SAAgB,gBAAgB;AAC9B,QACE,0CACE,oBAAC;EAAI,WAAU;YACb,qBAAC,oBACC,oBAAC,yBACC,oBAAC;GAAS,WAAU;aACjB,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,UAClC,oBAAC,uBACC,oBAAC,YAAS,WAAU,+CAA+C,IADrD,MAEJ,CACZ;IACO,GACC,EACd,oBAAC,uBACE,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,UAClC,oBAAC;GAAqB,WAAU;aAC7B,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,KAAG,YAClC,oBAAC,uBACC,oBAAC,YAAS,WAAU,iCAAiC,IADvCA,QAEJ,CACZ;KALW,MAMJ,CACX,GACQ,IACN;GACJ,GACL"}

package/dist/modules/data-tables/components/table.d.mts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime102 from "react/jsx-runtime";
+import * as React$1 from "react";
+
+//#region src/modules/data-tables/components/table.d.ts
+declare function Table({
+  className,
+  ...props
+}: React$1.ComponentProps<"table">): react_jsx_runtime102.JSX.Element;
+declare function TableBody({
+  className,
+  ...props
+}: React$1.ComponentProps<"tbody">): react_jsx_runtime102.JSX.Element;
+declare function TableFooter({
+  className,
+  ...props
+}: React$1.ComponentProps<"tfoot">): react_jsx_runtime102.JSX.Element;
+declare function TableRow({
+  className,
+  ...props
+}: React$1.ComponentProps<"tr">): react_jsx_runtime102.JSX.Element;
+declare function TableCell({
+  readonly,
+  className,
+  ...props
+}: React$1.ComponentProps<"td"> & {
+  readonly?: boolean;
+}): react_jsx_runtime102.JSX.Element;
+declare function TableCaption({
+  className,
+  ...props
+}: React$1.ComponentProps<"caption">): react_jsx_runtime102.JSX.Element;
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableRow };
+//# sourceMappingURL=table.d.mts.map

package/dist/modules/data-tables/components/table.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.mts","names":[],"sources":["../../../../src/modules/data-tables/components/table.tsx"],"sourcesContent":[],"mappings":";;;;iBAMS,KAAA;;;GAA+B,OAAA,CAAM,0BAAuB,oBAAA,CAAA,GAAA,CAAA;iBAY5D,SAAA;;;GAAmC,OAAA,CAAM,0BAAuB,oBAAA,CAAA,GAAA,CAAA;iBAUhE,WAAA;;;GAAqC,OAAA,CAAM,0BAAuB,oBAAA,CAAA,GAAA,CAAA;AA1B5C,iBAoCtB,QAAA,CAhCK;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAgC6B,OAAA,CAAM,cAhCnC,CAAA,IAAA,CAAA,CAAA,EAgCuD,oBAAA,CAAA,GAAA,CAAA,OAhCvD;iBA6CL,SAAA,CA7CQ;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;CAAA,EAiDd,OAAA,CAAM,cAjDQ,CAAA,IAAA,CAAA,GAAA;EAAuB,QAAM,CAAA,EAAA,OAAA;CAAuB,CAAA,EAiDf,oBAAA,CAAA,GAAA,CAAA,OAjDe;iBA+D5D,YAAA,CA/D4D;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA+DtB,OAAA,CAAM,cA/DgB,CAAA,SAAA,CAAA,CAAA,EA+DS,oBAAA,CAAA,GAAA,CAAA,OA/DT"}

package/dist/modules/data-tables/components/table.mjs

@@ -0,0 +1,57 @@
+"use client";
+
+import { cn } from "../../../lib/utils/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+import "react";
+
+//#region src/modules/data-tables/components/table.tsx
+function Table({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-container",
+		className: "relative w-full overflow-x-auto",
+		children: /* @__PURE__ */ jsx("table", {
+			"data-slot": "table",
+			className: cn("w-full caption-bottom text-sm", className),
+			...props
+		})
+	});
+}
+function TableBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tbody", {
+		"data-slot": "table-body",
+		className: cn("[&_tr:last-child]:border-0", className),
+		...props
+	});
+}
+function TableFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tfoot", {
+		"data-slot": "table-footer",
+		className: cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className),
+		...props
+	});
+}
+function TableRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tr", {
+		"data-slot": "table-row",
+		className: cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className),
+		...props
+	});
+}
+function TableCell({ readonly, className, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		"data-slot": "table-cell",
+		className: cn("whitespace-nowrap p-2 align-middle", readonly && "bg-muted/50", className),
+		...props
+	});
+}
+function TableCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("caption", {
+		"data-slot": "table-caption",
+		className: cn("text-muted-foreground mt-4 text-sm", className),
+		...props
+	});
+}
+
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableRow };
+//# sourceMappingURL=table.mjs.map

package/dist/modules/data-tables/components/table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.mjs","names":[],"sources":["../../../../src/modules/data-tables/components/table.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div data-slot=\"table-container\" className=\"relative w-full overflow-x-auto\">\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableCell({\n  readonly,\n  className,\n  ...props\n}: React.ComponentProps<\"td\"> & { readonly?: boolean }) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"whitespace-nowrap p-2 align-middle\", //[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\n        readonly && \"bg-muted/50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableCaption({ className, ...props }: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Table, TableBody, TableCaption, TableCell, TableFooter, TableRow };\n"],"mappings":";;;;;;;AAMA,SAAS,MAAM,EAAE,WAAW,GAAG,SAAwC;AACrE,QACE,oBAAC;EAAI,aAAU;EAAkB,WAAU;YACzC,oBAAC;GACC,aAAU;GACV,WAAW,GAAG,iCAAiC,UAAU;GACzD,GAAI;IACJ;GACE;;AAIV,SAAS,UAAU,EAAE,WAAW,GAAG,SAAwC;AACzE,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,8BAA8B,UAAU;EACtD,GAAI;GACJ;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAAwC;AAC3E,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,2DAA2D,UAAU;EACnF,GAAI;GACJ;;AAIN,SAAS,SAAS,EAAE,WAAW,GAAG,SAAqC;AACrE,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GACT,+EACA,UACD;EACD,GAAI;GACJ;;AAIN,SAAS,UAAU,EACjB,UACA,WACA,GAAG,SACmD;AACtD,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GACT,sCACA,YAAY,eACZ,UACD;EACD,GAAI;GACJ;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAA0C;AAC9E,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,sCAAsC,UAAU;EAC9D,GAAI;GACJ"}

package/dist/modules/data-tables/components/toolbar.d.mts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime108 from "react/jsx-runtime";
+import { HTMLAttributes } from "react";
+
+//#region src/modules/data-tables/components/toolbar.d.ts
+type TableToolbarProps = HTMLAttributes<HTMLDivElement> & {
+  children: React.ReactNode;
+};
+declare function TableToolbar({
+  children,
+  className,
+  ...props
+}: TableToolbarProps): react_jsx_runtime108.JSX.Element;
+type TableToolbarListProps = HTMLAttributes<HTMLDivElement> & {
+  children: React.ReactNode;
+};
+declare function TableToolbarList({
+  children,
+  className,
+  ...props
+}: TableToolbarListProps): react_jsx_runtime108.JSX.Element;
+//#endregion
+export { TableToolbar, TableToolbarList };
+//# sourceMappingURL=toolbar.d.mts.map

package/dist/modules/data-tables/components/toolbar.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.mts","names":[],"sources":["../../../../src/modules/data-tables/components/toolbar.tsx"],"sourcesContent":[],"mappings":";;;;KAGK,iBAAA,GAAoB,eAAe;YAC5B,KAAA,CAAM;;AADb,iBAIW,YAAA,CAJM;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAI0C,iBAJ1C,CAAA,EAI2D,oBAAA,CAAA,GAAA,CAAA,OAJ3D;KAejB,qBAAA,GAAwB,cAfW,CAeI,cAfJ,CAAA,GAAA;EAAf,QAAA,EAgBb,KAAA,CAAM,SAhBO;CACb;AAAe,iBAkBX,gBAAA,CAlBW;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAkByC,qBAlBzC,CAAA,EAkB8D,oBAAA,CAAA,GAAA,CAAA,OAlB9D"}

package/dist/modules/data-tables/components/toolbar.mjs

@@ -0,0 +1,22 @@
+import { cn } from "../../../lib/utils/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/modules/data-tables/components/toolbar.tsx
+function TableToolbar({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("flex max-w-full justify-between gap-5 overflow-x-auto p-1", className),
+		children
+	});
+}
+function TableToolbarList({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("flex flex-row gap-5", className),
+		children
+	});
+}
+
+//#endregion
+export { TableToolbar, TableToolbarList };
+//# sourceMappingURL=toolbar.mjs.map

package/dist/modules/data-tables/components/toolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.mjs","names":[],"sources":["../../../../src/modules/data-tables/components/toolbar.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils/cn\";\nimport type { HTMLAttributes } from \"react\";\n\ntype TableToolbarProps = HTMLAttributes<HTMLDivElement> & {\n  children: React.ReactNode;\n};\n\nexport function TableToolbar({ children, className, ...props }: TableToolbarProps) {\n  return (\n    <div\n      {...props}\n      className={cn(\"flex max-w-full justify-between gap-5 overflow-x-auto p-1\", className)}\n    >\n      {children}\n    </div>\n  );\n}\n\ntype TableToolbarListProps = HTMLAttributes<HTMLDivElement> & {\n  children: React.ReactNode;\n};\n\nexport function TableToolbarList({ children, className, ...props }: TableToolbarListProps) {\n  return (\n    <div {...props} className={cn(\"flex flex-row gap-5\", className)}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;AAOA,SAAgB,aAAa,EAAE,UAAU,WAAW,GAAG,SAA4B;AACjF,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,GAAG,6DAA6D,UAAU;EAEpF;GACG;;AAQV,SAAgB,iBAAiB,EAAE,UAAU,WAAW,GAAG,SAAgC;AACzF,QACE,oBAAC;EAAI,GAAI;EAAO,WAAW,GAAG,uBAAuB,UAAU;EAC5D;GACG"}