@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/Table.js

@@ -0,0 +1,1759 @@
+import { dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
+import { ButtonContext } from "./Button.js";
+import { SharedElementTransition } from "./SharedElementTransition.js";
+import { useLinkProps, useRouter } from "./RouterProvider.js";
+import { CollectionRendererContext, useCollectionRenderer } from "./Collection.js";
+import { r as useVirtualizerContext } from "./Virtualizer2.js";
+import { getNormalizedDropTargetKey, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.js";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, setStyleProperty, spread, style, template, use } from "solid-js/web";
+import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, splitProps, untrack, useContext } from "solid-js";
+import { createFocusRing, createHover, createTable, createTableCell, createTableColumnHeader, createTableColumnResize, createTableRow, createTableRowGroup, createTableSelectAllCheckbox, createTableSelectionCheckbox, getTableData, isFocusVisible, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
+import { createTableCollection, createTableColumnResizeState, createTableState, createTreeGridState } from "@proyecto-viviana/solid-stately";
+//#region src/Table.tsx
+/**
+* Table component for solidaria-components
+*
+* A pre-wired headless table that combines state + aria hooks.
+* Based on react-aria-components/src/Table.tsx
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<table>`), _tmpl$2 = /*#__PURE__*/ template(`<tr role=row>`), _tmpl$3 = /*#__PURE__*/ template(`<thead><tr role=row>`), _tmpl$4 = /*#__PURE__*/ template(`<th>`), _tmpl$5 = /*#__PURE__*/ template(`<tr role=row data-empty-state><th role=rowheader>`), _tmpl$6 = /*#__PURE__*/ template(`<tr role=presentation aria-hidden=true data-virtualizer-spacer=top><td style=padding:0;border:0>`), _tmpl$7 = /*#__PURE__*/ template(`<tr role=presentation aria-hidden=true data-virtualizer-spacer=bottom><td style=padding:0;border:0>`), _tmpl$8 = /*#__PURE__*/ template(`<tbody><!$><!/><!$><!/>`), _tmpl$9 = /*#__PURE__*/ template(`<tfoot>`), _tmpl$0 = /*#__PURE__*/ template(`<div role=progressbar aria-label=loading>`), _tmpl$1 = /*#__PURE__*/ template(`<tr inert style=position:relative;width:0;height:0;overflow:hidden><td><div data-testid=loadMoreSentinel style=position:absolute;height:1px;width:1px>`), _tmpl$10 = /*#__PURE__*/ template(`<tr role=row tabindex=0 data-loading><td role=rowheader>`), _tmpl$11 = /*#__PURE__*/ template(`<tr>`), _tmpl$12 = /*#__PURE__*/ template(`<td>`), _tmpl$13 = /*#__PURE__*/ template(`<input>`), _tmpl$14 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/>`), _tmpl$15 = /*#__PURE__*/ template(`<div>`);
+function assignRef(ref, el) {
+	if (!ref) return;
+	if (typeof ref === "function") ref(el);
+	else ref.current = el;
+}
+function normalizeColumnDefinitions(columns, parentKey) {
+	return columns.map((column, index) => {
+		const key = column.key ?? column.id ?? (parentKey == null ? index : `${parentKey}-${index}`);
+		const id = column.id ?? column.key;
+		return {
+			...column,
+			key,
+			id,
+			children: column.children ? normalizeColumnDefinitions(column.children, key) : void 0
+		};
+	});
+}
+/** Resolves a stable, unique key for a tree-grid item (keys must be unique across levels). */
+function resolveItemKey(item, getKey, index) {
+	if (getKey) return getKey(item);
+	const record = item;
+	return record.id ?? record.key ?? index;
+}
+/**
+* Turns the flat `items` into nested {@link RowDefinition}s by recursively expanding each
+* item's children via `getChildItems`. The result feeds the tree-grid collection.
+*/
+function toTreeRowDefinitions(items, getKey, getChildItems) {
+	return Array.from(items).map((item, index) => {
+		const childItems = getChildItems?.(item);
+		const childRows = childItems ? toTreeRowDefinitions(childItems, getKey, getChildItems) : void 0;
+		return {
+			key: resolveItemKey(item, getKey, index),
+			value: item,
+			childRows: childRows && childRows.length > 0 ? childRows : void 0
+		};
+	});
+}
+function getRowHeaderColumnKeys(columns) {
+	const keys = /* @__PURE__ */ new Set();
+	for (const column of columns) {
+		if (column.isRowHeader) keys.add(column.key);
+		if (column.children) for (const key of getRowHeaderColumnKeys(column.children)) keys.add(key);
+	}
+	return keys;
+}
+const TableContext = createContext(null);
+const TableStateContext = createContext(null);
+/** The resize context carries a getter for the resize state. The getter may return null before columns register. */
+const TableColumnResizeStateContext = createContext(null);
+const TableRowContext = createContext(null);
+/**
+* A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys,
+* and optionally supports row selection and sorting.
+*/
+function Table(props) {
+	const [local, stateProps, ariaProps] = splitProps(props, [
+		"class",
+		"style",
+		"render",
+		"slot",
+		"renderEmptyState",
+		"dragAndDropHooks",
+		"ref"
+	], [
+		"items",
+		"columns",
+		"getKey",
+		"getTextValue",
+		"disabledKeys",
+		"disabledBehavior",
+		"escapeKeyBehavior",
+		"selectionMode",
+		"selectionBehavior",
+		"selectedKeys",
+		"defaultSelectedKeys",
+		"onSelectionChange",
+		"sortDescriptor",
+		"onSortChange",
+		"showSelectionCheckboxes",
+		"UNSTABLE_childItems",
+		"UNSTABLE_expandedKeys",
+		"UNSTABLE_defaultExpandedKeys",
+		"UNSTABLE_onExpandedChange"
+	]);
+	const [ref, setRef] = createSignal(null);
+	const normalizedColumns = createMemo(() => normalizeColumnDefinitions(stateProps.columns));
+	const rowHeaderColumnKeys = createMemo(() => getRowHeaderColumnKeys(normalizedColumns()));
+	const isTreeGrid = stateProps.UNSTABLE_childItems !== void 0 || stateProps.UNSTABLE_expandedKeys !== void 0 || stateProps.UNSTABLE_defaultExpandedKeys !== void 0 || stateProps.UNSTABLE_onExpandedChange !== void 0;
+	const getTextValue = () => stateProps.getTextValue;
+	const state = isTreeGrid ? createTreeGridState(() => ({
+		columns: normalizedColumns(),
+		rows: toTreeRowDefinitions(stateProps.items, stateProps.getKey, stateProps.UNSTABLE_childItems),
+		getKey: stateProps.getKey,
+		getTextValue: getTextValue(),
+		showSelectionCheckboxes: stateProps.showSelectionCheckboxes ?? false,
+		rowHeaderColumnKeys: rowHeaderColumnKeys().size > 0 ? rowHeaderColumnKeys() : void 0,
+		disabledKeys: stateProps.disabledKeys,
+		disabledBehavior: stateProps.disabledBehavior,
+		selectionMode: stateProps.selectionMode,
+		selectionBehavior: stateProps.selectionBehavior,
+		selectedKeys: stateProps.selectedKeys,
+		defaultSelectedKeys: stateProps.defaultSelectedKeys,
+		onSelectionChange: stateProps.onSelectionChange,
+		sortDescriptor: stateProps.sortDescriptor,
+		onSortChange: stateProps.onSortChange,
+		UNSTABLE_expandedKeys: stateProps.UNSTABLE_expandedKeys,
+		UNSTABLE_defaultExpandedKeys: stateProps.UNSTABLE_defaultExpandedKeys,
+		UNSTABLE_onExpandedChange: stateProps.UNSTABLE_onExpandedChange
+	})) : createTableState(() => ({
+		collection: createTableCollection({
+			columns: normalizedColumns(),
+			rows: stateProps.items,
+			getKey: stateProps.getKey,
+			getTextValue: getTextValue(),
+			showSelectionCheckboxes: stateProps.showSelectionCheckboxes ?? false,
+			rowHeaderColumnKeys: rowHeaderColumnKeys().size > 0 ? rowHeaderColumnKeys() : void 0
+		}),
+		disabledKeys: stateProps.disabledKeys,
+		disabledBehavior: stateProps.disabledBehavior,
+		selectionMode: stateProps.selectionMode,
+		selectionBehavior: stateProps.selectionBehavior,
+		selectedKeys: stateProps.selectedKeys,
+		defaultSelectedKeys: stateProps.defaultSelectedKeys,
+		onSelectionChange: stateProps.onSelectionChange,
+		sortDescriptor: stateProps.sortDescriptor,
+		onSortChange: stateProps.onSortChange,
+		showSelectionCheckboxes: stateProps.showSelectionCheckboxes
+	}));
+	const collection = () => state.collection;
+	const parentCollectionRenderer = useCollectionRenderer();
+	const { gridProps } = createTable(() => ({
+		id: ariaProps.id,
+		"aria-label": ariaProps["aria-label"],
+		"aria-labelledby": ariaProps["aria-labelledby"],
+		"aria-describedby": ariaProps["aria-describedby"],
+		isVirtualized: ariaProps.isVirtualized ?? parentCollectionRenderer?.isVirtualized,
+		onRowAction: ariaProps.onRowAction,
+		onCellAction: ariaProps.onCellAction,
+		shouldSelectOnPressUp: ariaProps.shouldSelectOnPressUp,
+		focusMode: ariaProps.focusMode,
+		escapeKeyBehavior: stateProps.escapeKeyBehavior
+	}), () => state, ref);
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const renderValues = createMemo(() => ({
+		isFocused: state.isFocused || isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isDisabled: false,
+		isEmpty: stateProps.items.length === 0
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Table"
+	}, renderValues);
+	const domProps = createMemo(() => {
+		return filterDOMProps(ariaProps, { global: true });
+	});
+	const cleanGridProps = () => {
+		const { ref: _ref1, ...rest } = gridProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref2, ...rest } = focusProps;
+		return rest;
+	};
+	const getItemNodes = createMemo(() => Array.from(state.collection).filter((node) => node.type === "item"));
+	const getDropTargetByIndex = (index, position) => {
+		const node = getItemNodes()[index];
+		if (!node) return null;
+		return {
+			type: "item",
+			key: node.key,
+			dropPosition: position
+		};
+	};
+	const hasDroppableDnd = createMemo(() => {
+		const hooks = local.dragAndDropHooks;
+		return Boolean(hooks?.useDroppableCollectionState && hooks.useDroppableCollection && (hooks.dropTargetDelegate || parentCollectionRenderer?.dropTargetDelegate || hooks.ListDropTargetDelegate));
+	});
+	const hasDraggableDnd = createMemo(() => {
+		const hooks = local.dragAndDropHooks;
+		return Boolean(hooks?.useDraggableCollectionState && hooks.useDraggableCollection);
+	});
+	const dragState = createMemo(() => {
+		if (!hasDraggableDnd()) return void 0;
+		return local.dragAndDropHooks?.useDraggableCollectionState?.({ items: stateProps.items });
+	});
+	const dropState = createMemo(() => {
+		if (!hasDroppableDnd()) return void 0;
+		return local.dragAndDropHooks?.useDroppableCollectionState?.({});
+	});
+	createEffect(() => {
+		if (!hasDraggableDnd()) return;
+		const hooks = local.dragAndDropHooks;
+		const activeDragState = dragState();
+		if (!hooks?.useDraggableCollection || !activeDragState) return;
+		hooks.useDraggableCollection({}, activeDragState, () => ref());
+	});
+	const droppableCollection = createMemo(() => {
+		if (!hasDroppableDnd()) return void 0;
+		const hooks = local.dragAndDropHooks;
+		const activeDropState = dropState();
+		if (!hooks?.useDroppableCollection || !activeDropState) return void 0;
+		const resolveDirection = () => {
+			const el = ref();
+			if (el && typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
+				if (window.getComputedStyle(el).direction === "rtl") return "rtl";
+			}
+			return typeof document !== "undefined" && document.dir === "rtl" ? "rtl" : "ltr";
+		};
+		const dropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection, () => ref(), {
+			layout: "grid",
+			orientation: "vertical",
+			direction: resolveDirection()
+		}) : void 0);
+		if (!dropTargetDelegate) return void 0;
+		return hooks.useDroppableCollection({
+			dropTargetDelegate,
+			keyboardDelegate: {
+				getFirstKey: () => state.collection.getFirstKey?.() ?? null,
+				getLastKey: () => state.collection.getLastKey?.() ?? null,
+				getKeyBelow: (key) => state.collection.getKeyAfter?.(key) ?? null,
+				getKeyAbove: (key) => state.collection.getKeyBefore?.(key) ?? null,
+				getKeyLeftOf: (key) => resolveDirection() === "rtl" ? state.collection.getKeyAfter?.(key) ?? null : state.collection.getKeyBefore?.(key) ?? null,
+				getKeyRightOf: (key) => resolveDirection() === "rtl" ? state.collection.getKeyBefore?.(key) ?? null : state.collection.getKeyAfter?.(key) ?? null,
+				getKeyPageBelow: (key) => state.collection.getKeyAfter?.(key) ?? null,
+				getKeyPageAbove: (key) => state.collection.getKeyBefore?.(key) ?? null
+			},
+			get collection() {
+				return state.collection;
+			},
+			get selectedKeys() {
+				return state.selectedKeys;
+			},
+			setSelectedKeys: (keys) => {
+				if (state.selectionMode === "none") return;
+				state.clearSelection();
+				for (const key of keys) state.toggleSelection(key);
+			},
+			setFocusedKey: (key) => state.setFocusedKey(key)
+		}, activeDropState, () => ref());
+	});
+	const isRootDropTarget = createMemo(() => {
+		return Boolean(dropState()?.target?.type === "root");
+	});
+	const dndRenderDropIndicator = createMemo(() => useRenderDropIndicator(local.dragAndDropHooks, dropState()));
+	const dndDropIndicator = (index, position) => {
+		const target = getDropTargetByIndex(index, position);
+		if (!target || target.type !== "item") return void 0;
+		return dndRenderDropIndicator()?.(target);
+	};
+	const contextValue = {
+		state,
+		get collection() {
+			return collection();
+		},
+		get items() {
+			return stateProps.items;
+		},
+		get columns() {
+			return normalizedColumns();
+		},
+		isDisabled: false,
+		get showSelectionCheckboxes() {
+			return stateProps.showSelectionCheckboxes ?? false;
+		},
+		get dragAndDropHooks() {
+			return local.dragAndDropHooks;
+		},
+		get dragState() {
+			return dragState();
+		},
+		get dropState() {
+			return dropState();
+		},
+		get isVirtualized() {
+			return ariaProps.isVirtualized ?? parentCollectionRenderer?.isVirtualized ?? false;
+		}
+	};
+	const collectionRenderer = createMemo(() => ({
+		...parentCollectionRenderer,
+		renderItem: (item) => item,
+		renderDropIndicator: (index, position) => dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position)
+	}));
+	const tableChildren = () => typeof props.children === "function" ? props.children(untrack(renderValues)) : props.children;
+	const tableProps = () => ({
+		ref: (el) => {
+			setRef(el);
+			assignRef(local.ref, el);
+		},
+		...mergeProps$2(domProps(), cleanGridProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {}),
+		class: renderProps.class(),
+		style: renderProps.style(),
+		"data-focused": state.isFocused || void 0,
+		"data-focus-visible": isFocusVisible() || void 0,
+		"data-empty": stateProps.items.length === 0 || void 0,
+		"data-drop-target": isRootDropTarget() || void 0,
+		slot: local.slot
+	});
+	return createComponent(TableContext.Provider, {
+		value: contextValue,
+		get children() {
+			return createComponent(TableStateContext.Provider, {
+				value: state,
+				get children() {
+					return createComponent(CollectionRendererContext.Provider, {
+						get value() {
+							return collectionRenderer();
+						},
+						get children() {
+							return memo(() => !!local.render)() ? local.render({
+								...tableProps(),
+								children: tableChildren()
+							}, renderValues()) : (() => {
+								var _el$ = getNextElement(_tmpl$);
+								spread(_el$, mergeProps(tableProps), false, true);
+								insert(_el$, tableChildren);
+								runHydrationEvents();
+								return _el$;
+							})();
+						}
+					});
+				}
+			});
+		}
+	});
+}
+/**
+* A header row in a table containing column headers.
+*/
+function TableHeader(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"render",
+		"slot",
+		"children",
+		"ref"
+	]);
+	if (!useContext(TableContext)) throw new Error("TableHeader must be used within a Table");
+	const { rowGroupProps } = createTableRowGroup(() => ({ type: "thead" }));
+	const { isHovered, hoverProps } = createHover({
+		isDisabled: false,
+		onHoverStart(e) {
+			domProps.onHoverStart?.(e);
+		},
+		onHoverEnd(e) {
+			domProps.onHoverEnd?.(e);
+		},
+		onHoverChange(isHovering) {
+			domProps.onHoverChange?.(isHovering);
+		}
+	});
+	const renderValues = createMemo(() => ({
+		isFocused: false,
+		isHovered: isHovered()
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Table-header"
+	}, renderValues);
+	const cleanRowGroupProps = () => {
+		const { ref: _ref, ...rest } = rowGroupProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref, ...rest } = hoverProps;
+		return rest;
+	};
+	const headerProps = () => ({
+		ref: (el) => assignRef(local.ref, el),
+		...domProps,
+		...cleanRowGroupProps(),
+		...cleanHoverProps(),
+		class: renderProps.class(),
+		style: renderProps.style(),
+		"data-hovered": isHovered() || void 0,
+		children: (() => {
+			var _el$2 = getNextElement(_tmpl$2);
+			insert(_el$2, () => local.children);
+			return _el$2;
+		})()
+	});
+	return local.render ? local.render(headerProps(), renderValues()) : (() => {
+		var _el$3 = getNextElement(_tmpl$3), _el$4 = _el$3.firstChild;
+		use((el) => assignRef(local.ref, el), _el$3);
+		spread(_el$3, mergeProps(domProps, cleanRowGroupProps, cleanHoverProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get ["data-hovered"]() {
+				return isHovered() || void 0;
+			}
+		}), false, true);
+		insert(_el$4, () => local.children);
+		runHydrationEvents();
+		return _el$3;
+	})();
+}
+/**
+* A column header in a table.
+*/
+function TableColumn(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"render",
+		"slot",
+		"id",
+		"allowsSorting",
+		"allowsResizing",
+		"width",
+		"defaultWidth",
+		"minWidth",
+		"maxWidth",
+		"children",
+		"ref"
+	]);
+	const context = useContext(TableContext);
+	if (!context) throw new Error("TableColumn must be used within a Table");
+	const { state, collection } = context;
+	const [ref, setRef] = createSignal(null);
+	const columnNode = createMemo(() => {
+		const node = collection.getItem(local.id);
+		if (!node) return {
+			type: "column",
+			key: local.id,
+			value: null,
+			textValue: String(local.id),
+			level: 0,
+			index: 0,
+			hasChildNodes: false,
+			childNodes: []
+		};
+		return node;
+	});
+	const columnHeaderAria = createTableColumnHeader(() => ({
+		node: columnNode(),
+		allowsSorting: local.allowsSorting
+	}), () => state, ref);
+	const { isHovered, hoverProps } = createHover({
+		get isDisabled() {
+			return !local.allowsSorting;
+		},
+		onHoverStart(e) {
+			domProps.onHoverStart?.(e);
+		},
+		onHoverEnd(e) {
+			domProps.onHoverEnd?.(e);
+		},
+		onHoverChange(isHovering) {
+			domProps.onHoverChange?.(isHovering);
+		}
+	});
+	const { isFocusVisible, focusProps } = createFocusRing();
+	const sortDirection = createMemo(() => {
+		const sortDescriptor = state.sortDescriptor;
+		if (sortDescriptor?.column === local.id) return sortDescriptor.direction;
+	});
+	const resizeCtx = useContext(TableColumnResizeStateContext);
+	const isResizing = createMemo(() => {
+		const rs = resizeCtx?.getState();
+		if (!rs) return false;
+		return rs.resizingColumn() === local.id;
+	});
+	const resizeWidth = createMemo(() => {
+		const rs = resizeCtx?.getState();
+		if (!rs) return void 0;
+		const w = rs.getColumnWidth(local.id);
+		return w > 0 ? w : void 0;
+	});
+	const renderValues = createMemo(() => ({
+		isFocused: state.focusedKey === local.id,
+		isFocusVisible: isFocusVisible() && state.focusedKey === local.id,
+		isSortable: local.allowsSorting ?? false,
+		sortDirection: sortDirection(),
+		isHovered: isHovered(),
+		allowsResizing: local.allowsResizing ?? false,
+		isResizing: isResizing()
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Table-column"
+	}, renderValues);
+	const cleanColumnHeaderProps = () => {
+		const { ref: _ref1, ...rest } = columnHeaderAria.columnHeaderProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref2, ...rest } = hoverProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref3, ...rest } = focusProps;
+		return rest;
+	};
+	const columnStyle = createMemo(() => {
+		const base = renderProps.style();
+		const rw = resizeWidth();
+		if (rw == null) return base;
+		const widthStyle = {
+			width: `${rw}px`,
+			"min-width": `${rw}px`,
+			"max-width": `${rw}px`
+		};
+		if (!base) return widthStyle;
+		if (typeof base === "string") return widthStyle;
+		return {
+			...base,
+			...widthStyle
+		};
+	});
+	const columnChildren = () => typeof local.children === "function" ? local.children(renderValues()) : local.children;
+	const columnProps = () => ({
+		ref: (el) => {
+			setRef(el);
+			assignRef(local.ref, el);
+		},
+		...domProps,
+		...mergeProps$2(cleanColumnHeaderProps(), cleanHoverProps(), cleanFocusProps()),
+		class: renderProps.class(),
+		style: columnStyle(),
+		"data-sortable": local.allowsSorting || void 0,
+		"data-sort-direction": sortDirection() || void 0,
+		"data-resizable": local.allowsResizing || void 0,
+		"data-resizing": isResizing() || void 0,
+		"data-hovered": isHovered() || void 0,
+		"data-focused": state.focusedKey === local.id || void 0,
+		"data-focus-visible": isFocusVisible() && state.focusedKey === local.id || void 0,
+		children: columnChildren()
+	});
+	return local.render ? local.render(columnProps(), renderValues()) : (() => {
+		var _el$5 = getNextElement(_tmpl$4);
+		use((el) => {
+			setRef(el);
+			assignRef(local.ref, el);
+		}, _el$5);
+		spread(_el$5, mergeProps(domProps, () => mergeProps$2(cleanColumnHeaderProps(), cleanHoverProps(), cleanFocusProps()), {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return columnStyle();
+			},
+			get ["data-sortable"]() {
+				return local.allowsSorting || void 0;
+			},
+			get ["data-sort-direction"]() {
+				return sortDirection() || void 0;
+			},
+			get ["data-resizable"]() {
+				return local.allowsResizing || void 0;
+			},
+			get ["data-resizing"]() {
+				return isResizing() || void 0;
+			},
+			get ["data-hovered"]() {
+				return isHovered() || void 0;
+			},
+			get ["data-focused"]() {
+				return state.focusedKey === local.id || void 0;
+			},
+			get ["data-focus-visible"]() {
+				return memo(() => !!isFocusVisible())() && state.focusedKey === local.id || void 0;
+			}
+		}), false, true);
+		insert(_el$5, columnChildren);
+		runHydrationEvents();
+		return _el$5;
+	})();
+}
+/**
+* The body of a table containing data rows.
+*/
+function TableBody(props) {
+	const [local, domProps] = splitProps(props, [
+		"items",
+		"class",
+		"style",
+		"render",
+		"slot",
+		"renderEmptyState",
+		"hasMore",
+		"isLoading",
+		"onLoadMore",
+		"children",
+		"ref"
+	]);
+	const context = useContext(TableContext);
+	if (!context) throw new Error("TableBody must be used within a Table");
+	const { rowGroupProps } = createTableRowGroup(() => ({ type: "tbody" }));
+	const items = createMemo(() => local.items ?? context.items);
+	const renderValues = createMemo(() => ({ isEmpty: items().length === 0 }));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Table-body"
+	}, renderValues);
+	const cleanRowGroupProps = () => {
+		const { ref: _ref, ...rest } = rowGroupProps;
+		return rest;
+	};
+	const isEmpty = () => items().length === 0;
+	const virtualizer = useVirtualizerContext();
+	const parentCollectionRenderer = useCollectionRenderer();
+	const rowNodes = createMemo(() => Array.from(context.collection).filter((node) => node.type === "item"));
+	const persistedKeys = useDndPersistedKeys({ focusedKey: () => context.state.focusedKey }, context.dragAndDropHooks, context.dropState, context.collection);
+	const virtualRange = createMemo(() => {
+		if (context.state.treeColumn != null) return null;
+		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return null;
+		const rowCount = items().length;
+		const baseRange = virtualizer.getVisibleRange(rowCount);
+		const persistedIndexes = Array.from(persistedKeys()).map((key) => rowNodes().findIndex((node) => node.key === key)).filter((index) => index >= 0);
+		const dropTarget = context.dropState?.target;
+		const normalizedDropKey = getNormalizedDropTargetKey(dropTarget, context.collection);
+		const focusedKey = context.state.focusedKey;
+		const focusedIndex = focusedKey != null ? rowNodes().findIndex((node) => node.key === focusedKey) : -1;
+		return mergePersistedKeysIntoVirtualRange(baseRange, persistedIndexes, rowCount, virtualizer, 80, {
+			forceIncludeIndexes: [
+				dropTarget?.type === "item" ? rowNodes().findIndex((node) => node.key === dropTarget.key) : -1,
+				normalizedDropKey != null ? rowNodes().findIndex((node) => node.key === normalizedDropKey) : -1,
+				dropTarget?.type === "item" ? -1 : focusedIndex
+			].filter((index) => index >= 0),
+			forceIncludeMaxSpan: 320
+		});
+	});
+	createEffect(() => {
+		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
+		virtualizer.setDropTargetItemCountResolver(() => items().length);
+		virtualizer.setDropTargetIndexResolver((key) => {
+			const index = rowNodes().findIndex((node) => node.key === key);
+			return index >= 0 ? index : null;
+		});
+		virtualizer.setDropTargetResolver((target) => {
+			const node = rowNodes()[target.index];
+			if (!node) return target;
+			return {
+				...target,
+				key: typeof node.key === "string" || typeof node.key === "number" ? node.key : void 0
+			};
+		});
+		onCleanup(() => {
+			virtualizer.setDropTargetIndexResolver(void 0);
+			virtualizer.setDropTargetItemCountResolver(void 0);
+			virtualizer.setDropTargetResolver(void 0);
+		});
+	});
+	const visibleItems = createMemo(() => {
+		if (context.state.treeColumn != null) return rowNodes().map((node) => node.value);
+		const range = virtualRange();
+		if (!range) return items();
+		return items().slice(range.start, range.end);
+	});
+	const spacerColSpan = () => context.columns.length + (context.showSelectionCheckboxes ? 1 : 0);
+	const bodyChildren = () => [createComponent(SharedElementTransition, { get children() {
+		return createComponent(Show, {
+			get when() {
+				return memo(() => !!(isEmpty() && local.renderEmptyState))() && !local.isLoading;
+			},
+			get fallback() {
+				return [
+					memo(() => memo(() => !!virtualRange()?.offsetTop)() ? (() => {
+						var _el$8 = getNextElement(_tmpl$6), _el$9 = _el$8.firstChild;
+						effect((_p$) => {
+							var _v$ = spacerColSpan(), _v$2 = `${virtualRange().offsetTop}px`;
+							_v$ !== _p$.e && setAttribute(_el$9, "colspan", _p$.e = _v$);
+							_v$2 !== _p$.t && setStyleProperty(_el$9, "height", _p$.t = _v$2);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0
+						});
+						return _el$8;
+					})() : null),
+					createComponent(For, {
+						get each() {
+							return visibleItems();
+						},
+						children: (item, index) => {
+							const itemIndex = () => (virtualRange()?.start ?? 0) + index();
+							const beforeIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "before");
+							const onIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "on");
+							const afterIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "after");
+							return [
+								memo(beforeIndicator),
+								memo(onIndicator),
+								memo(() => local.children?.(item)),
+								memo(afterIndicator)
+							];
+						}
+					}),
+					memo(() => memo(() => !!virtualRange()?.offsetBottom)() ? (() => {
+						var _el$0 = getNextElement(_tmpl$7), _el$1 = _el$0.firstChild;
+						effect((_p$) => {
+							var _v$3 = spacerColSpan(), _v$4 = `${virtualRange().offsetBottom}px`;
+							_v$3 !== _p$.e && setAttribute(_el$1, "colspan", _p$.e = _v$3);
+							_v$4 !== _p$.t && setStyleProperty(_el$1, "height", _p$.t = _v$4);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0
+						});
+						return _el$0;
+					})() : null)
+				];
+			},
+			get children() {
+				var _el$6 = getNextElement(_tmpl$5), _el$7 = _el$6.firstChild;
+				insert(_el$7, () => local.renderEmptyState?.());
+				effect(() => setAttribute(_el$7, "colspan", spacerColSpan()));
+				return _el$6;
+			}
+		});
+	} }), createComponent(Show, {
+		get when() {
+			return memo(() => !!local.hasMore)() && local.onLoadMore;
+		},
+		get children() {
+			return createComponent(TableLoadMoreItem, {
+				get onLoadMore() {
+					return local.onLoadMore;
+				},
+				get isLoading() {
+					return local.isLoading;
+				},
+				get colSpan() {
+					return spacerColSpan();
+				}
+			});
+		}
+	})];
+	const bodyProps = () => ({
+		ref: (el) => assignRef(local.ref, el),
+		...domProps,
+		...cleanRowGroupProps(),
+		class: renderProps.class(),
+		style: renderProps.style(),
+		"data-empty": isEmpty() || void 0,
+		children: bodyChildren()
+	});
+	return local.render ? local.render(bodyProps(), renderValues()) : (() => {
+		var _el$10 = getNextElement(_tmpl$8), _el$13 = _el$10.firstChild, [_el$14, _co$] = getNextMarker(_el$13.nextSibling), _el$15 = _el$14.nextSibling, [_el$16, _co$2] = getNextMarker(_el$15.nextSibling);
+		use((el) => assignRef(local.ref, el), _el$10);
+		spread(_el$10, mergeProps(domProps, cleanRowGroupProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get ["data-empty"]() {
+				return isEmpty() || void 0;
+			}
+		}), false, true);
+		insert(_el$10, createComponent(SharedElementTransition, { get children() {
+			return createComponent(Show, {
+				get when() {
+					return memo(() => !!(isEmpty() && local.renderEmptyState))() && !local.isLoading;
+				},
+				get fallback() {
+					return [
+						memo(() => memo(() => !!virtualRange()?.offsetTop)() ? (() => {
+							var _el$17 = getNextElement(_tmpl$6), _el$18 = _el$17.firstChild;
+							effect((_p$) => {
+								var _v$5 = spacerColSpan(), _v$6 = `${virtualRange().offsetTop}px`;
+								_v$5 !== _p$.e && setAttribute(_el$18, "colspan", _p$.e = _v$5);
+								_v$6 !== _p$.t && setStyleProperty(_el$18, "height", _p$.t = _v$6);
+								return _p$;
+							}, {
+								e: void 0,
+								t: void 0
+							});
+							return _el$17;
+						})() : null),
+						createComponent(For, {
+							get each() {
+								return visibleItems();
+							},
+							children: (item, index) => {
+								const itemIndex = () => (virtualRange()?.start ?? 0) + index();
+								const beforeIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "before");
+								const onIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "on");
+								const afterIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "after");
+								return [
+									memo(beforeIndicator),
+									memo(onIndicator),
+									memo(() => local.children?.(item)),
+									memo(afterIndicator)
+								];
+							}
+						}),
+						memo(() => memo(() => !!virtualRange()?.offsetBottom)() ? (() => {
+							var _el$19 = getNextElement(_tmpl$7), _el$20 = _el$19.firstChild;
+							effect((_p$) => {
+								var _v$7 = spacerColSpan(), _v$8 = `${virtualRange().offsetBottom}px`;
+								_v$7 !== _p$.e && setAttribute(_el$20, "colspan", _p$.e = _v$7);
+								_v$8 !== _p$.t && setStyleProperty(_el$20, "height", _p$.t = _v$8);
+								return _p$;
+							}, {
+								e: void 0,
+								t: void 0
+							});
+							return _el$19;
+						})() : null)
+					];
+				},
+				get children() {
+					var _el$11 = getNextElement(_tmpl$5), _el$12 = _el$11.firstChild;
+					insert(_el$12, () => local.renderEmptyState?.());
+					effect(() => setAttribute(_el$12, "colspan", spacerColSpan()));
+					return _el$11;
+				}
+			});
+		} }), _el$14, _co$);
+		insert(_el$10, createComponent(Show, {
+			get when() {
+				return memo(() => !!local.hasMore)() && local.onLoadMore;
+			},
+			get children() {
+				return createComponent(TableLoadMoreItem, {
+					get onLoadMore() {
+						return local.onLoadMore;
+					},
+					get isLoading() {
+						return local.isLoading;
+					},
+					get colSpan() {
+						return spacerColSpan();
+					}
+				});
+			}
+		}), _el$16, _co$2);
+		runHydrationEvents();
+		return _el$10;
+	})();
+}
+/**
+* The footer of a table containing summary rows.
+*/
+function TableFooter(props) {
+	const [local, domProps] = splitProps(props, [
+		"items",
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	if (!useContext(TableContext)) throw new Error("TableFooter must be used within a Table");
+	const { rowGroupProps } = createTableRowGroup(() => ({ type: "tfoot" }));
+	const items = createMemo(() => local.items ?? []);
+	const renderValues = createMemo(() => ({ isEmpty: items().length === 0 }));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Table-footer"
+	}, renderValues);
+	const cleanRowGroupProps = () => {
+		const { ref: _ref, ...rest } = rowGroupProps;
+		return rest;
+	};
+	return (() => {
+		var _el$21 = getNextElement(_tmpl$9);
+		spread(_el$21, mergeProps(domProps, cleanRowGroupProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			}
+		}), false, true);
+		insert(_el$21, createComponent(Show, {
+			get when() {
+				return memo(() => !!local.items)() && typeof local.children === "function";
+			},
+			get fallback() {
+				return local.children;
+			},
+			get children() {
+				return createComponent(For, {
+					get each() {
+						return items();
+					},
+					children: (item) => local.children(item)
+				});
+			}
+		}));
+		runHydrationEvents();
+		return _el$21;
+	})();
+}
+function TableLoadMoreItem(props) {
+	let sentinelRef;
+	const [isPending, setIsPending] = createSignal(false);
+	const isLoading = () => !!props.isLoading || isPending();
+	const triggerLoadMore = async () => {
+		if (isPending()) return;
+		setIsPending(true);
+		try {
+			await props.onLoadMore();
+		} finally {
+			setIsPending(false);
+		}
+	};
+	createEffect(() => {
+		if (!sentinelRef || typeof IntersectionObserver !== "function") return;
+		const margin = `0px 0px ${100 * (props.scrollOffset ?? 1)}% 0px`;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[0]?.isIntersecting) triggerLoadMore();
+		}, { rootMargin: margin });
+		observer.observe(sentinelRef);
+		return () => observer.disconnect();
+	});
+	const renderProps = useRenderProps({
+		children: props.children ?? (() => isLoading() ? getNextElement(_tmpl$0) : null),
+		class: props.class,
+		style: props.style,
+		defaultClassName: "solidaria-Table-loadMore"
+	}, () => ({ isLoading: isLoading() }));
+	return [(() => {
+		var _el$23 = getNextElement(_tmpl$1), _el$25 = _el$23.firstChild.firstChild;
+		var _ref$ = sentinelRef;
+		typeof _ref$ === "function" ? use(_ref$, _el$25) : sentinelRef = _el$25;
+		return _el$23;
+	})(), createComponent(Show, {
+		get when() {
+			return isLoading();
+		},
+		get children() {
+			var _el$26 = getNextElement(_tmpl$10), _el$27 = _el$26.firstChild;
+			_el$26.addEventListener("focus", () => {
+				triggerLoadMore();
+			});
+			insert(_el$27, () => renderProps.renderChildren());
+			effect((_p$) => {
+				var _v$9 = renderProps.class(), _v$0 = renderProps.style(), _v$1 = props.colSpan ?? 1;
+				_v$9 !== _p$.e && className(_el$26, _p$.e = _v$9);
+				_p$.t = style(_el$26, _v$0, _p$.t);
+				_v$1 !== _p$.a && setAttribute(_el$27, "colspan", _p$.a = _v$1);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0
+			});
+			return _el$26;
+		}
+	})];
+}
+/**
+* A row in a table.
+*/
+function TableRow(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"render",
+		"slot",
+		"id",
+		"item",
+		"columns",
+		"isDisabled",
+		"onAction",
+		"children",
+		"ref",
+		"href",
+		"target",
+		"rel",
+		"download",
+		"ping",
+		"referrerPolicy",
+		"routerOptions"
+	]);
+	const context = useContext(TableContext);
+	if (!context) throw new Error("TableRow must be used within a Table");
+	const { state } = context;
+	const tableContext = context;
+	const registeredCellIds = [];
+	const generatedId = createUniqueId();
+	const rowKey = () => local.id ?? generatedId;
+	const router = useRouter();
+	const linkProps = createMemo(() => useLinkProps({
+		href: local.href,
+		target: local.target,
+		rel: local.rel,
+		download: local.download,
+		ping: local.ping,
+		referrerPolicy: local.referrerPolicy
+	}));
+	const [ref, setRef] = createSignal(null);
+	const rowNode = createMemo(() => {
+		const node = state.collection.getItem(rowKey());
+		if (!node) return {
+			type: "item",
+			key: rowKey(),
+			value: local.item ?? null,
+			textValue: String(local.id),
+			level: 0,
+			index: 0,
+			hasChildNodes: true,
+			childNodes: []
+		};
+		return node;
+	});
+	const rowAria = createTableRow(() => ({
+		node: rowNode(),
+		isVirtualized: tableContext.isVirtualized,
+		isDisabled: local.isDisabled,
+		onAction: local.onAction,
+		href: linkProps().href,
+		onLinkAction: (event) => {
+			const target = ref();
+			if (!target || !local.href) return;
+			router.open(target, event, local.href, local.routerOptions);
+		}
+	}), () => state, ref);
+	const isSelected = () => rowAria.isSelected;
+	const isDisabled = () => rowAria.isDisabled;
+	const isPressed = () => rowAria.isPressed;
+	const isInteractive = () => {
+		const tableData = getTableData(state);
+		return state.selectionMode !== "none" || !!tableData?.actions.onRowAction || !!local.onAction || !!local.href;
+	};
+	const { isHovered, hoverProps } = createHover({
+		get isDisabled() {
+			return isDisabled() || !isInteractive();
+		},
+		onHoverStart(e) {
+			domProps.onHoverStart?.(e);
+		},
+		onHoverEnd(e) {
+			domProps.onHoverEnd?.(e);
+		},
+		onHoverChange(isHovering) {
+			domProps.onHoverChange?.(isHovering);
+		}
+	});
+	const { isFocusVisible: isFocusVisible$1, focusProps } = createFocusRing();
+	const [isFocusWithin, setIsFocusWithin] = createSignal(false);
+	const focusWithinProps = {
+		onFocusIn() {
+			setIsFocusWithin(true);
+		},
+		onFocusOut(e) {
+			const currentTarget = e.currentTarget;
+			const nextTarget = e.relatedTarget;
+			if (!nextTarget || !currentTarget.contains(nextTarget)) setIsFocusWithin(false);
+		}
+	};
+	const isFocused = createMemo(() => state.focusedKey === rowKey());
+	const draggableItem = createMemo(() => {
+		if (!tableContext.dragAndDropHooks?.useDraggableItem || !tableContext.dragState) return void 0;
+		return tableContext.dragAndDropHooks.useDraggableItem({
+			key: rowKey(),
+			hasDragButton: true
+		}, tableContext.dragState);
+	});
+	const droppableItem = createMemo(() => {
+		if (!tableContext.dragAndDropHooks?.useDroppableItem || !tableContext.dropState) return void 0;
+		return tableContext.dragAndDropHooks.useDroppableItem({ key: rowKey() }, tableContext.dropState, () => ref());
+	});
+	const isTreeRow = () => state.treeColumn != null;
+	const rowLevel = () => rowNode().level + 1;
+	const hasChildItems = () => rowAria.hasChildRows;
+	const isExpanded = () => rowAria.isExpanded;
+	const renderValues = createMemo(() => ({
+		isSelected: isSelected(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible$1() && isFocused(),
+		isPressed: isPressed(),
+		isHovered: isHovered(),
+		isDisabled: isDisabled(),
+		isExpanded: isExpanded(),
+		hasChildItems: hasChildItems(),
+		level: rowLevel()
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Table-row"
+	}, renderValues);
+	const cleanRowProps = () => {
+		const { ref: _ref1, ...rest } = rowAria.rowProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref2, ...rest } = hoverProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref3, ...rest } = focusProps;
+		return rest;
+	};
+	const rowContextValue = {
+		rowKey: rowKey(),
+		rowNode: rowNode(),
+		getCellColumnKey(cellId, explicitId) {
+			if (explicitId === "__selection__") return explicitId;
+			let index = registeredCellIds.indexOf(cellId);
+			if (index < 0) {
+				index = registeredCellIds.length;
+				registeredCellIds.push(cellId);
+			}
+			return explicitId ?? tableContext.columns[index]?.key;
+		}
+	};
+	const dragButtonProps = createMemo(() => {
+		const props = draggableItem()?.dragButtonProps ?? {};
+		const textValue = (rowNode().textValue || String(rowKey())).trim();
+		return {
+			...props,
+			"aria-label": `Drag ${textValue}`,
+			style: {
+				...typeof props.style === "object" ? props.style : {},
+				"pointer-events": "none"
+			}
+		};
+	});
+	const buttonContextValue = { slots: {
+		default: {},
+		get drag() {
+			return dragButtonProps();
+		},
+		get chevron() {
+			return rowAria.expandButtonProps;
+		}
+	} };
+	const childRenderProps = {
+		get isSelected() {
+			return isSelected();
+		},
+		get isFocused() {
+			return isFocused();
+		},
+		get isFocusVisible() {
+			return isFocusVisible$1() && isFocused();
+		},
+		get isPressed() {
+			return isPressed();
+		},
+		get isHovered() {
+			return isHovered();
+		},
+		get isDisabled() {
+			return isDisabled();
+		},
+		get isExpanded() {
+			return isExpanded();
+		},
+		get hasChildItems() {
+			return hasChildItems();
+		},
+		get level() {
+			return rowLevel();
+		}
+	};
+	const rowStyle = () => {
+		const base = renderProps.style();
+		if (!isTreeRow()) return base;
+		return {
+			...base ?? {},
+			"--table-row-level": rowLevel()
+		};
+	};
+	return createComponent(TableRowContext.Provider, {
+		value: rowContextValue,
+		get children() {
+			return createComponent(ButtonContext.Provider, {
+				value: buttonContextValue,
+				get children() {
+					return (() => {
+						registeredCellIds.length = 0;
+						const rowChildrenContent = typeof local.children === "function" ? local.columns ? createComponent(For, {
+							get each() {
+								return local.columns;
+							},
+							children: (column) => local.children(column)
+						}) : local.children(childRenderProps) : local.children;
+						const tableRowProps = () => ({
+							ref: (el) => {
+								setRef(el);
+								assignRef(local.ref, el);
+							},
+							...domProps,
+							...mergeProps$2(cleanRowProps(), cleanHoverProps(), cleanFocusProps(), focusWithinProps, draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}),
+							class: renderProps.class(),
+							style: rowStyle(),
+							"data-key": rowKey(),
+							"data-selected": isSelected() || void 0,
+							"data-focused": isFocused() || void 0,
+							"data-focus-visible": isFocusVisible$1() && isFocused() || void 0,
+							"data-focus-visible-within": dataAttr(isFocusWithin() && isFocusVisible()),
+							"data-pressed": isPressed() || void 0,
+							"data-hovered": isHovered() || void 0,
+							"data-disabled": isDisabled() || void 0,
+							"data-href": linkProps().href,
+							"data-target": linkProps().target,
+							"data-rel": linkProps().rel,
+							"data-download": typeof linkProps().download === "string" ? linkProps().download : linkProps().download ? "" : void 0,
+							"data-ping": linkProps().ping,
+							"data-referrer-policy": linkProps().referrerPolicy,
+							"data-dragging": draggableItem()?.isDragging || void 0,
+							"data-drop-target": droppableItem()?.isDropTarget || void 0,
+							"data-expanded": isTreeRow() && isExpanded() || void 0,
+							"data-has-child-items": isTreeRow() && hasChildItems() || void 0,
+							"data-level": isTreeRow() ? rowLevel() : void 0,
+							children: rowChildrenContent
+						});
+						return createComponent(Show, {
+							get when() {
+								return local.render;
+							},
+							get fallback() {
+								return (() => {
+									var _el$28 = getNextElement(_tmpl$11);
+									use((el) => {
+										setRef(el);
+										assignRef(local.ref, el);
+									}, _el$28);
+									spread(_el$28, mergeProps(domProps, () => mergeProps$2(cleanRowProps(), cleanHoverProps(), cleanFocusProps(), focusWithinProps, draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}), {
+										get ["class"]() {
+											return renderProps.class();
+										},
+										get style() {
+											return rowStyle();
+										},
+										get ["data-key"]() {
+											return rowKey();
+										},
+										get ["data-selected"]() {
+											return isSelected() || void 0;
+										},
+										get ["data-focused"]() {
+											return isFocused() || void 0;
+										},
+										get ["data-focus-visible"]() {
+											return memo(() => !!isFocusVisible$1())() && isFocused() || void 0;
+										},
+										get ["data-focus-visible-within"]() {
+											return dataAttr(isFocusWithin() && isFocusVisible());
+										},
+										get ["data-pressed"]() {
+											return isPressed() || void 0;
+										},
+										get ["data-hovered"]() {
+											return isHovered() || void 0;
+										},
+										get ["data-disabled"]() {
+											return isDisabled() || void 0;
+										},
+										get ["data-href"]() {
+											return linkProps().href;
+										},
+										get ["data-target"]() {
+											return linkProps().target;
+										},
+										get ["data-rel"]() {
+											return linkProps().rel;
+										},
+										get ["data-download"]() {
+											return memo(() => typeof linkProps().download === "string")() ? linkProps().download : linkProps().download ? "" : void 0;
+										},
+										get ["data-ping"]() {
+											return linkProps().ping;
+										},
+										get ["data-referrer-policy"]() {
+											return linkProps().referrerPolicy;
+										},
+										get ["data-dragging"]() {
+											return draggableItem()?.isDragging || void 0;
+										},
+										get ["data-drop-target"]() {
+											return droppableItem()?.isDropTarget || void 0;
+										},
+										get ["data-expanded"]() {
+											return memo(() => !!isTreeRow())() && isExpanded() || void 0;
+										},
+										get ["data-has-child-items"]() {
+											return memo(() => !!isTreeRow())() && hasChildItems() || void 0;
+										},
+										get ["data-level"]() {
+											return memo(() => !!isTreeRow())() ? rowLevel() : void 0;
+										}
+									}), false, true);
+									insert(_el$28, rowChildrenContent);
+									runHydrationEvents();
+									return _el$28;
+								})();
+							},
+							get children() {
+								return local.render(tableRowProps(), renderValues());
+							}
+						});
+					})();
+				}
+			});
+		}
+	});
+}
+/**
+* A cell in a table row.
+*/
+function TableCell(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"render",
+		"slot",
+		"id",
+		"colSpan",
+		"children",
+		"ref"
+	]);
+	const tableContext = useContext(TableContext);
+	const rowContext = useContext(TableRowContext);
+	if (!tableContext) throw new Error("TableCell must be used within a Table");
+	if (!rowContext) throw new Error("TableCell must be used within a Table");
+	const { state } = tableContext;
+	const { rowKey, rowNode } = rowContext;
+	const [ref, setRef] = createSignal(null);
+	const cellId = createUniqueId();
+	const columnKey = createMemo(() => rowContext.getCellColumnKey(cellId, local.id));
+	const cellNode = createMemo(() => {
+		const key = columnKey();
+		if (key != null) {
+			const cellKey = `${rowKey}-${key}`;
+			const node = state.collection.getItem(cellKey);
+			if (node) return node;
+		}
+		return {
+			type: "cell",
+			key: key ?? `${rowKey}-cell`,
+			value: rowNode.value,
+			textValue: "",
+			level: 1,
+			index: 0,
+			parentKey: rowKey,
+			hasChildNodes: false,
+			childNodes: []
+		};
+	});
+	const cellColumnIndex = createMemo(() => {
+		const key = columnKey();
+		if (key == null) return void 0;
+		const cellKey = `${rowKey}-${key}`;
+		return state.collection.getItem(cellKey) ? cellNode().index ?? 0 : void 0;
+	});
+	const isTreeGridCell = () => state.treeColumn != null;
+	const parentRowNode = createMemo(() => state.collection.getItem(rowKey));
+	const cellLevel = () => (parentRowNode()?.level ?? rowNode.level ?? 0) + 1;
+	const cellHasChildItems = () => parentRowNode()?.isExpandable ?? false;
+	const cellIsExpanded = () => {
+		if (!isTreeGridCell() || !cellHasChildItems()) return false;
+		return state.expandedKeys === "all" || state.expandedKeys.has(rowKey);
+	};
+	const isTreeColumn = () => isTreeGridCell() && columnKey() === state.treeColumn;
+	const cellAria = createTableCell(() => ({ node: cellNode() }), () => state, ref);
+	const isPressed = () => cellAria.isPressed;
+	const { isHovered, hoverProps } = createHover({ isDisabled: false });
+	const { isFocusVisible, focusProps } = createFocusRing();
+	const isFocused = createMemo(() => state.focusedKey === cellNode().key);
+	const renderValues = createMemo(() => ({
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible() && isFocused(),
+		columnIndex: cellColumnIndex() ?? 0,
+		isPressed: isPressed(),
+		isHovered: isHovered(),
+		isTreeColumn: isTreeColumn(),
+		isExpanded: cellIsExpanded(),
+		hasChildItems: cellHasChildItems(),
+		level: cellLevel()
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Table-cell"
+	}, renderValues);
+	const cleanCellProps = () => {
+		const { ref: _ref1, ...rest } = cellAria.gridCellProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref2, ...rest } = hoverProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref3, ...rest } = focusProps;
+		return rest;
+	};
+	const cellChildren = () => typeof local.children === "function" ? local.children(renderValues()) : local.children;
+	const tableCellProps = () => ({
+		ref: (el) => {
+			setRef(el);
+			assignRef(local.ref, el);
+		},
+		...domProps,
+		...mergeProps$2(cleanCellProps(), cleanHoverProps(), cleanFocusProps()),
+		colSpan: local.colSpan,
+		class: renderProps.class(),
+		style: renderProps.style(),
+		"data-key": cellNode().key,
+		"data-focused": isFocused() || void 0,
+		"data-focus-visible": isFocusVisible() && isFocused() || void 0,
+		"data-column-index": cellColumnIndex(),
+		"data-pressed": isPressed() || void 0,
+		"data-hovered": isHovered() || void 0,
+		"data-tree-column": isTreeColumn() || void 0,
+		"data-expanded": isTreeGridCell() && cellIsExpanded() || void 0,
+		"data-has-child-items": isTreeGridCell() && cellHasChildItems() || void 0,
+		"data-level": isTreeGridCell() ? cellLevel() : void 0,
+		children: cellChildren()
+	});
+	return local.render ? local.render(tableCellProps(), renderValues()) : (() => {
+		var _el$29 = getNextElement(_tmpl$12);
+		use((el) => {
+			setRef(el);
+			assignRef(local.ref, el);
+		}, _el$29);
+		spread(_el$29, mergeProps(domProps, () => mergeProps$2(cleanCellProps(), cleanHoverProps(), cleanFocusProps()), {
+			get colSpan() {
+				return local.colSpan;
+			},
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get ["data-key"]() {
+				return cellNode().key;
+			},
+			get ["data-focused"]() {
+				return isFocused() || void 0;
+			},
+			get ["data-focus-visible"]() {
+				return memo(() => !!isFocusVisible())() && isFocused() || void 0;
+			},
+			get ["data-column-index"]() {
+				return cellColumnIndex();
+			},
+			get ["data-pressed"]() {
+				return isPressed() || void 0;
+			},
+			get ["data-hovered"]() {
+				return isHovered() || void 0;
+			},
+			get ["data-tree-column"]() {
+				return isTreeColumn() || void 0;
+			},
+			get ["data-expanded"]() {
+				return memo(() => !!isTreeGridCell())() && cellIsExpanded() || void 0;
+			},
+			get ["data-has-child-items"]() {
+				return memo(() => !!isTreeGridCell())() && cellHasChildItems() || void 0;
+			},
+			get ["data-level"]() {
+				return memo(() => !!isTreeGridCell())() ? cellLevel() : void 0;
+			}
+		}), false, true);
+		insert(_el$29, cellChildren);
+		runHydrationEvents();
+		return _el$29;
+	})();
+}
+/**
+* A checkbox cell for row selection.
+*/
+function TableSelectionCheckbox(props) {
+	const context = useContext(TableContext);
+	if (!context) throw new Error("TableSelectionCheckbox must be used within a Table");
+	const { state } = context;
+	const selectionCheckboxAria = createTableSelectionCheckbox(() => ({ key: props.rowKey }), () => state);
+	return (() => {
+		var _el$30 = getNextElement(_tmpl$13);
+		spread(_el$30, mergeProps(() => selectionCheckboxAria.checkboxProps, {
+			get ["class"]() {
+				return props.class;
+			},
+			get style() {
+				return props.style;
+			},
+			get tabIndex() {
+				return memo(() => !!props.excludeFromTabOrder)() ? -1 : selectionCheckboxAria.checkboxProps.tabIndex;
+			},
+			get ["aria-label"]() {
+				return props["aria-label"] ?? selectionCheckboxAria.checkboxProps["aria-label"];
+			},
+			"onClick": (event) => event.stopPropagation(),
+			"onKeyDown": (event) => event.stopPropagation(),
+			"onKeyUp": (event) => event.stopPropagation(),
+			"onPointerDown": (event) => event.stopPropagation(),
+			"onPointerUp": (event) => event.stopPropagation()
+		}), false, false);
+		runHydrationEvents();
+		return _el$30;
+	})();
+}
+/**
+* A checkbox for select-all functionality.
+*/
+function TableSelectAllCheckbox(props = {}) {
+	const context = useContext(TableContext);
+	if (!context) throw new Error("TableSelectAllCheckbox must be used within a Table");
+	const { state } = context;
+	const selectAllCheckboxAria = createTableSelectAllCheckbox(() => state);
+	let inputRef;
+	createEffect(() => {
+		if (inputRef) inputRef.indeterminate = selectAllCheckboxAria.isIndeterminate;
+	});
+	return (() => {
+		var _el$31 = getNextElement(_tmpl$13);
+		var _ref$2 = inputRef;
+		typeof _ref$2 === "function" ? use(_ref$2, _el$31) : inputRef = _el$31;
+		spread(_el$31, mergeProps(() => selectAllCheckboxAria.checkboxProps, {
+			get ["class"]() {
+				return props.class;
+			},
+			get style() {
+				return props.style;
+			},
+			get ["aria-label"]() {
+				return props["aria-label"] ?? selectAllCheckboxAria.checkboxProps["aria-label"];
+			}
+		}), false, false);
+		runHydrationEvents();
+		return _el$31;
+	})();
+}
+Table.Header = TableHeader;
+Table.Column = TableColumn;
+Table.Body = TableBody;
+Table.LoadMoreItem = TableLoadMoreItem;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+Table.SelectionCheckbox = TableSelectionCheckbox;
+Table.SelectAllCheckbox = TableSelectAllCheckbox;
+function ColumnResizer(props) {
+	const [local, domProps] = splitProps(props, [
+		"column",
+		"aria-label",
+		"isDisabled",
+		"onResizeStart",
+		"onResize",
+		"onResizeEnd",
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const registerColumn = useContext(ResizableTableRegisterContext);
+	if (registerColumn) registerColumn(local.column.key, { key: local.column.key });
+	const resizeCtx = useContext(TableColumnResizeStateContext);
+	const hasResizeContext = !!resizeCtx;
+	const noopResizeState = {
+		resizingColumn: () => null,
+		columnWidths: () => /* @__PURE__ */ new Map(),
+		startResize() {},
+		endResize() {},
+		updateResizedColumns(_key, _width) {
+			return /* @__PURE__ */ new Map();
+		},
+		getColumnWidth() {
+			return 0;
+		},
+		getColumnMinWidth() {
+			return 75;
+		},
+		getColumnMaxWidth() {
+			return Infinity;
+		}
+	};
+	const { isHovered, hoverProps } = createHover({ isDisabled: local.isDisabled ?? false });
+	const [isFocused, setIsFocused] = createSignal(false);
+	const columnResize = createTableColumnResize(() => ({
+		column: local.column,
+		"aria-label": local["aria-label"] ?? "Resizer",
+		isDisabled: local.isDisabled,
+		onResizeStart: (widths) => {
+			resizeCtx?.getCallbacks?.().onResizeStart?.(widths);
+			local.onResizeStart?.(widths);
+		},
+		onResize: (widths) => {
+			resizeCtx?.getCallbacks?.().onResize?.(widths);
+			local.onResize?.(widths);
+		},
+		onResizeEnd: (widths) => {
+			resizeCtx?.getCallbacks?.().onResizeEnd?.(widths);
+			local.onResizeEnd?.(widths);
+		}
+	}), () => resizeCtx?.getState() ?? noopResizeState);
+	const renderValues = createMemo(() => ({
+		isHovered: isHovered(),
+		isFocused: isFocused(),
+		isResizing: columnResize.isResizing(),
+		resizableDirection: "both"
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Table-columnResizer"
+	}, renderValues);
+	const cleanHoverProps = () => {
+		const { ref: _ref, ...rest } = hoverProps;
+		return rest;
+	};
+	return (() => {
+		var _el$32 = getNextElement(_tmpl$14), _el$34 = _el$32.firstChild, [_el$35, _co$3] = getNextMarker(_el$34.nextSibling), _el$36 = _el$35.nextSibling, [_el$37, _co$4] = getNextMarker(_el$36.nextSibling);
+		spread(_el$32, mergeProps(domProps, () => columnResize.resizerProps, cleanHoverProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get ["data-hovered"]() {
+				return isHovered() || void 0;
+			},
+			get ["data-resizing"]() {
+				return columnResize.isResizing() || void 0;
+			}
+		}), false, true);
+		insert(_el$32, createComponent(Show, {
+			when: hasResizeContext,
+			get children() {
+				var _el$33 = getNextElement(_tmpl$13);
+				spread(_el$33, mergeProps(() => columnResize.inputProps, {
+					"onFocus": () => setIsFocused(true),
+					"onBlur": () => setIsFocused(false)
+				}), false, false);
+				runHydrationEvents();
+				return _el$33;
+			}
+		}), _el$35, _co$3);
+		insert(_el$32, (() => {
+			var _c$ = memo(() => typeof local.children === "function");
+			return () => _c$() ? local.children(renderValues()) : local.children;
+		})(), _el$37, _co$4);
+		runHydrationEvents();
+		return _el$32;
+	})();
+}
+function ResizableTableContainer(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children",
+		"columns",
+		"onResizeStart",
+		"onResize",
+		"onResizeEnd"
+	]);
+	const [containerRef, setContainerRef] = createSignal(null);
+	const [tableWidth, setTableWidth] = createSignal(0);
+	createEffect(() => {
+		const el = containerRef();
+		if (!el) return;
+		setTableWidth(el.clientWidth);
+		if (typeof ResizeObserver !== "undefined") {
+			const observer = new ResizeObserver((entries) => {
+				for (const entry of entries) setTableWidth(entry.contentRect.width);
+			});
+			observer.observe(el);
+			onCleanup(() => observer.disconnect());
+		}
+	});
+	const [autoColumns, setAutoColumns] = createSignal(/* @__PURE__ */ new Map());
+	const registerColumn = (key, def) => {
+		setAutoColumns((prev) => {
+			const next = new Map(prev);
+			next.set(key, def);
+			return next;
+		});
+	};
+	const effectiveColumns = createMemo(() => {
+		if (local.columns && local.columns.length > 0) return local.columns;
+		return Array.from(autoColumns().values());
+	});
+	const effectiveWidth = createMemo(() => {
+		const w = tableWidth();
+		return w > 0 ? w : 800;
+	});
+	const resizeState = createMemo(() => {
+		const cols = effectiveColumns();
+		if (cols.length === 0) return null;
+		return createTableColumnResizeState(() => ({
+			tableWidth: effectiveWidth(),
+			columns: cols
+		}));
+	});
+	const contextValue = {
+		getState: () => resizeState(),
+		getCallbacks: () => ({
+			onResizeStart: local.onResizeStart,
+			onResize: local.onResize,
+			onResizeEnd: local.onResizeEnd
+		})
+	};
+	return createComponent(ResizableTableRegisterContext.Provider, {
+		value: registerColumn,
+		get children() {
+			return createComponent(TableColumnResizeStateContext.Provider, {
+				value: contextValue,
+				get children() {
+					var _el$38 = getNextElement(_tmpl$15);
+					use(setContainerRef, _el$38);
+					spread(_el$38, mergeProps(domProps, {
+						get ["class"]() {
+							return local.class ?? "solidaria-ResizableTableContainer";
+						},
+						get style() {
+							return {
+								position: "relative",
+								overflow: "auto",
+								...local.style
+							};
+						}
+					}), false, true);
+					insert(_el$38, () => local.children);
+					runHydrationEvents();
+					return _el$38;
+				}
+			});
+		}
+	});
+}
+/** Internal context for ColumnResizer to register itself with ResizableTableContainer */
+const ResizableTableRegisterContext = createContext(null);
+function useTableOptions() {
+	return useContext(TableContext);
+}
+//#endregion
+export { ColumnResizer, ResizableTableContainer, Table, TableBody, TableCell, TableColumn, TableColumnResizeStateContext, TableContext, TableFooter, TableHeader, TableLoadMoreItem, TableRow, TableRowContext, TableSelectAllCheckbox, TableSelectionCheckbox, TableStateContext, useTableOptions };
+
+//# sourceMappingURL=Table.js.map