@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.46

package/dist/components/datagrid/datagrid-checkbox.svelte

@@ -1,101 +1,98 @@
 <script lang="ts">
 	import { Checkbox } from '../checkbox';
-	import type { DatagridCheckboxProps } from './types';
 	import { DataGridBond } from './bond.svelte';
-	import { DataGridTrBond } from './tr/bond.svelte';
-	export type { DatagridCheckboxProps } from './types';
+	import { DataGridRowBond } from './row/bond.svelte';
+	import type { DatagridCheckboxProps } from './types';
 
 	const datagridBond = DataGridBond.get();
-	const datagridTrBond = DataGridTrBond.get();
+	const datagridRowBond = DataGridRowBond.get();
 
 	let {
 		class: klass = '',
 		value = undefined,
 		checked = $bindable(false),
 		onclick = undefined,
+		oninput = undefined,
 		onchange = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: DatagridCheckboxProps = $props();
 
-	const id = $derived(datagridTrBond.state.id);
+	const isHeader = $derived(datagridRowBond?.state.isHeader ?? false);
+	const rowId = $derived(datagridRowBond?.state.id);
 
-	const isAllRowsSelected = $derived(
-		datagridBond.state.selectedRows.length > 0 &&
-			datagridBond.state.rows.size === datagridBond.state.selectedRows.length
-	);
+	const selectedCount = $derived(datagridBond?.state.selectedRows.length ?? 0);
+	const rowCount = $derived(datagridBond?.state.rows.size ?? 0);
 
-	const isHeaderRow = $derived(datagridTrBond?.state.isHeader);
+	const isAllSelected = $derived(rowCount > 0 && selectedCount === rowCount);
+	const isHeaderIndeterminate = $derived(selectedCount > 0 && selectedCount < rowCount);
 
-	const classNames = $derived(['datagrid-td-checkbox', '$preset', klass]);
+	const isRowSelected = $derived(datagridRowBond?.state.isSelected ?? false);
 
-	function handleInputTd(ev: Event, { checked = false }) {
-		onchange?.(ev, { checked });
+	const classNames = $derived(['datagrid-cell-checkbox', '$preset', klass]);
 
-		if (!ev.defaultPrevented) {
-			//
-			if (checked) {
-				datagridBond.state.select([id]);
-			} else {
-				datagridBond.state.unselect([id]);
-			}
-		}
+	const activeCheckbox = $derived(isHeader ? headerCheckbox : rowCheckbox);
+
+	function handleCallbacks(ev: Event, checked: boolean) {
+		const onInput = oninput as ((event: Event, options: { checked: boolean }) => void) | undefined;
+		const onChange = onchange as ((event: Event, options: { checked: boolean }) => void) | undefined;
+		onInput?.(ev, { checked });
+		onChange?.(ev, { checked });
 	}
 
-	function handleInputTh(ev: Event, { checked = false }) {
-		onchange?.(ev, { checked });
+	function handleHeaderChange(ev?: Event) {
+		const checked = !isAllSelected;
+		const currentEvent = ev ?? new Event('input');
+		handleCallbacks(currentEvent, checked);
+		if (currentEvent.defaultPrevented) return;
+
+		const allIds = [...(datagridBond?.state.rows.keys() ?? [])];
 
-		if (!ev.defaultPrevented) {
-			const allRows = datagridBond.state.rows.keys().toArray();
+		if(checked === true){
+			datagridBond?.state.select(allIds);
+		} else {
+			datagridBond?.state.unselect(allIds);
+		}
+	}
+
+	function handleRowChange(ev?: Event) {
+		const checked = !isRowSelected;
+		const currentEvent = ev ?? new Event('input');
+		handleCallbacks(currentEvent, checked);
+		if (currentEvent.defaultPrevented || !rowId) return;
 
-			if (checked) {
-				datagridBond.state.select(allRows);
-			} else {
-				datagridBond.state.unselect(allRows);
-			}
+		if(checked){
+			datagridRowBond?.state.select();
+		} else {
+			datagridRowBond?.state.unselect();
 		}
 	}
 </script>
 
-{#if isHeaderRow}
-	<!-- content here -->
+{#snippet headerCheckbox()}
 	<Checkbox
-		{value}
-		{onclick}
-		bond={datagridTrBond}
+		{...(value !== undefined ? { value: value as string } : {})}
+		{...(onclick ? { onclick: onclick as (ev?: Event) => void } : {})}
+		bond={datagridRowBond}
 		preset="datagrid.checkbox"
 		class={classNames}
-		checked={isAllRowsSelected}
-		enter={enter?.bind(datagridTrBond)}
-		exit={exit?.bind(datagridTrBond)}
-		initial={initial?.bind(datagridTrBond)}
-		animate={animate?.bind(datagridTrBond)}
-		onmount={onmount?.bind(datagridTrBond)}
-		ondestroy={ondestroy?.bind(datagridTrBond)}
-		oninput={handleInputTh}
+		checked={isAllSelected}
+		indeterminate={isHeaderIndeterminate}
+		oninput={handleHeaderChange}
 		{...restProps}
 	/>
-{:else}
-	<!-- else content here -->
+{/snippet}
+
+{#snippet rowCheckbox()}
 	<Checkbox
-		{value}
-		{onclick}
-		bond={datagridTrBond}
+		{...(value !== undefined ? { value: value as string } : {})}
+		{...(onclick ? { onclick: onclick as (ev?: Event) => void } : {})}
+		bond={datagridRowBond}
 		preset="datagrid.checkbox"
 		class={classNames}
-		checked={datagridTrBond.state.isSelected}
-		enter={enter?.bind(datagridTrBond)}
-		exit={exit?.bind(datagridTrBond)}
-		initial={initial?.bind(datagridTrBond)}
-		animate={animate?.bind(datagridTrBond)}
-		onmount={onmount?.bind(datagridTrBond)}
-		ondestroy={ondestroy?.bind(datagridTrBond)}
-		oninput={handleInputTd}
+		checked={isRowSelected}
+		oninput={handleRowChange}
 		{...restProps}
 	/>
-{/if}
+{/snippet}
+
+{@render activeCheckbox()}

package/dist/components/datagrid/datagrid-checkbox.svelte.d.ts

@@ -1,6 +1,4 @@
 import type { DatagridCheckboxProps } from './types';
-declare const DatagridCheckbox: import("svelte").Component<DatagridCheckboxProps, {
-    DatagridCheckboxProps: typeof DatagridCheckboxProps;
-}, "checked">;
+declare const DatagridCheckbox: import("svelte").Component<DatagridCheckboxProps, {}, "checked">;
 type DatagridCheckbox = ReturnType<typeof DatagridCheckbox>;
 export default DatagridCheckbox;

package/dist/components/datagrid/datagrid-footer.svelte

@@ -1,34 +1,27 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { DataGridBond } from './bond.svelte';
-	import type { DatagridFooterProps } from './types';
-
-	const bond = DataGridBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DatagridFooterProps<T> = $props();
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="datagrid.footer"
-	class={['border-border', '$preset', klass, 'contents']}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...restProps}
->
-	{@render children?.({ datagrid: bond })}
-</HtmlAtom>
+<script lang="ts" generics="T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { DataGridBond } from './bond.svelte';
+	import type { DatagridFooterProps } from './types';
+
+	const bond = DataGridBond.get<T>();
+	if (!bond) {
+		throw new Error('DataGrid.Footer must be used within DataGrid.Root.');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		...restProps
+	}: DatagridFooterProps<T, E, B> = $props();
+
+	const footerProps = $derived({ ...bond.footer().spread, ...restProps });
+</script>
+
+<HtmlAtom
+	{bond}
+		preset="datagrid.footer"
+	class={['border-border', '$preset', klass, 'contents']}
+	{...footerProps}
+>
+	{@render children?.({ datagrid: bond })}
+</HtmlAtom>

package/dist/components/datagrid/datagrid-footer.svelte.d.ts

@@ -1,26 +1,26 @@
 import { type Base } from '../atom';
 import type { DatagridFooterProps } from './types';
-declare function $$render<T extends keyof HTMLElementTagNameMap, B extends Base = Base>(): {
-    props: DatagridFooterProps<T>;
+declare function $$render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: DatagridFooterProps<T, E, B>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap, B extends Base = Base> {
-    props(): ReturnType<typeof $$render<T, B>>['props'];
-    events(): ReturnType<typeof $$render<T, B>>['events'];
-    slots(): ReturnType<typeof $$render<T, B>>['slots'];
+declare class __sveltets_Render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<T, E, B>>['props'];
+    events(): ReturnType<typeof $$render<T, E, B>>['events'];
+    slots(): ReturnType<typeof $$render<T, E, B>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends keyof HTMLElementTagNameMap, B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, B>['props']>, ReturnType<__sveltets_Render<T, B>['events']>, ReturnType<__sveltets_Render<T, B>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T, B>['bindings']>;
-    } & ReturnType<__sveltets_Render<T, B>['exports']>;
-    <T extends keyof HTMLElementTagNameMap, B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, B>['props']> & {}): ReturnType<__sveltets_Render<T, B>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, E, B>['props']>, ReturnType<__sveltets_Render<T, E, B>['events']>, ReturnType<__sveltets_Render<T, E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, E, B>['props']> & {}): ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
 }
 declare const DatagridFooter: $$IsomorphicComponent;
-type DatagridFooter<T extends keyof HTMLElementTagNameMap, B extends Base = Base> = InstanceType<typeof DatagridFooter<T, B>>;
+type DatagridFooter<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DatagridFooter<T, E, B>>;
 export default DatagridFooter;

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

@@ -1,22 +1,19 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
+<script lang="ts" generics="T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { HtmlAtom, type Base } from '../atom';
 	import { setDatagridHeaderContext } from './context';
 	import { DataGridBond } from './bond.svelte';
 	import type { DatagridHeaderProps } from './types';
 
-	const bond = DataGridBond.get();
+	const bond = DataGridBond.get<T>();
+	if (!bond) {
+		throw new Error('DataGrid.Header must be used within DataGrid.Root.');
+	}
 
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
-	}: DatagridHeaderProps<T> = $props();
+	}: DatagridHeaderProps<T, E, B> = $props();
 
 	const header = $state(true);
 
@@ -31,19 +28,15 @@
 			return derived_header;
 		}
 	});
