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

package/dist/components/stepper/stepper.stories.svelte

@@ -0,0 +1,264 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Stepper',
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {}
+	});
+</script>
+
+<script lang="ts">
+	import { Stepper, Step } from './';
+	import { Button } from '../button';
+	import { Textarea } from '../textarea';
+	import type { StepperBond } from './bond.svelte';
+	import { animate } from 'motion'
+	import { Stack } from '../stack';
+	
+	const steps = $state([
+		{
+			header: 'Account Information',
+			body: 'Enter your personal details',
+			completed: false
+		},
+		{
+			header: 'Address',
+			body: 'Provide your shipping address',
+			completed: false
+		},
+		{
+			header: 'Payment',
+			body: 'Select payment method',
+			completed: false
+		},
+		{
+			header: 'Review',
+			body: 'Review and confirm',
+			optional: true,
+			completed: false
+		}
+	]);
+	let activeStepIndex = $state(0);
+	
+	function handleNext(stepper: StepperBond) {
+		stepper.state.navigation.next();
+	}
+
+	function handlePrevious(stepper: StepperBond) {
+		stepper.state.navigation.previous();
+	}
+
+	function handleReset(stepper: StepperBond) {
+		stepper.state.navigation.reset();
+	}
+</script>
+
+<Story name="Horizontal" args={{}}>
+	<Stepper.Root bind:step= {activeStepIndex} linear={true}>
+		{#snippet children({ stepper })}
+			<!-- Header: Step indicators -->
+			<Stepper.Header class="flex justify-between">
+					{#each steps as stepData, i}
+						<Step.Root index={i} header={stepData.header} body={stepData.body}>
+							{#snippet children({ step })}
+								{@const isActive = step?.state?.isActive}
+
+								<Step.Header class="flex flex-col gap-2 flex-1">
+									<div class="flex items-center w-full">
+										<Step.Indicator />
+										<Step.Separator class="" />
+									</div>
+
+									<div class="flex flex-col pr-4">
+										<Step.Title class={isActive
+													? 'text-foreground font-semibold'
+													: 'text-muted-foreground'}>
+												{stepData?.header}
+												{#if stepData?.optional}
+													<span class="text-xs">(Optional)</span>
+												{/if}
+										</Step.Title>
+
+										<Step.Description class={['text-xs text-muted-foreground']}>
+											{stepData?.body}
+										</Step.Description>
+									</div>
+								</Step.Header>
+
+								<!-- Step Content (shown in Stepper.Body when active) -->
+								<Step.Body>
+									<h3 class="text-xl font-semibold mb-4">
+										Step {i + 1}: {stepData.header}
+									</h3>
+									<p class="text-muted-foreground mb-6">{stepData.body}</p>
+									
+									<!-- Actual step content would go here -->
+									<div class="text-sm text-muted-foreground">
+										Content for {stepData.header} step...
+									</div>
+								</Step.Body>
+							{/snippet}
+						</Step.Root>
+					{/each}
+			</Stepper.Header>
+
+			<!-- Body: Automatically renders active step content -->
+			<Stepper.Body class="my-6">
+				<Textarea.Root base={Stack.Root} class="overflow-hidden">
+					<Stepper.Content 
+						base={Stack.Item} 
+						class="min-h-50 flex flex-col p-6"
+						enter={(node)=> {
+							const duration = 0.4;
+							animate(node, { opacity: [0, 1], y: [20, 0] }, { duration });
+							return { duration: duration * 1000 };
+						}}
+						exit={(node)=> {
+							const duration = 0.3;
+							animate(node, { opacity: [1, 0], y: [0, 0] }, { duration });
+							return { duration: duration * 1000 };
+						}}
+					/>
+				</Textarea.Root>
+			</Stepper.Body>
+
+			<!-- Footer: Navigation buttons -->
+			<Stepper.Footer class="flex justify-between">
+				<Button
+					variant="outline"
+					disabled={stepper.state.isFirstStep}
+					onclick={() => handlePrevious(stepper)}
+				>
+					Previous
+				</Button>
+
+				<div class="flex gap-2">
+					<Button variant="ghost" onclick={() => handleReset(stepper)}>Reset</Button>
+
+					{#if stepper.state.isLastStep}
+						<Button onclick={() => alert('Complete!')}>Complete</Button>
+					{:else}
+						<Button onclick={() => handleNext(stepper)}>Next</Button>
+					{/if}
+				</div>
+			</Stepper.Footer>
+		{/snippet}
+	</Stepper.Root>
+</Story>
+
+<Story name="Vertical" args={{}}>
+	<Stepper.Root class="flex gap-4" step={1}>
+			{#snippet children({ stepper })}
+				<div class="flex gap-4">
+					<Stepper.Header class="">
+						{#each steps as stepData, i}
+							<Step.Root
+								index={i}
+								header={stepData.header}
+								body={stepData.body}
+								completed={stepData.completed}
+								optional={stepData.optional}
+							>
+								{#snippet children({ step })}
+									<Step.Header class="flex w-full">
+										<div class="flex gap-2">
+											<div class="flex flex-col">
+												<Step.Indicator class="" />
+												<Step.Separator class="w-[2px] min-h-10 translate-x-[15px]" />
+											</div>
+											<div class="flex flex-col">
+												<Step.Title>
+													{stepData.header}
+													{#if stepData.optional}
+														<span class="text-xs">(Optional)</span>
+													{/if}
+												</Step.Title>
+	
+												<Step.Description>
+													{stepData}
+												</Step.Description>
+											</div>
+										</div>
+
+									</Step.Header>
+
+									<!-- Step Content (shown in Stepper.Body when active) -->
+									<Step.Body  
+										enter={(node)=> {
+											const duration = 0.4;
+											animate(node, { opacity: [0, 1], y: [20, 0] }, { duration });
+											return { duration: duration * 1000 };
+										}}
+										exit={(node)=> {
+											const duration = 0.2;
+											animate(node, { opacity: [1, 0], y: [0, 0] }, { duration });
+											return { duration: duration * 1000 };
+										}}
+									>
+										<h3 class="text-xl font-semibold mb-4">
+											Step {i + 1}: {stepData.header}
+										</h3>
+										<p class="text-muted-foreground mb-6">{stepData.body}</p>
+										
+										<!-- Actual step content would go here -->
+										<div class="text-sm text-muted-foreground">
+											Content for {stepData.header} step...
+										</div>
+									</Step.Body>
+								{/snippet}
+							</Step.Root>
+						{/each}
+					</Stepper.Header>
+
+					<!-- Body: Automatically renders active step content -->
+					<Stepper.Body class="h-full">
+						<Textarea.Root base={Stack.Root} class="overflow-hidden h-full min-w-96">
+							<Stepper.Content 
+								base={Stack.Item} 
+								class="min-h-50 flex flex-col p-6"
+								enter={(node)=> {
+									const duration = 0.4;
+									animate(node, { opacity: [0, 1], y: [20, 0] }, { duration });
+									return{duration: duration * 1000};
+								}}
+								exit={(node)=> {
+									const duration = 0.3;
+									animate(node, { opacity: [1, 0], y: [0, 0] }, { duration });
+									return { duration: duration * 1000 };
+								}}
+							/>
+						</Textarea.Root>
+					</Stepper.Body>
+				</div>
+
+				<Stepper.Footer>
+				<div class="flex justify-between">
+					<Button
+						variant="outline"
+						disabled={stepper.state.isFirstStep}
+						onclick={() => handlePrevious(stepper)}
+					>
+						Previous
+					</Button>
+
+					<div class="flex gap-2">
+						<Button variant="ghost" onclick={() => handleReset(stepper)}>Reset</Button>
+
+						{#if stepper.state.isLastStep}
+							<Button onclick={() => alert('Complete!')}>Complete</Button>
+						{:else}
+							<Button onclick={() => handleNext(stepper)}>Next</Button>
+						{/if}
+					</div>
+				</div>
+			</Stepper.Footer>
+			{/snippet}
+	</Stepper.Root>
+</Story>

package/dist/components/stepper/stepper.stories.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Stepper } from './';
+declare const Stepper: import("svelte").Component<Record<string, never>, {}, "">;
+type Stepper = ReturnType<typeof Stepper>;
+export default Stepper;

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

@@ -0,0 +1,63 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+import type { Factory } from '../../types';
+import type { StepperBond } from './bond.svelte';
+export interface StepperRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'> {
+    /**
+     * The active step index (0-based)
+     * @bindable
+     */
+    step?: number;
+    /**
+     * Whether to enforce linear progression (users can only go to next/previous steps)
+     * @default false
+     */
+    linear?: boolean;
+    /**
+     * Whether the stepper is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Custom factory for creating stepper bond
+     */
+    factory?: Factory<StepperBond>;
+    /**
+     * Child render function
+     */
+    children?: Snippet<[{
+        stepper: StepperBond;
+    }]>;
+}
+export interface StepperHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'> {
+    /**
+     * Child render function
+     */
+    children?: Snippet<[{
+        stepper?: StepperBond;
+    }]>;
+}
+export interface StepperBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'> {
+    /**
+     * Child render function
+     */
+    children?: Snippet<[{
+        stepper?: StepperBond;
+    }]>;
+}
+export interface StepperFooterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'> {
+    /**
+     * Child render function
+     */
+    children?: Snippet<[{
+        stepper?: StepperBond;
+    }]>;
+}
+export interface StepperContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'> {
+    /**
+     * Child render function
+     */
+    children?: Snippet<[{
+        stepper?: StepperBond;
+    }]>;
+}

package/dist/components/stepper/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/tabs/atoms.d.ts

@@ -1,3 +1,4 @@
 export { default as Root } from './tabs-root.svelte';
 export { default as Header } from './tabs-header.svelte';
 export { default as Body } from './tabs-body.svelte';
+export { default as Content } from './tabs-content.svelte';

package/dist/components/tabs/atoms.js

@@ -1,3 +1,4 @@
 export { default as Root } from './tabs-root.svelte';
 export { default as Header } from './tabs-header.svelte';
 export { default as Body } from './tabs-body.svelte';
+export { default as Content } from './tabs-content.svelte';

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

@@ -1,22 +1,29 @@
 import type { TabBond } from './tab/bond.svelte';
-import { Bond, BondState } from '../../shared/bond.svelte';
-export type TabsBondProps<T extends Record<string, unknown> = Record<string, unknown>> = {
-    value?: string;
+import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
+import type { Snippet } from 'svelte';
+export type TabsBondProps<T extends Record<string, unknown> = Record<string, unknown>> = BondStateProps & {
+    value?: string | undefined;
     multiple?: boolean;
-    extend: T;
+    extend?: T;
 };
 export type TabElements = {
     root: HTMLElement;
     header: HTMLElement;
     body: HTMLElement;
 };
+export type TabContentSnippet = {
+    props: Record<string, unknown>;
+    children: Snippet<[{
+        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;
-        'aria-orientation': string;
+        'aria-orientation': "horizontal";
         'data-kind': string;
     };
     header(props?: Record<string, unknown>): {
@@ -36,8 +43,14 @@ export declare class TabsBondState<T> extends BondState<TabsBondProps> {
     #private;
     constructor(props: () => TabsBondProps);
     get selectedItem(): TabBond<T>;
+    get activeTabContent(): TabContentSnippet | 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;
+    unregisterTabContent(id: string): void;
+    getTab(id: string): TabBond<T> | undefined;
 }

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

@@ -62,6 +62,7 @@ export class TabsBond extends Bond {
 }
 export class TabsBondState extends BondState {
     #items = new SvelteMap();
+    #tabContents = new SvelteMap();
     #selectedItem = $derived(this.props?.value ? this.#items.get(this.props?.value) : undefined);
     constructor(props) {
         super(props);
@@ -69,6 +70,9 @@ export class TabsBondState extends BondState {
     get selectedItem() {
         return this.#selectedItem;
     }
+    get activeTabContent() {
+        return this.props?.value ? this.#tabContents.get(this.props.value) : undefined;
+    }
     mountItem(id, item) {
         if (this.#items.size && !this.props.value) {
             this.props.value = item.state.props.value;
@@ -85,4 +89,13 @@ export class TabsBondState extends BondState {
     unselect() {
         this.props.value = undefined;
     }
+    registerTabContent(id, props, children) {
+        this.#tabContents.set(id, { props, children });
+    }
+    unregisterTabContent(id) {
+        this.#tabContents.delete(id);
+    }
+    getTab(id) {
+        return this.#items.get(id);
+    }
 }

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

@@ -18,11 +18,8 @@ export declare class TabBond<T = unknown> extends Bond<TabBondProps<T>, TabBondS
     mount(): (() => void) | undefined;
     unmount(): void;
     share(): this;
-    root(props?: Record<string, unknown>): {
-        'data-active': boolean;
-        'data-kind': string;
-    };
-    header(props?: Record<string, unknown>): {
+    header(): {
+        [x: symbol]: (node: HTMLElement) => (() => void) | undefined;
         id: string;
         role: string;
         'aria-controls': string;
@@ -31,7 +28,8 @@ export declare class TabBond<T = unknown> extends Bond<TabBondProps<T>, TabBondS
         'data-active': boolean;
         'data-kind': string;
     };
-    body(props?: Record<string, unknown>): {
+    body(): {
+        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         role: string;
         'aria-labeledby': string;
@@ -40,7 +38,8 @@ export declare class TabBond<T = unknown> extends Bond<TabBondProps<T>, TabBondS
         'data-active': boolean;
         'data-kind': string;
     };
-    description(props?: Record<string, unknown>): {
+    description(): {
+        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         'data-kind': string;
     };
@@ -51,6 +50,7 @@ export declare class TabBondState<T> extends BondState<TabBondProps<T>> {
     #private;
     constructor(props: () => TabBondProps<T>);
     get isActive(): boolean;
+    get isDisabled(): boolean;
     select(): void;
     unselect(): void;
 }

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

@@ -5,7 +5,6 @@ import { getElementId } from '../../../utils/dom.svelte';
 import { portal } from '../../../attachments/portal.svelte';
 import { Bond, BondState } from '../../../shared/bond.svelte';
 const TAB_ELEMENTS_KIND = {
-    root: 'tab-root',
     header: 'tab-header',
     body: 'tab-body',
     description: 'tab-description'
@@ -29,13 +28,7 @@ export class TabBond extends Bond {
     share() {
         return TabBond.set(this);
     }
-    root(props) {
-        return {
-            'data-active': this.state.isActive,
-            'data-kind': 'tab-root'
-        };
-    }
-    header(props) {
+    header() {
         const id = getElementId(this.id, TAB_ELEMENTS_KIND.header);
         const tabBodyId = getElementId(this.id, TAB_ELEMENTS_KIND.body);
         return {
@@ -46,7 +39,6 @@ export class TabBond extends Bond {
             'data-controler-id': this.#tabs?.id,
             'data-active': this.state.isActive,
             'data-kind': 'tab-header',
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.header = node;
                 if (!this.#tabs?.elements.header) {
@@ -58,7 +50,7 @@ export class TabBond extends Bond {
             }
         };
     }
-    body(props) {
+    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);
@@ -71,18 +63,16 @@ export class TabBond extends Bond {
             'aria-controledby': tabHeaderId,
             'data-active': isActive,
             'data-kind': 'tab-body',
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.body = node;
             }
         };
     }
-    description(props) {
+    description() {
         const id = getElementId(this.id, TAB_ELEMENTS_KIND.description);
         return {
             id,
             'data-kind': 'tab-description',
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.description = node;
             }
@@ -96,14 +86,18 @@ export class TabBond extends Bond {
     }
 }
 export class TabBondState extends BondState {
-    #tabsState;
+    #tabsBond;
+    #tabsState = $derived(this.#tabsBond?.state);
     constructor(props) {
         super(props);
-        this.#tabsState = TabsBond.get()?.state;
+        this.#tabsBond = TabsBond.get();
     }
     get isActive() {
         return this.#tabsState?.props.value === this.props.value;
     }
+    get isDisabled() {
+        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,52 +1,43 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../../atom';
-	import type { TabBodyProps } from '../types';
-	import { TabBond } from './bond.svelte';
-
-	const bond = TabBond.get();
-
-	if (!bond) {
-		throw new Error('TabBody must be used within a Tab');
-	}
-
-	let {
-		class: klass = '',
-		children,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: TabBodyProps<E, B> = $props();
-
-	let mounted = $state(false);
-
-	const bodyProps = $derived({
-		...bond?.body(),
-		...restProps
-	});
-
-	$effect(() => {
-		mounted = true;
-	});
-</script>
-
-<HtmlAtom
-	preset="tab.body"
-	class={[
-		'tab-body border-border pointer-events-auto flex h-auto w-full min-w-full flex-1 flex-col',
-		'$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}
->
-	{@render children?.({ tab: bond })}
-</HtmlAtom>
+<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 -->