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

package/dist/components/dialog/dialog-content.svelte

@@ -1,68 +1,62 @@
-<script module lang="ts">
-	export type DialogContentProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { animate as motion } from 'motion';
-	import { DURATION } from '../../shared';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-	import { DialogBond } from './bond.svelte';
-
-	const bond = DialogBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DialogContentProps<E, B> = $props();
-
-	const dialogProps = $derived({
-		...bond?.content({}),
-		...restProps
-	});
-
-	const open = $derived(bond?.state?.props?.open ?? false);
-
-	function _animate(node: HTMLElement) {
-		if (open) {
-			bond?.elements.root?.show?.();
-		}
-
-		motion(
-			node,
-			{ scale: 0.9 + 0.1 * +open, opacity: +open },
-			{
-				duration: DURATION.normal / 1000,
-				ease: 'anticipate'
-			}
-		);
-	}
-</script>
-
-<HtmlAtom
-	preset="dialog.content"
-	class={[
-		'bg-card text-foreground border-border flex h-fit w-full max-w-[90svw] flex-col rounded-md border py-4 shadow-sm md:min-w-sm lg:max-w-xl lg:min-w-md',
-		'$preset',
-		klass
-	]}
-	{bond}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...dialogProps}
->
-	{@render children?.({ dialog: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { animate as motion } from 'motion';
+	import { DURATION } from '../../shared';
+	import { HtmlAtom, type Base } from '../atom';
+	import { DialogBond } from './bond.svelte';
+	import type { DialogContentProps } from './types';
+
+	const bond = DialogBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DialogContentProps<E, B> = $props();
+
+	const dialogProps = $derived({
+		...bond?.content({}),
+		...restProps
+	});
+
+	const open = $derived(bond?.state?.props?.open ?? false);
+
+	function _animate(node: HTMLElement) {
+		if (open) {
+			bond?.elements.root?.show?.();
+		}
+
+		motion(
+			node,
+			{ scale: 0.9 + 0.1 * +open, opacity: +open },
+			{
+				duration: DURATION.normal / 1000,
+				ease: 'anticipate'
+			}
+		);
+	}
+</script>
+
+<HtmlAtom
+	preset="dialog.content"
+	class={[
+		'bg-card text-foreground border-border flex h-fit w-full max-w-[90svw] flex-col rounded-md border py-4 shadow-sm md:min-w-sm lg:max-w-xl lg:min-w-md',
+		'$preset',
+		klass
+	]}
+	{bond}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...dialogProps}
+>
+	{@render children?.({ dialog: bond })}
+</HtmlAtom>

package/dist/components/dialog/dialog-content.svelte.d.ts

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

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

@@ -1,46 +1,40 @@
-<script module lang="ts">
-	export type DialogDescriptionProps<
-		T extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = HtmlAtomProps<T, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
-	import { DialogBond } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	let {
-		class: klass = '',
-		as = 'p' as E,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DialogDescriptionProps<E, B> = $props();
-
-	const bond = DialogBond.get();
-
-	const descriptionProps = $derived({
-		...bond?.description({}),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	preset="dialog.description"
-	class={['border-border', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...descriptionProps}
->
-	{@render children?.({ dialog: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import type { DialogDescriptionProps } from './types';
+	import { DialogBond } from './bond.svelte';
+
+	let {
+		class: klass = '',
+		as = 'p' as E,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DialogDescriptionProps<E, B> = $props();
+
+	const bond = DialogBond.get();
+
+	const descriptionProps = $derived({
+		...bond?.description({}),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	preset="dialog.description"
+	class={['border-border', '$preset', klass]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...descriptionProps}
+>
+	{@render children?.({ dialog: bond })}
+</HtmlAtom>

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

@@ -1,5 +1,5 @@
-export type DialogDescriptionProps<T extends keyof HTMLElementTagNameMap, B extends Base = Base> = HtmlAtomProps<T, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { DialogDescriptionProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base>(): {
     props: DialogDescriptionProps<E, B>;
     exports: {};

package/dist/components/dialog/dialog-footer.svelte

@@ -1,45 +1,39 @@
-<script module lang="ts">
-	export type DialogFooterProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { DialogBond } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DialogFooterProps<E, B> = $props();
-
-	const bond = DialogBond.get();
-
-	const footerProps = $derived({
-		...bond?.footer({}),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="dialog.footer"
-	class={['border-border', 'flex px-4', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...footerProps}
->
-	{@render children?.({ dialog: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { DialogBond } from './bond.svelte';
+	import type { DialogFooterProps } from './types';
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DialogFooterProps<E, B> = $props();
+
+	const bond = DialogBond.get();
+
+	const footerProps = $derived({
+		...bond?.footer({}),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="dialog.footer"
+	class={['border-border', 'flex px-4', '$preset', klass]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...footerProps}
+>
+	{@render children?.({ dialog: bond })}
+</HtmlAtom>

package/dist/components/dialog/dialog-footer.svelte.d.ts

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

package/dist/components/dialog/dialog-header.svelte

@@ -1,45 +1,39 @@
-<script module lang="ts">
-	export type DialogHeaderProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { DialogBond } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DialogHeaderProps<E, B> = $props();
-
-	const bond = DialogBond.get();
-
-	const headerProps = $derived({
-		...bond?.header({}),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="dialog.header"
-	class={['border-border', 'flex w-full px-4 text-xl', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...headerProps}
->
-	{@render children?.({ dialog: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import type { DialogHeaderProps } from './types';
+	import { DialogBond } from './bond.svelte';
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DialogHeaderProps<E, B> = $props();
+
+	const bond = DialogBond.get();
+
+	const headerProps = $derived({
+		...bond?.header({}),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="dialog.header"
+	class={['border-border', 'flex w-full px-4 text-xl', '$preset', klass]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...headerProps}
+>
+	{@render children?.({ dialog: bond })}
+</HtmlAtom>

package/dist/components/dialog/dialog-header.svelte.d.ts

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

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

@@ -1,24 +1,11 @@
-<script module lang="ts">
-	export type DialogProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		open?: boolean;
-		disabled?: boolean;
-		portal?: string | PortalBond;
-		factory?: (props: DialogBondProps) => DialogBond;
-		children?: Snippet<[{ dialog: DialogBond }]>;
-	};
-</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 { Teleport, ActivePortal, PortalBond } from '../portal';
+	import { Teleport, ActivePortal } from '../portal';
 	import { defineProperty, defineState } from '../../utils';
-	import type { HtmlAtomProps, Base } from '../atom';
+	import type { Base } from '../atom';
 	import { DURATION } from '../../shared';
 	import { DialogBond, DialogBondState, type DialogBondProps } from './bond.svelte';
+	import type { DialogProps } from './types';
 
 	let {
 		class: klass = '',

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

@@ -1,16 +1,6 @@
-export type DialogProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    open?: boolean;
-    disabled?: boolean;
-    portal?: string | PortalBond;
-    factory?: (props: DialogBondProps) => DialogBond;
-    children?: Snippet<[{
-        dialog: DialogBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
-import { PortalBond } from '../portal';
-import type { HtmlAtomProps, Base } from '../atom';
+import type { Base } from '../atom';
 import { DialogBond, DialogBondState, type DialogBondProps } from './bond.svelte';
+import type { DialogProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: DialogProps<E, B>;
     exports: {

package/dist/components/dialog/dialog-title.svelte

@@ -1,47 +1,41 @@
-<script module lang="ts">
-	export type DialogTitleProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { DialogBond } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	let {
-		class: klass = '',
-		as = 'h3' as E,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DialogTitleProps<E, B> = $props();
-
-	const bond = DialogBond.get();
-
-	const titleProps = $derived({
-		...bond?.title({}),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="dialog.title"
-	class={['border-border', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...titleProps}
->
-	{@render children?.({ dialog: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'h2', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { DialogBond } from './bond.svelte';
+	import type { DialogTitleProps } from './types';
+
+	let {
+		class: klass = '',
+		as = 'h3' as E,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DialogTitleProps<E, B> = $props();
+
+	const bond = DialogBond.get();
+
+	const titleProps = $derived({
+		...bond?.title({}),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="dialog.title"
+	class={['border-border', '$preset', klass]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...titleProps}
+>
+	{@render children?.({ dialog: bond })}
+</HtmlAtom>

package/dist/components/dialog/dialog-title.svelte.d.ts

@@ -1,13 +1,13 @@
-export type DialogTitleProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
-declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+import { type Base } from '../atom';
+import type { DialogTitleProps } from './types';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'h2', B extends Base = Base>(): {
     props: DialogTitleProps<E, B>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'h2', B extends Base = Base> {
     props(): ReturnType<typeof $$render<E, B>>['props'];
     events(): ReturnType<typeof $$render<E, B>>['events'];
     slots(): ReturnType<typeof $$render<E, B>>['slots'];
@@ -15,12 +15,12 @@ declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B
     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']>> & {
+    new <E extends keyof HTMLElementTagNameMap = 'h2', 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']>> & {
         $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
     } & ReturnType<__sveltets_Render<E, B>['exports']>;
-    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'h2', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const DialogTitle: $$IsomorphicComponent;
-type DialogTitle<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DialogTitle<E, B>>;
+type DialogTitle<E extends keyof HTMLElementTagNameMap = 'h2', B extends Base = Base> = InstanceType<typeof DialogTitle<E, B>>;
 export default DialogTitle;

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

@@ -1 +1,2 @@
 export * as Dialog from './atoms';
+export * from './types';

package/dist/components/dialog/index.js

@@ -1 +1,2 @@
 export * as Dialog from './atoms';
+export * from './types';