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

package/dist/components/dropdown/dropdown-query.svelte

@@ -1,53 +1,54 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', S extends Shell = Shell">
-	import { onMount } from 'svelte';
-	import { DropdownBond } from './bond.svelte';
-	import { Input } from '../input';
-
-	const bond = DropdownBond.get() as DropdownBond;
-
-	if (!bond) {
-		throw new Error('Combobox atom was not found');
-	}
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onpointerdown,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-
-	let isMounted = $state(false);
-
-	onMount(() => {
-		isMounted = true;
-	});
-
-	const isMultiple = $derived(bond?.state.props?.multiple ?? false);
-	const selectedText = $derived(
-		isMounted || isMultiple ? (bond.state.selectedItems.at(0)?.text ?? '') : ''
-	);
-
-	const value = $derived(
-		bond?.state.props?.query ?? (bond?.state.props?.text || selectedText || '')
-	);
-</script>
-
-<Input.Control
-	bind:value={bond.state.query}
-	{bond}
-	preset="dropdown.query"
-	class={['inline-flex h-auto w-auto flex-1 py-1', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	{...restProps}
-/>
+<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 '../input';
+	import { type Base } from '../atom';
+
+	const bond = DropdownBond.get() as DropdownBond;
+
+	if (!bond) {
+		throw new Error('Combobox atom was not found');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onpointerdown,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+
+	let isMounted = $state(false);
+
+	onMount(() => {
+		isMounted = true;
+	});
+
+	const isMultiple = $derived(bond?.state.props?.multiple ?? false);
+	const selectedText = $derived(
+		isMounted || isMultiple ? (bond.state.selectedItems.at(0)?.text ?? '') : ''
+	);
+
+	const value = $derived(
+		bond?.state.props?.query ?? (bond?.state.props?.text || selectedText || '')
+	);
+</script>
+
+<Input.Control
+	bind:value={bond.state.query}
+	{bond}
+	preset="dropdown.query"
+	class={['inline-flex h-auto w-auto flex-1 py-1', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{...restProps}
+/>

package/dist/components/dropdown/dropdown-query.svelte.d.ts

@@ -1,4 +1,5 @@
-declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', S extends Shell = Shell>(): {
+import { type Base } from '../atom';
+declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: {
         class?: string;
         children?: any;
@@ -15,20 +16,20 @@ declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', S exten
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap = 'div', S extends Shell = Shell> {
-    props(): ReturnType<typeof $$render<T, S>>['props'];
-    events(): ReturnType<typeof $$render<T, S>>['events'];
-    slots(): ReturnType<typeof $$render<T, S>>['slots'];
+declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<T, B>>['props'];
+    events(): ReturnType<typeof $$render<T, B>>['events'];
+    slots(): ReturnType<typeof $$render<T, B>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends keyof HTMLElementTagNameMap = 'div', S extends Shell = Shell>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, S>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, S>['props']>, ReturnType<__sveltets_Render<T, S>['events']>, ReturnType<__sveltets_Render<T, S>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T, S>['bindings']>;
-    } & ReturnType<__sveltets_Render<T, S>['exports']>;
-    <T extends keyof HTMLElementTagNameMap = 'div', S extends Shell = Shell>(internal: unknown, props: ReturnType<__sveltets_Render<T, S>['props']> & {}): ReturnType<__sveltets_Render<T, S>['exports']>;
+    new <T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, B>['props']>, ReturnType<__sveltets_Render<T, B>['events']>, ReturnType<__sveltets_Render<T, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, B>['exports']>;
+    <T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, B>['props']> & {}): ReturnType<__sveltets_Render<T, B>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const DropdownQuery: $$IsomorphicComponent;
-type DropdownQuery<T extends keyof HTMLElementTagNameMap = 'div', S extends Shell = Shell> = InstanceType<typeof DropdownQuery<T, S>>;
+type DropdownQuery<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DropdownQuery<T, B>>;
 export default DropdownQuery;

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

@@ -1,59 +1,59 @@
-<script lang="ts" generics="T">
-	import { DropdownBond, DropdownBondState, type DropdownStateProps } from './bond.svelte';
-	import { defineProperty, defineState } from '../../utils';
-
-	let {
-		open = $bindable(false),
-		value = $bindable(),
-		values = $bindable(),
-		multiple = false,
-		disabled = false,
-		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-		placement = 'bottom-start',
-		offset = 4,
-		keys = [],
-		factory = _factory,
-		children = undefined,
-		onquerychange = undefined,
-		...restProps
-	} = $props();
-
-	const bondProps = defineState<DropdownStateProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty(
-				'values',
-				() => (multiple ? values : [value].filter(Boolean)),
-				(v) => {
-					values = v;
-					value = v[0];
-				}
-			),
-			defineProperty('multiple', () => multiple),
-			defineProperty('disabled', () => disabled),
-			defineProperty('placement', () => placement),
-			defineProperty('offset', () => offset),
-			defineProperty('placements', () => placements ?? []),
-			defineProperty('keys', () => keys ?? [])
-		],
-		() => ({ onquerychange })
-	);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new DropdownBondState<T>(() => props);
-		return new DropdownBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{@render children?.({ dropdown: bond })}
+<script lang="ts" generics="T">
+	import { defineProperty, defineState } from '../../utils';
+	import { DropdownBond, DropdownBondState, type DropdownStateProps } from './bond.svelte';
+
+	let {
+		open = $bindable(false),
+		value = $bindable(),
+		values = $bindable(),
+		multiple = false,
+		disabled = false,
+		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+		placement = 'bottom-start',
+		offset = 4,
+		keys = [],
+		factory = _factory,
+		children = undefined,
+		onquerychange = undefined,
+		...restProps
+	} = $props();
+
+	const bondProps = defineState<DropdownStateProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty(
+				'values',
+				() => (multiple ? values : [value].filter(Boolean)),
+				(v) => {
+					values = v;
+					value = v[0];
+				}
+			),
+			defineProperty('multiple', () => multiple),
+			defineProperty('disabled', () => disabled),
+			defineProperty('placement', () => placement),
+			defineProperty('offset', () => offset),
+			defineProperty('placements', () => placements ?? []),
+			defineProperty('keys', () => keys ?? [])
+		],
+		() => ({ onquerychange })
+	);
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new DropdownBondState<T>(() => props);
+		return new DropdownBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render children?.({ dropdown: bond })}

