@svelte-atoms/core 1.0.0-alpha.33 → 1.0.0-alpha.34

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

@@ -0,0 +1,99 @@
+import { StepperState } from '../bond.svelte.js';
+import { Bond, BondState, type BondStateProps } from '../../../shared/bond.svelte.js';
+export type StepBondProps = BondStateProps & {
+    index: number;
+    disabled: boolean;
+    completed: boolean;
+    error: boolean;
+};
+export type StepBondElements = {
+    root: HTMLElement;
+    indicator: HTMLElement;
+    header: HTMLElement;
+    title: HTMLElement;
+    description: HTMLElement;
+    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";
+    };
+    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";
+    };
+    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;
+    };
+    title(): {
+        readonly [x: symbol]: (node: HTMLElement) => void;
+        readonly 'data-kind': "step-title";
+        readonly id: `step-title-${string}`;
+    };
+    description(): {
+        readonly [x: symbol]: (node: HTMLElement) => void;
+        readonly 'data-kind': "step-description";
+        readonly id: `step-description-${string}`;
+    };
+    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;
+    };
+    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;
+    };
+    static get(): StepBond | undefined;
+    static set(bond: StepBond): StepBond;
+}
+export declare class StepBondState extends BondState<StepBondProps> {
+    #private;
+    constructor(props: () => StepBondProps);
+    get isActive(): boolean;
+    get isCompleted(): boolean;
+    get isDisabled(): boolean | undefined;
+    get stepper(): StepperState | undefined;
+    mount(): () => void;
+    unmount: () => void;
+    activate(): void;
+}

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

