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

package/dist/components/stepper/step/bond.svelte.d.ts

@@ -1,5 +1,5 @@
-import { StepperState } from '../bond.svelte.js';
-import { Bond, BondState, type BondStateProps } from '../../../shared/bond.svelte.js';
+import { StepperState } from '../bond.svelte';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../../shared/bond.svelte';
 export type StepBondProps = BondStateProps & {
     index: number;
     disabled: boolean;
@@ -15,74 +15,84 @@ export type StepBondElements = {
     body?: HTMLElement;
     separator?: HTMLElement;
 };
-export declare class StepBond extends Bond<StepBondProps, StepBondState, StepBondElements> {
-    static CONTEXT_KEY: string;
-    constructor(state: StepBondState);
-    share(): this;
-    root(): {
-        readonly [x: symbol]: (node: HTMLElement) => void;
-        readonly 'data-stepper': string;
-        readonly 'data-atom': string;
-        readonly 'data-kind': "step";
-        readonly 'data-index': number;
-        readonly 'data-active': boolean;
-        readonly 'data-completed': boolean;
-        readonly 'data-disabled': boolean | undefined;
-        readonly 'data-error': boolean;
-        readonly 'aria-disabled': boolean | undefined;
-        readonly 'aria-describedby': `step-description-${string}`;
-        readonly 'aria-labelledby': `step-title-${string}`;
-        readonly id: `step-${string}`;
-        readonly role: "group";
+declare class StepRootAtom extends BondAtom<StepBond, HTMLElement> {
+    constructor(bond: StepBond);
+    get attrs(): {
+        'data-stepper': string;
+        'data-index': number;
+        'data-active': boolean;
+        'data-completed': boolean;
+        'data-disabled': boolean | undefined;
+        'data-error': boolean;
+        'aria-disabled': boolean | undefined;
+        'aria-describedby': string;
+        'aria-labelledby': string;
+        role: "group";
     };
-    indicator(): {
-        readonly [x: symbol]: (node: HTMLElement) => void;
-        readonly 'data-kind': "step-indicator";
-        readonly 'aria-current': "step" | undefined;
-        readonly 'data-active': boolean;
-        readonly 'data-completed': boolean;
-        readonly 'data-disabled': boolean | undefined;
-        readonly 'data-error': boolean;
-        readonly role: "presentation";
+}
+declare class StepIndicatorAtom extends BondAtom<StepBond, HTMLElement> {
+    constructor(bond: StepBond);
+    get attrs(): {
+        'aria-current': "step" | undefined;
+        'data-active': boolean;
+        'data-completed': boolean;
+        'data-disabled': boolean | undefined;
+        'data-error': boolean;
+        role: "presentation";
     };
-    header(): {
-        readonly [x: symbol]: (node: HTMLElement) => void;
-        readonly 'data-kind': "step-header";
-        readonly id: `step-header-${string}`;
-        readonly 'data-active': boolean;
-        readonly 'data-completed': boolean;
-        readonly 'data-disabled': boolean | undefined;
-        readonly 'data-error': boolean;
+}
+declare class StepHeaderAtom extends BondAtom<StepBond, HTMLElement> {
+    constructor(bond: StepBond);
+    get attrs(): {
+        'data-active': boolean;
+        'data-completed': boolean;
+        'data-disabled': boolean | undefined;
+        'data-error': boolean;
     };
-    title(): {
-        readonly [x: symbol]: (node: HTMLElement) => void;
-        readonly 'data-kind': "step-title";
-        readonly id: `step-title-${string}`;
+}
+declare class StepTitleAtom extends BondAtom<StepBond, HTMLElement> {
+    constructor(bond: StepBond);
+    get attrs(): {
+        [x: string]: unknown;
     };
-    description(): {
-        readonly [x: symbol]: (node: HTMLElement) => void;
-        readonly 'data-kind': "step-description";
-        readonly id: `step-description-${string}`;
+}
+declare class StepDescriptionAtom extends BondAtom<StepBond, HTMLElement> {
+    constructor(bond: StepBond);
+    get attrs(): {
+        [x: string]: unknown;
     };
-    body(): {
-        readonly [x: symbol]: (node: HTMLElement) => void;
-        readonly 'data-kind': "step-body";
-        readonly id: `step-body-${string}`;
-        readonly 'data-active': boolean;
-        readonly 'data-completed': boolean;
-        readonly 'data-disabled': boolean | undefined;
-        readonly 'data-error': boolean;
+}
+declare class StepBodyAtom extends BondAtom<StepBond, HTMLElement> {
+    constructor(bond: StepBond);
+    get attrs(): {
+        'data-active': boolean;
+        'data-completed': boolean;
+        'data-disabled': boolean | undefined;
+        'data-error': boolean;
     };
-    separator(): {
-        readonly [x: symbol]: (node: HTMLElement) => void;
-        readonly 'data-kind': "step-separator";
-        readonly 'aria-hidden': "true";
-        readonly role: "presentation";
-        readonly 'data-active': boolean;
-        readonly 'data-completed': boolean;
-        readonly 'data-disabled': boolean | undefined;
-        readonly 'data-error': boolean;
+}
+declare class StepSeparatorAtom extends BondAtom<StepBond, HTMLElement> {
+    constructor(bond: StepBond);
+    get attrs(): {
+        'aria-hidden': string;
+        role: "presentation";
+        'data-active': boolean;
+        'data-completed': boolean;
+        'data-disabled': boolean | undefined;
+        'data-error': boolean;
     };
+}
+export declare class StepBond extends Bond<StepBondProps, StepBondState, StepBondElements> {
+    static CONTEXT_KEY: string;
+    constructor(state: StepBondState);
+    share(): this;
+    root(): StepRootAtom;
+    indicator(): StepIndicatorAtom;
+    header(): StepHeaderAtom;
+    title(): StepTitleAtom;
+    description(): StepDescriptionAtom;
+    body(): StepBodyAtom;
+    separator(): StepSeparatorAtom;
     static get(): StepBond | undefined;
     static set(bond: StepBond): StepBond;
 }
@@ -97,3 +107,4 @@ export declare class StepBondState extends BondState<StepBondProps> {
     unmount: () => void;
     activate(): void;
 }
+export {};

package/dist/components/stepper/step/bond.svelte.js

@@ -1,112 +1,148 @@
-import { createAttachmentKey } from 'svelte/attachments';
-import { getContext, setContext } from 'svelte';
-import { StepperBond, StepperState } from '../bond.svelte.js';
-import { Bond, BondState } from '../../../shared/bond.svelte.js';
-export class StepBond extends Bond {
-    static CONTEXT_KEY = '@atoms/context/stepper/step';
-    constructor(state) {
-        super(state);
-    }
-    share() {
-        return StepBond.set(this);
-    }
-    root() {
-        const state = this.state;
+import { getContext, setContext, untrack } from 'svelte';
+import { StepperBond, StepperState } from '../bond.svelte';
+import { Bond, BondState, BondAtom } from '../../../shared/bond.svelte';
+class StepRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
+    }
+    get attrs() {
+        const bond = this.bond;
+        const state = bond.state;
+        const props = untrack(() => bond.state.props);
         return {
+            ...super.attrs,
             'data-stepper': state?.stepper?.id ?? '',
-            'data-atom': this.id ?? '',
-            'data-kind': 'step',
-            'data-index': state?.props.index ?? 0,
+            'data-index': props.index ?? 0,
             'data-active': state?.isActive,
             'data-completed': state?.isCompleted,
             'data-disabled': state?.isDisabled,
-            'data-error': state?.props.error,
+            'data-error': props.error,
             'aria-disabled': state?.isDisabled,
-            'aria-describedby': `step-description-${this.id}`,
-            'aria-labelledby': `step-title-${this.id}`,
-            id: `step-${this.id}`,
-            role: 'group',
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
+            'aria-describedby': `step-description-${bond.id}`,
+            'aria-labelledby': `step-title-${bond.id}`,
+            role: 'group'
         };
     }
-    indicator() {
-        const state = this.state;
+}
+class StepIndicatorAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'indicator');
+    }
+    get attrs() {
+        const state = untrack(() => this.bond.state);
+        const props = untrack(() => this.bond.state.props);
         return {
-            'data-kind': 'step-indicator',
+            ...super.attrs,
             'aria-current': state?.isActive ? 'step' : undefined,
             'data-active': state?.isActive,
             'data-completed': state?.isCompleted,
             'data-disabled': state?.isDisabled,
-            'data-error': state?.props.error,
-            role: 'presentation',
-            [createAttachmentKey()]: (node) => {
-                this.elements.indicator = node;
-            }
+            'data-error': props.error,
+            role: 'presentation'
         };
     }
-    header() {
-        const state = this.state;
+}
+class StepHeaderAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'header');
+    }
+    get attrs() {
+        const bond = this.bond;
+        const state = untrack(() => bond.state);
+        const props = untrack(() => bond.state.props);
         return {
-            'data-kind': 'step-header',
-            id: `step-header-${this.id}`,
+            ...super.attrs,
             'data-active': state?.isActive,
             'data-completed': state?.isCompleted,
             'data-disabled': state?.isDisabled,
-            'data-error': state?.props.error,
-            [createAttachmentKey()]: (node) => {
-                this.elements.header = node;
-            }
+            'data-error': props.error
         };
     }
-    title() {
+}
+class StepTitleAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'title');
+    }
+    get attrs() {
         return {
-            'data-kind': 'step-title',
-            id: `step-title-${this.id}`,
-            [createAttachmentKey()]: (node) => {
-                this.elements.title = node;
-            }
+            ...super.attrs
         };
     }
-    description() {
+}
+class StepDescriptionAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'description');
+    }
+    get attrs() {
         return {
-            'data-kind': 'step-description',
-            id: `step-description-${this.id}`,
-            [createAttachmentKey()]: (node) => {
-                this.elements.description = node;
-            }
+            ...super.attrs
         };
     }
-    body() {
-        const state = this.state;
+}
+class StepBodyAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'body');
+    }
+    get attrs() {
+        const bond = this.bond;
+        const state = untrack(() => bond.state);
+        const props = untrack(() => bond.state.props);
         return {
-            'data-kind': 'step-body',
-            id: `step-body-${this.id}`,
+            ...super.attrs,
             'data-active': state?.isActive,
             'data-completed': state?.isCompleted,
             'data-disabled': state?.isDisabled,
-            'data-error': state?.props.error,
-            [createAttachmentKey()]: (node) => {
-                this.elements.body = node;
-            }
+            'data-error': props.error
         };
     }
