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

package/dist/table/column-resizer/table-column-resizer-narrow-min-width-test.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth> | undefined>(undefined);
+</script>
+
+<div data-testid="narrow-min-width-container" style="width: 240px; overflow-x: auto;">
+	<Table.Root
+		aria-label="Narrow min width table"
+		bind:columnWidths={currentColumnWidths}
+		class="min-w-full border-collapse text-left"
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="request" isRowHeader textValue="Request" minWidth={75}>
+					<Table.ColumnHeaderCell data-testid="narrow-request-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Request</span>
+							<Table.ColumnResizer
+								data-testid="narrow-request-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="requester" textValue="Requester" minWidth={140}>
+					<Table.ColumnHeaderCell data-testid="narrow-requester-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Requester</span>
+							<Table.ColumnResizer class="inline-flex w-3 cursor-col-resize justify-center" />
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="area" textValue="Area">
+					<Table.ColumnHeaderCell data-testid="narrow-area-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Area</span>
+							<Table.ColumnResizer class="inline-flex w-3 cursor-col-resize justify-center" />
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="status" textValue="Status">
+					<Table.ColumnHeaderCell data-testid="narrow-status-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Status</span>
+							<Table.ColumnResizer class="inline-flex w-3 cursor-col-resize justify-center" />
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="total" textValue="Total">
+					<Table.ColumnHeaderCell data-testid="narrow-total-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Total</span>
+							<Table.ColumnResizer class="inline-flex w-3 cursor-col-resize justify-center" />
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+			</Table.Row>
+		</Table.Header>
+
+		<Table.Body>
+			<Table.Row id="pr-001">
+				<Table.Cell>PR-001</Table.Cell>
+				<Table.Cell>Ana Gomez</Table.Cell>
+				<Table.Cell>Ops</Table.Cell>
+				<Table.Cell>Pending</Table.Cell>
+				<Table.Cell>$1,520</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<output data-testid="narrow-min-width-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

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

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

package/dist/table/column-resizer/table-column-resizer-overflow-test.svelte

@@ -0,0 +1,64 @@
+<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; overflow-x: auto;">
+	<Table.Root
+		aria-label="Resizable overflow table"
+		bind:columnWidths={currentColumnWidths}
+		class="min-w-full border-collapse text-left"
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="name" isRowHeader textValue="Name" width={240}>
+					<Table.ColumnHeaderCell data-testid="overflow-name-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Name</span>
+							<Table.ColumnResizer
+								data-testid="overflow-name-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="region" textValue="Region" defaultWidth={180} minWidth={140}>
+					<Table.ColumnHeaderCell data-testid="overflow-region-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Region</span>
+							<Table.ColumnResizer
+								data-testid="overflow-region-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="plan" textValue="Plan">
+					<Table.ColumnHeaderCell data-testid="overflow-plan-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Plan</span>
+							<Table.ColumnResizer
+								data-testid="overflow-plan-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</Table.Cell>
+				<Table.Cell>Buenos Aires</Table.Cell>
+				<Table.Cell>Enterprise</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<output data-testid="overflow-column-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

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

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

package/dist/table/column-resizer/table-column-resizer-padded-container-test.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth> | undefined>(undefined);
+</script>
+
+<div
+	data-testid="padded-relative-container"
+	style="width: 640px; box-sizing: border-box; overflow-x: auto; padding: 12px; border: 1px solid transparent;"
+>
+	<Table.Root
+		aria-label="Padded relative resize table"
+		bind:columnWidths={currentColumnWidths}
+		class="min-w-full border-collapse text-left"
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="name" isRowHeader textValue="Name">
+					<Table.ColumnHeaderCell data-testid="padded-name-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Name</span>
+							<Table.ColumnResizer
+								data-testid="padded-name-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="region" textValue="Region" defaultWidth={180} minWidth={140}>
+					<Table.ColumnHeaderCell data-testid="padded-region-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Region</span>
+							<Table.ColumnResizer
+								data-testid="padded-region-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="plan" textValue="Plan">
+					<Table.ColumnHeaderCell data-testid="padded-plan-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Plan</span>
+							<Table.ColumnResizer
+								data-testid="padded-plan-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</Table.Cell>
+				<Table.Cell>Buenos Aires</Table.Cell>
+				<Table.Cell>Enterprise</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<output data-testid="padded-relative-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

