From e92dccdcab97f73573f0496b78140ee18b205500 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 7 Nov 2025 06:20:52 +0800
Subject: [PATCH 1/2] bump version to 1.0.0-alpha.26

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 83f83d2..bc5a52d 100644
--- a/package.json
+++ b/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",

From 3e0a1f059eed580cac75ea50a131f435f7cf4d19 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Mon, 10 Nov 2025 03:34:46 +0800
Subject: [PATCH 2/2] convert types to interface-based & extract types from
 module script

---
 .../accordion/accordion-root.svelte           |  22 +--
 src/lib/components/accordion/index.ts         |   3 +-
 .../accordion/item/accordion-item-body.svelte |  14 +-
 .../item/accordion-item-header.svelte         |  16 +-
 .../item/accordion-item-indicator.svelte      |  15 +-
 .../accordion/item/accordion-item-root.svelte |  20 +--
 src/lib/components/accordion/item/index.ts    |   1 +
 src/lib/components/accordion/item/types.ts    |  78 ++++++++++
 src/lib/components/accordion/types.ts         |  25 +++
 src/lib/components/alert/alert-actions.svelte |  14 +-
 .../alert/alert-close-button.svelte           |  19 +--
 src/lib/components/alert/alert-content.svelte |  14 +-
 .../components/alert/alert-description.svelte |  14 +-
 src/lib/components/alert/alert-icon.svelte    |  16 +-
 src/lib/components/alert/alert-root.svelte    |  22 +--
 src/lib/components/alert/alert-title.svelte   |  14 +-
 src/lib/components/alert/index.ts             |   1 +
 src/lib/components/alert/types.ts             | 125 +++++++++++++++
 src/lib/components/atom/types.ts              |  21 ++-
 src/lib/components/avatar/types.ts            |  10 +-
 src/lib/components/badge/types.ts             |  10 +-
 src/lib/components/button/index.ts            |   1 +
 src/lib/components/button/types.ts            |  10 +-
 src/lib/components/card/card-body.svelte      |  10 +-
 .../components/card/card-description.svelte   |  13 +-
 src/lib/components/card/card-footer.svelte    |  11 +-
 src/lib/components/card/card-header.svelte    |  11 +-
 src/lib/components/card/card-media.svelte     |  11 +-
 src/lib/components/card/card-root.svelte      |   4 +-
 src/lib/components/card/card-subtitle.svelte  |  13 +-
 src/lib/components/card/card-title.svelte     |  13 +-
 src/lib/components/card/index.ts              |   2 +
 src/lib/components/card/types.ts              | 101 ++++++++++++-
 src/lib/components/checkbox/types.ts          |  10 +-
 .../collapsible/collapsible-body.svelte       |  17 +--
 .../collapsible/collapsible-header.svelte     |  17 +--
 .../collapsible/collapsible-indicator.svelte  |  23 +--
 .../collapsible/collapsible-root.svelte       |  23 +--
 src/lib/components/collapsible/index.ts       |   1 +
 src/lib/components/collapsible/types.ts       |  84 +++++++++++
 .../components/combobox/combobox-root.svelte  |   7 +-
 src/lib/components/combobox/index.ts          |   2 +
 src/lib/components/combobox/types.ts          |  29 ++++
 src/lib/components/container/types.ts         |  12 +-
 src/lib/components/contextmenu/types.ts       |  13 ++
 .../components/datagrid/datagrid-body.svelte  |  19 +--
 .../datagrid/datagrid-checkbox.svelte         |  13 +-
 .../datagrid/datagrid-footer.svelte           |   2 +-
 .../datagrid/datagrid-header.svelte           |   4 +-
 .../components/datagrid/datagrid-root.svelte  |   4 +-
 .../components/datagrid/td/datagrid-td.svelte |  20 +--
 .../components/datagrid/th/datagrid-th.svelte |  27 +---
 src/lib/components/datagrid/tr/bond.svelte.ts |   6 +-
 .../components/datagrid/tr/datagrid-tr.svelte |  29 +---
 src/lib/components/datagrid/types.ts          | 142 +++++++++++++-----
 src/lib/components/dialog/dialog-body.svelte  |  10 +-
 .../dialog/dialog-close-button.svelte         |  17 +--
 .../components/dialog/dialog-content.svelte   |  10 +-
 .../dialog/dialog-description.svelte          |  10 +-
 .../components/dialog/dialog-footer.svelte    |  10 +-
 .../components/dialog/dialog-header.svelte    |  10 +-
 src/lib/components/dialog/dialog-root.svelte  |  19 +--
 src/lib/components/dialog/dialog-title.svelte |  12 +-
 src/lib/components/dialog/index.ts            |   2 +
 src/lib/components/dialog/types.ts            | 104 +++++++++++++
 src/lib/components/divider/types.ts           |  14 ++
 .../components/drawer/drawer-backdrop.svelte  |  13 +-
 src/lib/components/drawer/drawer-body.svelte  |  18 +--
 .../components/drawer/drawer-content.svelte   |  17 +--
 .../drawer/drawer-description.svelte          |  17 +--
 .../components/drawer/drawer-footer.svelte    |  17 +--
 .../components/drawer/drawer-header.svelte    |  19 +--
 src/lib/components/drawer/drawer-root.svelte  |  31 +---
 src/lib/components/drawer/drawer-title.svelte |  17 +--
 src/lib/components/drawer/index.ts            |   2 +
 src/lib/components/drawer/types.ts            | 114 ++++++++++++++
 .../components/dropdown/dropdown-query.svelte |   3 +-
 .../components/dropdown/dropdown-root.svelte  |   2 +-
 .../dropdown/dropdown-trigger.svelte          |  15 +-
 .../components/dropdown/dropdown-value.svelte |   2 +-
 src/lib/components/dropdown/index.ts          |   2 +
 src/lib/components/dropdown/types.ts          |  48 ++++++
 src/lib/components/element/types.ts           |  24 +--
 .../form/field/field-control.svelte           |  23 +--
 .../components/form/field/field-label.svelte  |   9 +-
 .../components/form/field/field-root.svelte   |  39 +----
 src/lib/components/form/index.ts              |   1 +
 src/lib/components/form/types.ts              |  96 ++++++++++++
 src/lib/components/icon/icon.svelte           |  17 +--
 src/lib/components/icon/types.ts              |  24 ++-
 src/lib/components/input/index.ts             |   1 +
 src/lib/components/input/input-control.svelte |   4 -
 src/lib/components/input/types.ts             |  43 ++++--
 src/lib/components/label/index.ts             |   1 +
 src/lib/components/label/label.svelte         |  20 +--
 src/lib/components/label/types.ts             |  15 ++
 src/lib/components/layer/types.ts             |  17 +++
 src/lib/components/link/types.ts              |  11 ++
 src/lib/components/list/types.ts              |  11 ++
 src/lib/components/menu/index.ts              |   1 +
 src/lib/components/menu/types.ts              |  23 +++
 src/lib/components/popover/index.ts           |   1 +
 .../components/popover/popover-arrow.svelte   |   2 +-
 .../components/popover/popover-content.svelte |   2 +-
 src/lib/components/popover/types.ts           |  62 +++++---
 src/lib/components/portal/index.ts            |   1 +
 src/lib/components/portal/portal-root.svelte  |   9 +-
 src/lib/components/portal/teleport.svelte     |  13 +-
 src/lib/components/portal/types.ts            |  56 +++++++
 src/lib/components/radio/radio.svelte         |   2 +-
 src/lib/components/root/types.ts              |  11 ++
 src/lib/components/scrollable/index.ts        |   2 +
 .../scrollable/scrollable-container.svelte    |  13 +-
 .../scrollable/scrollable-content.svelte      |  14 +-
 .../scrollable/scrollable-root.svelte         |  26 +---
 .../scrollable/scrollable-thumb.svelte        |  15 +-
 .../scrollable/scrollable-track.svelte        |  15 +-
 src/lib/components/scrollable/types.ts        |  78 ++++++++++
 src/lib/components/sidebar/index.ts           |   1 +
 src/lib/components/sidebar/types.ts           |  47 +++---
 src/lib/components/stack/types.ts             |  16 ++
 src/lib/components/tabs/index.ts              |   1 +
 src/lib/components/tabs/tab/tab-body.svelte   |  13 +-
 .../tabs/tab/tab-description.svelte           |  13 +-
 src/lib/components/tabs/tab/tab-header.svelte |  14 +-
 src/lib/components/tabs/tab/tab-root.svelte   |   2 +-
 src/lib/components/tabs/types.ts              |  71 +++++++++
 src/lib/components/textarea/index.ts          |   1 +
 src/lib/components/textarea/types.ts          |  35 +++++
 src/lib/components/toast/index.ts             |   1 +
 .../components/toast/toast-description.svelte |  12 +-
 src/lib/components/toast/toast-root.svelte    |  19 +--
 src/lib/components/toast/toast-title.svelte   |  12 +-
 src/lib/components/toast/types.ts             |  44 ++++++
 src/lib/components/tooltip/types.ts           |  19 +++
 src/lib/components/tree/index.ts              |   1 +
 src/lib/components/tree/tree-body.svelte      |  15 +-
 src/lib/components/tree/tree-header.svelte    |  16 +-
 src/lib/components/tree/tree-indicator.svelte |  18 +--
 src/lib/components/tree/tree-root.svelte      |  21 +--
 src/lib/components/tree/types.ts              |  78 ++++++++++
 src/lib/components/virtual/types.ts           |  24 +++
 .../components/virtual/virtual-root.svelte    |  23 +--
 143 files changed, 1867 insertions(+), 1085 deletions(-)
 create mode 100644 src/lib/components/accordion/item/types.ts
 create mode 100644 src/lib/components/accordion/types.ts
 create mode 100644 src/lib/components/alert/types.ts
 create mode 100644 src/lib/components/collapsible/types.ts
 create mode 100644 src/lib/components/combobox/types.ts
 create mode 100644 src/lib/components/contextmenu/types.ts
 create mode 100644 src/lib/components/dialog/types.ts
 create mode 100644 src/lib/components/divider/types.ts
 create mode 100644 src/lib/components/drawer/types.ts
 create mode 100644 src/lib/components/dropdown/types.ts
 create mode 100644 src/lib/components/form/types.ts
 create mode 100644 src/lib/components/label/types.ts
 create mode 100644 src/lib/components/layer/types.ts
 create mode 100644 src/lib/components/link/types.ts
 create mode 100644 src/lib/components/list/types.ts
 create mode 100644 src/lib/components/menu/types.ts
 create mode 100644 src/lib/components/portal/types.ts
 create mode 100644 src/lib/components/root/types.ts
 create mode 100644 src/lib/components/scrollable/types.ts
 create mode 100644 src/lib/components/stack/types.ts
 create mode 100644 src/lib/components/tabs/types.ts
 create mode 100644 src/lib/components/textarea/types.ts
 create mode 100644 src/lib/components/toast/types.ts
 create mode 100644 src/lib/components/tooltip/types.ts
 create mode 100644 src/lib/components/tree/types.ts
 create mode 100644 src/lib/components/virtual/types.ts

diff --git a/src/lib/components/accordion/accordion-root.svelte b/src/lib/components/accordion/accordion-root.svelte
index 7743917..8e737b1 100644
--- a/src/lib/components/accordion/accordion-root.svelte
+++ b/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),
diff --git a/src/lib/components/accordion/index.ts b/src/lib/components/accordion/index.ts
index ab9c924..6282709 100644
--- a/src/lib/components/accordion/index.ts
+++ b/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';
diff --git a/src/lib/components/accordion/item/accordion-item-body.svelte b/src/lib/components/accordion/item/accordion-item-body.svelte
index 9d216f0..c82e7a9 100644
--- a/src/lib/components/accordion/item/accordion-item-body.svelte
+++ b/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);
diff --git a/src/lib/components/accordion/item/accordion-item-header.svelte b/src/lib/components/accordion/item/accordion-item-header.svelte
index 5413cb4..eedb828 100644
--- a/src/lib/components/accordion/item/accordion-item-header.svelte
+++ b/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();
 
diff --git a/src/lib/components/accordion/item/accordion-item-indicator.svelte b/src/lib/components/accordion/item/accordion-item-indicator.svelte
index 1a10b71..acb773c 100644
--- a/src/lib/components/accordion/item/accordion-item-indicator.svelte
+++ b/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);
diff --git a/src/lib/components/accordion/item/accordion-item-root.svelte b/src/lib/components/accordion/item/accordion-item-root.svelte
index 00f4f9e..cccec18 100644
--- a/src/lib/components/accordion/item/accordion-item-root.svelte
+++ b/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 = '',
diff --git a/src/lib/components/accordion/item/index.ts b/src/lib/components/accordion/item/index.ts
index be0968a..16db01c 100644
--- a/src/lib/components/accordion/item/index.ts
+++ b/src/lib/components/accordion/item/index.ts
@@ -1 +1,2 @@
 export * as AccordionItem from './atoms';
+export type * from './types';
diff --git a/src/lib/components/accordion/item/types.ts b/src/lib/components/accordion/item/types.ts
new file mode 100644
index 0000000..bab00f0
--- /dev/null
+++ b/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 {}
diff --git a/src/lib/components/accordion/types.ts b/src/lib/components/accordion/types.ts
new file mode 100644
index 0000000..93d1b6b
--- /dev/null
+++ b/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 }]>;
+}
diff --git a/src/lib/components/alert/alert-actions.svelte b/src/lib/components/alert/alert-actions.svelte
index 85d84bd..2ce0070 100644
--- a/src/lib/components/alert/alert-actions.svelte
+++ b/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];
 
diff --git a/src/lib/components/alert/alert-close-button.svelte b/src/lib/components/alert/alert-close-button.svelte
index 70cf931..7cb7cd2 100644
--- a/src/lib/components/alert/alert-close-button.svelte
+++ b/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];
 
diff --git a/src/lib/components/alert/alert-content.svelte b/src/lib/components/alert/alert-content.svelte
index 6d752a9..598577e 100644
--- a/src/lib/components/alert/alert-content.svelte
+++ b/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];
 
diff --git a/src/lib/components/alert/alert-description.svelte b/src/lib/components/alert/alert-description.svelte
index e2323b6..f27c269 100644
--- a/src/lib/components/alert/alert-description.svelte
+++ b/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();
 
diff --git a/src/lib/components/alert/alert-icon.svelte b/src/lib/components/alert/alert-icon.svelte
index 77964f0..587ebc6 100644
--- a/src/lib/components/alert/alert-icon.svelte
+++ b/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();
 
