@human-kit/svelte-components 1.0.0-alpha.2 → 1.0.0-alpha.20

package/dist/table/checkbox-indicator/README.md

@@ -0,0 +1,31 @@
+# Table.CheckboxIndicator
+
+## API reference
+
+### Indicator Part
+
+Name: `Table.CheckboxIndicator`
+Description: Headless presence wrapper for indicator content inside `Table.Checkbox`. It renders when the checkbox is checked or indeterminate.
+
+Public prop type: `TableCheckboxIndicatorProps`
+
+| Prop           | Type                              | Default     | Description                                                                     |
+| -------------- | --------------------------------- | ----------- | ------------------------------------------------------------------------------- |
+| `keepMounted`  | `boolean`                         | `false`     | Keeps the indicator mounted while hidden when the checkbox is unchecked.        |
+| `children`     | `Snippet`                         | `undefined` | Rendered indicator content, such as a check icon or dash icon.                  |
+| `class`        | `string`                          | `''`        | CSS class names for the indicator wrapper.                                      |
+| `...restProps` | `HTMLAttributes<HTMLSpanElement>` | `-`         | Additional native attributes forwarded to the composed checkbox indicator span. |
+
+## Usage notes
+
+- Use `Table.CheckboxIndicator` inside `Table.Checkbox`.
+- The part is headless and unstyled.
+- It mirrors the visibility behavior of `Checkbox.Indicator` and renders for checked and indeterminate states.
+
+```svelte
+<Table.Checkbox class="inline-flex h-5 w-5 items-center justify-center rounded border">
+	<Table.CheckboxIndicator>
+		<CheckIcon class="h-3.5 w-3.5" />
+	</Table.CheckboxIndicator>
+</Table.Checkbox>
+```

package/dist/table/checkbox-indicator/table-checkbox-indicator.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Checkbox } from '../../checkbox';
+	import type { TableCheckboxIndicatorProps } from '../types.js';
+
+	let {
+		keepMounted = false,
+		children,
+		class: className = '',
+		...restProps
+	}: TableCheckboxIndicatorProps = $props();
+</script>
+
+<Checkbox.Indicator {keepMounted} class={className} {...restProps}>
+	{@render children?.()}
+</Checkbox.Indicator>

package/dist/table/checkbox-indicator/table-checkbox-indicator.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TableCheckboxIndicatorProps } from '../types.js';
+declare const TableCheckboxIndicator: import("svelte").Component<TableCheckboxIndicatorProps, {}, "">;
+type TableCheckboxIndicator = ReturnType<typeof TableCheckboxIndicator>;
+export default TableCheckboxIndicator;

package/dist/table/column/README.md

@@ -0,0 +1,36 @@
+<!-- markdownlint-disable MD024 MD060 -->
+
+# Table.Column
+
+## API reference
+
+### Table.Column
+
+Name: `Table.Column`
+Description: Logical metadata wrapper for a header column. It does not render DOM and is used to register stable column identity, row-header semantics, and width constraints.
+
+Public prop type: `TableColumnProps`
+
+| Prop           | Type                        | Default     | Description                                                                                                   |
+| -------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`           | `string`                    | `-`         | Stable identifier for the column.                                                                             |
+| `isRowHeader`  | `boolean`                   | `false`     | Marks the associated body column as row-header cells.                                                         |
+| `textValue`    | `string`                    | `undefined` | Optional spoken label used by `Table.Root` sort announcements when it should differ from `id`.                |
+| `width`        | `number \| \`${number}px\`` | `undefined` | Fixed column width. When set, the column keeps that width and user resize interactions are disabled.          |
+| `defaultWidth` | `number \| \`${number}px\`` | `undefined` | Uncontrolled initial width hint for the column. The column remains user-resizable when a resizer is composed. |
+| `minWidth`     | `number`                    | `undefined` | Minimum width in px enforced during resize interactions.                                                      |
+| `maxWidth`     | `number`                    | `undefined` | Maximum width in px enforced during resize interactions.                                                      |
+| `children`     | `Snippet`                   | `undefined` | Usually a single `Table.ColumnHeaderCell`.                                                                    |
+
+`Table.SortTrigger` is the public sorting opt-in. Compose it inside `Table.ColumnHeaderCell` when the owning column should be sortable.
+
+`Table.ColumnResizer` is the public resize opt-in. Compose it inside `Table.ColumnHeaderCell` when the owning column should be resizable.
+
+### Context utilities
+
+Name: `Table.Column` column context
+Description: Provides column metadata to `Table.ColumnHeaderCell`.
+
+| Prop                    | Type                       | Default | Description                                                          |
+| ----------------------- | -------------------------- | ------- | -------------------------------------------------------------------- |
+| `useTableColumnContext` | `() => TableColumnContext` | `-`     | Reads the current column metadata and throws outside `Table.Column`. |

