@humain/ui 2.1.63 → 2.1.65

package/dist/index190.js

@@ -1,799 +1,212 @@
 import { cn } from "./index2.js";
-import { Pagination } from "./index135.js";
-import { Checkbox } from "./index161.js";
-import { Table as TableNamespace, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./index177.js";
-import { Tooltip as TooltipCompound } from "./index187.js";
-import { dataTableTouchTargetClassName } from "./index188.js";
-import { DataTableActionsCell, DataTableAvatarCell, DataTableBadgesCell, DataTableCell, DataTableCellRoot, DataTableProgressCell, DataTableRatingCell, DataTableSparklineCell, DataTableSwitchCell, DataTableTextCell, DataTableTrendCell } from "./index189.js";
-import { cva } from "class-variance-authority";
-import { ArrowDown, ArrowUp, ChevronRight, ChevronsUpDown, CircleHelp } from "lucide-react";
-import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { flexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
-import { useVirtualizer } from "@tanstack/react-virtual";
-//#region src/components/organisms/content/DataTable/DataTable.tsx
-var responsiveColumnBreakpointClasses = {
-	sm: "@sm:table-cell",
-	md: "@md:table-cell",
-	lg: "@lg:table-cell"
+import { Button } from "./index5.js";
+import { Badge } from "./index14.js";
+import { Progress } from "./index17.js";
+import { Rating } from "./index18.js";
+import { SparklineChart } from "./index23.js";
+import { Switch } from "./index42.js";
+import { Avatar } from "./index70.js";
+import { dataTableTouchTargetClassName } from "./index189.js";
+import { ArrowDown, ArrowUp, MoreHorizontal } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/content/DataTable/DataTableCell.tsx
+var textToneClassName = {
+	foreground: "text-foreground",
+	secondary: "text-secondary-foreground",
+	muted: "text-muted-foreground",
+	success: "text-success",
+	warning: "text-warning",
+	destructive: "text-destructive"
 };
-var responsiveColumnVisibilitySlots = [
-	"base",
-	"sm",
-	"md",
-	"lg"
-];
-var responsiveColumnVisibilityRanks = {
-	base: 0,
-	sm: 1,
-	md: 2,
-	lg: 3
-};
-var dataTableVariants = cva("w-full", {
-	variants: {
-		/** Visual style for row separation */
-		dividers: {
-			/** Border line between rows */
-			line: "",
-			/** Alternating row background fills */
-			alternating: ""
-		},
-		/** Table density */
-		density: {
-			default: "",
-			compact: ""
-		}
-	},
-	defaultVariants: {
-		dividers: "line",
-		density: "default"
-	}
-});
-var dataTableContainerVariants = cva("bg-card", {
-	variants: {
-		/** Border radius configuration */
-		rounded: {
-			/** Rounded on all corners (default) */
-			all: "rounded-xl",
-			/** No rounding on any corner */
-			none: "rounded-none",
-			/** Only top corners rounded */
-			top: "rounded-t-xl rounded-b-none",
-			/** Only bottom corners rounded (for embedding in cards with headers) */
-			bottom: "rounded-t-none rounded-b-xl"
-		},
-		/** Whether to show the outer border */
-		bordered: {
-			true: "border border-border shadow-xs",
-			false: ""
-		}
-	},
-	defaultVariants: {
-		rounded: "all",
-		bordered: true
-	}
-});
-var dataTableRowVariants = cva("transition-colors duration-150 ease-out motion-reduce:transition-none", {
-	variants: {
-		dividers: {
-			line: "border-b border-border-subtle",
-			alternating: "border-0"
-		},
-		density: {
-			default: "",
-			compact: ""
-		},
-		isEven: {
-			true: "",
-			false: ""
-		},
-		isSelected: {
-			true: "bg-muted dark:bg-accent shadow-[inset_3px_0_0_0_var(--color-primary)] rtl:shadow-[inset_-3px_0_0_0_var(--color-primary)]",
-			false: ""
-		}
-	},
-	compoundVariants: [{
-		dividers: "alternating",
-		isEven: true,
-		isSelected: false,
-		className: "bg-muted"
-	}, {
-		dividers: "alternating",
-		isEven: false,
-		isSelected: false,
-		className: "bg-background dark:bg-card"
-	}],
-	defaultVariants: {
-		dividers: "line",
-		density: "default",
-		isEven: false,
-		isSelected: false
-	}
-});
-var dataTableCellVariants = cva("align-middle", {
-	variants: { density: {
-		default: "h-[72px] ps-4 pe-4 py-3 @md:ps-6 @md:pe-6 @md:py-3",
-		compact: "h-14 ps-4 pe-4 py-2"
-	} },
-	defaultVariants: { density: "default" }
-});
-var dataTableHeaderCellVariants = cva("text-sm font-medium text-muted-foreground", {
-	variants: { density: {
-		default: "h-11 ps-6 pe-6 py-3",
-		compact: "h-11 ps-4 pe-4 py-2"
-	} },
-	defaultVariants: { density: "default" }
-});
-function getStickyCellClass({ stickyFirstColumn, stickyLastColumn, isFirstColumn, isLastColumn, isSelected }) {
-	if (!(stickyFirstColumn && isFirstColumn || stickyLastColumn && isLastColumn)) return;
-	return cn("sticky z-20", stickyFirstColumn && isFirstColumn && "start-0", stickyLastColumn && isLastColumn && "end-0", isSelected ? "bg-muted dark:bg-accent" : "bg-background dark:bg-card");
-}
-function getResponsiveColumnPriority(priority) {
-	switch (priority) {
-		case "always":
-		case "desktop":
-		case "mobile": return priority;
-		default: return;
-	}
-}
-function getResponsiveColumnHideBelow(hideBelow) {
-	switch (hideBelow) {
-		case "sm":
-		case "md":
-		case "lg": return hideBelow;
-		default: return;
-	}
-}
-function isColumnVisibleInResponsiveSlot(responsive, enabled, slot) {
-	if (!enabled || !responsive) return true;
-	const priority = getResponsiveColumnPriority(responsive.priority);
-	if (priority === "always") return true;
-	if (priority === "mobile") return slot === "base" || slot === "sm";
-	const hideBelow = getResponsiveColumnHideBelow(responsive.hideBelow) ?? "md";
-	return responsiveColumnVisibilityRanks[slot] >= responsiveColumnVisibilityRanks[hideBelow];
-}
-function withResponsiveSlotVariant(slot, className) {
-	if (slot === "base") return className;
-	return className.split(" ").map((token) => `@${slot}:${token}`).join(" ");
-}
-function getResponsiveStickyStateClass({ backgroundClass, side, slots, zIndexClass }) {
-	if (!slots.length) return;
-	const stickySlots = new Set(slots);
-	const classes = [];
-	let wasSticky = false;
-	for (const slot of responsiveColumnVisibilitySlots) {
-		const isSticky = stickySlots.has(slot);
-		if (isSticky && !wasSticky) classes.push(withResponsiveSlotVariant(slot, cn("sticky", zIndexClass, `${side}-0`, backgroundClass)));
-		else if (!isSticky && wasSticky) classes.push(withResponsiveSlotVariant(slot, "static z-auto start-auto end-auto"));
-		wasSticky = isSticky;
-	}
-	return cn(classes);
-}
-function addResponsiveStickySlot(slotMap, item, getId, slot, slotKey) {
-	if (!item) return;
-	const itemId = getId(item);
-	const itemSlots = slotMap.get(itemId) ?? {
-		firstSlots: [],
-		lastSlots: []
-	};
-	itemSlots[slotKey].push(slot);
-	slotMap.set(itemId, itemSlots);
-}
-function getResponsiveStickySlotsById({ enabled, getId, getResponsive, items, stickyFirstColumn, stickyLastColumn }) {
-	const slotMap = /* @__PURE__ */ new Map();
-	if (!enabled || !(stickyFirstColumn || stickyLastColumn)) return slotMap;
-	for (const slot of responsiveColumnVisibilitySlots) {
-		const visibleItems = items.filter((item) => isColumnVisibleInResponsiveSlot(getResponsive(item), enabled, slot));
-		if (stickyFirstColumn) addResponsiveStickySlot(slotMap, visibleItems[0], getId, slot, "firstSlots");
-		if (stickyLastColumn) addResponsiveStickySlot(slotMap, visibleItems.at(-1), getId, slot, "lastSlots");
-	}
-	return slotMap;
-}
-function getResponsiveStickyClass({ backgroundClass, firstSlots, lastSlots, zIndexClass = "z-20" }) {
-	return cn(getResponsiveStickyStateClass({
-		backgroundClass,
-		side: "start",
-		slots: firstSlots,
-		zIndexClass
-	}), getResponsiveStickyStateClass({
-		backgroundClass,
-		side: "end",
-		slots: lastSlots,
-		zIndexClass
-	}));
-}
-function getHeaderCellWidth(size) {
-	if (size === 150) return;
-	return size;
-}
-function getAriaSort(sortState) {
-	if (sortState === "asc") return "ascending";
-	if (sortState === "desc") return "descending";
+function getSentiment(value) {
+	if (value > 0) return "positive";
+	if (value < 0) return "negative";
+	return "neutral";
+}
+function formatTrendValue(value) {
+	const absoluteValue = Math.abs(value);
+	return `${Number.isInteger(absoluteValue) ? absoluteValue : absoluteValue.toFixed(1)}%`;
+}
+function getActionButtonSize({ children, icon, iconOnly, size }) {
+	if (size) return size;
+	return iconOnly ?? (icon && !children) ? "icon-sm" : "sm";
+}
+function DataTableCellRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "data-table-cell-content",
+		className: cn("flex min-w-0 items-center gap-3", className),
+		...props
+	});
 }
-function getResponsiveColumnClass(responsive, enabled) {
-	if (!enabled || !responsive) return;
-	const priority = getResponsiveColumnPriority(responsive.priority);
-	if (priority === "always") return;
-	if (priority === "mobile") return "@md:hidden";
-	return `hidden ${responsiveColumnBreakpointClasses[getResponsiveColumnHideBelow(responsive.hideBelow) ?? "md"]}`;
+DataTableCellRoot.displayName = "DataTableCell";
+function DataTableTextCell({ className, primary, children, supportingText, lead = true, tone = lead ? "foreground" : "secondary", supportingTone = "muted", primaryClassName, supportingClassName, ...props }) {
+	const primaryContent = primary ?? children;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-table-cell-text",
+		className: cn("flex min-w-0 flex-col", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("truncate text-sm", lead ? "font-medium" : "font-regular", textToneClassName[tone], primaryClassName),
+			children: primaryContent
+		}), supportingText ? /* @__PURE__ */ jsx("span", {
+			className: cn("truncate text-sm font-light", textToneClassName[supportingTone], supportingClassName),
+			children: supportingText
+		}) : null]
+	});
 }
