@aircall/ds 0.10.0 → 0.11.0

package/dist/index.js

@@ -1,13 +1,13 @@
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
-import { ArrowDownToLine, ArrowLeft, ArrowRight, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleAlert, CircleAlertIcon, CircleCheck, FLAGS, FlagUs, Info, Loader2Icon, MinusIcon, MoreHorizontalIcon, PanelLeftIcon, Search, Smile, TriangleAlertIcon, XIcon } from "@aircall/react-icons";
+import { ArrowDownToLine, ArrowLeft, ArrowRight, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleAlert, CircleAlertIcon, CircleCheck, FLAGS, FlagUs, Info, Loader2Icon, MinusIcon, MoreHorizontalIcon, PanelLeftIcon, Search, Smile, TriangleAlertIcon, XIcon } from "@aircall/react-icons";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import React, { createContext, useContext, useMemo } from "react";
-import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -34,6 +34,7 @@ import { Select as Select$1 } from "@base-ui/react/select";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 import { Slider as Slider$1 } from "@base-ui/react/slider";
 import { Toaster as Toaster$1, toast } from "sonner";
+import { useControllableState } from "@aircall/hooks";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
@@ -157,7 +158,7 @@ const buttonVariants = cva("group/button inline-flex shrink-0 cursor-pointer ite
 			default: "bg-primary text-primary-foreground hover:bg-primary/90",
 			outline: "border-border bg-background hover:bg-muted hover:text-accent-foreground aria-expanded:bg-muted aria-expanded:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
 			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-			ghost: "hover:bg-muted hover:text-accent-foreground aria-expanded:bg-muted aria-expanded:text-accent-foreground dark:hover:bg-muted/50",
+			ghost: "hover:bg-muted hover:text-accent-foreground aria-expanded:bg-muted aria-expanded:text-accent-foreground dark:hover:bg-input/50",
 			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
 			link: "text-primary underline underline-offset-4"
 		},
@@ -194,6 +195,60 @@ const Button = React$1.forwardRef((componentProps, forwardRef) => {
 });
 Button.displayName = "Button";
 
+//#endregion
+//#region src/components/action-bar.tsx
+/** Fixed height of the ActionBar (px). Single source of truth — the bar uses it
+* for its own height and consumers (e.g. DataTable) reserve space with it. */
+const ActionBarHeight = 48;
+/**
+* Lets a parent (e.g. `DataTable`) supply the selected `count` and an `onClear`
+* handler so an `<ActionBar>` rendered inside it doesn't have to be passed them.
+* Explicit `count`/`onClear` props on `ActionBar` always take precedence, so the
+* component still works standalone. Mirrors React Spectrum's `ActionBarContext`.
+*/
+const ActionBarContext = React$1.createContext(null);
+const ActionBarButton = React$1.forwardRef(({ size = "default", ...props }, ref) => /* @__PURE__ */ jsx(Button, {
+	ref,
+	variant: "ghost",
+	size,
+	...props
+}));
+ActionBarButton.displayName = "ActionBarButton";
+const ActionBar = React$1.forwardRef(({ className, count, onClear, children, label, clearLabel = "Clear selection", style, ...props }, ref) => {
+	const ctx = React$1.useContext(ActionBarContext);
+	const resolvedCount = count ?? ctx?.count ?? 0;
+	const resolvedOnClear = onClear ?? ctx?.onClear;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "toolbar",
+		"aria-label": "Selection actions",
+		"data-slot": "action-bar",
+		className: cn("relative flex w-full items-center gap-2 rounded-md border border-border bg-popover px-2 text-popover-foreground shadow-lg", className),
+		style: {
+			...style,
+			height: ActionBarHeight
+		},
+		...props,
+		children: [
+			resolvedOnClear ? /* @__PURE__ */ jsx(ActionBarButton, {
+				size: "icon",
+				onClick: resolvedOnClear,
+				"aria-label": clearLabel,
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate text-sm",
+				children: label ? label(resolvedCount) : `${resolvedCount} items selected.`
+			}),
+			children ? /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-2",
+				children
+			}) : null
+		]
+	});
+});
+ActionBar.displayName = "ActionBar";
+
 //#endregion
 //#region src/components/alert-dialog.tsx
 function AlertDialog({ ...props }) {
@@ -1039,31 +1094,32 @@ function CalendarDayButton({ className: dayClassName, day, modifiers, locale, ..
 
 //#endregion
 //#region src/components/card.tsx
-function Card({ className, ...props }) {
+function Card({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card",
-		className: cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className),
+		"data-size": size,
+		className: cn("group/card flex flex-col gap-4 overflow-hidden rounded-xl border bg-card py-4 text-sm text-card-foreground has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
 		...props
 	});
 }
 function CardHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-header",
-		className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className),
+		className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3", className),
 		...props
 	});
 }
 function CardTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-title",
-		className: cn("leading-none font-semibold", className),
+		className: cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className),
 		...props
 	});
 }
 function CardDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-description",
-		className: cn("text-muted-foreground text-sm", className),
+		className: cn("text-sm text-muted-foreground", className),
 		...props
 	});
 }
@@ -1077,14 +1133,14 @@ function CardAction({ className, ...props }) {
 function CardContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-content",
-		className: cn("px-6", className),
+		className: cn("px-4 group-data-[size=sm]/card:px-3", className),
 		...props
 	});
 }
 function CardFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-footer",
-		className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+		className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3", className),
 		...props
 	});
 }
@@ -1187,7 +1243,7 @@ function CarouselPrevious({ className, variant = "outline", size = "sm", ...prop
 		"data-slot": "carousel-previous",
 		variant,
 		size,
-		className: cn("absolute size-8 rounded-full", orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		className: cn("absolute size-8 touch-manipulation rounded-full", orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
 		disabled: !canScrollPrev,
 		onClick: scrollPrev,
 		...props,
@@ -1203,7 +1259,7 @@ function CarouselNext({ className, variant = "outline", size = "sm", ...props })
 		"data-slot": "carousel-next",
 		variant,
 		size,
-		className: cn("absolute size-8 rounded-full", orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		className: cn("absolute size-8 touch-manipulation rounded-full", orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
 		disabled: !canScrollNext,
 		onClick: scrollNext,
 		...props,
@@ -1916,15 +1972,47 @@ const CountryFlag = ({ countryIsoCode, size = "xl", className, ...otherProps })
 	});
 };
 
+//#endregion
+//#region src/components/skeleton.tsx
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		className: cn("animate-pulse rounded-md bg-muted", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/spinner.tsx
+const spinnerVariants = cva("animate-spin text-current", {
+	variants: { size: {
+		default: "size-4",
+		sm: "size-3",
+		lg: "size-5",
+		xl: "size-6"
+	} },
+	defaultVariants: { size: "default" }
+});
+function Spinner({ className, size, ...props }) {
+	return /* @__PURE__ */ jsx(Loader2Icon, {
+		"data-slot": "spinner",
+		role: "status",
+		"aria-label": "Loading",
+		className: cn(spinnerVariants({ size }), className),
+		...props
+	});
+}
+
 //#endregion
 //#region src/components/table.tsx
-const Table = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+const Table = React$1.forwardRef(({ className, containerClassName, containerStyle, ...props }, ref) => /* @__PURE__ */ jsx("div", {
 	"data-slot": "table-container",
-	className: "relative w-full overflow-x-auto",
+	style: containerStyle,
+	className: cn("relative w-full overflow-x-auto rounded-lg border border-border", containerClassName),
 	children: /* @__PURE__ */ jsx("table", {
 		ref,
 		"data-slot": "table",
-		className: cn("w-full caption-bottom text-sm", className),
+		className: cn("w-full caption-bottom text-sm [&_tbody_tr:last-child]:border-b-0", className),
 		...props
 	})
 }));
@@ -1932,7 +2020,7 @@ Table.displayName = "Table";
 const TableHeader = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", {
 	ref,
 	"data-slot": "table-header",
-	className: cn("[&_tr]:border-b", className),
+	className: cn("[&_tr]:border-b [&_tr]:hover:bg-transparent", className),
 	...props
 }));
 TableHeader.displayName = "TableHeader";
@@ -1946,14 +2034,14 @@ TableBody.displayName = "TableBody";
 const TableFooter = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", {
 	ref,
 	"data-slot": "table-footer",
-	className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+	className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0 [&>tr]:hover:bg-transparent", className),
 	...props
 }));
 TableFooter.displayName = "TableFooter";
 const TableRow = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", {
 	ref,
 	"data-slot": "table-row",
-	className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
+	className: cn("border-b transition-colors hover:bg-accent/30 data-[state=selected]:bg-accent/50", className),
 	...props
 }));
 TableRow.displayName = "TableRow";
@@ -1971,31 +2059,248 @@ const TableCell = React$1.forwardRef(({ className, ...props }, ref) => /* @__PUR
 	...props
 }));
 TableCell.displayName = "TableCell";
-const TableCaption = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", {
-	ref,
-	"data-slot": "table-caption",
-	className: cn("mt-4 text-sm text-muted-foreground", className),
-	...props
-}));
-TableCaption.displayName = "TableCaption";
 
 //#endregion
 //#region src/components/data-table.tsx
-function DataTable({ columns, data, tableOptions, noResultsMessage = "No results." }) {
+const SELECT_COLUMN_ID = "__select";
+const DEFAULT_SKELETON_COUNT = 5;
+function DataTable({ columns, data, getRowId, loadingState = "idle", skeletonCount = DEFAULT_SKELETON_COUNT, emptyState, sorting, onSortingChange, enableRowSelection, rowSelection, onRowSelectionChange, actionBar, onFetchMore, hasMore = false, enableColumnResizing = false, fillHeight = false, onRowClick, className }) {
+	const sortingEnabled = !!onSortingChange;
+	const selectionEnabled = !!enableRowSelection;
+	const finalColumns = React$1.useMemo(() => {
+		if (!selectionEnabled) return columns;
+		return [makeSelectColumn(), ...columns];
+	}, [columns, selectionEnabled]);
 	const table = useReactTable({
 		data,
-		columns,
+		columns: finalColumns,
 		getCoreRowModel: getCoreRowModel(),
-		...tableOptions
+		getRowId,
+		enableSorting: sortingEnabled,
+		manualSorting: sortingEnabled,
+		enableRowSelection,
+		enableColumnResizing,
+		columnResizeMode: "onChange",
+		onSortingChange,
+		onRowSelectionChange,
+		state: {
+			...sorting !== void 0 && { sorting },
+			...rowSelection !== void 0 && { rowSelection }
+		}
+	});
+	const rows = table.getRowModel().rows;
+	const selectedCount = table.getSelectedRowModel().rows.length;
+	const hasSelection = selectedCount > 0;
+	const hasFooter = finalColumns.some((col) => col.footer != null);
+	const isInitialLoading = loadingState === "loading";
+	const isRefreshing = loadingState === "sorting" || loadingState === "filtering";
+	const isLoadingMore = loadingState === "loadingMore";
+	const showEmptyState = !isInitialLoading && rows.length === 0 && !!emptyState;
+	const anySelected = hasSelection;
+	const rowClickable = selectionEnabled || !!onRowClick;
+	const handleRowActivate = (row) => {
+		if (selectionEnabled && (anySelected || !onRowClick)) {
+			if (row.getCanSelect()) row.toggleSelected();
+		} else if (onRowClick) onRowClick(row.original);
+	};
+	const colWidth = (size) => enableColumnResizing ? { width: size } : void 0;
+	const showActionBar = !!actionBar && hasSelection;
+	const reservedBottom = showActionBar ? ActionBarHeight + 16 : void 0;
+	const sentinelRef = useFetchMoreSentinel(onFetchMore, fillHeight, data.length);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative w-full", fillHeight && "flex min-h-0 flex-1 flex-col", className),
+		"aria-busy": isInitialLoading || isRefreshing || void 0,
+		children: [
+			/* @__PURE__ */ jsxs(Table, {
+				className: cn(enableColumnResizing && "table-fixed", fillHeight && "[&_[data-slot=table-head]]:sticky [&_[data-slot=table-head]]:top-0 [&_[data-slot=table-head]]:z-10 [&_[data-slot=table-head]]:bg-background", fillHeight && showEmptyState && "h-full"),
+				containerClassName: fillHeight ? "min-h-0 flex-1 overflow-y-auto" : void 0,
+				containerStyle: reservedBottom ? {
+					paddingBottom: reservedBottom,
+					scrollPaddingBottom: reservedBottom
+				} : void 0,
+				style: enableColumnResizing ? { width: `max(100%, ${table.getTotalSize()}px)` } : void 0,
+				children: [
+					/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
+						className: enableColumnResizing ? "group/header-row" : void 0,
+						children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxs(TableHead, {
+							style: colWidth(header.getSize()),
+							className: enableColumnResizing ? "relative" : void 0,
+							children: [header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsx(SortableHeader, { header }) : flexRender(header.column.columnDef.header, header.getContext()), enableColumnResizing && header.column.getCanResize() ? /* @__PURE__ */ jsx(ResizeHandle, { header }) : null]
+						}, header.id))
+					}, headerGroup.id)) }),
+					/* @__PURE__ */ jsx(TableBody, { children: isInitialLoading ? /* @__PURE__ */ jsx(SkeletonRows, {
+						columns: finalColumns,
+						count: skeletonCount
+					}) : rows.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+						rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
+							"data-state": row.getIsSelected() ? "selected" : void 0,
+							onClick: rowClickable ? () => handleRowActivate(row) : void 0,
+							className: rowClickable ? "cursor-pointer" : void 0,
+							children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
+								style: colWidth(cell.column.getSize()),
+								children: flexRender(cell.column.columnDef.cell, cell.getContext())
+							}, cell.id))
+						}, row.id)),
+						isLoadingMore ? /* @__PURE__ */ jsx(TableRow, {
+							className: "hover:bg-transparent",
+							children: /* @__PURE__ */ jsx(TableCell, {
+								colSpan: finalColumns.length,
+								className: "py-3",
+								children: /* @__PURE__ */ jsx("div", {
+									className: "flex items-center justify-center text-muted-foreground",
+									children: /* @__PURE__ */ jsx(Spinner, {})
+								})
+							})
+						}) : null,
+						onFetchMore && hasMore && !isLoadingMore ? /* @__PURE__ */ jsx("tr", {
+							"aria-hidden": true,
+							ref: sentinelRef,
+							children: /* @__PURE__ */ jsx("td", {
+								colSpan: finalColumns.length,
+								className: "h-px"
+							})
+						}) : null
+					] }) : emptyState ? /* @__PURE__ */ jsx(TableRow, {
+						className: "hover:bg-transparent",
+						children: /* @__PURE__ */ jsx(TableCell, {
+							colSpan: finalColumns.length,
+							className: "h-full p-0",
+							children: /* @__PURE__ */ jsx("div", {
+								className: cn("flex h-full items-center justify-center", !fillHeight && "min-h-60"),
+								children: emptyState
+							})
+						})
+					}) : null }),
+					hasFooter && !isInitialLoading ? /* @__PURE__ */ jsx(TableFooter, { children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx(TableRow, { children: footerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableCell, {
+						style: colWidth(header.getSize()),
+						children: header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())
+					}, header.id)) }, footerGroup.id)) }) : null
+				]
+			}),
+			isRefreshing ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "table-loading-overlay",
+				className: "bg-background/60 absolute inset-0 z-10 flex items-center justify-center",
+				children: /* @__PURE__ */ jsx(Spinner, {
+					size: "lg",
+					className: "text-muted-foreground"
+				})
+			}) : null,
+			showActionBar ? /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none absolute inset-x-0 bottom-0 z-20 flex justify-center p-2",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "animate-in fade-in slide-in-from-bottom-4 pointer-events-auto w-full duration-200 ease-out",
+					children: /* @__PURE__ */ jsx(ActionBarContext.Provider, {
+						value: {
+							count: selectedCount,
+							onClear: () => table.resetRowSelection()
+						},
+						children: actionBar
+					})
+				})
+			}) : null
+		]
+	});
+}
+function makeSelectColumn() {
+	return {
+		id: SELECT_COLUMN_ID,
+		header: ({ table }) => {
+			const allSelected = table.getIsAllRowsSelected();
+			const someSelected = table.getIsSomeRowsSelected();
+			return /* @__PURE__ */ jsx(Checkbox, {
+				checked: allSelected,
+				indeterminate: !allSelected && someSelected,
+				onCheckedChange: (value) => table.toggleAllRowsSelected(value === true),
+				"aria-label": "Select all rows"
+			});
+		},
+		cell: ({ row }) => /* @__PURE__ */ jsx("span", {
+			className: "contents",
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ jsx(Checkbox, {
+				checked: row.getIsSelected(),
+				disabled: !row.getCanSelect(),
+				onCheckedChange: (value) => row.toggleSelected(value === true),
+				"aria-label": "Select row"
+			})
+		}),
+		enableSorting: false,
+		enableHiding: false,
+		enableResizing: false,
+		size: 40
+	};
+}
+function ResizeHandle({ header }) {
+	const isResizing = header.column.getIsResizing();
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		onMouseDown: header.getResizeHandler(),
+		onTouchStart: header.getResizeHandler(),
+		onClick: (e) => e.stopPropagation(),
+		className: cn("absolute top-0 right-0 z-10 h-full w-1 cursor-col-resize touch-none select-none bg-border opacity-0 transition-opacity group-hover/header-row:opacity-100 hover:opacity-100", isResizing && "bg-primary opacity-100")
+	});
+}
+function SortableHeader({ header }) {
+	const direction = header.column.getIsSorted();
+	const Icon = direction === "asc" ? ChevronUpIcon : direction === "desc" ? ChevronDownIcon : ChevronsUpDownIcon;
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		size: "sm",
+		className: "-ml-2 h-7 data-[icon=inline-end]:pr-2",
+		onClick: header.column.getToggleSortingHandler(),
+		children: [flexRender(header.column.columnDef.header, header.getContext()), /* @__PURE__ */ jsx(Icon, {
+			"data-icon": "inline-end",
+			className: cn("size-3.5", direction === false && "opacity-50")
+		})]
 	});
-	return /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
-		"data-state": row.getIsSelected() && "selected",
-		children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
-	}, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
-		colSpan: columns.length,
-		className: "h-24 text-center",
-		children: noResultsMessage
-	}) }) })] });
+}
+function SkeletonRows({ columns, count }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(TableRow, { children: columns.map((col, ci) => /* @__PURE__ */ jsx(TableCell, {
+		"data-test": "loading-cell",
+		children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full max-w-full" })
+	}, col.id ?? `col-${ci}`)) }, `skeleton-${i}`)) });
+}
+/**
+* Returns a callback ref for the scroll sentinel. The observer is (re)attached
+* whenever the sentinel node mounts — so it works even if the sentinel only
+* appears after the first page loads (the sentinel's presence is the gate). It
+* fires `onFetchMore` once per mount and disconnects immediately, so a single
+* page never triggers duplicate fetches; the sentinel remounts for the next page.
+*/
+function useFetchMoreSentinel(onFetchMore, fillHeight, resetKey) {
+	const onFetchMoreRef = React$1.useRef(onFetchMore);
+	onFetchMoreRef.current = onFetchMore;
+	const observerRef = React$1.useRef(null);
+	const nodeRef = React$1.useRef(null);
+	const armedRef = React$1.useRef(true);
+	const observe = React$1.useCallback(() => {
+		observerRef.current?.disconnect();
+		observerRef.current = null;
+		const node = nodeRef.current;
+		if (!node) return;
+		const root = fillHeight ? node.closest("[data-slot=\"table-container\"]") : null;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[entries.length - 1]?.isIntersecting) {
+				if (armedRef.current) {
+					armedRef.current = false;
+					onFetchMoreRef.current?.();
+				}
+			} else armedRef.current = true;
+		}, {
+			root,
+			rootMargin: "200px"
+		});
+		observer.observe(node);
+		observerRef.current = observer;
+	}, [fillHeight]);
+	React$1.useEffect(() => {
+		armedRef.current = true;
+		observe();
+	}, [resetKey, observe]);
+	return React$1.useCallback((node) => {
+		nodeRef.current = node;
+		observe();
+	}, [observe]);
 }
 
 //#endregion
