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

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

@@ -1,50 +1,51 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { animate as motion } from 'motion';
-	import { Icon } from '../../icon';
-	import IconArrowDown from '../../../icons/icon-arrow-down.svelte';
-	import { HtmlAtom, type Base } from '../../atom';
-	import { AccordionItemBond } from './bond.svelte';
-	import type { AccordionItemIndicatorProps } from './types';
-
-	const bond = AccordionItemBond.get();
-	const isOpen = $derived(bond?.state?.isOpen ?? false);
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AccordionItemIndicatorProps<E, B> = $props();
-
-	const indicatorProps = $derived({
-		...bond?.indicator(),
-		...restProps
-	});
-
-	function _animate(node: HTMLElement) {
-		return motion(node, { rotate: 180 * +isOpen }, { duration: 0.3, ease: 'anticipate' });
-	}
-</script>
-
-<HtmlAtom
-	preset="accordion.item.indicator"
-	class={['border-border pointer-events-none flex items-center justify-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)}
-	{...indicatorProps}
->
-	{#if children}
-		{@render children({ accordionItem: bond })}
-	{:else}
-		<Icon src={IconArrowDown} />
-	{/if}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { animate as motion } from 'motion';
+	import { Icon } from '../../icon';
+	import IconArrowDown from '../../../icons/icon-arrow-down.svelte';
+	import { HtmlAtom, type Base } from '../../atom';
+	import { AccordionItemBond } from './bond.svelte';
+	import type { AccordionItemIndicatorProps } from './types';
+
+	const bond = AccordionItemBond.get();
+	const isOpen = $derived(bond?.state?.isOpen ?? false);
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		preset = 'accordion.item.indicator',
+		...restProps
+	}: AccordionItemIndicatorProps<E, B> = $props();
+
+	const indicatorProps = $derived({
+		...bond?.indicator(),
+		...restProps
+	});
+
+	function _animate(node: HTMLElement) {
+		return motion(node, { rotate: 180 * +isOpen }, { duration: 0.3, ease: 'anticipate' });
+	}
+</script>
+
+<HtmlAtom
+	{preset}
+	class={['border-border pointer-events-none flex items-center justify-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)}
+	{...indicatorProps}
+>
+	{#if children}
+		{@render children({ accordionItem: bond })}
+	{:else}
+		<Icon src={IconArrowDown} />
+	{/if}
+</HtmlAtom>

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

@@ -1,65 +1,66 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { nanoid } from 'nanoid';
-	import { defineProperty, defineState } from '../../../utils';
-	import { HtmlAtom, type Base } from '../../atom';
-	import {
-		AccordionItemBond,
-		AccordionItemBondState,
-		type AccordionItemBondProps
-	} from './bond.svelte';
-	import type { AccordionItemRootProps } from './types';
-
-	let {
-		class: klass = '',
-		value = nanoid(),
-		data = undefined,
-		disabled = false,
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AccordionItemRootProps<E, B> = $props();
-
-	const accordionItemProps = defineState<AccordionItemBondProps>([
-		defineProperty('data', () => data),
-		defineProperty('disabled', () => disabled),
-		defineProperty('value', () => value)
-	]);
-	const bond = factory(accordionItemProps).share();
-
-	bond.state.mount();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof accordionItemProps) {
-		const accordionItemState = new AccordionItemBondState(() => props);
-		return new AccordionItemBond(accordionItemState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="accordion.item"
-	class={['border-border', '$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)}
-	{...rootProps}
->
-	{@render children?.({ accordionItem: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { nanoid } from 'nanoid';
+	import { defineProperty, defineState } from '../../../utils';
+	import { HtmlAtom, type Base } from '../../atom';
+	import {
+		AccordionItemBond,
+		AccordionItemBondState,
+		type AccordionItemBondProps
+	} from './bond.svelte';
+	import type { AccordionItemRootProps } from './types';
+
+	let {
+		class: klass = '',
+		value = nanoid(),
+		data = undefined,
+		disabled = false,
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		preset = 'accordion.item',
+		...restProps
+	}: AccordionItemRootProps<E, B> = $props();
+
+	const accordionItemProps = defineState<AccordionItemBondProps>([
+		defineProperty('data', () => data),
+		defineProperty('disabled', () => disabled),
+		defineProperty('value', () => value)
+	]);
+	const bond = factory(accordionItemProps).share();
+
+	bond.state.mount();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof accordionItemProps) {
+		const accordionItemState = new AccordionItemBondState(() => props);
+		return new AccordionItemBond(accordionItemState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	{preset}
+	class={['border-border', '$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)}
+	{...rootProps}
+>
+	{@render children?.({ accordionItem: bond })}
+</HtmlAtom>

package/dist/components/accordion/item/bond.svelte.d.ts

@@ -3,6 +3,8 @@ import { Bond, BondState, type BondStateProps } from '../../../shared/bond.svelt
 export type AccordionItemBondProps = BondStateProps & {
     value: string;
     disabled: boolean;
+    multiple: boolean;
+    collapsible: boolean;
 };
 export type AccordionItemBondElements = {
     root: HTMLElement;

package/dist/components/accordion/item/index.d.ts

@@ -1,2 +1,5 @@
 export * as AccordionItem from './atoms';
+export * from './bond.svelte';
+export * from './attachments.svelte';
+export * from './motion.svelte';
 export type * from './types';

package/dist/components/accordion/item/index.js

@@ -1 +1,4 @@
 export * as AccordionItem from './atoms';
+export * from './bond.svelte';
+export * from './attachments.svelte';
+export * from './motion.svelte';

package/dist/components/accordion/item/motion.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Easing } from 'motion';
+export type EnterAccordionItemBodyParams = {
+    duration?: number;
+    delay?: number;
+    ease?: Easing | Easing[] | (string & {});
+};
+export declare function enterAccordionItemBody(params?: EnterAccordionItemBodyParams): (node: HTMLElement) => {
+    duration: number;
+    delay: number;
+};
+export type ExitAccordionItemBodyParams = EnterAccordionItemBodyParams;
+export declare function exitAccordionItemBody(params?: ExitAccordionItemBodyParams): (node: HTMLElement) => {
+    duration: number;
+    delay: number;
+};

package/dist/components/accordion/item/motion.svelte.js

@@ -0,0 +1,30 @@
+import { DURATION } from '../../../shared';
+import { animate } from 'motion';
+export function enterAccordionItemBody(params = {}) {
+    return (node) => {
+        const { duration = DURATION.normal / 1000, delay = 0, ease = 'linear' } = params;
+        animate(node, {
+            opacity: [0, 1],
+            height: 'auto'
+        }, {
+            duration,
+            delay,
+            ease
+        });
+        return { duration: duration * 1000, delay: delay * 1000 };
+    };
+}
+export function exitAccordionItemBody(params = {}) {
+    return (node) => {
+        const { duration = DURATION.normal / 1000, delay = 0.1, ease = 'linear' } = params;
+        animate(node, {
+            opacity: [1, 0],
+            height: 0
+        }, {
+            duration,
+            delay,
+            ease
+        });
+        return { duration: duration * 1000, delay: delay * 1000 };
+    };
+}

package/dist/components/accordion/item/types.d.ts

@@ -1,6 +1,5 @@
-import type { Snippet } from 'svelte';
 import type { HtmlAtomProps, Base } from '../../atom';
-import type { Factory, Override } from '../../../types';
+import type { Factory } from '../../../types';
 import type { AccordionItemBond } from './bond.svelte';
 /**
  * Extend this interface to add custom accordion item root properties in your application.
@@ -22,31 +21,15 @@ export interface AccordionItemBodyExtendProps {
  */
 export interface AccordionItemIndicatorExtendProps {
 }
-export interface AccordionItemRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        accordionItem: AccordionItemBond;
-    }]>;
-}>, AccordionItemRootExtendProps {
+export interface AccordionItemRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AccordionItemRootExtendProps {
     value?: string;
     data?: any;
     disabled?: boolean;
     factory?: Factory<AccordionItemBond>;
 }
-export interface AccordionItemHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        accordionItem: AccordionItemBond;
-    }]>;
-}>, AccordionItemHeaderExtendProps {
-}
-export interface AccordionItemBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        accordionItem: AccordionItemBond;
-    }]>;
-}>, AccordionItemBodyExtendProps {
-}
-export interface AccordionItemIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        accordionItem: AccordionItemBond;
-    }]>;
-}>, AccordionItemIndicatorExtendProps {
+export interface AccordionItemHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AccordionItemHeaderExtendProps {
+}
+export interface AccordionItemBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AccordionItemBodyExtendProps {
+}
+export interface AccordionItemIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AccordionItemIndicatorExtendProps {
 }

package/dist/components/alert/alert-close-button.svelte

@@ -1,70 +1,66 @@
-<script
-	lang="ts"
-	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
->
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type Base } from '../atom';
-	import { AlertBond } from './bond.svelte';
-	import type { AlertCloseButtonProps } from './types';
-	import { Icon } from '../icon';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = AlertBond.get();
-
-	let {
-		class: klass = '',
-		as = 'button' as E,
-		preset = 'alert.close-button',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertCloseButtonProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const isDismissible = $derived(bond?.state.isDismissible ?? false);
-
-	const closeButtonProps = $derived({
-		...bond?.closeButton(),
-		...restProps
-	});
-</script>
-
-{#if isDismissible}
-	<HtmlAtom
-		{as}
-		{bond}
-		{preset}
-		class={[
-			'alert-close-button border-border flex size-6 items-center justify-center rounded p-0.5 transition-colors hover:bg-black/10 dark:hover:bg-white/10',
-			'$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)}
-		{...closeButtonProps}
-	>
-		{#if children}
-			{@render children({ alert: bond! })}
-		{:else}
-			<Icon class="h-full">
-				<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M6 18L18 6M6 6l12 12"
-					/>
-				</svg>
-			</Icon>
-		{/if}
-	</HtmlAtom>
-{/if}
+<script
+	lang="ts"
+	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
+>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type Base } from '../atom';
+	import { AlertBond } from './bond.svelte';
+	import type { AlertCloseButtonProps } from './types';
+	import { Icon } from '../icon';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = AlertBond.get();
+
+	let {
+		class: klass = '',
+		as = 'button' as E,
+		preset = 'alert.close-button',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertCloseButtonProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const closeButtonProps = $derived({
+		...bond?.closeButton(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	{preset}
+	class={[
+		'alert-close-button border-border flex size-6 items-center justify-center rounded p-0.5 transition-colors hover:bg-black/10 dark:hover:bg-white/10',
+		'$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)}
+	{...closeButtonProps}
+>
+	{#if children}
+		{@render children({ alert: bond! })}
+	{:else}
+		<Icon class="h-full">
+			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M6 18L18 6M6 6l12 12"
+				/>
+			</svg>
+		</Icon>
+	{/if}
+</HtmlAtom>

package/dist/components/alert/alert-description.svelte

@@ -1,42 +1,42 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { AlertBond } from './bond.svelte';
-	export type { AlertDescriptionProps } from './types';
-
-	const bond = AlertBond.get();
-
-	let {
-		class: klass = '',
-		as = 'p' as E,
-		preset = 'alert.description',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertDescriptionProps<E, B> = $props();
-
-	const descriptionProps = $derived({
-		...bond?.description(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	{preset}
-	class={['alert-description border-border mt-1 text-sm leading-relaxed', '$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)}
-	{as}
-	{...descriptionProps}
->
-	{@render children?.({ alert: bond! })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { AlertBond } from './bond.svelte';
+	import type { AlertDescriptionProps } from './types';
+
+	const bond = AlertBond.get();
+
+	let {
+		class: klass = '',
+		as = 'p' as E,
+		preset = 'alert.description',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertDescriptionProps<E, B> = $props();
+
+	const descriptionProps = $derived({
+		...bond?.description(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	{preset}
+	class={['alert-description border-border mt-1 text-sm leading-relaxed', '$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)}
+	{as}
+	{...descriptionProps}
+>
+	{@render children?.({ alert: bond! })}
+</HtmlAtom>

package/dist/components/alert/alert-description.svelte.d.ts

@@ -1,9 +1,8 @@
 import { type Base } from '../atom';
+import type { AlertDescriptionProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: AlertDescriptionProps<E, B>;
-    exports: {
-        AlertDescriptionProps: typeof AlertDescriptionProps;
-    };
+    exports: {};
     bindings: "";
     slots: {};
     events: {};
@@ -13,9 +12,7 @@ declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B
     events(): ReturnType<typeof $$render<E, B>>['events'];
     slots(): ReturnType<typeof $$render<E, B>>['slots'];
     bindings(): "";
-    exports(): {
-        AlertDescriptionProps: typeof AlertDescriptionProps;
-    };
+    exports(): {};
 }
 interface $$IsomorphicComponent {
     new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {