@svelte-atoms/core 1.0.0-alpha.29 → 1.0.0-alpha.31

package/README.md

@@ -1,8 +1,8 @@
-# ⚛️ @svelte-atoms/core
+# ⚛️ @svelte-atoms/core | Svelte 5 UI Library
 
 > A modern, modular, and accessible Svelte 5 UI component library built with composability at its core.
 
-**@svelte-atoms/core** is a comprehensive Svelte component library that provides fundamental building blocks ("atoms") for creating sophisticated, interactive design systems. Each component is designed with accessibility, type safety, and developer experience in mind. Built with Svelte 5 runes for optimal reactivity and performance.
+Core UI is a comprehensive Svelte component library that provides fundamental building blocks ("atoms") for creating sophisticated, interactive design systems. Each component is designed with accessibility, type safety, and developer experience in mind. Built with Svelte 5 runes for optimal reactivity and performance.
 
 [![npm version](https://img.shields.io/npm/v/@svelte-atoms/core.svg)](https://www.npmjs.com/package/@svelte-atoms/core)
 [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/svelte-atoms/core)
@@ -193,6 +193,7 @@ bun add @svelte-atoms/core
 ```svelte
 <script lang="ts">
 	import { Button, Dialog, Input } from '@svelte-atoms/core';
+	import '@svelte-atoms/tw';
 
 	let dialogOpen = $state(false);
 	let inputValue = '';

package/dist/attachments/clickout.svelte.d.ts

@@ -1 +1 @@
-export declare function clickout<T extends Element>(onclick?: (ev: PointerEvent, node?: T) => void): (node: T) => () => void;
+export declare function clickout<T extends Element>(onclick?: (ev: PointerEvent, node?: T) => void, options?: AddEventListenerOptions | undefined): (node: T) => () => void;

package/dist/attachments/clickout.svelte.js

@@ -1,5 +1,5 @@
 import { on } from 'svelte/events';
-export function clickout(onclick) {
+export function clickout(onclick, options) {
     return (node) => {
         const handler = (ev) => {
             const target = ev.target;
@@ -7,7 +7,7 @@ export function clickout(onclick) {
                 onclick?.(ev, node);
             }
         };
-        const cleanup = on(window, 'click', handler);
+        const cleanup = on(window, 'click', handler, options);
         return () => {
             cleanup();
         };

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

@@ -1,61 +1,65 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { AccordionBond, AccordionState, type AccordionStateProps } from './bond.svelte';
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-	import type { AccordionRootProps } from './types';
-
-	let {
-		value = $bindable(undefined),
-		values = $bindable([]),
-		data = $bindable([]),
-		class: klass = '',
-		multiple = false,
-		collapsible = false,
-		disabled = false,
-		children = undefined,
-		factory = _factory,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AccordionRootProps<E, B> = $props();
-
-	const bondProps = defineState<AccordionStateProps>([
-		defineProperty(
-			'values',
-			() => (multiple ? values : ([value].filter(Boolean) as string[])),
-			(v) => {
-				values = v;
-				value = values[0];
-			}
-		)
-	]);
-	const bond = factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps = bondProps) {
-		const bondState = new AccordionState(() => props);
-
-		return new AccordionBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	preset="accordion"
-	class={['bg-card border-border flex list-none flex-col', '$preset', klass]}
-	{bond}
-	{...rootProps}
->
-	{@render children?.({ accordion: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+	import { AccordionBond, AccordionState, type AccordionStateProps } from './bond.svelte';
+	import type { AccordionRootProps } from './types';
+
+	let {
+		value = $bindable(undefined),
+		values = $bindable([]),
+		data = $bindable([]),
+		class: klass = '',
+		multiple = false,
+		collapsible = false,
+		disabled = false,
+		children = undefined,
+		factory = _factory,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		preset = 'accordion',
+		...restProps
+	}: AccordionRootProps<E, B> = $props();
+
+	const bondProps = defineState<AccordionStateProps>([
+		defineProperty(
+			'values',
+			() => (multiple ? values : ([value].filter(Boolean) as string[])),
+			(v) => {
+				values = v;
+				value = values[0];
+			}
+		),
+		defineProperty('multiple', () => multiple),
+		defineProperty('collapsible', () => collapsible),
+		defineProperty('disabled', () => disabled)
+	]);
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps = bondProps) {
+		const bondState = new AccordionState(() => props);
+
+		return new AccordionBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{preset}
+	{bond}
+	class={['bg-card border-border flex list-none flex-col', '$preset', klass]}
+	{...rootProps}
+>
+	{@render children?.({ accordion: bond })}
+</HtmlAtom>

package/dist/components/accordion/accordion-root.svelte.d.ts

@@ -1,5 +1,5 @@
-import { AccordionBond } from './bond.svelte';
 import { type Base } from '../atom';
+import { AccordionBond } from './bond.svelte';
 import type { AccordionRootProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: AccordionRootProps<E, B>;

package/dist/components/accordion/accordion.stories.svelte

@@ -1,134 +1,70 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Accordion as AAccordion, AccordionItem } from '.';
-	import Root from '../root/root.svelte';
-	import gsap from 'gsap';
-	import { linear } from 'svelte/easing';
-	import { toTransitionConfig } from '../../utils/gsap';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Accordion',
-		// 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="Accordion" args={{ collapsible: false, multiple: false, disabled: false }}>
-	{#snippet children(args)}
-		<Root class="flex items-center justify-center p-4">
-			<AAccordion class="backdrop-blur-sm" {...args}>
-				<AccordionItem.Root>
-					<AccordionItem.Header>
-						<div>Hello Atomic UI 1</div>
-						<AccordionItem.Indicator />
-					</AccordionItem.Header>
-
-					<AccordionItem.Body
-						initial={(node) => {
-							gsap.set(node, { opacity: 0, height: 0 });
-						}}
-						enter={function (node) {
-							console.log(this);
-							const tween = gsap.to(node, {
-								opacity: 1,
-								height: 'auto',
-								duration: 0.2,
-								ease: linear
-							});
-
-							return toTransitionConfig(tween);
-						}}
-						exit={(node) => {
-							const tween = gsap.to(node, { opacity: 0, height: 0, duration: 0.2, ease: linear });
-
-							return toTransitionConfig(tween);
-						}}
-					>
-						<div class="p-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>
-					</AccordionItem.Body>
-				</AccordionItem.Root>
-
-				<AccordionItem.Root>
-					<AccordionItem.Header>
-						<div>Hello Atomic UI 2</div>
-						<AccordionItem.Indicator />
-					</AccordionItem.Header>
-
-					<AccordionItem.Body
-						initial={(node) => {
-							gsap.set(node, { opacity: 0, height: 0 });
-						}}
-						enter={(node) => {
-							const tween = gsap.to(node, {
-								opacity: 1,
-								height: 'auto',
-								duration: 0.2,
-								ease: linear
-							});
-
-							return toTransitionConfig(tween);
-						}}
-						exit={(node) => {
-							const tween = gsap.to(node, { opacity: 0, height: 0, duration: 0.2, ease: linear });
-
-							return toTransitionConfig(tween);
-						}}
-					>
-						<div class="p-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>
-					</AccordionItem.Body>
-				</AccordionItem.Root>
-
-				<AccordionItem.Root>
-					<AccordionItem.Header>
-						<div>Hello Atomic UI 3</div>
-						<AccordionItem.Indicator />
-					</AccordionItem.Header>
-
-					<AccordionItem.Body
-						initial={(node) => {
-							gsap.set(node, { opacity: 0, height: 0 });
-						}}
-						enter={(node) => {
-							const tween = gsap.to(node, {
-								opacity: 1,
-								height: 'auto',
-								duration: 0.2,
-								ease: linear
-							});
-
-							return toTransitionConfig(tween);
-						}}
-						exit={(node) => {
-							const tween = gsap.to(node, { opacity: 0, height: 0, duration: 0.2, ease: linear });
-
-							return toTransitionConfig(tween);
-						}}
-					>
-						<div class="p-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>
-					</AccordionItem.Body>
-				</AccordionItem.Root>
-			</AAccordion>
-		</Root>
-	{/snippet}
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Accordion as AAccordion, AccordionItem } from '.';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Accordion',
+		// 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="Accordion" args={{ collapsible: false, multiple: false, disabled: false }}>
+	{#snippet template(args)}
+		<AAccordion class="backdrop-blur-sm" {...args}>
+			<AccordionItem.Root>
+				<AccordionItem.Header>
+					<div>Hello Atomic UI 1</div>
+					<AccordionItem.Indicator class="ml-auto" />
+				</AccordionItem.Header>
+
+				<AccordionItem.Body>
+					<div class="p-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>
+				</AccordionItem.Body>
+			</AccordionItem.Root>
+
+			<AccordionItem.Root>
+				<AccordionItem.Header>
+					<div>Hello Atomic UI 2</div>
+					<AccordionItem.Indicator class="ml-auto" />
+				</AccordionItem.Header>
+
+				<AccordionItem.Body>
+					<div class="p-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>
+				</AccordionItem.Body>
+			</AccordionItem.Root>
+
+			<AccordionItem.Root>
+				<AccordionItem.Header>
+					<div>Hello Atomic UI 3</div>
+					<AccordionItem.Indicator class="ml-auto" />
+				</AccordionItem.Header>
+
+				<AccordionItem.Body>
+					<div class="p-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>
+				</AccordionItem.Body>
+			</AccordionItem.Root>
+		</AAccordion>
+	{/snippet}
+</Story>

package/dist/components/accordion/item/accordion-item-body.svelte

@@ -1,42 +1,44 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../../atom';
-	import { AccordionItemBond } from './bond.svelte';
-	import type { AccordionItemBodyProps } from './types';
-
-	const bond = AccordionItemBond.get();
-	const isOpen = $derived(bond?.state.isOpen ?? false);
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AccordionItemBodyProps<E, B> = $props();
-
-	const bodyProps = $derived({
-		...bond?.body(),
-		...restProps
-	});
-</script>
-
-{#if isOpen}
-	<HtmlAtom
-		preset="accordion.item.body"
-		class={['border-border box-content', '$preset', klass]}
-		{bond}
-		onmount={onmount?.bind(bond.state)}
-		ondestroy={ondestroy?.bind(bond.state)}
-		animate={animate?.bind(bond.state)}
-		enter={enter?.bind(bond.state)}
-		exit={exit?.bind(bond.state)}
-		initial={initial?.bind(bond.state)}
-		{...bodyProps}
-	>
-		{@render children?.({ accordionItem: bond })}
-	</HtmlAtom>
-{/if}
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../../atom';
+	import { AccordionItemBond } from './bond.svelte';
+	import { enterAccordionItemBody, exitAccordionItemBody } from './motion.svelte';
+	import type { AccordionItemBodyProps } from './types';
+
+	const bond = AccordionItemBond.get();
+	const isOpen = $derived(bond?.state.isOpen ?? false);
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = enterAccordionItemBody(),
+		exit = exitAccordionItemBody(),
+		initial = undefined,
+		preset = 'accordion.item.body',
+		...restProps
+	}: AccordionItemBodyProps<E, B> = $props();
+
+	const bodyProps = $derived({
+		...bond?.body(),
+		...restProps
+	});
+</script>
+
+{#if isOpen}
+	<HtmlAtom
+		{preset}
+		{bond}
+		class={['border-border box-content h-0 opacity-0', '$preset', klass]}
+		onmount={onmount?.bind(bond.state)}
+		ondestroy={ondestroy?.bind(bond.state)}
+		animate={animate?.bind(bond.state)}
+		enter={enter?.bind(bond.state)}
+		exit={exit?.bind(bond.state)}
+		initial={initial?.bind(bond.state)}
+		{...bodyProps}
+	>
+		{@render children?.({ accordionItem: bond })}
+	</HtmlAtom>
+{/if}

package/dist/components/accordion/item/accordion-item-header.svelte

@@ -1,50 +1,51 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../../atom';
-	import { AccordionItemBond } from './bond.svelte';
-	import type { AccordionItemHeaderProps } from './types';
-
-	let {
-		class: klass = '',
-		as = 'button',
-		children = undefined,
-		onpointerdown = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AccordionItemHeaderProps = $props();
-
-	const bond = AccordionItemBond.get();
-
-	const headerProps = $derived({
-		...bond?.header(),
-		...restProps
-	});
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<HtmlAtom
-	{as}
-	{bond}
-	preset="accordion.item.header"
-	class={[
-		'border-border relative box-border flex w-full cursor-pointer items-center',
-		'$preset',
-		klass
-	]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	tabindex={as !== 'button' ? 0 : undefined}
-	{...headerProps}
->
-	{@render children?.({
-		accordionItem: bond
-	})}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../../atom';
+	import { AccordionItemBond } from './bond.svelte';
+	import type { AccordionItemHeaderProps } from './types';
+
+	let {
+		class: klass = '',
+		as = 'button',
+		children = undefined,
+		onpointerdown = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		preset = 'accordion.item.header',
+		...restProps
+	}: AccordionItemHeaderProps = $props();
+
+	const bond = AccordionItemBond.get();
+
+	const headerProps = $derived({
+		...bond?.header(),
+		...restProps
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<HtmlAtom
+	{as}
+	{bond}
+	{preset}
+	class={[
+		'border-border relative box-border flex w-full cursor-pointer items-center',
+		'$preset',
+		klass
+	]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	tabindex={as !== 'button' ? 0 : undefined}
+	{...headerProps}
+>
+	{@render children?.({
+		accordionItem: bond
+	})}
+</HtmlAtom>