@@ -3602,16 +3907,6 @@ function SheetDescription({ className, ...props }) {
 	});
 }
 
-//#endregion
-//#region src/components/skeleton.tsx
-function Skeleton({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "skeleton",
-		className: cn("animate-pulse rounded-md bg-muted", className),
-		...props
-	});
-}
-
 //#endregion
 //#region src/components/tooltip.tsx
 function TooltipProvider({ delay = 0, ...props }) {
@@ -4122,38 +4417,115 @@ const Toaster = ({ ...props }) => {
 };
 
 //#endregion
-//#region src/components/spinner.tsx
-const spinnerVariants = cva("animate-spin text-current", {
-	variants: { size: {
-		default: "size-4",
-		sm: "size-3",
-		lg: "size-5",
-		xl: "size-6"
-	} },
-	defaultVariants: { size: "default" }
+//#region src/components/stepper.tsx
+const StepperContext = React$1.createContext(void 0);
+function useStepper() {
+	const ctx = React$1.useContext(StepperContext);
+	if (!ctx) throw new Error("useStepper must be used within a Stepper");
+	return ctx;
+}
+const Stepper = React$1.forwardRef((componentProps, forwardRef) => {
+	const { steps, defaultValue, className, children, value, onValueChange, ...props } = componentProps;
+	const [activeId = "", setActiveId] = useControllableState({
+		prop: value,
+		defaultProp: defaultValue ?? steps[0]?.id,
+		onChange: onValueChange
+	});
+	const goTo = React$1.useCallback((id) => setActiveId(id), [setActiveId]);
+	const getIndex = React$1.useCallback((id) => steps.findIndex((s) => s.id === id), [steps]);
+	const contextValue = React$1.useMemo(() => ({
+		activeId,
+		goTo,
+		getIndex,
+		steps
+	}), [
+		activeId,
+		goTo,
+		getIndex,
+		steps
+	]);
+	return /* @__PURE__ */ jsx(StepperContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: forwardRef,
+			"data-slot": "stepper",
+			className: cn("w-full", className),
+			...props,
+			children
+		})
+	});
 });
