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

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

@@ -0,0 +1,170 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type {
+		TableDisabledBehavior,
+		TableSelectionBehavior,
+		TableSelectionKey,
+		TableSelectionMode
+	} from '../root/context';
+	import type { TableBodyVirtualizer } from '../types.js';
+
+	type DemoRow = {
+		id: string;
+		email: string;
+		group: string;
+	};
+
+	const defaultRows: DemoRow[] = [
+		{ id: 'danilo', email: 'danilo@example.com', group: 'Developer' },
+		{ id: 'zahra', email: 'zahra@example.com', group: 'Admin' },
+		{ id: 'jasper', email: 'jasper@example.com', group: 'Developer' }
+	];
+
+	const checkboxStyle =
+		'display:inline-flex;height:20px;width:20px;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:4px;';
+	const indicatorStyle =
+		'display:inline-flex;height:14px;width:14px;align-items:center;justify-content:center;';
+
+	type CheckboxTestProps = {
+		rows?: DemoRow[];
+		selectionMode?: TableSelectionMode;
+		selectionBehavior?: TableSelectionBehavior;
+		disabledBehavior?: TableDisabledBehavior;
+		disallowEmptySelection?: boolean;
+		disabledKeys?: Iterable<TableSelectionKey>;
+		initialSelectedKeys?: Iterable<TableSelectionKey>;
+		useItemsMode?: boolean;
+		virtualizer?: TableBodyVirtualizer;
+		containerHeight?: string;
+	};
+
+	let {
+		rows = defaultRows,
+		selectionMode = 'multiple',
+		selectionBehavior = 'toggle',
+		disabledBehavior = 'all',
+		disallowEmptySelection = false,
+		disabledKeys,
+		initialSelectedKeys,
+		useItemsMode = false,
+		virtualizer,
+		containerHeight = '160px'
+	}: CheckboxTestProps = $props();
+
+	let currentSelectedKeys = $state<Set<TableSelectionKey>>(
+		new Set((() => initialSelectedKeys ?? [])())
+	);
+</script>
+
+<div style={useItemsMode ? `max-height:${containerHeight};overflow:auto;` : undefined}>
+	<Table.Root
+		aria-label="Users table"
+		{selectionMode}
+		{selectionBehavior}
+		{disabledBehavior}
+		{disallowEmptySelection}
+		bind:selectedKeys={currentSelectedKeys}
+		{disabledKeys}
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="selection" textValue="Selection">
+					<Table.ColumnHeaderCell data-testid="selection-header-cell">
+						<Table.Checkbox style={checkboxStyle} data-testid="header-checkbox">
+							<Table.CheckboxIndicator style={indicatorStyle}>
+								<svg aria-hidden="true" viewBox="0 0 16 16" class="h-3.5 w-3.5">
+									<path
+										d="M3.75 8.5 6.75 11.5 12.25 5.5"
+										fill="none"
+										stroke="currentColor"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+									/>
+								</svg>
+							</Table.CheckboxIndicator>
+						</Table.Checkbox>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="email" isRowHeader textValue="Email">
+					<Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="group" textValue="Group">
+					<Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
+				</Table.Column>
+			</Table.Row>
+		</Table.Header>
+
+		{#if useItemsMode}
+			<Table.Body items={rows} {virtualizer}>
+				{#snippet children(row)}
+					<Table.Row
+						id={row.id}
+						isDisabled={disabledKeys ? Array.from(disabledKeys).includes(row.id) : false}
+					>
+						<Table.Cell data-testid={`selection-cell-${row.id}`}>
+							<Table.Checkbox style={checkboxStyle} data-testid={`row-checkbox-${row.id}`}>
+								<Table.CheckboxIndicator style={indicatorStyle}>
+									<svg aria-hidden="true" viewBox="0 0 16 16" class="h-3.5 w-3.5">
+										<path
+											d="M3.75 8.5 6.75 11.5 12.25 5.5"
+											fill="none"
+											stroke="currentColor"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+										/>
+									</svg>
+								</Table.CheckboxIndicator>
+							</Table.Checkbox>
+						</Table.Cell>
+						<Table.Cell data-testid={`email-cell-${row.id}`}>{row.email}</Table.Cell>
+						<Table.Cell data-testid={`group-cell-${row.id}`}>{row.group}</Table.Cell>
+					</Table.Row>
+				{/snippet}
+				{#snippet empty()}
+					<Table.EmptyState>No users found.</Table.EmptyState>
+				{/snippet}
+			</Table.Body>
+		{:else}
+			<Table.Body>
+				{#each rows as row (row.id)}
+					<Table.Row
+						id={row.id}
+						isDisabled={disabledKeys ? Array.from(disabledKeys).includes(row.id) : false}
+					>
+						<Table.Cell data-testid={`selection-cell-${row.id}`}>
+							<Table.Checkbox style={checkboxStyle} data-testid={`row-checkbox-${row.id}`}>
+								<Table.CheckboxIndicator style={indicatorStyle}>
+									<svg aria-hidden="true" viewBox="0 0 16 16" class="h-3.5 w-3.5">
+										<path
+											d="M3.75 8.5 6.75 11.5 12.25 5.5"
+											fill="none"
+											stroke="currentColor"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+										/>
+									</svg>
+								</Table.CheckboxIndicator>
+							</Table.Checkbox>
+						</Table.Cell>
+						<Table.Cell data-testid={`email-cell-${row.id}`}>{row.email}</Table.Cell>
+						<Table.Cell data-testid={`group-cell-${row.id}`}>{row.group}</Table.Cell>
+					</Table.Row>
+				{/each}
+				<Table.EmptyState>No users found.</Table.EmptyState>
+			</Table.Body>
+		{/if}
+
+		<Table.Footer>
+			<Table.Row>
+				<Table.Cell />
+				<Table.Cell>Total</Table.Cell>
+				<Table.Cell>{rows.length} users</Table.Cell>
+			</Table.Row>
+		</Table.Footer>
+	</Table.Root>
+</div>
+
+<output data-testid="selected-keys">{JSON.stringify([...currentSelectedKeys])}</output>

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

@@ -0,0 +1,22 @@
+import type { TableDisabledBehavior, TableSelectionBehavior, TableSelectionKey, TableSelectionMode } from '../root/context';
+import type { TableBodyVirtualizer } from '../types.js';
+type DemoRow = {
+    id: string;
+    email: string;
+    group: string;
+};
+type CheckboxTestProps = {
+    rows?: DemoRow[];
+    selectionMode?: TableSelectionMode;
+    selectionBehavior?: TableSelectionBehavior;
+    disabledBehavior?: TableDisabledBehavior;
+    disallowEmptySelection?: boolean;
+    disabledKeys?: Iterable<TableSelectionKey>;
+    initialSelectedKeys?: Iterable<TableSelectionKey>;
+    useItemsMode?: boolean;
+    virtualizer?: TableBodyVirtualizer;
+    containerHeight?: string;
+};
+declare const TableCheckboxTest: import("svelte").Component<CheckboxTestProps, {}, "">;
+type TableCheckboxTest = ReturnType<typeof TableCheckboxTest>;
+export default TableCheckboxTest;

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

@@ -0,0 +1,235 @@
+<script lang="ts">
+	import { Checkbox } from '../../checkbox';
+	import {
+		useTableCellContext,
+		useTableContext,
+		useTableRowContext,
+		useTableSectionContext
+	} from '../root/context';
+	import type { TableCheckboxProps } from '../types.js';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
+
+	let {
+		id,
+		title,
+		children,
+		class: className = '',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		...restProps
+	}: TableCheckboxProps = $props();
+
+	const table = useTableContext();
+	const section = useTableSectionContext();
+	const row = useTableRowContext();
+	const cell = useTableCellContext();
+	const selectionVersion = table.selectionVersion;
+	const layoutVersion = table.layoutVersion;
+
+	let checkboxElement = $state<HTMLSpanElement | null>(null);
+
+	const isVisible = $derived.by(() => {
+		if (table.selectionMode === 'none') return false;
+		if (section.section === 'footer') return false;
+		if (section.section === 'header') return table.selectionMode === 'multiple';
+		return section.section === 'body';
+	});
+
+	const checkboxState = $derived.by(() => {
+		void $selectionVersion;
+		void $layoutVersion;
+		return section.section === 'header' ? table.getSelectionCheckboxState() : 'none';
+	});
+
+	const isChecked = $derived.by(() => {
+		void $selectionVersion;
+		if (section.section === 'header') {
+			return checkboxState === 'all';
+		}
+		return section.section === 'body' ? table.isRowSelected(row.rowId) : false;
+	});
+
+	const isIndeterminate = $derived(section.section === 'header' && checkboxState === 'some');
+
+	const isDisabled = $derived.by(() => {
+		void $selectionVersion;
+		void $layoutVersion;
+		if (!isVisible) return true;
+		if (section.section === 'header') {
+			return !table.hasSelectableRows();
+		}
+		if (section.section === 'body') {
+			return table.isRowSelectionDisabled(row.rowId, row.isDisabled) || row.rowId === undefined;
+		}
+		return true;
+	});
+
+	const tabIndex = $derived.by(() => {
+		if (!isVisible || isDisabled) return undefined;
+		return table.isCellTabStop(cell.cellKey) ? 0 : -1;
+	});
+
+	const accessibleLabel = $derived.by(() => {
+		if (ariaLabel) return ariaLabel;
+		if (ariaLabelledby) return undefined;
+		if (section.section === 'header') return 'Select all rows';
+		return row.rowId !== undefined ? `Select row ${String(row.rowId)}` : 'Select row';
+	});
+
+	function getCheckboxRootElement() {
+		return checkboxElement ?? undefined;
+	}
+
+	$effect(() => {
+		if (!isVisible || isDisabled) {
+			cell.unregisterFocusDelegate();
+			return;
+		}
+
+		cell.registerFocusDelegate(() => getCheckboxRootElement());
+
+		return () => {
+			cell.unregisterFocusDelegate();
+		};
+	});
+
+	function applySelection(nextChecked: boolean) {
+		if (isDisabled) return;
+
+		if (section.section === 'header') {
+			if (nextChecked) {
+				table.selectAllRows();
+			} else {
+				table.deselectAllRows();
+			}
+			return;
+		}
+
+		if (section.section === 'body') {
+			table.toggleRowSelection(row.rowId);
+		}
+	}
+
+	function handleFocusIn(event: FocusEvent) {
+		const target = event.target instanceof HTMLElement ? event.target : getCheckboxRootElement();
+		table.setFocusedCell(cell.cellKey);
+		table.setFocusVisible(shouldShowFocusVisible(target ?? null));
+	}
+
+	function handleMouseDown(event: MouseEvent) {
+		trackInteractionModality(event, getCheckboxRootElement() ?? null);
+		table.setFocusVisible(false);
+		event.stopPropagation();
+	}
+
+	function handleClick(event: MouseEvent) {
+		event.stopPropagation();
+		if (!isVisible || isDisabled) return;
+		event.preventDefault();
+		const nextChecked = section.section === 'header' ? checkboxState !== 'all' : !isChecked;
+		applySelection(nextChecked);
+		table.focusCellByKey(cell.cellKey);
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		trackInteractionModality(event, getCheckboxRootElement() ?? null);
+
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
+			if (table.selectionMode === 'multiple') {
+				event.preventDefault();
+				event.stopPropagation();
+				table.selectAllRows();
+			}
+			return;
+		}
+
+		if ((event.ctrlKey || event.metaKey) && event.key === 'Home') {
+			event.preventDefault();
+			event.stopPropagation();
+			table.moveToGridStart();
+			return;
+		}
+
+		if ((event.ctrlKey || event.metaKey) && event.key === 'End') {
+			event.preventDefault();
+			event.stopPropagation();
+			table.moveToGridEnd();
+			return;
+		}
+
+		switch (event.key) {
+			case 'ArrowUp':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveFocus('up', {
+					shiftKey: event.shiftKey,
+					ctrlKey: event.ctrlKey,
+					metaKey: event.metaKey,
+					altKey: event.altKey
+				});
+				return;
+			case 'ArrowDown':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveFocus('down', {
+					shiftKey: event.shiftKey,
+					ctrlKey: event.ctrlKey,
+					metaKey: event.metaKey,
+					altKey: event.altKey
+				});
+				return;
+			case 'ArrowLeft':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveFocus('left');
+				return;
+			case 'ArrowRight':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveFocus('right');
+				return;
+			case 'Home':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveToRowStart();
+				return;
+			case 'End':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveToRowEnd();
+				return;
+			case 'Enter':
+			case ' ':
+				event.stopPropagation();
+				if (event.repeat || isDisabled) return;
+				return;
+		}
+	}
+</script>
+
+{#if isVisible}
+	<Checkbox.Root
+		{id}
+		bind:element={checkboxElement}
+		{isChecked}
+		{isIndeterminate}
+		{isDisabled}
+		onCheckedChange={applySelection}
+		{title}
+		aria-label={accessibleLabel}
+		aria-labelledby={ariaLabelledby}
+		data-table-checkbox="true"
+		tabindex={tabIndex}
+		onclick={handleClick}
+		onkeydown={handleKeyDown}
+		onfocus={handleFocusIn}
+		onmousedown={handleMouseDown}
+		class={className}
+		{...restProps}
+	>
+		{@render children?.()}
+	</Checkbox.Root>
+{/if}

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

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

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. |