diff --git a/src/lib/components/alert/alert-root.svelte b/src/lib/components/alert/alert-root.svelte
index c0a3acc..01d66c5 100644
--- a/src/lib/components/alert/alert-root.svelte
+++ b/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 {
diff --git a/src/lib/components/alert/alert-title.svelte b/src/lib/components/alert/alert-title.svelte
index e29ba01..9543a21 100644
--- a/src/lib/components/alert/alert-title.svelte
+++ b/src/lib/components/alert/alert-title.svelte
@@ -1,17 +1,7 @@
-<script module lang="ts">
-	export type AlertTitleProps<
-		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';
+	import type { AlertTitleProps } from './types';
 
 	const bond = AlertBond.get();
 
diff --git a/src/lib/components/alert/index.ts b/src/lib/components/alert/index.ts
index 92a9271..f94075d 100644
--- a/src/lib/components/alert/index.ts
+++ b/src/lib/components/alert/index.ts
@@ -1,2 +1,3 @@
 export * as Alert from './atoms';
 export type { AlertBondProps, AlertBondElements, AlertBond, AlertBondState } from './bond.svelte';
+export * from './types';
diff --git a/src/lib/components/alert/types.ts b/src/lib/components/alert/types.ts
new file mode 100644
index 0000000..46136d3
--- /dev/null
+++ b/src/lib/components/alert/types.ts
@@ -0,0 +1,125 @@
+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 { AlertBond } from './bond.svelte';
+
+/**
+ * Extend this interface to add custom alert root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface AlertRootExtendProps {}
+
+/**
+ * Extend this interface to add custom alert content properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface AlertContentExtendProps {}
+
+/**
+ * Extend this interface to add custom alert title properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface AlertTitleExtendProps {}
+
+/**
+ * Extend this interface to add custom alert description properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface AlertDescriptionExtendProps {}
+
+/**
+ * Extend this interface to add custom alert icon properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface AlertIconExtendProps {}
+
+/**
+ * Extend this interface to add custom alert actions properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface AlertActionsExtendProps {}
+
+/**
+ * Extend this interface to add custom alert close button properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface AlertCloseButtonExtendProps {}
+
+export interface AlertRootProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Omit<HtmlAtomProps<E, B>, 'children'>,
+		AlertRootExtendProps {
+	dismissible?: boolean;
+	dismissed?: boolean;
+	disabled?: boolean;
+	extend?: Record<string, unknown>;
+	factory?: Factory<AlertBond>;
+	children?: Snippet<[{ alert: AlertBond }]>;
+}
+
+export interface AlertContentProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<
+			HtmlAtomProps<E, B>,
+			{
+				children?: Snippet<[{ alert: AlertBond }]>;
+			}
+		>,
+		AlertContentExtendProps {}
+
+export interface AlertTitleProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<
+			HtmlAtomProps<E, B>,
+			{
+				children?: Snippet<[{ alert: AlertBond }]>;
+			}
+		>,
+		AlertTitleExtendProps {}
+
+export interface AlertDescriptionProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<
+			HtmlAtomProps<E, B>,
+			{
+				children?: Snippet<[{ alert: AlertBond }]>;
+			}
+		>,
+		AlertDescriptionExtendProps {}
+
+export interface AlertIconProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<
+			HtmlAtomProps<E, B>,
+			{
+				children?: Snippet<[{ alert: AlertBond }]>;
+			}
+		>,
+		AlertIconExtendProps {}
+
+export interface AlertActionsProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<
+			HtmlAtomProps<E, B>,
+			{
+				children?: Snippet<[{ alert: AlertBond }]>;
+			}
+		>,
+		AlertActionsExtendProps {}
+
+export interface AlertCloseButtonProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<
+			HtmlAtomProps<E, B>,
+			{
+				children?: Snippet<[{ alert: AlertBond }]>;
+			}
+		>,
+		AlertCloseButtonExtendProps {}
diff --git a/src/lib/components/atom/types.ts b/src/lib/components/atom/types.ts
index 3a38205..c41058a 100644
--- a/src/lib/components/atom/types.ts
+++ b/src/lib/components/atom/types.ts
@@ -7,13 +7,23 @@ import type { VariantDefinition } from '$svelte-atoms/core/utils';
 
 export type ComponentBase = Component;
 export type SnippetBase = Snippet;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Base<Args = any> =
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	Args extends Record<string, any> ? ComponentBase : Args extends unknown[] ? SnippetBase : never;
 
-export type HtmlAtomProps<
+/**
+ * Extend this interface to add custom HTML atom properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface HtmlAtomExtendProps {}
+
+export interface HtmlAtomProps<
 	E extends HtmlElementTagName = HtmlElementTagName,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	B extends Base<any> = Base
-> = HtmlElementProps<E> & {
+> extends HtmlElementProps<E>,
+		HtmlAtomExtendProps {
 	bond?: Bond;
 	base?: B;
 	preset?: PresetModuleName | (string & {});
@@ -22,9 +32,10 @@ export type HtmlAtomProps<
 	 * - VariantDefinition: Static variant config with base, variants, compoundVariants, defaultVariants
 	 * - Function: Dynamic function that receives bond and props, returns props (legacy)
 	 */
-	variants?:
-		| VariantDefinition<any>
+	variants?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+	| VariantDefinition<any>
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		| ((bond: Bond, variantProps: Record<string, any>) => Record<string, any>);
-};
+}
 
 export type { ElementType };
diff --git a/src/lib/components/avatar/types.ts b/src/lib/components/avatar/types.ts
index 1b57344..45c558e 100644
--- a/src/lib/components/avatar/types.ts
+++ b/src/lib/components/avatar/types.ts
@@ -1,8 +1,14 @@
 import type { Component } from 'svelte';
 