@@ -0,0 +1,153 @@
+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;
+        return {
+            'data-stepper': state?.stepper?.id ?? '',
+            'data-atom': this.id ?? '',
+            'data-kind': 'step',
+            'data-index': state?.props.index ?? 0,
+            'data-active': state?.isActive,
+            'data-completed': state?.isCompleted,
+            'data-disabled': state?.isDisabled,
+            'data-error': state?.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;
+            }
+        };
+    }
+    indicator() {
+        const state = this.state;
+        return {
+            'data-kind': 'step-indicator',
+            '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;
+            }
+        };
+    }
+    header() {
+        const state = this.state;
+        return {
+            'data-kind': 'step-header',
+            id: `step-header-${this.id}`,
+            'data-active': state?.isActive,
+            'data-completed': state?.isCompleted,
+            'data-disabled': state?.isDisabled,
+            'data-error': state?.props.error,
+            [createAttachmentKey()]: (node) => {
+                this.elements.header = node;
+            }
+        };
+    }
+    title() {
+        return {
+            'data-kind': 'step-title',
+            id: `step-title-${this.id}`,
+            [createAttachmentKey()]: (node) => {
+                this.elements.title = node;
+            }
+        };
+    }
+    description() {
+        return {
+            'data-kind': 'step-description',
+            id: `step-description-${this.id}`,
+            [createAttachmentKey()]: (node) => {
+                this.elements.description = node;
+            }
+        };
+    }
+    body() {
+        const state = this.state;
+        return {
+            'data-kind': 'step-body',
+            id: `step-body-${this.id}`,
+            'data-active': state?.isActive,
+            'data-completed': state?.isCompleted,
+            'data-disabled': state?.isDisabled,
+            'data-error': state?.props.error,
+            [createAttachmentKey()]: (node) => {
+                this.elements.body = node;
+            }
+        };
+    }
+    separator() {
+        const state = this.state;
+        return {
+            'data-kind': 'step-separator',
+            '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;
+            }
+        };
+    }
+    static get() {
+        return getContext(StepBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(StepBond.CONTEXT_KEY, bond);
+    }
+}
+export class StepBondState extends BondState {
+    #stepper;
+    constructor(props) {
+        super(props);
+        const stepperBond = StepperBond.get();
+        if (!stepperBond) {
+            throw new Error('Step must be used within a Stepper context.');
+        }
+        this.#stepper = stepperBond.state;
+    }
+    get isActive() {
+        return this.#stepper?.props.step === this.props.index;
+    }
+    get isCompleted() {
+        const stepperStep = this.#stepper?.props.step;
+        return this.props.completed || (typeof stepperStep === 'number' && stepperStep > this.props.index);
+    }
+    get isDisabled() {
+        return (this.props.disabled ||
+            (this.#stepper?.props.linear && this.props.index > this.#stepper.props.step + 1));
+    }
+    get stepper() {
+        return this.#stepper;
+    }
+    mount() {
+        this.#stepper?.mountStep(this.props.index, {});
+        return this.unmount;
+    }
+    unmount = () => {
+        this.#stepper?.unmountStep(this.props.index);
+    };
+    activate() {
+        if (!this.isDisabled) {
+            this.#stepper?.navigation.goto(this.props.index);
+        }
+    }
+}

package/dist/components/stepper/step/index.d.ts

@@ -0,0 +1,3 @@
+export * as Step from './atoms';
+export * from './bond.svelte';
+export type * from './types';

package/dist/components/stepper/step/index.js

@@ -0,0 +1,2 @@
+export * as Step from './atoms';
+export * from './bond.svelte';

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

@@ -0,0 +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 -->

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

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

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

@@ -0,0 +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>

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

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

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

@@ -0,0 +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>

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

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

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

@@ -0,0 +1,63 @@
+<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 { StepIndicatorProps } from './types';
+	
+	const bond = StepBond.get();
+
+	if(!bond) {
+		throw new Error('StepIndicator must be used within a Step component');
+	}	
+
+	let {
+		class: klass = '',
+		preset = 'stepper.step.indicator',
+		children = undefined,
+		...restProps
+	}: StepIndicatorProps<E, B> = $props();
+
+
+	const indicatorProps = $derived({
+		...bond?.indicator(),
+		...restProps
+	});
+
+	const index = $derived(bond?.state?.props?.index ?? 0);
+</script>
+
+<Atom
+	{bond}
+	{preset}
+	class={[
+		'flex h-8 w-8 items-center justify-center border-border rounded-full border-2 transition-colors',
+		'transition-all',
+		bond?.state?.isActive
+		? 'bg-primary border-primary text-primary-foreground font-bold'
+			: bond?.state?.isCompleted
+				? 'bg-primary border-primary text-primary-foreground'
+				: 'border-border bg-background',
+		'$preset',
+		klass
+	]}
+	{...indicatorProps}
+>
+	{#if children}
+		{@render children?.({ step: bond })}	   
+	{:else if bond?.state?.isCompleted}
+		<svg
+			class="w-4 h-4"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M5 13l4 4L19 7"
+			/>
+		</svg>
+	{:else}
+		{index + 1}
+	{/if}	
+</Atom>

package/dist/components/stepper/step/step-indicator.svelte.d.ts

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

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

@@ -0,0 +1,42 @@
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { defineProperty, defineState } from '../../../utils';
+	import { type Base } from '../../atom';
+	import { StepBond, StepBondState, type StepBondProps } from './bond.svelte';
+	import type { StepRootProps } from './types';
+	import type { Factory } from '../../../types';
+	import { onDestroy } from 'svelte';
+
+	let {
+		index,
+		disabled = false,
+		completed = false,
+		optional = false,
+		children = undefined,
+		factory = _factory as Factory<StepBond>,
+	}: StepRootProps<E, B> = $props();
+
+	const stepProps = defineState<StepBondProps>([
+		defineProperty('index', () => index),
+		defineProperty('disabled', () => disabled),
+		defineProperty('completed', () => completed),
+		defineProperty('optional', () => optional),
+	]);
+
+	const bond = $derived(factory(stepProps).share());
+
+	bond.state.mount();
+	onDestroy(()=> {
+		bond.state.unmount();  
+	});
+
+	function _factory(props = stepProps) {
+		const stepState = new StepBondState(() => props);
+		return new StepBond(stepState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render children?.({ step: bond })}

package/dist/components/stepper/step/step-root.svelte.d.ts

@@ -0,0 +1,31 @@
+import { type Base } from '../../atom';
+import { StepBond } from './bond.svelte';
+import type { StepRootProps } from './types';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: StepRootProps<E, B>;
+    exports: {
+        getBond: () => StepBond;
+    };
+    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(): {
+        getBond: () => StepBond;
+    };
+}
+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 StepRoot: $$IsomorphicComponent;
+type StepRoot<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof StepRoot<E, B>>;
+export default StepRoot;

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

@@ -0,0 +1,48 @@
+<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 { StepperBond } from '../bond.svelte';
+	import type { StepSeparatorProps } from './types';
+
+	const bond = StepBond.get();
+
+	if(!bond){
+		throw new Error('StepSeparator must be used within a Step component.');
+	}
+
+	const stepperBond = StepperBond.get();
+
+	if(!stepperBond){
+		throw new Error('StepSeparator must be used within a Stepper component.');
+	}
+
+	let {
+		class: klass = '',
+		preset = 'stepper.step.separator',
+		children = undefined,
+		...restProps
+	}: StepSeparatorProps<E, B> = $props();
+
+
+	const separatorProps = $derived({
+		...bond?.separator(),
+		...restProps
+	});
+
+	const isVertical = $derived(stepperBond?.state?.props?.orientation === 'vertical');
+</script>
+
+<Atom
+	{bond}
+	{preset}
+	class={[
+		'flex-1 data-[active=true]:bg-primary data-[completed=true]:bg-primary/70',
+		isVertical ? 'h-8 w-0.5 mx-auto' : 'h-0.5 w-full my-auto',
+		'bg-border',
+		'$preset',
+		klass
+	]}
+	{...separatorProps}
+>
+	{@render children?.({ step: bond })}
+</Atom>