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

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

@@ -1,147 +1,139 @@
-<script module lang="ts">
-	import type { Override } from '../../types';
-
-	export type AnimateParams = {
-		x: number;
-		y: number;
-		xOffset: number;
-		yOffset: number;
-		open: boolean;
-	};
-
-	export type PopoverOverlayProps<T extends HtmlElementTagName, B extends Base = Base> = Override<
-		HtmlAtomProps<T, B>,
-		{
-			children?: Snippet<[{ popover?: PopoverBond }]>;
-		}
-	>;
-
-	const k: PopoverOverlayProps<'div'> = {
-		class: []
-	};
-</script>
-
-<script lang="ts" generics="E extends HtmlElementTagName, B extends Base = Base">
-	import { type Snippet } from 'svelte';
-	import { animate as motion } from 'motion';
-	import { PortalBond, Teleport } from '../portal';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-	import type { HtmlElementTagName, HtmlElementType } from '../element';
-	import { PopoverBond } from './bond.svelte';
-
-	type Element = HtmlElementType<E>;
-
-	const bond = PopoverBond.get();
-	const activePortalBond = PortalBond.get();
-
-	if (!bond) {
-		throw new Error('<PopoverOverlay /> must be used within a <Popover />');
-	}
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: PopoverOverlayProps<E, B> = $props();
-
-	const isOpen = $derived(bond.state.isOpen && !!bond.elements.trigger);
-	const portalId = $derived(activePortalBond?.id);
-
-	const position = $derived(bond.position);
-	const placement = $derived(position?.placement);
-
-	const x = $derived(position?.x ?? 0);
-	const y = $derived(position?.y ?? 0);
-
-	const dy = $derived(placement?.startsWith('top') ? -1 : placement?.startsWith('bottom') ? 1 : 0);
-	const dx = $derived(placement?.startsWith('left') ? -1 : placement?.startsWith('right') ? 1 : 0);
-
-	const offset = $derived(bond.state.props.offset);
-
-	const xOffset = $derived(dx * offset);
-	const yOffset = $derived(dy * offset);
-
-	let isInitialized = false;
-
-	function _containerInitial(this: typeof bond.state, node: Element) {
-		const openAsNumber = +this.isOpen;
-
-		const deltaArrow = position?.middlewareData?.arrow ? 1 : 0;
-		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
-		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
-
-		const _x = x + xOffset * openAsNumber + deltaArrow * dx * arrowClientWidth;
-		const _y = y + yOffset * openAsNumber + deltaArrow * dy * arrowClientHeight;
-
-		node.style.transform = `translate3d(${_x}px, ${_y}px, 1px)`;
-
-		isInitialized = true;
-	}
-
-	function _containerAnimate(this: typeof bond.state, node: Element, _?: AnimateParams) {
-		if (!isInitialized) {
-			return;
-		}
-
-		const openAsNumber = +this.isOpen;
-
-		const deltaArrow = position?.middlewareData?.arrow ? 1 : 0;
-		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
-		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
-
-		const _x = x + xOffset * openAsNumber + deltaArrow * dx * arrowClientWidth;
-		const _y = y + yOffset * openAsNumber + deltaArrow * dy * arrowClientHeight;
-
-		node.style.transform = `translate3d(${_x}px, ${_y}px, 1px)`;
-	}
-
-	function _animate(this: typeof bond.state, node: Element) {
-		const isOpen = this.isOpen;
-
-		motion(
-			node,
-			{
-				opacity: +isOpen,
-				y: (isOpen ? 0 : -1) * dy * 8
-			},
-			{ duration: 0.2 }
-		);
-	}
-</script>
-
-<Teleport
-	portal={portalId ?? 'root.l0'}
-	as="div"
-	class={[
-		'pointer-events-auto absolute top-0 left-0 h-min w-fit',
-		!isOpen && 'pointer-events-none'
-	]}
-	initial={_containerInitial?.bind(bond.state)}
-	animate={_containerAnimate?.bind(bond.state)}
-	{...bond.content({ onchange: _containerInitial })}
->
-	<HtmlAtom
-		{bond}
-		preset="popover.content"
-		class={[
-			'popover-content border-border bg-background rounded-md border p-2 opacity-0 shadow-lg',
-			'$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)}
-		{...restProps}
-	>
-		{@render children?.({ popover: bond })}
-	</HtmlAtom>
-</Teleport>
+<script lang="ts" generics="E extends HtmlElementTagName, B extends Base = Base">
+	import { animate as motion } from 'motion';
+	import { PortalBond, PortalsBond, Teleport } from '../portal';
+	import { HtmlAtom, type Base } from '../atom';
+	import type { HtmlElementTagName, HtmlElementType } from '../element';
+	import { DURATION } from '../../shared';
+	import { PopoverBond } from './bond.svelte';
+	import type { AnimateParams, PopoverContentProps } from './types';
+
+	type Element = HtmlElementType<E>;
+
+	const bond = PopoverBond.get();
+	const activePortalBond = (() => {
+		const key = bond.state.props.portal;
+		if (key instanceof PortalBond) {
+			return key;
+		}
+
+		let portal: PortalBond | undefined | null = undefined;
+
+		if (typeof key === 'string') {
+			portal = PortalsBond.get()?.state.get(key);
+			console.error('portal was not found');
+		}
+
+		return portal ?? PortalBond.get();
+	})();
+
+	if (!bond) {
+		throw new Error('<PopoverOverlay /> must be used within a <Popover />');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: PopoverContentProps<E, B> = $props();
+
+	const isOpen = $derived(bond.state.isOpen && !!bond.elements.trigger);
+	const portalId = $derived(activePortalBond?.id);
+
+	const position = $derived(bond.position);
+	const placement = $derived(position?.placement);
+
+	const x = $derived(position?.x ?? 0);
+	const y = $derived(position?.y ?? 0);
+
+	const dy = $derived(placement?.startsWith('top') ? -1 : placement?.startsWith('bottom') ? 1 : 0);
+	const dx = $derived(placement?.startsWith('left') ? -1 : placement?.startsWith('right') ? 1 : 0);
+
+	const offset = $derived(bond.state.props.offset);
+
+	const xOffset = $derived(dx * offset);
+	const yOffset = $derived(dy * offset);
+
+	let isInitialized = false;
+
+	function _containerInitial(this: typeof bond.state, node: Element) {
+		const openAsNumber = +this.isOpen;
+
+		const deltaArrow = position?.middlewareData?.arrow ? 1 : 0;
+		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
+		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
+
+		const _x = x + xOffset * openAsNumber + deltaArrow * dx * arrowClientWidth;
+		const _y = y + yOffset * openAsNumber + deltaArrow * dy * arrowClientHeight;
+
+		node.style.transform = `translate3d(${_x}px, ${_y}px, 1px)`;
+
+		isInitialized = true;
+	}
+
+	function _containerAnimate(this: typeof bond.state, node: Element, _?: AnimateParams) {
+		if (!isInitialized) {
+			return;
+		}
+
+		const openAsNumber = +this.isOpen;
+
+		const deltaArrow = position?.middlewareData?.arrow ? 1 : 0;
+		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
+		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
+
+		const _x = x + xOffset * openAsNumber + deltaArrow * dx * arrowClientWidth;
+		const _y = y + yOffset * openAsNumber + deltaArrow * dy * arrowClientHeight;
+
+		node.style.transform = `translate3d(${_x}px, ${_y}px, 1px)`;
+	}
+
+	function _animate(this: typeof bond.state, node: Element) {
+		const isOpen = this.isOpen;
+
+		motion(
+			node,
+			{
+				opacity: +isOpen,
+				y: (isOpen ? 0 : -1) * dy * 8
+			},
+			{ duration: DURATION.fast / 1000 }
+		);
+	}
+</script>
+
+<Teleport
+	portal={portalId ?? 'root.l0'}
+	as="div"
+	class={[
+		'pointer-events-auto absolute top-0 left-0 h-min w-fit',
+		!isOpen && 'pointer-events-none'
+	]}
+	initial={_containerInitial?.bind(bond.state)}
+	animate={_containerAnimate?.bind(bond.state)}
+	{...bond.content({ onchange: _containerInitial })}
+>
+	<HtmlAtom
+		{bond}
+		preset="popover.content"
+		class={[
+			'popover-content bg-popover text-popover-foreground border-border rounded-md border p-2 opacity-0 shadow-lg',
+			'$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)}
+		{...restProps}
+	>
+		{@render children?.({ popover: bond })}
+	</HtmlAtom>
+</Teleport>

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

@@ -1,22 +1,8 @@
-import type { Override } from '../../types';
-export type AnimateParams = {
-    x: number;
-    y: number;
-    xOffset: number;
-    yOffset: number;
-    open: boolean;
-};
-export type PopoverOverlayProps<T extends HtmlElementTagName, B extends Base = Base> = Override<HtmlAtomProps<T, B>, {
-    children?: Snippet<[{
-        popover?: PopoverBond;
-    }]>;
-}>;
-import { type Snippet } from 'svelte';
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
 import type { HtmlElementTagName } from '../element';
-import { PopoverBond } from './bond.svelte';
+import type { PopoverContentProps } from './types';
 declare function $$render<E extends HtmlElementTagName, B extends Base = Base>(): {
-    props: PopoverOverlayProps<E, B>;
+    props: PopoverContentProps<E, B>;
     exports: {};
     bindings: "";
     slots: {};

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

@@ -24,7 +24,7 @@
 <HtmlAtom
 	{bond}
 	preset="popover.indicator"
-	class={['flex items-center justify-center', '$preset', klass]}
+	class={['border-border flex items-center justify-center', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}

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

@@ -1,23 +1,7 @@
-<script module lang="ts">
-	import type { Factory } from '../../types';
-
-	export type PopoverRootProps = {
-		open?: boolean;
-		disabled?: boolean;
-		placements?: Placement[];
-		placement?: Placement;
-		offset?: number;
-		extend?: Record<string, unknown>;
-		factory?: Factory<PopoverBond>;
-		children?: Snippet<[{ popover: PopoverBond }]>;
-	};
-</script>
-
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { Placement } from '@floating-ui/dom';
 	import { PopoverState, PopoverBond, type PopoverStateProps } from './bond.svelte';
 	import { defineProperty, defineState } from '../../utils';
+	import type { PopoverRootProps } from './types';
 
 	let {
 		open = $bindable(false),
@@ -25,6 +9,7 @@
 		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
 		placement = 'bottom-start',
 		offset = 0,
+		portal = undefined,
 		extend = {},
 		factory = _factory,
 		children = undefined
@@ -42,7 +27,8 @@
 			defineProperty('disabled', () => disabled),
 			defineProperty('placement', () => placement),
 			defineProperty('offset', () => offset),
-			defineProperty('placements', () => placements ?? [])
+			defineProperty('placements', () => placements ?? []),
+			defineProperty('portal', () => portal)
 		],
 		() => ({ extend })
 	);

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

@@ -1,19 +1,5 @@
-import type { Factory } from '../../types';
-export type PopoverRootProps = {
-    open?: boolean;
-    disabled?: boolean;
-    placements?: Placement[];
-    placement?: Placement;
-    offset?: number;
-    extend?: Record<string, unknown>;
-    factory?: Factory<PopoverBond>;
-    children?: Snippet<[{
-        popover: PopoverBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
-import type { Placement } from '@floating-ui/dom';
 import { PopoverState, PopoverBond, type PopoverStateProps } from './bond.svelte';
+import type { PopoverRootProps } from './types';
 declare const PopoverRoot: import("svelte").Component<PopoverRootProps, {
     getBond: () => PopoverBond<PopoverStateProps<Record<string, unknown>>, PopoverState<PopoverStateProps<Record<string, unknown>>>, import("./bond.svelte").PopoverDomElements>;
 }, "open">;

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

@@ -1,16 +1,7 @@
-<script module lang="ts">
-	export type PopoverTriggerProps<
-		T extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = HtmlAtomProps<T, B> & {
-		children?: Snippet<[{ popover?: PopoverBond }]>;
-	};
-</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 '../atom';
+	import { HtmlAtom, type Base } from '../atom';
 	import { PopoverBond } from './bond.svelte';
+	import type { PopoverTriggerProps } from './types';
 
 	const bond = PopoverBond.get();
 
@@ -42,7 +33,7 @@
 	{as}
 	{bond}
 	{preset}
-	class={['flex w-fit cursor-pointer rounded-md p-2', '$preset', klass]}
+	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)}

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

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

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

@@ -0,0 +1,61 @@
+import type { Snippet } from 'svelte';
+import type { Placement } from '@floating-ui/dom';
+import type { Factory } from '../../types';
+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';
+/**
+ * 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[];
+    placement?: Placement;
+    offset?: number;
+    portal?: string | PortalBond;
+    extend?: Record<string, unknown>;
+    factory?: Factory<PopoverBond>;
+    children?: Snippet<[{
+        popover: PopoverBond;
+    }]>;
+}
+export interface AnimateParams {
+    x: number;
+    y: number;
+    xOffset: number;
+    yOffset: number;
+    open: boolean;
+}
+export interface PopoverContentProps<T extends HtmlElementTagName, B extends Base = Base> extends Override<HtmlAtomProps<T, B>, {
+    children?: Snippet<[{
+        popover?: PopoverBond;
+    }]>;
+}>, 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/popover/types.js

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

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

@@ -1,10 +1,16 @@
 <script>
 	import { PortalsBond } from './portals/bond.svelte';
 
-	let { id, children = undefined } = $props();
+	let { portal, children = undefined } = $props();
 
 	const portalsBond = PortalsBond.get();
-	const activePortal = portalsBond?.state.get(id)?.share();
+	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');

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

@@ -4,10 +4,10 @@ type ActivePortal = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const ActivePortal: import("svelte").Component<{
-    id: any;
+    portal: any;
     children?: any;
 }, {}, "">;
 type $$ComponentProps = {
-    id: any;
+    portal: any;
     children?: any;
 };

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

@@ -33,7 +33,7 @@
 <HtmlAtom
 	{bond}
 	preset="portal.inner"
-	class={['relative size-full', '$preset', klass]}
+	class={['border-border relative size-full', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

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: {};