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

package/dist/components/tabs/types.d.ts

@@ -1,50 +1,33 @@
 import type { Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
 import type { Factory } from '../../types';
 import type { TabsBond } from './bond.svelte';
 import type { TabBond } from './tab/bond.svelte';
-export interface TabsRootProps<D extends string = string, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
+export interface TabsSnippetProps extends SnippetProps {
+    tabs: TabsBond;
+}
+export type TabsChildren = Snippet<[TabsSnippetProps]>;
+export interface TabSnippetProps extends SnippetProps {
+    tab: TabBond<unknown> | undefined;
+}
+export type TabChildren = Snippet<[TabSnippetProps]>;
+export interface TabsRootProps<D extends string = string, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, TabsChildren> {
     value?: D;
     factory?: Factory<TabsBond>;
-    children?: Snippet<[{
-        tabs: TabsBond;
-    }]>;
     onchange?: (value: D) => void;
 }
-export interface TabHeaderProps<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> extends HtmlAtomProps<E, B> {
-    children?: Snippet<[{
-        tab?: TabBond<unknown>;
-    }]>;
+export interface TabHeaderProps<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> extends HtmlAtomProps<E, B, TabChildren> {
     onpointerdown?: (ev: PointerEvent, context: {
         tab?: TabBond<unknown>;
     }) => void;
 }
-export interface TabBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
-    children?: Snippet<[{
-        tab?: TabBond<unknown>;
-    }]>;
+export interface TabBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, TabChildren> {
+}
+export interface TabDescriptionProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B, TabChildren> {
+}
+export interface TabsHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, TabsChildren> {
+}
+export interface TabsBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, TabsChildren> {
+}
+export interface TabsContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, TabsChildren> {
 }
-export interface TabDescriptionProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B> {
-    children?: Snippet<[{
-        tab?: TabBond<unknown>;
-    }]>;
-}
-export interface TabsHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
-    children?: Snippet<[{
-        tabs?: TabsBond;
-    }]>;
-}
-export interface TabsBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
-    children?: Snippet<[{
-        tabs?: TabsBond;
-    }]>;
-}
-export interface TabsContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
-    children?: Snippet<[{
-        tabs?: TabsBond;
-    }]>;
-}
-/**
- * @deprecated Use TabsRootExtendProps instead
- */
-export type TabsExtendProps = TabsRootProps;

package/dist/components/textarea/types.d.ts

