ixia-ui-react 1.8.0 → 2.0.0

package/dist/table/index.js

@@ -0,0 +1,1544 @@
+import { t as cn } from "../cn-BDi0DfT5.js";
+import { t as formatDate } from "../utils-BI2x7nW5.js";
+import { n as Icon } from "../icon-D3JWfCa2.js";
+import { t as Button } from "../button-BpUC-R1J.js";
+import { t as Avatar } from "../avatar-Bp4gZh21.js";
+import { t as Badge } from "../badge-Cl-9WTW-.js";
+import { a as SelectPopup, c as SelectIcon, i as SelectTitle, n as SelectValue, o as SelectList, r as SelectTrigger, s as SelectItem, t as Select } from "../select-DncJXYim.js";
+import { t as Checkbox } from "../checkbox-BuUZ1Lly.js";
+import { i as TabsList, n as TabsTab, o as Tabs } from "../tabs-DTC7coap.js";
+import { i as InputGroupAddon, r as InputGroupInput, t as InputGroup } from "../input-group-CgdazGrY.js";
+import { c as PopoverContent, i as PopoverPanel, n as PopoverTrigger, o as PopoverHeader, r as PopoverTitle, t as Popover } from "../popover-B1s4xXrX.js";
+import { t as Meter } from "../meter-HD5taq57.js";
+import { t as Field } from "../field-DTL7eA5y.js";
+import { n as Radio } from "../radio-group-Dj43u35Z.js";
+import { d as FormFooter, n as useAppForm, t as Form } from "../form-BxMg796f.js";
+import { c as MenuRadioGroup, i as MenuSubmenu, l as MenuPopup, n as MenuTrigger, p as MenuCheckboxItem, r as MenuSubmenuTrigger, s as MenuRadioItem, t as Menu, u as MenuItem } from "../menu-sf13cnGp.js";
+import { cva } from "class-variance-authority";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { assignTableAPIs, columnFacetingFeature, columnFilteringFeature, columnSizingFeature, columnVisibilityFeature, constructFilterFn, createFacetedRowModel, createFacetedUniqueValues, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, createTableHook, createTableHookContexts, filterFn_arrHas, filterFn_arrIncludes, filterFn_arrIncludesAll, filterFn_arrIncludesSome, filterFn_between, filterFn_betweenInclusive, filterFn_empty, filterFn_endsWith, filterFn_equals, filterFn_equalsString, filterFn_equalsStringSensitive, filterFn_inDateRange, filterFn_inNumberRange, filterFn_includesString, filterFn_includesStringSensitive, filterFn_notEmpty, filterFn_startsWith, filterFn_weakEquals, functionalUpdate, globalFilteringFeature, makeStateUpdater, metaHelper, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures } from "@tanstack/react-table";
+import { z } from "zod";
+import { useSelector } from "@tanstack/react-store";
+// src/components/table/table.types.ts
+const tableContainerVariants = cva("group/table flex min-w-0 flex-col gap-0", {
+	defaultVariants: { variant: "outline" },
+	variants: { variant: {
+		ghost: "",
+		outline: "overflow-hidden rounded-2xl border border-border"
+	} }
+});
+const stringFilterOperators = [
+	"equals",
+	"notEquals",
+	"contains",
+	"notContains",
+	"startsWith",
+	"endsWith"
+];
+const numberFilterOperators = [
+	"equals",
+	"notEquals",
+	"greaterThan",
+	"lessThan",
+	"between"
+];
+const dateFilterOperators = [
+	"equals",
+	"notEquals",
+	"greaterThan",
+	"lessThan",
+	"between"
+];
+const defaultFilterOperatorLabels = {
+	between: "Is between",
+	contains: "Contains",
+	endsWith: "Ends with",
+	equals: "Is",
+	greaterThan: "Is greater than",
+	lessThan: "Is less than",
+	notContains: "Does not contain",
+	notEquals: "Is not",
+	startsWith: "Starts with"
+};
+const dateFilterSchema = z.object({
+	filterOperator: z.enum(dateFilterOperators),
+	filterValueFrom: z.union([z.literal(""), z.iso.date()]),
+	filterValueTo: z.union([z.literal(""), z.iso.date()])
+});
+const stringFilterSchema = z.object({
+	filterOperator: z.enum(stringFilterOperators),
+	filterValue: z.string()
+});
+const numberFilterSchema = z.object({
+	filterOperator: z.enum(numberFilterOperators),
+	filterValueFrom: z.string(),
+	filterValueTo: z.string()
+});
+// src/components/table/table.utils.ts
+function getColumnHeaderLabel(column) {
+	const { header } = column.columnDef;
+	if (typeof header === "string" && header !== "") return header;
+	return column.id;
+}
+function asFilterValue(value) {
+	return value;
+}
+const ZERO$1 = 0;
+const FIRST_RANGE_INDEX$1 = 0;
+const SECOND_RANGE_INDEX = 1;
+const getDateTimestamp = (date) => Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
+const selectFilterFn = constructFilterFn({
+	autoRemove: (value) => !value?.length,
+	filter: (dataValue, filterValue) => filterValue.includes(dataValue)
+});
+const parseToTimestamp = (value) => {
+	if (!value) return;
+	const parsed = new Date(value);
+	if (Number.isNaN(parsed.getTime())) return;
+	return getDateTimestamp(parsed);
+};
+const normalizeDataValue = (value) => {
+	if (value instanceof Date) return getDateTimestamp(value);
+	if (typeof value === "number") return getDateTimestamp(new Date(value));
+	if (typeof value === "string") return parseToTimestamp(value) ?? ZERO$1;
+	return ZERO$1;
+};
+const dateFilterFn = constructFilterFn({
+	autoRemove: (value) => !value || !value.date[FIRST_RANGE_INDEX$1] && !value.date[SECOND_RANGE_INDEX],
+	filter: (dataValue, filterValue) => {
+		const { operator, from, to } = filterValue;
+		switch (operator) {
+			case "equals": return from !== void 0 && dataValue === from;
+			case "notEquals": return from !== void 0 && dataValue !== from;
+			case "greaterThan": return from !== void 0 && dataValue > from;
+			case "lessThan": return from !== void 0 && dataValue < from;
+			case "between": return from !== void 0 && to !== void 0 && dataValue >= from && dataValue <= to;
+			default: return true;
+		}
+	},
+	resolveDataValue: normalizeDataValue,
+	resolveFilterValue: (value) => ({
+		from: parseToTimestamp(value.date[FIRST_RANGE_INDEX$1]),
+		operator: value.operator,
+		to: parseToTimestamp(value.date[SECOND_RANGE_INDEX])
+	})
+});
+const stringFilterFn = constructFilterFn({
+	autoRemove: (value) => !value || value.value === "",
+	filter: (dataValue, filterValue) => {
+		const { operator, value } = filterValue, normalizedDataValue = dataValue.toLocaleLowerCase(), normalizedFilterValue = value.toLocaleLowerCase();
+		switch (operator) {
+			case "equals": return normalizedDataValue === normalizedFilterValue;
+			case "notEquals": return normalizedDataValue !== normalizedFilterValue;
+			case "contains": return normalizedDataValue.includes(normalizedFilterValue);
+			case "notContains": return !normalizedDataValue.includes(normalizedFilterValue);
+			case "startsWith": return normalizedDataValue.startsWith(normalizedFilterValue);
+			case "endsWith": return normalizedDataValue.endsWith(normalizedFilterValue);
+			default: return true;
+		}
+	},
+	resolveDataValue: (value) => {
+		if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return String(value);
+		return "";
+	}
+});
+const parseToNumber = (value) => {
+	if (value.trim() === "") return;
+	const parsed = Number(value);
+	if (!Number.isFinite(parsed)) return;
+	return parsed;
+};
+const numberFilterFn = constructFilterFn({
+	autoRemove: (value) => !value || value.number[FIRST_RANGE_INDEX$1] === "" && value.number[SECOND_RANGE_INDEX] === "",
+	filter: (dataValue, filterValue) => {
+		const { operator, from, to } = filterValue;
+		switch (operator) {
+			case "equals": return from !== void 0 && dataValue === from;
+			case "notEquals": return from !== void 0 && dataValue !== from;
+			case "greaterThan": return from !== void 0 && dataValue > from;
+			case "lessThan": return from !== void 0 && dataValue < from;
+			case "between": return (from === void 0 || dataValue >= from) && (to === void 0 || dataValue <= to);
+			default: return true;
+		}
+	},
+	resolveDataValue: (value) => Number(value),
+	resolveFilterValue: (value) => {
+		const from = parseToNumber(value.number[FIRST_RANGE_INDEX$1]), to = parseToNumber(value.number[SECOND_RANGE_INDEX]);
+		if (from !== void 0 && to !== void 0 && from > to) return {
+			from: to,
+			operator: value.operator,
+			to: from
+		};
+		return {
+			from,
+			operator: value.operator,
+			to
+		};
+	}
+});
+// src/components/table/table-feature-context.ts
+const features = tableFeatures({
+	columnFacetingFeature,
+	columnFilteringFeature,
+	columnMeta: metaHelper(),
+	columnSizingFeature,
+	columnVisibilityFeature,
+	datasetPlugin: {
+		constructTableAPIs: (table) => {
+			const options = table.options;
+			assignTableAPIs("datasetPlugin", table, { table_setCurrentDataset: { fn: (updater) => {
+				const safeUpdater = (old) => functionalUpdate(updater, old);
+				return options.onCurrentDatasetChange?.(safeUpdater);
+			} } });
+		},
+		getDefaultTableOptions: (table) => ({ onCurrentDatasetChange: makeStateUpdater("currentDataset", table) }),
+		getInitialState: (initialState) => ({
+			currentDataset: {
+				data: [],
+				id: "",
+				name: ""
+			},
+			datasets: [],
+			...initialState
+		})
+	},
+	facetedRowModel: createFacetedRowModel(),
+	facetedUniqueValues: createFacetedUniqueValues(),
+	filterFns: {
+		arrHas: filterFn_arrHas,
+		arrIncludes: filterFn_arrIncludes,
+		arrIncludesAll: filterFn_arrIncludesAll,
+		arrIncludesSome: filterFn_arrIncludesSome,
+		between: filterFn_between,
+		betweenInclusive: filterFn_betweenInclusive,
+		date: dateFilterFn,
+		empty: filterFn_empty,
+		endsWith: filterFn_endsWith,
+		equals: filterFn_equals,
+		equalsString: filterFn_equalsString,
+		equalsStringSensitive: filterFn_equalsStringSensitive,
+		inDateRange: filterFn_inDateRange,
+		inNumberRange: filterFn_inNumberRange,
+		includesString: filterFn_includesString,
+		includesStringSensitive: filterFn_includesStringSensitive,
+		notEmpty: filterFn_notEmpty,
+		number: numberFilterFn,
+		select: selectFilterFn,
+		startsWith: filterFn_startsWith,
+		string: stringFilterFn,
+		weakEquals: filterFn_weakEquals
+	},
+	filteredRowModel: createFilteredRowModel(),
+	globalFilteringFeature,
+	paginatedRowModel: createPaginatedRowModel(),
+	rowPaginationFeature,
+	rowSelectionFeature,
+	rowSortingFeature,
+	sortFns: {
+		alphanumeric: sortFn_alphanumeric,
+		basic: sortFn_basic,
+		datetime: sortFn_datetime,
+		text: sortFn_text
+	},
+	sortedRowModel: createSortedRowModel(),
+	tableMeta: metaHelper(),
+	viewModePlugin: {
+		constructTableAPIs: (table) => {
+			const options = table.options;
+			assignTableAPIs("viewModePlugin", table, {
+				table_setViewMode: { fn: (updater) => {
+					const safeUpdater = (old) => {
+						return functionalUpdate(updater, old);
+					};
+					return options.onViewModeChange?.(safeUpdater);
+				} },
+				table_toggleViewMode: { fn: (value) => {
+					const safeUpdater = (old) => {
+						if (value) return value;
+						if (old === "list") return "grid";
+						return "list";
+					};
+					return options.onViewModeChange?.(safeUpdater);
+				} }
+			});
+		},
+		getDefaultTableOptions: (table) => ({
+			enableViewModeToggle: true,
+			onViewModeChange: makeStateUpdater("viewMode", table)
+		}),
+		getInitialState: (initialState) => ({
+			viewMode: "list",
+			...initialState
+		})
+	}
+}), { tableContext, cellContext, headerContext, useTableContext: useTableContext$1, useCellContext: useCellContext$1, useHeaderContext: useHeaderContext$1 } = createTableHookContexts();
+// src/components/table/table-avatar-cell.tsx
+function TableAvatarCell({ fallback, className, children, ref, ...props }) {
+	const value = useCellContext$1().getValue();
+	return /* @__PURE__ */ jsxs(Avatar, {
+		className: cn("", className),
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Avatar.Image, { src: value }),
+			fallback && /* @__PURE__ */ jsx(Avatar.Fallback, { children: fallback }),
+			children
+		]
+	});
+}
+// src/components/table/table-badge-cell.tsx
+function resolveTone(tone, value) {
+	if (typeof tone === "function") return tone(value);
+	return tone;
+}
+function TableBadgeCell({ className, children, ref, tone, ...props }) {
+	const value = useCellContext$1().getValue(), resolvedTone = resolveTone(tone, value);
+	return /* @__PURE__ */ jsxs(Badge, {
+		variant: "soft",
+		className: cn("", className),
+		ref,
+		tone: resolvedTone,
+		...props,
+		children: [children, value]
+	});
+}
+// src/components/table/table-body.tsx
+function TableBody({ showDivider = true, className, ref, ...props }) {
+	const table = useTableContext$1();
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state,
+		children: (state) => {
+			if (state.viewMode === "grid") return /* @__PURE__ */ jsx("ul", {
+				className: cn("grid auto-rows-fr grid-cols-[repeat(auto-fill,minmax(252px,1fr))] gap-sm overflow-y-auto border-border group-data-[variant=outline]/table:border-y group-data-[variant=outline]/table:p-md", className),
+				children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx("li", {
+					className: "min-w-0",
+					children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(table.AppCell, {
+						cell,
+						children: (renderedCell) => /* @__PURE__ */ jsx("div", {
+							className: "w-full",
+							children: /* @__PURE__ */ jsx(table.FlexRender, { cell: renderedCell })
+						})
+					}, cell.id))
+				}, row.id))
+			});
+			return /* @__PURE__ */ jsx("tbody", {
+				className: cn(showDivider && "divide-y divide-border", "overflow-y-auto", className),
+				ref,
+				...props,
+				children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx("tr", {
+					className: cn(row.getIsSelected() && "bg-neutral-container-low"),
+					children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(table.AppCell, {
+						cell,
+						children: (renderedCell) => /* @__PURE__ */ jsx("td", {
+							style: { width: renderedCell.column.getSize() },
+							className: cn("h-2xl p-xs", className),
+							children: /* @__PURE__ */ jsx(table.FlexRender, { cell: renderedCell })
+						})
+					}, cell.id))
+				}, row.id))
+			});
+		}
+	});
+}
+// src/components/table/table-boolean-cell.tsx
+function TableBooleanCell({ trueLabel = "Yes", falseLabel = "No", children, ...props }) {
+	const value = useCellContext$1().getValue();
+	if (value === void 0 || value === null) return;
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		children: [
+			children,
+			value && trueLabel,
+			!value && falseLabel
+		]
+	});
+}
+// src/components/table/table-bottom-bar.tsx
+function TableBottomBar({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("mt-auto flex w-full flex-wrap items-center justify-between pt-md group-data-[variant=outline]/table:border-t group-data-[variant=outline]/table:border-border", "in-data-[slot=table-container]:sticky in-data-[slot=table-container]:bottom-0 in-data-[slot=table-container]:z-10 in-data-[slot=table-container]:bg-inherit", className),
+		"data-slot": "table-bottom-bar",
+		ref,
+		...props
+	});
+}
+// src/components/table/table-checkbox-cell.tsx
+function TableCheckboxCell({ className, ref, ...props }) {
+	const cell = useCellContext$1(), table = useTableContext$1(), { row } = cell;
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state.rowSelection,
+		children: () => /* @__PURE__ */ jsx(Checkbox, {
+			variant: "outline",
+			"aria-label": "Select row",
+			checked: row.getIsSelected() || row.getCanSelectSubRows() && row.getIsAllSubRowsSelected(),
+			disabled: !row.getCanSelect(),
+			indeterminate: row.getIsSomeSelected(),
+			onCheckedChange: (checked) => row.toggleSelected(checked),
+			className: cn("mx-auto flex", className),
+			ref,
+			...props
+		})
+	});
+}
+// src/components/table/table-checkbox-header.tsx
+function TableCheckboxHeader({ className, ref, ...props }) {
+	const table = useTableContext$1();
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state.rowSelection,
+		children: () => {
+			const allRowsSelected = table.getIsAllRowsSelected();
+			return /* @__PURE__ */ jsx(Checkbox, {
+				"aria-label": "Select all rows",
+				variant: "outline",
+				checked: allRowsSelected,
+				indeterminate: !allRowsSelected && table.getIsSomeRowsSelected(),
+				onCheckedChange: (checked) => table.toggleAllRowsSelected(checked),
+				className: cn("mx-auto flex", className),
+				ref,
+				...props
+			});
+		}
+	});
+}
+// src/components/table/table-column-toggle.tsx
+function TableColumnToggle({ className, ref, ...props }) {
+	const table = useTableContext$1(), handleToggleColumn = (columnId) => {
+		table.getColumn(columnId)?.toggleVisibility();
+	};
+	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+		className: cn("shrink-0", className),
+		ref,
+		...props
+	}), /* @__PURE__ */ jsx(MenuPopup, { children: table.getAllColumns().flatMap((column) => {
+		if (!column.getCanHide()) return [];
+		return /* @__PURE__ */ jsx(MenuCheckboxItem, {
+			checked: column.getIsVisible(),
+			onCheckedChange: () => handleToggleColumn(column.id),
+			children: getColumnHeaderLabel(column)
+		}, column.id);
+	}) })] });
+}
+// src/components/table/table-container.tsx
+function TableContainer({ variant = "outline", className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-container",
+		"data-variant": variant,
+		className: cn(tableContainerVariants({ variant }), className),
+		ref,
+		...props
+	});
+}
+// src/components/table/table-currency-cell.tsx
+function TableCurrencyCell({ currency, locale, options, children, ...props }) {
+	const value = useCellContext$1().getValue();
+	if (value === void 0 || value === null) return;
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		children: [children, new Intl.NumberFormat(locale, {
+			...options,
+			currency,
+			style: "currency"
+		}).format(value)]
+	});
+}
+// src/components/table/table-dataset-tab.tsx
+function TableDatasetTab({ className, children, ref, ...props }) {
+	const table = useTableContext$1(), datasets = useSelector(table.atoms.datasets), currentDataset = useSelector(table.atoms.currentDataset), handleTabChange = (datasetId) => {
+		const dataset = datasets.find((candidate) => candidate.id === datasetId);
+		if (!dataset) return;
+		table.setCurrentDataset(dataset);
+	};
+	return /* @__PURE__ */ jsxs(Tabs, {
+		value: currentDataset.id,
+		onValueChange: handleTabChange,
+		className: cn(className),
+		ref,
+		...props,
+		"data-slot": "table-dataset-tab",
+		children: [children, /* @__PURE__ */ jsx(TabsList, { children: datasets.map((dataset) => /* @__PURE__ */ jsx(TabsTab, {
+			value: dataset.id,
+			children: dataset.name
+		}, dataset.id)) })]
+	});
+}
+// src/components/table/table-date-time-cell.tsx
+function TableDateTimeCell({ locale, options, className, children, ref, ...props }) {
+	const date = useCellContext$1().getValue();
+	if (!date) return;
+	if (Number.isNaN(date.getTime())) return "Invalid date";
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("", className),
+		ref,
+		...props,
+		children: [children, formatDate(date, locale, options)]
+	});
+}
+// src/components/table/table-empty.tsx
+const EMPTY_LIMIT = 0;
+function TableEmpty({ className, children, ref, ...props }) {
+	const table = useTableContext$1();
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state.globalFilter,
+		children: () => table.getFilteredRowModel().rows.length <= EMPTY_LIMIT && /* @__PURE__ */ jsx("div", {
+			"data-slot": "table-empty",
+			className: cn("flex w-full min-w-0 flex-col items-center justify-center gap-md px-md py-3xl text-center", className),
+			ref,
+			...props,
+			children
+		})
+	});
+}
+// src/components/table/table-empty-content.tsx
+function TableEmptyContent({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full max-w-[28rem] min-w-0 flex-col items-center gap-2xs", className),
+		ref,
+		...props,
+		children
+	});
+}
+// src/components/table/table-empty-description.tsx
+function TableEmptyDescription({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("block max-w-[28rem] style-text-default--1 text-pretty wrap-break-word text-on-surface-variant", className),
+		ref,
+		...props,
+		children
+	});
+}
+// src/components/table/table-empty-footer.tsx
+function TableEmptyFooter({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full flex-wrap items-center justify-center gap-xs", className),
+		ref,
+		...props,
+		children
+	});
+}
+// src/components/table/table-empty-header.tsx
+function TableEmptyHeader({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full max-w-[28rem] flex-col items-center gap-sm", className),
+		ref,
+		...props,
+		children
+	});
+}
+// src/components/table/table-empty-title.tsx
+function TableEmptyTitle({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("block style-text-strong-1 text-balance text-on-surface", className),
+		ref,
+		...props,
+		children
+	});
+}
+// src/components/table/table-date-filter-form.tsx
+const FROM_DATE_INDEX = 0;
+const TO_DATE_INDEX = 1;
+function TableDateFilterForm({ column, className, children, ref, ...props }) {
+	const table = useTableContext$1(), filterOperatorLabels = table.options.meta?.translations?.filterOperatorLabels, buttonLabels = table.options.meta?.translations?.buttonLabels ?? {
+		apply: "Apply",
+		reset: "Reset"
+	}, currentFilter = asFilterValue(column.getFilterValue()), form = useAppForm({
+		defaultValues: {
+			filterOperator: currentFilter?.operator ?? "equals",
+			filterValueFrom: currentFilter?.date[FROM_DATE_INDEX] ?? "",
+			filterValueTo: currentFilter?.date[TO_DATE_INDEX] ?? ""
+		},
+		onSubmit: ({ value }) => {
+			column.setFilterValue({
+				date: [value.filterValueFrom, value.filterValueTo],
+				operator: value.filterOperator
+			});
+		},
+		validators: { onSubmit: dateFilterSchema }
+	}), onReset = () => {
+		column.setFilterValue(void 0);
+		form.reset();
+	};
+	return /* @__PURE__ */ jsx(Form, {
+		onSubmit: async (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			await form.handleSubmit();
+		},
+		onReset,
+		className: cn("", className),
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsxs(form.AppForm, { children: [
+			children,
+			/* @__PURE__ */ jsx(form.Errors, {}),
+			/* @__PURE__ */ jsx(form.Set, { children: /* @__PURE__ */ jsx(form.SetHeading, { children: /* @__PURE__ */ jsx(form.SetContent, { children: /* @__PURE__ */ jsx(Field, { children: /* @__PURE__ */ jsx(form.AppField, {
+				name: "filterOperator",
+				children: (field) => /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(field.Errors, {}), /* @__PURE__ */ jsx(field.RadioGroup, { children: dateFilterOperators.map((operator) => /* @__PURE__ */ jsxs(field.Set, { children: [/* @__PURE__ */ jsx(Radio, {
+					value: operator,
+					variant: "inSurface",
+					children: filterOperatorLabels?.[operator] ?? defaultFilterOperatorLabels[operator]
+				}), field.state.value === operator && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(form.AppField, {
+					name: "filterValueFrom",
+					children: (valueField) => /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(valueField.Errors, {}), /* @__PURE__ */ jsx(valueField.Input, {
+						type: "date",
+						variant: "secondary"
+					})] })
+				}), operator === "between" && /* @__PURE__ */ jsx(form.AppField, {
+					name: "filterValueTo",
+					children: (valueField) => /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(valueField.Errors, {}), /* @__PURE__ */ jsx(valueField.Input, {
+						type: "date",
+						variant: "secondary"
+					})] })
+				})] })] }, operator)) })] })
+			}) }) }) }) }),
+			/* @__PURE__ */ jsxs(form.Footer, { children: [/* @__PURE__ */ jsx(form.Reset, { children: buttonLabels.reset }), /* @__PURE__ */ jsx(form.Submit, { children: buttonLabels.apply })] })
+		] })
+	});
+}
+// src/components/table/table-date-filter-chip.tsx
+const FIRST_DATE_INDEX = 0;
+const LAST_DATE_INDEX = 1;
+function getDateFilterLabel(date) {
+	if (Array.isArray(date)) {
+		if (date[LAST_DATE_INDEX] !== "") return date.join(" - ");
+		return date[FIRST_DATE_INDEX];
+	}
+	return date;
+}
+function TableDateFilterChip({ column, className, children, ref, ...props }) {
+	const filterOperatorLabels = useTableContext$1().options.meta?.translations?.filterOperatorLabels, columnFilter = asFilterValue(column.getFilterValue());
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		className: cn("", className),
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsxs(Button, {
+			tone: "neutral",
+			size: "extraSmall",
+			variant: "soft",
+			children: [
+				/* @__PURE__ */ jsx(Icon, { name: "filter" }),
+				/* @__PURE__ */ jsx("span", { children: getColumnHeaderLabel(column) }),
+				/* @__PURE__ */ jsx("span", {
+					className: "lowercase",
+					children: filterOperatorLabels?.[columnFilter.operator] ?? defaultFilterOperatorLabels[columnFilter.operator]
+				}),
+				/* @__PURE__ */ jsx("span", { children: getDateFilterLabel(columnFilter.date) })
+			]
+		})
+	}), /* @__PURE__ */ jsx(PopoverPanel, { children: /* @__PURE__ */ jsxs(PopoverHeader, { children: [/* @__PURE__ */ jsx(PopoverTitle, { children: getColumnHeaderLabel(column) }), /* @__PURE__ */ jsxs(PopoverContent, { children: [children, /* @__PURE__ */ jsx(TableDateFilterForm, { column })] })] }) })] }, column.id);
+}
+// src/components/table/table-number-filter-form.tsx
+const FROM_VALUE_INDEX = 0;
+const TO_VALUE_INDEX = 1;
+function TableNumberFilterForm({ column, className, children, ref, ...props }) {
+	const table = useTableContext$1(), filterOperatorLabels = table.options.meta?.translations?.filterOperatorLabels, buttonLabels = table.options.meta?.translations?.buttonLabels ?? {
+		apply: "Apply",
+		reset: "Reset"
+	}, currentFilter = asFilterValue(column.getFilterValue()), form = useAppForm({
+		defaultValues: {
+			filterOperator: currentFilter?.operator ?? "equals",
+			filterValueFrom: currentFilter?.number[FROM_VALUE_INDEX] ?? "",
+			filterValueTo: currentFilter?.number[TO_VALUE_INDEX] ?? ""
+		},
+		onSubmit: ({ value }) => {
+			column.setFilterValue({
+				number: [value.filterValueFrom, value.filterValueTo],
+				operator: value.filterOperator
+			});
+		},
+		validators: { onSubmit: numberFilterSchema }
+	}), onReset = () => {
+		column.setFilterValue(void 0);
+		form.reset({
+			filterOperator: "equals",
+			filterValueFrom: "",
+			filterValueTo: ""
+		});
+	};
+	return /* @__PURE__ */ jsx(Form, {
+		onSubmit: async (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			await form.handleSubmit();
+		},
+		onReset,
+		className: cn("", className),
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsxs(form.AppForm, { children: [
+			children,
+			/* @__PURE__ */ jsx(form.Errors, {}),
+			/* @__PURE__ */ jsx(form.Set, { children: /* @__PURE__ */ jsx(form.SetContent, { children: /* @__PURE__ */ jsx(form.AppField, {
+				name: "filterOperator",
+				children: (field) => /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(field.Errors, {}), /* @__PURE__ */ jsx(field.RadioGroup, { children: numberFilterOperators.map((operator) => /* @__PURE__ */ jsxs(field.Set, { children: [/* @__PURE__ */ jsx(Radio, {
+					value: operator,
+					variant: "inSurface",
+					children: filterOperatorLabels?.[operator] ?? defaultFilterOperatorLabels[operator]
+				}), field.state.value === operator && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(form.AppField, {
+					name: "filterValueFrom",
+					children: (valueField) => /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(valueField.Errors, {}), /* @__PURE__ */ jsx(valueField.Input, {
+						"aria-label": `${column.id} filter value`,
+						type: "number",
+						variant: "secondary"
+					})] })
+				}), operator === "between" && /* @__PURE__ */ jsx(form.AppField, {
+					name: "filterValueTo",
+					children: (valueField) => /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(valueField.Errors, {}), /* @__PURE__ */ jsx(valueField.Input, {
+						"aria-label": `${column.id} maximum filter value`,
+						type: "number",
+						variant: "secondary"
+					})] })
+				})] })] }, operator)) })] })
+			}) }) }),
+			/* @__PURE__ */ jsxs(form.Footer, { children: [/* @__PURE__ */ jsx(form.Reset, { children: buttonLabels.reset }), /* @__PURE__ */ jsx(form.Submit, { children: buttonLabels.apply })] })
+		] })
+	});
+}
+// src/components/table/table-number-filter-chip.tsx
+const FIRST_RANGE_INDEX = 0;
+function getFilterDisplayValue(filterValue) {
+	if (filterValue.operator === "between") return filterValue.number.filter(Boolean).join(" - ");
+	return filterValue.number[FIRST_RANGE_INDEX];
+}
+function TableNumberFilterChip({ column, className, children, ref, ...props }) {
+	const filterOperatorLabels = useTableContext$1().options.meta?.translations?.filterOperatorLabels, columnFilter = asFilterValue(column.getFilterValue()), filterValue = getFilterDisplayValue(columnFilter);
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		className: cn("", className),
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsxs(Button, {
+			tone: "neutral",
+			size: "extraSmall",
+			variant: "soft",
+			children: [
+				/* @__PURE__ */ jsx(Icon, { name: "filter" }),
+				/* @__PURE__ */ jsx("span", { children: getColumnHeaderLabel(column) }),
+				/* @__PURE__ */ jsx("span", {
+					className: "font-light lowercase",
+					children: filterOperatorLabels?.[columnFilter.operator] ?? defaultFilterOperatorLabels[columnFilter.operator]
+				}),
+				/* @__PURE__ */ jsx("span", { children: filterValue }),
+				children
+			]
+		})
+	}), /* @__PURE__ */ jsxs(PopoverPanel, { children: [/* @__PURE__ */ jsx(PopoverHeader, { children: /* @__PURE__ */ jsx(PopoverTitle, { children: getColumnHeaderLabel(column) }) }), /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(TableNumberFilterForm, { column }) })] })] });
+}
+// src/components/table/table-select-filter-form.tsx
+const EMPTY_FILTER_COUNT = 0;
+const isSelectFilterOption = (value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+const isSelectFilterValue = (value) => Array.isArray(value) && value.every(isSelectFilterOption);
+const getSelectValueLabel = (value) => {
+	if (isSelectFilterValue(value)) return value.map(String).join(", ");
+	return "Select values";
+};
+function TableSelectFilterForm({ column, className, children, ref, ...props }) {
+	const table = useTableContext$1(), currentFilter = column.getFilterValue(), buttonLabels = table.options.meta?.translations?.buttonLabels ?? {
+		apply: "Apply",
+		reset: "Reset"
+	}, [filterValue, setFilterValue] = useState(() => {
+		if (isSelectFilterValue(currentFilter)) return currentFilter;
+		return [];
+	}), options = [...column.getFacetedUniqueValues().keys()].filter(isSelectFilterOption).toSorted((left, right) => String(left).localeCompare(String(right)));
+	return /* @__PURE__ */ jsxs(Form, {
+		className: cn("", className),
+		onReset: () => {
+			column.setFilterValue(void 0);
+			setFilterValue([]);
+		},
+		onSubmit: (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			if (filterValue.length > EMPTY_FILTER_COUNT) column.setFilterValue(filterValue);
+		},
+		ref,
+		...props,
+		children: [
+			children,
+			/* @__PURE__ */ jsxs(Select, {
+				multiple: true,
+				value: filterValue,
+				onValueChange: (value) => {
+					if (isSelectFilterValue(value)) setFilterValue(value);
+				},
+				children: [/* @__PURE__ */ jsxs(SelectTrigger, {
+					"aria-label": `${column.id} filter value`,
+					variant: "secondary",
+					children: [/* @__PURE__ */ jsx(SelectValue, {
+						placeholder: "Select values",
+						children: (value) => getSelectValueLabel(value)
+					}), /* @__PURE__ */ jsx(SelectIcon, { children: /* @__PURE__ */ jsx(Icon, { name: "chevronsUpDown" }) })]
+				}), /* @__PURE__ */ jsx(SelectPopup, {
+					alignItemWithTrigger: false,
+					sideOffset: 8,
+					children: /* @__PURE__ */ jsx(SelectList, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+						value: option,
+						children: /* @__PURE__ */ jsx(SelectTitle, { children: String(option) })
+					}, `${typeof option}:${String(option)}`)) })
+				})]
+			}),
+			/* @__PURE__ */ jsxs(FormFooter, { children: [/* @__PURE__ */ jsx(Button, {
+				className: "w-full",
+				tone: "neutral",
+				type: "reset",
+				variant: "outline",
+				children: buttonLabels.reset
+			}), /* @__PURE__ */ jsx(Button, {
+				className: "w-full",
+				disabled: filterValue.length === EMPTY_FILTER_COUNT,
+				type: "submit",
+				children: buttonLabels.apply
+			})] })
+		]
+	});
+}
+// src/components/table/table-select-filter-chip.tsx
+function TableSelectFilterChip({ column, className, children, ref, ...props }) {
+	const columnFilter = asFilterValue(column.getFilterValue()), header = getColumnHeaderLabel(column);
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		className: cn("", className),
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsxs(Button, {
+			size: "extraSmall",
+			variant: "soft",
+			children: [
+				/* @__PURE__ */ jsx(Icon, { name: "filter" }),
+				/* @__PURE__ */ jsx("span", { children: header }),
+				/* @__PURE__ */ jsx("span", {
+					className: "font-light lowercase",
+					children: columnFilter.map(String).join(", ")
+				}),
+				children
+			]
+		})
+	}), /* @__PURE__ */ jsxs(PopoverPanel, { children: [/* @__PURE__ */ jsx(PopoverHeader, { children: /* @__PURE__ */ jsx(PopoverTitle, { children: header }) }), /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(TableSelectFilterForm, { column }) })] })] });
+}
+// src/components/table/table-string-filter-form.tsx
+function TableStringFilterForm({ column, className, children, ref, ...props }) {
+	const table = useTableContext$1(), filterOperatorLabels = table.options.meta?.translations?.filterOperatorLabels, buttonLabels = table.options.meta?.translations?.buttonLabels ?? {
+		apply: "Apply",
+		reset: "Reset"
+	}, currentFilter = asFilterValue(column.getFilterValue()), form = useAppForm({
+		defaultValues: {
+			filterOperator: currentFilter?.operator ?? "contains",
+			filterValue: currentFilter?.value ?? ""
+		},
+		onSubmit: ({ value }) => {
+			column.setFilterValue({
+				operator: value.filterOperator,
+				value: value.filterValue
+			});
+		},
+		validators: { onSubmit: stringFilterSchema }
+	}), onReset = () => {
+		column.setFilterValue(void 0);
+		form.reset({
+			filterOperator: "contains",
+			filterValue: ""
+		});
+	};
+	return /* @__PURE__ */ jsx(Form, {
+		onSubmit: async (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			await form.handleSubmit();
+		},
+		onReset,
+		className: cn("", className),
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsxs(form.AppForm, { children: [
+			children,
+			/* @__PURE__ */ jsx(form.Errors, {}),
+			/* @__PURE__ */ jsx(form.Set, { children: /* @__PURE__ */ jsx(form.SetContent, { children: /* @__PURE__ */ jsx(form.AppField, {
+				name: "filterOperator",
+				children: (field) => /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(field.Errors, {}), /* @__PURE__ */ jsx(field.RadioGroup, { children: stringFilterOperators.map((operator) => /* @__PURE__ */ jsxs(field.Set, { children: [/* @__PURE__ */ jsx(Radio, {
+					value: operator,
+					variant: "inSurface",
+					children: filterOperatorLabels?.[operator] ?? defaultFilterOperatorLabels[operator]
+				}), field.state.value === operator && /* @__PURE__ */ jsx(form.AppField, {
+					name: "filterValue",
+					children: (valueField) => /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(valueField.Errors, {}), /* @__PURE__ */ jsx(valueField.Input, {
+						"aria-label": `${column.id} filter value`,
+						variant: "secondary"
+					})] })
+				})] }, operator)) })] })
+			}) }) }),
+			/* @__PURE__ */ jsxs(form.Footer, { children: [/* @__PURE__ */ jsx(form.Reset, { children: buttonLabels.reset }), /* @__PURE__ */ jsx(form.Submit, { children: buttonLabels.apply })] })
+		] })
+	});
+}
+// src/components/table/table-string-filter-chip.tsx
+function TableStringFilterChip({ column, className, children, ref, ...props }) {
+	const filterOperatorLabels = useTableContext$1().options.meta?.translations?.filterOperatorLabels, columnFilter = asFilterValue(column.getFilterValue());
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		className: cn("", className),
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsxs(Button, {
+			tone: "neutral",
+			size: "extraSmall",
+			variant: "soft",
+			children: [
+				/* @__PURE__ */ jsx(Icon, { name: "filter" }),
+				/* @__PURE__ */ jsx("span", { children: getColumnHeaderLabel(column) }),
+				/* @__PURE__ */ jsx("span", {
+					className: "font-light lowercase",
+					children: filterOperatorLabels?.[columnFilter.operator] ?? defaultFilterOperatorLabels[columnFilter.operator]
+				}),
+				/* @__PURE__ */ jsx("span", { children: columnFilter.value }),
+				children
+			]
+		})
+	}), /* @__PURE__ */ jsxs(PopoverPanel, { children: [/* @__PURE__ */ jsx(PopoverHeader, { children: /* @__PURE__ */ jsx(PopoverTitle, { children: getColumnHeaderLabel(column) }) }), /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(TableStringFilterForm, { column }) })] })] });
+}
+// src/components/table/table-filter-list.tsx
+function TableFilterList({ className, children, ref, ...props }) {
+	const table = useTableContext$1();
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state.columnFilters,
+		children: () => {
+			if (!table.getAllColumns().some((column) => column.getIsFiltered())) return;
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("flex flex-wrap items-center gap-xs", className),
+				ref,
+				...props,
+				children: [children, table.getAllColumns().map((column) => {
+					if (!column.getIsFiltered()) return;
+					switch (column.columnDef.meta?.filterVariant) {
+						case "date": return /* @__PURE__ */ jsx(TableDateFilterChip, { column }, column.id);
+						case "number": return /* @__PURE__ */ jsx(TableNumberFilterChip, { column }, column.id);
+						case "select": return /* @__PURE__ */ jsx(TableSelectFilterChip, { column }, column.id);
+						case "string": return /* @__PURE__ */ jsx(TableStringFilterChip, { column }, column.id);
+						default: return;
+					}
+				})]
+			});
+		}
+	});
+}
+// src/components/table/table-filter-menu.tsx
+function TableFilterMenu({ className, ref, ...props }) {
+	const table = useTableContext$1();
+	return /* @__PURE__ */ jsxs(Menu, {
+		modal: false,
+		children: [/* @__PURE__ */ jsx(MenuTrigger, {
+			className: cn("shrink-0", className),
+			ref,
+			...props
+		}), /* @__PURE__ */ jsx(MenuPopup, {
+			align: "end",
+			className: "",
+			children: table.getAllColumns().filter((column) => column.getCanFilter()).map((column) => {
+				const { filterVariant } = column.columnDef.meta ?? {};
+				return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					nativeButton: true,
+					children: /* @__PURE__ */ jsx(MenuItem, {
+						closeOnClick: false,
+						children: getColumnHeaderLabel(column)
+					})
+				}), /* @__PURE__ */ jsxs(PopoverPanel, {
+					side: "inline-end",
+					align: "start",
+					className: cn("", className),
+					onKeyDownCapture: (event) => event.stopPropagation(),
+					children: [/* @__PURE__ */ jsx(PopoverHeader, { children: /* @__PURE__ */ jsx(PopoverTitle, { children: getColumnHeaderLabel(column) }) }), /* @__PURE__ */ jsx(PopoverContent, { children: (() => {
+						switch (filterVariant) {
+							case "date": return /* @__PURE__ */ jsx(TableDateFilterForm, { column });
+							case "number": return /* @__PURE__ */ jsx(TableNumberFilterForm, { column });
+							case "select": return /* @__PURE__ */ jsx(TableSelectFilterForm, { column });
+							case "string": return /* @__PURE__ */ jsx(TableStringFilterForm, { column });
+							default: return;
+						}
+					})() })]
+				})] }, column.id);
+			})
+		})]
+	});
+}
+// src/components/table/table-first-page.tsx
+const DEFAULT_PAGE_INDEX = 0;
+function TableFirstPage({ className, children, ref, ...props }) {
+	const table = useTableContext$1(), handleClick = () => {
+		table.setPageIndex(DEFAULT_PAGE_INDEX);
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Go to first page",
+		className: cn("shrink-0", className),
+		disabled: !table.getCanPreviousPage(),
+		onClick: handleClick,
+		ref,
+		variant: "outline",
+		tone: "neutral",
+		size: "medium",
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, { name: "firstPage" })
+	});
+}
+// src/components/table/table-footer.tsx
+function TableFooter({ className, children, ref, ...props }) {
+	const table = useTableContext$1();
+	return /* @__PURE__ */ jsxs("tfoot", {
+		className: cn("border-t border-border bg-neutral-container-low", className),
+		ref,
+		...props,
+		children: [children, table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ jsx(table.AppFooter, {
+			header,
+			children: (footer) => /* @__PURE__ */ jsx("td", {
+				style: { width: footer.getSize() },
+				className: "p-xs",
+				colSpan: footer.colSpan,
+				children: /* @__PURE__ */ jsx(table.FlexRender, { footer })
+			})
+		}, header.id)) }, footerGroup.id))]
+	});
+}
+// src/components/table/table-header.tsx
+function TableHeader({ className, children, ref, ...props }) {
+	const table = useTableContext$1();
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state,
+		children: (state) => {
+			if (state.viewMode === "grid") return;
+			return /* @__PURE__ */ jsxs("thead", {
+				className: cn("sticky top-0 bg-neutral-container-low", className),
+				ref,
+				...props,
+				children: [children, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(table.AppHeader, {
+					header,
+					selector: (tableState) => tableState.sorting,
+					children: (renderHeader) => {
+						const sorting = renderHeader.column.getIsSorted();
+						return /* @__PURE__ */ jsx("th", {
+							style: { width: renderHeader.getSize() },
+							className: cn("container p-xs text-left style-text-default-0 text-neutral-on-container-muted transition-colors group-data-[variant=outline]/table:shadow-[inset_0_-1px_0_var(--color-border)] group-data-[variant=ghost]/table:first:rounded-l-xl group-data-[variant=ghost]/table:last:rounded-r-xl", renderHeader.column.getCanSort() && "hover:cursor-pointer hover:bg-neutral-container hover:*:text-neutral-on-container", renderHeader.isPlaceholder && "cursor-default", renderHeader.column.getIsSorted() && "text-brand-on-container!", className),
+							colSpan: renderHeader.colSpan,
+							onClick: renderHeader.column.getToggleSortingHandler(),
+							children: !renderHeader.isPlaceholder && /* @__PURE__ */ jsxs("div", {
+								className: cn("flex items-center gap-2xs whitespace-nowrap has-[[role=checkbox]]:justify-center [&_svg]:size-sm", renderHeader.column.getCanSort() && "select-none hover:cursor-pointer"),
+								children: [
+									/* @__PURE__ */ jsx("div", {
+										className: "flex items-center gap-2xs",
+										children: /* @__PURE__ */ jsx(table.FlexRender, { header: renderHeader })
+									}),
+									sorting === "asc" && /* @__PURE__ */ jsx(Icon, { name: "sortDescending" }),
+									sorting === "desc" && /* @__PURE__ */ jsx(Icon, { name: "sortAscending" }),
+									!sorting && renderHeader.column.getCanSort() && /* @__PURE__ */ jsx(Icon, { name: "columnFilter" })
+								]
+							})
+						}, renderHeader.id);
+					}
+				}, header.id)) }, headerGroup.id))]
+			});
+		}
+	});
+}
+// src/components/table/table-image-cell.tsx
+function TableImageCell({ className, ref, ...props }) {
+	const cell = useCellContext$1();
+	return /* @__PURE__ */ jsx("img", {
+		alt: "",
+		src: cell.getValue(),
+		className: cn("my-xs size-xl", className),
+		ref,
+		...props
+	});
+}
+// src/components/table/table-last-page.tsx
+const LAST_PAGE_OFFSET = 1;
+function TableLastPage({ className, children, ref, ...props }) {
+	const table = useTableContext$1(), handleClick = () => {
+		table.setPageIndex(table.getPageCount() - LAST_PAGE_OFFSET);
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Go to last page",
+		className: cn("shrink-0", className),
+		disabled: !table.getCanNextPage(),
+		onClick: handleClick,
+		ref,
+		variant: "outline",
+		tone: "neutral",
+		size: "medium",
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, { name: "lastPage" })
+	});
+}
+// src/components/table/table-layout.tsx
+function TableLayout({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-layout",
+		className: cn("flex min-w-0 flex-col gap-md", className),
+		ref,
+		...props
+	});
+}
+// src/components/table/table-link-cell.tsx
+function TableLinkCell({ className, children, ref, ...props }) {
+	const value = useCellContext$1().getValue();
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "link",
+		type: "button",
+		className: cn("", className),
+		ref,
+		...props,
+		children: children ?? value
+	});
+}
+// src/components/table/table-next-page.tsx
+function TableNextPage({ className, children, ref, ...props }) {
+	const table = useTableContext$1(), handleClick = () => {
+		table.nextPage();
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Go to next page",
+		className: cn("shrink-0", className),
+		disabled: !table.getCanNextPage(),
+		onClick: handleClick,
+		ref,
+		size: "medium",
+		variant: "outline",
+		tone: "neutral",
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, { name: "chevronRight" })
+	});
+}
+// src/components/table/table-number-cell.tsx
+function TableNumberCell({ className, children, ref, ...props }) {
+	const cell = useCellContext$1();
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("", className),
+		ref,
+		...props,
+		children: [children, cell.getValue().toLocaleString()]
+	});
+}
+// src/components/table/table-pagination.tsx
+function TablePagination({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("inline-flex items-center justify-center gap-3xs", className),
+		ref,
+		...props
+	});
+}
+// src/components/table/table-paging.tsx
+const DEFAULT_VISIBLE_START_PAGES = 3;
+const DEFAULT_VISIBLE_END_PAGES = 1;
+const FIRST_PAGE_INDEX = 0;
+const PAGE_NUMBER_OFFSET$1 = 1;
+const PAGE_INDEX_INCREMENT = 1;
+const MORE_PAGES_MAX_HEIGHT = 200;
+function getLeadingPageIndexes(minimumPages, totalPages) {
+	const pageIndexes = [];
+	for (let pageIndex = FIRST_PAGE_INDEX; pageIndex < minimumPages && pageIndex < totalPages; pageIndex += PAGE_INDEX_INCREMENT) pageIndexes.push(pageIndex);
+	return pageIndexes;
+}
+function getOverflowPageIndexes(minimumPages, maximumPages, totalPages) {
+	const pageIndexes = [];
+	for (let pageIndex = minimumPages; pageIndex < totalPages - maximumPages; pageIndex += PAGE_INDEX_INCREMENT) pageIndexes.push(pageIndex);
+	return pageIndexes;
+}
+function getTrailingPageIndexes(minimumPages, maximumPages, totalPages) {
+	const pageIndexes = [];
+	for (let pageIndex = totalPages - maximumPages; pageIndex < totalPages; pageIndex += PAGE_INDEX_INCREMENT) if (pageIndex >= minimumPages) pageIndexes.push(pageIndex);
+	return pageIndexes;
+}
+function getPageButtonTone(pageIndex, selectedPageIndex) {
+	if (pageIndex === selectedPageIndex) return "brand";
+	return "neutral";
+}
+function getPageButtonVariant(pageIndex, selectedPageIndex) {
+	if (pageIndex === selectedPageIndex) return "fill";
+	return "outline";
+}
+function TablePaging({ min = DEFAULT_VISIBLE_START_PAGES, max = DEFAULT_VISIBLE_END_PAGES, className, children, ref, ...props }) {
+	const table = useTableContext$1(), handleClick = (pageIndex) => {
+		table.setPageIndex(pageIndex);
+	};
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state.pagination,
+		children: (pagination) => {
+			const totalPages = table.getPageCount(), leadingPageIndexes = getLeadingPageIndexes(min, totalPages), overflowPageIndexes = getOverflowPageIndexes(min, max, totalPages), trailingPageIndexes = getTrailingPageIndexes(min, max, totalPages);
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-2xs", className),
+				ref,
+				...props,
+				children: [
+					children,
+					leadingPageIndexes.map((pageIndex) => /* @__PURE__ */ jsx(Button, {
+						tone: getPageButtonTone(pageIndex, pagination.pageIndex),
+						variant: getPageButtonVariant(pageIndex, pagination.pageIndex),
+						className: "shrink-0",
+						onClick: () => handleClick(pageIndex),
+						children: pageIndex + PAGE_NUMBER_OFFSET$1
+					}, `page-${pageIndex}`)),
+					totalPages > min + max && /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, { children: /* @__PURE__ */ jsx(Button, {
+						"aria-label": "Show more pages",
+						tone: "neutral",
+						size: "medium",
+						variant: "outline",
+						className: "shrink-0",
+						children: /* @__PURE__ */ jsx(Icon, { name: "ellipsis" })
+					}) }), /* @__PURE__ */ jsx(MenuPopup, {
+						align: "center",
+						children: /* @__PURE__ */ jsx(MenuRadioGroup, {
+							value: pagination.pageIndex,
+							onValueChange: handleClick,
+							className: "overflow-y-auto",
+							style: { maxHeight: `${MORE_PAGES_MAX_HEIGHT}px` },
+							children: overflowPageIndexes.map((pageIndex) => /* @__PURE__ */ jsx(MenuRadioItem, {
+								value: pageIndex,
+								closeOnClick: true,
+								children: pageIndex + PAGE_NUMBER_OFFSET$1
+							}, pageIndex))
+						})
+					})] }),
+					trailingPageIndexes.map((pageIndex) => /* @__PURE__ */ jsx(Button, {
+						tone: getPageButtonTone(pageIndex, pagination.pageIndex),
+						variant: getPageButtonVariant(pageIndex, pagination.pageIndex),
+						className: "shrink-0",
+						onClick: () => handleClick(pageIndex),
+						children: pageIndex + PAGE_NUMBER_OFFSET$1
+					}, `last-page-${pageIndex}`))
+				]
+			});
+		}
+	});
+}
+// src/components/table/table-percent-cell.tsx
+function TablePercentCell({ locale, options, children, ...props }) {
+	const value = useCellContext$1().getValue();
+	if (value === void 0 || value === null) return;
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		children: [children, new Intl.NumberFormat(locale, {
+			...options,
+			style: "percent"
+		}).format(value)]
+	});
+}
+// src/components/table/table-previous-page.tsx
+function TablePreviousPage({ className, children, ref, ...props }) {
+	const table = useTableContext$1(), handleClick = () => {
+		table.previousPage();
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Go to previous page",
+		className: cn("shrink-0", className),
+		disabled: !table.getCanPreviousPage(),
+		onClick: handleClick,
+		ref,
+		variant: "outline",
+		tone: "neutral",
+		size: "medium",
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, { name: "chevronLeft" })
+	});
+}
+// src/components/table/table-progress-cell.tsx
+function TableProgressCell({ showValue = true, children, ...props }) {
+	const value = useCellContext$1().getValue();
+	if (value === void 0 || value === null) return;
+	return /* @__PURE__ */ jsxs(Meter, {
+		orientation: "horizontal",
+		"aria-label": "Progress",
+		...props,
+		value,
+		children: [
+			/* @__PURE__ */ jsx(Meter.Track, { children: /* @__PURE__ */ jsx(Meter.Indicator, {}) }),
+			showValue && /* @__PURE__ */ jsx(Meter.Value, {}),
+			children
+		]
+	});
+}
+// src/components/table/table-relative-time-cell.tsx
+const MILLISECONDS_PER_SECOND = 1e3;
+const ZERO = 0;
+const SECONDS_PER_SECOND = 1;
+const RELATIVE_TIME_UNITS = [
+	["year", 31536e3],
+	["month", 2592e3],
+	["week", 604800],
+	["day", 86400],
+	["hour", 3600],
+	["minute", 60],
+	["second", SECONDS_PER_SECOND]
+];
+function formatRelativeTime(date, now, { locale, options }) {
+	const seconds = (date.getTime() - now.getTime()) / MILLISECONDS_PER_SECOND, [unit, divisor] = RELATIVE_TIME_UNITS.find(([, duration]) => Math.abs(seconds) >= duration) ?? ["second", SECONDS_PER_SECOND], amount = Math.round(seconds / divisor) || ZERO;
+	return new Intl.RelativeTimeFormat(locale, {
+		numeric: "auto",
+		...options
+	}).format(amount, unit);
+}
+function TableRelativeTimeCell({ locale, options, now, children, ...props }) {
+	const date = useCellContext$1().getValue(), [mountedAt] = useState(() => /* @__PURE__ */ new Date()), referenceDate = now ?? mountedAt;
+	if (!date) return;
+	if (Number.isNaN(date.getTime())) return "Invalid date";
+	if (Number.isNaN(referenceDate.getTime())) throw new RangeError("TableRelativeTimeCell requires a valid now date");
+	return /* @__PURE__ */ jsxs("time", {
+		dateTime: date.toISOString(),
+		title: date.toLocaleString(locale),
+		...props,
+		children: [children, formatRelativeTime(date, referenceDate, {
+			locale,
+			options
+		})]
+	});
+}
+// src/components/table/table-results.tsx
+const EMPTY_ROW_COUNT = 0;
+const PAGE_NUMBER_OFFSET = 1;
+function getPageStart(totalRows, pageIndex, pageSize) {
+	if (totalRows === EMPTY_ROW_COUNT) return EMPTY_ROW_COUNT;
+	return pageIndex * pageSize + PAGE_NUMBER_OFFSET;
+}
+function getPageEnd(start, pageSize, totalRows) {
+	if (totalRows === EMPTY_ROW_COUNT) return EMPTY_ROW_COUNT;
+	return Math.min(start + pageSize - PAGE_NUMBER_OFFSET, totalRows);
+}
+function TableResults({ children, className, ref, ...props }) {
+	const table = useTableContext$1(), { pageIndex } = table.state.pagination, { pageSize } = table.state.pagination, totalRows = table.getFilteredRowModel().rows.length, start = getPageStart(totalRows, pageIndex, pageSize), end = getPageEnd(start, pageSize, totalRows);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-2xs style-text-default--1 text-on-surface-variant", className),
+		ref,
+		...props,
+		children: children(start, end, totalRows)
+	});
+}
+// src/components/table/table-search.tsx
+function TableSearch({ className, ref, ...props }) {
+	const table = useTableContext$1(), handleChange = (event) => {
+		table.setGlobalFilter(event.target.value);
+	};
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state.globalFilter,
+		children: (globalFilter) => /* @__PURE__ */ jsxs(InputGroup, {
+			variant: props.variant ?? "outline",
+			className: "flex-1",
+			children: [/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Icon, { name: "search" }) }), /* @__PURE__ */ jsx(InputGroupInput, {
+				className: cn("", className),
+				onChange: handleChange,
+				ref,
+				value: globalFilter ?? "",
+				...props
+			})]
+		})
+	});
+}
+// src/components/table/table-sort-menu.tsx
+function TableSortMenu({ className, ref, ...props }) {
+	const table = useTableContext$1(), buttonLabels = table.options.meta?.translations?.buttonLabels ?? {}, ascendingLabel = buttonLabels.ascending ?? "Ascending", descendingLabel = buttonLabels.descending ?? "Descending", handleSort = (columnId, direction) => {
+		const column = table.getColumn(columnId);
+		if (column?.getIsSorted() === direction) {
+			column?.clearSorting();
+			return;
+		}
+		column?.toggleSorting(direction === "desc", column.getCanMultiSort());
+	};
+	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+		className: cn("shrink-0", className),
+		ref,
+		...props
+	}), /* @__PURE__ */ jsx(MenuPopup, {
+		align: "end",
+		children: /* @__PURE__ */ jsx(table.Subscribe, {
+			selector: (state) => state.sorting,
+			children: () => table.getAllColumns().filter((column) => column.getCanSort()).map((column) => /* @__PURE__ */ jsxs(MenuSubmenu, { children: [/* @__PURE__ */ jsx(MenuSubmenuTrigger, { children: getColumnHeaderLabel(column) }), /* @__PURE__ */ jsxs(MenuPopup, { children: [/* @__PURE__ */ jsxs(MenuCheckboxItem, {
+				checked: column.getIsSorted() === "asc",
+				onClick: () => handleSort(column.id, "asc"),
+				children: [/* @__PURE__ */ jsx(Icon, { name: "sortDescending" }), ascendingLabel]
+			}), /* @__PURE__ */ jsxs(MenuCheckboxItem, {
+				checked: column.getIsSorted() === "desc",
+				onClick: () => handleSort(column.id, "desc"),
+				children: [/* @__PURE__ */ jsx(Icon, { name: "sortAscending" }), descendingLabel]
+			})] })] }, column.id))
+		})
+	})] });
+}
+// src/components/table/table-sort-chip.tsx
+function TableSortChip({ column, className, children, ref, ...props }) {
+	const table = useTableContext$1(), buttonLabels = table.options.meta?.translations?.buttonLabels ?? {}, ascendingLabel = buttonLabels.ascending ?? "Ascending", descendingLabel = buttonLabels.descending ?? "Descending";
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state.sorting,
+		children: () => {
+			const columnSort = column.getIsSorted();
+			console.log(columnSort);
+			if (!columnSort) return;
+			return /* @__PURE__ */ jsx(TableSortMenu, {
+				className: cn("", className),
+				ref,
+				...props,
+				children: /* @__PURE__ */ jsxs(Button, {
+					size: "extraSmall",
+					variant: "soft",
+					children: [
+						columnSort === "asc" && /* @__PURE__ */ jsx(Icon, { name: "sortDescending" }),
+						columnSort === "desc" && /* @__PURE__ */ jsx(Icon, { name: "sortAscending" }),
+						/* @__PURE__ */ jsx("span", { children: getColumnHeaderLabel(column) }),
+						/* @__PURE__ */ jsxs("span", {
+							className: "font-light lowercase",
+							children: [columnSort === "asc" && ascendingLabel, columnSort === "desc" && descendingLabel]
+						}),
+						children
+					]
+				})
+			});
+		}
+	});
+}
+// src/components/table/table-sort-list.tsx
+function TableSortList({ className, children, ref, ...props }) {
+	const table = useTableContext$1();
+	if (!table.getAllColumns().some((column) => column.getIsSorted())) return;
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state.sorting,
+		children: () => /* @__PURE__ */ jsxs("div", {
+			className: cn("flex flex-wrap items-center gap-xs", className),
+			ref,
+			...props,
+			children: [children, table.getAllColumns().map((column) => {
+				if (!column.getIsSorted()) return;
+				return /* @__PURE__ */ jsx(TableSortChip, { column }, column.id);
+			})]
+		})
+	});
+}
+// src/components/table/table-tags-cell.tsx
+function TableTagsCell({ badgeProps, className, children, ...props }) {
+	const value = useCellContext$1().getValue();
+	if (value === void 0 || value === null) return;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-wrap gap-3xs", className),
+		...props,
+		children: [children, value.map((tag, index) => /* @__PURE__ */ jsx(Badge, {
+			variant: "soft",
+			...badgeProps,
+			children: tag
+		}, `${index}-${tag}`))]
+	});
+}
+// src/components/table/table-text-cell.tsx
+function TableTextCell({ className, children, ref, ...props }) {
+	const cell = useCellContext$1();
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("", className),
+		ref,
+		...props,
+		children: [children, cell.getValue()]
+	});
+}
+// src/components/table/table-toolbar.tsx
+function TableToolbar({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-toolbar",
+		className: cn("flex w-full min-w-0 flex-wrap items-center gap-2xs", "[:where([data-slot=table-container][data-variant=outline]>&)]:px-md [:where([data-slot=table-container][data-variant=outline]>&:first-child)]:pt-md [:where([data-slot=table-container][data-variant=outline]>&:last-child)]:pb-md", className),
+		ref,
+		...props
+	});
+}
+// src/components/table/table-top-bar.tsx
+function TableTopBar({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-w-0 flex-col pb-md group-data-[variant=outline]/table:border-b group-data-[variant=outline]/table:border-border", "in-data-[slot=table-container]:sticky in-data-[slot=table-container]:top-0 in-data-[slot=table-container]:z-10", className),
+		"data-slot": "table-top-bar",
+		ref,
+		...props
+	});
+}
+// src/components/table/table-view-mode-toggle.tsx
+function TableViewModeToggle({ className, children, ref, ...props }) {
+	const table = useTableContext$1(), isGridView = table.state.viewMode === "grid", handleClick = () => {
+		table.toggleViewMode();
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		onClick: handleClick,
+		className: cn("shrink-0", className),
+		ref,
+		...props,
+		children: children(isGridView)
+	});
+}
+// src/components/table/table-viewport.tsx
+function TableViewport({ grow, className, children, ref, ...props }) {
+	if (useTableContext$1().state.viewMode === "grid") return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-viewport",
+		className: cn("min-h-0 min-w-0 overflow-auto", grow && "flex-1", className),
+		ref,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-viewport",
+		className: cn("min-h-0 min-w-0 overflow-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-surface-focus-ring", grow && "flex-1"),
+		children: /* @__PURE__ */ jsx("table", {
+			className: cn("w-full", grow && "h-full", className),
+			ref,
+			...props,
+			children
+		})
+	});
+}
+// src/components/table/table-context.tsx
+const { createAppColumnHelper, useAppTable, useTableContext, useCellContext, useHeaderContext } = createTableHook({
+	cellComponents: {
+		AvatarCell: TableAvatarCell,
+		BadgeCell: TableBadgeCell,
+		BooleanCell: TableBooleanCell,
+		CheckboxCell: TableCheckboxCell,
+		CurrencyCell: TableCurrencyCell,
+		DateTimeCell: TableDateTimeCell,
+		ImageCell: TableImageCell,
+		LinkCell: TableLinkCell,
+		NumberCell: TableNumberCell,
+		PercentCell: TablePercentCell,
+		ProgressCell: TableProgressCell,
+		RelativeTimeCell: TableRelativeTimeCell,
+		TagsCell: TableTagsCell,
+		TextCell: TableTextCell
+	},
+	cellContext,
+	features,
+	getRowId: (row, index, parent) => {
+		if (row.id !== void 0 && row.id !== null) return row.id;
+		if (parent) return `${parent.id}.${index}`;
+		return String(index);
+	},
+	headerComponents: { CheckboxHeader: TableCheckboxHeader },
+	headerContext,
+	tableComponents: {
+		Body: TableBody,
+		BottomBar: TableBottomBar,
+		ColumnToggle: TableColumnToggle,
+		Container: TableContainer,
+		DatasetTab: TableDatasetTab,
+		Empty: TableEmpty,
+		EmptyContent: TableEmptyContent,
+		EmptyDescription: TableEmptyDescription,
+		EmptyFooter: TableEmptyFooter,
+		EmptyHeader: TableEmptyHeader,
+		EmptyTitle: TableEmptyTitle,
+		FilterList: TableFilterList,
+		FilterMenu: TableFilterMenu,
+		FirstPage: TableFirstPage,
+		Footer: TableFooter,
+		Header: TableHeader,
+		LastPage: TableLastPage,
+		Layout: TableLayout,
+		NextPage: TableNextPage,
+		Pagination: TablePagination,
+		Paging: TablePaging,
+		PreviousPage: TablePreviousPage,
+		Results: TableResults,
+		Search: TableSearch,
+		SortList: TableSortList,
+		SortMenu: TableSortMenu,
+		Toolbar: TableToolbar,
+		TopBar: TableTopBar,
+		ViewModeToggle: TableViewModeToggle,
+		Viewport: TableViewport
+	},
+	tableContext
+});
+export { TableAvatarCell, TableBadgeCell, TableBody, TableBooleanCell, TableBottomBar, TableCheckboxCell, TableCheckboxHeader, TableColumnToggle, TableContainer, TableCurrencyCell, TableDatasetTab, TableDateFilterChip, TableDateFilterForm, TableDateTimeCell, TableEmptyContent, TableEmptyDescription, TableEmptyFooter, TableEmptyHeader, TableEmpty as TableEmptyMessage, TableEmptyTitle, TableFilterList, TableFilterMenu, TableFirstPage, TableFooter, TableHeader, TableImageCell, TableLastPage, TableLayout, TableLinkCell, TableNextPage, TableNumberCell, TableNumberFilterChip, TableNumberFilterForm, TablePagination, TablePaging, TablePercentCell, TablePreviousPage, TableProgressCell, TableRelativeTimeCell, TableResults, TableSearch, TableSelectFilterChip, TableSelectFilterForm, TableSortChip, TableSortList, TableSortMenu, TableStringFilterChip, TableStringFilterForm, TableTagsCell, TableTextCell, TableToolbar, TableTopBar, TableViewModeToggle, TableViewport, createAppColumnHelper, dateFilterFn, defaultFilterOperatorLabels, features, numberFilterFn, selectFilterFn, stringFilterFn, useAppTable, useCellContext, useHeaderContext, useTableContext };
+
+//# sourceMappingURL=index.js.map