-function Spinner({ className, size, ...props }) {
-	return /* @__PURE__ */ jsxs("svg", {
-		"data-slot": "spinner",
-		xmlns: "http://www.w3.org/2000/svg",
-		fill: "none",
-		viewBox: "0 0 24 24",
-		className: cn(spinnerVariants({ size }), className),
+Stepper.displayName = "Stepper";
+const StepperProgress = React$1.forwardRef((componentProps, forwardRef) => {
+	const { steps: stepIds, className, ...props } = componentProps;
+	const { activeId, getIndex, steps } = useStepper();
+	const ids = stepIds ?? steps.map((s) => s.id);
+	const currentIndex = getIndex(activeId);
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
+		"data-slot": "stepper-progress",
+		"aria-hidden": "true",
+		className: cn("flex w-full items-center gap-1.5", className),
 		...props,
-		children: [/* @__PURE__ */ jsx("circle", {
-			className: "opacity-25",
-			cx: "12",
-			cy: "12",
-			r: "10",
-			stroke: "currentColor",
-			strokeWidth: "4"
-		}), /* @__PURE__ */ jsx("path", {
-			className: "opacity-75",
-			fill: "currentColor",
-			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-		})]
+		children: ids.map((id) => {
+			const idx = getIndex(id);
+			const state = idx < currentIndex ? "completed" : idx === currentIndex ? "active" : "inactive";
+			return /* @__PURE__ */ jsx("span", {
+				"data-slot": "stepper-progress-segment",
+				"data-state": state,
+				className: "bg-muted h-1.5 flex-1 rounded-full transition-colors duration-300 data-[state=active]:bg-primary data-[state=completed]:bg-primary"
+			}, id);
+		})
 	});
-}
+});
+StepperProgress.displayName = "StepperProgress";
+const StepperCounter = React$1.forwardRef((componentProps, forwardRef) => {
+	const { steps: stepIds, className, children, ...props } = componentProps;
+	const { activeId, steps } = useStepper();
+	const ids = stepIds ?? steps.map((s) => s.id);
+	const pos = Math.max(0, ids.indexOf(activeId));
+	return /* @__PURE__ */ jsxs("p", {
+		ref: forwardRef,
+		"data-slot": "stepper-counter",
+		className: cn("text-muted-foreground text-xs", "[[data-slot=stepper-progress]+&]:pt-1", className),
+		...props,
+		children: [
+			"Step ",
+			pos + 1,
+			" of ",
+			ids.length,
+			children
+		]
+	});
+});
+StepperCounter.displayName = "StepperCounter";
+const StepperPanel = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	const { activeId } = useStepper();
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
+		"data-slot": "stepper-panel",
+		"data-state": activeId,
+		className: cn("w-full", className),
+		...props
+	});
+});
+StepperPanel.displayName = "StepperPanel";
+const StepperContent = React$1.forwardRef((componentProps, forwardRef) => {
+	const { value, forceMount, className, ...props } = componentProps;
+	const { activeId } = useStepper();
+	const isActive = value === activeId;
+	if (!forceMount && !isActive) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
+		"data-slot": "stepper-content",
+		"data-state": activeId,
+		className: cn("w-full", className, !isActive && forceMount && "hidden"),
+		hidden: !isActive && forceMount,
+		...props
+	});
+});
+StepperContent.displayName = "StepperContent";
 
 //#endregion
 //#region src/components/switch.tsx