-    separator() {
-        const state = this.state;
+}
+class StepSeparatorAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'separator');
+    }
+    get attrs() {
+        const state = untrack(() => this.bond.state);
+        const props = untrack(() => this.bond.state.props);
         return {
-            'data-kind': 'step-separator',
+            ...super.attrs,
             'aria-hidden': 'true',
             role: 'presentation',
             'data-active': state?.isActive,
             'data-completed': state?.isCompleted,
             'data-disabled': state?.isDisabled,
-            'data-error': state?.props.error,
-            [createAttachmentKey()]: (node) => {
-                this.elements.separator = node;
-            }
+            'data-error': props.error
         };
     }
+}
+export class StepBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/stepper/step';
+    constructor(state) {
+        super(state, 'step');
+    }
+    share() {
+        return StepBond.set(this);
+    }
+    root() {
+        return this.atom('root', () => new StepRootAtom(this));
+    }
+    indicator() {
+        return this.atom('indicator', () => new StepIndicatorAtom(this));
+    }
+    header() {
+        return this.atom('header', () => new StepHeaderAtom(this));
+    }
+    title() {
+        return this.atom('title', () => new StepTitleAtom(this));
+    }
+    description() {
+        return this.atom('description', () => new StepDescriptionAtom(this));
+    }
+    body() {
+        return this.atom('body', () => new StepBodyAtom(this));
+    }
+    separator() {
+        return this.atom('separator', () => new StepSeparatorAtom(this));
+    }
     static get() {
         return getContext(StepBond.CONTEXT_KEY);
     }
@@ -129,7 +165,7 @@ export class StepBondState extends BondState {
     }
     get isCompleted() {
         const stepperStep = this.#stepper?.props.step;
-        return this.props.completed || (typeof stepperStep === 'number' && stepperStep > this.props.index);
+        return (this.props.completed || (typeof stepperStep === 'number' && stepperStep > this.props.index));
     }
     get isDisabled() {
         return (this.props.disabled ||

package/dist/components/stepper/step/step-body.svelte

@@ -1,39 +1,39 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { type Base } from '../../atom';
-	import { StepBond } from './bond.svelte';
-	import { StepperBond } from '../bond.svelte';
-	import type { StepContentProps } from './types';
-	import { Stack } from '../../stack';
-
-	const stepBond = StepBond.get();
-	const stepperBond = StepperBond.get();
-
-	let {
-		class: klass = '',
-		base=Stack.Item,
-		children = undefined,
-		preset = 'stepper.step.content' as const,
-		...restProps
-	}: StepContentProps<E, B> = $props();
-
-	const contentProps = $derived({
-		class: klass,
-		preset,
-		base,
-		...restProps
-	});
-
-	// Register content snippet with props and children with stepper on mount
-	$effect(() => {
-		if (stepBond && stepperBond && children) {
-			const index = stepBond.state.props.index;
-			stepperBond.state.registerStepContent(index, contentProps, children);
-
-			return () => {
-				stepperBond.state.unregisterStepContent(index);
-			};
-		}
-	});
-</script>
-
-<!-- Content is teleported to Stepper.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 { StepBond } from './bond.svelte';
+	import { StepperBond } from '../bond.svelte';
+	import type { StepContentProps } from './types';
+	import { Stack } from '../../stack';
+
+	const stepBond = StepBond.get();
+	const stepperBond = StepperBond.get();
+
+	let {
+		class: klass = '',
+		base=Stack.Item,
+		children = undefined,
+		preset = 'stepper.step.content' as const,
+		...restProps
+	}: StepContentProps<E, B> = $props();
+
+	const contentProps = $derived({
+		class: klass,
+		preset,
+		base,
+		...restProps
+	});
+
+	// Register content snippet with props and children with stepper on mount
+	$effect(() => {
+		if (stepBond && stepperBond && children) {
+			const index = stepBond.state.props.index;
+			stepperBond.state.registerStepContent(index, contentProps, children);
+
+			return () => {
+				stepperBond.state.unregisterStepContent(index);
+			};
+		}
+	});
+</script>
+
+<!-- Content is teleported to Stepper.Content, so we don't render anything here -->

package/dist/components/stepper/step/step-description.svelte

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

package/dist/components/stepper/step/step-header.svelte

@@ -1,34 +1,34 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom as Atom, type Base } from '../../atom';
-	import { StepBond } from './bond.svelte';
-	import type { StepHeaderProps } from './types';
-
-	const bond = StepBond.get();
-
-	if(!bond) {
-		throw new Error('StepHeader must be used within a Step component.');
-	}
-
-	let {
-		class: klass = '',
-		preset = 'stepper.step.header',
-		children = undefined,
-		...restProps
-	}: StepHeaderProps<E, B> = $props();
-
-
-	const headerProps = $derived({
-		...bond?.header(),
-		...restProps
-	});
-</script>
-
-<Atom
-	as="div"
-	{bond}
-	{preset}
-	class={['font-medium text-sm flex flex-col', '$preset', klass]}
-	{...headerProps}
->
-	{@render children?.({ step: bond })}
-</Atom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom as Atom, type Base } from '../../atom';
+	import { StepBond } from './bond.svelte';
+	import type { StepHeaderProps } from './types';
+
+	const bond = StepBond.get();
+
+	if(!bond) {
+		throw new Error('StepHeader must be used within a Step component.');
+	}
+
+	let {
+		class: klass = '',
+		preset = 'stepper.step.header',
+		children = undefined,
+		...restProps
+	}: StepHeaderProps<E, B> = $props();
+
+
+	const headerProps = $derived({
+		...bond?.header().spread,
+		...restProps
+	});
+</script>
+
+<Atom
+	as="div"
+	{bond}
+	{preset}
+	class={['font-medium text-sm flex flex-col', '$preset', klass]}
+	{...headerProps}
+>
+	{@render children?.({ step: bond })}
+</Atom>