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

package/dist/components/context-menu/context-menu-root.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import {Root} from '../dropdown-menu/atoms'
+	import type { PopoverRootProps } from '../popover';
+
+    let {placement = 'bottom-start', ...restProps}: PopoverRootProps = $props();
+</script>
+
+<Root {placement} {...restProps} />

package/dist/components/context-menu/context-menu-root.svelte.d.ts

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

package/dist/components/context-menu/context-menu-trigger.svelte

@@ -0,0 +1,59 @@
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { Base } from '../atom';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Trigger } from '../popover/atoms';
+	import { DropdownMenuBond } from '../dropdown-menu/bond.svelte';
+	import type { ContextMenuTriggerProps } from './types';
+	import type { BondVirtualElement } from '../../shared/bond.svelte';
+
+	type ElementType = HTMLElementTagNameMap[E];
+
+	const bond = DropdownMenuBond.get();
+
+	if (!bond) {
+		throw new Error('<ContextMenu.Trigger /> must be used within a <ContextMenu.Root />');
+	}
+
+	const dropdownMenuBond = bond;
+
+	const virtualTriggerAtom = dropdownMenuBond.virtualTrigger();
+
+	let {
+		preset = 'context-menu.trigger',
+		onclick = null,
+		oncontextmenu = undefined,
+		class: klass = '',
+		...restProps
+	}: HTMLAttributes<ElementType> & ContextMenuTriggerProps<E, B> = $props();
+
+	function handleContextMenu(ev: MouseEvent) {
+		ev.preventDefault();
+
+		const event = new MouseEvent('contextmenu', ev) as MouseEvent & {
+			currentTarget: MouseEvent & ElementType;
+		};
+		oncontextmenu?.(event);
+
+		if (event.defaultPrevented) return;
+
+		const virtualElement = {
+			getBoundingClientRect: () => ({
+				width: 0,
+				height: 0,
+				x: ev.clientX,
+				y: ev.clientY,
+				top: ev.clientY,
+				left: ev.clientX,
+				right: ev.clientX,
+				bottom: ev.clientY
+			} as DOMRect),
+			contains: () => false
+		} as BondVirtualElement;
+
+		virtualTriggerAtom.element = virtualElement;
+
+		dropdownMenuBond.state.open();
+	}
+</script>
+
+<Trigger {preset} class={['cursor-context-menu', klass]} onclick={onclick ?? undefined} oncontextmenu={handleContextMenu} {...restProps} />

package/dist/components/context-menu/context-menu-trigger.svelte.d.ts

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

package/dist/components/context-menu/index.d.ts

@@ -0,0 +1,2 @@
+export * as ContextMenu from './atoms';
+export * from './types';

package/dist/components/context-menu/index.js

@@ -0,0 +1,2 @@
+export * as ContextMenu from './atoms';
+export * from './types';

package/dist/components/{contextmenu → context-menu}/types.d.ts

@@ -1,8 +1,3 @@
 import type { HtmlAtomProps, Base } from '../atom';
-/**
- * Extend this interface to add custom contextmenu properties in your application.
- */
-export interface ContextMenuExtendProps {
-}
-export interface ContextMenuTriggerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, ContextMenuExtendProps {
+export interface ContextMenuTriggerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
 }

package/dist/components/datagrid/atoms.d.ts

@@ -1,8 +1,14 @@
 export { default as Body } from './datagrid-body.svelte';
 export { default as Checkbox } from './datagrid-checkbox.svelte';
-export { default as Footer } from './datagrid-footer.svelte';
-export { default as Header } from './datagrid-header.svelte';
 export { default as Root } from './datagrid-root.svelte';
-export { Tr } from './tr';
-export { Th } from './th';
-export { Td } from './td';
+/** @deprecated Use `Row` instead */
+export { Tr } from './row';
+/** @deprecated Use `Column` instead */
+export { Th } from './column';
+/** @deprecated Use `Cell` instead */
+export { Td } from './cell';
+export { default as Header } from './datagrid-header.svelte';
+export { default as Footer } from './datagrid-footer.svelte';
+export { Row } from './row';
+export { Column } from './column';
+export { Cell } from './cell';

package/dist/components/datagrid/atoms.js

@@ -1,8 +1,14 @@
 export { default as Body } from './datagrid-body.svelte';
 export { default as Checkbox } from './datagrid-checkbox.svelte';
-export { default as Footer } from './datagrid-footer.svelte';
-export { default as Header } from './datagrid-header.svelte';
 export { default as Root } from './datagrid-root.svelte';
