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

package/dist/components/scrollable/scrollable.stories.svelte

@@ -1,116 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Scrollable as Scrollable_ } from '.';
-	import { animate } from 'motion';
-	import { ScrollableBond } from './bond.svelte';
-	import { on } from '../../attachments/event.svelte';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Scrollable'
-	});
-</script>
-
-<Story name="Scrollable">
-	{#snippet children({ args })}
-		<div class="h-full w-full flex-1">
-			<Scrollable_.Root
-				class="border-border box-border flex min-h-full w-full rounded-lg border shadow-inner"
-				open={false}
-				{@attach (node) => {
-					const scrollable = ScrollableBond.get();
-					if (!scrollable) return;
-
-					const c1 = on('pointerenter', () => {
-						scrollable.state.props.open = true;
-					})(node);
-
-					const c2 = on('pointerleave', () => {
-						scrollable.state.props.open = false;
-					})(node);
-
-					return () => {
-						c1();
-						c2();
-					};
-				}}
-			>
-				{#snippet children({ scrollable })}
-					<Scrollable_.Container class="max-h-[100svh]">
-						<Scrollable_.Content>
-							<div class="mx-auto w-[600px] p-4">
-								<h3 class="mb-4 text-lg font-semibold">Scrollable Content (New API)</h3>
-								<div class="grid grid-cols-3 gap-4">
-									{#each Array(99) as _, i}
-										<div class="rounded border p-4 shadow">
-											<h4 class="font-medium">Card {i + 1}</h4>
-											<p class="mt-2 text-sm">
-												This is some sample content in card {i + 1}. You can scroll horizontally and
-												vertically to see more content.
-											</p>
-										</div>
-									{/each}
-								</div>
-
-								<div class="bg-foreground/10 mt-6 rounded p-4">
-									<p class="text-sm">
-										This content area is larger than the container, so you can scroll both
-										horizontally and vertically using the custom scrollbars or mouse wheel.
-									</p>
-								</div>
-
-								<div class="mt-4 flex gap-2">
-									<button
-										class="rounded bg-blue-500 px-3 py-2 hover:bg-blue-600"
-										onclick={() => scrollable.scrollTo(0, 0)}
-									>
-										Scroll to Top
-									</button>
-									<button
-										class="rounded bg-green-500 px-3 py-2 hover:bg-green-600"
-										onclick={() => scrollable.scrollBy(50, 50)}
-									>
-										Scroll +50px
-									</button>
-								</div>
-							</div>
-						</Scrollable_.Content>
-					</Scrollable_.Container>
-
-					<!-- New unified vertical scrollbar -->
-					<Scrollable_.Track
-						orientation="vertical"
-						class="inset-y-0 right-0 w-[2px] rounded-md"
-						initial={(node) => {
-							animate(node, { opacity: 0, right: 0, top: 0, bottom: 0 }, { duration: 0 });
-						}}
-						enter={(node) => {
-							animate(
-								node,
-								{ opacity: 1, right: 8, top: 8, bottom: 8 },
-								{ duration: 0.3, ease: 'easeOut' }
-							);
-							return {
-								duration: 300
-							};
-						}}
-						exit={(node) => {
-							animate(
-								node,
-								{ opacity: 0, right: 0, top: 0, bottom: 0 },
-								{ duration: 0.3, ease: 'easeOut' }
-							);
-							return {
-								duration: 300
-							};
-						}}
-					>
-						<Scrollable_.Thumb
-							orientation="vertical"
-							class="left-[50%] w-2 origin-center translate-x-[-50%] rounded-none transition-colors"
-						/>
-					</Scrollable_.Track>
-				{/snippet}
-			</Scrollable_.Root>
-		</div>
-	{/snippet}
-</Story>

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

@@ -1,26 +0,0 @@
-export default Scrollable;
-type Scrollable = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string;
-};
-declare const Scrollable: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/sidebar/sidebar.stories.svelte

@@ -1,43 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Sidebar as Sidebar_ } from '.';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Sidebar',
-		// 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 isOpen = $state(false);
-</script>
-
-<Story name="Sidebar" args={{}}>
-	<Sidebar_.Root class="" bind:open={isOpen}>
-		{#snippet children({ sidebar })}
-			<div class="flex size-full">
-				<Sidebar_.Content
-					class="flex min-w-32 flex-col border-r px-6 py-10 whitespace-nowrap"
-					width="300px"
-				>
-					<div>
-						<button
-							onclick={() => {
-								sidebar?.state.toggle?.();
-							}}>Open</button
-						>
-					</div>
-				</Sidebar_.Content>
-
-				<main class="bg-foreground/2 flex-1 p-8">Hello World!</main>
-			</div>
-		{/snippet}
-	</Sidebar_.Root>
-</Story>

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

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

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/toast/bond.d.ts

@@ -1,35 +0,0 @@
-import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
-export type ToastBondProps = BondStateProps & {
-    open: boolean;
-    disabled: boolean;
-    extend?: Record<string, unknown>;
-};
-export type ToastBondElements = {
-    root: HTMLElement;
-    title: HTMLElement;
-    description: HTMLElement;
-};
-export declare class ToastBond<Props extends ToastBondProps = ToastBondProps, State extends ToastBondState<Props> = ToastBondState<Props>> extends Bond<Props, State, ToastBondElements> {
-    static CONTEXT_KEY: string;
-    constructor(s: State);
-    share(): this;
-    root(props?: Record<string, unknown>): {
-        id: string;
-        'aria-labeledby': string;
-        'aria-describedby': string;
-        'aria-disabled': boolean;
-    };
-    title(props?: Record<string, unknown>): {
-        id: string;
-    };
-    description(props?: Record<string, unknown>): {
-        id: string;
-    };
-    static get(): ToastBond | undefined;
-    static set(atom: ToastBond): ToastBond;
-}
-export declare class ToastBondState<Props extends ToastBondProps> extends BondState<Props> {
-    constructor(props: () => Props);
-    open(): void;
-    close(): void;
-}

package/dist/components/toast/bond.js

@@ -1,59 +0,0 @@
-import { Bond, BondState } from '../../shared/bond.svelte';
-import { getContext, setContext } from 'svelte';
-import { createAttachmentKey } from 'svelte/attachments';
-export class ToastBond extends Bond {
-    static CONTEXT_KEY = '@atoms/context/toast';
-    constructor(s) {
-        super(s);
-    }
-    share() {
-        return ToastBond.set(this);
-    }
-    root(props = {}) {
-        return {
-            id: `toast-root-${this.id}`,
-            'aria-labeledby': `toast-title-${this.id}`,
-            'aria-describedby': `toast-description-${this.id}`,
-            'aria-disabled': this.state.props.disabled ?? false,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
-        };
-    }
-    title(props = {}) {
-        return {
-            id: `toast-title-${this.id}`,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.title = node;
-            }
-        };
-    }
-    description(props = {}) {
-        return {
-            id: `toast-description-${this.id}`,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.description = node;
-            }
-        };
-    }
-    static get() {
-        return getContext(this.CONTEXT_KEY);
-    }
-    static set(atom) {
-        return setContext(this.CONTEXT_KEY, atom);
-    }
-}
-export class ToastBondState extends BondState {
-    constructor(props) {
-        super(props);
-    }
-    open() {
-        this.props.open = true;
-    }
-    close() {
-        this.props.open = false;
-    }
-}

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;