+
+	const headerProps = $derived({ ...bond.header().spread, ...restProps });
 </script>
 
 <HtmlAtom
 	{bond}
-	preset="datagrid.header"
+		preset="datagrid.header"
 	class={['border-border col-span-full grid grid-cols-subgrid', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...restProps}
+	{...headerProps}
 >
 	{@render children?.({ datagrid: bond })}
 </HtmlAtom>

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

@@ -1,26 +1,26 @@
 import { type Base } from '../atom';
 import type { DatagridHeaderProps } from './types';
-declare function $$render<T extends keyof HTMLElementTagNameMap, B extends Base = Base>(): {
-    props: DatagridHeaderProps<T>;
+declare function $$render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: DatagridHeaderProps<T, E, B>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap, B extends Base = Base> {
-    props(): ReturnType<typeof $$render<T, B>>['props'];
-    events(): ReturnType<typeof $$render<T, B>>['events'];
-    slots(): ReturnType<typeof $$render<T, B>>['slots'];
+declare class __sveltets_Render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<T, E, B>>['props'];
+    events(): ReturnType<typeof $$render<T, E, B>>['events'];
+    slots(): ReturnType<typeof $$render<T, E, B>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends keyof HTMLElementTagNameMap, B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, B>['props']>, ReturnType<__sveltets_Render<T, B>['events']>, ReturnType<__sveltets_Render<T, B>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T, B>['bindings']>;
-    } & ReturnType<__sveltets_Render<T, B>['exports']>;
-    <T extends keyof HTMLElementTagNameMap, B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, B>['props']> & {}): ReturnType<__sveltets_Render<T, B>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, E, B>['props']>, ReturnType<__sveltets_Render<T, E, B>['events']>, ReturnType<__sveltets_Render<T, E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, E, B>['props']> & {}): ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
 }
 declare const DatagridHeader: $$IsomorphicComponent;
