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

package/dist/components/container/container.stories.svelte.d.ts

@@ -1,26 +0,0 @@
-export default Container;
-type Container = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string;
-};
-declare const Container: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/contextmenu/atoms.js

@@ -1 +0,0 @@
-"use strict";

package/dist/components/contextmenu/contextmenu-trigger.svelte.d.ts

@@ -1,26 +0,0 @@
-export default ContextmenuTrigger;
-type ContextmenuTrigger = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string;
-};
-declare const ContextmenuTrigger: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/contextmenu/indext.js

@@ -1 +0,0 @@
-"use strict";

package/dist/components/datagrid/datagrid.stories.svelte

@@ -1,72 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { DataGrid as DataGridCmp } from '.';
-	import { Dropdown } from '../dropdown';
-	import MoreVerticalIcon from '../../icons/icon-more-vert.svelte';
-	import { Icon } from '../icon';
-	import { container } from '../../runes/container.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Atoms/DataGrid'
-	});
-</script>
-
-<script>
-	let values = $state([]);
-
-	const datagridContainer = container();
-</script>
-
-<Story name="DataGrid">
-	{#snippet children({ args })}
-		<DataGridCmp.Root class="" {@attach datagridContainer.attach}>
-			<DataGridCmp.Header>
-				<DataGridCmp.Tr header>
-					<DataGridCmp.Th width="auto">
-						<DataGridCmp.Checkbox />
-					</DataGridCmp.Th>
-					<DataGridCmp.Th
-						class="resize-x overflow-x-auto"
-						width="auto"
-						hidden={datagridContainer.current?.width
-							? datagridContainer.current.width < 1024
-							: false}>ID</DataGridCmp.Th
-					>
-					<DataGridCmp.Th>Name</DataGridCmp.Th>
-					<DataGridCmp.Th width="auto">Job</DataGridCmp.Th>
-					<DataGridCmp.Th width="auto">Contact</DataGridCmp.Th>
-					<DataGridCmp.Th width="auto"></DataGridCmp.Th>
-				</DataGridCmp.Tr>
-			</DataGridCmp.Header>
-
-			<DataGridCmp.Body>
-				{#each { length: 10 } as _, i (i)}
-					<DataGridCmp.Tr>
-						<DataGridCmp.Td>
-							<DataGridCmp.Checkbox />
-						</DataGridCmp.Td>
-
-						<DataGridCmp.Td>{crypto.randomUUID()}</DataGridCmp.Td>
-						<DataGridCmp.Td>John Doe</DataGridCmp.Td>
-						<DataGridCmp.Td>Software Engineer</DataGridCmp.Td>
-						<DataGridCmp.Td>+213659009944</DataGridCmp.Td>
-
-						<DataGridCmp.Td base={Dropdown.Root} placement="bottom-end" offset={0}>
-							<Dropdown.Trigger class="flex aspect-square items-center justify-center p-0">
-								<Icon src={MoreVerticalIcon} />
-							</Dropdown.Trigger>
-							<Dropdown.List>
-								<Dropdown.Item value="ar">Arabic</Dropdown.Item>
-								<Dropdown.Item value="en">English</Dropdown.Item>
-								<Dropdown.Item value="sp">Spanish</Dropdown.Item>
-								<Dropdown.Item value="fr">Frensh</Dropdown.Item>
-							</Dropdown.List>
-						</DataGridCmp.Td>
-					</DataGridCmp.Tr>
-				{/each}
-			</DataGridCmp.Body>
-
-			<DataGridCmp.Footer></DataGridCmp.Footer>
-		</DataGridCmp.Root>
-	{/snippet}
-</Story>

package/dist/components/datagrid/datagrid.stories.svelte.d.ts

@@ -1,6 +0,0 @@
-export default Datagrid;
-type Datagrid = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Record<string, never>>): void;
-};
-declare const Datagrid: import("svelte").Component<Record<string, never>, {}, "">;

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

@@ -1,28 +0,0 @@
-import { Bond, BondState, type BondStateProps } from '../../../shared/bond.svelte';
-import { DataGridBondState } from '../bond.svelte';
-import type { Direction, SortableType } from '../../../types';
-export type DataGridTdBondProps<T = unknown> = BondStateProps & {
-    width?: string;
-    screen?: string;
-    sortable?: boolean | SortableType;
-    direction: Direction;
-    data?: T;
-};
-export type DataGridTdElements = {
-    root: HTMLElement;
-};
-export declare class DataGridTdBond<T> extends Bond<DataGridTdBondProps<T>, DataGridTdBondState<T>, DataGridTdElements> {
-    #private;
-    static CONTEXT_KEY: string;
-    constructor(s: DataGridTdBondState<T>);
-    share(): this;
-    mount(): () => void;
-    unmount(): void;
-    static get(): DataGridTdBond | undefined;
-    static set(bond: DataGridTdBond): DataGridTdBond;
-}
-export declare class DataGridTdBondState<T> extends BondState<DataGridTdBondProps<T>> {
-    #private;
-    constructor(props: () => DataGridTdBondProps<T>);
-    get datagrid(): DataGridBondState<T>;
-}

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