-export { Tr } from './tr';
-export { Th } from './th';
-export { Td } from './td';
+/** @deprecated Use `Row` instead */
+export { Tr } from './row';
+/** @deprecated Use `Column` instead */
+export { Th } from './column';
+/** @deprecated Use `Cell` instead */
+export { Td } from './cell';
+export { default as Header } from './datagrid-header.svelte';
+export { default as Footer } from './datagrid-footer.svelte';
+export { Row } from './row';
+export { Column } from './column';
+export { Cell } from './cell';

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

@@ -1,6 +1,6 @@
-import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
-import type { DataGridTrBond } from './tr/bond.svelte';
-import type { DataGridThBond } from './th/bond.svelte';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../shared/bond.svelte';
+import type { DataGridRowBond } from './row/bond.svelte';
+import type { DataGridColumnBond } from './column/bond.svelte';
 export type DataGridStateProps<T> = BondStateProps & {
     multiple?: boolean;
     template?: string;
@@ -13,27 +13,42 @@ export type DataGridElements = {
     body: HTMLElement;
     footer: HTMLElement;
 };
+declare class DataGridRootAtom<T = unknown> extends BondAtom<DataGridBond<T>, HTMLElement> {
+    constructor(bond: DataGridBond<T>);
+}
+declare class DataGridHeaderAtom<T = unknown> extends BondAtom<DataGridBond<T>, HTMLElement> {
+    constructor(bond: DataGridBond<T>);
+}
+declare class DataGridBodyAtom<T = unknown> extends BondAtom<DataGridBond<T>, HTMLElement> {
+    constructor(bond: DataGridBond<T>);
+}
+declare class DataGridFooterAtom<T = unknown> extends BondAtom<DataGridBond<T>, HTMLElement> {
+    constructor(bond: DataGridBond<T>);
+}
 export declare class DataGridBond<T = unknown> extends Bond<DataGridStateProps<T>, DataGridBondState<T>, DataGridElements> {
     static CONTEXT_KEY: string;
     constructor(s: DataGridBondState<T>);
     get id(): string;
     share(): this;
-    static get(): DataGridBond | undefined;
-    static set(bond: DataGridBond): DataGridBond;
+    root(): DataGridRootAtom<T>;
+    header(): DataGridHeaderAtom<T>;
+    body(): DataGridBodyAtom<T>;
+    footer(): DataGridFooterAtom<T>;
+    static get<T = unknown>(): DataGridBond<T> | undefined;
+    static set<T = unknown>(bond: DataGridBond<T>): DataGridBond<T>;
 }
 export declare class DataGridBondState<T> extends BondState<DataGridStateProps<T>> {
     #private;
     constructor(props: () => DataGridStateProps<T>);
     get id(): string;
-    get rows(): Map<string, DataGridTrBond<T, import("./tr").DataGridTrBondProps<T>, import("./tr").DataGridTrBondState<T, import("./tr").DataGridTrBondProps<T>>, import("./tr").DataGridTrBondElements>>;
-    get columns(): Map<string, DataGridThBond<T>>;
-    get selectedRows(): DataGridTrBond<T, import("./tr").DataGridTrBondProps<T>, import("./tr").DataGridTrBondState<T, import("./tr").DataGridTrBondProps<T>>, import("./tr").DataGridTrBondElements>[];
-    get sortableColumns(): any;
-    get template(): any;
-    mountColumn(id: string, item: DataGridThBond<T>): () => void;
-    unmountColumn(id: string): void;
-    mountRow(id: string, item: DataGridTrBond<T>): () => void;
-    unmountRow(id: string): void;
+    get rows(): ReadonlyMap<string, DataGridRowBond<T>>;
+    get columns(): ReadonlyMap<string, DataGridColumnBond<T>>;
+    get selectedRows(): readonly DataGridRowBond<T>[];
+    get sortableColumns(): readonly DataGridColumnBond<T>[];
+    get template(): string;
+    mountColumn(id: string, item: DataGridColumnBond<T>): () => void;
+    mountRow(id: string, item: DataGridRowBond<T>): () => void;
     select(ids: string[]): void;
     unselect(ids: string[]): void;
 }
+export {};

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

@@ -1,11 +1,31 @@
 import { SvelteMap } from 'svelte/reactivity';
 import { getContext, setContext } from 'svelte';
-import { Bond, BondState } from '../../shared/bond.svelte';
+import { Bond, BondState, BondAtom } from '../../shared/bond.svelte';
 import { nanoid } from 'nanoid';
+class DataGridRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
+    }
+}
+class DataGridHeaderAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'header');
+    }
+}
+class DataGridBodyAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'body');
+    }
+}
+class DataGridFooterAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'footer');
+    }
+}
 export class DataGridBond extends Bond {
     static CONTEXT_KEY = '@atoms/context/datagrid';
     constructor(s) {
-        super(s);
+        super(s, 'datagrid');
     }
     get id() {
         return this.state.id;
@@ -13,6 +33,18 @@ export class DataGridBond extends Bond {
     share() {
         return DataGridBond.set(this);
     }
+    root() {
+        return this.atom('root', () => new DataGridRootAtom(this));
+    }
+    header() {
+        return this.atom('header', () => new DataGridHeaderAtom(this));
+    }
+    body() {
+        return this.atom('body', () => new DataGridBodyAtom(this));
+    }
+    footer() {
+        return this.atom('footer', () => new DataGridFooterAtom(this));
+    }
     static get() {
         return getContext(DataGridBond.CONTEXT_KEY);
     }
@@ -24,10 +56,12 @@ export class DataGridBondState extends BondState {
     #id = nanoid();
     #rows = new SvelteMap();
     #columns = new SvelteMap();
-    #sortableColumns = $derived(this.#columns.values().filter((d) => d.state.props.sortable));
     #selectedRows = $derived((this.props.values ?? [])
         .map((value) => this.#rows.get(value))
-        .filter(Boolean));
+        .filter((r) => r !== undefined));
+    #sortableColumns = $derived([...this.#columns.values()].filter((col) => col.state.props.sortable));
+    #template = $derived(this.props.template ||
+        [...this.#columns.values()].map((col) => col.state.props.width ?? '1fr').join(' '));
     constructor(props) {
         super(props);
     }
@@ -35,10 +69,10 @@ export class DataGridBondState extends BondState {
         return this.#id;
     }
     get rows() {
-        return new Map(this.#rows);
+        return this.#rows;
     }
     get columns() {
-        return new Map(this.#columns);
+        return this.#columns;
     }
     get selectedRows() {
         return this.#selectedRows;
@@ -47,42 +81,20 @@ export class DataGridBondState extends BondState {
         return this.#sortableColumns;
     }
     get template() {
-        return (this.props.template ||
-            this.#columns
-                .values()
-                .map((col) => col.state.props.width)
-                .toArray()
-                .join(' '));
+        return this.#template;
     }
     mountColumn(id, item) {
         this.#columns.set(id, item);
-        return () => this.unmountColumn(id);
-    }
-    unmountColumn(id) {
-        this.#columns.delete(id);
+        return () => this.#columns.delete(id);
     }
     mountRow(id, item) {
-        if (this.#rows.size && !this.props.value) {
-            this.props.value = item.state.props.value;
-        }
         this.#rows.set(id, item);
-        return () => this.unmountRow(id);
-    }
-    unmountRow(id) {
-        this.#rows.delete(id);
+        return () => this.#rows.delete(id);
     }
     select(ids) {
-        const sequence = new Set(this.props.values ?? []);
-        for (const id of ids) {
-            sequence.add(id);
-        }
-        this.props.values = sequence.values().toArray();
+        this.props.values = [...(this.props.values ?? []), ...ids].filter((value, index, array) => array.indexOf(value) === index);
     }
     unselect(ids) {
-        const sequence = new Set(this.props.values ?? []);
-        for (const id of ids) {
-            sequence.delete(id);
-        }
-        this.props.values = sequence.values().toArray();
+        this.props.values = (this.props.values ?? []).filter((value) => !ids.includes(value));
     }
 }

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

@@ -0,0 +1,29 @@
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../../shared/bond.svelte';
+export type DataGridCellBondProps<T = unknown> = BondStateProps & {
+    data?: T;
+};
+export type DataGridCellElements = {
+    root: HTMLElement;
+};
+export declare class DataGridCellRootAtom<T = unknown> extends BondAtom<DataGridCellBond<T>> {
+    constructor(bond: DataGridCellBond<T>);
+    get attrs(): {
+        'data-kind': string;
+    };
+}
+export declare class DataGridCellBond<T = unknown> extends Bond<DataGridCellBondProps<T>, DataGridCellBondState<T>, DataGridCellElements> {
+    static CONTEXT_KEY: string;
+    constructor(s: DataGridCellBondState<T>);
+    share(): this;
+    root(): DataGridCellRootAtom<T>;
+    static get<T = unknown>(): DataGridCellBond<T> | undefined;
+    static set<T = unknown>(bond: DataGridCellBond<T>): DataGridCellBond<T>;
+}
+export declare class DataGridCellBondState<T = unknown> extends BondState<DataGridCellBondProps<T>> {
+    #private;
+    constructor(props: () => DataGridCellBondProps<T>);
+    get datagrid(): import("..").DataGridBondState<T> | undefined;
+}
+export type DataGridTdBondProps<T = unknown> = DataGridCellBondProps<T>;
+export type DataGridTdElements = DataGridCellElements;
+export { DataGridCellBond as DataGridTdBond, DataGridCellBondState as DataGridTdBondState };

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

@@ -0,0 +1,42 @@
+import { getContext, setContext } from 'svelte';
+import { Bond, BondState, BondAtom } from '../../../shared/bond.svelte';
+import { DataGridBond } from '../bond.svelte';
+export class DataGridCellRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
+    }
+    get attrs() {
+        return {
+            ...super.attrs,
+            'data-kind': 'datagrid-cell'
+        };
+    }
+}
+export class DataGridCellBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/datagrid/cell';
+    constructor(s) {
+        super(s, 'datagrid-cell');
+    }
+    share() {
+        return DataGridCellBond.set(this);
+    }
+    root() {
+        return this.atom('root', () => new DataGridCellRootAtom(this));
+    }
+    static get() {
+        return getContext(DataGridCellBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(DataGridCellBond.CONTEXT_KEY, bond);
+    }
+}
+export class DataGridCellBondState extends BondState {
+    #datagrid = DataGridBond.get();
+    constructor(props) {
+        super(props);
+    }
+    get datagrid() {
+        return this.#datagrid?.state;
+    }
+}
+export { DataGridCellBond as DataGridTdBond, DataGridCellBondState as DataGridTdBondState };

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

@@ -0,0 +1,49 @@
+<script lang="ts" generics="T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { DataGridBond } from '../bond.svelte';
+	import { HtmlAtom, type Base } from '../../atom';
+	import type { DatagridCellProps } from '../types';
+
+	const bond = DataGridBond.get<T>();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onclick = undefined,
+		...restProps
+	}: DatagridCellProps<T, E, B> = $props();
+
+	let element = $state<HTMLElement | undefined>();
+
+	// Find the matching column by this cell's DOM index
+	const column = $derived.by(() => {
+		if (!element || !bond) return undefined;
+
+		const index = Array.from(element.parentElement?.children ?? []).indexOf(element);
+		if (index === -1) return undefined;
+
+		for (const col of bond.state.columns.values()) {
+			if (col.index === index) return col;
+		}
+
+		return undefined;
+	});
+
+	const isHidden = $derived(column?.state.props.hidden ?? false);
+
+	function handleClick(ev: Event) {
+		onclick?.(ev, { ...(bond && { cell: bond }) });
+	}
+</script>
+
+{#if !isHidden}
+	<HtmlAtom
+		{@attach (node) => { element = node; }}
+		{bond}
+		preset="datagrid.cell"
+		class={['border-border flex h-full items-center py-2 text-left', '$preset', klass]}
+		onclick={handleClick}
+		{...restProps}
+	>
+		{@render children?.({ datagrid: bond })}
+	</HtmlAtom>
+{/if}

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

@@ -0,0 +1,26 @@
+import { type Base } from '../../atom';
+import type { DatagridCellProps } from '../types';
+declare function $$render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: DatagridCellProps<T, E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+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 = 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 DatagridCell: $$IsomorphicComponent;
+type DatagridCell<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DatagridCell<T, E, B>>;
+export default DatagridCell;

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

@@ -0,0 +1,4 @@
+/** @deprecated Use `Cell` instead */
+export { default as Td } from './datagrid-cell.svelte';
+export * from './bond.svelte';
+export { default as Cell } from './datagrid-cell.svelte';

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

@@ -0,0 +1,4 @@
+/** @deprecated Use `Cell` instead */
+export { default as Td } from './datagrid-cell.svelte';
+export * from './bond.svelte';
+export { default as Cell } from './datagrid-cell.svelte';

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

@@ -0,0 +1,4 @@
+/** @deprecated Use `Column` instead */
+export { default as Th } from '../column/datagrid-column.svelte';
+export * from '../column/bond.svelte';
+export { default as Column } from '../column/datagrid-column.svelte';

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

@@ -0,0 +1,4 @@
+/** @deprecated Use `Column` instead */
+export { default as Th } from '../column/datagrid-column.svelte';
+export * from '../column/bond.svelte';
+export { default as Column } from '../column/datagrid-column.svelte';

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

@@ -0,0 +1,45 @@
+import type { Direction, SortableType } from '../../../types';
+import { DataGridBond } from '../bond.svelte';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../../shared/bond.svelte';
+export type DataGridColumnBondProps = BondStateProps & {
+    id: string;
+    width?: string;
+    screen?: string;
+    sortable?: boolean | SortableType;
+    hidden?: boolean;
+    direction: Direction;
+};
+export type DataGridColumnElements = {
+    root: HTMLElement;
+};
+export declare class DataGridColumnRootAtom<T = unknown> extends BondAtom<DataGridColumnBond<T>> {
+    constructor(bond: DataGridColumnBond<T>);
+    get attrs(): {
+        'data-kind': string;
+        'data-sortable': string | undefined;
+        'data-direction': Direction;
+    };
+}
+export declare class DataGridColumnBond<T = unknown> extends Bond<DataGridColumnBondProps, DataGridColumnBondState<T>, DataGridColumnElements> {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(s: DataGridColumnBondState<T>);
+    get isHidden(): boolean;
+    get index(): number;
+    get text(): string;
+    get datagrid(): DataGridBond<T>;
+    share(): this;
+    mount(): () => void;
+    root(): DataGridColumnRootAtom<T>;
+    static get<T = unknown>(): DataGridColumnBond<T> | undefined;
+    static set<T = unknown>(bond: DataGridColumnBond<T>): DataGridColumnBond<T>;
+}
+export declare class DataGridColumnBondState<T = unknown> extends BondState<DataGridColumnBondProps> {
+    constructor(props: () => DataGridColumnBondProps);
+    get isSortable(): boolean | SortableType | undefined;
+    asc(): void;
+    desc(): void;
+}
+export type DataGridThBondProps = DataGridColumnBondProps;
+export type DataGridThElements = DataGridColumnElements;
+export { DataGridColumnBond as DataGridThBond, DataGridColumnBondState as DataGridThBondState };

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

@@ -0,0 +1,76 @@
+import { getContext, setContext } from 'svelte';
+import { DataGridBond } from '../bond.svelte';
+import { Bond, BondState, BondAtom } from '../../../shared/bond.svelte';
+export class DataGridColumnRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
+    }
+    get attrs() {
+        const props = this.bond.state.props;
+        return {
+            ...super.attrs,
+            'data-kind': 'datagrid-column',
+            'data-sortable': props.sortable ? 'true' : undefined,
+            'data-direction': props.direction
+        };
+    }
+}
+export class DataGridColumnBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/datagrid/column';
+    #datagrid;
+    constructor(s) {
+        super(s, 'datagrid-column');
+        this.#datagrid = DataGridBond.get();
+    }
+    get isHidden() {
+        const el = this.elements.root;
+        if (!(el instanceof HTMLElement))
+            return false;
+        return Boolean(el.hidden) || getComputedStyle(el).display === 'none';
+    }
+    get index() {
+        const el = this.elements.root;
+        return el ? Array.from(el.parentElement?.children ?? []).indexOf(el) : -1;
+    }
+    get text() {
+        const el = this.elements.root;
+        return el instanceof HTMLElement ? el.innerText : '';
+    }
+    get datagrid() {
+        return this.#datagrid;
+    }
+    share() {
+        return DataGridColumnBond.set(this);
+    }
+    mount() {
+        return this.#datagrid.state.mountColumn(this.state.id, this);
+    }
+    root() {
+        return this.atom('root', () => new DataGridColumnRootAtom(this));
+    }
+    static get() {
+        return getContext(DataGridColumnBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(DataGridColumnBond.CONTEXT_KEY, bond);
+    }
+}
+export class DataGridColumnBondState extends BondState {
+    constructor(props) {
+        super(props);
+        const datagrid = DataGridBond.get();
+        if (!datagrid) {
+            throw new Error('DataGridColumnBond must be used within a DataGridBond context.');
+        }
+    }
+    get isSortable() {
+        return this.props.sortable;
+    }
+    asc() {
+        this.props.direction = 'asc';
+    }
+    desc() {
+        this.props.direction = 'desc';
+    }
+}
+export { DataGridColumnBond as DataGridThBond, DataGridColumnBondState as DataGridThBondState };