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

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

@@ -1,61 +1,61 @@
-<script
-	lang="ts"
-	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
->
-	import type { TabHeaderProps } from '../types';
-	import { TabBond } from './bond.svelte';
-	import { HtmlAtom as Atom, type Base } from '../../atom';
-
-	const bond = TabBond.get();
-
-	if(!bond) {
-		throw new Error('TabHeader must be used within a Tab component.');
-	}
-
-	const isActive = $derived(bond?.state.isActive);
-	const isDisabled = $derived(bond?.state.props.disabled);
-
-	let {
-		class: klass = '',
-		as = 'button' as E,
-		children,
-		onpointerdown,
-		...restProps
-	}: TabHeaderProps<E, B> = $props();
-
-	const headerProps = $derived({
-		...bond?.header(),
-		...restProps
-	});
-
-	function handlePointerDown(ev: PointerEvent) {
-		if (isDisabled) return;
-
-		onpointerdown?.(ev, { tab: bond });
-
-		if (ev.defaultPrevented) {
-			return;
-		}
-
-		bond?.state.select();
-	}
-</script>
-
-<Atom
-	{bond}
-	preset="tab.header"
-	as="button"
-	class={[
-		'border-border text-foreground/50 bg-foreground/0 hover:bg-foreground/5 active:bg-foreground/10 flex cursor-pointer items-center px-2 py-2 text-sm font-medium transition-colors duration-100',
-		isActive && 'text-primary bg-primary/5 hover:bg-primary/10 active:bg-primary/15',
-		isDisabled && 'opacity-50',
-		'$preset',
-		klass
-	]}  
-	type="button"
-	disabled={isDisabled}
-	onpointerdown={handlePointerDown}
-	{...headerProps}
->
-	{@render children?.({ tab: bond })}
-</Atom>
+<script
+	lang="ts"
+	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
+>
+	import type { TabHeaderProps } from '../types';
+	import { TabBond } from './bond.svelte';
+	import { HtmlAtom as Atom, type Base } from '../../atom';
+
+	const bond = TabBond.get();
+
+	if(!bond) {
+		throw new Error('TabHeader must be used within a Tab component.');
+	}
+
+	const isActive = $derived(bond?.state.isActive);
+	const isDisabled = $derived(bond?.state.props.disabled);
+
+	let {
+		class: klass = '',
+		as = 'button' as E,
+		children,
+		onclick,
+		...restProps
+	}: TabHeaderProps<E, B> = $props();
+
+	const headerProps = $derived({
+		...bond?.header().spread,
+		...restProps
+	});
+
+	function handleClick(ev: PointerEvent) {
+		if (isDisabled) return;
+
+		onclick?.(ev, { ...(bond ? { tab: bond } : {}) });
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		bond?.state.select();
+	}
+</script>
+
+<Atom
+	{bond}
+	preset="tab.header"
+	as="button"
+	class={[
+		'border-border text-foreground/50 bg-foreground/0 hover:bg-foreground/5 active:bg-foreground/10 flex cursor-pointer items-center px-2 py-2 text-sm font-medium transition-colors duration-100',
+		isActive && 'text-primary bg-primary/5 hover:bg-primary/10 active:bg-primary/15',
+		isDisabled && 'opacity-50',
+		'$preset',
+		klass
+	]}  
+	type="button"
+	disabled={isDisabled}
+	onclick={handleClick}
+	{...headerProps}
+>
+	{@render children?.({ ...(bond ? { tab: bond } : {}) })}
+</Atom>

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

