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

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

@@ -1,63 +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}	
+<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().spread,
+		...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-root.svelte

@@ -1,42 +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 })}
+<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-separator.svelte

@@ -1,48 +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>
+<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().spread,
+		...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>

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

@@ -1,33 +1,33 @@
-<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 { StepTitleProps } from './types';
-
-	const bond = StepBond.get();
-
-	if(!bond) {
-		throw new Error('StepTitle must be used within a Step component.');
-	}
-
-	let {
-		class: klass = '',
-		preset = 'stepper.step.title',
-		children = undefined,
-		...restProps
-	}: StepTitleProps<E, B> = $props();
-
-
-	const titleProps = $derived({
-		...bond?.title(),
-		...restProps
-	});
-</script>
-
-<Atom
-	as="div"
-	{preset}
-	class={['font-medium text-sm', '$preset', klass]}
-	{...titleProps}
->
-	{@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 { StepTitleProps } from './types';
+
+	const bond = StepBond.get();
+
+	if(!bond) {
+		throw new Error('StepTitle must be used within a Step component.');
+	}
+
+	let {
+		class: klass = '',
+		preset = 'stepper.step.title',
+		children = undefined,
+		...restProps
+	}: StepTitleProps<E, B> = $props();
+
+
+	const titleProps = $derived({
+		...bond?.title().spread,
+		...restProps
+	});
+</script>
+
+<Atom
+	as="div"
+	{preset}
+	class={['font-medium text-sm', '$preset', klass]}
+	{...titleProps}
+>
+	{@render children?.({ step: bond })}
+</Atom>

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

@@ -1,8 +1,12 @@
 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 { StepBond } from './bond.svelte';
-export interface StepRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'> {
+export interface StepSnippetProps extends SnippetProps {
+    step: StepBond;
+}
+export type StepChildren = Snippet<[StepSnippetProps]>;
+export interface StepRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, StepChildren> {
     /**
      * The step index (0-based)
      */
@@ -26,66 +30,18 @@ export interface StepRootProps<E extends keyof HTMLElementTagNameMap = 'div', B
      * Custom factory for creating step bond
      */
     factory?: Factory<StepBond>;
-    /**
-     * Child render function
-     */
-    children?: Snippet<[{
-        step: StepBond;
-    }]>;
 }
-export interface StepIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
-    /**
-     * Child render function
-     */
-    children?: Snippet<[{
-        step: StepBond;
-    }]>;
+export interface StepIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, StepChildren> {
 }
-export interface StepHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
-    /**
-     * Child render function
-     */
-    children?: Snippet<[{
-        step: StepBond;
-    }]>;
+export interface StepHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, StepChildren> {
 }
-export interface StepTitleProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
-    /**
-     * Child render function
-     */
-    children?: Snippet<[{
-        step: StepBond;
-    }]>;
+export interface StepTitleProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, StepChildren> {
 }
-export interface StepDescriptionProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B> {
-    /**
-     * Child render function
-     */
-    children?: Snippet<[{
-        step: StepBond;
-    }]>;
+export interface StepDescriptionProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B, StepChildren> {
 }
-export interface StepBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
-    /**
-     * Child render function
-     */
-    children?: Snippet<[{
-        step: StepBond;
-    }]>;
+export interface StepBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, StepChildren> {
 }
-export interface StepSeparatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
-    /**
-     * Child render function
-     */
-    children?: Snippet<[{
-        step: StepBond;
-    }]>;
+export interface StepSeparatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, StepChildren> {
 }
-export interface StepContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
-    /**
-     * Child render function
-     */
-    children?: Snippet<[{
-        step?: StepBond;
-    }]>;
+export interface StepContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, StepChildren> {
 }

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

@@ -1,43 +1,31 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { Stack } from '../stack';
-	import { StepperBond } from './bond.svelte';
-	import type { StepperBodyProps } from './types';
-
-	const bond = StepperBond.get();
-
-	let {
-		class: klass = '',
-		base=Stack.Root,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		preset = 'stepper.body' as const,
-		...restProps
-	}: StepperBodyProps<E, B> = $props();
-
-	const bodyProps = $derived({
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{preset}
-	{bond}
-	{base}
-	class={['stepper-body w-full', '$preset', klass]}
-	onmount={onmount?.bind(bond?.state)}
-	ondestroy={ondestroy?.bind(bond?.state)}
-	enter={enter?.bind(bond?.state)}
-	exit={exit?.bind(bond?.state)}
-	initial={initial?.bind(bond?.state)}
-	animate={animate?.bind(bond?.state)}
-	{...bodyProps}
->
-	<!-- Custom body content -->
-	{@render children?.({ stepper: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { Stack } from '../stack';
+	import { StepperBond } from './bond.svelte';
+	import type { StepperBodyProps } from './types';
+
+	const bond = StepperBond.get();
+
+	let {
+		class: klass = '',
+		base=Stack.Root,
+		children = undefined,
+		preset = 'stepper.body' as const,
+		...restProps
+	}: StepperBodyProps<E, B> = $props();
+
+	const bodyProps = $derived({
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{preset}
+	{bond}
+	{base}
+	class={['stepper-body w-full', '$preset', klass]}
+	{...bodyProps}
+>
+	<!-- Custom body content -->
+	{@render children?.({ stepper: bond })}
+</HtmlAtom>

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

@@ -1,45 +1,45 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { StepperBond } from './bond.svelte';
-	import type { StepperContentProps } from './types';
-
-	const bond = StepperBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		preset = 'stepper.content' as const,
-		...restProps
-	}: StepperContentProps<E, B> = $props();
-	
-	const activeStep = $derived(bond?.state?.getStep(bond?.state?.props?.step));
-	const activeStepContent = $derived(bond?.state?.activeStepContent);
-
-	const contentKlass = $derived(activeStepContent?.props.class)
-	const contentProps = $derived.by(()=> {
-		const { class: klass, ...restContentProps } = activeStepContent?.props ?? {};
-		return {
-			...restContentProps,
-			...restProps
-		}
-	});
-
-
-</script>
-
-{#if activeStepContent}
-	{#key activeStepContent}
-		<HtmlAtom
-			{preset}
-			{bond}
-			class={['stepper-content w-full', '$preset', contentKlass, klass]}
-			{...contentProps}
-		>
-			<!-- Render teleported step content -->
-			{@render activeStepContent.children({ step: activeStep })}
-
-			<!-- Optional custom content wrapper -->
-			<!-- {@render children?.({ stepper: bond })} -->
-		</HtmlAtom>
-	{/key}
-{/if}
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { StepperBond } from './bond.svelte';
+	import type { StepperContentProps } from './types';
+
+	const bond = StepperBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		preset = 'stepper.content' as const,
+		...restProps
+	}: StepperContentProps<E, B> = $props();
+	
+	const activeStep = $derived(bond?.state?.getStep(bond?.state?.props?.step));
+	const activeStepContent = $derived(bond?.state?.activeStepContent);
+
+	const contentKlass = $derived(activeStepContent?.props.class)
+	const contentProps = $derived.by(()=> {
+		const { class: klass, ...restContentProps } = activeStepContent?.props ?? {};
+		return {
+			...restContentProps,
+			...restProps
+		}
+	});
+
+
+</script>
+
+{#if activeStepContent}
+	{#key activeStepContent}
+		<HtmlAtom
+			{preset}
+			{bond}
+			class={['stepper-content w-full', '$preset', contentKlass, klass]}
+			{...contentProps}
+		>
+			<!-- Render teleported step content -->
+			{@render activeStepContent.children({ step: activeStep })}
+
+			<!-- Optional custom content wrapper -->
+			<!-- {@render children?.({ stepper: bond })} -->
+		</HtmlAtom>
+	{/key}
+{/if}