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

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

@@ -1,49 +1,49 @@
-<script lang="ts">
-	import { PopoverState, PopoverBond, type PopoverStateProps } from './bond.svelte';
-	import { defineProperty, defineState } from '../../utils';
-	import type { PopoverRootProps } from './types';
-
-	let {
-		open = $bindable(false),
-		disabled = false,
-		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-		placement = 'bottom-start',
-		offset = 0,
-		portal = undefined,
-		extend = {},
-		factory = _factory,
-		children = undefined
-	}: PopoverRootProps = $props();
-
-	const bondProps = defineState<PopoverStateProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty('disabled', () => disabled),
-			defineProperty('placement', () => placement),
-			defineProperty('offset', () => offset),
-			defineProperty('placements', () => placements ?? []),
-			defineProperty('portal', () => portal)
-		],
-		() => ({ extend })
-	);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const popoverState = new PopoverState(() => props);
-		const popoverBond = new PopoverBond(popoverState);
-
-		return popoverBond;
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{@render children?.({ popover: bond })}
+<script lang="ts">
+	import { PopoverState, PopoverBond, type PopoverStateProps } from './bond.svelte';
+	import { defineProperty, defineState } from '../../utils';
+	import type { PopoverRootProps } from './types';
+
+	let {
+		open = $bindable(false),
+		disabled = false,
+		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+		placement = 'bottom-start',
+		offset = 0,
+		portal = undefined,
+		extend = {},
+		factory = _factory,
+		children = undefined
+	}: PopoverRootProps = $props();
+
+	const bondProps = defineState<PopoverStateProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty('disabled', () => disabled),
+			defineProperty('placement', () => placement),
+			defineProperty('offset', () => offset),
+			defineProperty('placements', () => placements ?? []),
+			defineProperty('portal', () => portal)
+		],
+		() => ({ extend })
+	);
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const popoverState = new PopoverState(() => props);
+		const popoverBond = new PopoverBond(popoverState);
+
+		return popoverBond;
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render children?.({ popover: bond })}

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