@@ -1,40 +0,0 @@
-import { getContext, setContext } from 'svelte';
-import { Bond, BondState } from '../../../shared/bond.svelte';
-import { DataGridBond, DataGridBondState } from '../bond.svelte';
-export class DataGridTdBond extends Bond {
-    static CONTEXT_KEY = '@atoms/context/datagrid/td';
-    #datagrid;
-    constructor(s) {
-        super(s);
-        this.#datagrid = DataGridBond.get();
-    }
-    share() {
-        return DataGridTdBond.set(this);
-    }
-    mount() {
-        // TD doesn't mount as a row, it's part of a TR
-        return () => { };
-    }
-    unmount() {
-        return this.#datagrid.state.unmountRow(this.state.id);
-    }
-    static get() {
-        return getContext(DataGridTdBond.CONTEXT_KEY);
-    }
-    static set(bond) {
-        return setContext(DataGridTdBond.CONTEXT_KEY, bond);
-    }
-}
-export class DataGridTdBondState extends BondState {
-    #datagrid;
-    constructor(props) {
-        super(props);
-        this.#datagrid = DataGridBond.get().state;
-    }
-    get datagrid() {
-        if (!this.#datagrid) {
-            throw new Error('DataGridTdBond must be used within a DataGridBond context.');
-        }
-        return this.#datagrid;
-    }
-}

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