package/dist/table/column/table-column.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { setTableColumnContext, useTableContext, useTableSectionContext } from '../root/context';
+	import type { TableColumnProps } from '../types.js';
+
+	let {
+		id,
+		isRowHeader = false,
+		textValue,
+		width,
+		defaultWidth,
+		minWidth,
+		maxWidth,
+		children
+	}: TableColumnProps = $props();
+
+	const table = useTableContext();
+	const section = useTableSectionContext();
+	const token = table.createInstanceToken('column');
+
+	if (section.section !== 'header') {
+		throw new Error('`Table.Column` must be used inside `Table.Header`.');
+	}
+
+	setTableColumnContext({
+		token,
+		get id() {
+			return id;
+		},
+		get isHidden() {
+			return table.isColumnHidden(id);
+		},
+		get isRowHeader() {
+			return isRowHeader;
+		},
+		get textValue() {
+			return textValue;
+		},
+		get width() {
+			return width;
+		},
+		get defaultWidth() {
+			return defaultWidth;
+		},
+		get minWidth() {
+			return minWidth;
+		},
+		get maxWidth() {
+			return maxWidth;
+		}
+	});
+
+	function syncColumnRegistration() {
+		table.registerColumn({
+			token,
+			id,
+			isRowHeader,
+			textValue,
+			width,
+			defaultWidth,
+			minWidth,
+			maxWidth
+		});
+	}
+
+	syncColumnRegistration();
+
+	$effect(() => {
+		syncColumnRegistration();
+	});
+
+	onDestroy(() => {
+		table.unregisterColumn(token);
+	});
+</script>
+
+{#if children}
+	{@render children()}
+{/if}

package/dist/table/column/table-column.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TableColumnProps } from '../types.js';
+declare const TableColumn: import("svelte").Component<TableColumnProps, {}, "">;
+type TableColumn = ReturnType<typeof TableColumn>;
+export default TableColumn;

package/dist/table/column-header-cell/README.md

@@ -0,0 +1,30 @@
+<!-- markdownlint-disable MD024 -->
+
+# Table.ColumnHeaderCell
+
+## API reference
+
+### Table.ColumnHeaderCell
+
+Name: `Table.ColumnHeaderCell`
+Description: Focusable header cell for a column. It participates in roving focus, exposes `aria-sort` when a nested `Table.SortTrigger` is present, and can host additional header actions.
+
+Public prop type: `TableColumnHeaderCellProps`
+
+- When a nested control like `Table.ColumnResizer` receives focus, the header exposes `data-focus-within` / `data-focus-visible-within` instead of remaining `data-focused`.
+
+| Prop       | Type      | Default     | Description                       |
+| ---------- | --------- | ----------- | --------------------------------- |
+| `class`    | `string`  | `''`        | Class names for the `th` element. |
+| `children` | `Snippet` | `undefined` | Header content.                   |
+
+### Context utilities
+
+Name: `Table.ColumnHeaderCell` dependencies
+Description: Consumes both column and row context to register a navigable header cell.
+
+| Prop                    | Type                       | Default | Description                          |
+| ----------------------- | -------------------------- | ------- | ------------------------------------ |
+| `useTableColumnContext` | `() => TableColumnContext` | `-`     | Reads current column metadata.       |
+| `useTableRowContext`    | `() => TableRowContext`    | `-`     | Reads the current row token.         |
+| `useTableContext`       | `() => TableContext`       | `-`     | Reads table focus and sorting state. |

