@svelte-atoms/core 1.0.0-alpha.25 → 1.0.0-alpha.27

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

@@ -1,79 +1,61 @@
-<script module>
-	import type { Factory } from '../../types';
-
-	export type AccordionRootProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		value?: string;
-		values?: string[];
-		data?: unknown;
-		multiple?: boolean;
-		collapsible?: boolean;
-		disabled?: boolean;
-		factory?: Factory<AccordionBond>;
-		children?: Snippet<[{ accordion: AccordionBond }]>;
-	};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { AccordionBond, AccordionState, type AccordionStateProps } from './bond.svelte';
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	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 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 { 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>

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

@@ -1,19 +1,6 @@
-import type { Factory } from '../../types';
-export type AccordionRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    value?: string;
-    values?: string[];
-    data?: unknown;
-    multiple?: boolean;
-    collapsible?: boolean;
-    disabled?: boolean;
-    factory?: Factory<AccordionBond>;
-    children?: Snippet<[{
-        accordion: AccordionBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
 import { AccordionBond } from './bond.svelte';
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { AccordionRootProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: AccordionRootProps<E, B>;
     exports: {

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

@@ -1,2 +1,3 @@
 export { Root as Accordion } from './atoms';
-export { AccordionItem } from './item';
+export * from './item';
+export * from './types';

package/dist/components/accordion/index.js

@@ -1,2 +1,3 @@
 export { Root as Accordion } from './atoms';
-export { AccordionItem } from './item';
+export * from './item';
+export * from './types';

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

@@ -1,52 +1,42 @@
-<script lang="ts" module>
-	export type AccordionItemBodyProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ accordionItem: AccordionItemBond }]>;
-	};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { AccordionItemBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../../atom';
-
-	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={['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 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}

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

@@ -1,11 +1,5 @@
-export type AccordionItemBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    children?: Snippet<[{
-        accordionItem: AccordionItemBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
-import { AccordionItemBond } from './bond.svelte';
-import { type HtmlAtomProps, type Base } from '../../atom';
+import { type Base } from '../../atom';
+import type { AccordionItemBodyProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: AccordionItemBodyProps<E, B>;
     exports: {};

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

@@ -1,56 +1,50 @@
-<script lang="ts" module>
-	export type AccordionItemHeaderProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ accordionItem: AccordionItemBond }]>;
-	};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { AccordionItemBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../../atom';
-
-	let {
-		class: klass = '',
-		as = 'button',
-		children = undefined,
-		onpointerdown = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $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={['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,
+		...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>

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

@@ -1,24 +1,7 @@
-export type AccordionItemHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    children?: Snippet<[{
-        accordionItem: AccordionItemBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
-import { AccordionItemBond } from './bond.svelte';
-import { type HtmlAtomProps, type Base } from '../../atom';
+import { type Base } from '../../atom';
+import type { AccordionItemHeaderProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: {
-        class?: string;
-        as?: string;
-        children?: any;
-        onpointerdown?: any;
-        onmount?: any;
-        ondestroy?: any;
-        animate?: any;
-        enter?: any;
-        exit?: any;
-        initial?: any;
-    } & Record<string, any>;
+    props: AccordionItemHeaderProps;
     exports: {};
     bindings: "";
     slots: {};

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

@@ -1,59 +1,50 @@
-<script lang="ts" module>
-	export type AccordionItemIndicatorProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ accordionItem: AccordionItemBond }]>;
-	};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { animate as motion } from 'motion';
-	import { AccordionItemBond } from './bond.svelte';
-	import { Icon } from '../../icon';
-	import IconArrowDown from '../../../icons/icon-arrow-down.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../../atom';
-
-	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={['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,
+		...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>

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

@@ -1,11 +1,5 @@
-export type AccordionItemIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    children?: Snippet<[{
-        accordionItem: AccordionItemBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
-import { AccordionItemBond } from './bond.svelte';
-import { type HtmlAtomProps, type Base } from '../../atom';
+import { type Base } from '../../atom';
+import type { AccordionItemIndicatorProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: AccordionItemIndicatorProps<E, B>;
     exports: {};