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

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

@@ -1,6 +1,6 @@
-import type { TabBond } from './tab/bond.svelte';
-import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
 import type { Snippet } from 'svelte';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../shared/bond.svelte';
+import type { TabBond } from './tab/bond.svelte';
 export type TabsBondProps<T extends Record<string, unknown> = Record<string, unknown>> = BondStateProps & {
     value?: string | undefined;
     multiple?: boolean;
@@ -18,25 +18,34 @@ export type TabContentSnippet = {
         tab?: TabBond;
     }]>;
 };
-export declare class TabsBond<T = unknown> extends Bond<TabsBondProps, TabsBondState<T>, TabElements> {
-    static CONTEXT_KEY: string;
-    constructor(s: TabsBondState<T>);
-    share(): this;
-    root(props?: Record<string, unknown>): {
-        id: string;
+export declare class TabsRootAtom extends BondAtom<TabsBond> {
+    constructor(bond: TabsBond);
+    get attrs(): {
         'aria-orientation': "horizontal";
-        'data-kind': string;
     };
-    header(props?: Record<string, unknown>): {
-        id: string;
+}
+export declare class TabsHeaderAtom extends BondAtom<TabsBond> {
+    constructor(bond: TabsBond);
+    get attrs(): {
         role: string;
-        'data-kind': string;
     };
-    body(props?: Record<string, unknown>): {
-        id: string;
+}
+export declare class TabsBodyAtom extends BondAtom<TabsBond> {
+    constructor(bond: TabsBond);
+    get attrs(): {
         role: string;
-        'data-kind': string;
     };
+}
+export declare class TabsBond<T = unknown> extends Bond<TabsBondProps, TabsBondState<T>, TabElements> {
+    static CONTEXT_KEY: string;
+    constructor(s: TabsBondState<T>);
+    share(): this;
+    /** Handle for granular access to root attrs and attachment */
+    root(): TabsRootAtom;
+    /** Handle for granular access to header attrs and attachment */
+    header(): TabsHeaderAtom;
+    /** Handle for granular access to body attrs and attachment */
+    body(): TabsBodyAtom;
     static get(): TabsBond | undefined;
     static set(bond: TabsBond): TabsBond;
 }
@@ -44,14 +53,24 @@ export declare class TabsBondState<T> extends BondState<TabsBondProps> {
     #private;
     constructor(props: () => TabsBondProps);
     get selectedItem(): TabBond<T>;
-    get activeTabContent(): TabContentSnippet | undefined;
+    get tabContents(): MapIterator<{
+        value: string;
+        render: Snippet<[Record<string, unknown>]>;
+        props: Record<string, unknown>;
+    }>;
+    get activeTabContent(): {
+        value: string;
+        render: Snippet<[Record<string, unknown>]>;
+        props: Record<string, unknown>;
+    } | undefined;
     mountItem<I extends T>(id: string, item: TabBond<I>): () => void;
     unmountItem(id: string): void;
     select(id: string): void;
     unselect(): void;
-    registerTabContent(id: string, props: Record<string, unknown>, children: Snippet<[{
-        tab?: TabBond;
-    }]>): void;
+    registerTabContent(id: string, content: {
+        render: Snippet<[Record<string, unknown>]>;
+        props: Record<string, unknown>;
+    }): void;
     unregisterTabContent(id: string): void;
     getTab(id: string): TabBond<T> | undefined;
 }

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

@@ -1,58 +1,59 @@
-import { SvelteMap } from 'svelte/reactivity';
-import { createAttachmentKey } from 'svelte/attachments';
 import { getContext, setContext } from 'svelte';
-import { getElementId } from '../../utils/dom.svelte';
-import { Bond, BondState } from '../../shared/bond.svelte';
-const TABS_ELEMENTS_KIND = {
-    root: 'tabs-root',
-    content: 'tabs-content',
-    header: 'tabs-header',
-    body: 'tabs-body'
-};
-export class TabsBond extends Bond {
-    static CONTEXT_KEY = '@atoms/bonds/tabs';
-    constructor(s) {
-        super(s);
-    }
-    share() {
-        return TabsBond.set(this);
+import { SvelteMap } from 'svelte/reactivity';
+import { Bond, BondState, BondAtom } from '../../shared/bond.svelte';
+export class TabsRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
     }
-    root(props = {}) {
-        const id = getElementId(this.id, TABS_ELEMENTS_KIND.root);
+    get attrs() {
         return {
-            id,
-            'aria-orientation': 'horizontal',
-            'data-kind': TABS_ELEMENTS_KIND.root,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
+            ...super.attrs,
+            'aria-orientation': 'horizontal'
         };
     }
-    header(props = {}) {
-        const id = getElementId(this.id, TABS_ELEMENTS_KIND.header);
+}
+export class TabsHeaderAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'header');
+    }
+    get attrs() {
         return {
-            id,
-            role: 'tablist',
-            'data-kind': TABS_ELEMENTS_KIND.header,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.header = node;
-            }
+            ...super.attrs,
+            role: 'tablist'
         };
     }
-    body(props = {}) {
-        const id = getElementId(this.id, TABS_ELEMENTS_KIND.body);
+}
+export class TabsBodyAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'body');
+    }
+    get attrs() {
         return {
-            id,
-            role: 'group',
-            'data-kind': TABS_ELEMENTS_KIND.body,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.body = node;
-            }
+            ...super.attrs,
+            role: 'group'
         };
     }