package/dist/table/column-resizer/table-column-resizer-padded-container-test.svelte.d.ts

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

package/dist/table/column-resizer/table-column-resizer-sandbox-overflow-test.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth> | undefined>(undefined);
+	const rows = Array.from({ length: 24 }, (_, index) => ({
+		id: `row-${index + 1}`,
+		request: `PR-${String(index + 1).padStart(4, '0')}`,
+		requester: ['Ana Gomez', 'Lucas Perez', 'Mara Silva', 'Juan Torres'][index % 4],
+		area: ['Production', 'Logistics', 'Maintenance', 'Quality'][index % 4],
+		status: ['Pending', 'Review', 'Approved'][index % 3],
+		priority: ['Low', 'Medium', 'High'][index % 3],
+		total: 850 + index * 137
+	}));
+</script>
+
+<div
+	data-testid="sandbox-overflow-container"
+	style="width: 920px; max-height: 320px; overflow: auto;"
+>
+	<Table.Root
+		aria-label="Sandbox overflow table"
+		selectionMode="multiple"
+		bind:columnWidths={currentColumnWidths}
+		class="min-w-full border-collapse text-left"
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="selection" textValue="Selection" width={44}>
+					<Table.ColumnHeaderCell data-testid="sandbox-selection-header-cell">
+						<Table.Checkbox />
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="request" textValue="Request" isRowHeader defaultWidth={350}>
+					<Table.ColumnHeaderCell data-testid="sandbox-request-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Request</span>
+							<Table.ColumnResizer
+								data-testid="sandbox-request-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="requester" textValue="Requester">
+					<Table.ColumnHeaderCell>Requester</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="area" textValue="Area">
+					<Table.ColumnHeaderCell>Area</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="status" textValue="Status">
+					<Table.ColumnHeaderCell>Status</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="priority" textValue="Priority">
+					<Table.ColumnHeaderCell>Priority</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="total" textValue="Total">
+					<Table.ColumnHeaderCell data-testid="sandbox-total-header-cell">
+						<div class="flex w-full justify-end">Total</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+			</Table.Row>
+		</Table.Header>
+
+		<Table.Body>
+			{#each rows as row (row.id)}
+				<Table.Row id={row.id}>
+					<Table.Cell>
+						<Table.Checkbox />
+					</Table.Cell>
+					<Table.Cell>{row.request}</Table.Cell>
+					<Table.Cell>{row.requester}</Table.Cell>
+					<Table.Cell>{row.area}</Table.Cell>
+					<Table.Cell>{row.status}</Table.Cell>
+					<Table.Cell>{row.priority}</Table.Cell>
+					<Table.Cell>
+						<div class="flex w-full justify-end">${row.total.toLocaleString()}</div>
+					</Table.Cell>
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<output data-testid="sandbox-overflow-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

package/dist/table/column-resizer/table-column-resizer-sandbox-overflow-test.svelte.d.ts

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

package/dist/table/column-resizer/table-column-resizer-selection-column-test.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth> | undefined>(undefined);
+
+	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;';
+</script>
+
+<div style="width: 760px;">
+	<Table.Root
+		aria-label="Resizable table with selection column"
+		selectionMode="multiple"
+		bind:columnWidths={currentColumnWidths}
+		class="min-w-full border-collapse text-left"
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="selection" textValue="Selection" width={64} minWidth={64} maxWidth={64}>
+					<Table.ColumnHeaderCell data-testid="selection-header-cell">
+						<Table.Checkbox style={checkboxStyle} data-testid="selection-header-checkbox">
+							<Table.CheckboxIndicator style={indicatorStyle}>
+								<svg aria-hidden="true" viewBox="0 0 16 16" style="height:14px;width:14px;">
+									<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" minWidth={120}>
+					<Table.ColumnHeaderCell>
+						<div class="flex items-center justify-between gap-3">
+							<span>Email</span>
+							<Table.ColumnResizer
+								data-testid="selection-email-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="group" textValue="Group" minWidth={100} maxWidth={260}>
+					<Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
+				</Table.Column>
+			</Table.Row>
+		</Table.Header>
+
+		<Table.Body>
+			<Table.Row id="danilo">
+				<Table.Cell>
+					<Table.Checkbox style={checkboxStyle} data-testid="selection-row-checkbox">
+						<Table.CheckboxIndicator style={indicatorStyle}>
+							<svg aria-hidden="true" viewBox="0 0 16 16" style="height:14px;width:14px;">
+								<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>danilo@example.com</Table.Cell>
+				<Table.Cell>Developer</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<output data-testid="selection-column-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

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

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

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

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth, TableSortDescriptor } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth>>(
+		new Map([
+			['email', 200],
+			['group', 160]
+		])
+	);
+	let currentSortDescriptor = $state<TableSortDescriptor | undefined>(undefined);
+	let resizeStartColumnId = $state('');
+	let resizeEndWidths = $state<Record<string, TableColumnWidth>>({});
+</script>
+
+<Table.Root
+	aria-label="Resizable users table"
+	bind:columnWidths={currentColumnWidths}
+	bind:sortDescriptor={currentSortDescriptor}
+	onColumnResizeStart={(columnId) => {
+		resizeStartColumnId = columnId;
+	}}
+	onColumnResizeEnd={(widths) => {
+		resizeEndWidths = Object.fromEntries(widths);
+	}}
+>
+	<Table.Header>
+		<Table.Row>
+			<Table.Column id="email" isRowHeader textValue="Email" minWidth={120}>
+				<Table.ColumnHeaderCell data-testid="email-header-cell">
+					<div class="flex items-center justify-between gap-3">
+						<span>Email</span>
+						<Table.ColumnResizer
+							data-testid="email-resizer"
+							class="inline-flex w-3 cursor-col-resize justify-center"
+						/>
+					</div>
+				</Table.ColumnHeaderCell>
+			</Table.Column>
+			<Table.Column id="group" textValue="Group" minWidth={100} maxWidth={260}>
+				<Table.ColumnHeaderCell data-testid="group-header-cell">
+					<div class="flex items-center justify-between gap-3">
+						<Table.SortTrigger>
+							<button type="button" data-testid="group-sort-trigger">Group</button>
+						</Table.SortTrigger>
+						<Table.ColumnResizer
+							data-testid="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.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
+>
+<output data-testid="sort-descriptor"
+	>{currentSortDescriptor
+		? `${currentSortDescriptor.column}:${currentSortDescriptor.direction}`
+		: ''}</output
+>
+<output data-testid="resize-start-column">{resizeStartColumnId}</output>
+<output data-testid="resize-end-widths">{JSON.stringify(resizeEndWidths)}</output>

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

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

package/dist/table/column-resizer/table-column-resizer-three-column-relative-test.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth> | undefined>(undefined);
+</script>
+
+<div data-testid="three-column-relative-container" style="width: 640px; overflow-x: auto;">
+	<Table.Root
+		aria-label="Three column relative resize table"
+		bind:columnWidths={currentColumnWidths}
+		class="min-w-full border-collapse text-left"
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="name" isRowHeader textValue="Name">
+					<Table.ColumnHeaderCell data-testid="three-column-name-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Name</span>
+							<Table.ColumnResizer
+								data-testid="three-column-name-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="region" textValue="Region" defaultWidth={180} minWidth={140}>
+					<Table.ColumnHeaderCell data-testid="three-column-region-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Region</span>
+							<Table.ColumnResizer
+								data-testid="three-column-region-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="plan" textValue="Plan">
+					<Table.ColumnHeaderCell data-testid="three-column-plan-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Plan</span>
+							<Table.ColumnResizer
+								data-testid="three-column-plan-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</Table.Cell>
+				<Table.Cell>Buenos Aires</Table.Cell>
+				<Table.Cell>Enterprise</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<output data-testid="three-column-relative-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

package/dist/table/column-resizer/table-column-resizer-three-column-relative-test.svelte.d.ts

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