@siyahi/ui 0.0.0-stage → 0.1.0-next.4

package/dist/components/registry/niko-table/core/data-table-context.js

@@ -0,0 +1,326 @@
+"use client";
+import { useGeneratedOptions } from "../hooks/use-generated-options.js";
+import { useHeaderMinWidths } from "../lib/use-header-min-widths.js";
+import React, { createContext, useCallback, useContext, useReducer } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/registry/niko-table/core/data-table-context.tsx
+/**
+* niko-table — created by Semir N. (Semkoo, https://github.com/Semkoo) with AI assistance.
+*
+* Before reporting anything: please check the changelog first.
+*  - In-repo: ./CHANGELOG.md
+*  - Docs site: https://niko-table.com/changelog
+*
+* Found a bug or have a fix? Open an issue or PR on GitHub so other
+* users (and future LLMs reading this code) benefit:
+* https://github.com/Semkoo/niko-table-registry
+*/
+/** Internal key for a flashing cell (row id + column id). */
+function flashCellKey(rowId, columnId) {
+	return `${rowId}:${columnId}`;
+}
+const ActiveCellValueContext = createContext(null);
+const ActiveCellSetterContext = createContext(null);
+/**
+* The active-selection span for the grid-style cross-highlight (`null` when
+* inactive). In a header, `activeCell.columnIds.has(column.id)` lights the
+* active columns; in a body/gutter, the row's **display** index (position in
+* `getRowModel().rows` / the virtualizer index) within `activeCell.rowRange`
+* lights the active rows — not TanStack's source-data `row.index`.
+*/
+function useDataTableActiveCell() {
+	return useContext(ActiveCellValueContext);
+}
+/**
+* Set (or clear, with `null`) the active-cell cross-highlight. The setter is
+* stable, so subscribing to it never causes re-renders. Used by the grid's
+* `<DataGridCrossHighlight>` opt-in.
+*/
+function useDataTableActiveCellSetter() {
+	const setter = useContext(ActiveCellSetterContext);
+	if (setter === null) throw new Error("useDataTableActiveCellSetter must be used within DataTableRoot");
+	return setter;
+}
+const ColumnResizeInfoContext = createContext({
+	resizingColumnId: null,
+	deltaOffset: 0
+});
+/**
+* Live column-resize offset for the preview guide line. Returns the idle value
+* (`{ resizingColumnId: null, deltaOffset: 0 }`) when no drag is in flight (or
+* outside a provider), so it's safe to call unconditionally.
+*/
+function useColumnResizeInfo() {
+	return useContext(ColumnResizeInfoContext);
+}
+const DataTableContext = createContext(void 0);
+function useDataTable() {
+	const context = useContext(DataTableContext);
+	if (context === void 0) throw new Error("useDataTable must be used within DataTableRoot");
+	return context;
+}
+let DataTableActions = /* @__PURE__ */ function(DataTableActions) {
+	DataTableActions[DataTableActions["SET"] = 0] = "SET";
+	DataTableActions[DataTableActions["SET_IS_LOADING"] = 1] = "SET_IS_LOADING";
+	return DataTableActions;
+}({});
+function dataTableReducer(state, action) {
+	switch (action.type) {
+		case 1: return {
+			...state,
+			isLoading: action.value
+		};
+		default: return state;
+	}
+}
+function deriveInitialState(isLoading) {
+	return { isLoading: isLoading ?? false };
+}
+/**
+* A set of currently-"flashing" string keys with per-key auto-expiry timers.
+* `flash(keys, durationMs)` adds them and removes each after its duration.
+* Shared by row flash (keys = row ids) and cell flash (keys = `flashCellKey`).
+*/
+function useFlashSet() {
+	const [set, setSet] = React.useState(() => /* @__PURE__ */ new Set());
+	const timers = React.useRef(/* @__PURE__ */ new Map());
+	React.useEffect(() => {
+		const t = timers.current;
+		return () => {
+			t.forEach((timer) => clearTimeout(timer));
+			t.clear();
+		};
+	}, []);
+	return [set, useCallback((keys, durationMs) => {
+		if (keys.length === 0) return;
+		setSet((prev) => {
+			const next = new Set(prev);
+			for (const k of keys) next.add(k);
+			return next;
+		});
+		for (const k of keys) {
+			const existing = timers.current.get(k);
+			if (existing) clearTimeout(existing);
+			timers.current.set(k, setTimeout(() => {
+				setSet((prev) => {
+					if (!prev.has(k)) return prev;
+					const next = new Set(prev);
+					next.delete(k);
+					return next;
+				});
+				timers.current.delete(k);
+			}, durationMs));
+		}
+	}, [])];
+}
+function DataTableProvider({ children, table, columns, isLoading: externalIsLoading }) {
+	const [state, dispatch] = useReducer(dataTableReducer, deriveInitialState(externalIsLoading));
+	const setIsLoading = useCallback((value) => {
+		dispatch({
+			type: 1,
+			value
+		});
+	}, []);
+	const rowScrollerRef = React.useRef(null);
+	const registerRowScroller = useCallback((fn) => {
+		rowScrollerRef.current = fn;
+	}, []);
+	const [scrollContainer, setScrollContainer] = React.useState(null);
+	const registerScrollContainer = useCallback((el) => setScrollContainer(el), []);
+	const scrollRowIntoView = useCallback((index, opts) => {
+		if (rowScrollerRef.current) {
+			rowScrollerRef.current(index, opts);
+			return;
+		}
+		if (typeof document !== "undefined") {
+			const block = opts?.align === void 0 || opts.align === "auto" ? "nearest" : opts.align;
+			document.querySelector(`[data-index="${index}"], [data-row-index="${index}"]`)?.scrollIntoView({ block });
+		}
+	}, []);
+	const [flashingRowIds, flashRowKeys] = useFlashSet();
+	const [flashingCellKeys, flashCellKeys] = useFlashSet();
+	const [activeCell, setActiveCell] = React.useState(null);
+	const rowSelectionAnchorRef = React.useRef(null);
+	const toggleRowSelection = useCallback((rowId, shiftKey) => {
+		const model = table.getRowModel();
+		const row = model.rowsById[rowId];
+		if (!row) return;
+		const anchorId = rowSelectionAnchorRef.current;
+		if (shiftKey && anchorId != null && model.rowsById[anchorId]) {
+			const a = model.rows.findIndex((r) => r.id === anchorId);
+			const b = model.rows.findIndex((r) => r.id === rowId);
+			if (a === -1 || b === -1) return;
+			const next = { ...table.state.rowSelection };
+			for (let i = Math.min(a, b); i <= Math.max(a, b); i++) {
+				const r = model.rows[i];
+				if (r?.getCanSelect()) next[r.id] = true;
+			}
+			table.setRowSelection(next);
+			return;
+		}
+		row.toggleSelected();
+		rowSelectionAnchorRef.current = rowId;
+	}, [table]);
+	const scrollFirstIdIntoView = useCallback((ids) => {
+		const model = table.getRowModel();
+		for (const id of ids) {
+			const idx = model.rows.findIndex((r) => r.id === id);
+			if (idx !== -1) {
+				scrollRowIntoView(idx, { align: "center" });
+				return;
+			}
+		}
+	}, [table, scrollRowIntoView]);
+	const flashRows = useCallback((ids, opts) => {
+		if (ids.length === 0) return;
+		if (opts?.scrollIntoView ?? true) scrollFirstIdIntoView(ids);
+		flashRowKeys(ids, opts?.durationMs ?? 1400);
+	}, [flashRowKeys, scrollFirstIdIntoView]);
+	const flashCells = useCallback((cells, opts) => {
+		if (cells.length === 0) return;
+		if (opts?.scrollIntoView ?? true) scrollFirstIdIntoView(cells.map((c) => c.rowId));
+		flashCellKeys(cells.map((c) => flashCellKey(c.rowId, c.columnId)), opts?.durationMs ?? 1400);
+	}, [flashCellKeys, scrollFirstIdIntoView]);
+	/**
+	* Derive `isLoading` at READ time, not via a sync useEffect.
+	*
+	* WHY: The previous pattern — `useEffect(() => setIsLoading(externalIsLoading))`
+	* — is a "copy prop into state" anti-pattern. Under React 19 + Next.js 16
+	* (Turbopack), it can schedule a reducer dispatch that lands on an unmounted
+	* component instance during HMR or Strict Mode double-mount, producing:
+	*
+	*   "Can't perform a React state update on a component that hasn't mounted
+	*   yet. This indicates that you have a side-effect in your render function
+	*   that asynchronously tries to update the component."
+	*
+	* FIX: When `externalIsLoading` is provided it wins (matches the original
+	* effect's intent); otherwise fall back to the reducer-managed state.
+	* No cross-commit dispatch, no race, no unmount-target warning.
+	*
+	* BEHAVIOR NOTE: If a caller both passes `isLoading` as a prop AND calls
+	* `setIsLoading()` from inside the tree, the prop wins and the internal
+	* call becomes a no-op. This matches the documented contract of a
+	* controlled prop and was already the intended behavior of the effect.
+	*/
+	const effectiveIsLoading = externalIsLoading ?? state.isLoading;
+	const tableState = table.state;
+	const globalFilter = tableState.globalFilter;
+	const sorting = tableState.sorting;
+	const columnFilters = tableState.columnFilters;
+	const columnVisibility = tableState.columnVisibility;
+	const expanded = tableState.expanded;
+	const rowSelection = tableState.rowSelection;
+	const pagination = tableState.pagination;
+	const columnPinning = tableState.columnPinning;
+	const columnOrder = tableState.columnOrder;
+	const columnSizing = tableState.columnSizing;
+	const tableStateKey = React.useMemo(() => {
+		const getObjectHash = (obj) => {
+			if (!obj) return "0";
+			const keys = Object.keys(obj);
+			if (keys.length === 0) return "0";
+			return keys.sort().join(",");
+		};
+		const paginationKey = `${pagination.pageIndex ?? 0}:${pagination.pageSize ?? 0}`;
+		return {
+			globalFilter: typeof globalFilter === "string" ? globalFilter : globalFilter && typeof globalFilter === "object" ? getObjectHash(globalFilter) : "",
+			sortingHash: JSON.stringify(sorting),
+			columnFiltersHash: JSON.stringify(columnFilters),
+			columnVisibilityHash: getObjectHash(columnVisibility),
+			expandedHash: getObjectHash(expanded),
+			rowSelectionHash: getObjectHash(rowSelection),
+			paginationKey,
+			columnPinningHash: JSON.stringify(columnPinning),
+			columnOrderHash: JSON.stringify(columnOrder),
+			columnSizingHash: JSON.stringify(columnSizing)
+		};
+	}, [
+		globalFilter,
+		sorting,
+		columnFilters,
+		columnVisibility,
+		expanded,
+		rowSelection,
+		pagination,
+		columnPinning,
+		columnOrder,
+		columnSizing
+	]);
+	const generatedOptionsMap = useGeneratedOptions(table);
+	const headerMinWidths = useHeaderMinWidths(table, scrollContainer, table.options.enableColumnResizing ?? false);
+	const [manualResizePreview, setManualResizePreview] = React.useState(null);
+	const columnResizing = table.state.columnResizing;
+	const resizingColumnId = columnResizing.isResizingColumn || null;
+	const resizeDeltaOffset = columnResizing.deltaOffset ?? 0;
+	const columnResizeInfo = React.useMemo(() => manualResizePreview ?? {
+		resizingColumnId,
+		deltaOffset: resizeDeltaOffset
+	}, [
+		manualResizePreview,
+		resizingColumnId,
+		resizeDeltaOffset
+	]);
+	const value = React.useMemo(() => ({
+		table,
+		columns: columns || table.options.columns,
+		isLoading: effectiveIsLoading,
+		generatedOptionsMap,
+		setIsLoading,
+		scrollRowIntoView,
+		registerRowScroller,
+		scrollContainer,
+		registerScrollContainer,
+		headerMinWidths,
+		setColumnResizePreview: setManualResizePreview,
+		flashingRowIds,
+		flashingCellKeys,
+		flashRows,
+		flashCells,
+		toggleRowSelection
+	}), [
+		table,
+		columns,
+		effectiveIsLoading,
+		generatedOptionsMap,
+		setIsLoading,
+		scrollRowIntoView,
+		registerRowScroller,
+		scrollContainer,
+		registerScrollContainer,
+		headerMinWidths,
+		setManualResizePreview,
+		flashingRowIds,
+		flashingCellKeys,
+		flashRows,
+		flashCells,
+		toggleRowSelection,
+		tableStateKey
+	]);
+	return /* @__PURE__ */ jsx(DataTableContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(ActiveCellSetterContext.Provider, {
+			value: setActiveCell,
+			children: /* @__PURE__ */ jsx(ActiveCellValueContext.Provider, {
+				value: activeCell,
+				children: /* @__PURE__ */ jsxs(ColumnResizeInfoContext.Provider, {
+					value: columnResizeInfo,
+					children: [/* @__PURE__ */ jsx("style", {
+						href: "niko-row-flash",
+						precedence: "default",
+						children: ROW_FLASH_KEYFRAMES
+					}), children]
+				})
+			})
+		})
+	});
+}
+/**
+* Self-contained flash animation (no dependency on app globals). Soft fade
+* pulse: a primary-tinted background fades to transparent once, ~1.2s.
+*/
+const ROW_FLASH_KEYFRAMES = `@keyframes niko-row-flash {
+  0% { background-color: color-mix(in oklab, var(--primary) 24%, transparent); }
+  100% { background-color: transparent; }
+}`;
+//#endregion
+export { DataTableActions, DataTableContext, DataTableProvider, flashCellKey, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter };

package/dist/components/registry/niko-table/core/data-table-error-boundary.d.ts

@@ -0,0 +1,85 @@
+import React from "react";
+//#region src/components/registry/niko-table/core/data-table-error-boundary.d.ts
+export interface DataTableErrorBoundaryProps {
+  /**
+   * The content to render when there's no error
+   */
+  children: React.ReactNode;
+  /**
+   * Custom fallback UI to show when an error occurs
+   */
+  fallback?: React.ReactNode;
+  /**
+   * Callback fired when an error is caught
+   */
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+  /**
+   * Whether to show a reset button
+   * @default true
+   */
+  showResetButton?: boolean;
+  /**
+   * Custom reset button text
+   * @default "Try Again"
+   */
+  resetButtonText?: string;
+}
+interface DataTableErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+/**
+ * Error boundary component for DataTable.
+ * Catches JavaScript errors anywhere in the data table component tree,
+ * logs those errors, and displays a fallback UI instead of crashing.
+ *
+ * @example
+ * Basic usage
+ * <DataTableErrorBoundary>
+ *   <DataTableRoot data={data} columns={columns}>
+ *     <DataTable>
+ *       <DataTableHeader />
+ *       <DataTableBody />
+ *     </DataTable>
+ *   </DataTableRoot>
+ * </DataTableErrorBoundary>
+ *
+ * @example
+ * // With custom fallback
+ * <DataTableErrorBoundary
+ *   fallback={
+ *     <div className="p-8 text-center">
+ *       <h3>Oops! Something went wrong.</h3>
+ *       <p>Please contact support if this persists.</p>
+ *     </div>
+ *   }
+ * >
+ *   <DataTableRoot data={data} columns={columns}>
+ *     {/* ... *\/}
+ *   </DataTableRoot>
+ * </DataTableErrorBoundary>
+ *
+ * @example
+ * // With error logging
+ * <DataTableErrorBoundary
+ *   onError={(error, errorInfo) => {
+ *     console.error("DataTable Error:", error, errorInfo)
+ *     // Send to error tracking service
+ *     trackError(error)
+ *   }}
+ * >
+ *   <DataTableRoot data={data} columns={columns}>
+ *     {/* ... *\/}
+ *   </DataTableRoot>
+ * </DataTableErrorBoundary>
+ */
+export declare class DataTableErrorBoundary extends React.Component<DataTableErrorBoundaryProps, DataTableErrorBoundaryState> {
+  static displayName: string;
+  constructor(props: DataTableErrorBoundaryProps);
+  static getDerivedStateFromError(error: Error): DataTableErrorBoundaryState;
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+  handleReset: () => void;
+  render(): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | null | undefined;
+}
+//#endregion
+export {};