@@ -1,47 +1,47 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { PopoverBond } from './bond.svelte';
-	import type { PopoverTriggerProps } from './types';
-
-	const bond = PopoverBond.get();
-
-	if (!bond) {
-		throw new Error('');
-	}
-
-	let {
-		class: klass = '',
-		as = 'button' as E,
-		preset = 'popover.trigger',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: PopoverTriggerProps<E, B> = $props();
-
-	const triggerProps = $derived({
-		...bond.trigger(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	{preset}
-	class={['border-border flex w-fit cursor-pointer rounded-md p-2', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	type={as === 'button' ? 'button' : undefined}
-	{...triggerProps}
->
-	{@render children?.({ popover: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { PopoverBond } from './bond.svelte';
+	import type { PopoverTriggerProps } from './types';
+
+	const bond = PopoverBond.get();
+
+	if (!bond) {
+		throw new Error('');
+	}
+
+	let {
+		class: klass = '',
+		as = 'button' as E,
+		preset = 'popover.trigger',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: PopoverTriggerProps<E, B> = $props();
+
+	const triggerProps = $derived({
+		...bond.trigger(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	{preset}
+	class={['border-border flex w-fit cursor-pointer rounded-md p-2', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	type={as === 'button' ? 'button' : undefined}
+	{...triggerProps}
+>
+	{@render children?.({ popover: bond })}
+</HtmlAtom>

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

@@ -1,12 +1,32 @@
 import type { Snippet } from 'svelte';
 import type { Placement } from '@floating-ui/dom';
 import type { Factory } from '../../types';
-import type { PopoverBond } from './bond.svelte';
 import type { Override } from '../../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.
+ */
+export interface PopoverRootExtendProps {
+}
+/**
+ * Extend this interface to add custom popover content properties in your application.
+ */
+export interface PopoverContentExtendProps {
+}
+/**
+ * Extend this interface to add custom popover arrow properties in your application.
+ */
+export interface PopoverArrowExtendProps {
+}
+/**
+ * Extend this interface to add custom popover trigger properties in your application.
+ */
+export interface PopoverTriggerExtendProps {
+}
+export interface PopoverRootProps extends PopoverRootExtendProps {
     open?: boolean;
     disabled?: boolean;
     placements?: Placement[];
@@ -18,22 +38,24 @@ export type PopoverRootProps = {
     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>, {
+}
+export interface PopoverContentProps<T extends HtmlElementTagName, B extends Base = Base> extends Override<HtmlAtomProps<T, B>, {
     children?: Snippet<[{
         popover?: PopoverBond;
     }]>;
-}>;
-export type PopoverArrowProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B>;
-export type PopoverTriggerProps<T extends keyof HTMLElementTagNameMap, B extends Base = Base> = HtmlAtomProps<T, B> & {
+}>, PopoverContentExtendProps {
+}
+export interface PopoverArrowProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, PopoverArrowExtendProps {
+}
+export interface PopoverTriggerProps<T extends keyof HTMLElementTagNameMap, B extends Base = Base> extends Omit<HtmlAtomProps<T, B>, 'children'>, PopoverTriggerExtendProps {
     children?: Snippet<[{
         popover?: PopoverBond;
     }]>;
-};
+}

package/dist/components/portal/active-portal.svelte

@@ -1,22 +1,22 @@
-<script>
-	import { PortalsBond } from './portals/bond.svelte';
-
-	let { portal, children = undefined } = $props();
-
-	const portalsBond = PortalsBond.get();
-	const activePortal = (() => {
-		if (typeof portal === 'string') {
-			return portalsBond?.state?.get(portal) ?? undefined;
-		}
-
-		return portal;
-	})()?.share();
-
-	if (!portalsBond) {
-		throw new Error('Portals bond is not found');
-	}
-</script>
-
-{#if activePortal}
-	{@render children?.()}
-{/if}
+<script>
+	import { PortalsBond } from './portals/bond.svelte';
+
+	let { portal, children = undefined } = $props();
+
+	const portalsBond = PortalsBond.get();
+	const activePortal = (() => {
+		if (typeof portal === 'string') {
+			return portalsBond?.state?.get(portal) ?? undefined;
+		}
+
+		return portal;
+	})()?.share();
+
+	if (!portalsBond) {
+		throw new Error('Portals bond is not found');
+	}
+</script>
+
+{#if activePortal}
+	{@render children?.()}
+{/if}

package/dist/components/portal/index.d.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';

package/dist/components/portal/index.js

@@ -1,3 +1,4 @@
+export * from './types';
 export * as Portal from './atoms';
 export { PortalBond, PortalState } from './bond.svelte';
 export { portal } from './attachements.svelte';

package/dist/components/portal/portal-inner.svelte.d.ts

@@ -1,24 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import { type ElementType, type Base } from '../atom';
+import { type ElementType, type HtmlAtomProps, type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../..").ClassValue | import("../..").ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("..").NodeFunction<E> | undefined;
-        enter?: import("..").TransitionFunction<E> | undefined;
-        exit?: import("..").TransitionFunction<E> | undefined;
-        animate?: import("..").NodeFunction<E> | undefined;
-        onmount?: import("..").NodeFunction<E> | undefined;
-        ondestroy?: import("..").NodeFunction<E> | undefined;
-        children?: import("svelte").Snippet;
-    } & {
-        bond?: import("../..").Bond;
-        base?: B | undefined;
-        preset?: import("../..").ModuleName | (string & {});
-        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & HTMLAttributes<ElementType<E>>;
+    props: HtmlAtomProps<E, B> & HTMLAttributes<ElementType<E>>;
     exports: {};
     bindings: "";
     slots: {};

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

@@ -1,88 +1,83 @@
-<script module lang="ts">
-	export type PortalOuterProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		id: RootPortals | (string & {});
-		children?: Snippet;
-	};
-</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 { PortalsBond, PortalBond, PortalState, type PortalStateProps } from '.';
-	import { RootBond } from '../root';
-	import type { RootPortals } from '../root/root.svelte';
-	import {
-		HtmlAtom,
-		type ElementType,
-		type HtmlAtomProps,
-		type Base
-	} from '../atom';
-	import { defineProperty, defineState } from '../../utils';
-
-	type Element = ElementType<E>;
-
-	let {
-		class: klass = '',
-		id,
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: PortalOuterProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const rootBond = RootBond.get();
-	const portalsBond = PortalsBond.get();
-
-	const bondProps = defineState<PortalStateProps>([defineProperty('id', () => id)]);
-	const bond = factory(bondProps).share() as PortalBond;
-
-	portalsBond?.state.set(id, bond);
-
-	$effect(() => {
-		if (rootBond) {
-			rootBond.state.setPortal(id, bond);
-		}
-
-		return () => {
-			portalsBond?.state.delete(id);
-			bond.destroy();
-		};
-	});
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const portalState = new PortalState(() => props);
-		return new PortalBond(portalState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="portal"
-	class={['border-border pointer-events-none', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...rootProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script module lang="ts">
+	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 '../root';
+	import type { RootPortals } from '../root/root.svelte';
+	import {
+		HtmlAtom,
+		type ElementType,
+		type HtmlAtomProps,
+		type Base
+	} from '../atom';
+	import { defineProperty, defineState } from '../../utils';
+
+	type Element = ElementType<E>;
+
+	let {
+		class: klass = '',
+		id,
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: PortalOuterProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const rootBond = RootBond.get();
+	const portalsBond = PortalsBond.get();
+
+	const bondProps = defineState<PortalStateProps>([defineProperty('id', () => id)]);
+	const bond = factory(bondProps).share() as PortalBond;
+
+	portalsBond?.state.set(id, bond);
+
+	$effect(() => {
+		if (rootBond) {
+			rootBond.state.setPortal(id, bond);
+		}
+
+		return () => {
+			portalsBond?.state.delete(id);
+			bond.destroy();
+		};
+	});
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const portalState = new PortalState(() => props);
+		return new PortalBond(portalState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="portal"
+	class={['border-border pointer-events-none', '$preset', klass]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...rootProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

@@ -1,31 +1,11 @@
-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';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { PortalBond } from '.';
 import type { RootPortals } from '../root/root.svelte';
 import { type ElementType, type HtmlAtomProps, type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../../utils").ClassValue | import("../../utils").ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("..").NodeFunction<E> | undefined;
-        enter?: import("..").TransitionFunction<E> | undefined;
-        exit?: import("..").TransitionFunction<E> | undefined;
-        animate?: import("..").NodeFunction<E> | undefined;
-        onmount?: import("..").NodeFunction<E> | undefined;
-        ondestroy?: import("..").NodeFunction<E> | undefined;
-        children?: Snippet;
-    } & {
-        bond?: import("../..").Bond;
-        base?: B | undefined;
-        preset?: import("../..").ModuleName | (string & {});
-        variants?: import("../../utils").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & {
+    props: HtmlAtomProps<E, B> & import("./types").PortalOuterExtendProps & {
         id: RootPortals | (string & {});
         children?: Snippet;
     } & HTMLAttributes<ElementType<E>>;

package/dist/components/portal/teleport.svelte

@@ -1,17 +1,12 @@
 <script module lang="ts">
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-	import type { HtmlElementTagName, HtmlElementType } from '../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 '../atom';
+	import type { HtmlElementTagName, HtmlElementType } from '../element';
 	import { PortalsBond } from './portals';
 	import { RootBond } from '../root/bond.svelte';
 	import { port } from './utils';

package/dist/components/portal/teleport.svelte.d.ts

@@ -1,29 +1,10 @@
+export type { TeleportProps } from './types';
+import type { HTMLAttributes } from 'svelte/elements';
 import { type HtmlAtomProps, type Base } from '../atom';
 import type { HtmlElementTagName, HtmlElementType } from '../element';
-export type TeleportProps<E extends HtmlElementTagName = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    portal?: string | PortalBond;
-};
-import type { HTMLAttributes } from 'svelte/elements';
 import type { PortalBond } from '.';
 declare function $$render<E extends HtmlElementTagName = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../..").ClassValue | import("../..").ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("../element").NodeFunction<E> | undefined;
-        enter?: import("../element").TransitionFunction<E> | undefined;
-        exit?: import("../element").TransitionFunction<E> | undefined;
-        animate?: import("../element").NodeFunction<E> | undefined;
-        onmount?: import("../element").NodeFunction<E> | undefined;
-        ondestroy?: import("../element").NodeFunction<E> | undefined;
-        children?: import("svelte").Snippet;
-    } & {
-        bond?: import("../..").Bond;
-        base?: B | undefined;
-        preset?: import("../..").ModuleName | (string & {});
-        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & {
+    props: HtmlAtomProps<E, B> & import("./types").TeleportExtendProps & {
         portal?: string | PortalBond;
     } & HTMLAttributes<HtmlElementType<E>>;
     exports: {};

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

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+import type { Factory } from '../../types';
+import type { PortalBond } from './bond.svelte';
+import type { RootPortals } from '../root/root.svelte';
+import type { HtmlElementTagName } from '../element';
+/**
+ * Extend this interface to add custom portal root properties in your application.
+ */
+export interface PortalRootExtendProps {
+}
+/**
+ * Extend this interface to add custom portal outer properties in your application.
+ */
+export interface PortalOuterExtendProps {
+}
+/**
+ * Extend this interface to add custom teleport properties in your application.
+ */
+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;

package/dist/components/portal/types.js

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