-export type AvatarProps = {
+/**
+ * Extend this interface to add custom avatar properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface AvatarExtendProps {}
+
+export interface AvatarProps extends AvatarExtendProps {
 	class?: string;
 	src?: string | Component;
 	alt?: string;
 	readonly element?: HTMLElement;
-};
+}
diff --git a/src/lib/components/badge/types.ts b/src/lib/components/badge/types.ts
index c860504..d9306ec 100644
--- a/src/lib/components/badge/types.ts
+++ b/src/lib/components/badge/types.ts
@@ -1,6 +1,12 @@
 import type { HtmlAtomProps } from '$svelte-atoms/core/components/atom';
 import type { Snippet } from 'svelte';
 
-export type BadgeProps = HtmlAtomProps<'span'> & {
+/**
+ * Extend this interface to add custom badge properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface BadgeExtendProps {}
+
+export interface BadgeProps extends HtmlAtomProps<'span'>, BadgeExtendProps {
 	children?: Snippet<[]>;
-};
+}
diff --git a/src/lib/components/button/index.ts b/src/lib/components/button/index.ts
index 66a30cb..a4de2ca 100644
--- a/src/lib/components/button/index.ts
+++ b/src/lib/components/button/index.ts
@@ -1 +1,2 @@
 export { default as Button } from './button.svelte';
+export * from './types';
diff --git a/src/lib/components/button/types.ts b/src/lib/components/button/types.ts
index bda24d0..52188f9 100644
--- a/src/lib/components/button/types.ts
+++ b/src/lib/components/button/types.ts
@@ -1,7 +1,13 @@
 import type { HtmlAtomProps } from '$svelte-atoms/core/components/atom/types';
 import type { Snippet } from 'svelte';
 
-export type ButtonProps = HtmlAtomProps<'button'> & {
+/**
+ * Extend this interface to add custom button properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ButtonExtendProps {}
+
+export interface ButtonProps extends HtmlAtomProps<'button'>, ButtonExtendProps {
 	type?: 'button' | 'submit' | 'reset';
 	children?: Snippet<[]>;
-};
+}
diff --git a/src/lib/components/card/card-body.svelte b/src/lib/components/card/card-body.svelte
index 92594ba..7f89b21 100644
--- a/src/lib/components/card/card-body.svelte
+++ b/src/lib/components/card/card-body.svelte
@@ -1,13 +1,7 @@
-<script module lang="ts">
-	export type CardContentProps<
-		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 { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
+	export type { CardContentProps } from './types';
 	import { CardBond } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
 	const bond = CardBond.get();
 
diff --git a/src/lib/components/card/card-description.svelte b/src/lib/components/card/card-description.svelte
index 5e52b79..f4338f0 100644
--- a/src/lib/components/card/card-description.svelte
+++ b/src/lib/components/card/card-description.svelte
@@ -1,15 +1,8 @@
-<script module lang="ts">
-	export type CardDescriptionProps<
-		E extends keyof HTMLElementTagNameMap = 'p',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
+	import type { CardDescriptionProps } from './types';
 	import { CardBond } from './bond.svelte';
 
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
-
 	const bond = CardBond.get();
 
 	let {
diff --git a/src/lib/components/card/card-footer.svelte b/src/lib/components/card/card-footer.svelte
index d85891f..afc2824 100644
--- a/src/lib/components/card/card-footer.svelte
+++ b/src/lib/components/card/card-footer.svelte
@@ -1,14 +1,7 @@
-<script module lang="ts">
-	export type CardFooterProps<
-		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 { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { CardBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	export type { CardFooterProps } from './types';
 
 	const bond = CardBond.get();
 
diff --git a/src/lib/components/card/card-header.svelte b/src/lib/components/card/card-header.svelte
index d873bba..ad1a6c1 100644
--- a/src/lib/components/card/card-header.svelte
+++ b/src/lib/components/card/card-header.svelte
@@ -1,14 +1,7 @@
-<script module lang="ts">
-	export type CardHeaderProps<
-		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 { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { CardBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	export type { CardHeaderProps } from './types';
 
 	const bond = CardBond.get();
 
diff --git a/src/lib/components/card/card-media.svelte b/src/lib/components/card/card-media.svelte
index 0fe1cc9..4b98e52 100644
--- a/src/lib/components/card/card-media.svelte
+++ b/src/lib/components/card/card-media.svelte
@@ -1,14 +1,7 @@
-<script module lang="ts">
-	export type CardMediaProps<
-		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 { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { CardBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	export type { CardMediaProps } from './types';
 
 	const bond = CardBond.get();
 
diff --git a/src/lib/components/card/card-root.svelte b/src/lib/components/card/card-root.svelte
index 5319b03..568c45a 100644
--- a/src/lib/components/card/card-root.svelte
+++ b/src/lib/components/card/card-root.svelte
@@ -1,9 +1,9 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { CardBond, CardBondState, type CardBondProps } from './bond.svelte';
-	import type { CardRootProps } from './types';
 	import { defineState } from '$svelte-atoms/core/utils';
 	import { defineProperty } from '$svelte-atoms/core/utils/state';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
+	import { CardBond, CardBondState, type CardBondProps } from './bond.svelte';
+	import type { CardRootProps } from './types';
 	import './card.css';
 
 	let {
diff --git a/src/lib/components/card/card-subtitle.svelte b/src/lib/components/card/card-subtitle.svelte
index 24085a8..575a2cf 100644
--- a/src/lib/components/card/card-subtitle.svelte
+++ b/src/lib/components/card/card-subtitle.svelte
@@ -1,14 +1,7 @@
-<script module lang="ts">
-	export type CardSubtitleProps<
-		E extends keyof HTMLElementTagNameMap = 'p',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { CardBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	export type { CardSubtitleProps } from './types';
 
 	const bond = CardBond.get();
 
diff --git a/src/lib/components/card/card-title.svelte b/src/lib/components/card/card-title.svelte
index 8bc7c85..b9fe242 100644
--- a/src/lib/components/card/card-title.svelte
+++ b/src/lib/components/card/card-title.svelte
@@ -1,14 +1,7 @@
-<script module lang="ts">
-	export type CardTitleProps<
-		E extends keyof HTMLElementTagNameMap = 'h3',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base">
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { CardBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	export type { CardTitleProps } from './types';
 
 	const bond = CardBond.get();
 
diff --git a/src/lib/components/card/index.ts b/src/lib/components/card/index.ts
index de27bde..50b70ae 100644
--- a/src/lib/components/card/index.ts
+++ b/src/lib/components/card/index.ts
@@ -1 +1,3 @@
 export * as Card from './atoms';
+
+export * from './types';
diff --git a/src/lib/components/card/types.ts b/src/lib/components/card/types.ts
index 8850bda..1b561b4 100644
--- a/src/lib/components/card/types.ts
+++ b/src/lib/components/card/types.ts
@@ -3,13 +3,104 @@ import type { CardBond } from './bond.svelte';
 import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
 import type { Factory } from '$svelte-atoms/core/types';
 
-export type CardRootProps<
-	E extends keyof HTMLElementTagNameMap = 'div',
-	B extends Base = Base
-> = HtmlAtomProps<E, B> & {
+/**
+ * Extend this interface to add custom card root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface CardExtendProps {}
+
+/**
+ * Extend this interface to add custom card header properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface CardHeaderExtendProps {}
+
+/**
+ * Extend this interface to add custom card body/content properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface CardBodyExtendProps {}
+
+/**
+ * Extend this interface to add custom card footer properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface CardFooterExtendProps {}
+
+/**
+ * Extend this interface to add custom card title properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface CardTitleExtendProps {}
+
+/**
+ * Extend this interface to add custom card subtitle properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface CardSubtitleExtendProps {}
+
+/**
+ * Extend this interface to add custom card description properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface CardDescriptionExtendProps {}
+
+/**
+ * Extend this interface to add custom card media properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface CardMediaExtendProps {}
+
+export interface CardRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>
+	extends Omit<HtmlAtomProps<E, B>, 'children'>,
+		CardExtendProps {
 	disabled?: boolean;
 	factory?: Factory<CardBond>;
 	children?: Snippet<[{ card: CardBond }]>;
 	onclick?: (event: MouseEvent) => void;
 	onkeydown?: (event: KeyboardEvent) => void;
-};
+}
+
+export interface CardHeaderProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		CardHeaderExtendProps {}
+
+export interface CardBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>
+	extends HtmlAtomProps<E, B>,
+		CardBodyExtendProps {}
+
+export interface CardFooterProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		CardFooterExtendProps {}
+
+export interface CardTitleProps<E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base>
+	extends HtmlAtomProps<E, B>,
+		CardTitleExtendProps {}
+
+export interface CardSubtitleProps<
+	E extends keyof HTMLElementTagNameMap = 'p',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		CardSubtitleExtendProps {}
+
+export interface CardDescriptionProps<
+	E extends keyof HTMLElementTagNameMap = 'p',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		CardDescriptionExtendProps {}
+
+export interface CardMediaProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		CardMediaExtendProps {}
+
+// Alias for CardBodyProps (used in card-body.svelte)
+export type CardContentProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> = CardBodyProps<E, B>;
diff --git a/src/lib/components/checkbox/types.ts b/src/lib/components/checkbox/types.ts
index dadcb7a..3bb8ad9 100644
--- a/src/lib/components/checkbox/types.ts
+++ b/src/lib/components/checkbox/types.ts
@@ -1,7 +1,13 @@
 import { type Component, type Snippet } from 'svelte';
 import { type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
 
-export type CheckboxProps = HtmlAtomProps<'button'> & {
+/**
+ * Extend this interface to add custom checkbox properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface CheckboxExtendProps {}
+
+export interface CheckboxProps extends HtmlAtomProps<'button'>, CheckboxExtendProps {
 	value?: string;
 	group?: string[];
 	checked?: boolean;
@@ -11,4 +17,4 @@ export type CheckboxProps = HtmlAtomProps<'button'> & {
 	children?: Snippet<[]>;
 	onclick?: (ev?: Event) => void;
 	onchange?: (ev?: Event, options?: { checked: boolean }) => void;
-};
+}
diff --git a/src/lib/components/collapsible/collapsible-body.svelte b/src/lib/components/collapsible/collapsible-body.svelte
index b06bed5..67ad1e5 100644
--- a/src/lib/components/collapsible/collapsible-body.svelte
+++ b/src/lib/components/collapsible/collapsible-body.svelte
@@ -1,20 +1,7 @@
-<script module lang="ts">
-	export type CollapsibleBodyProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ collapsible?: CollapsibleBond }]>;
-		}
-	>;
-</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 { CollapsibleBond } from './bond.svelte';
-	import type { Override } from '$svelte-atoms/core/types';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import type { CollapsibleBodyProps } from './types';
 
 	const bond = CollapsibleBond.get();
 
diff --git a/src/lib/components/collapsible/collapsible-header.svelte b/src/lib/components/collapsible/collapsible-header.svelte
index 9d0db42..db64797 100644
--- a/src/lib/components/collapsible/collapsible-header.svelte
+++ b/src/lib/components/collapsible/collapsible-header.svelte
@@ -1,20 +1,7 @@
-<script module lang="ts">
-	export type CollapsibleHeaderProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ collapsible?: CollapsibleBond }]>;
-		}
-	>;
-</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 type { CollapsibleHeaderProps } from './types';
 	import { CollapsibleBond } from './bond.svelte';
-	import type { Override } from '$svelte-atoms/core/types';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
 	const bond = CollapsibleBond.get();
 
diff --git a/src/lib/components/collapsible/collapsible-indicator.svelte b/src/lib/components/collapsible/collapsible-indicator.svelte
index 5f007b3..5c4d38a 100644
--- a/src/lib/components/collapsible/collapsible-indicator.svelte
+++ b/src/lib/components/collapsible/collapsible-indicator.svelte
@@ -1,24 +1,10 @@
-<script module lang="ts">
-	export type CollapsibleHeaderProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ collapsible?: CollapsibleBond }]>;
-		}
-	>;
-</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 { CollapsibleBond } from './bond.svelte';
 	import { Icon } from '$svelte-atoms/core/components/icon';
-
-	import type { Override } from '$svelte-atoms/core/types';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import IconArrowDown from '$svelte-atoms/core/icons/icon-arrow-down.svelte';
+	import { CollapsibleBond } from './bond.svelte';
+	import type { CollapsibleIndicatorProps } from './types';
 
 	const bond = CollapsibleBond.get();
 	const isOpen = $derived(bond?.state.props.open ?? false);
@@ -33,8 +19,7 @@
 		exit = undefined,
 		initial = undefined,
 		...restProps
-	}: CollapsibleHeaderProps<E, B> = $props();
-
+	}: CollapsibleIndicatorProps<E, B> = $props();
 	const indicatorProps = $derived({
 		...bond?.indicator(),
 		...restProps
diff --git a/src/lib/components/collapsible/collapsible-root.svelte b/src/lib/components/collapsible/collapsible-root.svelte
index 66c5209..291ef48 100644
--- a/src/lib/components/collapsible/collapsible-root.svelte
+++ b/src/lib/components/collapsible/collapsible-root.svelte
@@ -1,28 +1,9 @@
-<script module lang="ts">
-	export type CollapsibleRootProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ collapsible: CollapsibleBond }]>;
-		}
-	> & {
-		open?: boolean;
-		value?: string;
-		data?: any;
-		disabled?: boolean;
-		factory?: Factory<CollapsibleBond>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
 	import { nanoid } from 'nanoid';
-	import type { Factory, Override } from '$svelte-atoms/core/types';
 	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { CollapsibleBond, CollapsibleState, type CollapsibleStateProps } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import type { CollapsibleRootProps } from './types';
 
 	let {
 		open = $bindable(false),
diff --git a/src/lib/components/collapsible/index.ts b/src/lib/components/collapsible/index.ts
index b99edfe..b25717e 100644
--- a/src/lib/components/collapsible/index.ts
+++ b/src/lib/components/collapsible/index.ts
@@ -1,3 +1,4 @@
+export * from './types';
 export * as Collapsible from './atoms';
 export {
 	CollapsibleBond,
diff --git a/src/lib/components/collapsible/types.ts b/src/lib/components/collapsible/types.ts
new file mode 100644
index 0000000..ae65846
--- /dev/null
+++ b/src/lib/components/collapsible/types.ts
@@ -0,0 +1,84 @@
+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 { CollapsibleBond } from './bond.svelte';
+
+/**
+ * Extend this interface to add custom collapsible root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface CollapsibleRootExtendProps {}
+
+/**
+ * Extend this interface to add custom collapsible header properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface CollapsibleHeaderExtendProps {}
+
+/**
+ * Extend this interface to add custom collapsible body properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface CollapsibleBodyExtendProps {}
+
+/**
+ * Extend this interface to add custom collapsible indicator properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface CollapsibleIndicatorExtendProps {}
+
+export type CollapsibleRootProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> = Override<
+	HtmlAtomProps<E, B>,
+	{
+		children?: Snippet<[{ collapsible: CollapsibleBond }]>;
+	}
+> &
+	CollapsibleRootExtendProps & {
+		open?: boolean;
+		value?: string;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		data?: any;
+		disabled?: boolean;
+		factory?: Factory<CollapsibleBond>;
+	};
+
+export type CollapsibleHeaderProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> = Override<
+	HtmlAtomProps<E, B>,
+	{
+		children?: Snippet<[{ collapsible?: CollapsibleBond }]>;
+	}
+> &
+	CollapsibleHeaderExtendProps;
+
+export type CollapsibleBodyProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> = Override<
+	HtmlAtomProps<E, B>,
+	{
+		children?: Snippet<[{ collapsible?: CollapsibleBond }]>;
+	}
+> &
+	CollapsibleBodyExtendProps;
+
+export type CollapsibleIndicatorProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> = Override<
+	HtmlAtomProps<E, B>,
+	{
+		children?: Snippet<[{ collapsible?: CollapsibleBond }]>;
+	}
+> &
+	CollapsibleIndicatorExtendProps;
+
+/**
+ * @deprecated Use CollapsibleRootExtendProps instead
+ */
+export type CollapsibleExtendProps = CollapsibleRootExtendProps;
diff --git a/src/lib/components/combobox/combobox-root.svelte b/src/lib/components/combobox/combobox-root.svelte
index 8ad9ef8..652bfce 100644
--- a/src/lib/components/combobox/combobox-root.svelte
+++ b/src/lib/components/combobox/combobox-root.svelte
@@ -1,8 +1,5 @@
-<script module lang="ts">
-	export type ComboboxRootProps = {};
-</script>
-
 <script lang="ts" generics="D">
+	import type { ComboboxRootProps } from './types';
 	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
 	import { ComboboxBond, ComboboxBondState, type ComboboxBondProps } from './bond.svelte';
 
@@ -20,7 +17,7 @@
 		factory = _factory,
 		children = undefined,
 		...restProps
-	} = $props();
+	}: ComboboxRootProps = $props();
 
 	const bondProps = defineState<ComboboxBondProps>(
 		[
diff --git a/src/lib/components/combobox/index.ts b/src/lib/components/combobox/index.ts
index cf15563..cea9ab3 100644
--- a/src/lib/components/combobox/index.ts
+++ b/src/lib/components/combobox/index.ts
@@ -1 +1,3 @@
 export * as Combobox from './atoms';
+
+export * from './types';
diff --git a/src/lib/components/combobox/types.ts b/src/lib/components/combobox/types.ts
new file mode 100644
index 0000000..0b3d643
--- /dev/null
+++ b/src/lib/components/combobox/types.ts
@@ -0,0 +1,29 @@
+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 { ComboboxBond } from './bond.svelte';
+
+/**
+ * Extend this interface to add custom combobox properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ComboboxExtendProps {}
+
+export interface ComboboxRootProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Omit<HtmlAtomProps<E, B>, 'children'>,
+		ComboboxExtendProps {
+	open?: boolean;
+	value?: unknown;
+	values?: unknown[];
+	query?: string;
+	text?: string;
+	multiple?: boolean;
+	disabled?: boolean;
+	placements?: string[];
+	placement?: string;
+	offset?: number;
+	factory?: Factory<ComboboxBond>;
+	children?: Snippet<[{ combobox: ComboboxBond }]>;
+}
diff --git a/src/lib/components/container/types.ts b/src/lib/components/container/types.ts
index ec4cdca..44a14c1 100644
--- a/src/lib/components/container/types.ts
+++ b/src/lib/components/container/types.ts
@@ -1,7 +1,15 @@
 import type { Snippet } from 'svelte';
 import type { HtmlAtomProps } from '../atom';
 
-export type ContainerProps = HtmlAtomProps<'button'> & {
+/**
+ * Extend this interface to add custom container properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ContainerExtendProps {}
+
+export interface ContainerProps
+	extends Omit<HtmlAtomProps<'button'>, 'children'>,
+		ContainerExtendProps {
 	type?: 'inline-size' | 'size';
 	name?: string;
 	clientWidth?: number;
@@ -14,4 +22,4 @@ export type ContainerProps = HtmlAtomProps<'button'> & {
 			}
 		]
 	>;
-};
+}
diff --git a/src/lib/components/contextmenu/types.ts b/src/lib/components/contextmenu/types.ts
new file mode 100644
index 0000000..0a04875
--- /dev/null
+++ b/src/lib/components/contextmenu/types.ts
@@ -0,0 +1,13 @@
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+
+/**
+ * Extend this interface to add custom contextmenu properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ContextMenuExtendProps {}
+
+export interface ContextMenuTriggerProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		ContextMenuExtendProps {}
diff --git a/src/lib/components/datagrid/datagrid-body.svelte b/src/lib/components/datagrid/datagrid-body.svelte
index fbbd8e8..8165446 100644
--- a/src/lib/components/datagrid/datagrid-body.svelte
+++ b/src/lib/components/datagrid/datagrid-body.svelte
@@ -1,17 +1,10 @@
-<script module lang="ts">
-	export type DatagridBodyProps<
-		E extends HtmlElementTagName,
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ datagrid?: DataGridBond<E> }]>;
-	};
-</script>
-
-<script lang="ts" generics="E extends HtmlElementTagName, B extends Base = Base">
-	import type { Snippet } from 'svelte';
+<script lang="ts" generics="T, E extends HtmlElementTagName, B extends Base = Base">
+	import type { DatagridBodyProps } from './types';
 	import { DataGridBond } 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 { HtmlElementTagName } from '../element';
 	export type { HtmlElementTagName } from '$svelte-atoms/core/components/element';
+	export type { DatagridBodyProps } from './types';
 
 	const bond = DataGridBond.get();
 
@@ -25,7 +18,7 @@
 		exit = undefined,
 		initial = undefined,
 		...restProps
-	}: DatagridBodyProps<E, B> = $props();
+	}: DatagridBodyProps<T, E, B> = $props();
 </script>
 
 <HtmlAtom
diff --git a/src/lib/components/datagrid/datagrid-checkbox.svelte b/src/lib/components/datagrid/datagrid-checkbox.svelte
index 062e4de..0f16e04 100644
--- a/src/lib/components/datagrid/datagrid-checkbox.svelte
+++ b/src/lib/components/datagrid/datagrid-checkbox.svelte
@@ -1,16 +1,9 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-
-	export type DatagridCheckboxProps = HtmlAtomProps & {
-		children?: Snippet;
-	};
-</script>
-
 <script lang="ts">
+	import { Checkbox } from '$svelte-atoms/core/components/checkbox';
+	import type { DatagridCheckboxProps } from './types';
 	import { DataGridBond } from './bond.svelte';
 	import { DataGridTrBond } from './tr/bond.svelte';
-	import { Checkbox } from '$svelte-atoms/core/components/checkbox';
-	import type { HtmlAtomProps } from '$svelte-atoms/core/components/atom';
+	export type { DatagridCheckboxProps } from './types';
 
 	const datagridBond = DataGridBond.get();
 	const datagridTrBond = DataGridTrBond.get();
diff --git a/src/lib/components/datagrid/datagrid-footer.svelte b/src/lib/components/datagrid/datagrid-footer.svelte
index 92bb8e6..90a6476 100644
--- a/src/lib/components/datagrid/datagrid-footer.svelte
+++ b/src/lib/components/datagrid/datagrid-footer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { DataGridBond } from './bond.svelte';
 	import type { DatagridFooterProps } from './types';
-	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 
 	const bond = DataGridBond.get();
 
diff --git a/src/lib/components/datagrid/datagrid-header.svelte b/src/lib/components/datagrid/datagrid-header.svelte
index 5805515..295aba3 100644
--- a/src/lib/components/datagrid/datagrid-header.svelte
+++ b/src/lib/components/datagrid/datagrid-header.svelte
@@ -1,8 +1,8 @@
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { setDatagridHeaderContext } from './context';
-	import type { DatagridHeaderProps } from './types';
 	import { DataGridBond } from './bond.svelte';
-	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
+	import type { DatagridHeaderProps } from './types';
 
 	const bond = DataGridBond.get();
 
diff --git a/src/lib/components/datagrid/datagrid-root.svelte b/src/lib/components/datagrid/datagrid-root.svelte
index 46bf0c6..1761458 100644
--- a/src/lib/components/datagrid/datagrid-root.svelte
+++ b/src/lib/components/datagrid/datagrid-root.svelte
@@ -1,8 +1,8 @@
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
-	import { DataGridBond, DataGridBondState, type DataGridStateProps } from './bond.svelte';
-	import type { DatagridRootProps } from './types';
 	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
+	import { DataGridBond, DataGridBondState, type DataGridStateProps } from './bond.svelte';
+	import type { DatagridRootProps } from './types';
 
 	import './datagrid.css';
 
diff --git a/src/lib/components/datagrid/td/datagrid-td.svelte b/src/lib/components/datagrid/td/datagrid-td.svelte
index 12eebb0..10c9ee2 100644
--- a/src/lib/components/datagrid/td/datagrid-td.svelte
+++ b/src/lib/components/datagrid/td/datagrid-td.svelte
@@ -1,23 +1,9 @@
-<script module lang="ts">
-	export type DatagridTdProps<
-		D,
-		E extends HtmlElementTagName,
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		value?: string;
-		rows?: string;
-		data?: D;
-		children?: Snippet<[{ td?: DataGridTdBond<D> }]>;
-		onclick?: (ev: Event, options: { td?: DataGridTdBond<D> }) => void;
-	};
-</script>
-
 <script lang="ts" generics="D,E extends HtmlElementTagName, B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import type { DataGridTdBond } from './bond.svelte';
 	import { DataGridBond } 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 { HtmlElementTagName } from '$svelte-atoms/core/components/element';
+	import type { DataGridTdBond } from './bond.svelte';
+	export type { DatagridTdProps } from '../types';
 
 	const bond = DataGridBond.get();
 
diff --git a/src/lib/components/datagrid/th/datagrid-th.svelte b/src/lib/components/datagrid/th/datagrid-th.svelte
index 646c216..28c7e97 100644
--- a/src/lib/components/datagrid/th/datagrid-th.svelte
+++ b/src/lib/components/datagrid/th/datagrid-th.svelte
@@ -1,31 +1,10 @@
-<script module lang="ts">
-	export type DatagridThProps = HtmlAtomProps<'div'> & {
-		id?: string;
-		class?: string;
-		width?: string;
-		direction?: Direction;
-		screen?: string;
-		sortable?: boolean | SortableType;
-		hidden?: boolean;
-		factory?: () => DataGridThBond<unknown>;
-		children?: Snippet<
-			[
-				{
-					th: DatagridContext;
-				}
-			]
-		>;
-	};
-</script>
-
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap, 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 { DataGridThBond, DataGridThBondState, type DataGridThBondProps } from './bond.svelte';
-	import type { Direction, SortableType } from '$svelte-atoms/core/types';
 	import type { DatagridContext } from '../context';
-	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
-	import { HtmlAtom, type Base, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
+	import type { DatagridThProps } from '../types';
 
 	let {
 		class: klass = '',
diff --git a/src/lib/components/datagrid/tr/bond.svelte.ts b/src/lib/components/datagrid/tr/bond.svelte.ts
index 638a63e..2ee01e2 100644
--- a/src/lib/components/datagrid/tr/bond.svelte.ts
+++ b/src/lib/components/datagrid/tr/bond.svelte.ts
@@ -1,7 +1,7 @@
-import { createAttachmentKey } from 'svelte/attachments';
 import { getContext, setContext } from 'svelte';
-import { DataGridBond } from '../bond.svelte';
+import { createAttachmentKey } from 'svelte/attachments';
 import { Bond, BondState, type BondStateProps } from '$svelte-atoms/core/shared/bond.svelte';
+import { DataGridBond } from '../bond.svelte';
 
 export type DataGridTrBondProps<T = unknown> = BondStateProps & {
 	value?: string;
@@ -54,6 +54,8 @@ export class DataGridTrBond<
 	root(props: Record<string, unknown> = {}) {
 		return {
 			'data-kind': DATAGRID_TR_ELEMENTS_KIND.root,
+			'data-header': this.state.isHeader ? 'true' : undefined,
+			'data-selected': this.state.isSelected ? 'true' : undefined,
 			...props,
 			[createAttachmentKey()]: (node: HTMLElement) => {
 				this.elements.root = node;
diff --git a/src/lib/components/datagrid/tr/datagrid-tr.svelte b/src/lib/components/datagrid/tr/datagrid-tr.svelte
index 7a53ace..b6193e1 100644
--- a/src/lib/components/datagrid/tr/datagrid-tr.svelte
+++ b/src/lib/components/datagrid/tr/datagrid-tr.svelte
@@ -1,28 +1,13 @@
-<script module lang="ts">
-	export type DatagridTrProps<
-		D,
-		E extends HtmlElementTagName,
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		class?: string;
-		value?: string;
-		rows?: string;
-		data?: D;
-		factory?: Factory<DataGridTrBond<D>>;
-		children?: Snippet<[{ tr: DatagridContext<D> }]>;
-		onclick?: (ev: Event, options: { tr?: DatagridContext<D> }) => void;
-	};
-</script>
-
 <script lang="ts" generics="T, E extends HtmlElementTagName, B extends Base = Base">
-	import { untrack, type Snippet } from 'svelte';
+	import { untrack } 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 type { HtmlElementTagName } from '$svelte-atoms/core/components/element';
 	import { DataGridTrBond, DataGridTrBondState, type DataGridTrBondProps } from './bond.svelte';
+	import type { DatagridTrProps } from '../types';
 	import { getDatagridHeaderContext, type DatagridContext } from '../context';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
-	import type { HtmlElementTagName } from '$svelte-atoms/core/components/element';
-	import type { Factory } from '$svelte-atoms/core/types';
+
 	import './datagrid-tr.css';
 
 	const context_header = getDatagridHeaderContext();
@@ -83,9 +68,9 @@
 	class={[
 		'datagrid-tr border-border items-center border-b bg-transparent',
 		!isHeader &&
-			'hover:bg-foreground/5 active:bg-foreground/10 transition-colors duration-100 last:border-b-0',
+			'hover:bg-foreground/2 active:bg-foreground/4 transition-colors duration-100 last:border-b-0',
 		isHeader && 'header-tr',
-		isSelected && 'bg-foreground/3',
+		isSelected && 'bg-primary/2 hover:bg-primary/4 active:bg-primary/6',
 		'$preset',
 		klass
 	]}
diff --git a/src/lib/components/datagrid/types.ts b/src/lib/components/datagrid/types.ts
index 22d569a..2cfdbc5 100644
--- a/src/lib/components/datagrid/types.ts
+++ b/src/lib/components/datagrid/types.ts
@@ -1,29 +1,85 @@
 import type { Snippet } from 'svelte';
 import type { DataGridBond } from './bond.svelte';
 import type { CheckboxProps } from '../checkbox/types';
+import type { Factory } from '$svelte-atoms/core/types';
+import type { DataGridTrBond } from './tr/bond.svelte';
+import type { DataGridThBond } from './th/bond.svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+import type { HtmlElementTagName } from '../element';
+import type { Override } from '$svelte-atoms/core/types';
 
-export type DatagridContext<T = unknown> = DataGridBond<T> | { [key: string]: unknown };
+/**
+ * Extend this interface to add custom datagrid root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DatagridRootExtendProps {}
+
+/**
+ * Extend this interface to add custom datagrid header properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DatagridHeaderExtendProps {}
+
+/**
+ * Extend this interface to add custom datagrid body properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DatagridBodyExtendProps {}
+
+/**
+ * Extend this interface to add custom datagrid footer properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DatagridFooterExtendProps {}
+
+/**
+ * Extend this interface to add custom datagrid th properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DatagridThExtendProps {}
+
+/**
+ * Extend this interface to add custom datagrid td properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DatagridTdExtendProps {}
+
+/**
+ * Extend this interface to add custom datagrid checkbox properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DatagridCheckboxExtendProps {}
+
+/**
+ * Extend this interface to add custom datagrid tr properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DatagridTrExtendProps {}
+
+export interface DatagridContext<T = unknown> extends DataGridBond<T> {
+	[key: string]: unknown;
+}
 
 export type Direction = 'asc' | 'desc';
 
-export type Row<T = unknown> = {
+export interface Row<T = unknown> {
 	value: string;
 	data: T;
-};
+}
 
-export type SelectedRows<T = unknown> = {
+export interface SelectedRows<T = unknown> {
 	[id: string]: T;
-};
+}
 
 export type SortableType = string | (<T>(d: T) => string | number | boolean | Date);
 
-export type SortBy = {
+export interface SortBy {
 	id: string;
 	direction: Direction;
 	by?: SortableType;
-};
+}
 
-export type Column = {
+export interface Column {
 	id: string;
 	name: () => string;
 	index: () => number;
@@ -32,69 +88,83 @@ export type Column = {
 	screen?: string;
 	width?: string;
 	hidden: () => boolean;
-};
+}
 
-export type DatagridRootProps<T> = {
+export interface DatagridRootProps<T> extends DatagridRootExtendProps {
 	class?: string;
 	template?: string;
 	values?: string[];
 	data?: T[];
 	readonly element?: HTMLElement;
 	children?: Snippet<[{ context: DatagridContext<T> }]>;
-};
+}
 
-export type DatagridHeaderProps<T> = {
+export interface DatagridHeaderProps<T> extends DatagridHeaderExtendProps {
 	class?: string;
 	readonly element?: HTMLElement;
 	children?: Snippet<[{ context: DatagridContext<T> }]>;
-};
+}
 
-export type DatagridBodyProps<T> = {
+export interface DatagridBodyProps<T, E extends HtmlElementTagName = 'div', B extends Base = Base>
+	extends DatagridBodyExtendProps {
 	class?: string;
 	readonly element?: HTMLElement;
 	children?: Snippet<[{ context: DatagridContext<T> }]>;
-};
+}
 
-export type DatagridFooterProps<T> = {
+export interface DatagridFooterProps<T> extends DatagridFooterExtendProps {
 	class?: string;
 	readonly element?: HTMLElement;
 	children?: Snippet<[{ context: DatagridContext<T> }]>;
-};
+}
 
-export type DatagridThProps<T> = {
+export interface DatagridThProps<
+	T = unknown,
+	E extends HtmlElementTagName = 'div',
+	B extends Base = Base
+> extends Override<
+			HtmlAtomProps<E, B>,
+			{
+				children?: Snippet<[{ th: DatagridContext<T> }]>;
+			}
+		>,
+		DatagridThExtendProps {
+	id?: string;
 	class?: string;
 	width?: string;
 	direction?: Direction;
 	screen?: string;
 	sortable?: boolean | SortableType;
-	readonly element?: HTMLElement;
-	children?: Snippet<
-		[
-			{
-				context: DatagridContext<T>;
-			}
-		]
-	>;
-};
+	hidden?: boolean;
+	factory?: () => DataGridThBond<T>;
+}
 
-export type DatagridTdProps<T> = {
+export interface DatagridTdProps<T> extends DatagridTdExtendProps {
 	class?: string;
 	readonly element?: HTMLElement;
 	children?: Snippet<[{ context: DatagridContext<T> }]>;
 	onclick?: (ev: Event, options: { context?: DatagridContext<T> }) => void;
-};
+}
 
-export type DatagridCheckboxProps = CheckboxProps & {
+export interface DatagridCheckboxProps
+	extends Omit<CheckboxProps, 'children'>,
+		DatagridCheckboxExtendProps {
 	readonly element?: HTMLElement;
 	children?: Snippet<[{ context: DatagridContext }]>;
-};
+}
 
-export type DatagridTrProps<T> = {
+export interface DatagridTrProps<T, E extends HtmlElementTagName = 'div', B extends Base = Base>
+	extends Override<
+			HtmlAtomProps<E, B>,
+			{
+				children?: Snippet<[{ tr: DatagridContext<T> }]>;
+			}
+		>,
+		DatagridTrExtendProps {
 	class?: string;
 	value?: string;
 	rows?: string;
 	data?: T;
-	readonly element?: HTMLElement;
-	children?: Snippet<[{ context: DatagridContext<T> }]>;
-	onclick?: (ev: Event, options: { context?: DatagridContext<T> }) => void;
-};
+	factory?: Factory<DataGridTrBond<T>>;
+	onclick?: (ev: Event, options: { tr?: DatagridContext<T> }) => void;
+}
diff --git a/src/lib/components/dialog/dialog-body.svelte b/src/lib/components/dialog/dialog-body.svelte
index f858fe6..3a54c08 100644
--- a/src/lib/components/dialog/dialog-body.svelte
+++ b/src/lib/components/dialog/dialog-body.svelte
@@ -1,13 +1,7 @@
-<script module lang="ts">
-	export type DialogBodyProps<
-		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 type { DialogBodyProps } from './types';
 	import { DialogBond } 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';
 
 	let {
 		class: klass,
diff --git a/src/lib/components/dialog/dialog-close-button.svelte b/src/lib/components/dialog/dialog-close-button.svelte
index f0fc1c8..02baa2c 100644
--- a/src/lib/components/dialog/dialog-close-button.svelte
+++ b/src/lib/components/dialog/dialog-close-button.svelte
@@ -1,15 +1,12 @@
-<script module lang="ts">
-	export type DialogCloseButtonProps<
-		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 { DialogBond } from './bond.svelte';
+<script
+	lang="ts"
+	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
+>
 	import { Icon } from '$svelte-atoms/core/components/icon';
 	import Close from '$svelte-atoms/core/icons/icon-close.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
+	import { DialogBond } from './bond.svelte';
+	import type { DialogCloseButtonProps } from './types';
 
 	const bond = DialogBond.get();
 
diff --git a/src/lib/components/dialog/dialog-content.svelte b/src/lib/components/dialog/dialog-content.svelte
index 215ff26..86dce4c 100644
--- a/src/lib/components/dialog/dialog-content.svelte
+++ b/src/lib/components/dialog/dialog-content.svelte
@@ -1,15 +1,9 @@
-<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 '$svelte-atoms/core/shared';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { DialogBond } from './bond.svelte';
+	import type { DialogContentProps } from './types';
 
 	const bond = DialogBond.get();
 
diff --git a/src/lib/components/dialog/dialog-description.svelte b/src/lib/components/dialog/dialog-description.svelte
index 346a760..9f8e865 100644
--- a/src/lib/components/dialog/dialog-description.svelte
+++ b/src/lib/components/dialog/dialog-description.svelte
@@ -1,13 +1,7 @@
-<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 { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
+	import type { DialogDescriptionProps } from './types';
 	import { DialogBond } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
 	let {
 		class: klass = '',
diff --git a/src/lib/components/dialog/dialog-footer.svelte b/src/lib/components/dialog/dialog-footer.svelte
index f2c8443..12c34e5 100644
--- a/src/lib/components/dialog/dialog-footer.svelte
+++ b/src/lib/components/dialog/dialog-footer.svelte
@@ -1,13 +1,7 @@
-<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 { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { DialogBond } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import type { DialogFooterProps } from './types';
 
 	let {
 		class: klass = '',
diff --git a/src/lib/components/dialog/dialog-header.svelte b/src/lib/components/dialog/dialog-header.svelte
index 13fe73b..3d7443e 100644
--- a/src/lib/components/dialog/dialog-header.svelte
+++ b/src/lib/components/dialog/dialog-header.svelte
@@ -1,13 +1,7 @@
-<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 { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
+	import type { DialogHeaderProps } from './types';
 	import { DialogBond } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
 	let {
 		class: klass = '',
diff --git a/src/lib/components/dialog/dialog-root.svelte b/src/lib/components/dialog/dialog-root.svelte
index 14fa3fa..ae7bba6 100644
--- a/src/lib/components/dialog/dialog-root.svelte
+++ b/src/lib/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 '$svelte-atoms/core/components/portal';
+	import { Teleport, ActivePortal } from '$svelte-atoms/core/components/portal';
 	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
-	import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+	import type { Base } from '$svelte-atoms/core/components/atom';
 	import { DURATION } from '$svelte-atoms/core/shared';
 	import { DialogBond, DialogBondState, type DialogBondProps } from './bond.svelte';
+	import type { DialogProps } from './types';
 
 	let {
 		class: klass = '',
diff --git a/src/lib/components/dialog/dialog-title.svelte b/src/lib/components/dialog/dialog-title.svelte
index bb0b7a0..1246e43 100644
--- a/src/lib/components/dialog/dialog-title.svelte
+++ b/src/lib/components/dialog/dialog-title.svelte
@@ -1,13 +1,7 @@
-<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">
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'h2', B extends Base = Base">
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { DialogBond } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import type { DialogTitleProps } from './types';
 
 	let {
 		class: klass = '',
diff --git a/src/lib/components/dialog/index.ts b/src/lib/components/dialog/index.ts
index c4a0da4..bc868de 100644
--- a/src/lib/components/dialog/index.ts
+++ b/src/lib/components/dialog/index.ts
@@ -1 +1,3 @@
 export * as Dialog from './atoms';
+
+export * from './types';
diff --git a/src/lib/components/dialog/types.ts b/src/lib/components/dialog/types.ts
new file mode 100644
index 0000000..e83651d
--- /dev/null
+++ b/src/lib/components/dialog/types.ts
@@ -0,0 +1,104 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+import type { PortalBond } from '$svelte-atoms/core/components/portal';
+import type { DialogBond, DialogBondProps } from './bond.svelte';
+
+/**
+ * Extend this interface to add custom dialog root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DialogExtendProps {}
+
+/**
+ * Extend this interface to add custom dialog content properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DialogContentExtendProps {}
+
+/**
+ * Extend this interface to add custom dialog header properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DialogHeaderExtendProps {}
+
+/**
+ * Extend this interface to add custom dialog body properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DialogBodyExtendProps {}
+
+/**
+ * Extend this interface to add custom dialog footer properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DialogFooterExtendProps {}
+
+/**
+ * Extend this interface to add custom dialog title properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DialogTitleExtendProps {}
+
+/**
+ * Extend this interface to add custom dialog description properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DialogDescriptionExtendProps {}
+
+/**
+ * Extend this interface to add custom dialog close button properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DialogCloseButtonExtendProps {}
+
+export interface DialogProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>
+	extends Omit<HtmlAtomProps<E, B>, 'children'>,
+		DialogExtendProps {
+	open?: boolean;
+	disabled?: boolean;
+	portal?: string | PortalBond;
+	factory?: (props: DialogBondProps) => DialogBond;
+	children?: Snippet<[{ dialog: DialogBond }]>;
+}
+
+export interface DialogContentProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		DialogContentExtendProps {}
+
+export interface DialogHeaderProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		DialogHeaderExtendProps {}
+
+export interface DialogBodyProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		DialogBodyExtendProps {}
+
+export interface DialogFooterProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		DialogFooterExtendProps {}
+
+export interface DialogTitleProps<
+	E extends keyof HTMLElementTagNameMap = 'h2',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		DialogTitleExtendProps {}
+
+export interface DialogDescriptionProps<
+	E extends keyof HTMLElementTagNameMap = 'p',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		DialogDescriptionExtendProps {}
+
+export interface DialogCloseButtonProps<
+	E extends keyof HTMLElementTagNameMap = 'button',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		DialogCloseButtonExtendProps {}
diff --git a/src/lib/components/divider/types.ts b/src/lib/components/divider/types.ts
new file mode 100644
index 0000000..c9248b4
--- /dev/null
+++ b/src/lib/components/divider/types.ts
@@ -0,0 +1,14 @@
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+
+/**
+ * Extend this interface to add custom divider properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DividerExtendProps {}
+
+export interface DividerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>
+	extends HtmlAtomProps<E, B>,
+		DividerExtendProps {
+	vertical?: boolean;
+	transparent?: boolean;
+}
diff --git a/src/lib/components/drawer/drawer-backdrop.svelte b/src/lib/components/drawer/drawer-backdrop.svelte
index 1bae55c..b352271 100644
--- a/src/lib/components/drawer/drawer-backdrop.svelte
+++ b/src/lib/components/drawer/drawer-backdrop.svelte
@@ -1,16 +1,7 @@
-<script module lang="ts">
-	export type SlideoverBackdropProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		as?: E;
-		class?: string;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import type { SlideoverBackdropProps } from './types';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { DrawerBond } from './bond.svelte';
 
 	type Element = HTMLElementTagNameMap[E];
diff --git a/src/lib/components/drawer/drawer-body.svelte b/src/lib/components/drawer/drawer-body.svelte
index 3d1649b..09fb358 100644
--- a/src/lib/components/drawer/drawer-body.svelte
+++ b/src/lib/components/drawer/drawer-body.svelte
@@ -1,22 +1,8 @@
-<script module lang="ts">
-	export type DrawerBodyProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			as?: E;
-			children?: Snippet<[{ drawer?: DrawerBond }]>;
-		}
-	>;
-</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 type { Override } from '$svelte-atoms/core/types';
+	import type { DrawerBodyProps } from './types';
 	import { DrawerBond } 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';
 
 	type Element = HTMLElementTagNameMap[E];
 
diff --git a/src/lib/components/drawer/drawer-content.svelte b/src/lib/components/drawer/drawer-content.svelte
index 03641e6..8402246 100644
--- a/src/lib/components/drawer/drawer-content.svelte
+++ b/src/lib/components/drawer/drawer-content.svelte
@@ -1,21 +1,8 @@
-<script module lang="ts">
-	export type SlideoverContentProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ drawer?: DrawerBond }]>;
-		}
-	>;
-</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 type { SlideoverContentProps } from './types';
 	import { DrawerBond } from './bond.svelte';
-	import type { Override } from '$svelte-atoms/core/types';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
 	type Element = HTMLElementTagNameMap[E];
 
diff --git a/src/lib/components/drawer/drawer-description.svelte b/src/lib/components/drawer/drawer-description.svelte
index 8f4252e..2e73ed8 100644
--- a/src/lib/components/drawer/drawer-description.svelte
+++ b/src/lib/components/drawer/drawer-description.svelte
@@ -1,21 +1,8 @@
-<script module lang="ts">
-	export type SlideoverDescriptionProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ drawer?: DrawerBond }]>;
-		}
-	>;
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
-	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import type { SlideoverDescriptionProps } from './types';
 	import { DrawerBond } from './bond.svelte';
-	import type { Override } from '$svelte-atoms/core/types';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 
 	type Element = HTMLElementTagNameMap[E];
 
diff --git a/src/lib/components/drawer/drawer-footer.svelte b/src/lib/components/drawer/drawer-footer.svelte
index 01968b9..2e6f0b7 100644
--- a/src/lib/components/drawer/drawer-footer.svelte
+++ b/src/lib/components/drawer/drawer-footer.svelte
@@ -1,21 +1,8 @@
-<script module lang="ts">
-	export type SlideoverFooterProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ drawer?: DrawerBond }]>;
-		}
-	>;
-</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 type { Override } from '$svelte-atoms/core/types';
+	import type { SlideoverFooterProps } from './types';
 	import { DrawerBond } 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';
 
 	type Element = HTMLElementTagNameMap[E];
 
diff --git a/src/lib/components/drawer/drawer-header.svelte b/src/lib/components/drawer/drawer-header.svelte
index 39d1fe6..9556556 100644
--- a/src/lib/components/drawer/drawer-header.svelte
+++ b/src/lib/components/drawer/drawer-header.svelte
@@ -1,21 +1,8 @@
-<script module lang="ts">
-	export type SlideoverHeaderProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ drawer?: DrawerBond }]>;
-		}
-	>;
-</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 = 'div', B extends Base = Base">
 	import type { HTMLAttributes } from 'svelte/elements';
+	import type { SlideoverHeaderProps } from './types';
 	import { DrawerBond } from './bond.svelte';
-	import type { Override } from '$svelte-atoms/core/types';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 
 	type Element = HTMLElementTagNameMap[E];
 
diff --git a/src/lib/components/drawer/drawer-root.svelte b/src/lib/components/drawer/drawer-root.svelte
index ad2dbfb..57c73c5 100644
--- a/src/lib/components/drawer/drawer-root.svelte
+++ b/src/lib/components/drawer/drawer-root.svelte
@@ -1,36 +1,11 @@
-<script module lang="ts">
-	import type { Factory } from '$svelte-atoms/core/types';
-
-	export type SlideoverRootProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ drawer: DrawerBond }]>;
-			initial?: (node: HTMLElement, bond: DrawerBond) => void;
-			enter?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
-			exit?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
-		}
-	> & {
-		open?: boolean;
-		disabled?: boolean;
-		portal?: string | PortalBond;
-		onclose?: (event: Event, bond: DrawerBond) => void;
-		factory?: Factory<DrawerBond>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap='dialog', B extends Base = Base">
-	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Override } from '$svelte-atoms/core/types';
 	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
-	import { type TransitionFunction } from '$svelte-atoms/core/components/element';
 	import Teleport from '$svelte-atoms/core/components/portal/teleport.svelte';
-	import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+	import type { Base } from '$svelte-atoms/core/components/atom';
 	import { DrawerBond, DrawerBondState, type DrawerBondProps } from './bond.svelte';
-	import { ActivePortal, type PortalBond } from '../portal';
+	import type { SlideoverRootProps } from './types';
+	import { ActivePortal } from '../portal';
 
 	type Element = HTMLElementTagNameMap[E];
 
diff --git a/src/lib/components/drawer/drawer-title.svelte b/src/lib/components/drawer/drawer-title.svelte
index 27e356f..cc61b55 100644
--- a/src/lib/components/drawer/drawer-title.svelte
+++ b/src/lib/components/drawer/drawer-title.svelte
@@ -1,21 +1,8 @@
-<script module lang="ts">
-	export type SlideoverTitleProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ drawer?: DrawerBond }]>;
-		}
-	>;
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'h3', 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 { DrawerBond } from './bond.svelte';
-	import type { Override } from '$svelte-atoms/core/types';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import type { SlideoverTitleProps } from './types';
 
 	type Element = HTMLElementTagNameMap[E];
 
diff --git a/src/lib/components/drawer/index.ts b/src/lib/components/drawer/index.ts
index f8eaef9..492b23e 100644
--- a/src/lib/components/drawer/index.ts
+++ b/src/lib/components/drawer/index.ts
@@ -12,3 +12,5 @@ export {
 	type DrawerBondProps,
 	DrawerBondState
 } from './bond.svelte';
+
+export * from './types';
diff --git a/src/lib/components/drawer/types.ts b/src/lib/components/drawer/types.ts
new file mode 100644
index 0000000..e6f131f
--- /dev/null
+++ b/src/lib/components/drawer/types.ts
@@ -0,0 +1,114 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+import type { Override, Factory } from '$svelte-atoms/core/types';
+import type { TransitionFunction } from '$svelte-atoms/core/components/element';
+import type { PortalBond } from '$svelte-atoms/core/components/portal';
+import type { DrawerBond } from './bond.svelte';
+
+/**
+ * Extend this interface to add custom drawer/slideover root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DrawerExtendProps {}
+
+/**
+ * Extend this interface to add custom drawer/slideover content properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DrawerContentExtendProps {}
+
+/**
+ * Extend this interface to add custom drawer/slideover header properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DrawerHeaderExtendProps {}
+
+/**
+ * Extend this interface to add custom drawer/slideover body properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DrawerBodyExtendProps {}
+
+/**
+ * Extend this interface to add custom drawer/slideover footer properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DrawerFooterExtendProps {}
+
+/**
+ * Extend this interface to add custom drawer/slideover title properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DrawerTitleExtendProps {}
+
+/**
+ * Extend this interface to add custom drawer/slideover description properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DrawerDescriptionExtendProps {}
+
+/**
+ * Extend this interface to add custom drawer/slideover backdrop properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DrawerBackdropExtendProps {}
+
+export interface SlideoverRootProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base>
+	extends Override<
+			HtmlAtomProps<E, B>,
+			{
+				children?: Snippet<[{ drawer: DrawerBond }]>;
+				initial?: (node: HTMLElement, bond: DrawerBond) => void;
+				enter?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
+				exit?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
+			}
+		>,
+		DrawerExtendProps {
+	open?: boolean;
+	disabled?: boolean;
+	portal?: string | PortalBond;
+	onclose?: (event: Event, bond: DrawerBond) => void;
+	factory?: Factory<DrawerBond>;
+}
+
+export interface SlideoverContentProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		DrawerContentExtendProps {}
+
+export interface SlideoverHeaderProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<HtmlAtomProps<E, B>, { children?: Snippet<[{ drawer?: DrawerBond }]> }>,
+		DrawerHeaderExtendProps {}
+
+export interface DrawerBodyProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<HtmlAtomProps<E, B>, { children?: Snippet<[{ drawer?: DrawerBond }]> }>,
+		DrawerBodyExtendProps {}
+
+export interface SlideoverFooterProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<HtmlAtomProps<E, B>, { children?: Snippet<[{ drawer?: DrawerBond }]> }>,
+		DrawerFooterExtendProps {}
+
+export interface SlideoverTitleProps<
+	E extends keyof HTMLElementTagNameMap = 'h2',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		DrawerTitleExtendProps {}
+
+export interface SlideoverDescriptionProps<
+	E extends keyof HTMLElementTagNameMap = 'p',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		DrawerDescriptionExtendProps {}
+
+export interface SlideoverBackdropProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		DrawerBackdropExtendProps {}
diff --git a/src/lib/components/dropdown/dropdown-query.svelte b/src/lib/components/dropdown/dropdown-query.svelte
index 4601301..d885fea 100644
--- a/src/lib/components/dropdown/dropdown-query.svelte
+++ b/src/lib/components/dropdown/dropdown-query.svelte
@@ -1,7 +1,8 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', S extends Shell = Shell">
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { onMount } from 'svelte';
 	import { DropdownBond } from './bond.svelte';
 	import { Input } from '$svelte-atoms/core/components/input';
+	import { type Base } from '$svelte-atoms/core/components/atom';
 
 	const bond = DropdownBond.get() as DropdownBond;
 
diff --git a/src/lib/components/dropdown/dropdown-root.svelte b/src/lib/components/dropdown/dropdown-root.svelte
index 1da27f1..417f75d 100644
--- a/src/lib/components/dropdown/dropdown-root.svelte
+++ b/src/lib/components/dropdown/dropdown-root.svelte
@@ -1,6 +1,6 @@
 <script lang="ts" generics="T">
-	import { DropdownBond, DropdownBondState, type DropdownStateProps } from './bond.svelte';
 	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
+	import { DropdownBond, DropdownBondState, type DropdownStateProps } from './bond.svelte';
 
 	let {
 		open = $bindable(false),
diff --git a/src/lib/components/dropdown/dropdown-trigger.svelte b/src/lib/components/dropdown/dropdown-trigger.svelte
index 9e7def3..91c5bc0 100644
--- a/src/lib/components/dropdown/dropdown-trigger.svelte
+++ b/src/lib/components/dropdown/dropdown-trigger.svelte
@@ -1,19 +1,8 @@
-<script module lang="ts">
-	import type { PopoverTriggerProps } from '$svelte-atoms/core/components/popover/popover-trigger.svelte';
-
-	export type DropdownTriggerProps<
-		T extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = PopoverTriggerProps<T, B> & {
-		children?: Snippet<[{ dropdown?: DropdownBond }]>;
-	};
-</script>
-
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { DropdownBond } from './bond.svelte';
 	import { Trigger } from '$svelte-atoms/core/components/popover/atoms';
 	import type { Base } from '$svelte-atoms/core/components/atom';
+	import { DropdownBond } from './bond.svelte';
+	import type { DropdownTriggerProps } from './types';
 
 	const bond = DropdownBond.get();
 
diff --git a/src/lib/components/dropdown/dropdown-value.svelte b/src/lib/components/dropdown/dropdown-value.svelte
index 511d6f0..3804a95 100644
--- a/src/lib/components/dropdown/dropdown-value.svelte
+++ b/src/lib/components/dropdown/dropdown-value.svelte
@@ -1,8 +1,8 @@
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { DropdownBond } from './bond.svelte';
 	import { Icon } from '$svelte-atoms/core/components/icon';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import CloseIcon from '$svelte-atoms/core/icons/icon-close.svelte';
+	import { DropdownBond } from './bond.svelte';
 
 	const bond = DropdownBond.get();
 
diff --git a/src/lib/components/dropdown/index.ts b/src/lib/components/dropdown/index.ts
index c9c7f67..b64f8cb 100644
--- a/src/lib/components/dropdown/index.ts
+++ b/src/lib/components/dropdown/index.ts
@@ -8,3 +8,5 @@ export {
 } from './bond.svelte';
 
 export { filter } from './runes.svelte';
+
+export * from './types';
diff --git a/src/lib/components/dropdown/types.ts b/src/lib/components/dropdown/types.ts
new file mode 100644
index 0000000..99ed6f5
--- /dev/null
+++ b/src/lib/components/dropdown/types.ts
@@ -0,0 +1,48 @@
+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 { DropdownBond } from './bond.svelte';
+import type { PopoverTriggerProps } from '$svelte-atoms/core/components/popover';
+
+/**
+ * Extend this interface to add custom dropdown properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DropdownExtendProps {}
+
+/**
+ * Extend this interface to add custom dropdown trigger properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface DropdownTriggerExtendProps {}
+
+export interface DropdownRootProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	T = any
+> extends Omit<HtmlAtomProps<E, B>, 'children'>,
+		DropdownExtendProps {
+	open?: boolean;
+	value?: T;
+	values?: T[];
+	multiple?: boolean;
+	disabled?: boolean;
+	placements?: string[];
+	placement?: string;
+	offset?: number;
+	keys?: string[];
+	factory?: Factory<DropdownBond>;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	children?: Snippet<[{ dropdown: DropdownBond<any> }]>;
+	onquerychange?: (query: string) => void;
+}
+
+export interface DropdownTriggerProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<
+			PopoverTriggerProps<E, B>,
+			{ children?: Snippet<[{ dropdown?: DropdownBond }]> }
+		>,
+		DropdownTriggerExtendProps {}
diff --git a/src/lib/components/element/types.ts b/src/lib/components/element/types.ts
index 8839316..525beb2 100644
--- a/src/lib/components/element/types.ts
+++ b/src/lib/components/element/types.ts
@@ -3,7 +3,7 @@ import type { HTMLAttributes, SVGAttributes } from 'svelte/elements';
 import type { TransitionConfig } from 'svelte/transition';
 import type { ClassValue } from '$svelte-atoms/core/utils';
 
-export type ElementProps<T extends ElementTagName> = Record<string, unknown> & {
+export interface ElementProps<T extends ElementTagName> extends Record<string, unknown> {
 	class?: ClassValue | ClassValue[];
 	as?: T | (string & {});
 	global?: boolean;
@@ -16,15 +16,18 @@ export type ElementProps<T extends ElementTagName> = Record<string, unknown> & {
 	children?: Snippet;
 
 	[key: string]: unknown;
-};
+}
 
 export type HtmlElementTagName = keyof HTMLElementTagNameMap;
 export type SvgElementTagName = keyof SVGElementTagNameMap;
 export type MathMLElementTagName = keyof MathMLElementTagNameMap;
 
-export type HtmlElementProps<T extends HtmlElementTagName = 'div'> = ElementProps<T>;
-export type SvgElementProps<T extends SvgElementTagName = 'g'> = ElementProps<T>;
-export type MathMLElementProps<T extends MathMLElementTagName> = ElementProps<T>;
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface HtmlElementProps<T extends HtmlElementTagName = 'div'> extends ElementProps<T> {}
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface SvgElementProps<T extends SvgElementTagName = 'g'> extends ElementProps<T> {}
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface MathMLElementProps<T extends MathMLElementTagName> extends ElementProps<T> {}
 
 export type ElementTagName = HtmlElementTagName | SvgElementTagName | MathMLElementTagName;
 
@@ -46,8 +49,11 @@ export type ElementAttributes<T extends ElementTagName> = T extends HtmlElementT
 		? SVGAttributes<ElementType<T>>
 		: never;
 
-export type TransitionFunction<T extends ElementTagName> = (
-	node: ElementType<T>
-) => Partial<TransitionConfig>;
+export interface TransitionFunction<T extends ElementTagName> {
+	(node: ElementType<T>): Partial<TransitionConfig>;
+}
 
-export type NodeFunction<T extends ElementTagName> = (node: ElementType<T>, ...args: any[]) => any;
+export interface NodeFunction<T extends ElementTagName> {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	(node: ElementType<T>, ...args: any[]): any;
+}
diff --git a/src/lib/components/form/field/field-control.svelte b/src/lib/components/form/field/field-control.svelte
index e8ef4b6..6128e75 100644
--- a/src/lib/components/form/field/field-control.svelte
+++ b/src/lib/components/form/field/field-control.svelte
@@ -1,23 +1,7 @@
-<script module lang="ts">
-	export type FieldInputProps<B extends Base<{ value?: unknown }>> = Override<
-		HtmlAtomProps<any, B>,
-		{
-			value?: any;
-			valueAsDate?: Date;
-			valueAsNumber?: number;
-			checked?: boolean;
-			files?: File[] | null;
-			oninput?: (ev: CustomEvent, detail?: { value: any }) => void;
-			children?: Snippet;
-		}
-	>;
-</script>
-
 <script lang="ts" generics="B extends Base<{value: unknown}>">
-	import type { Snippet } from 'svelte';
-	import type { Override } from '$svelte-atoms/core/types';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { FieldBond } from './bond.svelte';
+	import type { FieldControlProps } from '../types';
 
 	const bond = FieldBond.get();
 	const name = $derived(bond?.state?.props?.name);
@@ -32,8 +16,7 @@
 		children = undefined,
 		oninput = undefined,
 		...restProps
-	}: FieldInputProps<B> = $props();
-
+	}: FieldControlProps<B> = $props();
 	const controlProps = $derived({ ...bond.control(), ...restProps });
 
 	function handleInput(ev: CustomEvent, detail: any) {
diff --git a/src/lib/components/form/field/field-label.svelte b/src/lib/components/form/field/field-label.svelte
index 6b05a96..70f3e3d 100644
--- a/src/lib/components/form/field/field-label.svelte
+++ b/src/lib/components/form/field/field-label.svelte
@@ -1,15 +1,8 @@
-<script module lang="ts">
-	export type FieldLabelProps<
-		E extends keyof HTMLElementTagNameMap = 'label',
-		B extends Base = Base
-	> = Omit<LabelProps<E, B>, 'for'>;
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base">
 	import { Label } from '$svelte-atoms/core/components/label';
-	import type { LabelProps } from '$svelte-atoms/core/components/label/label.svelte';
 	import type { Base } from '$svelte-atoms/core/components/atom';
 	import { FieldBond } from './bond.svelte';
+	import type { FieldLabelProps } from '../types';
 
 	const bond = FieldBond.get();
 
diff --git a/src/lib/components/form/field/field-root.svelte b/src/lib/components/form/field/field-root.svelte
index 51d9951..1ab189d 100644
--- a/src/lib/components/form/field/field-root.svelte
+++ b/src/lib/components/form/field/field-root.svelte
@@ -1,39 +1,10 @@
-<script module lang="ts">
-	import type { Factory } from '$svelte-atoms/core/types';
-
-	export type FieldRootProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			disabled: boolean;
-			readonly: boolean;
-			name?: string;
-			value?: any;
-			schema?: Schema;
-			parse: (schema: Schema) => void;
-			extend: any;
-			factory?: Factory<FieldBond>;
-			children?: Snippet<[{ field?: FieldBond }]>;
-		}
-	>;
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { onDestroy, type Snippet } from 'svelte';
+	import { onDestroy } from 'svelte';
+	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { FieldBond, FieldBondState, type FieldStateProps } from './bond.svelte';
+	import type { FieldRootProps } from '../types';
 	import { FormBond } from '../bond.svelte';
-	import type { Override } from '$svelte-atoms/core/types';
-	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
-	import {
-		HtmlAtom,
-		type ElementType,
-		type HtmlAtomProps,
-		type Base
-	} from '$svelte-atoms/core/components/atom';
-
-	type Element = ElementType<E>;
 
 	const formBond = FormBond.get();
 
@@ -46,7 +17,7 @@
 		factory = _factory,
 		children = undefined,
 		...restProps
-	}: FieldRootProps<E, B, Extension, Schema> = $props();
+	}: FieldRootProps<E, B> = $props();
 
 	const bondProps = defineState<FieldStateProps>([
 		defineProperty(
diff --git a/src/lib/components/form/index.ts b/src/lib/components/form/index.ts
index 1981c89..be40245 100644
--- a/src/lib/components/form/index.ts
+++ b/src/lib/components/form/index.ts
@@ -1,3 +1,4 @@
+export * from './types';
 export { Root as Form } from './atoms';
 export { Field } from './field';
 
diff --git a/src/lib/components/form/types.ts b/src/lib/components/form/types.ts
new file mode 100644
index 0000000..634b983
--- /dev/null
+++ b/src/lib/components/form/types.ts
@@ -0,0 +1,96 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+import type { Override, Factory } from '$svelte-atoms/core/types';
+import type { FormBond } from './bond.svelte';
+import type { FieldBond } from './field/bond.svelte';
+import type { LabelProps } from '$svelte-atoms/core/components/label';
+import type { Schema } from './validation-adapters';
+
+/**
+ * Extend this interface to add custom form root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface FormRootExtendProps {}
+
+/**
+ * Extend this interface to add custom field root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface FieldRootExtendProps {}
+
+/**
+ * Extend this interface to add custom field label properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface FieldLabelExtendProps {}
+
+/**
+ * Extend this interface to add custom field control properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface FieldControlExtendProps {}
+
+interface CommonProps extends FormRootExtendProps {
+	factory?: Factory<FormBond>;
+}
+
+interface RenderlessProps {
+	renderless?: true;
+	children?: Snippet<[{ form: FormBond }]>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface RenderfullProps<B extends Base = Base>
+	extends Override<
+		HtmlAtomProps<'form', B>,
+		{
+			renderless?: false;
+			children?: Snippet<[{ form: FormBond }]>;
+		}
+	> {}
+
+export type FormRootProps<B extends Base = Base> = CommonProps &
+	(RenderlessProps | RenderfullProps<B>);
+
+export type FieldRootProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> = Override<
+	HtmlAtomProps<E, B>,
+	{
+		disabled: boolean;
+		readonly: boolean;
+		name?: string;
+		value?: any;
+		schema?: Schema;
+		parse: (schema: Schema) => void;
+		extend: any;
+		factory?: Factory<FieldBond>;
+		children?: Snippet<[{ field?: FieldBond }]>;
+	}
+> &
+	FieldRootExtendProps;
+
+export type FieldLabelProps<
+	E extends keyof HTMLElementTagNameMap = 'label',
+	B extends Base = Base
+> = Omit<LabelProps<E, B>, 'for'> & FieldLabelExtendProps;
+
+export type FieldControlProps<B extends Base<{ value?: unknown }>> = Override<
+	HtmlAtomProps<any, B>,
+	{
+		value?: any;
+		valueAsDate?: Date;
+		valueAsNumber?: number;
+		checked?: boolean;
+		files?: File[] | null;
+		oninput?: (ev: CustomEvent, detail?: { value: any }) => void;
+		children?: Snippet;
+	}
+> &
+	FieldControlExtendProps;
+
+/**
+ * @deprecated Use FormRootExtendProps instead
+ */
+export type FormExtendProps = FormRootExtendProps;
diff --git a/src/lib/components/icon/icon.svelte b/src/lib/components/icon/icon.svelte
index cbfe374..e6becba 100644
--- a/src/lib/components/icon/icon.svelte
+++ b/src/lib/components/icon/icon.svelte
@@ -1,23 +1,12 @@
-<script module lang="ts">
-	export type IconProps<
-		Src extends Component = Component,
-		E extends HtmlElementTagName = 'div',
-		B extends Base = Base
-	> = {
-		class?: string;
-		src?: Src;
-		children?: Snippet;
-	} & HtmlAtomProps<E, B>;
-</script>
-
 <script
 	lang="ts"
 	generics="Src extends Component = Component, E extends HtmlElementTagName = 'div', B extends Base = Base"
 >
-	import type { Component, Snippet } from 'svelte';
+	import type { Component } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import type { HtmlElementTagName, HtmlElementType } from '$svelte-atoms/core/components/element';
+	import type { IconProps } from './types';
 
 	type Element = HtmlElementType<'div'>;
 
diff --git a/src/lib/components/icon/types.ts b/src/lib/components/icon/types.ts
index 678c546..795e859 100644
--- a/src/lib/components/icon/types.ts
+++ b/src/lib/components/icon/types.ts
@@ -1,8 +1,18 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { Component, Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
 
-export type IconProps = HTMLAttributes<HTMLDivElement> & {
-	class?: string;
-	element?: HTMLElement;
-	children?: Snippet<[]>;
-};
+/**
+ * Extend this interface to add custom icon properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface IconExtendProps {}
+
+export interface IconProps<
+	Src extends Component = Component,
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		IconExtendProps {
+	src?: Src;
+	children?: Snippet;
+}
diff --git a/src/lib/components/input/index.ts b/src/lib/components/input/index.ts
index 78b9524..62f7a3b 100644
--- a/src/lib/components/input/index.ts
+++ b/src/lib/components/input/index.ts
@@ -1,2 +1,3 @@
 export * as Input from './atoms';
 export * from './bond.svelte';
+export * from './types';
diff --git a/src/lib/components/input/input-control.svelte b/src/lib/components/input/input-control.svelte
index fab7dfc..d5dded0 100644
--- a/src/lib/components/input/input-control.svelte
+++ b/src/lib/components/input/input-control.svelte
@@ -1,7 +1,3 @@
-<script module lang="ts">
-	export type InputPortals = 'input.l0' | 'input.l1' | 'input.l2' | 'input.l3';
-</script>
-
 <script lang="ts" generics="B extends Base = Base">
 	import { on } from '$svelte-atoms/core/attachments/event.svelte';
 	import { getPreset } from '$svelte-atoms/core/context';
diff --git a/src/lib/components/input/types.ts b/src/lib/components/input/types.ts
index 6a3a8ac..be558b5 100644
--- a/src/lib/components/input/types.ts
+++ b/src/lib/components/input/types.ts
@@ -1,21 +1,33 @@
-import type { HTMLAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
-import type { Base, ElementType, HtmlAtomProps } from '../atom';
-import type { ClassValue } from '$svelte-atoms/core/utils';
+import type { HTMLInputTypeAttribute } from 'svelte/elements';
+import type { Base, HtmlAtomProps } from '../atom';
 import type { Snippet } from 'svelte';
 import type { Override } from '$svelte-atoms/core/types';
 
-export type InputRootProps<
+/**
+ * Extend this interface to add custom input root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface InputRootExtendProps {}
+
+/**
+ * Extend this interface to add custom input control properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface InputControlExtendProps {}
+
+export interface InputRootProps<
 	E extends keyof HTMLElementTagNameMap = 'div',
 	B extends Base = Base
-> = HtmlAtomProps<E, B> &
-	HTMLAttributes<ElementType<E>> & {
-		value?: string | number | string[] | null;
-		checked?: boolean;
-		files?: File[] | null;
-		children?: Snippet<[]>;
-	};
+> extends HtmlAtomProps<E, B>,
+		InputRootExtendProps {
+	value?: string | number | string[] | null;
+	checked?: boolean;
+	files?: File[] | null;
+	children?: Snippet<[]>;
+}
 
-type InputControlBaseProps = {
+interface InputControlBaseProps {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	value?: any;
 	files?: File[];
 	date?: Date | null;
@@ -24,7 +36,8 @@ type InputControlBaseProps = {
 	class?: string;
 	type?: HTMLInputTypeAttribute | null;
 	children?: Snippet<[]>;
-};
+}
 
-export type InputControlProps<B extends Base = Base> = HtmlAtomProps<'input', B> &
-	Override<HTMLAttributes<HTMLInputElement>, InputControlBaseProps>;
+export interface InputControlProps<B extends Base = Base>
+	extends Override<HtmlAtomProps<'input', B>, InputControlBaseProps>,
+		InputControlExtendProps {}
diff --git a/src/lib/components/label/index.ts b/src/lib/components/label/index.ts
index 9000a03..13edaaa 100644
--- a/src/lib/components/label/index.ts
+++ b/src/lib/components/label/index.ts
@@ -1 +1,2 @@
 export { default as Label } from './label.svelte';
+export * from './types';
diff --git a/src/lib/components/label/label.svelte b/src/lib/components/label/label.svelte
index 1f3d1ac..6170bec 100644
--- a/src/lib/components/label/label.svelte
+++ b/src/lib/components/label/label.svelte
@@ -1,23 +1,7 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-
-	export type LabelProps<
-		E extends keyof HTMLElementTagNameMap = 'label',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		for?: string | null;
-		children?: Snippet<[]>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base">
-	import {
-		HtmlAtom,
-		type ElementType,
-		type HtmlAtomProps,
-		type Base
-	} from '$svelte-atoms/core/components/atom';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type ElementType, type Base } from '$svelte-atoms/core/components/atom';
+	import type { LabelProps } from './types';
 
 	type Element = ElementType<E>;
 
diff --git a/src/lib/components/label/types.ts b/src/lib/components/label/types.ts
new file mode 100644
index 0000000..d0c7dd1
--- /dev/null
+++ b/src/lib/components/label/types.ts
@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+
+/**
+ * Extend this interface to add custom label properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface LabelExtendProps {}
+
+export interface LabelProps<E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base>
+	extends HtmlAtomProps<E, B>,
+		LabelExtendProps {
+	for?: string | null;
+	children?: Snippet<[]>;
+}
diff --git a/src/lib/components/layer/types.ts b/src/lib/components/layer/types.ts
new file mode 100644
index 0000000..6ab28ba
--- /dev/null
+++ b/src/lib/components/layer/types.ts
@@ -0,0 +1,17 @@
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+import type { Factory } from '$svelte-atoms/core/types';
+import type { LayerBond } from './bond.svelte';
+
+/**
+ * Extend this interface to add custom layer properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface LayerExtendProps {}
+
+export interface LayerRootProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		LayerExtendProps {
+	factory?: Factory<LayerBond>;
+}
diff --git a/src/lib/components/link/types.ts b/src/lib/components/link/types.ts
new file mode 100644
index 0000000..c8abee4
--- /dev/null
+++ b/src/lib/components/link/types.ts
@@ -0,0 +1,11 @@
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+
+/**
+ * Extend this interface to add custom link properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface LinkExtendProps {}
+
+export interface LinkProps<E extends keyof HTMLElementTagNameMap = 'a', B extends Base = Base>
+	extends HtmlAtomProps<E, B>,
+		LinkExtendProps {}
diff --git a/src/lib/components/list/types.ts b/src/lib/components/list/types.ts
new file mode 100644
index 0000000..4f66a39
--- /dev/null
+++ b/src/lib/components/list/types.ts
@@ -0,0 +1,11 @@
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+
+/**
+ * Extend this interface to add custom list properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ListExtendProps {}
+
+export interface ListRootProps<E extends keyof HTMLElementTagNameMap = 'ul', B extends Base = Base>
+	extends HtmlAtomProps<E, B>,
+		ListExtendProps {}
diff --git a/src/lib/components/menu/index.ts b/src/lib/components/menu/index.ts
index b64129b..825865c 100644
--- a/src/lib/components/menu/index.ts
+++ b/src/lib/components/menu/index.ts
@@ -1,4 +1,5 @@
 export * as Menu from './atoms';
+export * from './types';
 export {
 	PopoverBond,
 	type PopoverDomElements,
diff --git a/src/lib/components/menu/types.ts b/src/lib/components/menu/types.ts
new file mode 100644
index 0000000..ddd98bf
--- /dev/null
+++ b/src/lib/components/menu/types.ts
@@ -0,0 +1,23 @@
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+
+/**
+ * Extend this interface to add custom menu item properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface MenuItemExtendProps {}
+
+/**
+ * Extend this interface to add custom menu list properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface MenuListExtendProps {}
+
+export interface MenuItemProps<
+	E extends keyof HTMLElementTagNameMap = 'button',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		MenuItemExtendProps {}
+
+export interface MenuListProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>
+	extends HtmlAtomProps<E, B>,
+		MenuListExtendProps {}
diff --git a/src/lib/components/popover/index.ts b/src/lib/components/popover/index.ts
index e6729ff..d64fc60 100644
--- a/src/lib/components/popover/index.ts
+++ b/src/lib/components/popover/index.ts
@@ -8,3 +8,4 @@ export {
 	type PopoverStateProps,
 	type TriggerParams
 } from './bond.svelte';
+export * from './types';
diff --git a/src/lib/components/popover/popover-arrow.svelte b/src/lib/components/popover/popover-arrow.svelte
index 8be60fd..e065883 100644
--- a/src/lib/components/popover/popover-arrow.svelte
+++ b/src/lib/components/popover/popover-arrow.svelte
@@ -1,7 +1,7 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { animate as motion } from 'motion';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { PopoverBond } from './bond.svelte';
 	import type { PopoverArrowProps } from './types';
 
diff --git a/src/lib/components/popover/popover-content.svelte b/src/lib/components/popover/popover-content.svelte
index 3b5b7c2..9a1cb78 100644
--- a/src/lib/components/popover/popover-content.svelte
+++ b/src/lib/components/popover/popover-content.svelte
@@ -3,8 +3,8 @@
 	import { PortalBond, PortalsBond, Teleport } from '$svelte-atoms/core/components/portal';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import type { HtmlElementTagName, HtmlElementType } from '$svelte-atoms/core/components/element';
-	import { PopoverBond } from './bond.svelte';
 	import { DURATION } from '$svelte-atoms/core/shared';
+	import { PopoverBond } from './bond.svelte';
 	import type { AnimateParams, PopoverContentProps } from './types';
 
 	type Element = HtmlElementType<E>;
diff --git a/src/lib/components/popover/types.ts b/src/lib/components/popover/types.ts
index 723c879..9212d2b 100644
--- a/src/lib/components/popover/types.ts
+++ b/src/lib/components/popover/types.ts
@@ -1,13 +1,37 @@
 import type { Snippet } from 'svelte';
 import type { Placement } from '@floating-ui/dom';
 import type { Factory } from '$svelte-atoms/core/types';
-import type { PopoverBond } from './bond.svelte';
 import type { Override } from '$svelte-atoms/core/types';
+import type { PopoverBond } from './bond.svelte';
 import type { Base, HtmlAtomProps } from '../atom';
 import type { HtmlElementTagName } from '../element';
 import type { PortalBond } from '../portal';
 
-export type PopoverRootProps = {
+/**
+ * Extend this interface to add custom popover root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface PopoverRootExtendProps {}
+
+/**
+ * Extend this interface to add custom popover content properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface PopoverContentExtendProps {}
+
+/**
+ * Extend this interface to add custom popover arrow properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface PopoverArrowExtendProps {}
+
+/**
+ * Extend this interface to add custom popover trigger properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface PopoverTriggerExtendProps {}
+
+export interface PopoverRootProps extends PopoverRootExtendProps {
 	open?: boolean;
 	disabled?: boolean;
 	placements?: Placement[];
@@ -17,31 +41,33 @@ export type PopoverRootProps = {
 	extend?: Record<string, unknown>;
 	factory?: Factory<PopoverBond>;
 	children?: Snippet<[{ popover: PopoverBond }]>;
-};
+}
 
-export type AnimateParams = {
+export interface AnimateParams {
 	x: number;
 	y: number;
 	xOffset: number;
 	yOffset: number;
 	open: boolean;
-};
+}
 
-export type PopoverContentProps<T extends HtmlElementTagName, B extends Base = Base> = Override<
-	HtmlAtomProps<T, B>,
-	{
-		children?: Snippet<[{ popover?: PopoverBond }]>;
-	}
->;
+export interface PopoverContentProps<T extends HtmlElementTagName, B extends Base = Base>
+	extends Override<
+			HtmlAtomProps<T, B>,
+			{
+				children?: Snippet<[{ popover?: PopoverBond }]>;
+			}
+		>,
+		PopoverContentExtendProps {}
 
-export type PopoverArrowProps<
+export interface PopoverArrowProps<
 	E extends keyof HTMLElementTagNameMap = 'div',
 	B extends Base = Base
-> = HtmlAtomProps<E, B>;
+> extends HtmlAtomProps<E, B>,
+		PopoverArrowExtendProps {}
 
-export type PopoverTriggerProps<
-	T extends keyof HTMLElementTagNameMap,
-	B extends Base = Base
-> = HtmlAtomProps<T, B> & {
+export interface PopoverTriggerProps<T extends keyof HTMLElementTagNameMap, B extends Base = Base>
+	extends Omit<HtmlAtomProps<T, B>, 'children'>,
+		PopoverTriggerExtendProps {
 	children?: Snippet<[{ popover?: PopoverBond }]>;
-};
+}
diff --git a/src/lib/components/portal/index.ts b/src/lib/components/portal/index.ts
index 5d56b1a..d78d59c 100644
--- a/src/lib/components/portal/index.ts
+++ b/src/lib/components/portal/index.ts
@@ -1,3 +1,4 @@
+export * from './types';
 export * as Portal from './atoms';
 export { PortalBond, PortalState, type PortalStateProps } from './bond.svelte';
 export { portal } from './attachements.svelte';
diff --git a/src/lib/components/portal/portal-root.svelte b/src/lib/components/portal/portal-root.svelte
index 2891473..c618ceb 100644
--- a/src/lib/components/portal/portal-root.svelte
+++ b/src/lib/components/portal/portal-root.svelte
@@ -1,16 +1,11 @@
 <script module lang="ts">
-	export type PortalOuterProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		id: RootPortals | (string & {});
-		children?: Snippet;
-	};
+	export type { PortalOuterProps } from './types';
 </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 type { PortalOuterProps } from './types';
 	import { PortalsBond, PortalBond, PortalState, type PortalStateProps } from '.';
 	import { RootBond } from '$svelte-atoms/core/components/root';
 	import type { RootPortals } from '$svelte-atoms/core/components/root/root.svelte';
diff --git a/src/lib/components/portal/teleport.svelte b/src/lib/components/portal/teleport.svelte
index 51ccd49..51bd638 100644
--- a/src/lib/components/portal/teleport.svelte
+++ b/src/lib/components/portal/teleport.svelte
@@ -1,17 +1,12 @@
 <script module lang="ts">
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
-	import type { HtmlElementTagName, HtmlElementType } from '$svelte-atoms/core/components/element';
-
-	export type TeleportProps<
-		E extends HtmlElementTagName = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		portal?: string | PortalBond;
-	};
+	export type { TeleportProps } from './types';
 </script>
 
 <script lang="ts" generics="E extends HtmlElementTagName = 'div', B extends Base = Base">
 	import type { HTMLAttributes } from 'svelte/elements';
+	import type { TeleportProps } from './types';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import type { HtmlElementTagName, HtmlElementType } from '$svelte-atoms/core/components/element';
 	import { PortalsBond } from './portals';
 	import { RootBond } from '$svelte-atoms/core/components/root/bond.svelte';
 	import { port } from './utils';
diff --git a/src/lib/components/portal/types.ts b/src/lib/components/portal/types.ts
new file mode 100644
index 0000000..8e63f3d
--- /dev/null
+++ b/src/lib/components/portal/types.ts
@@ -0,0 +1,56 @@
+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 { PortalBond } from './bond.svelte';
+import type { RootPortals } from '$svelte-atoms/core/components/root/root.svelte';
+import type { HtmlElementTagName } from '$svelte-atoms/core/components/element';
+
+/**
+ * Extend this interface to add custom portal root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface PortalRootExtendProps {}
+
+/**
+ * Extend this interface to add custom portal outer properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface PortalOuterExtendProps {}
+
+/**
+ * Extend this interface to add custom teleport properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface TeleportExtendProps {}
+
+export type PortalRootProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> = Omit<HtmlAtomProps<E, B>, 'children'> &
+	PortalRootExtendProps & {
+		name?: string;
+		factory?: Factory<PortalBond>;
+		children?: Snippet<[{ portal: PortalBond }]>;
+	};
+
+export type PortalOuterProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> = HtmlAtomProps<E, B> &
+	PortalOuterExtendProps & {
+		id: RootPortals | (string & {});
+		children?: Snippet;
+	};
+
+export type TeleportProps<
+	E extends HtmlElementTagName = 'div',
+	B extends Base = Base
+> = HtmlAtomProps<E, B> &
+	TeleportExtendProps & {
+		portal?: string | PortalBond;
+	};
+
+/**
+ * @deprecated Use PortalRootExtendProps instead
+ */
+export type PortalExtendProps = PortalRootExtendProps;
diff --git a/src/lib/components/radio/radio.svelte b/src/lib/components/radio/radio.svelte
index 23dbc9a..169b68a 100644
--- a/src/lib/components/radio/radio.svelte
+++ b/src/lib/components/radio/radio.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" generics="B extends Base = Base">
+<script lang="ts">
 	import { getRadioGroupContext } from './context';
 	import { Stack } from '../stack';
 	import { toClassValue } from '$svelte-atoms/core/utils';
diff --git a/src/lib/components/root/types.ts b/src/lib/components/root/types.ts
new file mode 100644
index 0000000..a7710db
--- /dev/null
+++ b/src/lib/components/root/types.ts
@@ -0,0 +1,11 @@
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+
+/**
+ * Extend this interface to add custom root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface RootExtendProps {}
+
+export interface RootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>
+	extends HtmlAtomProps<E, B>,
+		RootExtendProps {}
diff --git a/src/lib/components/scrollable/index.ts b/src/lib/components/scrollable/index.ts
index a5e4526..2e8e6ad 100644
--- a/src/lib/components/scrollable/index.ts
+++ b/src/lib/components/scrollable/index.ts
@@ -11,3 +11,5 @@ export {
 	type ScrollableStateProps
 } from './bond.svelte';
 export { scrollable } from './attachments.svelte';
+
+export * from './types';
diff --git a/src/lib/components/scrollable/scrollable-container.svelte b/src/lib/components/scrollable/scrollable-container.svelte
index f585b2c..38f43f3 100644
--- a/src/lib/components/scrollable/scrollable-container.svelte
+++ b/src/lib/components/scrollable/scrollable-container.svelte
@@ -1,19 +1,12 @@
 <script module lang="ts">
-	export type ScrollableContainerProps<T extends keyof HTMLElementTagNameMap> = Override<
-		HtmlAtomProps<T>,
-		{
-			children?: Snippet;
-		}
-	>;
+	export type { ScrollableContainerProps } from './types';
 </script>
 
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { Snippet } from 'svelte';
+	import type { ScrollableContainerProps } from './types';
 	import { ScrollableBond } from './bond.svelte';
-	import type { Override } from '$svelte-atoms/core/types';
 	import { resizeObserver } from '$svelte-atoms/core/attachments/resize-observer.svelte';
-	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
-
+	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
 	let {
 		class: klass = '',
 		children = undefined,
diff --git a/src/lib/components/scrollable/scrollable-content.svelte b/src/lib/components/scrollable/scrollable-content.svelte
index 560b622..ca62037 100644
--- a/src/lib/components/scrollable/scrollable-content.svelte
+++ b/src/lib/components/scrollable/scrollable-content.svelte
@@ -1,17 +1,7 @@
-<script module lang="ts">
-	export type ScrollableContentProps<T extends keyof HTMLElementTagNameMap> = Override<
-		HtmlAtomProps<T>,
-		{
-			children?: Snippet;
-		}
-	>;
-</script>
-
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { Snippet } from 'svelte';
+	import type { ScrollableContentProps } from './types';
 	import { ScrollableBond } from './bond.svelte';
-	import type { Override } from '$svelte-atoms/core/types';
-	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
+	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
 
 	const bond = ScrollableBond.get();
 
diff --git a/src/lib/components/scrollable/scrollable-root.svelte b/src/lib/components/scrollable/scrollable-root.svelte
index c171bed..31fa48c 100644
--- a/src/lib/components/scrollable/scrollable-root.svelte
+++ b/src/lib/components/scrollable/scrollable-root.svelte
@@ -1,28 +1,8 @@
-<script module lang="ts">
-	export type ScrollableRootProps<T extends keyof HTMLElementTagNameMap> = Override<
-		HtmlAtomProps<T>,
-		{
-			children?: Snippet<[{ scrollable: ScrollableBond }]>;
-		}
-	> & {
-		scrollX?: number;
-		scrollY?: number;
-		scrollWidth?: number;
-		scrollHeight?: number;
-		clientWidth?: number;
-		clientHeight?: number;
-		disabled?: boolean;
-		open?: boolean;
-	};
-</script>
-
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { Snippet } from 'svelte';
-	import { ScrollableBond, ScrollableState, type ScrollableStateProps } from './bond.svelte';
-	import type { Override } from '$svelte-atoms/core/types';
 	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
-	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
-
+	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
+	import { ScrollableBond, ScrollableState, type ScrollableStateProps } from './bond.svelte';
+	import type { ScrollableRootProps } from './types';
 	let {
 		scrollX = $bindable(0),
 		scrollY = $bindable(0),
diff --git a/src/lib/components/scrollable/scrollable-thumb.svelte b/src/lib/components/scrollable/scrollable-thumb.svelte
index 423cf56..20ecea5 100644
--- a/src/lib/components/scrollable/scrollable-thumb.svelte
+++ b/src/lib/components/scrollable/scrollable-thumb.svelte
@@ -1,18 +1,7 @@
-<script module lang="ts">
-	export type ScrollableThumbProps<T extends keyof HTMLElementTagNameMap> = Override<
-		HtmlAtomProps<T>,
-		{
-			children?: Snippet;
-			orientation: 'horizontal' | 'vertical';
-		}
-	>;
-</script>
-
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { Snippet } from 'svelte';
+	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
 	import { ScrollableBond } from './bond.svelte';
-	import type { Override } from '$svelte-atoms/core/types';
-	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
+	import type { ScrollableThumbProps } from './types';
 
 	let {
 		class: klass = '',
diff --git a/src/lib/components/scrollable/scrollable-track.svelte b/src/lib/components/scrollable/scrollable-track.svelte
index 4b0399b..ffba2a6 100644
--- a/src/lib/components/scrollable/scrollable-track.svelte
+++ b/src/lib/components/scrollable/scrollable-track.svelte
@@ -1,18 +1,7 @@
-<script module lang="ts">
-	export type ScrollableTrackProps<T extends keyof HTMLElementTagNameMap> = Override<
-		HtmlAtomProps<T>,
-		{
-			children?: Snippet;
-			orientation: 'horizontal' | 'vertical';
-		}
-	>;
-</script>
-
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { Snippet } from 'svelte';
+	import type { ScrollableTrackProps } from './types';
 	import { ScrollableBond } from './bond.svelte';
-	import type { Override } from '$svelte-atoms/core/types';
-	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
+	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
 
 	let {
 		class: klass = '',
diff --git a/src/lib/components/scrollable/types.ts b/src/lib/components/scrollable/types.ts
new file mode 100644
index 0000000..95480fe
--- /dev/null
+++ b/src/lib/components/scrollable/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 { ScrollableBond } from './bond.svelte';
+
+/**
+ * Extend this interface to add custom scrollable root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ScrollableExtendProps {}
+
+/**
+ * Extend this interface to add custom scrollable container properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ScrollableContainerExtendProps {}
+
+/**
+ * Extend this interface to add custom scrollable content properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ScrollableContentExtendProps {}
+
+/**
+ * Extend this interface to add custom scrollable track properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ScrollableTrackExtendProps {}
+
+/**
+ * Extend this interface to add custom scrollable thumb properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ScrollableThumbExtendProps {}
+
+export interface ScrollableRootProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<HtmlAtomProps<E, B>, { children?: Snippet<[{ scrollable: ScrollableBond }]> }>,
+		ScrollableExtendProps {
+	factory?: Factory<ScrollableBond>;
+	scrollX?: number;
+	scrollY?: number;
+	scrollWidth?: number;
+	scrollHeight?: number;
+	clientWidth?: number;
+	clientHeight?: number;
+	disabled?: boolean;
+	open?: boolean;
+}
+
+export interface ScrollableContainerProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<HtmlAtomProps<E, B>, { children?: Snippet }>,
+		ScrollableContainerExtendProps {}
+
+export interface ScrollableContentProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<HtmlAtomProps<E, B>, { children?: Snippet }>,
+		ScrollableContentExtendProps {}
+
+export interface ScrollableTrackProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<HtmlAtomProps<E, B>, { children?: Snippet }>,
+		ScrollableTrackExtendProps {
+	orientation: 'horizontal' | 'vertical';
+}
+
+export interface ScrollableThumbProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<HtmlAtomProps<E, B>, { children?: Snippet }>,
+		ScrollableThumbExtendProps {
+	orientation: 'horizontal' | 'vertical';
+}
diff --git a/src/lib/components/sidebar/index.ts b/src/lib/components/sidebar/index.ts
index 15d5508..6c2b75a 100644
--- a/src/lib/components/sidebar/index.ts
+++ b/src/lib/components/sidebar/index.ts
@@ -1,2 +1,3 @@
 export * as Sidebar from './atoms';
 export * from './attachments.svelte';
+export * from './types';
diff --git a/src/lib/components/sidebar/types.ts b/src/lib/components/sidebar/types.ts
index 9bd8dbe..e859292 100644
--- a/src/lib/components/sidebar/types.ts
+++ b/src/lib/components/sidebar/types.ts
@@ -4,26 +4,39 @@ import type { Factory } from '$svelte-atoms/core/types';
 import type { SidebarBond } from './bond.svelte';
 import type { Base, HtmlAtomProps } from '../atom';
 
-export type SlideoverRootProps<
+/**
+ * Extend this interface to add custom slideover root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface SlideoverRootExtendProps {}
+
+/**
+ * Extend this interface to add custom slideover content properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface SlideoverContentExtendProps {}
+
+export interface SlideoverRootProps<
 	E extends keyof HTMLElementTagNameMap = 'div',
 	B extends Base = Base
-> = Override<
-	HtmlAtomProps<E, B>,
-	{
-		children?: Snippet<[{ sidebar?: SidebarBond }]>;
-	}
-> & {
+> extends Override<
+			HtmlAtomProps<E, B>,
+			{
+				children?: Snippet<[{ sidebar?: SidebarBond }]>;
+			}
+		>,
+		SlideoverRootExtendProps {
 	open?: boolean;
 	disabled?: boolean;
 	factory?: Factory<SidebarBond>;
-};
+}
 
-export type SlideoverContentProps<
-	E extends keyof HTMLElementTagNameMap,
-	B extends Base = Base
-> = Override<
-	HtmlAtomProps<E, B>,
-	{
-		children?: Snippet<[{ sidebar?: SidebarBond<any> }]>;
-	}
->;
+export interface SlideoverContentProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base>
+	extends Override<
+			HtmlAtomProps<E, B>,
+			{
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				children?: Snippet<[{ sidebar?: SidebarBond<any> }]>;
+			}
+		>,
+		SlideoverContentExtendProps {}
diff --git a/src/lib/components/stack/types.ts b/src/lib/components/stack/types.ts
new file mode 100644
index 0000000..bf5436e
--- /dev/null
+++ b/src/lib/components/stack/types.ts
@@ -0,0 +1,16 @@
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+
+/**
+ * Extend this interface to add custom stack properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface StackExtendProps {}
+
+export interface StackProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>
+	extends HtmlAtomProps<E, B>,
+		StackExtendProps {
+	direction?: 'row' | 'column';
+	gap?: number | string;
+	align?: 'start' | 'center' | 'end' | 'stretch';
+	justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+}
diff --git a/src/lib/components/tabs/index.ts b/src/lib/components/tabs/index.ts
index 94d42f8..ba0628b 100644
--- a/src/lib/components/tabs/index.ts
+++ b/src/lib/components/tabs/index.ts
@@ -1,2 +1,3 @@
+export * from './types';
 export * as Tabs from './atoms';
 export { Tab } from './tab';
diff --git a/src/lib/components/tabs/tab/tab-body.svelte b/src/lib/components/tabs/tab/tab-body.svelte
index 1b891fd..e5fc4d6 100644
--- a/src/lib/components/tabs/tab/tab-body.svelte
+++ b/src/lib/components/tabs/tab/tab-body.svelte
@@ -1,15 +1,6 @@
-<script module lang="ts">
-	export type TabBodyProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ tab?: TabBond<unknown> }]>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from '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 { TabBodyProps } from '../types';
 	import { TabBond } from './bond.svelte';
 
 	const bond = TabBond.get();
diff --git a/src/lib/components/tabs/tab/tab-description.svelte b/src/lib/components/tabs/tab/tab-description.svelte
index ac9cb6d..a97d7b4 100644
--- a/src/lib/components/tabs/tab/tab-description.svelte
+++ b/src/lib/components/tabs/tab/tab-description.svelte
@@ -1,15 +1,6 @@
-<script module lang="ts">
-	export type TabDescriptionProps<
-		E extends keyof HTMLElementTagNameMap = 'p',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ tab?: TabBond<unknown> }]>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import type { TabDescriptionProps } from '../types';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { TabBond } from './bond.svelte';
 
 	const bond = TabBond.get();
diff --git a/src/lib/components/tabs/tab/tab-header.svelte b/src/lib/components/tabs/tab/tab-header.svelte
index 01cb0dd..bbd1097 100644
--- a/src/lib/components/tabs/tab/tab-header.svelte
+++ b/src/lib/components/tabs/tab/tab-header.svelte
@@ -1,20 +1,10 @@
-<script module lang="ts">
-	export type TabHeaderProps<
-		E extends keyof HTMLElementTagNameMap = 'button',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ tab?: TabBond<unknown> }]>;
-		onpointerdown?: (ev: PointerEvent, context: { tab?: TabBond<unknown> }) => void;
-	};
-</script>
-
 <script
 	lang="ts"
 	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
 >
-	import type { Snippet } from 'svelte';
+	import type { TabHeaderProps } from '../types';
 	import { TabBond } 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';
 
 	const bond = TabBond.get();
 
diff --git a/src/lib/components/tabs/tab/tab-root.svelte b/src/lib/components/tabs/tab/tab-root.svelte
index 18ec135..5c26086 100644
--- a/src/lib/components/tabs/tab/tab-root.svelte
+++ b/src/lib/components/tabs/tab/tab-root.svelte
@@ -4,8 +4,8 @@
 >
 	import { nanoid } from 'nanoid';
 	import { animate as motion } from 'motion';
-	import { TabBond, TabBondState, type TabBondProps } from './bond.svelte';
 	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
+	import { TabBond, TabBondState, type TabBondProps } from './bond.svelte';
 	import { TabsBond } from '../bond.svelte';
 	import { type Base } from '$svelte-atoms/core/components/atom';
 	import { Stack } from '$svelte-atoms/core/components/stack';
diff --git a/src/lib/components/tabs/types.ts b/src/lib/components/tabs/types.ts
new file mode 100644
index 0000000..c2bcd6b
--- /dev/null
+++ b/src/lib/components/tabs/types.ts
@@ -0,0 +1,71 @@
+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 { TabsBond } from './bond.svelte';
+import type { TabBond } from './tab/bond.svelte';
+
+/**
+ * Extend this interface to add custom tabs root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface TabsRootExtendProps {}
+
+/**
+ * Extend this interface to add custom tab header properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface TabHeaderExtendProps {}
+
+/**
+ * Extend this interface to add custom tab body properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface TabBodyExtendProps {}
+
+/**
+ * Extend this interface to add custom tab description properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface TabDescriptionExtendProps {}
+
+export type TabsRootProps<
+	D extends string = string,
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> = Omit<HtmlAtomProps<E, B>, 'children'> &
+	TabsRootExtendProps & {
+		value?: D;
+		factory?: Factory<TabsBond>;
+		children?: Snippet<[{ tabs: TabsBond }]>;
+		onchange?: (value: D) => void;
+	};
+
+export type TabHeaderProps<
+	E extends keyof HTMLElementTagNameMap = 'button',
+	B extends Base = Base
+> = HtmlAtomProps<E, B> &
+	TabHeaderExtendProps & {
+		children?: Snippet<[{ tab?: TabBond<unknown> }]>;
+		onpointerdown?: (ev: PointerEvent, context: { tab?: TabBond<unknown> }) => void;
+	};
+
+export type TabBodyProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> = HtmlAtomProps<E, B> &
+	TabBodyExtendProps & {
+		children?: Snippet<[{ tab?: TabBond<unknown> }]>;
+	};
+
+export type TabDescriptionProps<
+	E extends keyof HTMLElementTagNameMap = 'p',
+	B extends Base = Base
+> = HtmlAtomProps<E, B> &
+	TabDescriptionExtendProps & {
+		children?: Snippet<[{ tab?: TabBond<unknown> }]>;
+	};
+
+/**
+ * @deprecated Use TabsRootExtendProps instead
+ */
+export type TabsExtendProps = TabsRootExtendProps;
diff --git a/src/lib/components/textarea/index.ts b/src/lib/components/textarea/index.ts
index 5ec0ad5..23d6831 100644
--- a/src/lib/components/textarea/index.ts
+++ b/src/lib/components/textarea/index.ts
@@ -1 +1,2 @@
 export * as Textarea from './atoms';
+export * from './types';
diff --git a/src/lib/components/textarea/types.ts b/src/lib/components/textarea/types.ts
new file mode 100644
index 0000000..a4b1861
--- /dev/null
+++ b/src/lib/components/textarea/types.ts
@@ -0,0 +1,35 @@
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+
+/**
+ * Extend this interface to add custom textarea root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface TextareaRootExtendProps {}
+
+/**
+ * Extend this interface to add custom textarea input properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface TextareaInputExtendProps {}
+
+export interface TextareaRootProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends HtmlAtomProps<E, B>,
+		TextareaRootExtendProps {}
+
+export interface TextareaInputProps extends TextareaInputExtendProps {
+	value?: string;
+	placeholder?: string;
+	disabled?: boolean;
+	readonly?: boolean;
+	rows?: number;
+	cols?: number;
+	maxlength?: number;
+	minlength?: number;
+	required?: boolean;
+	autofocus?: boolean;
+	autocomplete?: string;
+	spellcheck?: boolean;
+	wrap?: 'soft' | 'hard' | 'off';
+}
diff --git a/src/lib/components/toast/index.ts b/src/lib/components/toast/index.ts
index 6e0531c..ad4cb71 100644
--- a/src/lib/components/toast/index.ts
+++ b/src/lib/components/toast/index.ts
@@ -1 +1,2 @@
 export * as Toast from './atoms';
+export * from './types';
diff --git a/src/lib/components/toast/toast-description.svelte b/src/lib/components/toast/toast-description.svelte
index 0cedb88..99beb14 100644
--- a/src/lib/components/toast/toast-description.svelte
+++ b/src/lib/components/toast/toast-description.svelte
@@ -1,15 +1,9 @@
-<script module lang="ts">
-	export type ToastDescriptionProps<T extends keyof HTMLElementTagNameMap> = HtmlAtomProps<T> & {
-		as?: T;
-		children?: Snippet<[{ toast?: ToastBond }]>;
-	};
-</script>
-
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
+	import type { ToastDescriptionProps } from './types';
 	import { ToastBond } from './bond';
-	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
+	export type { ToastDescriptionProps } from './types';
 
 	const bond = ToastBond.get();
 
diff --git a/src/lib/components/toast/toast-root.svelte b/src/lib/components/toast/toast-root.svelte
index 7a4b5b5..38ced5c 100644
--- a/src/lib/components/toast/toast-root.svelte
+++ b/src/lib/components/toast/toast-root.svelte
@@ -1,22 +1,9 @@
-<script module lang="ts">
-	import type { Factory } from '$svelte-atoms/core/types';
-
-	export type ToastRootProps<T extends keyof HTMLElementTagNameMap> = HtmlAtomProps<T> & {
-		as?: T;
-		open?: boolean;
-		disabled?: boolean;
-		extend?: Record<string, unknown>;
-		factory?: Factory<ToastBond>;
-		children?: Snippet<[{ toast?: ToastBond }]>;
-	};
-</script>
-
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { ToastBond, ToastBondState, type ToastBondProps } from './bond';
-	import { toClassValue, defineProperty, defineState } from '$svelte-atoms/core/utils';
-	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
+	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
+	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
+	import type { ToastRootProps } from './types';
 
 	let {
 		open = $bindable(false),
diff --git a/src/lib/components/toast/toast-title.svelte b/src/lib/components/toast/toast-title.svelte
index 4caa6ec..d6ed232 100644
--- a/src/lib/components/toast/toast-title.svelte
+++ b/src/lib/components/toast/toast-title.svelte
@@ -1,16 +1,8 @@
-<script module lang="ts">
-	export type ToastTitleProps<T extends keyof HTMLElementTagNameMap> = HtmlAtomProps<T> & {
-		as?: T;
-		class?: string;
-		children?: Snippet<[{ toast: ToastBond }]>;
-	};
-</script>
-
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
 	import { ToastBond } from './bond';
-	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
+	import type { ToastTitleProps } from './types';
 
 	const bond = ToastBond.get();
 
diff --git a/src/lib/components/toast/types.ts b/src/lib/components/toast/types.ts
new file mode 100644
index 0000000..bef10fd
--- /dev/null
+++ b/src/lib/components/toast/types.ts
@@ -0,0 +1,44 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+import type { Override } from '$svelte-atoms/core/types';
+import type { ToastBond } from './bond';
+
+/**
+ * Extend this interface to add custom toast root properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ToastRootExtendProps {}
+
+/**
+ * Extend this interface to add custom toast title properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ToastTitleExtendProps {}
+
+/**
+ * Extend this interface to add custom toast description properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ToastDescriptionExtendProps {}
+
+export interface ToastRootProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<HtmlAtomProps<E, B>, { children?: Snippet<[{ toast?: ToastBond }]> }>,
+		ToastRootExtendProps {
+	dismissible?: boolean;
+	duration?: number;
+	onclose?: () => void;
+}
+
+export interface ToastTitleProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<HtmlAtomProps<E, B>, { children?: Snippet<[{ toast: ToastBond }]> }>,
+		ToastTitleExtendProps {}
+
+export interface ToastDescriptionProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Override<HtmlAtomProps<E, B>, { children?: Snippet<[{ toast?: ToastBond }]> }>,
+		ToastDescriptionExtendProps {}
diff --git a/src/lib/components/tooltip/types.ts b/src/lib/components/tooltip/types.ts
new file mode 100644
index 0000000..d846bca
--- /dev/null
+++ b/src/lib/components/tooltip/types.ts
@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+
+/**
+ * Extend this interface to add custom tooltip properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface TooltipExtendProps {}
+
+export interface TooltipTriggerProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> extends Omit<HtmlAtomProps<E, B>, 'children'>,
+		TooltipExtendProps {
+	content?: string | Snippet<[]>;
+	placement?: 'top' | 'bottom' | 'left' | 'right';
+	delay?: number;
+	children?: Snippet<[]>;
+}
diff --git a/src/lib/components/tree/index.ts b/src/lib/components/tree/index.ts
index f8be5e2..a26d2c1 100644
--- a/src/lib/components/tree/index.ts
+++ b/src/lib/components/tree/index.ts
@@ -1 +1,2 @@
+export * from './types';
 export * as Tree from './atoms';
diff --git a/src/lib/components/tree/tree-body.svelte b/src/lib/components/tree/tree-body.svelte
index fcaa8bc..fd8b9d3 100644
--- a/src/lib/components/tree/tree-body.svelte
+++ b/src/lib/components/tree/tree-body.svelte
@@ -1,18 +1,7 @@
-<script module lang="ts">
-	export type TreeBodyProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		open?: boolean;
-		disabled?: boolean;
-		children?: Snippet<[{ tree?: TreeBond }]>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
 	import { TreeBond } 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 { TreeBodyProps } from './types';
 
 	const bond = TreeBond.get();
 
diff --git a/src/lib/components/tree/tree-header.svelte b/src/lib/components/tree/tree-header.svelte
index 2012521..3bbfb7f 100644
--- a/src/lib/components/tree/tree-header.svelte
+++ b/src/lib/components/tree/tree-header.svelte
@@ -1,20 +1,8 @@
-<script module lang="ts">
-	export type TreeHeaderProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		class?: string;
-		open?: boolean;
-		disabled?: boolean;
-		children?: Snippet<[{ tree: TreeBond }]>;
-	};
-</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 HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { TreeBond } from './bond.svelte';
+	import type { TreeHeaderProps } from './types';
 
 	type Element = HTMLElementTagNameMap[E];
 
diff --git a/src/lib/components/tree/tree-indicator.svelte b/src/lib/components/tree/tree-indicator.svelte
index 0559ae4..be192da 100644
--- a/src/lib/components/tree/tree-indicator.svelte
+++ b/src/lib/components/tree/tree-indicator.svelte
@@ -1,17 +1,7 @@
-<script lang="ts" module>
-	export type CollapsibleHeaderProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> &
-		TreeBondProps & {
-			children?: Snippet<[{ tree?: TreeBond }]>;
-		};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { TreeBond, type TreeBondProps } 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 { TreeBond } from './bond.svelte';
+	import type { TreeIndicatorProps } from './types';
 
 	const bond = TreeBond.get();
 
@@ -26,7 +16,7 @@
 		exit = undefined,
 		initial = undefined,
 		...restProps
-	}: CollapsibleHeaderProps<E, B> = $props();
+	}: TreeIndicatorProps<E, B> = $props();
 
 	const indicatorProps = $derived({
 		...bond?.indicator(),
diff --git a/src/lib/components/tree/tree-root.svelte b/src/lib/components/tree/tree-root.svelte
index d46fcbb..f27668c 100644
--- a/src/lib/components/tree/tree-root.svelte
+++ b/src/lib/components/tree/tree-root.svelte
@@ -1,23 +1,8 @@
-<script module lang="ts">
-	import type { Factory } from '$svelte-atoms/core/types';
-
-	export type TreeRootProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		class?: string;
-		open?: boolean;
-		disabled?: boolean;
-		factory?: Factory<TreeBond>;
-		children?: Snippet<[{ tree: TreeBond }]>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { TreeBond, TreeBondState, type TreeBondProps } 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 { TreeBond, TreeBondState, type TreeBondProps } from './bond.svelte';
+	import type { TreeRootProps } from './types';
 
 	let {
 		open = $bindable(false),
diff --git a/src/lib/components/tree/types.ts b/src/lib/components/tree/types.ts
new file mode 100644
index 0000000..19ae612
--- /dev/null
+++ b/src/lib/components/tree/types.ts
@@ -0,0 +1,78 @@
+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 { TreeBond, TreeBondProps } from './bond.svelte';
+
+/**
+ * tree root properties
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface TreeRootExtendProps {}
+
+export type TreeRootProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> = HtmlAtomProps<E, B> &
+	TreeRootExtendProps & {
+		class?: string;
+		open?: boolean;
+		value?: string;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		data?: any;
+		disabled?: boolean;
+		factory?: Factory<TreeBond>;
+		children?: Snippet<[{ tree: TreeBond }]>;
+	};
+
+/**
+ * tree header properties
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface TreeHeaderExtendProps {}
+
+export type TreeHeaderProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> = HtmlAtomProps<E, B> &
+	TreeHeaderExtendProps & {
+		class?: string;
+		open?: boolean;
+		disabled?: boolean;
+		children?: Snippet<[{ tree: TreeBond }]>;
+	};
+
+/**
+ * tree body properties
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface TreeBodyExtendProps {}
+
+export type TreeBodyProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> = HtmlAtomProps<E, B> &
+	TreeBodyExtendProps & {
+		open?: boolean;
+		disabled?: boolean;
+		children?: Snippet<[{ tree?: TreeBond }]>;
+	};
+
+/**
+ * tree indicator properties
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface TreeIndicatorExtendProps {}
+
+export type TreeIndicatorProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> = HtmlAtomProps<E, B> &
+	TreeBondProps &
+	TreeIndicatorExtendProps & {
+		children?: Snippet<[{ tree?: TreeBond }]>;
+	};
+
+/**
+ * @deprecated Use TreeRootExtendProps instead
+ */
+export type TreeExtendProps = TreeRootExtendProps;
diff --git a/src/lib/components/virtual/types.ts b/src/lib/components/virtual/types.ts
new file mode 100644
index 0000000..41659f8
--- /dev/null
+++ b/src/lib/components/virtual/types.ts
@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+
+/**
+ * Extend this interface to add custom virtual list properties in your application.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface VirtualListViewportExtendProps {}
+
+export interface VirtualListViewportProps<T> extends VirtualListViewportExtendProps {
+	class?: string;
+	data: T[];
+	itemHeight?: number; // Optional for dynamic heights
+	overscan?: number; // Buffer items to render above/below viewport
+	onScroll?: (scrollTop: number) => void;
+	scrollToIndex?: number; // Scroll to specific item
+	header?: Snippet;
+	children: Snippet<
+		[
+			{
+				items: { index: number; data: T }[];
+			}
+		]
+	>;
+}
diff --git a/src/lib/components/virtual/virtual-root.svelte b/src/lib/components/virtual/virtual-root.svelte
index 8073441..1fd0977 100644
--- a/src/lib/components/virtual/virtual-root.svelte
+++ b/src/lib/components/virtual/virtual-root.svelte
@@ -1,26 +1,7 @@
-<script module lang="ts">
-	export type VirtualListViewportProps<T> = {
-		class?: string;
-		data: T[];
-		itemHeight?: number; // Optional for dynamic heights
-		overscan?: number; // Buffer items to render above/below viewport
-		onScroll?: (scrollTop: number) => void;
-		scrollToIndex?: number; // Scroll to specific item
-		header?: Snippet;
-		children: Snippet<
-			[
-				{
-					items: { index: number; data: T }[];
-				}
-			]
-		>;
-	};
-</script>
-
 <script lang="ts" generics="T">
+	import type { VirtualListViewportProps } from './types';
 	import { throttle } from 'es-toolkit';
-
-	import { onMount, tick, type Snippet } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import { twMerge } from 'tailwind-merge';
 
 	let {