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

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

@@ -1,111 +1,111 @@
-<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 Base } from '../atom';
-	import { PopoverBond } from './bond.svelte';
-	import type { PopoverArrowProps } from './types';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = PopoverBond.get();
-
-	if (!bond) {
-		throw new Error('');
-	}
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: PopoverArrowProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const position = $derived(bond.position);
-	const middlewareArrowData = $derived(position?.middlewareData?.arrow);
-	const isReady = $derived(!!middlewareArrowData);
-	const side = $derived(position?.placement?.split('-')[0] ?? 'top');
-
-	const arrowProps = $derived({
-		...bond.arrow(),
-		...restProps
-	});
-
-	// Rotation based on placement side
-	const rotation = $derived.by(() => {
-		switch (side) {
-			case 'top':
-				return 180;
-			case 'bottom':
-				return 0;
-			case 'left':
-				return 90;
-			case 'right':
-				return -90;
-			default:
-				return 0;
-		}
-	});
-
-	function _animate(node: HTMLElement) {
-		if (!middlewareArrowData) {
-			return;
-		}
-
-		const { x, y } = middlewareArrowData;
-
-		const isMainAxis = side === 'top' || side === 'bottom';
-
-		const crossAxisStyle = isMainAxis
-			? {
-					left: 0
-				}
-			: {
-					top: 0
-				};
-
-		motion(
-			node,
-			{
-				x: x ?? 0,
-				y: y ?? 0,
-				opacity: 1,
-				...crossAxisStyle
-			},
-			{ duration: 0 }
-		);
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="popover.arrow"
-	class={['text-border border-border pointer-events-none absolute opacity-0', '$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)}
-	style="{side}: 100%;"
-	{...arrowProps}
->
-	{#if children}
-		{@render children({ popover: bond })}
-	{:else}
-		<svg
-			width="12"
-			height="12"
-			viewBox="0 0 12 12"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			style="transform: rotate({rotation}deg);"
-		>
-			<path d="M0 12L6 6L12 12H0Z" fill="currentColor" stroke="none" />
-		</svg>
-	{/if}
-</HtmlAtom>
+<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 Base } from '../atom';
+	import { PopoverBond } from './bond.svelte';
+	import type { PopoverArrowProps } from './types';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = PopoverBond.get();
+
+	if (!bond) {
+		throw new Error('');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: PopoverArrowProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const position = $derived(bond.position);
+	const middlewareArrowData = $derived(position?.middlewareData?.arrow);
+	const isReady = $derived(!!middlewareArrowData);
+	const side = $derived(position?.placement?.split('-')[0] ?? 'top');
+
+	const arrowProps = $derived({
+		...bond.arrow(),
+		...restProps
+	});
+
+	// Rotation based on placement side
+	const rotation = $derived.by(() => {
+		switch (side) {
+			case 'top':
+				return 180;
+			case 'bottom':
+				return 0;
+			case 'left':
+				return 90;
+			case 'right':
+				return -90;
+			default:
+				return 0;
+		}
+	});
+
+	function _animate(node: HTMLElement) {
+		if (!middlewareArrowData) {
+			return;
+		}
+
+		const { x, y } = middlewareArrowData;
+
+		const isMainAxis = side === 'top' || side === 'bottom';
+
+		const crossAxisStyle = isMainAxis
+			? {
+					left: 0
+				}
+			: {
+					top: 0
+				};
+
+		motion(
+			node,
+			{
+				x: x ?? 0,
+				y: y ?? 0,
+				opacity: 1,
+				...crossAxisStyle
+			},
+			{ duration: 0 }
+		);
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="popover.arrow"
+	class={['text-border border-border pointer-events-none absolute opacity-0', '$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)}
+	style="{side}: 100%;"
+	{...arrowProps}
+>
+	{#if children}
+		{@render children({ popover: bond })}
+	{:else}
+		<svg
+			width="12"
+			height="12"
+			viewBox="0 0 12 12"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			style="transform: rotate({rotation}deg);"
+		>
+			<path d="M0 12L6 6L12 12H0Z" fill="currentColor" stroke="none" />
+		</svg>
+	{/if}
+</HtmlAtom>

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

@@ -1,139 +1,178 @@
-<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>
+<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);
+
+	const openAsNumber = $derived(+isOpen);
+	const deltaArrow = $derived(position?.middlewareData?.arrow ? 1 : 0);
+
+	let isInitialized = false;
+
+	function _containerInitial(this: typeof bond.state, node: Element) {
+		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 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)`;
+	}
+
+	let isOpened = false;
+
+	function _animate(this: typeof bond.state, node: Element) {
+		const isOpen = this.isOpen;
+
+		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
+		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
+
+		const _x = openAsNumber * dx;
+		const _y = openAsNumber * dy;
+
+		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: _y + dy * (!isOpen ? -1 : 0) * (arrowClientHeight + yOffset),
+				x: _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;
+	}
+</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-root.svelte

@@ -15,23 +15,22 @@
 		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 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) {

package/dist/components/popover/popover.stories.svelte

@@ -3,7 +3,6 @@
 	import { Popover as Popover_ } from '.';
 	import Root from '../root/root.svelte';
 	import { clickoutPopover } from './attachments.svelte';
-	import { animate } from 'motion';
 	import { Button } from '../button';
 
 	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
@@ -42,20 +41,6 @@
 							atom.state.close();
 						})}
 						class="bg-card"
-						animate={function (this, node) {
-							const isOpen = this.isOpen;
-
-							const m = animate(
-								node,
-								{
-									y: (isOpen ? 0 : -1) * 8,
-									opacity: +isOpen
-								},
-								{
-									duration: 0.1
-								}
-							);
-						}}
 					>
 						<div>Hello World !</div>
 						<Popover_.Arrow />