@@ -1,17 +1,11 @@
-import type { HtmlAtomProps, Base } from '../atom';
-/**
- * Extend this interface to add custom textarea root properties in your application.
- */
-export interface TextareaRootExtendProps {
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
+import type { Snippet } from 'svelte';
+export interface TextareaSnippetProps extends SnippetProps {
 }
-/**
- * Extend this interface to add custom textarea input properties in your application.
- */
-export interface TextareaInputExtendProps {
+export type TextareaChildren = Snippet<[TextareaSnippetProps]>;
+export interface TextareaRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, TextareaChildren> {
 }
-export interface TextareaRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, TextareaRootExtendProps {
-}
-export interface TextareaInputProps extends TextareaInputExtendProps {
+export interface TextareaInputProps {
     value?: string;
     placeholder?: string;
     disabled?: boolean;

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

@@ -1,3 +1,4 @@
 export { default as Root } from './toast-root.svelte';
 export { default as Title } from './toast-title.svelte';
 export { default as Description } from './toast-description.svelte';
+export { default as Toaster } from './toast-toaster.svelte';

package/dist/components/toast/atoms.js

@@ -1,3 +1,4 @@
 export { default as Root } from './toast-root.svelte';
 export { default as Title } from './toast-title.svelte';
 export { default as Description } from './toast-description.svelte';
+export { default as Toaster } from './toast-toaster.svelte';

package/dist/components/toast/index.d.ts

@@ -1,2 +1,3 @@
 export * as Toast from './atoms';
 export * from './types';
+export { toast, toastManager, type ToastPosition, type ToastType, type ToastOptions, type ToastItem } from './manager.svelte';

package/dist/components/toast/index.js

@@ -1,2 +1,3 @@
 export * as Toast from './atoms';
 export * from './types';
+export { toast, toastManager } from './manager.svelte';

package/dist/components/toast/manager.svelte.d.ts

@@ -0,0 +1,38 @@
+import { ToastBond } from './bond';
+export type ToastType = 'info' | 'success' | 'error' | 'warning' | 'default';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastItem {
+    id: string;
+    type: ToastType;
+    title?: string | undefined;
+    description?: string | undefined;
+    duration: number;
+    dismissible: boolean;
+    bond: ToastBond;
+    open: boolean;
+}
+export interface ToastOptions {
+    id?: string;
+    description?: string;
+    duration?: number;
+    dismissible?: boolean;
+}
+declare class ToastManager {
+    #private;
+    get toasts(): ToastItem[];
+    add(title: string, type?: ToastType, options?: ToastOptions): string;
+    dismiss(id: string): void;
+    dismissAll(): void;
+    remove(id: string): void;
+}
+export declare const toastManager: ToastManager;
+export declare function toast(title: string, options?: ToastOptions): string;
+export declare namespace toast {
+    var info: (title: string, options?: ToastOptions) => string;
+    var success: (title: string, options?: ToastOptions) => string;
+    var error: (title: string, options?: ToastOptions) => string;
+    var warning: (title: string, options?: ToastOptions) => string;
+    var dismiss: (id: string) => void;
+    var dismissAll: () => void;
+}
+export {};

package/dist/components/toast/manager.svelte.js

@@ -0,0 +1,82 @@
+import { nanoid } from 'nanoid';
+import { ToastBond, ToastBondState } from './bond';
+import { defineProperty, defineState } from '../../utils';
+const DEFAULT_DURATION = 4000;
+class ToastManager {
+    #toasts = $state([]);
+    get toasts() {
+        return this.#toasts;
+    }
+    add(title, type = 'default', options = {}) {
+        const id = options.id ?? nanoid(8);
+        // If a toast with this id already exists, update it
+        const existing = this.#toasts.find((t) => t.id === id);
+        if (existing) {
+            existing.title = title;
+            existing.type = type;
+            if (options.description !== undefined)
+                existing.description = options.description;
+            return id;
+        }
+        const duration = options.duration ?? DEFAULT_DURATION;
+        const dismissible = options.dismissible ?? true;
+        let open = $state(true);
+        const bondProps = defineState([
+            defineProperty('open', () => open, (v) => {
+                open = v;
+                if (!v) {
+                    // Remove after exit animation completes
+                    setTimeout(() => this.remove(id), 300);
+                }
+            })
+        ], () => ({ disabled: false, extend: {} }));
+        const bondState = new ToastBondState(() => bondProps);
+        const bond = new ToastBond(bondState);
+        const item = {
+            id,
+            type,
+            title,
+            description: options.description,
+            duration,
+            dismissible,
+            bond,
+            get open() {
+                return open;
+            }
+        };
+        this.#toasts.push(item);
+        // Auto-dismiss
+        if (duration > 0) {
+            setTimeout(() => {
+                open = false;
+            }, duration);
+        }
+        return id;
+    }
+    dismiss(id) {
+        const item = this.#toasts.find((t) => t.id === id);
+        if (item) {
+            item.bond.state.close();
+        }
+    }
+    dismissAll() {
+        for (const item of this.#toasts) {
+            item.bond.state.close();
+        }
+    }
+    remove(id) {
+        this.#toasts = this.#toasts.filter((t) => t.id !== id);
+    }
+}
+// Singleton manager instance
+export const toastManager = new ToastManager();
+// Imperative API
+export function toast(title, options) {
+    return toastManager.add(title, 'default', options);
+}
+toast.info = (title, options) => toastManager.add(title, 'info', options);
+toast.success = (title, options) => toastManager.add(title, 'success', options);
+toast.error = (title, options) => toastManager.add(title, 'error', options);
+toast.warning = (title, options) => toastManager.add(title, 'warning', options);
+toast.dismiss = (id) => toastManager.dismiss(id);
+toast.dismissAll = () => toastManager.dismissAll();

package/dist/components/toast/toast-description.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ToastDescriptionProps } from './types';
 declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
-    props: ToastDescriptionProps<T, import("../atom").ComponentBase | import("../atom").SnippetBase> & HTMLAttributes<HTMLElementTagNameMap[T]>;
+    props: ToastDescriptionProps<T, import("../atom").SnippetBase> & HTMLAttributes<HTMLElementTagNameMap[T]>;
     exports: {
         ToastDescriptionProps: typeof ToastDescriptionProps;
     };

package/dist/components/toast/toast-root-managed.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { HtmlAtom } from '../atom';
+	import type { ToastItem } from './manager.svelte';
+
+	let { item }: { item: ToastItem } = $props();
+
+	const typeClasses: Record<string, string> = {
+		default: 'border-border bg-card text-foreground',
+		info: 'border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-100',
+		success: 'border-green-200 bg-green-50 text-green-900 dark:border-green-800 dark:bg-green-950 dark:text-green-100',
+		error: 'border-red-200 bg-red-50 text-red-900 dark:border-red-800 dark:bg-red-950 dark:text-red-100',
+		warning: 'border-yellow-200 bg-yellow-50 text-yellow-900 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-100'
+	};
+</script>
+
+<HtmlAtom
+	as="li"
+	{...item.bond.root()}
+	preset="toast.item"
+	class={[
+		'pointer-events-auto flex w-80 max-w-sm flex-col gap-1 rounded-md border p-4 shadow-md transition-all duration-200',
+		typeClasses[item.type] ?? typeClasses.default,
+		!item.open && 'opacity-0 translate-y-2',
+		'$preset'
+	]}
+	role="status"
+	aria-live="polite"
+>
+	{#if item.title}
+		<HtmlAtom
+			as="p"
+			{...item.bond.title()}
+			preset="toast.title"
+			class={['font-medium text-sm leading-tight', '$preset']}
+		>
+			{item.title}
+		</HtmlAtom>
+	{/if}
+
+	{#if item.description}
+		<HtmlAtom
+			as="p"
+			{...item.bond.description()}
+			preset="toast.description"
+			class={['text-sm opacity-80', '$preset']}
+		>
+			{item.description}
+		</HtmlAtom>
+	{/if}
+
+	{#if item.dismissible}
+		<button
+			class="absolute top-2 right-2 rounded p-1 opacity-50 hover:opacity-100 transition-opacity"
+			type="button"
+			aria-label="Dismiss notification"
+			onclick={() => item.bond.state.close()}
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+				<line x1="18" y1="6" x2="6" y2="18"></line>
+				<line x1="6" y1="6" x2="18" y2="18"></line>
+			</svg>
+		</button>
+	{/if}
+</HtmlAtom>

package/dist/components/toast/toast-root-managed.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ToastItem } from './manager.svelte';
+type $$ComponentProps = {
+    item: ToastItem;
+};
+declare const ToastRootManaged: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToastRootManaged = ReturnType<typeof ToastRootManaged>;
+export default ToastRootManaged;

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

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ToastRootProps } from './types';
 declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
-    props: ToastRootProps<T, import("../atom").ComponentBase | import("../atom").SnippetBase> & HTMLAttributes<HTMLElementTagNameMap[T]>;
+    props: ToastRootProps<T, import("../atom").SnippetBase> & HTMLAttributes<HTMLElementTagNameMap[T]>;
     exports: {
         getBond: () => any;
     };

package/dist/components/toast/toast-title.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ToastTitleProps } from './types';
 declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
-    props: ToastTitleProps<T, import("../atom").ComponentBase | import("../atom").SnippetBase> & HTMLAttributes<HTMLElementTagNameMap[T]>;
+    props: ToastTitleProps<T, import("../atom").SnippetBase> & HTMLAttributes<HTMLElementTagNameMap[T]>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/components/toast/toast-toaster.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { HtmlAtom } from '../atom';
+	import { toastManager, type ToastPosition } from './manager.svelte';
+	import type { ToasterProps } from './types';
+	import ToastRootManaged from './toast-root-managed.svelte';
+
+	let {
+		class: klass = '',
+		position = 'bottom-right' as ToastPosition,
+		gap = 8,
+		...restProps
+	}: ToasterProps = $props();
+
+	const positionClasses: Record<ToastPosition, string> = {
+		'top-left': 'top-0 left-0 items-start',
+		'top-center': 'top-0 left-1/2 -translate-x-1/2 items-center',
+		'top-right': 'top-0 right-0 items-end',
+		'bottom-left': 'bottom-0 left-0 items-start',
+		'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2 items-center',
+		'bottom-right': 'bottom-0 right-0 items-end'
+	};
+</script>
+
+<HtmlAtom
+	as="ol"
+	class={[
+		'pointer-events-none fixed z-50 flex flex-col p-4',
+		positionClasses[position],
+		'$preset',
+		klass
+	]}
+	preset="toast.toaster"
+	style={`gap: ${gap}px`}
+	aria-label="Notifications"
+	aria-live="polite"
+	aria-atomic="false"
+	{...restProps}
+>
+	{#each toastManager.toasts as item (item.id)}
+		<ToastRootManaged {item} />
+	{/each}
+</HtmlAtom>

package/dist/components/toast/toast-toaster.svelte.d.ts

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

package/dist/components/toast/types.d.ts

@@ -1,40 +1,31 @@
 import type { Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
 import type { Override } from '../../types';
 import type { ToastBond } from './bond';
-/**
- * Extend this interface to add custom toast root properties in your application.
- */
-export interface ToastRootExtendProps {
+import type { ToastPosition } from './manager.svelte';
+export interface ToastSnippetProps extends SnippetProps {
+    toast: ToastBond | undefined;
 }
-/**
- * Extend this interface to add custom toast title properties in your application.
- */
-export interface ToastTitleExtendProps {
-}
-/**
- * Extend this interface to add custom toast description properties in your application.
- */
-export interface ToastDescriptionExtendProps {
-}
-export interface ToastRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        toast?: ToastBond;
-    }]>;
-}>, ToastRootExtendProps {
+export type ToastChildren = Snippet<[ToastSnippetProps]>;
+export interface ToastRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B, ToastChildren>, {
+    children?: ToastChildren;
+}> {
     dismissible?: boolean;
+    /** Auto-dismiss duration in ms. Set to 0 to disable auto-dismiss. Default: 4000 */
     duration?: number;
-    onclose?: () => void;
+    onclose?: () => void | undefined;
+}
+export interface ToastTitleProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B, ToastChildren>, {
+    children?: ToastChildren;
+}> {
 }
-export interface ToastTitleProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        toast: ToastBond;
-    }]>;
-}>, ToastTitleExtendProps {
+export interface ToastDescriptionProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B, ToastChildren>, {
+    children?: ToastChildren;
+}> {
 }
-export interface ToastDescriptionProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        toast?: ToastBond;
-    }]>;
-}>, ToastDescriptionExtendProps {
+export interface ToasterProps extends HtmlAtomProps<'ol'> {
+    /** Position of the toast stack on screen. Default: 'bottom-right' */
+    position?: ToastPosition | undefined;
+    /** Gap between toasts in px. Default: 8 */
+    gap?: number | undefined;
 }

package/dist/components/tooltip/index.d.ts

@@ -1 +1,2 @@
 export * as Tooltip from './atoms';
+export type { TooltipSnippetProps, TooltipChildren } from './types';

package/dist/components/tooltip/tooltip-trigger.svelte

@@ -1,39 +1,39 @@
-<script lang="ts">
-	import { PopoverBond } from '../popover/bond.svelte';
-	import { Trigger } from '../popover/atoms';
-
-	const popoverBond = PopoverBond.get();
-
-	let { preset = 'tooltip.trigger', onmount, children, onclick = undefined, ...restProps } = $props();
-
-	function tooltip(node: HTMLElement) {
-		const onpointerenter = async () => {
-			requestAnimationFrame(() => {
-				popoverBond?.state.open();
-			});
-			node.addEventListener('pointerleave', onpointerleave);
-		};
-		const onpointerleave = () => {
-			popoverBond?.state.close();
-			node.removeEventListener('pointerleave', onpointerleave);
-		};
-
-		node.addEventListener('pointerenter', onpointerenter, { passive: true });
-
-		const cleanup = () => {
-			node.removeEventListener('pointerenter', onpointerenter);
-			node.removeEventListener('pointerleave', onpointerleave);
-		};
-
-		const unmount = onmount?.(node);
-
-		return () => {
-			cleanup?.();
-			unmount?.();
-		};
-	}
-</script>
-
-<Trigger preset={preset} onmount={tooltip} {onclick} {...restProps}>
-	{@render children?.()}
-</Trigger>
+<script lang="ts">
+	import { PopoverBond } from '../popover/bond.svelte';
+	import { Trigger } from '../popover/atoms';
+
+	const popoverBond = PopoverBond.get();
+
+	let { preset = 'tooltip.trigger', onmount, children, onclick = undefined, ...restProps } = $props();
+
+	function tooltip(node: HTMLElement) {
+		const onpointerenter = async () => {
+			requestAnimationFrame(() => {
+				popoverBond?.state.open();
+			});
+			node.addEventListener('pointerleave', onpointerleave);
+		};
+		const onpointerleave = () => {
+			popoverBond?.state.close();
+			node.removeEventListener('pointerleave', onpointerleave);
+		};
+
+		node.addEventListener('pointerenter', onpointerenter, { passive: true });
+
+		const cleanup = () => {
+			node.removeEventListener('pointerenter', onpointerenter);
+			node.removeEventListener('pointerleave', onpointerleave);
+		};
+
+		const unmount = onmount?.(node);
+
+		return () => {
+			cleanup?.();
+			unmount?.();
+		};
+	}
+</script>
+
+<Trigger preset={preset} onmount={tooltip} {onclick} {...restProps}>
+	{@render children?.()}
+</Trigger>

package/dist/components/tooltip/types.d.ts

@@ -1,13 +1,10 @@
 import type { Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
-/**
- * Extend this interface to add custom tooltip properties in your application.
- */
-export interface TooltipExtendProps {
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
+export interface TooltipSnippetProps extends SnippetProps {
 }
-export interface TooltipTriggerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'>, TooltipExtendProps {
-    content?: string | Snippet<[]>;
+export type TooltipChildren = Snippet<[TooltipSnippetProps]>;
+export interface TooltipTriggerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, TooltipChildren> {
+    content?: string | Snippet<[TooltipSnippetProps]>;
     placement?: 'top' | 'bottom' | 'left' | 'right';
     delay?: number;
-    children?: Snippet<[]>;
 }

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

@@ -1,4 +1,4 @@
-import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../shared/bond.svelte';
 export type TreeBondProps = BondStateProps & {
     open: boolean;
     disabled: boolean;
@@ -10,34 +10,42 @@ export type TreeBondElements = {
     body: HTMLElement;
     indicator: HTMLElement;
 };
-export declare class TreeBond<Props extends TreeBondProps = TreeBondProps, State extends TreeBondState<Props> = TreeBondState<Props>, Elements extends TreeBondElements = TreeBondElements> extends Bond<TreeBondProps, State, Elements> {
-    #private;
-    static CONTEXT_KEY: string;
-    constructor(s: State);
-    get parent(): this | undefined;
-    share(): this;
-    root(props?: Record<string, unknown>): {
-        id: string;
+declare class TreeRootAtom extends BondAtom<TreeBond, HTMLElement> {
+    constructor(bond: TreeBond);
+    get attrs(): {
         'aria-labelledby': string;
         'aria-expanded': boolean;
         'aria-disabled': boolean;
-        'aria-label': unknown;
-        'data-kind': string;
     };
-    header(props?: Record<string, unknown>): {
-        id: string;
+}
+declare class TreeHeaderAtom extends BondAtom<TreeBond, HTMLElement> {
+    constructor(bond: TreeBond);
+    get attrs(): {
         'aria-controls': string;
-        'data-kind': string;
         role: string;
         tabindex: number;
     };
-    body(props?: Record<string, unknown>): {
-        id: string;
-        'data-kind': string;
-        role: string;
+}
+declare class TreeBodyAtom extends BondAtom<TreeBond, HTMLElement> {
+    constructor(bond: TreeBond);
+    get attrs(): {
+        role: "group";
         'aria-controlled-by': string;
     };
-    indicator(props?: Record<string, unknown>): {};
+}
+declare class TreeIndicatorAtom extends BondAtom<TreeBond, HTMLElement> {
+    constructor(bond: TreeBond);
+}
+export declare class TreeBond<Props extends TreeBondProps = TreeBondProps, State extends TreeBondState<Props> = TreeBondState<Props>, Elements extends TreeBondElements = TreeBondElements> extends Bond<TreeBondProps, State, Elements> {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(s: State);
+    get parent(): this | undefined;
+    share(): this;
+    root(): TreeRootAtom;
+    header(): TreeHeaderAtom;
+    body(): TreeBodyAtom;
+    indicator(): TreeIndicatorAtom;
     static get(): TreeBond | undefined;
     static set(bond: TreeBond): TreeBond;
 }
@@ -47,3 +55,4 @@ export declare class TreeBondState<Props extends TreeBondProps> extends BondStat
     close(): void;
     toggle(): void;
 }
+export {};