package/dist/components/dropdown/dropdown-trigger.svelte

@@ -1,52 +1,41 @@
-<script module lang="ts">
-	import type { PopoverTriggerProps } from '../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 '../popover/atoms';
-	import type { Base } from '../atom';
-
-	const bond = DropdownBond.get();
-
-	if (!bond) {
-		throw new Error('dropdown atom was not found');
-	}
-
-	let {
-		class: klass = '',
-		as = 'button' as T,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DropdownTriggerProps<T, B> = $props();
-</script>
-
-<Trigger
-	{as}
-	{bond}
-	preset="dropdown.trigger"
-	class={['border-border relative flex h-auto min-h-10 flex-wrap items-center', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	{...restProps}
->
-	{@render children?.({ dropdown: bond })}
-</Trigger>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { Trigger } from '../popover/atoms';
+	import type { Base } from '../atom';
+	import { DropdownBond } from './bond.svelte';
+	import type { DropdownTriggerProps } from './types';
+
+	const bond = DropdownBond.get();
+
+	if (!bond) {
+		throw new Error('dropdown atom was not found');
+	}
+
+	let {
+		class: klass = '',
+		as = 'button' as T,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DropdownTriggerProps<T, B> = $props();
+</script>
+
+<Trigger
+	{as}
+	{bond}
+	preset="dropdown.trigger"
+	class={['border-border relative flex h-auto min-h-10 flex-wrap items-center', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{...restProps}
+>
+	{@render children?.({ dropdown: bond })}
+</Trigger>

package/dist/components/dropdown/dropdown-trigger.svelte.d.ts

@@ -1,12 +1,5 @@
-import type { PopoverTriggerProps } from '../popover/popover-trigger.svelte';
-export type DropdownTriggerProps<T extends keyof HTMLElementTagNameMap, B extends Base = Base> = PopoverTriggerProps<T, B> & {
-    children?: Snippet<[{
-        dropdown?: DropdownBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
-import { DropdownBond } from './bond.svelte';
 import type { Base } from '../atom';
+import type { DropdownTriggerProps } from './types';
 declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: DropdownTriggerProps<T, B>;
     exports: {};

package/dist/components/dropdown/dropdown-value.svelte

@@ -1,60 +1,60 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { DropdownBond } from './bond.svelte';
-	import { Icon } from '../icon';
-	import { HtmlAtom, type Base } from '../atom';
-	import CloseIcon from '../../icons/icon-close.svelte';
-
-	const bond = DropdownBond.get();
-
-	if (!bond) {
-		throw new Error('DropdownValue must be used within a Dropdown');
-	}
-
-	let {
-		class: klass = '',
-		as = 'div' as T,
-		value,
-		children,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-
-	function handleClick(ev: Event) {
-		ev.preventDefault();
-		ev.stopPropagation();
-
-		bond?.state.unselect([value]);
-	}
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="dropdown.value"
-	class={[
-		'dropdown-value border-border bg-foreground/5 inline-flex flex-nowrap items-center gap-1 rounded-xs px-1 whitespace-nowrap',
-		'$preset',
-		klass
-	]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	{...restProps}
->
-	{@render children?.()}
-
-	<button
-		class="bg-foreground/5 flex aspect-square h-4 cursor-pointer items-center justify-center rounded-xs p-0"
-		onclick={handleClick}
-	>
-		<Icon class="h-3" src={CloseIcon} />
-	</button>
-</HtmlAtom>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { Icon } from '../icon';
+	import { HtmlAtom, type Base } from '../atom';
+	import CloseIcon from '../../icons/icon-close.svelte';
+	import { DropdownBond } from './bond.svelte';
+
+	const bond = DropdownBond.get();
+
+	if (!bond) {
+		throw new Error('DropdownValue must be used within a Dropdown');
+	}
+
+	let {
+		class: klass = '',
+		as = 'div' as T,
+		value,
+		children,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+
+	function handleClick(ev: Event) {
+		ev.preventDefault();
+		ev.stopPropagation();
+
+		bond?.state.unselect([value]);
+	}
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="dropdown.value"
+	class={[
+		'dropdown-value border-border bg-foreground/5 inline-flex flex-nowrap items-center gap-1 rounded-xs px-1 whitespace-nowrap',
+		'$preset',
+		klass
+	]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{...restProps}
+>
+	{@render children?.()}
+
+	<button
+		class="bg-foreground/5 flex aspect-square h-4 cursor-pointer items-center justify-center rounded-xs p-0"
+		onclick={handleClick}
+	>
+		<Icon class="h-3" src={CloseIcon} />
+	</button>
+</HtmlAtom>

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

@@ -1,3 +1,4 @@
 export * as Dropdown from './atoms';
 export { DropdownBond, type DropdownBondElements, DropdownBondState, type DropdownStateProps } from './bond.svelte';
 export { filter } from './runes.svelte';
+export * from './types';

package/dist/components/dropdown/index.js

@@ -1,3 +1,4 @@
 export * as Dropdown from './atoms';
 export { DropdownBond, DropdownBondState } from './bond.svelte';
 export { filter } from './runes.svelte';
+export * from './types';

package/dist/components/dropdown/types.d.ts

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+import type { Factory, Override } from '../../types';
+import type { DropdownBond } from './bond.svelte';
+import type { PopoverTriggerProps } from '../popover';
+/**
+ * Extend this interface to add custom dropdown properties in your application.
+ */
+export interface DropdownExtendProps {
+}
+/**
+ * Extend this interface to add custom dropdown trigger properties in your application.
+ */
+export interface DropdownTriggerExtendProps {
+}
+export interface DropdownRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base, 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>;
+    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 {
+}

package/dist/components/dropdown/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/element/html-element.svelte.d.ts

@@ -1,19 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { ElementType, HtmlElementTagName } from './types';
+import type { ElementType, HtmlElementProps, HtmlElementTagName } from './types';
 declare function $$render<T extends HtmlElementTagName>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../../utils").ClassValue | import("../../utils").ClassValue[];
-        as?: (string & {}) | T | undefined;
-        global?: boolean;
-        initial?: import("./types").NodeFunction<T> | undefined;
-        enter?: import("./types").TransitionFunction<T> | undefined;
-        exit?: import("./types").TransitionFunction<T> | undefined;
-        animate?: import("./types").NodeFunction<T> | undefined;
-        onmount?: import("./types").NodeFunction<T> | undefined;
-        ondestroy?: import("./types").NodeFunction<T> | undefined;
-        children?: import("svelte").Snippet;
-    } & Omit<HTMLAttributes<ElementType<T>>, string | number>;
+    props: HtmlElementProps<T> & Omit<HTMLAttributes<ElementType<T>>, keyof HtmlElementProps<T>>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/components/element/svg-element.svelte.d.ts

@@ -1,19 +1,7 @@
 import type { SVGAttributes } from 'svelte/elements';
-import type { ElementType, SvgElementTagName } from './types';
+import type { ElementType, SvgElementProps, SvgElementTagName } from './types';
 declare function $$render<T extends SvgElementTagName>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../../utils").ClassValue | import("../../utils").ClassValue[];
-        as?: (string & {}) | T | undefined;
-        global?: boolean;
-        initial?: import("./types").NodeFunction<T> | undefined;
-        enter?: import("./types").TransitionFunction<T> | undefined;
-        exit?: import("./types").TransitionFunction<T> | undefined;
-        animate?: import("./types").NodeFunction<T> | undefined;
-        onmount?: import("./types").NodeFunction<T> | undefined;
-        ondestroy?: import("./types").NodeFunction<T> | undefined;
-        children?: import("svelte").Snippet;
-    } & Omit<SVGAttributes<ElementType<T>>, string | number>;
+    props: SvgElementProps<T> & Omit<SVGAttributes<ElementType<T>>, keyof SvgElementProps<T>>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/components/element/types.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes, SVGAttributes } from 'svelte/elements';
 import type { TransitionConfig } from 'svelte/transition';
 import type { ClassValue } from '../../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;
@@ -14,17 +14,24 @@ export type ElementProps<T extends ElementTagName> = Record<string, unknown> & {
     ondestroy?: NodeFunction<T>;
     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>;
+export interface HtmlElementProps<T extends HtmlElementTagName = 'div'> extends ElementProps<T> {
+}
+export interface SvgElementProps<T extends SvgElementTagName = 'g'> extends ElementProps<T> {
+}
+export interface MathMLElementProps<T extends MathMLElementTagName> extends ElementProps<T> {
+}
 export type ElementTagName = HtmlElementTagName | SvgElementTagName | MathMLElementTagName;
 export type HtmlElementType<T extends HtmlElementTagName> = HTMLElementTagNameMap[T];
 export type SvgElementType<T extends SvgElementTagName> = SVGElementTagNameMap[T];
 export type ElementType<T> = T extends HtmlElementTagName ? HTMLElementTagNameMap[T] : T extends SvgElementTagName ? SVGElementTagNameMap[T] : T extends MathMLElementTagName ? MathMLElementTagNameMap[T] : never;
 export type ElementAttributes<T extends ElementTagName> = T extends HtmlElementTagName ? HTMLAttributes<ElementType<T>> : T extends SvgElementTagName ? SVGAttributes<ElementType<T>> : never;
-export type TransitionFunction<T extends ElementTagName> = (node: ElementType<T>) => Partial<TransitionConfig>;
-export type NodeFunction<T extends ElementTagName> = (node: ElementType<T>, ...args: any[]) => any;
+export interface TransitionFunction<T extends ElementTagName> {
+    (node: ElementType<T>): Partial<TransitionConfig>;
+}
+export interface NodeFunction<T extends ElementTagName> {
+    (node: ElementType<T>, ...args: any[]): any;
+}