fluentui-svelte 0.2.0 → 0.3.0

package/dist/components/table/table-cell-actions.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { TableCellActionsProps } from './types.ts';
+/**
+ * Actions pinned to the end of a cell, revealed while the row is hovered or holds the focus.
+ *
+ * - Usage:
+ * ```tsx
+ * <TableCell>
+ * 	<TableCellLayout>Meeting notes</TableCellLayout>
+ * 	<TableCellActions>
+ * 		<Button appearance="subtle" icon={EditRegular} aria-label="Edit" />
+ * 	</TableCellActions>
+ * </TableCell>
+ * ```
+ */
+declare const TableCellActions: import("svelte").Component<TableCellActionsProps, {}, "ref">;
+type TableCellActions = ReturnType<typeof TableCellActions>;
+export default TableCellActions;

package/dist/components/table/table-cell-layout.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { RenderSoC } from '../../internal/index.js';
+	import type { TableCellLayoutProps } from './types.js';
+
+	let {
+		ref = $bindable(),
+		media: Media,
+		description,
+		appearance,
+		truncate = false,
+		class: classes,
+		children,
+		...attributes
+	}: TableCellLayoutProps = $props();
+</script>
+
+<!--
+	@component
+	Lays a cell out as media, main content and an optional description.
+
+	- Usage:
+	```tsx
+	<TableCell>
+		<TableCellLayout media={DocumentRegular} description="7h ago">Meeting notes</TableCellLayout>
+	</TableCell>
+	```
+-->
+<div bind:this={ref} class={['fs-table-cell-layout', appearance, { truncate }, classes]} {...attributes}>
+	{#if Media}
+		<span class="media">
+			<RenderSoC SoC={Media} args={{ class: 'fs-table-cell-media' }} />
+		</span>
+	{/if}
+	<span class="content">
+		<span class="main">{@render children?.()}</span>
+		{#if description}
+			<small class="description">{description}</small>
+		{/if}
+	</span>
+</div>
+
+<style>
+	.fs-table-cell-layout {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		min-width: 0;
+		& .media {
+			display: inline-flex;
+			align-items: center;
+			flex-shrink: 0;
+			color: var(--fs-text-secondary);
+			& :global(svg) {
+				width: 1.25rem;
+				height: 1.25rem;
+				fill: currentColor;
+			}
+		}
+		& .content {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			min-width: 0;
+		}
+		& .description {
+			font-size: var(--fs-caption2-font-size);
+			line-height: var(--fs-caption2-line-height);
+			color: var(--fs-text-secondary);
+		}
+		&.primary {
+			& .main {
+				font-weight: 600;
+			}
+			& .media :global(svg) {
+				width: 1.5rem;
+				height: 1.5rem;
+			}
+		}
+		&.truncate {
+			& .main,
+			& .description {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		}
+	}
+</style>

package/dist/components/table/table-cell-layout.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { TableCellLayoutProps } from './types.ts';
+/**
+ * Lays a cell out as media, main content and an optional description.
+ *
+ * - Usage:
+ * ```tsx
+ * <TableCell>
+ * 	<TableCellLayout media={DocumentRegular} description="7h ago">Meeting notes</TableCellLayout>
+ * </TableCell>
+ * ```
+ */
+declare const TableCellLayout: import("svelte").Component<TableCellLayoutProps, {}, "ref">;
+type TableCellLayout = ReturnType<typeof TableCellLayout>;
+export default TableCellLayout;

package/dist/components/table/table-cell.svelte

@@ -0,0 +1,74 @@
+<script lang="ts" generics="Tag extends 'td' | 'div' = 'td'">
+	import { colIndex, focusGroup, getTag, requireTableContext } from './table.svelte.js';
+	import type { TableCellProps, TableDOM } from './types.js';
+
+	let {
+		as,
+		ref = $bindable(),
+		focusMode = 'cell',
+		class: classes,
+		children,
+		...attributes
+	}: TableCellProps<Tag> = $props();
+
+	const context = requireTableContext();
+
+	const noNativeElements = $derived(context.config.noNativeElements);
+
+	const _as = $derived(getTag(as, 'td', noNativeElements));
+
+	/** A `grid` has no `cell`, only `gridcell`, so arrow navigation renames what the cell reports. */
+	const enableTabspot = $derived(context.config.enableTabspot);
+
+	const resizableColumns = $derived(context.config.resizableColumns);
+
+	/** Set by the attachment, because only the DOM knows which column a cell ended up in. */
+	let index = $state(-1);
+
+	/**
+	 * A fixed layout takes its columns from the header row alone, so a native cell needs no width of
+	 * its own. A flex row has no columns to speak of, so every cell there carries one.
+	 */
+	const width = $derived(
+		!resizableColumns || _as !== 'div' || index < 0 ? undefined : context.methods.getColumnWidth(index)
+	);
+</script>
+
+<svelte:element
+	this={_as}
+	bind:this={ref as TableDOM[Tag]}
+	role={enableTabspot ? 'gridcell' : _as === 'div' ? 'cell' : undefined}
+	data-fs-focus-mode={enableTabspot ? focusMode : undefined}
+	class={['fs-table-cell', { flex: _as === 'div', sized: width !== undefined }, classes]}
+	style:width={width === undefined ? undefined : `${width}px`}
+	{@attach enableTabspot || resizableColumns ? colIndex((i) => (index = i)) : undefined}
+	{@attach enableTabspot && focusMode === 'group' ? focusGroup : undefined}
+	{...attributes}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.fs-table-cell {
+		height: var(--fs-table-row-height);
+		padding: 0 var(--fs-table-cell-padding);
+		vertical-align: middle;
+		/* The anchor `TableCellActions` pins itself to. */
+		position: relative;
+		&:focus-visible {
+			outline: 0.125rem solid var(--fs-focus-stroke-outer);
+			outline-offset: -0.125rem;
+		}
+		&.flex {
+			display: flex;
+			align-items: center;
+			flex: 1 1 0;
+			min-width: 0;
+		}
+		/* A resized column states its width, so it must not also stretch to fill the row. */
+		&.sized {
+			flex: 0 0 auto;
+			overflow: hidden;
+		}
+	}
+</style>

package/dist/components/table/table-cell.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { TableCellProps } from './types.ts';
+declare function $$render<Tag extends 'td' | 'div' = 'td'>(): {
+    props: TableCellProps<Tag>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Tag extends 'td' | 'div' = 'td'> {
+    props(): ReturnType<typeof $$render<Tag>>['props'];
+    events(): ReturnType<typeof $$render<Tag>>['events'];
+    slots(): ReturnType<typeof $$render<Tag>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Tag extends 'td' | 'div' = 'td'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Tag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Tag>['props']>, ReturnType<__sveltets_Render<Tag>['events']>, ReturnType<__sveltets_Render<Tag>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Tag>['bindings']>;
+    } & ReturnType<__sveltets_Render<Tag>['exports']>;
+    <Tag extends 'td' | 'div' = 'td'>(internal: unknown, props: ReturnType<__sveltets_Render<Tag>['props']> & {}): ReturnType<__sveltets_Render<Tag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableCell: $$IsomorphicComponent;
+type TableCell<Tag extends 'td' | 'div' = 'td'> = InstanceType<typeof TableCell<Tag>>;
+export default TableCell;

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

@@ -0,0 +1,257 @@
+<script lang="ts" generics="Tag extends 'th' | 'div' = 'th'">
+	import ArrowUpRegular from 'fluentui-icons-svelte/ArrowUpRegular.svelte';
+	import { on } from 'svelte/events';
+	import { RenderSoC } from '../../internal/index.js';
+	import { colIndex, focusGroup, getTag, requireTableContext } from './table.svelte.js';
+	import type { TableDOM, TableHeaderCellProps } from './types.js';
+
+	let {
+		as,
+		ref = $bindable(),
+		sortable,
+		sortDirection,
+		sortIcon,
+		aside,
+		focusMode,
+		resizable,
+		resizeLabel = 'Resize column',
+		class: classes,
+		children,
+		...attributes
+	}: TableHeaderCellProps<Tag> = $props();
+
+	const context = requireTableContext();
+
+	const noNativeElements = $derived(context.config.noNativeElements);
+
+	const _as = $derived(getTag(as, 'th', noNativeElements));
+
+	/** A cell opts in on its own, or inherits the choice the table made for every column. */
+	const _sortable = $derived(sortable ?? context.config.sortable);
+
+	const enableTabspot = $derived(context.config.enableTabspot);
+
+	/** A column opts in on its own, or inherits the choice the table made for every column. */
+	const _resizable = $derived(resizable ?? context.config.resizableColumns);
+
+	/**
+	 * A resizable header holds a handle, which the arrows would otherwise skip straight past: the
+	 * grid moves between cells, not into them. Entering the cell is what puts the handle in reach.
+	 */
+	const _focusMode = $derived(focusMode ?? (_resizable && enableTabspot ? 'group' : 'cell'));
+
+	/** Set by the attachment, because only the DOM knows which column a cell ended up in. */
+	let index = $state(-1);
+
+	const width = $derived(index < 0 ? undefined : context.methods.getColumnWidth(index));
+
+	/** Pointer drags and arrow presses both land here, so the clamp lives in one place. */
+	const resizeTo = (e: Event, next: number) => context.methods.resizeColumn(e, index, next);
+
+	const startDrag = (e: PointerEvent) => {
+		// The handle sits inside the sort button's cell, and a drag is not a click on the column.
+		e.preventDefault();
+		e.stopPropagation();
+
+		const handle = e.currentTarget as HTMLElement;
+		const origin = e.clientX;
+		const start = width ?? handle.closest<HTMLElement>('.fs-table-header-cell')!.getBoundingClientRect().width;
+
+		handle.setPointerCapture(e.pointerId);
+
+		/** Filled right below, so ending the drag can unhook every listener it started. */
+		let stop: (() => void)[] = [];
+
+		const onmove = (move: PointerEvent) => resizeTo(move, start + move.clientX - origin);
+		const onup = () => {
+			for (const off of stop) off();
+			stop = [];
+		};
+
+		stop = [on(handle, 'pointermove', onmove), on(handle, 'pointerup', onup), on(handle, 'pointercancel', onup)];
+	};
+
+	/** One nudge per press, the way the WAI window splitter pattern describes. */
+	const STEP = 16;
+
+	const onHandleKeydown = (e: KeyboardEvent) => {
+		if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+		const handle = e.currentTarget as HTMLElement;
+		const current = width ?? handle.closest<HTMLElement>('.fs-table-header-cell')!.getBoundingClientRect().width;
+		// The arrows belong to the handle here, not to the grid underneath it.
+		e.preventDefault();
+		e.stopPropagation();
+		resizeTo(e, current + (e.key === 'ArrowRight' ? STEP : -STEP));
+	};
+</script>
+
+<svelte:element
+	this={_as}
+	bind:this={ref as TableDOM[Tag]}
+	role={_as === 'div' ? 'columnheader' : undefined}
+	scope={_as === 'th' ? 'col' : undefined}
+	aria-sort={sortDirection}
+	data-fs-focus-mode={enableTabspot ? _focusMode : undefined}
+	class={['fs-table-header-cell', { flex: _as === 'div', sortable: _sortable, resizable: _resizable }, classes]}
+	style:width={width === undefined ? undefined : `${width}px`}
+	{@attach enableTabspot || _resizable ? colIndex((i) => (index = i)) : undefined}
+	{@attach enableTabspot && _focusMode === 'group' ? focusGroup : undefined}
+	{...attributes}
+>
+	<span class="inner">
+		{#if _sortable}
+			<button class="sort-button" type="button">
+				<span class="content">{@render children?.()}</span>
+				<span class={['sort-icon', sortDirection]} aria-hidden="true">
+					<RenderSoC SoC={sortIcon ?? ArrowUpRegular} args={{ class: 'fs-table-sort-icon' }} />
+				</span>
+			</button>
+		{:else}
+			<span class="content">{@render children?.()}</span>
+		{/if}
+		{#if aside}
+			<span class="aside">
+				<RenderSoC SoC={aside} args={{ class: 'fs-table-header-cell-aside' }} />
+			</span>
+		{/if}
+	</span>
+	{#if _resizable}
+		<!--
+			The WAI window splitter: a `separator` that takes the focus is interactive by definition,
+			which is what makes the arrows resize the column. The linter only knows the static role.
+		-->
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<span
+			class="resize-handle"
+			role="separator"
+			aria-orientation="vertical"
+			aria-label={resizeLabel}
+			aria-valuenow={width}
+			tabindex="0"
+			onpointerdown={startDrag}
+			onkeydown={onHandleKeydown}
+		></span>
+	{/if}
+</svelte:element>
+
+<style>
+	.fs-table-header-cell {
+		height: var(--fs-table-row-height);
+		padding: 0 var(--fs-table-cell-padding);
+		vertical-align: middle;
+		text-align: left;
+		font-size: var(--fs-caption-font-size);
+		line-height: var(--fs-caption-line-height);
+		font-weight: 600;
+		color: var(--fs-text-primary);
+		& .inner {
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+			min-width: 0;
+		}
+		& .content {
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+		& .sort-button {
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+			flex-grow: 1;
+			min-width: 0;
+			padding: 0;
+			margin: 0;
+			border: none;
+			border-radius: var(--fs-control-inner-border-radius);
+			background: none;
+			color: inherit;
+			font: inherit;
+			font-weight: inherit;
+			text-align: inherit;
+			cursor: pointer;
+			&:focus-visible {
+				outline: 0.125rem solid var(--fs-focus-stroke-outer);
+				outline-offset: 0.063rem;
+			}
+		}
+		& .sort-icon {
+			display: inline-flex;
+			/* The arrow is a hint while the column is unsorted, and the answer once it is. */
+			opacity: 0;
+			transition: opacity var(--fs-fast-duration) var(--fs-point-to-point);
+			@media (prefers-reduced-motion: reduce) {
+				transition: none;
+			}
+			& :global(svg) {
+				width: 0.75rem;
+				height: 0.75rem;
+				fill: currentColor;
+			}
+			&.descending {
+				transform: rotate(180deg);
+			}
+			&.ascending,
+			&.descending {
+				opacity: 1;
+			}
+		}
+		&.sortable:hover .sort-icon {
+			opacity: 0.5;
+			&.ascending,
+			&.descending {
+				opacity: 1;
+			}
+		}
+		& .aside {
+			display: inline-flex;
+			align-items: center;
+			color: var(--fs-text-secondary);
+		}
+		&.flex {
+			display: flex;
+			align-items: center;
+			flex: 1 1 0;
+			min-width: 0;
+		}
+		&.resizable {
+			position: relative;
+			overflow: hidden;
+			&.flex {
+				flex: 0 0 auto;
+			}
+		}
+		& .resize-handle {
+			position: absolute;
+			top: 0;
+			right: 0;
+			width: 0.5rem;
+			height: 100%;
+			cursor: col-resize;
+			touch-action: none;
+			/* The grab area is comfortable, the line it draws is hairline. */
+			&::after {
+				content: '';
+				position: absolute;
+				top: 20%;
+				right: 0.188rem;
+				width: 1px;
+				height: 60%;
+				background: var(--fs-control-stroke-default);
+			}
+			&:hover::after,
+			&:focus-visible::after {
+				top: 0;
+				height: 100%;
+				width: 2px;
+				background: var(--fs-accent-fill-default);
+			}
+			&:focus-visible {
+				outline: none;
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,25 @@
+import type { TableHeaderCellProps } from './types.ts';
+declare function $$render<Tag extends 'th' | 'div' = 'th'>(): {
+    props: TableHeaderCellProps<Tag>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Tag extends 'th' | 'div' = 'th'> {
+    props(): ReturnType<typeof $$render<Tag>>['props'];
+    events(): ReturnType<typeof $$render<Tag>>['events'];
+    slots(): ReturnType<typeof $$render<Tag>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Tag extends 'th' | 'div' = 'th'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Tag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Tag>['props']>, ReturnType<__sveltets_Render<Tag>['events']>, ReturnType<__sveltets_Render<Tag>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Tag>['bindings']>;
+    } & ReturnType<__sveltets_Render<Tag>['exports']>;
+    <Tag extends 'th' | 'div' = 'th'>(internal: unknown, props: ReturnType<__sveltets_Render<Tag>['props']> & {}): ReturnType<__sveltets_Render<Tag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableHeaderCell: $$IsomorphicComponent;
+type TableHeaderCell<Tag extends 'th' | 'div' = 'th'> = InstanceType<typeof TableHeaderCell<Tag>>;
+export default TableHeaderCell;

package/dist/components/table/table-header.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" generics="Tag extends 'thead' | 'div' = 'thead'">
+	import { getTag, requireTableContext } from './table.svelte.js';
+	import type { TableDOM, TableHeaderProps } from './types.js';
+
+	let { as, ref = $bindable(), class: classes, children, ...attributes }: TableHeaderProps<Tag> = $props();
+
+	const context = requireTableContext();
+
+	const noNativeElements = $derived(context.config.noNativeElements);
+
+	const _as = $derived(getTag(as, 'thead', noNativeElements));
+</script>
+
+<svelte:element
+	this={_as}
+	bind:this={ref as TableDOM[Tag]}
+	role={_as === 'div' ? 'rowgroup' : undefined}
+	class={['fs-table-header', classes]}
+	{...attributes}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.fs-table-header {
+		color: var(--fs-text-primary);
+	}
+</style>

package/dist/components/table/table-header.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { TableHeaderProps } from './types.ts';
+declare function $$render<Tag extends 'thead' | 'div' = 'thead'>(): {
+    props: TableHeaderProps<Tag>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Tag extends 'thead' | 'div' = 'thead'> {
+    props(): ReturnType<typeof $$render<Tag>>['props'];
+    events(): ReturnType<typeof $$render<Tag>>['events'];
+    slots(): ReturnType<typeof $$render<Tag>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Tag extends 'thead' | 'div' = 'thead'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Tag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Tag>['props']>, ReturnType<__sveltets_Render<Tag>['events']>, ReturnType<__sveltets_Render<Tag>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Tag>['bindings']>;
+    } & ReturnType<__sveltets_Render<Tag>['exports']>;
+    <Tag extends 'thead' | 'div' = 'thead'>(internal: unknown, props: ReturnType<__sveltets_Render<Tag>['props']> & {}): ReturnType<__sveltets_Render<Tag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableHeader: $$IsomorphicComponent;
+type TableHeader<Tag extends 'thead' | 'div' = 'thead'> = InstanceType<typeof TableHeader<Tag>>;
+export default TableHeader;

package/dist/components/table/table-row.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" generics="Tag extends 'tr' | 'div' = 'tr'">
+	import { getTag, requireTableContext, selectOnSpace } from './table.svelte.js';
+	import type { TableDOM, TableRowProps } from './types.js';
+
+	let {
+		as,
+		ref = $bindable(),
+		appearance = 'none',
+		class: classes,
+		onclick,
+		children,
+		...attributes
+	}: TableRowProps<Tag> = $props();
+
+	const context = requireTableContext();
+
+	const noNativeElements = $derived(context.config.noNativeElements);
+
+	const _as = $derived(getTag(as, 'tr', noNativeElements));
+</script>
+
+<svelte:element
+	this={_as}
+	bind:this={ref as TableDOM[Tag]}
+	role={_as === 'div' ? 'row' : undefined}
+	class={['fs-table-row', appearance, { flex: _as === 'div' }, classes]}
+	{@attach onclick ? selectOnSpace : undefined}
+	{onclick}
+	{...attributes}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.fs-table-row {
+		/* Set by the root, so `noRowBorders` reaches every row without a global selector. */
+		border-bottom: var(--fs-table-row-border);
+		/* Read by the selection cell: a subtle indicator only surfaces while the row is engaged. */
+		--fs-table-row-active: 0;
+		&:hover,
+		&:focus-within {
+			background: var(--fs-subtle-fill-secondary);
+			--fs-table-row-active: 1;
+		}
+		&.brand {
+			background: color-mix(in srgb, var(--fs-accent-fill-default), transparent 88%);
+		}
+		&.neutral {
+			background: var(--fs-subtle-fill-tertiary);
+		}
+		&.flex {
+			display: flex;
+			align-items: center;
+			width: 100%;
+		}
+	}
+</style>

package/dist/components/table/table-row.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { TableRowProps } from './types.ts';
+declare function $$render<Tag extends 'tr' | 'div' = 'tr'>(): {
+    props: TableRowProps<Tag>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Tag extends 'tr' | 'div' = 'tr'> {
+    props(): ReturnType<typeof $$render<Tag>>['props'];
+    events(): ReturnType<typeof $$render<Tag>>['events'];
+    slots(): ReturnType<typeof $$render<Tag>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Tag extends 'tr' | 'div' = 'tr'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Tag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Tag>['props']>, ReturnType<__sveltets_Render<Tag>['events']>, ReturnType<__sveltets_Render<Tag>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Tag>['bindings']>;
+    } & ReturnType<__sveltets_Render<Tag>['exports']>;
+    <Tag extends 'tr' | 'div' = 'tr'>(internal: unknown, props: ReturnType<__sveltets_Render<Tag>['props']> & {}): ReturnType<__sveltets_Render<Tag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableRow: $$IsomorphicComponent;
+type TableRow<Tag extends 'tr' | 'div' = 'tr'> = InstanceType<typeof TableRow<Tag>>;
+export default TableRow;