@@ -4355,4 +4727,4 @@ function useAudioGauge(options = {}) {
 }
 
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertAction as BannerAction, AlertDescription, AlertDescription as BannerDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTitle as BannerTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BadgeGroup, BadgeGroupCount, Banner, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Chip, ChipRemove, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CounterBadge, CountryFlag, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBackdrop, DrawerBar, DrawerClose, DrawerContent, DrawerCreateHandle, DrawerDescription, DrawerFooter, DrawerHeader, DrawerMenu, DrawerMenuCheckboxItem, DrawerMenuGroup, DrawerMenuGroupLabel, DrawerMenuItem, DrawerMenuRadioGroup, DrawerMenuRadioItem, DrawerMenuSeparator, DrawerMenuTrigger, DrawerPanel, DrawerPopup, DrawerPortal, DrawerPrimitive, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, DropdownMenu, DropdownMenuAddon, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneActions, DropzoneContent, DropzoneDescription, DropzoneIcon, DropzoneTitle, DropzoneTrigger, EmojiPicker, EmojiPickerCategories, EmojiPickerContent, EmojiPickerTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FAB, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Filter, FilterClearAllButton, FilterGroup, Gauge, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, List, ListCol, ListRow, NotificationQueueProvider, NotificationSlot, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, ScrollArea, ScrollAreaPrimitive, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, bannerVariants, buttonGroupVariants, buttonVariants, cn, counterBadgeVariants, fabVariants, selectTriggerVariants, spinnerVariants, toast, toggleVariants, useAudioGauge, useComboboxAnchor, useNotification, useNotificationQueue, useSidebar, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionBar, ActionBarButton, ActionBarContext, ActionBarHeight, Alert, AlertAction, AlertAction as BannerAction, AlertDescription, AlertDescription as BannerDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTitle as BannerTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BadgeGroup, BadgeGroupCount, Banner, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Chip, ChipRemove, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CounterBadge, CountryFlag, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBackdrop, DrawerBar, DrawerClose, DrawerContent, DrawerCreateHandle, DrawerDescription, DrawerFooter, DrawerHeader, DrawerMenu, DrawerMenuCheckboxItem, DrawerMenuGroup, DrawerMenuGroupLabel, DrawerMenuItem, DrawerMenuRadioGroup, DrawerMenuRadioItem, DrawerMenuSeparator, DrawerMenuTrigger, DrawerPanel, DrawerPopup, DrawerPortal, DrawerPrimitive, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, DropdownMenu, DropdownMenuAddon, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneActions, DropzoneContent, DropzoneDescription, DropzoneIcon, DropzoneTitle, DropzoneTrigger, EmojiPicker, EmojiPickerCategories, EmojiPickerContent, EmojiPickerTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FAB, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Filter, FilterClearAllButton, FilterGroup, Gauge, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, List, ListCol, ListRow, NotificationQueueProvider, NotificationSlot, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, ScrollArea, ScrollAreaPrimitive, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Stepper, StepperContent, StepperCounter, StepperPanel, StepperProgress, Switch, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, bannerVariants, buttonGroupVariants, buttonVariants, cn, counterBadgeVariants, fabVariants, selectTriggerVariants, spinnerVariants, toast, toggleVariants, useAudioGauge, useComboboxAnchor, useNotification, useNotificationQueue, useSidebar, useStepper, useTheme };