@svelte-atoms/core 1.0.0-alpha.28 → 1.0.0-alpha.30

package/dist/components/collapsible/collapsible.stories.svelte

@@ -1,173 +1,172 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Collapsible as ACollapsible } from '.';
-	import Root from '../root/root.svelte';
-
-	import { animate as motion } from 'motion';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Collapsible',
-		// 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">
-</script>
-
-<Story name="Collapsible" args={{}}>
-	<Root class="gap-2 p-4">
-		<ACollapsible.Root>
-			{#snippet children({ collapsible })}
-				{@const isOpen = collapsible.state.props.open}
-
-				<ACollapsible.Header class="">
-					<div>Hello Atoms UI 1</div>
-					<ACollapsible.Indicator />
-				</ACollapsible.Header>
-
-				<ACollapsible.Body
-					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
-					enter={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{
-								duration: 0.2,
-								ease: 'linear'
-							}
-						);
-						return { duration: 0.2 };
-					}}
-					exit={(node) => {
-						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
-						return { duration: 0.2 };
-					}}
-					animate={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{ duration: 0.2, ease: 'linear' }
-						);
-					}}
-				>
-					<div class="py-2">
-						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.
-					</div>
-				</ACollapsible.Body>
-			{/snippet}
-		</ACollapsible.Root>
-
-		<ACollapsible.Root>
-			{#snippet children({ collapsible })}
-				{@const isOpen = collapsible.state.isOpen}
-
-				<ACollapsible.Header class="">
-					<div>Hello Atoms UI 2</div>
-					<ACollapsible.Indicator />
-				</ACollapsible.Header>
-
-				<ACollapsible.Body
-					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
-					enter={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{
-								duration: 0.2,
-								ease: 'linear'
-							}
-						);
-						return { duration: 0.2 };
-					}}
-					exit={(node) => {
-						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
-						return { duration: 0.2 };
-					}}
-					animate={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{ duration: 0.1, ease: 'linear' }
-						);
-					}}
-				>
-					<div class="py-2">
-						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.
-					</div>
-				</ACollapsible.Body>
-			{/snippet}
-		</ACollapsible.Root>
-
-		<ACollapsible.Root>
-			{#snippet children({ collapsible })}
-				{@const isOpen = collapsible.state.isOpen}
-
-				<ACollapsible.Header class="">
-					<div>Hello Atoms UI 3</div>
-					<ACollapsible.Indicator />
-				</ACollapsible.Header>
-
-				<ACollapsible.Body
-					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
-					enter={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{
-								duration: 0.2,
-								ease: 'linear'
-							}
-						);
-						return { duration: 0.2 };
-					}}
-					exit={(node) => {
-						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
-						return { duration: 0.2 };
-					}}
-					animate={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{ duration: 0.1, ease: 'linear' }
-						);
-					}}
-				>
-					<div class="py-2">
-						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.
-					</div>
-				</ACollapsible.Body>
-			{/snippet}
-		</ACollapsible.Root>
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Collapsible as ACollapsible } from '.';
+
+	import { animate as motion } from 'motion';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Collapsible',
+		// 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">
+</script>
+
+<Story name="Collapsible" args={{}}>
+	<div class="flex w-full flex-col gap-2">
+		<ACollapsible.Root>
+			{#snippet children({ collapsible })}
+				{@const isOpen = collapsible.state.props.open}
+
+				<ACollapsible.Header class="">
+					<div>Hello Atoms UI 1</div>
+					<ACollapsible.Indicator />
+				</ACollapsible.Header>
+
+				<ACollapsible.Body
+					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
+					enter={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{
+								duration: 0.2,
+								ease: 'linear'
+							}
+						);
+						return { duration: 0.2 };
+					}}
+					exit={(node) => {
+						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
+						return { duration: 0.2 };
+					}}
+					animate={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{ duration: 0.2, ease: 'linear' }
+						);
+					}}
+				>
+					<div class="py-2">
+						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.
+					</div>
+				</ACollapsible.Body>
+			{/snippet}
+		</ACollapsible.Root>
+
+		<ACollapsible.Root>
+			{#snippet children({ collapsible })}
+				{@const isOpen = collapsible.state.isOpen}
+
+				<ACollapsible.Header class="">
+					<div>Hello Atoms UI 2</div>
+					<ACollapsible.Indicator />
+				</ACollapsible.Header>
+
+				<ACollapsible.Body
+					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
+					enter={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{
+								duration: 0.2,
+								ease: 'linear'
+							}
+						);
+						return { duration: 0.2 };
+					}}
+					exit={(node) => {
+						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
+						return { duration: 0.2 };
+					}}
+					animate={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{ duration: 0.1, ease: 'linear' }
+						);
+					}}
+				>
+					<div class="py-2">
+						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.
+					</div>
+				</ACollapsible.Body>
+			{/snippet}
+		</ACollapsible.Root>
+
+		<ACollapsible.Root>
+			{#snippet children({ collapsible })}
+				{@const isOpen = collapsible.state.isOpen}
+
+				<ACollapsible.Header class="">
+					<div>Hello Atoms UI 3</div>
+					<ACollapsible.Indicator />
+				</ACollapsible.Header>
+
+				<ACollapsible.Body
+					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
+					enter={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{
+								duration: 0.2,
+								ease: 'linear'
+							}
+						);
+						return { duration: 0.2 };
+					}}
+					exit={(node) => {
+						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
+						return { duration: 0.2 };
+					}}
+					animate={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{ duration: 0.1, ease: 'linear' }
+						);
+					}}
+				>
+					<div class="py-2">
+						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.
+					</div>
+				</ACollapsible.Body>
+			{/snippet}
+		</ACollapsible.Root>
+	</div>
+</Story>

package/dist/components/combobox/combobox-root.svelte

@@ -1,65 +1,65 @@
-<script lang="ts" generics="D">
-	import type { ComboboxRootProps } from './types';
-	import { defineProperty, defineState } from '../../utils';
-	import { ComboboxBond, ComboboxBondState, type ComboboxBondProps } from './bond.svelte';
-
-	let {
-		open = $bindable(false),
-		value = $bindable(),
-		values = $bindable(),
-		query = $bindable(),
-		text = $bindable(),
-		multiple = false,
-		disabled = false,
-		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-		placement = 'bottom-start',
-		offset = 4,
-		factory = _factory,
-		children = undefined,
-		...restProps
-	}: ComboboxRootProps = $props();
-
-	const bondProps = defineState<ComboboxBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty(
-				'values',
-				() => (multiple ? values : [value]),
-				(v) => {
-					values = v;
-					value = v[0];
-				}
-			),
-			defineProperty(
-				'query',
-				() => query,
-				(v) => (query = v)
-			),
-			defineProperty(
-				'text',
-				() => text,
-				(v) => (text = v)
-			)
-		],
-		() => ({ disabled, multiple, placements, offset, placement: 'bottom-start', ...restProps })
-	);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new ComboboxBondState<D>(() => props);
-
-		return new ComboboxBond(bondState).share();
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{@render children?.({ combobox: bond })}
+<script lang="ts" generics="D">
+	import type { ComboboxRootProps } from './types';
+	import { defineProperty, defineState } from '../../utils';
+	import { ComboboxBond, ComboboxBondState, type ComboboxBondProps } from './bond.svelte';
+
+	let {
+		open = $bindable(false),
+		value = $bindable(),
+		values = $bindable(),
+		query = $bindable(),
+		text = $bindable(),
+		multiple = false,
+		disabled = false,
+		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+		placement = 'bottom-start',
+		offset = 1,
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: ComboboxRootProps = $props();
+
+	const bondProps = defineState<ComboboxBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty(
+				'values',
+				() => (multiple ? values : [value]),
+				(v) => {
+					values = v;
+					value = v[0];
+				}
+			),
+			defineProperty(
+				'query',
+				() => query,
+				(v) => (query = v)
+			),
+			defineProperty(
+				'text',
+				() => text,
+				(v) => (text = v)
+			)
+		],
+		() => ({ disabled, multiple, placements, offset, placement: 'bottom-start', ...restProps })
+	);
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new ComboboxBondState<D>(() => props);
+
+		return new ComboboxBond(bondState).share();
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render children?.({ combobox: bond })}

package/dist/components/combobox/compobox.stories.svelte

@@ -1,54 +1,51 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Combobox as ACombobox } from '.';
-	import Root from '../root/root.svelte';
-	import { Input } from '../input';
-	import { Divider } from '../divider';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Combobox',
-		// 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);
-	let value = $state<string | undefined>('ar');
-	let array = $state([
-		{ value: 'ar', label: 'Arabic' },
-		{ value: 'en', label: 'English' },
-		{ value: 'sp', label: 'Spanish' },
-		{ value: 'it', label: 'Italian' }
-	]);
-</script>
-
-<Story name="Combobox" args={{}}>
-	<Root class="items-center justify-center p-4">
-		<ACombobox.Root bind:open bind:value>
-			{#snippet children({ combobox })}
-				<ACombobox.Trigger
-					base={Input.Root}
-					class="h-10 min-w-sm items-center gap-0 rounded-sm p-1 transition-colors duration-200"
-				>
-					<Input.Icon class="text-foreground/50">$</Input.Icon>
-					<Divider class="mx-1" vertical />
-					<ACombobox.Input class="px-1" placeholder="Select a language" />
-				</ACombobox.Trigger>
-				<ACombobox.List>
-					{#each array.filter((item) => !combobox.state.query || item.label
-								.toLowerCase()
-								.includes(combobox.state.query)) as item (item.value)}
-						<ACombobox.Item value={item.value}>{item.label}</ACombobox.Item>
-					{/each}
-				</ACombobox.List>
-			{/snippet}
-		</ACombobox.Root>
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Combobox as ACombobox } from '.';
+	import { Input } from '../input';
+	import { Divider } from '../divider';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Combobox',
+		// 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);
+	let value = $state<string | undefined>('ar');
+	let array = $state([
+		{ value: 'ar', label: 'Arabic' },
+		{ value: 'en', label: 'English' },
+		{ value: 'sp', label: 'Spanish' },
+		{ value: 'it', label: 'Italian' }
+	]);
+</script>
+
+<Story name="Combobox" args={{}}>
+	<ACombobox.Root bind:open bind:value>
+		{#snippet children({ combobox })}
+			<ACombobox.Trigger
+				base={Input.Root}
+				class="h-10 min-w-sm items-center gap-0 rounded-sm p-1 transition-colors duration-200"
+			>
+				<Input.Icon class="text-foreground/50">$</Input.Icon>
+				<Divider class="mx-1" vertical />
+				<ACombobox.Input class="px-1" placeholder="Select a language" />
+			</ACombobox.Trigger>
+			<ACombobox.List>
+				{#each array.filter((item) => !combobox.state.query || item.label
+							.toLowerCase()
+							.includes(combobox.state.query)) as item (item.value)}
+					<ACombobox.Item value={item.value}>{item.label}</ACombobox.Item>
+				{/each}
+			</ACombobox.List>
+		{/snippet}
+	</ACombobox.Root>
+</Story>

package/dist/components/container/container.stories.svelte

@@ -1,23 +1,20 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
-	import ContainerCmp from './container.svelte';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Container'
-	});
-</script>
-
-<Story name="Container">
-	<Root class="p-4">
-		<ContainerCmp class="flex w-full flex-col items-center gap-4">
-			<div class="flex w-full gap-4">
-				{#each { length: 5 } as _, i (i)}
-					<div class="bg-foreground h-80 flex-1 rounded-lg"></div>
-				{/each}
-			</div>
-
-			<div class="bg-foreground h-80 w-[50cqw] rounded-lg"></div>
-		</ContainerCmp>
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ContainerCmp from './container.svelte';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Container'
+	});
+</script>
+
+<Story name="Container">
+	<ContainerCmp class="flex w-full flex-col items-center gap-4">
+		<div class="flex w-full gap-4">
+			{#each { length: 5 } as _, i (i)}
+				<div class="bg-foreground h-80 flex-1 rounded-lg"></div>
+			{/each}
+		</div>
+
+		<div class="bg-foreground h-80 w-[50cqw] rounded-lg"></div>
+	</ContainerCmp>
+</Story>

package/dist/components/datagrid/datagrid-root.svelte

@@ -10,7 +10,7 @@
 		class: klass = '',
 		values = $bindable([]),
 		template = undefined,
-		data = [],
+		fallbackTemplate = 'auto',
 		factory = _factory,
 		children = undefined,
 		onmount = undefined,
@@ -46,7 +46,7 @@
 	{bond}
 	preset="datagrid"
 	class={['border-border', 'datagrid-root w-full gap-x-0 gap-y-0', '$preset', klass]}
-	style="--template-columns:{bond.state.template}"
+	style="--template-columns:{bond.state.template ?? fallbackTemplate}"
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}