@@ -1,66 +0,0 @@
-<script lang="ts" generics="D,E extends HtmlElementTagName, B extends Base = Base">
-	import { DataGridBond } from '../bond.svelte';
-	import { HtmlAtom, type Base } from '../../atom';
-	import type { HtmlElementTagName } from '../../element';
-	import type { DataGridTdBond } from './bond.svelte';
-	export type { DatagridTdProps } from '../types';
-
-	const bond = DataGridBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		onclick = undefined,
-		...restProps
-	}: DatagridTdProps<D, E, B> = $props();
-
-	let element = $state<HTMLElement>();
-
-	const elementIndex = $derived.by(() => {
-		if (element) {
-			const children = [...(element?.parentElement?.children ?? [])];
-			return children.indexOf(element);
-		}
-
-		return -1;
-	});
-
-	const column = $derived(bond.state.columns.values().find((col) => col.index === elementIndex));
-
-	const isHidden = $derived(column?.state.props.hidden ?? false);
-
-	function onclick_(ev: Event) {
-		onclick?.(ev, { td: bond as unknown as DataGridTdBond<D> });
-
-		if (!ev.defaultPrevented) {
-			//
-		}
-	}
-</script>
-
-{#if !isHidden}
-	<HtmlAtom
-		{@attach (node) => {
-			element = node;
-		}}
-		{bond}
-		preset="datagrid.td"
-		class={['border-border flex h-full items-center py-2 text-left', '$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)}
-		onclick={onclick_}
-		{...restProps}
-	>
-		{@render children?.({ td: bond as unknown as DataGridTdBond<D> })}
-	</HtmlAtom>
-{/if}

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

@@ -1,30 +0,0 @@
-import { type Base } from '../../atom';
-import type { HtmlElementTagName } from '../../element';
-declare function $$render<D, E extends HtmlElementTagName, B extends Base = Base>(): {
-    props: DatagridTdProps<D, E, B>;
-    exports: {
-        DatagridTdProps: typeof DatagridTdProps;
-    };
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<D, E extends HtmlElementTagName, B extends Base = Base> {
-    props(): ReturnType<typeof $$render<D, E, B>>['props'];
-    events(): ReturnType<typeof $$render<D, E, B>>['events'];
-    slots(): ReturnType<typeof $$render<D, E, B>>['slots'];
-    bindings(): "";
-    exports(): {
-        DatagridTdProps: typeof DatagridTdProps;
-    };
-}
-interface $$IsomorphicComponent {
-    new <D, E extends HtmlElementTagName, B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<D, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<D, E, B>['props']>, ReturnType<__sveltets_Render<D, E, B>['events']>, ReturnType<__sveltets_Render<D, E, B>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<D, E, B>['bindings']>;
-    } & ReturnType<__sveltets_Render<D, E, B>['exports']>;
-    <D, E extends HtmlElementTagName, B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<D, E, B>['props']> & {}): ReturnType<__sveltets_Render<D, E, B>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
-}
-declare const DatagridTd: $$IsomorphicComponent;
-type DatagridTd<D, E extends HtmlElementTagName, B extends Base = Base> = InstanceType<typeof DatagridTd<D, E, B>>;
-export default DatagridTd;

package/dist/components/datagrid/td/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Td } from './datagrid-td.svelte';
-export * from './bond.svelte';

package/dist/components/datagrid/td/index.js

@@ -1,2 +0,0 @@
-export { default as Td } from './datagrid-td.svelte';
-export * from './bond.svelte';

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

@@ -1,38 +0,0 @@
-import type { Direction, SortableType } from '../../../types';
-import { DataGridBond } from '../bond.svelte';
-import { Bond, BondState, type BondStateProps } from '../../../shared/bond.svelte';
-export type DataGridThBondProps = BondStateProps & {
-    id: string;
-    width?: string;
-    screen?: string;
-    sortable?: boolean | SortableType;
-    hidden?: boolean;
-    direction: Direction;
-};
-export type DataGridThElements = {
-    root: HTMLElement;
-};
-export declare class DataGridThBond<T> extends Bond<DataGridThBondProps, DataGridThBondState<T>, DataGridThElements> {
-    #private;
-    static CONTEXT_KEY: string;
-    constructor(s: DataGridThBondState<T>);
-    get isHidden(): boolean;
-    get index(): number;
-    get text(): string;
-    get datagrid(): DataGridBond<T>;
-    share(): this;
-    mount(): () => void;
-    unmount(): void;
-    props(): {
-        [x: symbol]: (node: HTMLElement) => void;
-    };
-    static get(): DataGridThBond | undefined;
-    static set(bond: DataGridThBond): DataGridThBond;
-}
-export declare class DataGridThBondState<T> extends BondState<DataGridThBondProps> {
-    #private;
-    constructor(props: () => DataGridThBondProps);
-    get isSortable(): any;
-    asc(): void;
-    desc(): void;
-}

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

@@ -1,66 +0,0 @@
-import { createAttachmentKey } from 'svelte/attachments';
-import { getContext, setContext } from 'svelte';
-import { DataGridBond, DataGridBondState } from '../bond.svelte';
-import { Bond, BondState } from '../../../shared/bond.svelte';
-export class DataGridThBond extends Bond {
-    static CONTEXT_KEY = '@atoms/context/datagrid/th';
-    #datagrid;
-    constructor(s) {
-        super(s);
-        this.#datagrid = DataGridBond.get();
-    }
-    get isHidden() {
-        return this.elements.root.hidden || getComputedStyle(this.elements.root)?.display === 'none';
-    }
-    get index() {
-        const parent = this.elements.root?.parentElement;
-        return Array.from(parent?.children ?? []).indexOf(this.elements.root);
-    }
-    get text() {
-        return this.elements.root.innerText;
-    }
-    get datagrid() {
-        return this.#datagrid;
-    }
-    share() {
-        return DataGridThBond.set(this);
-    }
-    mount() {
-        return this.#datagrid.state.mountColumn(this.state.id, this);
-    }
-    unmount() {
-        return this.#datagrid.state.unmountColumn(this.state.id);
-    }
-    props() {
-        return {
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
-        };
-    }
-    static get() {
-        return getContext(DataGridThBond.CONTEXT_KEY);
-    }
-    static set(bond) {
-        return setContext(DataGridThBond.CONTEXT_KEY, bond);
-    }
-}
-export class DataGridThBondState extends BondState {
-    #datagrid;
-    constructor(props) {
-        super(props);
-        this.#datagrid = DataGridBond.get().state;
-        if (!this.#datagrid) {
-            throw new Error('DataGridThBond must be used within a DataGridBond context.');
-        }
-    }
-    get isSortable() {
-        return this.props.sortable;
-    }
-    asc() {
-        this.props.direction = 'asc';
-    }
-    desc() {
-        this.props.direction = 'desc';
-    }
-}

package/dist/components/datagrid/th/datagrid-th-sort-icon.svelte.d.ts

@@ -1,33 +0,0 @@
-import { type Base } from '../../atom';
-declare function $$render<T extends keyof HTMLElementTagNameMap, B extends Base = Base>(): {
-    props: {
-        class?: string;
-        onmount?: any;
-        ondestroy?: any;
-        animate?: (node: HTMLElement) => void;
-        enter?: any;
-        exit?: any;
-        initial?: any;
-    } & Record<string, any>;
-    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'];
-    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']>;
-}
-declare const DatagridThSortIcon: $$IsomorphicComponent;
-type DatagridThSortIcon<T extends keyof HTMLElementTagNameMap, B extends Base = Base> = InstanceType<typeof DatagridThSortIcon<T, B>>;
-export default DatagridThSortIcon;

package/dist/components/datagrid/th/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Th } from './datagrid-th.svelte';
-export * from './bond.svelte';

package/dist/components/datagrid/th/index.js

@@ -1,2 +0,0 @@
-export { default as Th } from './datagrid-th.svelte';
-export * from './bond.svelte';

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

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

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