package/dist/table/column-header-cell/table-column-header-cell.svelte

@@ -0,0 +1,271 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import {
+		setTableCellContext,
+		useTableColumnContext,
+		useTableContext,
+		useTableRowContext
+	} from '../root/context';
+	import type { TableColumnHeaderCellProps } from '../types.js';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
+
+	let { children, class: className = '', ...restProps }: TableColumnHeaderCellProps = $props();
+
+	const table = useTableContext();
+	const column = useTableColumnContext();
+	const row = useTableRowContext();
+	const key = table.createInstanceToken('header-cell');
+	const focusVersion = table.focusVersion;
+	const layoutVersion = table.layoutVersion;
+	const sortVersion = table.sortVersion;
+	const widthVersion = table.widthVersion;
+
+	let element = $state<HTMLElement | undefined>(undefined);
+	let focusDelegate = $state<(() => HTMLElement | undefined) | undefined>(undefined);
+	let isElementFocused = $state(false);
+	let isElementFocusVisible = $state(false);
+	let isFocusWithin = $state(false);
+	let isFocusVisibleWithin = $state(false);
+	row.registerCellToken(key, () => element);
+	function syncHeaderCellRegistration() {
+		table.registerCell({
+			key,
+			rowToken: row.rowToken,
+			section: 'header',
+			columnToken: column.token,
+			element,
+			focusDelegate
+		});
+	}
+
+	function registerFocusDelegate(getElement: () => HTMLElement | undefined) {
+		focusDelegate = getElement;
+	}
+
+	function unregisterFocusDelegate() {
+		focusDelegate = undefined;
+	}
+
+	function notifyResizerPresent() {
+		// No-op. Header cells now always provide the positioning context that
+		// column resizers need so the handle is available in SSR HTML too.
+	}
+
+	function notifyResizerRemoved() {
+		// No-op. See notifyResizerPresent().
+	}
+
+	setTableCellContext({
+		cellKey: key,
+		registerFocusDelegate,
+		unregisterFocusDelegate,
+		notifyResizerPresent,
+		notifyResizerRemoved
+	});
+
+	syncHeaderCellRegistration();
+
+	$effect(() => {
+		syncHeaderCellRegistration();
+	});
+
+	onDestroy(() => {
+		row.unregisterCellToken(key);
+		table.unregisterCell(key);
+	});
+
+	const isFocused = $derived.by(() => {
+		void $focusVersion;
+		return table.isCellFocused(key) && isElementFocused;
+	});
+	const isFocusVisible = $derived.by(() => {
+		void $focusVersion;
+		return isFocused && isElementFocusVisible;
+	});
+	const sortDirection = $derived.by(() => {
+		void $sortVersion;
+		return table.getSortDirection(column.id);
+	});
+	const isHidden = $derived.by(() => {
+		void $layoutVersion;
+		return column.isHidden;
+	});
+	const columnWidthStyle = $derived.by(() => {
+		void $widthVersion;
+		return table.getColumnWidthStyle(column.id);
+	});
+	const columnMinWidth = $derived.by(() => {
+		void $widthVersion;
+		return table.getColumnMinWidth(column.id);
+	});
+	const columnMaxWidth = $derived.by(() => {
+		void $widthVersion;
+		return table.getColumnMaxWidth(column.id);
+	});
+	const visibleColumnIndex = $derived.by(() => {
+		void $layoutVersion;
+		return table.getVisibleColumnIndexByToken(column.token);
+	});
+	const isSortable = $derived.by(() => {
+		void $layoutVersion;
+		void $sortVersion;
+		return table.isColumnSortable(column.id);
+	});
+	const headerTabIndex = $derived.by(() => {
+		if (isHidden || focusDelegate) return undefined;
+		return table.isCellTabStop(key) ? 0 : -1;
+	});
+
+	function focusResizerInHeader(target: HTMLElement | undefined) {
+		const resizer = target?.querySelector<HTMLElement>('[data-table-column-resizer="true"]');
+		if (!resizer) return false;
+		resizer.focus();
+		return document.activeElement === resizer;
+	}
+
+	function getSiblingHeaderCell(direction: 'left' | 'right') {
+		const headerRow = element?.closest('tr');
+		if (!headerRow || !element) return null;
+
+		const headerCells = Array.from(
+			headerRow.querySelectorAll<HTMLElement>('th[role="columnheader"]')
+		);
+		const currentIndex = headerCells.indexOf(element);
+		if (currentIndex < 0) return null;
+
+		return headerCells[currentIndex + (direction === 'left' ? -1 : 1)] ?? null;
+	}
+
+	function moveFocusIntoResizeHandle(direction: 'left' | 'right') {
+		if (direction === 'right') {
+			return focusResizerInHeader(element);
+		}
+
+		return focusResizerInHeader(getSiblingHeaderCell('left') ?? undefined);
+	}
+
+	function handleFocus() {
+		isElementFocused = true;
+		isElementFocusVisible = shouldShowFocusVisible(element ?? null);
+		table.setFocusedCell(key);
+		table.setFocusVisible(isElementFocusVisible);
+	}
+
+	function handleBlur() {
+		isElementFocused = false;
+		isElementFocusVisible = false;
+	}
+
+	function handleFocusIn(event: FocusEvent) {
+		if (event.target === element) {
+			isFocusWithin = false;
+			isFocusVisibleWithin = false;
+			return;
+		}
+		isFocusWithin = true;
+		isFocusVisibleWithin = shouldShowFocusVisible(event.target as HTMLElement | null);
+	}
+
+	function handleFocusOut(event: FocusEvent) {
+		const nextFocused = event.relatedTarget;
+		if (nextFocused instanceof Node && element?.contains(nextFocused)) return;
+		isFocusWithin = false;
+		isFocusVisibleWithin = false;
+	}
+
+	function handleClick() {
+		table.focusCellByKey(key);
+		table.consumeHeaderClickSuppression();
+	}
+
+	function handleMouseDown(event: MouseEvent) {
+		trackInteractionModality(event, element ?? null);
+		isElementFocusVisible = false;
+		isFocusVisibleWithin = false;
+		table.setFocusVisible(false);
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		trackInteractionModality(event, element ?? null);
+
+		if ((event.ctrlKey || event.metaKey) && event.key === 'Home') {
+			event.preventDefault();
+			table.moveToGridStart();
+			return;
+		}
+
+		if ((event.ctrlKey || event.metaKey) && event.key === 'End') {
+			event.preventDefault();
+			table.moveToGridEnd();
+			return;
+		}
+
+		switch (event.key) {
+			case 'ArrowUp':
+				event.preventDefault();
+				table.moveFocus('up');
+				return;
+			case 'ArrowDown':
+				event.preventDefault();
+				table.moveFocus('down');
+				return;
+			case 'ArrowLeft':
+				event.preventDefault();
+				if (moveFocusIntoResizeHandle('left')) return;
+				table.moveFocus('left');
+				return;
+			case 'ArrowRight':
+				event.preventDefault();
+				if (moveFocusIntoResizeHandle('right')) return;
+				table.moveFocus('right');
+				return;
+			case 'Home':
+				event.preventDefault();
+				table.moveToRowStart();
+				return;
+			case 'End':
+				event.preventDefault();
+				table.moveToRowEnd();
+				return;
+		}
+	}
+</script>
+
+<th
+	bind:this={element}
+	role="columnheader"
+	class={className}
+	tabindex={headerTabIndex}
+	aria-colindex={!isHidden && visibleColumnIndex >= 0 ? visibleColumnIndex + 1 : undefined}
+	aria-hidden={isHidden ? true : undefined}
+	aria-sort={isSortable ? (sortDirection ?? 'none') : undefined}
+	data-focused={isFocused ? 'true' : undefined}
+	data-focus-visible={isFocusVisible ? 'true' : undefined}
+	data-focus-within={isFocusWithin ? 'true' : undefined}
+	data-focus-visible-within={isFocusVisibleWithin ? 'true' : undefined}
+	data-sortable={isSortable || undefined}
+	data-sort-direction={sortDirection}
+	data-column-index={visibleColumnIndex >= 0 ? visibleColumnIndex : undefined}
+	style:box-sizing="border-box"
+	style:position="relative"
+	style:overflow="visible"
+	style:width={columnWidthStyle}
+	style:min-width={columnMinWidth !== undefined ? `${columnMinWidth}px` : undefined}
+	style:max-width={columnMaxWidth !== undefined ? `${columnMaxWidth}px` : undefined}
+	style:display={isHidden ? 'none' : 'table-cell'}
+	onfocusin={handleFocusIn}
+	onfocusout={handleFocusOut}
+	onfocus={handleFocus}
+	onblur={handleBlur}
+	onclick={handleClick}
+	onmousedown={handleMouseDown}
+	onkeydown={handleKeyDown}
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</th>

