chore: convert types to interface-based & move types from module script

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@svelte-atoms/core",
-	"version": "1.0.0-alpha.25",
+	"version": "1.0.0-alpha.26",
 	"description": "A modular, accessible, and extensible Svelte UI component library.",
 	"repository": {
 		"type": "git",

src/lib/components/accordion/accordion-root.svelte

@@ -1,26 +1,8 @@
-<script module>
-	import type { Factory } from '$svelte-atoms/core/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 '$svelte-atoms/core/utils';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
+	import type { AccordionRootProps } from './types';
 
 	let {
 		value = $bindable(undefined),

src/lib/components/accordion/index.ts

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

src/lib/components/accordion/item/accordion-item-body.svelte

@@ -1,17 +1,7 @@
-<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 { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { AccordionItemBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import type { AccordionItemBodyProps } from './types';
 
 	const bond = AccordionItemBond.get();
 	const isOpen = $derived(bond?.state.isOpen ?? false);

src/lib/components/accordion/item/accordion-item-header.svelte

@@ -1,17 +1,7 @@
-<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 { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { AccordionItemBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import type { AccordionItemHeaderProps } from './types';
 
 	let {
 		class: klass = '',
@@ -25,7 +15,7 @@
 		exit = undefined,
 		initial = undefined,
 		...restProps
-	} = $props();
+	}: AccordionItemHeaderProps = $props();
 
 	const bond = AccordionItemBond.get();
 

src/lib/components/accordion/item/accordion-item-indicator.svelte

@@ -1,19 +1,10 @@
-<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 '$svelte-atoms/core/components/icon';
 	import IconArrowDown from '$svelte-atoms/core/icons/icon-arrow-down.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
+	import { AccordionItemBond } from './bond.svelte';
+	import type { AccordionItemIndicatorProps } from './types';
 
 	const bond = AccordionItemBond.get();
 	const isOpen = $derived(bond?.state?.isOpen ?? false);

src/lib/components/accordion/item/accordion-item-root.svelte

@@ -1,27 +1,13 @@
-<script module>
-	export type AccordionItemRootProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ accordionItem: AccordionItemBond }]>;
-		value?: string;
-		data?: any;
-		disabled?: boolean;
-		factory?: Factory<AccordionItemBond>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
 	import { nanoid } from 'nanoid';
+	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import {
 		AccordionItemBond,
 		AccordionItemBondState,
 		type AccordionItemBondProps
 	} from './bond.svelte';
-	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
-	import type { Factory } from '$svelte-atoms/core/types';
+	import type { AccordionItemRootProps } from './types';
 
 	let {
 		class: klass = '',

src/lib/components/accordion/item/index.ts

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

src/lib/components/accordion/item/types.ts

@@ -0,0 +1,78 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+import type { Factory, Override } from '$svelte-atoms/core/types';
+import type { AccordionItemBond } from './bond.svelte';
+
+/**
+ * Extend this interface to add custom accordion item root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface AccordionItemRootExtendProps {}
+
+/**
+ * Extend this interface to add custom accordion item header properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface AccordionItemHeaderExtendProps {}
+
+/**
+ * Extend this interface to add custom accordion item body properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface AccordionItemBodyExtendProps {}
+
+/**
+ * Extend this interface to add custom accordion item indicator properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+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 {
+	value?: string;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	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 {}

src/lib/components/accordion/types.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+import type { Factory } from '$svelte-atoms/core/types';
+import type { AccordionBond } from './bond.svelte';
+
+/**
+ * Extend this interface to add custom accordion properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface AccordionExtendProps {}
+
+export interface AccordionRootProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Omit<HtmlAtomProps<E, B>, 'children'>,
+		AccordionExtendProps {
+	value?: string;
+	values?: string[];
+	data?: unknown;
+	multiple?: boolean;
+	collapsible?: boolean;
+	disabled?: boolean;
+	factory?: Factory<AccordionBond>;
+	children?: Snippet<[{ accordion: AccordionBond }]>;
+}

src/lib/components/alert/alert-actions.svelte

@@ -1,18 +1,8 @@
-<script module lang="ts">
-	export type AlertActionsProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ alert: AlertBond }]>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { AlertBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import type { AlertActionsProps } from './types';
 
 	type Element = HTMLElementTagNameMap[E];
 

src/lib/components/alert/alert-close-button.svelte

@@ -1,18 +1,11 @@
-<script module lang="ts">
-	export type AlertCloseButtonProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ alert: AlertBond }]>;
-	};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
+<script
+	lang="ts"
+	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
+>
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { AlertBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
+	import type { AlertCloseButtonProps } from './types';
 
 	type Element = HTMLElementTagNameMap[E];
 

src/lib/components/alert/alert-content.svelte

@@ -1,18 +1,8 @@
-<script module lang="ts">
-	export type AlertContentProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ alert: AlertBond }]>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { AlertBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import type { AlertContentProps } from './types';
 
 	type Element = HTMLElementTagNameMap[E];
 

src/lib/components/alert/alert-description.svelte

@@ -1,17 +1,7 @@
-<script module lang="ts">
-	export type AlertDescriptionProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ alert: AlertBond }]>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { AlertBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	export type { AlertDescriptionProps } from './types';
 
 	const bond = AlertBond.get();
 

src/lib/components/alert/alert-icon.svelte

@@ -1,18 +1,8 @@
-<script module lang="ts">
-	export type AlertIconProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ alert: AlertBond }]>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { AlertBond } from './bond.svelte';
-
 	import { Icon } from '$svelte-atoms/core/components/icon';
-	import { type HtmlAtomProps, type Base, HtmlAtom } from '$svelte-atoms/core/components/atom';
+	import { type Base, HtmlAtom } from '$svelte-atoms/core/components/atom';
+	import { AlertBond } from './bond.svelte';
+	import type { AlertIconProps } from './types';
 
 	const bond = AlertBond.get();
 

src/lib/components/alert/alert-root.svelte

@@ -1,24 +1,8 @@
-<script module lang="ts">
-	import type { Factory } from '$svelte-atoms/core/types';
-
-	export type AlertRootProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		dismissible?: boolean;
-		dismissed?: boolean;
-		disabled?: boolean;
-		extend?: Record<string, unknown>;
-		factory?: Factory<AlertBond>;
-		children?: Snippet<[{ alert: AlertBond }]>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { AlertBond, AlertBondState, type AlertBondProps } from './bond.svelte';
 	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
+	import { AlertBond, AlertBondState, type AlertBondProps } from './bond.svelte';
+	import type { AlertRootProps } from './types';
 	import './alert.css';
 
 	let {