-function getVirtualRowStyle(start, headerOffset) {
-	return {
-		display: "table",
-		position: "absolute",
-		top: 0,
-		insetInlineStart: 0,
-		width: "100%",
-		transform: `translateY(${start + headerOffset}px)`
-	};
+DataTableTextCell.displayName = "DataTableCell.Text";
+function DataTableAvatarCell({ className, name, supportingText, src, alt = "", fallback, avatar, avatarSize = "lg", avatarShape = "circle", lead = true, ...props }) {
+	return /* @__PURE__ */ jsxs(DataTableCellRoot, {
+		className,
+		...props,
+		children: [avatar ?? /* @__PURE__ */ jsx(Avatar, {
+			src,
+			alt,
+			fallback: fallback ?? (typeof name === "string" ? name : void 0),
+			size: avatarSize,
+			shape: avatarShape
+		}), /* @__PURE__ */ jsx(DataTableTextCell, {
+			className: "min-w-0",
+			primary: name,
+			supportingText,
+			lead
+		})]
+	});
 }
-var selectionCheckboxClassName = "translate-y-[2px] before:-inset-[14px] before:rounded-md";
-function createSelectColumn() {
-	return {
-		id: "select",
-		header: ({ table }) => /* @__PURE__ */ jsx(Checkbox, {
-			checked: table.getIsAllPageRowsSelected(),
-			indeterminate: table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected(),
-			onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
-			"aria-label": "Select all",
-			className: selectionCheckboxClassName
-		}),
-		cell: ({ row }) => /* @__PURE__ */ jsx(Checkbox, {
-			checked: row.getIsSelected(),
-			onCheckedChange: (value) => row.toggleSelected(!!value),
-			"aria-label": "Select row",
-			className: selectionCheckboxClassName
-		}),
-		enableSorting: false,
-		enableHiding: false,
-		size: 64,
-		meta: {
-			headerClassName: "w-16 min-w-16",
-			cellClassName: "w-16 min-w-16"
-		}
-	};
+DataTableAvatarCell.displayName = "DataTableCell.Avatar";
+function DataTableBadgesCell({ className, items, max = items.length, overflowLabel = (count) => `+${count}`, size = "sm", color = "secondary", variant = "soft", shape = "rounded", ...props }) {
+	const visibleCount = Math.max(0, Math.min(items.length, max));
+	const visibleItems = items.slice(0, visibleCount);
+	const overflowCount = items.length - visibleItems.length;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-table-cell-badges",
+		className: cn("flex min-w-0 flex-wrap items-center gap-1", className),
+		...props,
+		children: [visibleItems.map((item, index) => /* @__PURE__ */ jsx(Badge, {
+			color: item.color ?? color,
+			variant: item.variant ?? variant,
+			shape: item.shape ?? shape,
+			size,
+			className: item.className,
+			children: item.label
+		}, `${String(item.label)}-${index}`)), overflowCount > 0 ? /* @__PURE__ */ jsx(Badge, {
+			color: "secondary",
+			variant: "soft",
+			shape,
+			size,
+			children: overflowLabel(overflowCount)
+		}) : null]
+	});
 }