package/dist/table/column-header-cell/table-column-header-cell.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TableColumnHeaderCellProps } from '../types.js';
+declare const TableColumnHeaderCell: import("svelte").Component<TableColumnHeaderCellProps, {}, "">;
+type TableColumnHeaderCell = ReturnType<typeof TableColumnHeaderCell>;
+export default TableColumnHeaderCell;

package/dist/table/column-resizer/README.md

@@ -0,0 +1,33 @@
+<!-- markdownlint-disable MD024 MD060 -->
+
+# Table.ColumnResizer
+
+## API reference
+
+### Table.ColumnResizer
+
+Name: `Table.ColumnResizer`
+Description: Interactive resize handle for the current `Table.Column`. It must be composed inside `Table.ColumnHeaderCell`, and it resizes the column that owns the surrounding `Table.Column` context.
+
+Public prop type: `TableColumnResizerProps`
+
+| Prop        | Type      | Default     | Description                                                          |
+| ----------- | --------- | ----------- | -------------------------------------------------------------------- |
+| `step`      | `number`  | `16`        | Keyboard resize delta in px for `ArrowLeft` / `ArrowRight`.          |
+| `shiftStep` | `number`  | `48`        | Larger keyboard resize delta in px for `Shift+ArrowLeft/ArrowRight`. |
+| `class`     | `string`  | `''`        | Class names for the resize handle element.                           |
+| `children`  | `Snippet` | `undefined` | Optional custom resize affordance content.                           |
+
+## Usage notes
+
+- `Table.ColumnResizer` must be used inside `Table.ColumnHeaderCell`.
+- Rendering `Table.ColumnResizer` inside `Table.ColumnHeaderCell` is enough to make the owning `Table.Column` resizable.
+- The handle resolves the active column from `Table.Column` context. It does not accept a separate `columnId` prop.
+- Width state lives in `Table.Root` through `columnWidths` / `defaultColumnWidths`.
+- Pointer resizing uses Pointer Events, so mouse, touch, and pen interactions share the same behavior.
+- Keyboard resizing uses an explicit resize mode: focus the handle, press `Enter` to capture resize, use `ArrowLeft` / `ArrowRight` (plus `Shift`) to adjust the width, `Home` to jump to the minimum width, and `End` to auto-fit the column to its content width, then press `Enter` again to commit the width and keep focus on the handle.
+- While keyboard resize mode is active, pressing `Escape` restores the starting width, exits resize mode, and returns focus to the owning header cell.
+- Keyboard resizing uses the same resize lifecycle callbacks as pointer resizing and announces committed widths through a polite live region.
+- During pointer drag, pressing `Escape` restores the starting width and cancels the resize interaction.
+- Double-click still auto-fits the column to its content width.
+- In RTL layouts, `ArrowLeft` and `ArrowRight` are inverted so the logical resize direction matches the visual layout.

