@tulip-systems/core 0.8.3 → 0.9.0

package/dist/src/modules/data-tables/components/filters/date-range.client.d.mts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { SingleParserBuilder } from "nuqs";
+
+//#region src/modules/data-tables/components/filters/date-range.client.d.ts
+type TableFilterDateRangeValue = [Date, Date] | null;
+type TableFilterDateRangeProps = {
+  title?: string;
+  filter: {
+    name: string;
+    parser: SingleParserBuilder<[Date, Date] | null>;
+  };
+  presets?: TableFilterDateRangePreset[];
+};
+type TableFilterDateRangePreset = {
+  label: string;
+  value: [Date, Date];
+};
+declare function TableFilterDateRange({
+  title,
+  filter,
+  presets
+}: TableFilterDateRangeProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TableFilterDateRange, TableFilterDateRangePreset, TableFilterDateRangeProps, TableFilterDateRangeValue };

package/dist/src/modules/data-tables/components/filters/date-range.client.mjs

@@ -0,0 +1,99 @@
+"use client";
+
+import { CalendarIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { startTransition, useState } from "react";
+import { format } from "date-fns";
+import { useQueryState } from "nuqs";
+import { Badge, Button, Separator } from "@tulip-systems/core/components";
+import { Calendar as Calendar$1, Popover, PopoverContent, PopoverTrigger } from "@tulip-systems/core/components/client";
+
+//#region src/modules/data-tables/components/filters/date-range.client.tsx
+function TableFilterDateRange({ title, filter, presets }) {
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useQueryState(filter.name, filter.parser);
+	const from = query?.[0] ?? null;
+	const until = query?.[1] ?? null;
+	const selectedRange = from || until ? {
+		from: from ?? void 0,
+		to: until ?? void 0
+	} : void 0;
+	const label = formatDateRange(from, until);
+	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(CalendarIcon, { className: "mr-1 h-4 w-4" }),
+					title,
+					label && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {
+						orientation: "vertical",
+						className: "mx-2 h-full"
+					}), /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: "rounded-sm px-1 font-normal",
+						children: label
+					})] })
+				]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "w-auto p-0",
+			align: "start",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-3 p-3 lg:flex-row",
+				children: [presets && presets.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "flex min-w-40 flex-col gap-1 lg:border-r lg:pr-3",
+					children: presets.map((preset) => /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "sm",
+						variant: "ghost",
+						className: "justify-start",
+						onClick: () => {
+							setQuery(preset.value, { startTransition });
+							setOpen(false);
+						},
+						children: preset.label
+					}, preset.label))
+				}), /* @__PURE__ */ jsx(Calendar$1, {
+					mode: "range",
+					numberOfMonths: 2,
+					selected: selectedRange,
+					onSelect: (range) => {
+						if (range?.from && range?.to) setQuery([range.from, range.to], { startTransition });
+						else if (range?.from) setQuery([range.from, range.from], { startTransition });
+						else setQuery(null, { startTransition });
+					},
+					autoFocus: true
+				})]
+			}), label && /* @__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);
+						setQuery(null, { startTransition });
+					},
+					className: "w-full text-center",
+					children: "Clear filters"
+				})]
+			})]
+		})]
+	});
+}
+function formatDateRange(from, until) {
+	if (from && until) return `${format(from, "dd/MM/yyyy")} tot ${format(until, "dd/MM/yyyy")}`;
+	if (from) return `Vanaf ${format(from, "dd/MM/yyyy")}`;
+	if (until) return `Tot ${format(until, "dd/MM/yyyy")}`;
+	return null;
+}
+
+//#endregion
+export { TableFilterDateRange };

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

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { SingleParserBuilder } from "nuqs";
+
+//#region src/modules/data-tables/components/filters/search.client.d.ts
+type TableFilterSearchProps = {
+  placeholder?: string;
+  filter: {
+    name: string;
+    parser: SingleParserBuilder<string | null>;
+  };
+};
+declare function TableFilterSearch({
+  placeholder,
+  filter
+}: TableFilterSearchProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TableFilterSearch, TableFilterSearchProps };

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

@@ -0,0 +1,32 @@
+"use client";
+
+import { Input } from "../../../../components/ui/input.mjs";
+import { Search } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { startTransition } from "react";
+import { debounce, useQueryState } from "nuqs";
+
+//#region src/modules/data-tables/components/filters/search.client.tsx
+function TableFilterSearch({ placeholder, filter }) {
+	const [query, setQuery] = useQueryState(filter.name, filter.parser);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ jsx(Input, {
+			defaultValue: query ?? void 0,
+			placeholder,
+			className: "h-8 w-[150px] pl-8 lg:w-[250px]",
+			onChange: (e) => {
+				setQuery(e.target.value || null, {
+					limitUrlUpdates: e.target.value === "" ? void 0 : debounce(350),
+					startTransition
+				});
+			},
+			onKeyDown: (e) => {
+				if (e.key === "Enter") setQuery(e.currentTarget.value || null, { startTransition });
+			}
+		})]
+	});
+}
+
+//#endregion
+export { TableFilterSearch };

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

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

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

@@ -0,0 +1,128 @@
+"use client";
+
+import { Badge } from "../../../../components/ui/badge.mjs";
+import { Button } from "../../../../components/ui/button.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../../components/ui/popover.client.mjs";
+import { Input } from "../../../../components/ui/input.mjs";
+import { Separator } from "../../../../components/ui/separator.mjs";
+import { Slider } from "../../../../components/ui/slider.mjs";
+import { SlidersHorizontal } 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(SlidersHorizontal, { className: "mr-1 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?.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: "flex justify-between text-muted-foreground 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 };

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

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { SingleParserBuilder } from "nuqs";
+
+//#region src/modules/data-tables/components/filters/toggle.client.d.ts
+type TableFilterToggleProps = {
+  title?: string;
+  filter: {
+    name: string;
+    parser: SingleParserBuilder<boolean | null>;
+  };
+};
+declare function TableFilterToggle({
+  title,
+  filter
+}: TableFilterToggleProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TableFilterToggle, TableFilterToggleProps };

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

@@ -0,0 +1,25 @@
+"use client";
+
+import { Toggle } from "../../../../components/ui/toggle.client.mjs";
+import { ToggleLeft } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { startTransition } from "react";
+import { useQueryState } from "nuqs";
+
+//#region src/modules/data-tables/components/filters/toggle.client.tsx
+function TableFilterToggle({ title, filter }) {
+	const [query, setQuery] = useQueryState(filter.name, filter.parser);
+	return /* @__PURE__ */ jsxs(Toggle, {
+		variant: "outline",
+		size: "sm",
+		className: "h-8 border-border border-dashed bg-background data-[state=on]:border-primary data-[state=on]:border-solid data-[state=on]:bg-primary data-[state=on]:text-primary-foreground dark:border-input dark:bg-input/30",
+		pressed: query === true,
+		onPressedChange: (pressed) => startTransition(() => {
+			setQuery(pressed ? true : null);
+		}),
+		children: [/* @__PURE__ */ jsx(ToggleLeft, { className: "mr-2 h-4 w-4" }), title]
+	});
+}
+
+//#endregion
+export { TableFilterToggle };

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

