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

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

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

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

package/dist/components/tabs/tabs.stories.svelte

@@ -1,70 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { animate } from 'motion';
-	import { Tabs as ATabs, Tab } from '.';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Tabs',
-		// 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">
-	let value = $state('ar');
-
-	const array = $state([
-		{
-			value: 'en',
-			label: "English",
-			description: "This content is teleported from Tab.Body to Tabs.Content component."
-		}, 
-		{
-			value: "ar",
-			label: "Arabic",
-			description:"هذا المحتوى يتم نقله من Tab.Body إلى مكون Tabs.Content."
-		},{
-			value: "fr",
-			label: "French",
-			description:"Ce contenu est téléporté de Tab.Body vers le composant Tabs.Content."
-		}
-	])
-</script>
-
-<Story name="Tabs" args={{}}>
-	<ATabs.Root bind:value>
-		<ATabs.Header class="border-b">
-			{#each array as item (item.value)}
-				<Tab.Root value={item.value}>
-					<Tab.Header>{item.label}</Tab.Header>
-					<Tab.Body class="p-4">
-						<h3 class="font-bold mb-2">{item.label} Content</h3>
-						<p>{item.description}</p>
-					</Tab.Body>
-				</Tab.Root>
-			{/each}
-		</ATabs.Header>
-				
-		<ATabs.Body>
-			<!-- Tab bodies are defined separately and teleported to Tabs.Content -->
-			<ATabs.Content 
-				enter={node=> {
-					const duration = 0.3;
-					animate(node, { opacity: [0, 1] }, { duration });
-					return { duration };
-				}}
-				exit={node=> {
-					const duration = 0.1;
-					animate(node, { opacity: [1, 0] }, { duration });
-					return { duration };
-				}}
-			/>
-		</ATabs.Body>
-	</ATabs.Root>
-</Story>

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

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

package/dist/components/tooltip/tooltip.stories.svelte

@@ -1,32 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Tooltip as Tooltip_ } from '.';
-	import { Root as TooltipRoot } from './atoms';
-	import { Button } from '../button';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Tooltip',
-		// 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">
-	let open = $state(false);
-</script>
-
-<Story name="Tooltip" args={{}}>
-	<Tooltip_.Root bind:open offset={0}>
-		<Tooltip_.Trigger base={Button}>Open Popover</Tooltip_.Trigger>
-		<Tooltip_.Content>
-			<div>Hello World !</div>
-			<Tooltip_.Arrow />
-		</Tooltip_.Content>
-	</Tooltip_.Root>
-</Story>

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

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

package/dist/components/tree/tree.stories.svelte

@@ -1,142 +0,0 @@
-<script module>
-	import { untrack } from 'svelte';
-	import { animate } from 'motion';
-	import { RenderScan } from 'svelte-render-scan';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { dev } from '$app/environment';
-	import { Tree as Tree_ } from '.';
-	import { tree } from './attachments.svelte';
-	import { TreeBond } from './bond.svelte';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Tree',
-		// 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">
-	let open = $state(true);
-</script>
-
-<Story name="Tree" args={{}}>
-	<Tree_.Root class="" bind:open>
-		{#if dev}
-			<RenderScan duration={300} />
-		{/if}
-
-		<Tree_.Header>Vehicles</Tree_.Header>
-
-		<Tree_.Body
-			class="border-l border-l-neutral-200"
-			onmount={(node) => {
-				const bond = TreeBond.get();
-				const isOpen = untrack(() => bond?.state.props.open ?? false);
-				animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
-			}}
-			{@attach tree((node, bond) => {
-				const isOpen = bond?.state.props.open ?? false;
-				animate(
-					node,
-					{
-						height: +isOpen ? 'auto' : 0,
-						opacity: +isOpen,
-						pointerEvents: isOpen ? 'all' : 'none'
-					},
-					{ duration: 0.1 }
-				);
-			})}
-		>
-			<Tree_.Root>
-				<Tree_.Header>Cars</Tree_.Header>
-				<Tree_.Body
-					class="border-l border-l-neutral-200"
-					onmount={(node) => {
-						const bond = TreeBond.get();
-						const isOpen = bond?.state.props.open ?? false;
-						animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
-					}}
-					animate={(node) => {
-						const bond = TreeBond.get();
-						const isOpen = bond?.state.props.open ?? false;
-						animate(
-							node,
-							{
-								height: +isOpen ? 'auto' : 0,
-								opacity: +isOpen,
-								pointerEvents: isOpen ? 'all' : 'none'
-							},
-							{ duration: 0.1 }
-						);
-					}}
-				>
-					Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-					tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-					dolor diam nascetur.
-				</Tree_.Body>
-			</Tree_.Root>
-
-			<Tree_.Root>
-				<Tree_.Header>Trucks</Tree_.Header>
-				<Tree_.Body
-					class="border-l border-l-neutral-200"
-					onmount={(node) => {
-						const bond = TreeBond.get();
-						const isOpen = bond?.state.props.open ?? false;
-						animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
-					}}
-					{@attach tree((node, bond) => {
-						const isOpen = bond?.state.props.open ?? false;
-						animate(
-							node,
-							{
-								height: +isOpen ? 'auto' : 0,
-								opacity: +isOpen,
-								pointerEvents: isOpen ? 'all' : 'none'
-							},
-							{ duration: 0.1 }
-						);
-					})}
-				>
-					Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-					tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-					dolor diam nascetur.
-				</Tree_.Body>
-			</Tree_.Root>
-
-			<Tree_.Root>
-				<Tree_.Header>Bikes</Tree_.Header>
-				<Tree_.Body
-					class="border-l border-l-neutral-200"
-					onmount={(node) => {
-						const bond = TreeBond.get();
-						const isOpen = untrack(() => bond?.state.props.open ?? false);
-						animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
-					}}
-					{@attach tree((node, bond) => {
-						const isOpen = bond?.state.props.open ?? false;
-						animate(
-							node,
-							{
-								height: +isOpen ? 'auto' : 0,
-								opacity: +isOpen,
-								pointerEvents: isOpen ? 'all' : 'none'
-							},
-							{ duration: 0.1 }
-						);
-					})}
-				>
-					Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-					tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-					dolor diam nascetur.
-				</Tree_.Body>
-			</Tree_.Root>
-		</Tree_.Body>
-	</Tree_.Root>
-</Story>

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

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