package/dist/table/column-resizer/table-column-resizer-fixed-width-test.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth>>(new Map());
+</script>
+
+<Table.Root aria-label="Fixed width table" bind:columnWidths={currentColumnWidths}>
+	<Table.Header>
+		<Table.Row>
+			<Table.Column
+				id="email"
+				isRowHeader
+				textValue="Email"
+				width={220}
+				minWidth={220}
+				maxWidth={220}
+			>
+				<Table.ColumnHeaderCell>
+					<div class="flex items-center justify-between gap-3">
+						<span>Email</span>
+						<Table.ColumnResizer
+							data-testid="fixed-email-resizer"
+							class="inline-flex w-3 cursor-col-resize justify-center"
+						/>
+					</div>
+				</Table.ColumnHeaderCell>
+			</Table.Column>
+			<Table.Column id="role" textValue="Role" defaultWidth={180} minWidth={120}>
+				<Table.ColumnHeaderCell>
+					<div class="flex items-center justify-between gap-3">
+						<span>Role</span>
+						<Table.ColumnResizer
+							data-testid="role-resizer"
+							class="inline-flex w-3 cursor-col-resize justify-center"
+						/>
+					</div>
+				</Table.ColumnHeaderCell>
+			</Table.Column>
+		</Table.Row>
+	</Table.Header>
+
+	<Table.Body>
+		<Table.Row id="danilo">
+			<Table.Cell>danilo.fernandez+workspace-owner@example.com</Table.Cell>
+			<Table.Cell>Developer</Table.Cell>
+		</Table.Row>
+		<Table.Row id="zahra">
+			<Table.Cell>zahra@example.com</Table.Cell>
+			<Table.Cell>Admin</Table.Cell>
+		</Table.Row>
+	</Table.Body>
+</Table.Root>
+
+<output data-testid="column-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths))}</output
+>