@@ -1,72 +0,0 @@
-import { getContext, setContext } from 'svelte';
-import { createAttachmentKey } from 'svelte/attachments';
-import { Bond, BondState } from '../../../shared/bond.svelte';
-import { DataGridBond } from '../bond.svelte';
-import { getDatagridHeaderContext } from '../context';
-const DATAGRID_TR_ELEMENTS_KIND = {
-    root: 'datagrid-tr'
-};
-export class DataGridTrBond extends Bond {
-    static CONTEXT_KEY = '@atoms/context/datagrid/tr';
-    constructor(s) {
-        super(s);
-    }
-    get datagrid() {
-        const bond = DataGridBond.get();
-        if (!bond) {
-            throw new Error('DataGridTrBond must be used within a DataGridBond context.');
-        }
-        return bond;
-    }
-    share() {
-        return DataGridTrBond.set(this);
-    }
-    mount() {
-        return this.datagrid.state.mountRow(this.state.id, this);
-    }
-    unmount() {
-        return this.datagrid.state.unmountRow(this.state.id);
-    }
-    root() {
-        return {
-            'data-kind': DATAGRID_TR_ELEMENTS_KIND.root,
-            'data-header': this.state.isHeader ? 'true' : undefined,
-            'data-selected': this.state.isSelected ? 'true' : undefined,
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
-        };
-    }
-    static get() {
-        return getContext(DataGridTrBond.CONTEXT_KEY);
-    }
-    static set(bond) {
-        return setContext(DataGridTrBond.CONTEXT_KEY, bond);
-    }
-}
-export class DataGridTrBondState extends BondState {
-    static CONTEXT_KEY = '@atoms/context/datagrid/tr';
-    #datagrid = DataGridBond.get();
-    #isHeader = $state(!!getDatagridHeaderContext());
-    constructor(props) {
-        super(props);
-    }
-    get id() {
-        return this.props.value || super.id;
-    }
-    get isSelected() {
-        return this.datagrid?.props.values?.some((id) => id === this.id);
-    }
-    get isHeader() {
-        return this.#isHeader;
-    }
-    get datagrid() {
-        return this.#datagrid?.state;
-    }
-    select() {
-        this.datagrid?.select([this.id]);
-    }
-    unselect() {
-        this.datagrid?.unselect([this.id]);
-    }
-}

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

@@ -1,90 +0,0 @@
-<script lang="ts" generics="T, E extends HtmlElementTagName, B extends Base = Base">
-	import { untrack } from 'svelte';
-	import { nanoid } from 'nanoid';
-	import { defineProperty, defineState } from '../../../utils';
-	import { HtmlAtom, type Base } from '../../atom';
-	import type { HtmlElementTagName } from '../../element';
-	import { DataGridTrBond, DataGridTrBondState, type DataGridTrBondProps } from './bond.svelte';
-	import type { DatagridTrProps } from '../types';
-	import { type DatagridContext } from '../context';
-
-	import './datagrid-tr.css';
-
-	let {
-		class: klass = '',
-		value = nanoid(),
-		rows = 'auto',
-		data = undefined,
-		header = false,
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		onclick = undefined,
-		...restProps
-	}: DatagridTrProps<T, E, B> = $props();
-
-	const bondProps = defineState<DataGridTrBondProps>([
-		defineProperty('data', () => data),
-		defineProperty('value', () => value),
-		defineProperty('header', () => header)
-	]);
-	const bond = factory(bondProps).share();
-
-	const isHeader = $derived(bond?.state.isHeader ?? false);
-	const isSelected = $derived(bond.state.isSelected);
-
-	const headerProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	const unmount = untrack(() => {
-		if (!isHeader) {
-			return bond.mount();
-		}
-	});
-
-	$effect(() => unmount);
-
-	function _factory(props: typeof bondProps) {
-		const datagridTrState = new DataGridTrBondState(() => props);
-		return new DataGridTrBond(datagridTrState);
-	}
-
-	function onclick_(ev: Event) {
-		onclick?.(ev, { tr: bond as unknown as DatagridContext<T> });
-
-		if (!ev.defaultPrevented) {
-			//
-		}
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="datagrid.tr"
-	class={[
-		'datagrid-tr border-border items-center border-b bg-transparent',
-		!isHeader && 'hover:bg-foreground/2 active:bg-foreground/4 transition-colors duration-100',
-		isHeader && 'header-tr',
-		isSelected && 'bg-primary/2 hover:bg-primary/4 active:bg-primary/6',
-		'$preset',
-		klass
-	]}
-	style="--rows:{rows}"
-	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)}
-	onclick={onclick_}
-	{...headerProps}
->
-	{@render children?.({ tr: bond as unknown as DatagridContext<T> })}
-</HtmlAtom>