package/dist/components/registry/niko-table/core/data-table-error-boundary.js

@@ -0,0 +1,116 @@
+"use client";
+import { Alert, AlertDescription, AlertTitle } from "../../../ui/alert.js";
+import { Button } from "../../../ui/button.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle } from "lucide-react";
+//#region src/components/registry/niko-table/core/data-table-error-boundary.tsx
+/**
+* niko-table — created by Semir N. (Semkoo, https://github.com/Semkoo) with AI assistance.
+*
+* Before reporting anything: please check the changelog first.
+*  - In-repo: ./CHANGELOG.md
+*  - Docs site: https://niko-table.com/changelog
+*
+* Found a bug or have a fix? Open an issue or PR on GitHub so other
+* users (and future LLMs reading this code) benefit:
+* https://github.com/Semkoo/niko-table-registry
+*/
+/**
+* Error boundary component for DataTable.
+* Catches JavaScript errors anywhere in the data table component tree,
+* logs those errors, and displays a fallback UI instead of crashing.
+*
+* @example
+* Basic usage
+* <DataTableErrorBoundary>
+*   <DataTableRoot data={data} columns={columns}>
+*     <DataTable>
+*       <DataTableHeader />
+*       <DataTableBody />
+*     </DataTable>
+*   </DataTableRoot>
+* </DataTableErrorBoundary>
+*
+* @example
+* // With custom fallback
+* <DataTableErrorBoundary
+*   fallback={
+*     <div className="p-8 text-center">
+*       <h3>Oops! Something went wrong.</h3>
+*       <p>Please contact support if this persists.</p>
+*     </div>
+*   }
+* >
+*   <DataTableRoot data={data} columns={columns}>
+*     {/* ... *\/}
+*   </DataTableRoot>
+* </DataTableErrorBoundary>
+*
+* @example
+* // With error logging
+* <DataTableErrorBoundary
+*   onError={(error, errorInfo) => {
+*     console.error("DataTable Error:", error, errorInfo)
+*     // Send to error tracking service
+*     trackError(error)
+*   }}
+* >
+*   <DataTableRoot data={data} columns={columns}>
+*     {/* ... *\/}
+*   </DataTableRoot>
+* </DataTableErrorBoundary>
+*/
+var DataTableErrorBoundary = class extends React.Component {
+	static displayName = "DataTableErrorBoundary";
+	constructor(props) {
+		super(props);
+		this.state = {
+			hasError: false,
+			error: null
+		};
+	}
+	static getDerivedStateFromError(error) {
+		return {
+			hasError: true,
+			error
+		};
+	}
+	componentDidCatch(error, errorInfo) {
+		console.error("DataTable Error Boundary caught an error:", error, errorInfo);
+		this.props.onError?.(error, errorInfo);
+	}
+	handleReset = () => {
+		this.setState({
+			hasError: false,
+			error: null
+		});
+	};
+	render() {
+		if (this.state.hasError) {
+			if (this.props.fallback) return this.props.fallback;
+			const { showResetButton = true, resetButtonText = "Try Again" } = this.props;
+			return /* @__PURE__ */ jsxs(Alert, {
+				variant: "destructive",
+				className: "my-4",
+				children: [
+					/* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+					/* @__PURE__ */ jsx(AlertTitle, { children: "Table Error" }),
+					/* @__PURE__ */ jsxs(AlertDescription, {
+						className: "mt-2 flex flex-col gap-2",
+						children: [/* @__PURE__ */ jsx("p", { children: this.state.error?.message || "Something went wrong while displaying the table." }), showResetButton && /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: this.handleReset,
+							className: "mt-2 w-fit",
+							children: resetButtonText
+						})]
+					})
+				]
+			});
+		}
+		return this.props.children;
+	}
+};
+//#endregion
+export { DataTableErrorBoundary };

package/dist/components/registry/niko-table/core/data-table-grouped-row.d.ts

@@ -0,0 +1,49 @@
+import { DataTableRow } from "../types/index.js";
+import { DataTableGroupedRowsProps } from "../components/data-table-grouped-rows.js";
+import React from "react";
+import { RowData } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/core/data-table-grouped-row.d.ts
+/**
+ * The built-in group row: a chevron, the group value, a `· N rows` count, and
+ * one aggregated cell per column that defines `aggregatedCell` /
+ * `aggregationFn`.
+ *
+ * Exported so a custom group row can reuse it — wrap it, or render it for the
+ * groups you don't want to special-case.
+ */
+export declare function DataTableGroupedRowCells(): React.JSX.Element;
+export declare namespace DataTableGroupedRowCells {
+  var displayName: string;
+}
+/**
+ * Row rendered in place of a leaf row wherever TanStack's grouped row model
+ * produces a group. Internal — reached by composing `<DataTableGroupedRows>`
+ * into a body, never imported directly by callers.
+ */
+export interface GroupedBodyRowProps<TData extends RowData = RowData> {
+  row: DataTableRow<TData>;
+  displayIndex: number;
+  /**
+   * Passed as a prop (rather than read off `row`) so `React.memo` invalidates
+   * when the group is toggled — same contract as `BodyRow`.
+   */
+  isExpanded: boolean;
+  columnWidths: ReadonlyMap<string, number | string | undefined>;
+  /** Invalidates React.memo on visibility/order/pinning/resize change. */
+  columnLayoutSignature: string;
+  /** The nested slot's props, if the caller composed one. */
+  slot: DataTableGroupedRowsProps<TData> | undefined;
+  /**
+   * Virtualized bodies only: the virtualizer's measure callback. A band is
+   * usually a different height from a leaf row, so it has to be measured
+   * rather than assumed — without this the rows below it drift.
+   */
+  measureRef?: (node: HTMLTableRowElement | null) => void;
+  /**
+   * Virtualized bodies only: the row's index in the virtual window, which the
+   * virtualizer reads back off the DOM as `data-index`.
+   */
+  virtualIndex?: number;
+}
+export declare const GroupedBodyRow: <TData extends RowData = RowData>(props: GroupedBodyRowProps<TData>) => React.JSX.Element;
+//#endregion

package/dist/components/registry/niko-table/core/data-table-grouped-row.js

@@ -0,0 +1,112 @@
+import { Button } from "../../../ui/button.js";
+import { cn } from "../../../../lib/utils.js";
+import { DataTableGroupRowProvider, useDataTableGroupRow } from "../components/data-table-grouped-rows.js";
+import { TableCell, TableRow } from "../ui/table.js";
+import { isInteractiveClickTarget } from "../lib/row-click.js";
+import { getCommonPinningStyles } from "../lib/styles.js";
+import React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { flexRender } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/core/data-table-grouped-row.tsx
+/**
+* The built-in group row: a chevron, the group value, a `· N rows` count, and
+* one aggregated cell per column that defines `aggregatedCell` /
+* `aggregationFn`.
+*
+* Exported so a custom group row can reuse it — wrap it, or render it for the
+* groups you don't want to special-case.
+*/
+function DataTableGroupedRowCells() {
+	const { row, groupLabel, count, isExpanded, toggle, columnWidths } = useDataTableGroupRow();
+	const countLabel = `${count} ${count === 1 ? "row" : "rows"}`;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: row.getVisibleCells().map((cell) => {
+		const cellStyle = {
+			width: columnWidths.get(cell.column.id),
+			...getCommonPinningStyles(cell.column, false)
+		};
+		let content = null;
+		if (cell.getIsGrouped()) content = /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-sm",
+					"aria-expanded": isExpanded,
+					"aria-label": isExpanded ? `Collapse the ${groupLabel} group` : `Expand the ${groupLabel} group`,
+					onClick: (event) => {
+						event.stopPropagation();
+						toggle();
+					},
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("size-3.5 transition-transform", isExpanded && "rotate-90") })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate font-medium",
+					title: groupLabel || void 0,
+					children: flexRender(cell.column.columnDef.cell, cell.getContext())
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "shrink-0 text-xs text-muted-foreground",
+					children: `· ${countLabel}`
+				})
+			]
+		});
+		else if (cell.getIsAggregated()) content = flexRender(cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell, cell.getContext());
+		return /* @__PURE__ */ jsx(TableCell, {
+			"data-col-id": cell.column.id,
+			style: cellStyle,
+			className: cn("truncate", cell.column.getIsPinned() && "bg-muted"),
+			children: content
+		}, cell.id);
+	}) });
+}
+DataTableGroupedRowCells.displayName = "DataTableGroupedRowCells";
+const GroupedBodyRow = React.memo(function GroupedBodyRow({ row, displayIndex, isExpanded, columnWidths, slot, measureRef, virtualIndex }) {
+	const groupedColumnId = row.groupingColumnId;
+	const groupValue = groupedColumnId ? row.getGroupingValue(groupedColumnId) : void 0;
+	const groupLabel = groupValue === null || groupValue === void 0 ? "" : String(groupValue);
+	const toggle = React.useCallback(() => {
+		row.toggleExpanded();
+	}, [row]);
+	const handleRowClick = React.useCallback((event) => {
+		if (isInteractiveClickTarget(event.target)) return;
+		event.stopPropagation();
+		row.toggleExpanded();
+	}, [row]);
+	const contextValue = React.useMemo(() => ({
+		row,
+		groupValue,
+		groupLabel,
+		count: row.subRows.length,
+		isExpanded,
+		toggle,
+		displayIndex,
+		columnWidths
+	}), [
+		row,
+		groupValue,
+		groupLabel,
+		isExpanded,
+		toggle,
+		displayIndex,
+		columnWidths
+	]);
+	const useCustom = !!slot?.children && (!slot.enabledFor || slot.enabledFor(row));
+	return /* @__PURE__ */ jsx(DataTableGroupRowProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(TableRow, {
+			ref: measureRef,
+			"data-index": virtualIndex,
+			"data-row-index": displayIndex,
+			"data-row-id": row.id,
+			"data-row-type": "grouped",
+			"data-expanded": isExpanded ? "true" : void 0,
+			onClick: handleRowClick,
+			className: "group cursor-pointer bg-muted/40",
+			children: useCustom ? slot.children : /* @__PURE__ */ jsx(DataTableGroupedRowCells, {})
+		})
+	});
+});
+//#endregion
+export { DataTableGroupedRowCells, GroupedBodyRow };