@svelte-atoms/core 1.0.0-alpha.30 → 1.0.0-alpha.31

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

@@ -1,11 +1,10 @@
 <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';
+	import { animatePopoverContent } from './motion';
 
 	type Element = HtmlElementType<E>;
 
@@ -35,7 +34,7 @@
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
-		animate = _animate,
+		animate = animatePopoverContent(),
 		enter = undefined,
 		exit = undefined,
 		initial = undefined,
@@ -45,26 +44,26 @@
 	const isOpen = $derived(bond.state.isOpen && !!bond.elements.trigger);
 	const portalId = $derived(activePortalBond?.id);
 
-	const position = $derived(bond.position);
-	const placement = $derived(position?.placement);
+	let isInitialized = false;
 
-	const x = $derived(position?.x ?? 0);
-	const y = $derived(position?.y ?? 0);
+	function _containerInitial(this: typeof bond.state, node: Element) {
+		const position = bond.position;
+		const placement = position?.placement;
 
-	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 x = position?.x ?? 0;
+		const y = position?.y ?? 0;
 
-	const offset = $derived(bond.state.props.offset);
+		const dy = placement?.startsWith('top') ? -1 : placement?.startsWith('bottom') ? 1 : 0;
+		const dx = placement?.startsWith('left') ? -1 : placement?.startsWith('right') ? 1 : 0;
 
-	const xOffset = $derived(dx * offset);
-	const yOffset = $derived(dy * offset);
+		const offset = bond.state.props.offset;
 
-	const openAsNumber = $derived(+isOpen);
-	const deltaArrow = $derived(position?.middlewareData?.arrow ? 1 : 0);
+		const xOffset = dx * offset;
+		const yOffset = dy * offset;
 
-	let isInitialized = false;
+		const openAsNumber = +isOpen;
+		const deltaArrow = position?.middlewareData?.arrow ? 1 : 0;
 
-	function _containerInitial(this: typeof bond.state, node: Element) {
 		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
 		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
 
@@ -81,75 +80,37 @@
 			return;
 		}
 
-		const deltaArrow = position?.middlewareData?.arrow ? 1 : 0;
-		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
-		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
+		const position = bond.position;
+		const placement = position?.placement;
 
-		const _x = x + xOffset * openAsNumber + deltaArrow * dx * arrowClientWidth;
-		const _y = y + yOffset * openAsNumber + deltaArrow * dy * arrowClientHeight;
+		const x = position?.x ?? 0;
+		const y = position?.y ?? 0;
 
-		node.style.transform = `translate3d(${_x}px, ${_y}px, 1px)`;
-	}
+		const dy = placement?.startsWith('top') ? -1 : placement?.startsWith('bottom') ? 1 : 0;
+		const dx = placement?.startsWith('left') ? -1 : placement?.startsWith('right') ? 1 : 0;
 
-	let isOpened = false;
+		const offset = bond.state.props.offset;
 