@@ -1,51 +1,50 @@
-<script
-	lang="ts"
-	generics="D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base"
->
-	import { nanoid } from 'nanoid';
-	import { animate as motion } from 'motion';
-	import { defineProperty, defineState } from '../../../utils';
-	import { TabBond, TabBondState, type TabBondProps } from './bond.svelte';
-	import { TabsBond } from '../bond.svelte';
-	import { type Base } from '../../atom';
-	import { HtmlAtom } from '../../atom';
-
-	const tabsBond = TabsBond.get();
-
-	if(!tabsBond) {
-		throw new Error('TabRoot must be used within a Tabs component.');
-	}
-
-
-	let {
-		class: klass = '',
-		value = nanoid(),
-		disabled = false,
-		data = undefined,
-		factory = _factory,
-		children,
-	} = $props();
-
-	const bondProps = defineState<TabBondProps<D>>([
-		defineProperty('value', () => value),
-		defineProperty('disabled', () => disabled),
-		defineProperty('data', () => data)
-	]);
-
-	const bond = factory(bondProps).share();
-
-	const unmount = bond.mount();
-	$effect(() => unmount);
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new TabBondState(() => props);
-
-		return new TabBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
+<script lang="ts">
+	import { nanoid } from 'nanoid';
+	import { defineProperty, defineState } from '../../../utils';
+	import { TabBond, TabBondState, type TabBondProps } from './bond.svelte';
+	import { TabsBond } from '../bond.svelte';
+	import { untrack, type Snippet } from 'svelte';
+
+	const tabsBond = TabsBond.get();
+
+	if (!tabsBond) {
+		throw new Error('TabRoot must be used within a Tabs component.');
+	}
+
+	let {
+		value = nanoid(),
+		disabled = false,
+		data = undefined as unknown,
+		factory = _factory,
+		children,
+	}: {
+		value?: string;
+		disabled?: boolean;
+		data?: unknown;
+		factory?: typeof _factory;
+		children?: Snippet<[{ tab: TabBond }]>;
+	} = $props();
+
+	const bondProps = defineState<TabBondProps<unknown>>([
+		defineProperty('value', () => value),
+		defineProperty('disabled', () => disabled),
+		defineProperty('data', () => data)
+	]);
+
+	const bond = untrack(() => factory(bondProps)).share();
+
+	const unmount = bond.mount();
+	$effect.pre(() => unmount);
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new TabBondState(() => props);
+
+		return new TabBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
 {@render children?.({ tab: bond })}

package/dist/components/tabs/tab/tab-root.svelte.d.ts

@@ -1,37 +1,15 @@
 import { TabBond, type TabBondProps } from './bond.svelte';
-import { type Base } from '../../atom';
-declare function $$render<D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: {
-        class?: string;
-        value?: any;
-        disabled?: boolean;
-        data?: any;
-        factory?: (props: TabBondProps<D>) => TabBond<D>;
-        children: any;
-    };
-    exports: {
-        getBond: () => TabBond<D>;
-    };
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<D, E extends keyof HTMLElementTagNameMap = 'div', 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(): {
-        getBond: () => TabBond<D>;
-    };
-}
-interface $$IsomorphicComponent {
-    new <D, E extends keyof HTMLElementTagNameMap = 'div', 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 keyof HTMLElementTagNameMap = 'div', 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 TabRoot: $$IsomorphicComponent;
-type TabRoot<D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof TabRoot<D, E, B>>;
+import { type Snippet } from 'svelte';
+declare const TabRoot: import("svelte").Component<{
+    value?: string;
+    disabled?: boolean;
+    data?: unknown;
+    factory?: (props: TabBondProps<unknown>) => TabBond<unknown>;
+    children?: Snippet<[{
+        tab: TabBond;
+    }]>;
+}, {
+    getBond: () => TabBond<unknown>;
+}, "">;
+type TabRoot = ReturnType<typeof TabRoot>;
 export default TabRoot;

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

@@ -1,35 +1,37 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Base } from '../atom';
-	import { TabsBond } from './bond.svelte';
-	import { Stack } from '../stack';
-	import type { TabsBodyProps } from './types';
-
-	const bond = TabsBond.get();
-
-	if (!bond) {
-		throw new Error('Tabs.Body must be used within a Tabs.Root component.');
-	}
-
-	let {
-		class: klass = '',
-		as = 'div' as E,
-		children,
-		preset = 'tabs.body' as const,
-		...restProps
-	}: TabsBodyProps<E, B> = $props();
-
-	const bodyProps = $derived({
-		...bond?.body(),
-		...restProps
-	});
-</script>
-
-<Stack.Root
-	{bond}
-	{preset}
-	{as}
-	class={['tabs-body border-border relative flex-1', '$preset', klass]}
-	{...bodyProps}
->
-	{@render children?.({ tabs: bond })}
-</Stack.Root>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { type Base } from '../atom';
+	import { Stack } from '../stack';
+	import { TabsBond } from './bond.svelte';
+	import type { TabsBodyProps } from './types';
+
+	const bond = TabsBond.get();
+	const value = $derived(bond?.state.props.value);
+
+	if (!bond) {
+		throw new Error('Tabs.Body must be used within a Tabs.Root component.');
+	}
+
+	let {
+		class: klass = '',
+		as = 'div' as E,
+		children,
+		preset = 'tabs.body' as const,
+		...restProps
+	}: TabsBodyProps<E, B> = $props();
+
+	const bodyProps = $derived({
+		...bond?.body().spread,
+		...restProps
+	});
+</script>
+
+<Stack.Root
+	value={value}
+	{bond}
+	{preset}
+	{as}
+	class={['tabs-body border-border relative flex-1 flex flex-col', '$preset', klass]}
+	{...bodyProps}
+>
+	{@render children?.({ tabs: bond })}
+</Stack.Root>

package/dist/components/tabs/tabs-body.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Base } from '../atom';
+import { type Base } from '../atom';
 import type { TabsBodyProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: TabsBodyProps<E, B>;

package/dist/components/tabs/tabs-content.svelte

@@ -1,51 +1,32 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { TabsBond } from './bond.svelte';
-	import type { TabsContentProps } from './types';
-
-	const bond = TabsBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		preset = 'tabs.content' as const,
-		...restProps
-	}: TabsContentProps<E, B> = $props();
-	
-	const activeTab = $derived(bond?.state?.selectedItem);
-	const activeTabContent = $derived(bond?.state?.activeTabContent);
-
-	const contentKlass = $derived(activeTabContent?.props.class);
-	
-	const allProps = $derived.by(() => {
-		if (!activeTabContent?.props) return restProps;
-		const { class: _, ...propsWithoutClass } = activeTabContent.props;
-		return {
-			...propsWithoutClass,
-			...restProps
-		};
-	});
-
-</script>
-
-{#if activeTabContent && bond}
-	{#key activeTabContent}
-		<HtmlAtom
-			{preset}
-			{bond}
-			class={[
-				'tab-body border-border pointer-events-auto flex h-auto w-full min-w-full flex-1 flex-col',
-				'$preset',
-				contentKlass,
-				klass
-			]}
-			{...allProps}
-		>
-			<!-- Render teleported tab content -->
-			{@render activeTabContent.children({ tab: activeTab })}
-
-			<!-- Optional custom content wrapper -->
-			<!-- {@render children?.({ tabs: bond })} -->
-		</HtmlAtom>
-	{/key}
-{/if}
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { type Base } from '../atom';
+	import { TabsBond } from './bond.svelte';
+	import type { TabsContentProps } from './types';
+
+	const bond = TabsBond.get();
+
+	let {
+		preset = 'tabs.content' as const,
+		...restProps
+	}: TabsContentProps<E, B> = $props();
+	
+	const value = $derived(bond?.state?.props.value);
+	const items = $derived(Array.from(bond?.state?.tabContents ?? []));
+
+	const contentProps = $derived({
+		preset,
+		...restProps
+	});
+</script>
+
+{#each items as item (item.value)}
+   {@render item.render({
+		...(item.props ?? {}),
+		...(value === item.value ? {} : {children: undefined}),
+		...contentProps,
+		selected: value === item.value
+   })}
+{/each}
+
+
+

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

@@ -1,32 +1,32 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom as Atom, type Base } from '../atom';
-	import { TabsBond } from './bond.svelte';
-	import type { TabsHeaderProps } from './types';
-
-	const bond = TabsBond.get();
-
-	if(!bond) {
-		throw new Error('TabsHeader must be used within a Tabs component');
-	}
-
-	let {
-		class: klass = '',
-		children,
-		preset = 'tabs.header' as const,
-		...restProps
-	}: TabsHeaderProps<E, B> = $props();
-
-	const headerProps = $derived({
-		...bond?.header(),
-		...restProps
-	});
-</script>
-
-<Atom
-	{bond}
-	{preset}
-	class={['relative flex min-w-full border-border', '$preset', klass]}
-	{...headerProps}
->
-	{@render children?.({ tabs: bond })}
-</Atom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom as Atom, type Base } from '../atom';
+	import { TabsBond } from './bond.svelte';
+	import type { TabsHeaderProps } from './types';
+
+	const bond = TabsBond.get();
+
+	if(!bond) {
+		throw new Error('TabsHeader must be used within a Tabs component');
+	}
+
+	let {
+		class: klass = '',
+		children,
+		preset = 'tabs.header' as const,
+		...restProps
+	}: TabsHeaderProps<E, B> = $props();
+
+	const headerProps = $derived({
+		...bond?.header().spread,
+		...restProps
+	});
+</script>
+
+<Atom
+	{bond}
+	{preset}
+	class={['relative flex min-w-full border-border', '$preset', klass]}
+	{...headerProps}
+>
+	{@render children?.({ tabs: bond })}
+</Atom>

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

@@ -1,56 +1,64 @@
-<script
-	lang="ts"
-	generics="D extends string, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base"
->
-	import { TabsBond, TabsBondState, type TabsBondProps } from './bond.svelte';
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom as Atom, type Base } from '../atom';
-	import type { TabsRootProps } from './types';
-
-	let {
-		class: klass = '',
-		value = $bindable(undefined),
-		children,
-		onchange,
-		preset = 'tabs' as const,
-		...restProps
-	}: TabsRootProps<D, E, B> = $props();
-
-	const bondProps = defineState<TabsBondProps>([
-		defineProperty(
-			'value',
-			() => value,
-			(v) => (value = v)
-		),
-		defineProperty('rest', () => restProps)
-	]);
-
-	function _factory(props: typeof bondProps = bondProps) {
-		const tabsState = new TabsBondState(() => props);
-		return new TabsBond(tabsState);
-	}
-	
-	const bond = _factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond?.root(),
-		...restProps
-	});
-
-	$effect(() => {
-		onchange?.(value as D);
-	});
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<Atom
-	{bond}
-	preset="tabs"
-	class={['border-border flex w-full flex-1 flex-col', '$preset', klass]}
-	{...rootProps}
->
-	{@render children?.({ tabs: bond })}
-</Atom>
+<script
+	lang="ts"
+	generics="D extends string, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base"
+>
+	import { TabsBond, TabsBondState, type TabsBondProps } from './bond.svelte';
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom as Atom, type Base } from '../atom';
+	import type { TabsRootProps } from './types';
+
+	let {
+		class: klass = '',
+		value = $bindable(),
+		children,
+		onchange,
+		preset = 'tabs' as const,
+		...restProps
+	}: TabsRootProps<D, E, B> = $props();
+
+	let revision = $state(0);
+
+	const bondProps = defineState<TabsBondProps>([
+		defineProperty(
+			'value',
+			() => {
+				void revision; // Ensure reactivity in uncontrolled mode
+				return value;
+			},
+			(v) => {
+				value = v as D | undefined;
+				revision++; // Trigger reactivity in uncontrolled mode
+			}
+		),
+		defineProperty('rest', () => restProps)
+	]);
+
+	function _factory(props: typeof bondProps = bondProps) {
+		const tabsState = new TabsBondState(() => props);
+		return new TabsBond(tabsState);
+	}
+	
+	const bond = _factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond?.root().spread,
+		...restProps
+	});
+
+	$effect.pre(() => {
+		onchange?.(value as D);
+	});
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<Atom
+	{bond}
+	preset="tabs"
+	class={['border-border flex w-full flex-1 flex-col', '$preset', klass]}
+	{...rootProps}
+>
+	{@render children?.({ tabs: bond })}
+</Atom>