+}
+export class TabsBond extends Bond {
+    static CONTEXT_KEY = '@atoms/bonds/tabs';
+    constructor(s) {
+        super(s, 'tabs');
+    }
+    share() {
+        return TabsBond.set(this);
+    }
+    /** Handle for granular access to root attrs and attachment */
+    root() {
+        return this.atom('root', () => new TabsRootAtom(this));
+    }
+    /** Handle for granular access to header attrs and attachment */
+    header() {
+        return this.atom('header', () => new TabsHeaderAtom(this));
+    }
+    /** Handle for granular access to body attrs and attachment */
+    body() {
+        return this.atom('body', () => new TabsBodyAtom(this));
+    }
     static get() {
         return getContext(TabsBond.CONTEXT_KEY);
     }
@@ -70,6 +71,9 @@ export class TabsBondState extends BondState {
     get selectedItem() {
         return this.#selectedItem;
     }
+    get tabContents() {
+        return this.#tabContents.values();
+    }
     get activeTabContent() {
         return this.props?.value ? this.#tabContents.get(this.props.value) : undefined;
     }
@@ -89,8 +93,11 @@ export class TabsBondState extends BondState {
     unselect() {
         this.props.value = undefined;
     }
-    registerTabContent(id, props, children) {
-        this.#tabContents.set(id, { props, children });
+    registerTabContent(id, content) {
+        this.#tabContents.set(id, {
+            value: id,
+            ...content
+        });
     }
     unregisterTabContent(id) {
         this.#tabContents.delete(id);

package/dist/components/tabs/tab/attachments.svelte.d.ts

@@ -1,3 +1,6 @@
 import { TabsBond } from '../bond.svelte';
-import type { TabBond } from './bond.svelte';
-export declare function tab(callback: (node: HTMLElement, tab?: TabBond, tabs?: TabsBond) => any): (node: HTMLElement) => any;
+import { TabBond } from './bond.svelte';
+export declare function tab(callback: (node: HTMLElement, { tab, tabs }: {
+    tab?: TabBond<unknown> | undefined;
+    tabs?: TabsBond<unknown> | undefined;
+}) => any): (node: HTMLElement) => any;

package/dist/components/tabs/tab/attachments.svelte.js

@@ -1,6 +1,7 @@
 import { TabsBond } from '../bond.svelte';
+import { TabBond } from './bond.svelte';
 export function tab(callback) {
-    const bond = TabsBond.get();
-    const tabs = bond.tabs;
-    return (node) => callback(node, bond, tabs);
+    const tabBond = TabBond.get();
+    const tabsBond = TabsBond.get();
+    return (node) => callback(node, { tab: tabBond, tabs: tabsBond });
 }

package/dist/components/tabs/tab/bond.svelte.d.ts

@@ -1,4 +1,5 @@
-import { Bond, BondState, type BondStateProps } from '../../../shared/bond.svelte';
+import { TabsBond } from '../bond.svelte';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../../shared/bond.svelte';
 export type TabBondProps<T, S extends Record<string, unknown> = Record<string, unknown>> = BondStateProps & {
     value: string;
     disabled?: boolean;
@@ -10,39 +11,49 @@ export type TabBondElement = {
     body: HTMLElement;
     description: HTMLElement;
 };
-export declare class TabBond<T = unknown> extends Bond<TabBondProps<T>, TabBondState<T>, TabBondElement> {
-    #private;
-    static CONTEXT_KEY: string;
-    constructor(state: TabBondState<T>);
-    get text(): string;
-    mount(): (() => void) | undefined;
-    unmount(): void;
-    share(): this;
-    header(): {
-        [x: symbol]: (node: HTMLElement) => (() => void) | undefined;
-        id: string;
-        role: string;
+declare class TabHeaderAtom extends BondAtom<TabBond, HTMLElement> {
+    constructor(bond: TabBond);
+    get attrs(): {
+        role: "tab";
         'aria-controls': string;
         'aria-disabled': boolean;
         'data-controler-id': string | undefined;
         'data-active': boolean;
-        'data-kind': string;
     };
-    body(): {
-        [x: symbol]: (node: HTMLElement) => void;
-        id: string;
-        role: string;
+    get handlers(): {
+        onclick: () => void;
+    };
+    onmount(node: HTMLElement): void | (() => void);
+}
+declare class TabBodyAtom extends BondAtom<TabBond, HTMLElement> {
+    constructor(bond: TabBond);
+    get attrs(): {
+        role: "tabpanel";
         'aria-labeledby': string;
         'aria-describedby': string;
         'aria-controledby': string;
         'data-active': boolean;
-        'data-kind': string;
     };
-    description(): {
-        [x: symbol]: (node: HTMLElement) => void;
-        id: string;
-        'data-kind': string;
+}
+declare class TabDescriptionAtom extends BondAtom<TabBond, HTMLElement> {
+    constructor(bond: TabBond);
+    get attrs(): {
+        [x: string]: unknown;
     };
+}
+export declare class TabBond<T = unknown> extends Bond<TabBondProps<T>, TabBondState<T>, TabBondElement> {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(state: TabBondState<T>);
+    get tabs(): TabsBond<T> | undefined;
+    get value(): string;
+    get text(): any;
+    mount(): (() => void) | undefined;
+    unmount(): void;
+    share(): this;
+    header(): TabHeaderAtom;
+    body(): TabBodyAtom;
+    description(): TabDescriptionAtom;
     static get(): TabBond | undefined;
     static set(bond: TabBond): TabBond;
 }
@@ -54,3 +65,4 @@ export declare class TabBondState<T> extends BondState<TabBondProps<T>> {
     select(): void;
     unselect(): void;
 }
+export {};

package/dist/components/tabs/tab/bond.svelte.js

@@ -1,26 +1,91 @@
-import { getContext, setContext } from 'svelte';
-import { createAttachmentKey } from 'svelte/attachments';
+import { getContext, setContext, untrack } from 'svelte';
 import { TabsBond, TabsBondState } from '../bond.svelte';
 import { getElementId } from '../../../utils/dom.svelte';
 import { portal } from '../../../attachments/portal.svelte';
-import { Bond, BondState } from '../../../shared/bond.svelte';
-const TAB_ELEMENTS_KIND = {
-    header: 'tab-header',
-    body: 'tab-body',
-    description: 'tab-description'
-};
+import { Bond, BondState, BondAtom } from '../../../shared/bond.svelte';
+class TabHeaderAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'header');
+    }
+    get attrs() {
+        const bond = this.bond;
+        const state = untrack(() => bond.state);
+        const props = untrack(() => state.props);
+        const tabBodyId = getElementId(bond.id, 'tab-body');
+        return {
+            ...super.attrs,
+            role: 'tab',
+            'aria-controls': tabBodyId,
+            'aria-disabled': props.disabled ?? false,
+            'data-controler-id': bond.tabs?.id,
+            'data-active': state.isActive
+        };
+    }
+    get handlers() {
+        const isDisabled = untrack(() => this.bond.state?.props).disabled ?? false;
+        return {
+            onclick: () => {
+                if (isDisabled)
+                    return;
+                this.bond.state.select();
+            }
+        };
+    }
+    onmount(node) {
+        const headerElement = this.bond.tabs?.element('header');
+        if (!headerElement) {
+            node.hidden = true;
+            return;
+        }
+        portal(headerElement)(node);
+    }
+}
+class TabBodyAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'body');
+    }
+    get attrs() {
+        const bond = this.bond;
+        const tabHeaderId = getElementId(bond.id, 'tab-header');
+        const descriptionId = getElementId(bond.id, 'tab-description');
+        return {
+            ...super.attrs,
+            role: 'tabpanel',
+            'aria-labeledby': tabHeaderId,
+            'aria-describedby': descriptionId,
+            'aria-controledby': tabHeaderId,
+            'data-active': bond.state.isActive
+        };
+    }
+}
+class TabDescriptionAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'description');
+    }
+    get attrs() {
+        return {
+            ...super.attrs
+        };
+    }
+}
 export class TabBond extends Bond {
     static CONTEXT_KEY = '@atoms/bonds/tabs/tab';
     #tabs;
     constructor(state) {
-        super(state);
+        super(state, 'tab');
         this.#tabs = TabsBond.get();
     }
+    get tabs() {
+        return this.#tabs;
+    }
+    get value() {
+        return this.state.props.value;
+    }
     get text() {
         return this.elements?.header?.innerText ?? '';
     }
     mount() {
-        return this.#tabs?.state.mountItem(this.id, this);
+        return this.#tabs?.state.mountItem(this.value, this);
     }
     unmount() {
         this.#tabs?.state.unmountItem(this.id);
@@ -29,54 +94,13 @@ export class TabBond extends Bond {
         return TabBond.set(this);
     }
     header() {
-        const id = getElementId(this.id, TAB_ELEMENTS_KIND.header);
-        const tabBodyId = getElementId(this.id, TAB_ELEMENTS_KIND.body);
-        return {
-            id,
-            role: 'tab',
-            'aria-controls': tabBodyId,
-            'aria-disabled': this.state.props.disabled ?? false,
-            'data-controler-id': this.#tabs?.id,
-            'data-active': this.state.isActive,
-            'data-kind': 'tab-header',
-            [createAttachmentKey()]: (node) => {
-                this.elements.header = node;
-                if (!this.#tabs?.elements.header) {
-                    node.hidden = true;
-                    return;
-                }
-                const unport = portal(this.#tabs.elements.header)(node);
-                return unport;
-            }
-        };
+        return this.atom('header', () => new TabHeaderAtom(this));
     }
     body() {
-        const id = getElementId(this.id, TAB_ELEMENTS_KIND.body);
-        const tabHeaderId = getElementId(this.id, TAB_ELEMENTS_KIND.header);
-        const descriptionId = getElementId(this.id, TAB_ELEMENTS_KIND.description);
-        const isActive = this.state.isActive;
-        return {
-            id,
-            role: 'tabpanel',
-            'aria-labeledby': tabHeaderId,
-            'aria-describedby': descriptionId,
-            'aria-controledby': tabHeaderId,
-            'data-active': isActive,
-            'data-kind': 'tab-body',
-            [createAttachmentKey()]: (node) => {
-                this.elements.body = node;
-            }
-        };
+        return this.atom('body', () => new TabBodyAtom(this));
     }
     description() {
-        const id = getElementId(this.id, TAB_ELEMENTS_KIND.description);
-        return {
-            id,
-            'data-kind': 'tab-description',
-            [createAttachmentKey()]: (node) => {
-                this.elements.description = node;
-            }
-        };
+        return this.atom('description', () => new TabDescriptionAtom(this));
     }
     static get() {
         return getContext(TabBond.CONTEXT_KEY);
@@ -86,7 +110,7 @@ export class TabBond extends Bond {
     }
 }
 export class TabBondState extends BondState {
-    #tabsBond;
+    #tabsBond = $state();
     #tabsState = $derived(this.#tabsBond?.state);
     constructor(props) {
         super(props);
@@ -96,7 +120,8 @@ export class TabBondState extends BondState {
         return this.#tabsState?.props.value === this.props.value;
     }
     get isDisabled() {
-        return this.props.disabled ?? (this.#tabsBond?.elements?.header?.getAttribute?.('aria-disabled') === "true");
+        return (this.props.disabled ??
+            this.#tabsBond?.elements?.header?.getAttribute?.('aria-disabled') === 'true');
     }
     select() {
         this.#tabsState?.select(this.props.value);

package/dist/components/tabs/tab/tab-body.svelte

@@ -1,43 +1,61 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { type Base } from '../../atom';
-	import type { TabBodyProps } from '../types';
-	import { TabBond } from './bond.svelte';
-	import { TabsBond } from '../bond.svelte';
-	import { Stack } from '../../stack';
-
-	const tabBond = TabBond.get();
-	const tabsBond = TabsBond.get();
-
-	if (!tabBond) {
-		throw new Error('TabBody must be used within a Tab');
-	}
-
-	let {
-		class: klass = '',
-		base= Stack.Item,
-		children,
-		preset = 'tab.body' as const,
-		...restProps
-	}: TabBodyProps<E, B> = $props();
-
-	const contentProps = $derived({
-		class: klass,
-		preset,
-		base,
-		...restProps
-	});
-
-	// Register content snippet with props and children with tabs on mount
-	$effect(() => {
-		if (tabBond && tabsBond && children) {
-			const id = tabBond.state.props.value;
-			tabsBond.state.registerTabContent(id, contentProps, children);
-
-			return () => {
-				tabsBond.state.unregisterTabContent(id);
-			};
-		}
-	});
-</script>
-
-<!-- Content is teleported to Tabs.Content, so we don't render anything here -->
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { type Base } from '../../atom';
+	import { TabBond } from './bond.svelte';
+	import { TabsBond } from '../bond.svelte';
+	import type { TabBodyProps } from '../types';
+	import { Stack } from '../../stack';
+
+	const tabBond = TabBond.get();
+	const tabsBond = TabsBond.get();
+
+	if (!tabBond) {
+		throw new Error('TabBody must be used within a Tab');
+	}
+
+	let {
+		class: klass = '',
+		children,
+		preset = 'tab.body' as const,
+		...restProps
+	}: TabBodyProps<E, B> = $props();
+
+	const contentProps = $derived({
+		preset,
+		...tabBond?.body().spread,
+		...restProps
+	});
+
+	const value = $derived(tabBond?.state.props.value);
+
+	// Register content snippet with props and children with tabs on mount
+	$effect.pre(() => {
+		if(!value) return;
+		if(!tabBond) return;
+		if(!tabsBond) return;
+
+		tabsBond.state.registerTabContent(value, {
+			render: body,
+			props: {
+				children
+			}
+		});
+
+		return () => {
+			tabsBond.state.unregisterTabContent(value);
+		};
+	});
+</script>
+
+{#snippet body({children = undefined, selected = false, ...props}: Record<string, unknown> = {})}
+	<Stack.Item 
+		class={['tab-body border-border pointer-events-none flex h-auto w-full min-w-full flex-1 flex-col', selected && 'pointer-events-auto', '$preset', klass]} 
+		value={value}
+		inert={selected ? undefined : true} 
+		{...contentProps} 
+		{...props}
+	>
+		{@render children?.({ ...(tabBond ? { tab: tabBond } : {}), ...(tabsBond ? { tabs: tabsBond } : {}) })}
+	</Stack.Item>
+{/snippet}
+
+<!-- Content is teleported to Tabs.Content, so we don't render anything here -->

package/dist/components/tabs/tab/tab-description.svelte

@@ -1,33 +1,33 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
-	import type { TabDescriptionProps } from '../types';
-	import { HtmlAtom as Atom, type Base } from '../../atom';
-	import { TabBond } from './bond.svelte';
-
-	const bond = TabBond.get();
-
-	if(!bond) {
-		throw new Error('TabDescription must be used within a Tab component.');
-	}
-
-	let {
-		class: klass = '',
-		as = 'p' as E,
-		children,
-		...restProps
-	}: TabDescriptionProps<E, B> = $props();
-
-	const descriptionProps = $derived({
-		...bond?.description(),
-		...restProps
-	});
-</script>
-
-<Atom
-	{bond}
-	{as}
-	preset="tab.description"
-	class={['border-border', '$preset', klass]}
-	{...descriptionProps}
->
-	{@render children?.({ tab: bond })}
-</Atom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
+	import type { TabDescriptionProps } from '../types';
+	import { HtmlAtom as Atom, type Base } from '../../atom';
+	import { TabBond } from './bond.svelte';
+
+	const bond = TabBond.get();
+
+	if(!bond) {
+		throw new Error('TabDescription must be used within a Tab component.');
+	}
+
+	let {
+		class: klass = '',
+		as = 'p' as E,
+		children,
+		...restProps
+	}: TabDescriptionProps<E, B> = $props();
+
+	const descriptionProps = $derived({
+		...bond?.description().spread,
+		...restProps
+	});
+</script>
+
+<Atom
+	{bond}
+	{as}
+	preset="tab.description"
+	class={['border-border', '$preset', klass]}
+	{...descriptionProps}
+>
+	{@render children?.({ tab: bond })}
+</Atom>