-	function _animate(this: typeof bond.state, node: Element) {
-		const isOpen = this.isOpen;
+		const xOffset = dx * offset;
+		const yOffset = dy * offset;
+
+		const openAsNumber = +isOpen;
+		const deltaArrow = position?.middlewareData?.arrow ? 1 : 0;
 
 		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
 		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
 
-		const getTransformOrigin = () => {
-			switch (placement) {
-				case 'top':
-				case 'top-start':
-				case 'top-end':
-					return 'bottom';
-				case 'bottom':
-				case 'bottom-start':
-				case 'bottom-end':
-					return 'top';
-				case 'left':
-				case 'left-start':
-				case 'left-end':
-					return 'right';
-				case 'right':
-				case 'right-start':
-				case 'right-end':
-					return 'left';
-				default:
-					return 'center';
-			}
-		};
-
-		const transformOrigin = getTransformOrigin();
-
-		const from = isOpened ? 1 : 0.95;
-
-		motion(
-			node,
-			{
-				opacity: openAsNumber,
-				y: dy * (!isOpen ? -1 : 0) * (arrowClientHeight + yOffset),
-				x: dx * (!isOpen ? -1 : 0) * (arrowClientWidth + xOffset),
-				scaleY: dy ? (isOpen ? [from, 1] : [1, 0.8]) : undefined,
-				scaleX: dx ? (isOpen ? [from, 1] : [1, 0.8]) : undefined,
-				transformOrigin
-			},
-			{ duration: DURATION.fast / 1000 }
-		);
-
-		isOpened = isOpen;
+		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)`;
 	}
 </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'
-	]}
+	class="absolute top-0 left-0 h-min w-fit outline-none"
 	initial={_containerInitial?.bind(bond.state)}
 	animate={_containerAnimate?.bind(bond.state)}
 	{...bond.content({ onchange: _containerInitial })}
@@ -158,7 +119,8 @@
 		{bond}
 		preset="popover.content"
 		class={[
-			'popover-content bg-popover text-popover-foreground border-border rounded-md border p-2 opacity-0 shadow-lg',
+			'popover-content bg-popover text-popover-foreground border-border rounded-md border p-2 opacity-0 shadow-lg outline-none',
+			isOpen && 'pointer-events-auto',
 			'$preset',
 			klass
 		]}

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

@@ -1,44 +1,44 @@
-<script lang="ts">
-	import { animate as motion } from 'motion';
-	import { Icon } from '../icon';
-	import IconArrowDown from '../../icons/icon-arrow-down.svelte';
-	import { HtmlAtom } from '../atom';
-	import { PopoverBond } from './bond.svelte';
-
-	const bond = PopoverBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined
-	} = $props();
-
-	const isOpen = $derived(bond?.state.props.open ?? false);
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="popover.indicator"
-	class={['border-border flex h-5 items-center justify-center', '$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)}
->
-	{#if children}
-		{@render children?.({ popover: bond })}
-	{:else}
-		<Icon
-			class="h-full"
-			src={IconArrowDown}
-			animate={(node) => motion(node, { rotate: 180 * +isOpen }, { duration: 0.2 })}
-		/>
-	{/if}
-</HtmlAtom>
+<script lang="ts">
+	import { animate as motion } from 'motion';
+	import { Icon } from '../icon';
+	import IconArrowDown from '../../icons/icon-arrow-down.svelte';
+	import { HtmlAtom } from '../atom';
+	import { PopoverBond } from './bond.svelte';
+
+	const bond = PopoverBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined
+	} = $props();
+
+	const isOpen = $derived(bond?.state.props.open ?? false);
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="popover.indicator"
+	class={['border-border flex h-5 items-center justify-center', '$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)}
+>
+	{#if children}
+		{@render children?.({ popover: bond })}
+	{:else}
+		<Icon
+			class="h-full"
+			src={IconArrowDown}
+			animate={(node) => motion(node, { rotate: 180 * +isOpen }, { duration: 0.2 })}
+		/>
+	{/if}
+</HtmlAtom>

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

@@ -1,48 +1,48 @@
-<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 = 1,
-		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),
-		defineProperty('extend', () => 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 = 1,
+		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),
+		defineProperty('extend', () => 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.stories.svelte

@@ -26,8 +26,8 @@
 		<Popover_.Root bind:open offset={0} {...args}>
 			{#snippet children({ popover })}
 				<!-- {#if dev}
-						<RenderScan duration={400} />
-					{/if} -->
+					<RenderScan duration={400} />
+				{/if} -->
 
 				<Popover_.Trigger base={Button} class="items-center gap-4">
 					<div>Open Popover</div>
@@ -35,7 +35,7 @@
 				</Popover_.Trigger>
 
 				<Popover_.Content
-					{@attach clickoutPopover((ev, atom) => {
+					{@attach clickoutPopover((_, atom) => {
 						atom.state.close();
 					})}
 					class="bg-card"

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

@@ -1,7 +1,6 @@
 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';
@@ -16,6 +15,11 @@ export interface PopoverRootExtendProps {
  */
 export interface PopoverContentExtendProps {
 }
+/**
+ * Extend this interface to add custom popover indicator properties in your application.
+ */
+export interface PopoverIndicatorExtendProps {
+}
 /**
  * Extend this interface to add custom popover arrow properties in your application.
  */
@@ -46,15 +50,13 @@ export interface AnimateParams {
     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 PopoverContentProps<T extends HtmlElementTagName, B extends Base = Base> extends HtmlAtomProps<T, B>, PopoverContentExtendProps {
+}
+export interface PopoverIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, PopoverIndicatorExtendProps {
 }
 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 {
+export interface PopoverTriggerProps<T extends keyof HTMLElementTagNameMap, B extends Base = Base> extends HtmlAtomProps<T, B>, PopoverTriggerExtendProps {
     children?: Snippet<[{
         popover?: PopoverBond;
     }]>;

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

@@ -1,22 +1,29 @@
-<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 lang="ts">
+	import type { PortalBond } from './bond.svelte';
+	import { PortalsBond } from './portals/bond.svelte';
+
+	let { portal, children = undefined } = $props();
+
+	const portalsBond = PortalsBond.get();
+	const activePortal = $derived.by(() => {
+		if (typeof portal === 'string') {
+			return portalsBond?.state?.get(portal) ?? undefined;
+		}
+
+		return portal as PortalBond;
+	});
+
+	if (!portalsBond) {
+		throw new Error('Portals bond is not found');
+	}
+
+	function proxy(...args: any[]) {
+		activePortal?.share();
+
+		return children?.(...args);
+	}
+</script>
+
+{#if activePortal}
+	{@render proxy?.()}
+{/if}

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

@@ -1,13 +1,6 @@
-export default ActivePortal;
-type ActivePortal = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
 declare const ActivePortal: import("svelte").Component<{
     portal: any;
     children?: any;
 }, {}, "">;
-type $$ComponentProps = {
-    portal: any;
-    children?: any;
-};
+type ActivePortal = ReturnType<typeof ActivePortal>;
+export default ActivePortal;

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

@@ -1,83 +1,76 @@
-<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>
+<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 { HTMLAttributes } from 'svelte/elements';
+	import type { PortalOuterProps } from './types';
+	import { PortalsBond, PortalBond, PortalState, type PortalStateProps } from '.';
+	import { RootBond } from '../root';
+	import { HtmlAtom, type ElementType, 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,13 +1,11 @@
 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';
+import { type ElementType, type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: HtmlAtomProps<E, B> & import("./types").PortalOuterExtendProps & {
-        id: RootPortals | (string & {});
-        children?: Snippet;
+    props: import("../atom").HtmlAtomProps<E, B> & import("./types").PortalOuterExtendProps & {
+        id: import("../root/root.svelte").RootPortals | (string & {});
+        children?: import("svelte").Snippet;
     } & HTMLAttributes<ElementType<E>>;
     exports: {
         getBond: () => PortalBond;