-function HeaderTooltip({ content }) {
-	if (!content) return null;
-	return /* @__PURE__ */ jsx(TooltipCompound, {
-		trigger: /* @__PURE__ */ jsx("button", {
-			type: "button",
-			className: cn(dataTableTouchTargetClassName, "rounded-sm text-muted-foreground hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"),
-			"aria-label": "Column information",
-			children: /* @__PURE__ */ jsx(CircleHelp, { className: "size-3.5 shrink-0" })
-		}),
-		content
+DataTableBadgesCell.displayName = "DataTableCell.Badges";
+function DataTableProgressCell({ className, value, max = 100, label, supportingText, progressClassName, ...props }) {
+	const percentage = Math.min(100, Math.max(0, value / (Number.isFinite(max) && max > 0 ? max : 100) * 100));
+	const visibleLabel = label ?? `${Math.round(percentage)}%`;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-table-cell-progress",
+		className: cn("flex min-w-40 items-center gap-3", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "w-10 shrink-0 text-sm text-secondary-foreground",
+				children: visibleLabel
+			}),
+			/* @__PURE__ */ jsx(Progress, {
+				value: percentage,
+				className: cn("min-w-24 flex-1", progressClassName)
+			}),
+			supportingText ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-sm text-foreground",
+				children: supportingText
+			}) : null
+		]
 	});
 }
-function SortableHeader({ children, column, className }) {
-	const sorted = column.getIsSorted();
-	const canSort = column.getCanSort();
-	const tooltipContent = column.columnDef?.meta?.headerTooltip;
-	if (!canSort) {
-		if (!tooltipContent) return /* @__PURE__ */ jsx("span", {
-			className,
-			children
-		});
-		return /* @__PURE__ */ jsxs("span", {
-			className: cn("inline-flex items-center gap-1", className),
-			children: [/* @__PURE__ */ jsx("span", { children }), /* @__PURE__ */ jsx(HeaderTooltip, { content: tooltipContent })]
-		});
-	}
+DataTableProgressCell.displayName = "DataTableCell.Progress";
+function DataTableTrendCell({ className, value, sentiment = getSentiment(value), showIcon = true, formatValue = formatTrendValue, ...props }) {
+	const Icon = sentiment === "positive" ? ArrowUp : sentiment === "negative" ? ArrowDown : null;
 	return /* @__PURE__ */ jsxs("span", {
-		className: cn("inline-flex items-center gap-1", className),
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			onClick: () => column.toggleSorting(sorted === "asc"),
-			className: cn(dataTableTouchTargetClassName, "flex items-center gap-1 text-start hover:text-foreground transition-colors duration-150 ease-out motion-reduce:transition-none -ms-1 ps-1 -me-1 pe-1 -my-0.5 py-0.5 rounded focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none active:scale-[0.97] motion-reduce:active:scale-100"),
-			children: [children, /* @__PURE__ */ jsxs("span", {
-				className: "relative size-4",
-				children: [
-					/* @__PURE__ */ jsx(ArrowUp, { className: cn("absolute inset-0 size-4 text-text-quaternary transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none", sorted === "asc" ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-1") }),
-					/* @__PURE__ */ jsx(ArrowDown, { className: cn("absolute inset-0 size-4 text-text-quaternary transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none", sorted === "desc" ? "opacity-100 translate-y-0" : "opacity-0 translate-y-1") }),
-					/* @__PURE__ */ jsx(ChevronsUpDown, { className: cn("absolute inset-0 size-4 transition-opacity duration-200 ease-out motion-reduce:transition-none", sorted ? "opacity-0" : "opacity-100 text-muted-foreground") })
-				]
-			})]
-		}), /* @__PURE__ */ jsx(HeaderTooltip, { content: tooltipContent })]
+		"data-slot": "data-table-cell-trend",
+		className: cn("inline-flex items-center gap-1 text-sm font-medium", sentiment === "positive" ? "text-success" : sentiment === "negative" ? "text-destructive" : "text-secondary-foreground", className),
+		...props,
+		children: [showIcon && Icon ? /* @__PURE__ */ jsx(Icon, {
+			className: "size-3",
+			"aria-hidden": "true"
+		}) : null, formatValue(value)]
 	});
 }
-function DataTableGroupHeader({ row, visibleColumnCount, customHeader }) {
-	return /* @__PURE__ */ jsx(Fragment, { children: customHeader(row, visibleColumnCount) });
-}
-function DataTableControls({ table, customControls }) {
-	return /* @__PURE__ */ jsx(Fragment, { children: customControls(table) });
-}
-function useDataTable({ columns, data, enableRowSelection = false, enableMultiRowSelection = true, rowSelection: controlledRowSelection, onRowSelectionChange, initialRowSelection = {}, showSelectAll = true, enableSorting = true, sortingMode = "client", sorting: controlledSorting, onSortingChange, initialSorting = [], enablePagination = false, paginationMode = "client", pagination: controlledPagination, onPaginationChange, pageCount: controlledPageCount, rowCount, pageSize = 10, initialPageIndex = 0, enableColumnFilters = false, filteringMode = "client", columnFilters: controlledColumnFilters, onColumnFiltersChange, initialColumnFilters = [], enableColumnVisibility = false, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, initialColumnVisibility = {}, enableGrouping = false, groupingMode = "client", grouping: controlledGrouping, onGroupingChange, initialGrouping = [], groupedColumnMode = false, expanded: controlledExpanded, onExpandedChange, initialExpanded = {}, getRowId, getSubRows }) {
-	const defaultPaginationState = React.useMemo(() => ({
-		pageIndex: initialPageIndex,
-		pageSize
-	}), [initialPageIndex, pageSize]);
-	const [internalRowSelection, setInternalRowSelection] = React.useState(initialRowSelection);
-	const [internalSorting, setInternalSorting] = React.useState(initialSorting);
-	const [internalColumnFilters, setInternalColumnFilters] = React.useState(initialColumnFilters);
-	const [internalColumnVisibility, setInternalColumnVisibility] = React.useState(initialColumnVisibility);
-	const [internalPagination, setInternalPagination] = React.useState(defaultPaginationState);
-	const [internalGrouping, setInternalGrouping] = React.useState(initialGrouping);
-	const [internalExpanded, setInternalExpanded] = React.useState(initialExpanded);
-	const rowSelection = controlledRowSelection ?? internalRowSelection;
-	const sorting = controlledSorting ?? internalSorting;
-	const columnFilters = controlledColumnFilters ?? internalColumnFilters;
-	const columnVisibility = controlledColumnVisibility ?? internalColumnVisibility;
-	const pagination = controlledPagination ?? internalPagination;
-	const grouping = controlledGrouping ?? internalGrouping;
-	const expanded = controlledExpanded ?? internalExpanded;
-	const handleRowSelectionChange = React.useCallback((updater) => {
-		if (controlledRowSelection === void 0) setInternalRowSelection(updater);
-		onRowSelectionChange?.(updater);
-	}, [controlledRowSelection, onRowSelectionChange]);
-	const handleSortingChange = React.useCallback((updater) => {
-		if (controlledSorting === void 0) setInternalSorting(updater);
-		onSortingChange?.(updater);
-	}, [controlledSorting, onSortingChange]);
-	const handleColumnFiltersChange = React.useCallback((updater) => {
-		if (controlledColumnFilters === void 0) setInternalColumnFilters(updater);
-		onColumnFiltersChange?.(updater);
-	}, [controlledColumnFilters, onColumnFiltersChange]);
-	const handleColumnVisibilityChange = React.useCallback((updater) => {
-		if (controlledColumnVisibility === void 0) setInternalColumnVisibility(updater);
-		onColumnVisibilityChange?.(updater);
-	}, [controlledColumnVisibility, onColumnVisibilityChange]);
-	const handlePaginationChange = React.useCallback((updater) => {
-		if (controlledPagination === void 0) setInternalPagination(updater);
-		onPaginationChange?.(updater);
-	}, [controlledPagination, onPaginationChange]);
-	const handleGroupingChange = React.useCallback((updater) => {
-		if (controlledGrouping === void 0) setInternalGrouping(updater);
-		onGroupingChange?.(updater);
-	}, [controlledGrouping, onGroupingChange]);
-	const handleExpandedChange = React.useCallback((updater) => {
-		if (controlledExpanded === void 0) setInternalExpanded(updater);
-		onExpandedChange?.(updater);
-	}, [controlledExpanded, onExpandedChange]);
-	const tableColumns = React.useMemo(() => {
-		if (enableRowSelection && showSelectAll) return [createSelectColumn(), ...columns];
-		return columns;
-	}, [
-		columns,
-		enableRowSelection,
-		showSelectAll
-	]);
-	const manualPagination = paginationMode === "server";
-	const manualSorting = sortingMode === "server";
-	const manualFiltering = filteringMode === "server";
-	const manualGrouping = groupingMode === "server";
-	const pageCount = React.useMemo(() => {
-		if (controlledPageCount !== void 0) return controlledPageCount;
-		if (rowCount !== void 0 && pagination.pageSize > 0) return Math.ceil(rowCount / pagination.pageSize);
-	}, [
-		controlledPageCount,
-		rowCount,
-		pagination.pageSize
-	]);
-	const table = useReactTable({
-		data,
-		columns: tableColumns,
-		state: {
-			rowSelection,
-			sorting,
-			columnFilters,
-			columnVisibility,
-			pagination,
-			grouping,
-			expanded
-		},
-		enableRowSelection,
-		enableMultiRowSelection,
-		onRowSelectionChange: handleRowSelectionChange,
-		enableSorting,
-		manualSorting,
-		onSortingChange: handleSortingChange,
-		manualPagination,
-		pageCount,
-		onPaginationChange: handlePaginationChange,
-		enableColumnFilters,
-		manualFiltering,
-		onColumnFiltersChange: handleColumnFiltersChange,
-		enableHiding: enableColumnVisibility,
-		onColumnVisibilityChange: handleColumnVisibilityChange,
-		enableGrouping,
-		manualGrouping,
-		groupedColumnMode: groupedColumnMode || void 0,
-		onGroupingChange: handleGroupingChange,
-		onExpandedChange: handleExpandedChange,
-		paginateExpandedRows: false,
-		getSubRows: groupingMode === "server" ? getSubRows : void 0,
-		getCoreRowModel: getCoreRowModel(),
-		getSortedRowModel: enableSorting && sortingMode === "client" ? getSortedRowModel() : void 0,
-		getFilteredRowModel: enableColumnFilters && filteringMode === "client" ? getFilteredRowModel() : void 0,
-		getPaginationRowModel: enablePagination && paginationMode === "client" ? getPaginationRowModel() : void 0,
-		getGroupedRowModel: enableGrouping && groupingMode === "client" ? getGroupedRowModel() : void 0,
-		getExpandedRowModel: enableGrouping ? getExpandedRowModel() : void 0,
-		getRowId
+DataTableTrendCell.displayName = "DataTableCell.Trend";
+function DataTableSparklineCell({ className, data, color = "primary", width = 108, height = 24, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "data-table-cell-sparkline",
+		className: cn("flex items-center", className),
+		...props,
+		children: /* @__PURE__ */ jsx(SparklineChart, {
+			data,
+			color,
+			width,
+			height
+		})
 	});
-	return {
-		table,
-		totalPages: table.getPageCount(),
-		currentPage: pagination.pageIndex + 1,
-		showPagination: enablePagination && paginationMode !== "none" && table.getPageCount() > 1
-	};
 }
-function DataTable({ columns, data, children, enableRowSelection = false, enableMultiRowSelection = true, rowSelection: controlledRowSelection, onRowSelectionChange, initialRowSelection = {}, enableSorting = true, sortingMode = "client", sorting: controlledSorting, onSortingChange, initialSorting = [], enablePagination = false, paginationMode = "client", pagination: controlledPagination, onPaginationChange, pageCount: controlledPageCount, rowCount, pageSize = 10, initialPageIndex = 0, enableColumnFilters = false, filteringMode = "client", columnFilters: controlledColumnFilters, onColumnFiltersChange, initialColumnFilters = [], enableColumnVisibility = false, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, initialColumnVisibility = {}, enableGrouping = false, groupingMode = "client", grouping: controlledGrouping, onGroupingChange, initialGrouping = [], groupedColumnMode = false, expanded: controlledExpanded, onExpandedChange, initialExpanded = {}, getSubRows, paginationType = "page-default", paginationShape = "square", paginationSize = "md", paginationShowPageNumbers = true, paginationLabel, getRowId, onRowClick, emptyState, className, caption, dividers = "line", density = "default", showSelectAll = true, responsiveColumns = false, renderControls, classNames, renderBody, renderRow, renderGroupHeader, maxHeight, stickyHeader = false, stickyFirstColumn = false, stickyLastColumn = false, loading: isLoading = false, loadingState, error, errorState, i18n, virtualization, showSelectionCount = false, rounded = "all", bordered = true }) {
-	const { table, totalPages, currentPage, showPagination } = useDataTable({
-		columns,
-		data,
-		enableRowSelection,
-		enableMultiRowSelection,
-		rowSelection: controlledRowSelection,
-		onRowSelectionChange,
-		initialRowSelection,
-		showSelectAll,
-		enableSorting,
-		sortingMode,
-		sorting: controlledSorting,
-		onSortingChange,
-		initialSorting,
-		enablePagination,
-		paginationMode,
-		pagination: controlledPagination,
-		onPaginationChange,
-		pageCount: controlledPageCount,
-		rowCount,
-		pageSize,
-		initialPageIndex,
-		enableColumnFilters,
-		filteringMode,
-		columnFilters: controlledColumnFilters,
-		onColumnFiltersChange,
-		initialColumnFilters,
-		enableColumnVisibility,
-		columnVisibility: controlledColumnVisibility,
-		onColumnVisibilityChange,
-		initialColumnVisibility,
-		enableGrouping,
-		groupingMode,
-		grouping: controlledGrouping,
-		onGroupingChange,
-		initialGrouping,
-		groupedColumnMode,
-		expanded: controlledExpanded,
-		onExpandedChange,
-		initialExpanded,
-		getSubRows,
-		getRowId
+DataTableSparklineCell.displayName = "DataTableCell.Sparkline";
+function DataTableRatingCell({ className, size = "md", ...props }) {
+	return /* @__PURE__ */ jsx(Rating, {
+		"data-slot": "data-table-cell-rating",
+		className,
+		size,
+		...props
 	});
-	const tableContainerRef = React.useRef(null);
-	const rows = table.getRowModel().rows;
-	const isVirtualizationEnabled = virtualization?.enabled ?? false;
-	const headerOffset = stickyHeader && isVirtualizationEnabled ? 40 : 0;
-	const isGroupRow = React.useCallback((row) => {
-		if (row.getIsGrouped()) return true;
-		if (groupingMode === "server" && row.subRows.length > 0) return true;
-		return false;
-	}, [groupingMode]);
-	const rowVirtualizer = useVirtualizer({
-		enabled: isVirtualizationEnabled,
-		count: isVirtualizationEnabled ? rows.length : 0,
-		getScrollElement: () => tableContainerRef.current,
-		estimateSize: (index) => {
-			const row = rows[index];
-			if (row && isGroupRow(row)) return virtualization?.estimatedGroupHeaderHeight ?? 48;
-			return virtualization?.estimatedRowHeight ?? 50;
-		},
-		overscan: virtualization?.overscan ?? 5
+}
+DataTableRatingCell.displayName = "DataTableCell.Rating";
+function DataTableSwitchCell(props) {
+	return /* @__PURE__ */ jsx(Switch, {
+		"data-slot": "data-table-cell-switch",
+		size: "sm",
+		...props
 	});
-	const handleRowKeyDown = React.useCallback((row, e) => {
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			onRowClick?.(row);
-		}
-	}, [onRowClick]);
-	const renderCellContent = React.useCallback((cell, row) => {
-		const isGroupedCell = cell.getIsGrouped();
-		const isAggregatedCell = cell.getIsAggregated();
-		const isPlaceholderCell = cell.getIsPlaceholder();
-		if (isGroupedCell) {
-			const actionLabel = row.getIsExpanded() ? "Collapse" : "Expand";
-			const groupLabel = String(cell.getValue() ?? "");
-			return /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				onClick: row.getToggleExpandedHandler(),
-				className: "flex items-center gap-1.5 text-start font-medium group/expand rounded -ms-1 ps-1 -me-1 pe-1 -my-0.5 py-0.5 hover:text-foreground transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none active:scale-[0.98] motion-reduce:active:scale-100",
-				"aria-label": `${actionLabel} ${groupLabel} group`,
-				"aria-expanded": row.getIsExpanded(),
-				children: [
-					/* @__PURE__ */ jsx(ChevronRight, { className: cn("h-4 w-4 flex-shrink-0 transition-transform duration-200 ease-out motion-reduce:transition-none", row.getIsExpanded() && "rotate-90") }),
-					/* @__PURE__ */ jsx("span", { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }),
-					/* @__PURE__ */ jsxs("span", {
-						className: "text-text-quaternary tabular-nums",
-						children: [
-							"(",
-							row.subRows.length,
-							")"
-						]
-					})
-				]
-			});
-		}
-		if (isAggregatedCell) return flexRender(cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell, cell.getContext());
-		if (isPlaceholderCell) return null;
-		return flexRender(cell.column.columnDef.cell, cell.getContext());
-	}, []);
-	const hasChildren = React.Children.count(children) > 0;
-	const hasFooter = showPagination || showSelectionCount;
-	const shouldRenderComposite = hasChildren || hasFooter;
-	const selectedRowCount = table.getFilteredSelectedRowModel().rows.length;
-	const filteredRowCount = table.getFilteredRowModel().rows.length;
-	const selectionTotalRowCount = rowCount ?? filteredRowCount;
-	const footerLabel = showSelectionCount ? i18n?.selectionCount?.(selectedRowCount, selectionTotalRowCount) ?? `${selectedRowCount} of ${selectionTotalRowCount} Row(s) Selected.` : null;
-	let statusContent;
-	if (isLoading) statusContent = loadingState || i18n?.loading || "Loading...";
-	else if (error) statusContent = errorState || error.message;
-	else statusContent = emptyState || i18n?.noResults || "No results.";
-	const statusAriaLive = isLoading || error ? "polite" : void 0;
-	function renderVirtualizedBody() {
-		return /* @__PURE__ */ jsx(TableBody, {
-			style: {
-				display: "block",
-				position: "relative",
-				height: `${rowVirtualizer.getTotalSize() + headerOffset}px`
-			},
-			children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
-				const row = rows[virtualRow.index];
-				const rowIsGroup = isGroupRow(row);
-				const visibleCells = row.getVisibleCells();
-				const visibleColumnCount = visibleCells.length;
-				const responsiveStickySlotsById = getResponsiveStickySlotsById({
-					enabled: responsiveColumns,
-					getId: (item) => item.column.id,
-					getResponsive: (item) => item.column.columnDef.meta?.responsive,
-					items: visibleCells,
-					stickyFirstColumn,
-					stickyLastColumn
-				});
-				if (rowIsGroup && renderGroupHeader) return /* @__PURE__ */ jsx(TableRow, {
-					"data-state": row.getIsSelected() && "selected",
-					ref: (node) => rowVirtualizer.measureElement(node),
-					"data-index": virtualRow.index,
-					className: cn(dataTableRowVariants({
-						dividers,
-						density,
-						isEven: virtualRow.index % 2 === 1,
-						isSelected: row.getIsSelected()
-					}), "bg-muted", classNames?.row),
-					style: getVirtualRowStyle(virtualRow.start, headerOffset),
-					children: /* @__PURE__ */ jsx(DataTableGroupHeader, {
-						row,
-						visibleColumnCount,
-						customHeader: renderGroupHeader
-					})
-				}, row.id);
-				return /* @__PURE__ */ jsx(TableRow, {
-					"data-state": row.getIsSelected() && "selected",
-					"aria-selected": row.getIsSelected() ? "true" : void 0,
-					tabIndex: onRowClick ? 0 : void 0,
-					onClick: onRowClick ? () => onRowClick(row) : void 0,
-					onKeyDown: onRowClick ? (e) => handleRowKeyDown(row, e) : void 0,
-					ref: (node) => rowVirtualizer.measureElement(node),
-					"data-index": virtualRow.index,
-					className: cn(dataTableRowVariants({
-						dividers,
-						density,
-						isEven: virtualRow.index % 2 === 1,
-						isSelected: row.getIsSelected()
-					}), rowIsGroup && "bg-muted", onRowClick && "cursor-pointer hover:bg-muted focus-visible:bg-muted focus-visible:outline-none active:bg-accent/50 motion-reduce:active:bg-muted", classNames?.row),
-					style: getVirtualRowStyle(virtualRow.start, headerOffset),
-					children: visibleCells.map((cell, cellIndex) => {
-						const isFirstColumn = cellIndex === 0;
-						const isLastColumn = cellIndex === visibleColumnCount - 1;
-						const responsiveStickySlots = responsiveStickySlotsById.get(cell.column.id);
-						const stickyClass = responsiveColumns ? getResponsiveStickyClass({
-							backgroundClass: row.getIsSelected() ? "bg-muted dark:bg-accent" : "bg-background dark:bg-card",
-							firstSlots: responsiveStickySlots?.firstSlots ?? [],
-							lastSlots: responsiveStickySlots?.lastSlots ?? []
-						}) : getStickyCellClass({
-							stickyFirstColumn,
-							stickyLastColumn,
-							isFirstColumn,
-							isLastColumn,
-							isSelected: row.getIsSelected()
-						});
-						return /* @__PURE__ */ jsx(TableCell, {
-							className: cn(dataTableCellVariants({ density }), classNames?.cell, cell.column.columnDef.meta?.cellClassName, getResponsiveColumnClass(cell.column.columnDef.meta?.responsive, responsiveColumns), stickyClass),
-							children: rowIsGroup ? renderCellContent(cell, row) : flexRender(cell.column.columnDef.cell, cell.getContext())
-						}, cell.id);
-					})
-				}, row.id);
-			})
-		});
-	}
-	function renderStandardBody() {
-		let bodyContent;
-		if (!rows.length) bodyContent = /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
-			colSpan: table.getAllColumns().length,
-			className: cn(dataTableCellVariants({ density }), "h-24 text-center text-muted-foreground"),
-			"aria-live": statusAriaLive,
-			children: statusContent
-		}) });
-		else if (renderRow) bodyContent = rows.map((row) => renderRow(row));
-		else bodyContent = rows.map((row, index) => {
-			const rowIsGroup = isGroupRow(row);
-			const visibleCells = row.getVisibleCells();
-			const visibleColumnCount = visibleCells.length;
-			const responsiveStickySlotsById = getResponsiveStickySlotsById({
-				enabled: responsiveColumns,
-				getId: (item) => item.column.id,
-				getResponsive: (item) => item.column.columnDef.meta?.responsive,
-				items: visibleCells,
-				stickyFirstColumn,
-				stickyLastColumn
+}
+DataTableSwitchCell.displayName = "DataTableCell.Switch";
+function DataTableActionsCell({ className, actions, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "data-table-cell-actions",
+		className: cn("flex items-center justify-end gap-1", className),
+		...props,
+		children: actions.map((action) => {
+			const iconOnly = action.iconOnly ?? !action.children;
+			const size = getActionButtonSize({
+				children: action.children,
+				icon: action.icon,
+				iconOnly,
+				size: action.size
 			});
-			if (rowIsGroup && renderGroupHeader) return /* @__PURE__ */ jsx(TableRow, {
-				"data-state": row.getIsSelected() && "selected",
-				className: cn(dataTableRowVariants({
-					dividers,
-					density,
-					isEven: index % 2 === 1,
-					isSelected: row.getIsSelected()
-				}), "bg-muted", classNames?.row),
-				children: /* @__PURE__ */ jsx(DataTableGroupHeader, {
-					row,
-					visibleColumnCount,
-					customHeader: renderGroupHeader
-				})
-			}, row.id);
-			return /* @__PURE__ */ jsx(TableRow, {
-				"data-state": row.getIsSelected() && "selected",
-				"aria-selected": row.getIsSelected() ? "true" : void 0,
-				tabIndex: onRowClick ? 0 : void 0,
-				onClick: onRowClick ? () => onRowClick(row) : void 0,
-				onKeyDown: onRowClick ? (e) => handleRowKeyDown(row, e) : void 0,
-				className: cn(dataTableRowVariants({
-					dividers,
-					density,
-					isEven: index % 2 === 1,
-					isSelected: row.getIsSelected()
-				}), rowIsGroup && "bg-muted", onRowClick && "cursor-pointer hover:bg-muted focus-visible:bg-muted focus-visible:outline-none active:bg-accent/50 motion-reduce:active:bg-muted", classNames?.row),
-				children: visibleCells.map((cell, cellIndex) => {
-					const isFirstColumn = cellIndex === 0;
-					const isLastColumn = cellIndex === visibleColumnCount - 1;
-					const responsiveStickySlots = responsiveStickySlotsById.get(cell.column.id);
-					const stickyClass = responsiveColumns ? getResponsiveStickyClass({
-						backgroundClass: row.getIsSelected() ? "bg-muted dark:bg-accent" : "bg-background dark:bg-card",
-						firstSlots: responsiveStickySlots?.firstSlots ?? [],
-						lastSlots: responsiveStickySlots?.lastSlots ?? []
-					}) : getStickyCellClass({
-						stickyFirstColumn,
-						stickyLastColumn,
-						isFirstColumn,
-						isLastColumn,
-						isSelected: row.getIsSelected()
-					});
-					return /* @__PURE__ */ jsx(TableCell, {
-						className: cn(dataTableCellVariants({ density }), classNames?.cell, cell.column.columnDef.meta?.cellClassName, getResponsiveColumnClass(cell.column.columnDef.meta?.responsive, responsiveColumns), stickyClass),
-						children: rowIsGroup ? renderCellContent(cell, row) : flexRender(cell.column.columnDef.cell, cell.getContext())
-					}, cell.id);
-				})
-			}, row.id);
-		});
-		return /* @__PURE__ */ jsx(TableBody, { children: bodyContent });
-	}
-	let tableBody;
-	if (renderBody) tableBody = renderBody(table);
-	else if (isVirtualizationEnabled && rows.length > 0) tableBody = renderVirtualizedBody();
-	else tableBody = renderStandardBody();
-	const tableContainer = /* @__PURE__ */ jsx("div", {
-		ref: tableContainerRef,
-		className: cn(dataTableContainerVariants({
-			rounded: shouldRenderComposite ? "none" : rounded,
-			bordered: shouldRenderComposite ? false : bordered
-		}), maxHeight ? "overflow-auto" : "overflow-x-auto"),
-		style: maxHeight ? { maxHeight } : void 0,
-		children: /* @__PURE__ */ jsxs(TableNamespace, {
-			disableOverflow: !!(maxHeight || stickyHeader || stickyFirstColumn || stickyLastColumn),
-			className: cn(dataTableVariants({
-				dividers,
-				density
-			}), classNames?.table),
-			children: [
-				caption && /* @__PURE__ */ jsx("caption", {
-					className: "sr-only",
-					children: caption
-				}),
-				/* @__PURE__ */ jsx(TableHeader, {
-					className: cn(stickyHeader && "sticky top-0 z-10"),
-					children: table.getHeaderGroups().map((headerGroup) => {
-						const responsiveStickySlotsById = getResponsiveStickySlotsById({
-							enabled: responsiveColumns,
-							getId: (item) => item.column.id,
-							getResponsive: (item) => item.column.columnDef.meta?.responsive,
-							items: headerGroup.headers,
-							stickyFirstColumn,
-							stickyLastColumn
-						});
-						return /* @__PURE__ */ jsx(TableRow, {
-							className: cn("border-b border-border bg-muted hover:bg-muted", classNames?.headerRow),
-							children: headerGroup.headers.map((header, headerIndex) => {
-								const isFirstColumn = headerIndex === 0;
-								const isLastColumn = headerIndex === headerGroup.headers.length - 1;
-								const isSticky = stickyFirstColumn && isFirstColumn || stickyLastColumn && isLastColumn;
-								const responsiveStickySlots = responsiveStickySlotsById.get(header.column.id);
-								const responsiveHeaderStickyClass = responsiveColumns ? getResponsiveStickyClass({
-									backgroundClass: "bg-muted",
-									firstSlots: responsiveStickySlots?.firstSlots ?? [],
-									lastSlots: responsiveStickySlots?.lastSlots ?? [],
-									zIndexClass: stickyHeader ? "z-30" : "z-20"
-								}) : void 0;
-								const ariaSort = getAriaSort(header.column.getIsSorted());
-								const headerDefinition = header.column.columnDef.header;
-								const isTextHeader = typeof headerDefinition === "string";
-								let headerContent = null;
-								if (!header.isPlaceholder && isTextHeader) headerContent = /* @__PURE__ */ jsx(SortableHeader, {
-									column: header.column,
-									children: headerDefinition
-								});
-								else if (!header.isPlaceholder) headerContent = flexRender(headerDefinition, header.getContext());
-								return /* @__PURE__ */ jsx(TableHead, {
-									scope: "col",
-									style: { width: getHeaderCellWidth(header.getSize()) },
-									className: cn(dataTableHeaderCellVariants({ density }), "text-start", classNames?.headerCell, header.column.columnDef.meta?.headerClassName, getResponsiveColumnClass(header.column.columnDef.meta?.responsive, responsiveColumns), responsiveColumns ? responsiveHeaderStickyClass : [
-										stickyFirstColumn && isFirstColumn && "sticky start-0 z-20 bg-muted",
-										stickyLastColumn && isLastColumn && "sticky end-0 z-20 bg-muted",
-										stickyHeader && isSticky && "z-30"
-									]),
-									"aria-sort": ariaSort,
-									children: headerContent
-								}, header.id);
-							})
-						}, headerGroup.id);
-					})
-				}),
-				tableBody
-			]
+			return /* @__PURE__ */ jsx(Button, {
+				appearance: action.appearance ?? "ghost",
+				variant: action.variant ?? "secondary",
+				size,
+				iconOnly,
+				"aria-label": action.label,
+				onClick: action.onClick,
+				className: cn(dataTableTouchTargetClassName, action.className),
+				children: action.icon ?? action.children ?? /* @__PURE__ */ jsx(MoreHorizontal, {})
+			}, action.label);
 		})
 	});
-	const tableFooter = hasFooter ? /* @__PURE__ */ jsxs("div", {
-		"data-slot": "data-table-footer",
-		className: cn("flex min-h-[68px] items-center gap-4 border-t border-border-subtle px-6 py-0", footerLabel ? "justify-between" : "justify-end"),
-		children: [footerLabel && /* @__PURE__ */ jsx("span", {
-			className: "text-sm text-muted-foreground",
-			children: footerLabel
-		}), showPagination && /* @__PURE__ */ jsx(Pagination, {
-			type: paginationType,
-			shape: paginationShape,
-			size: paginationSize,
-			currentPage,
-			totalPages,
-			onPageChange: (page) => table.setPageIndex(page - 1),
-			showPageNumbers: paginationShowPageNumbers,
-			"aria-label": paginationLabel,
-			className: footerLabel ? "w-auto justify-end" : void 0
-		})]
-	}) : null;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "data-table",
-		className: cn("@container", className),
-		children: [renderControls && /* @__PURE__ */ jsx("div", {
-			className: "mb-4",
-			children: /* @__PURE__ */ jsx(DataTableControls, {
-				table,
-				customControls: renderControls
-			})
-		}), shouldRenderComposite ? /* @__PURE__ */ jsxs("div", {
-			"data-slot": "data-table-composite",
-			className: cn(dataTableContainerVariants({
-				rounded,
-				bordered
-			}), "overflow-hidden"),
-			children: [
-				children,
-				tableContainer,
-				tableFooter
-			]
-		}) : tableContainer]
-	});
 }
-DataTable.displayName = "DataTable";
+DataTableActionsCell.displayName = "DataTableCell.Actions";
+var DataTableCell = Object.assign(DataTableCellRoot, {
+	Root: DataTableCellRoot,
+	Text: DataTableTextCell,
+	Avatar: DataTableAvatarCell,
+	Badges: DataTableBadgesCell,
+	Progress: DataTableProgressCell,
+	Trend: DataTableTrendCell,
+	Sparkline: DataTableSparklineCell,
+	Rating: DataTableRatingCell,
+	Switch: DataTableSwitchCell,
+	Actions: DataTableActionsCell
+});
 //#endregion
-export { DataTable, DataTableActionsCell, DataTableAvatarCell, DataTableBadgesCell, DataTableCell, DataTableCellRoot, DataTableProgressCell, DataTableRatingCell, DataTableSparklineCell, DataTableSwitchCell, DataTableTextCell, DataTableTrendCell, SortableHeader, createSelectColumn, dataTableCellVariants, dataTableContainerVariants, dataTableHeaderCellVariants, dataTableRowVariants, dataTableVariants, useDataTable };
+export { DataTableActionsCell, DataTableAvatarCell, DataTableBadgesCell, DataTableCell, DataTableCellRoot, DataTableProgressCell, DataTableRatingCell, DataTableSparklineCell, DataTableSwitchCell, DataTableTextCell, DataTableTrendCell };
 
 //# sourceMappingURL=index190.js.map