package/dist/table/column-resizer/table-column-resizer-fixed-width-test.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TableColumnResizerFixedWidthTest: import("svelte").Component<Record<string, never>, {}, "">;
+type TableColumnResizerFixedWidthTest = ReturnType<typeof TableColumnResizerFixedWidthTest>;
+export default TableColumnResizerFixedWidthTest;

package/dist/table/column-resizer/table-column-resizer-freeze-layout-test.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth> | undefined>(undefined);
+</script>
+
+<div style="width: 640px;">
+	<Table.Root
+		aria-label="Freeze layout table"
+		bind:columnWidths={currentColumnWidths}
+		class="min-w-full border-collapse text-left"
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="email" isRowHeader textValue="Email" minWidth={80}>
+					<Table.ColumnHeaderCell>
+						<div class="flex items-center justify-between gap-3">
+							<span>Email address</span>
+							<Table.ColumnResizer
+								data-testid="freeze-email-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="group" textValue="Group" minWidth={80}>
+					<Table.ColumnHeaderCell>
+						<div class="flex items-center justify-between gap-3">
+							<span>Group membership</span>
+							<Table.ColumnResizer
+								data-testid="freeze-group-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+			</Table.Row>
+		</Table.Header>
+
+		<Table.Body>
+			<Table.Row id="danilo">
+				<Table.Cell>danilo@example.com</Table.Cell>
+				<Table.Cell>Developer relations</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<output data-testid="freeze-column-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

package/dist/table/column-resizer/table-column-resizer-freeze-layout-test.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TableColumnResizerFreezeLayoutTest: import("svelte").Component<Record<string, never>, {}, "">;
+type TableColumnResizerFreezeLayoutTest = ReturnType<typeof TableColumnResizerFreezeLayoutTest>;
+export default TableColumnResizerFreezeLayoutTest;