-type DatagridHeader<T extends keyof HTMLElementTagNameMap, B extends Base = Base> = InstanceType<typeof DatagridHeader<T, B>>;
+type DatagridHeader<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DatagridHeader<T, E, B>>;
 export default DatagridHeader;

package/dist/components/datagrid/datagrid-root.svelte

@@ -1,59 +1,49 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-	import { DataGridBond, DataGridBondState, type DataGridStateProps } from './bond.svelte';
-	import type { DatagridRootProps } from './types';
-
-	import './datagrid.css';
-
-	let {
-		class: klass = '',
-		values = $bindable([]),
-		template = undefined,
-		fallbackTemplate = 'auto',
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DatagridRootProps<T> = $props();
-
-	const bondProps = defineState<DataGridStateProps<T>>([
-		defineProperty('template', () => template),
-		defineProperty(
-			'values',
-			() => values,
-			(v) => (values = v)
-		)
-	]);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const dataGridState = new DataGridBondState(() => props);
-		return new DataGridBond(dataGridState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="datagrid"
-	class={['border-border', 'datagrid-root w-full gap-x-0 gap-y-0', '$preset', klass]}
-	style="--template-columns:{bond.state.template ?? fallbackTemplate}"
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...restProps}
->
-	{@render children?.({ datagrid: bond })}
-</HtmlAtom>
+<script lang="ts" generics="T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { untrack } from 'svelte';
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+	import { DataGridBond, DataGridBondState, type DataGridStateProps } from './bond.svelte';
+	import type { DatagridRootProps } from './types';
+	import './datagrid.css';
+
+	let {
+		class: klass = '',
+		values = $bindable([]),
+		template = undefined,
+		fallbackTemplate = 'auto',
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: DatagridRootProps<T, E, B> = $props();
+
+	const bondProps = defineState<DataGridStateProps<T>>([
+		defineProperty('template', () => template),
+		defineProperty(
+			'values',
+			() => values,
+			(v) => (values = v)
+		)
+	]);
+
+	const bond = untrack(() => factory(bondProps)).share();
+	const rootProps = $derived({ ...bond.root().spread, ...restProps });
+
+	function _factory(props?: DataGridStateProps<T>) {
+		const state = new DataGridBondState<T>(() => props ?? bondProps);
+		return new DataGridBond<T>(state);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="datagrid"
+	class={['border-border datagrid-root w-full gap-x-0 gap-y-0', '$preset', klass]}
+	style="--template-columns:{bond.state.template || fallbackTemplate}"
+	{...rootProps}
+>
+	{@render children?.({ datagrid: bond })}
+</HtmlAtom>

package/dist/components/datagrid/datagrid-root.svelte.d.ts

@@ -1,31 +1,32 @@
 import { type Base } from '../atom';
+import { DataGridBond } from './bond.svelte';
 import type { DatagridRootProps } from './types';
 import './datagrid.css';
-declare function $$render<T extends keyof HTMLElementTagNameMap, B extends Base = Base>(): {
-    props: DatagridRootProps<T>;
+declare function $$render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: DatagridRootProps<T, E, B>;
     exports: {
-        getBond: () => any;
+        getBond: () => DataGridBond<T>;
     };
     bindings: "values";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap, B extends Base = Base> {
-    props(): ReturnType<typeof $$render<T, B>>['props'];
-    events(): ReturnType<typeof $$render<T, B>>['events'];
-    slots(): ReturnType<typeof $$render<T, B>>['slots'];
+declare class __sveltets_Render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<T, E, B>>['props'];
+    events(): ReturnType<typeof $$render<T, E, B>>['events'];
+    slots(): ReturnType<typeof $$render<T, E, B>>['slots'];
     bindings(): "values";
     exports(): {
-        getBond: () => any;
+        getBond: () => DataGridBond<T>;
     };
 }
 interface $$IsomorphicComponent {
-    new <T extends keyof HTMLElementTagNameMap, B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, B>['props']>, ReturnType<__sveltets_Render<T, B>['events']>, ReturnType<__sveltets_Render<T, B>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T, B>['bindings']>;
-    } & ReturnType<__sveltets_Render<T, B>['exports']>;
-    <T extends keyof HTMLElementTagNameMap, B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, B>['props']> & {}): ReturnType<__sveltets_Render<T, B>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, E, B>['props']>, ReturnType<__sveltets_Render<T, E, B>['events']>, ReturnType<__sveltets_Render<T, E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, E, B>['props']> & {}): ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
 }
 declare const DatagridRoot: $$IsomorphicComponent;
-type DatagridRoot<T extends keyof HTMLElementTagNameMap, B extends Base = Base> = InstanceType<typeof DatagridRoot<T, B>>;
+type DatagridRoot<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DatagridRoot<T, E, B>>;
 export default DatagridRoot;

package/dist/components/datagrid/row/bond.svelte.d.ts

@@ -0,0 +1,42 @@
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../../shared/bond.svelte';
+import { DataGridBond } from '../bond.svelte';
+export type DataGridRowBondProps<T = unknown> = BondStateProps & {
+    value?: string;
+    header?: boolean;
+    data?: T;
+};
+export type DataGridRowBondElements = {
+    root: HTMLElement;
+};
+export declare class DataGridRowRootAtom<T = unknown> extends BondAtom<DataGridRowBond<T>> {
+    constructor(bond: DataGridRowBond<T>);
+    get attrs(): {
+        'data-kind': string;
+        'data-header': string | undefined;
+        'data-selected': string | undefined;
+    };
+}
+export declare class DataGridRowBond<T = unknown, Props extends DataGridRowBondProps<T> = DataGridRowBondProps<T>, State extends DataGridRowBondState<T, Props> = DataGridRowBondState<T, Props>, Elements extends DataGridRowBondElements = DataGridRowBondElements> extends Bond<Props, State, Elements> {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(s: State);
+    get datagrid(): DataGridBond<T>;
+    share(): this;
+    mount(): () => void;
+    root(): DataGridRowRootAtom<T>;
+    static get<T = unknown>(): DataGridRowBond<T> | undefined;
+    static set<T = unknown>(bond: DataGridRowBond<T>): DataGridRowBond<T>;
+}
+export declare class DataGridRowBondState<T = unknown, Props extends DataGridRowBondProps<T> = DataGridRowBondProps<T>> extends BondState<Props> {
+    #private;
+    constructor(props: () => Props);
+    get id(): string;
+    get isSelected(): boolean;
+    get isHeader(): boolean;
+    get datagrid(): import("..").DataGridBondState<T> | undefined;
+    select(): void;
+    unselect(): void;
+}
+export type DataGridTrBondProps<T = unknown> = DataGridRowBondProps<T>;
+export type DataGridTrBondElements = DataGridRowBondElements;
+export { DataGridRowBond as DataGridTrBond, DataGridRowBondState as DataGridTrBondState };

package/dist/components/datagrid/row/bond.svelte.js

@@ -0,0 +1,72 @@
+import { getContext, setContext } from 'svelte';
+import { Bond, BondState, BondAtom } from '../../../shared/bond.svelte';
+import { DataGridBond } from '../bond.svelte';
+import { getDatagridHeaderContext } from '../context';
+export class DataGridRowRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
+    }
+    get attrs() {
+        return {
+            ...super.attrs,
+            'data-kind': 'datagrid-row',
+            'data-header': this.bond.state.isHeader ? 'true' : undefined,
+            'data-selected': this.bond.state.isSelected ? 'true' : undefined
+        };
+    }
+}
+export class DataGridRowBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/datagrid/row';
+    #datagrid;
+    constructor(s) {
+        super(s, 'datagrid-row');
+        const datagrid = DataGridBond.get();
+        if (!datagrid)
+            throw new Error('DataGridRowBond must be used within a DataGridBond context.');
+        this.#datagrid = datagrid;
+    }
+    get datagrid() {
+        return this.#datagrid;
+    }
+    share() {
+        return DataGridRowBond.set(this);
+    }
+    mount() {
+        return this.#datagrid.state.mountRow(this.state.id, this);
+    }
+    root() {
+        return this.atom('root', () => new DataGridRowRootAtom(this));
+    }
+    static get() {
+        return getContext(DataGridRowBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(DataGridRowBond.CONTEXT_KEY, bond);
+    }
+}
+export class DataGridRowBondState extends BondState {
+    #datagrid = DataGridBond.get();
+    #isHeader = !!getDatagridHeaderContext();
+    constructor(props) {
+        super(props);
+    }
+    get id() {
+        return this.props.value ?? super.id;
+    }
+    get isSelected() {
+        return this.#datagrid?.state.props.values?.includes(this.id) ?? false;
+    }
+    get isHeader() {
+        return this.#isHeader;
+    }
+    get datagrid() {
+        return this.#datagrid?.state;
+    }
+    select() {
+        this.#datagrid?.state.select([this.id]);
+    }
+    unselect() {
+        this.#datagrid?.state.unselect([this.id]);
+    }
+}
+export { DataGridRowBond as DataGridTrBond, DataGridRowBondState as DataGridTrBondState };

package/dist/components/datagrid/{tr/datagrid-tr.css → row/datagrid-row.css}

@@ -1,4 +1,4 @@
-.datagrid-tr {
+.datagrid-row {
 	display: grid;
 
 	grid-template-columns: subgrid;