@@ -0,0 +1,28 @@
+"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 };

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

@@ -0,0 +1,40 @@
+import { TableRow } from "./table.mjs";
+import * as react_jsx_runtime0 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_runtime0.JSX.Element;
+/**
+ * DataTableHeaderRow
+ */
+declare const TableHeaderRow: typeof TableRow;
+/**
+ * TableHead
+ */
+declare function TableHead({
+  className,
+  ...props
+}: React.ComponentProps<"th">): react_jsx_runtime0.JSX.Element;
+/**
+ * DataTableHeaderCell
+ */
+type DataTableHeaderCellProps<TData> = {
+  header: Header<TData, unknown>;
+};
+declare function TableHeaderCell<TData>({
+  header
+}: DataTableHeaderCellProps<TData>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TableHead, TableHeader, TableHeaderCell, TableHeaderProps, TableHeaderRow };

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

@@ -0,0 +1,43 @@
+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("h-10 whitespace-nowrap bg-muted/70 px-2 text-left align-middle font-medium text-muted-foreground", 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 };

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

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime0 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_runtime0.JSX.Element;
+//#endregion
+export { TableLayout };

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

@@ -0,0 +1,14 @@
+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 };

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

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

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

@@ -0,0 +1,19 @@
+"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 };

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

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

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

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

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

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime0 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_runtime0.JSX.Element;
+declare function TableBody({
+  className,
+  ...props
+}: React$1.ComponentProps<"tbody">): react_jsx_runtime0.JSX.Element;
+declare function TableFooter({
+  className,
+  ...props
+}: React$1.ComponentProps<"tfoot">): react_jsx_runtime0.JSX.Element;
+declare function TableRow({
+  className,
+  ...props
+}: React$1.ComponentProps<"tr">): react_jsx_runtime0.JSX.Element;
+declare function TableCell({
+  readonly,
+  className,
+  ...props
+}: React$1.ComponentProps<"td"> & {
+  readonly?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+declare function TableCaption({
+  className,
+  ...props
+}: React$1.ComponentProps<"caption">): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableRow };

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

@@ -0,0 +1,55 @@
+"use client";
+
+import { cn } from "../../../lib/utils/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#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("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+		...props
+	});
+}
+function TableRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tr", {
+		"data-slot": "table-row",
+		className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", 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("mt-4 text-muted-foreground text-sm", className),
+		...props
+	});
+}
+
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableRow };