@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.44

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

@@ -1,6 +1,34 @@
 export type AnimatePopoverContentParams = {
+    /** Animation duration in seconds (default: 0.2) */
     duration?: number;
+    /** Delay before animation starts in seconds (default: 0) */
     delay?: number;
-    ease?: string;
+    /** Use spring physics for natural motion (default: false) */
+    spring?: boolean;
+    /** Spring stiffness (default: 300) */
+    stiffness?: number;
+    /** Spring damping (default: 30) */
+    damping?: number;
 };
+/**
+ * Modern popover animation inspired by Radix UI and Linear
+ *
+ * Features:
+ * - Vertical scale only (0.96 → 1) for depth without width distortion
+ * - Smart directional slide (adapts to offset and arrow presence)
+ * - Smooth fade (0 → 1)
+ * - Optional spring physics for natural feel
+ * - Transform origin anchored to trigger side
+ *
+ * Edge cases handled:
+ * - offset=0: Minimal slide (4px) for subtle effect
+ * - No arrow: Uses offset-based slide distance
+ * - With arrow: Enhanced slide for arrow reveal
+ *
+ * @example
+ * ```svelte
+ * <Popover.Content animate={animatePopoverContent()}>
+ * <Popover.Content animate={animatePopoverContent({ spring: true })}>
+ * ```
+ */
 export declare function animatePopoverContent(params?: AnimatePopoverContentParams): (node: HTMLElement) => void;

package/dist/components/popover/motion.js

@@ -1,57 +1,135 @@
-import { animate } from 'motion';
+import { animate, spring } from 'motion';
+import { untrack } from 'svelte';
 import { PopoverBond } from '.';
-import { DURATION } from '../../shared';
+/**
+ * Modern popover animation inspired by Radix UI and Linear
+ *
+ * Features:
+ * - Vertical scale only (0.96 → 1) for depth without width distortion
+ * - Smart directional slide (adapts to offset and arrow presence)
+ * - Smooth fade (0 → 1)
+ * - Optional spring physics for natural feel
+ * - Transform origin anchored to trigger side
+ *
+ * Edge cases handled:
+ * - offset=0: Minimal slide (4px) for subtle effect
+ * - No arrow: Uses offset-based slide distance
+ * - With arrow: Enhanced slide for arrow reveal
+ *
+ * @example
+ * ```svelte
+ * <Popover.Content animate={animatePopoverContent()}>
+ * <Popover.Content animate={animatePopoverContent({ spring: true })}>
+ * ```
+ */
 export function animatePopoverContent(params = {}) {
+    let prevOpen;
+    const bond = PopoverBond.get();
     return (node) => {
-        const bond = PopoverBond.get();
-        const { duration = DURATION.quick / 1000, delay = 0, ease = 'easeInOut' } = params;
+        const { duration = .05, delay = 0, spring: useSpring = false, stiffness = 300, damping = 30 } = params;
         const isOpen = bond?.state.props.open ?? false;
-        const position = bond.state.position;
-        if (!position) {
+        const position = bond?.state.position;
+        if (!position)
             return;
-        }
-        const placement = position.placement;
-        const dy = placement?.startsWith('top') ? -1 : placement?.startsWith('bottom') ? 1 : 0;
-        const dx = placement?.startsWith('left') ? -1 : placement?.startsWith('right') ? 1 : 0;
-        const offset = bond.state.props.offset;
-        const xOffset = dx * offset;
-        const yOffset = dy * offset;
-        const openAsNumber = +isOpen;
-        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 s0 = 0.9;
-        const s1 = 1;
-        const from = isOpen ? s1 : s0;
-        animate(node, {
-            opacity: openAsNumber,
-            y: dy * (!isOpen ? -1 : 0) * (arrowClientHeight + yOffset),
-            x: dx * (!isOpen ? -1 : 0) * (arrowClientWidth + xOffset),
-            scaleY: dy ? (isOpen ? [from, s1] : [s1, from]) : undefined,
-            scaleX: dx ? (isOpen ? [from, s1] : [s1, from]) : undefined,
-            transformOrigin
-        }, { duration, delay, ease });
+        // Skip animation if open state hasn't changed
+        if (isOpen === prevOpen)
+            return;
+        prevOpen = isOpen;
+        requestAnimationFrame(() => {
+            const placement = untrack(() => position.placement);
+            const [side, alignment] = placement?.split('-') ?? ['bottom', ''];
+            // Get offset and arrow configuration
+            const offset = untrack(() => bond?.state.props.offset ?? 0);
+            const hasArrow = untrack(() => bond?.state.props.arrow ?? false);
+            // Calculate transform origin (anchor point relative to trigger)
+            const transformOrigin = getTransformOrigin(side, alignment);
+            // Calculate smart directional offset based on offset and arrow
+            const slideDistance = getSmartSlideDistance(offset, hasArrow);
+            const { x: offsetX, y: offsetY } = getDirectionalOffset(side, slideDistance);
+            // Set initial styles
+            node.style.transformOrigin = transformOrigin;
+            node.style.pointerEvents = 'none';
+            // Modern animation values
+            const keyframes = {
+                scaleY: isOpen ? [0.96, 1] : [1, 0.96],
+                translateX: isOpen ? [`${offsetX}px`, '0px'] : ['0px', `${offsetX}px`],
+                translateY: isOpen ? [`${offsetY}px`, '0px'] : ['0px', `${offsetY}px`],
+                opacity: isOpen ? [0, 1] : [1, 0]
+            };
+            // Animate with spring or standard easing
+            const animation = animate(node, keyframes, useSpring
+                ? { easing: spring({ stiffness, damping }), delay }
+                : { duration, easing: [0.16, 1, 0.3, 1], delay } // Custom cubic-bezier for smooth motion
+            );
+            animation.finished.then(() => {
+                node.style.pointerEvents = 'auto';
+            });
+        });
     };
 }
+/**
+ * Calculate transform origin based on popover placement
+ * Anchors the animation to the side closest to the trigger
+ */
+function getTransformOrigin(side, alignment) {
+    const horizontal = (() => {
+        if (side === 'top' || side === 'bottom') {
+            if (alignment === 'start')
+                return 'left';
+            if (alignment === 'end')
+                return 'right';
+            return 'center';
+        }
+        return side === 'left' ? 'right' : side === 'right' ? 'left' : 'center';
+    })();
+    const vertical = (() => {
+        if (side === 'left' || side === 'right') {
+            if (alignment === 'start')
+                return 'top';
+            if (alignment === 'end')
+                return 'bottom';
+            return 'center';
+        }
+        return side === 'top' ? 'bottom' : side === 'bottom' ? 'top' : 'center';
+    })();
+    return `${horizontal} ${vertical}`;
+}
+/**
+ * Calculate smart slide distance based on offset and arrow configuration
+ *
+ * Logic:
+ * - offset=0 & no arrow: 4px (minimal, subtle effect)
+ * - offset=0 & arrow: 6px (enough to show arrow animation)
+ * - offset>0 & no arrow: min(offset/2, 8px) (proportional to gap)
+ * - offset>0 & arrow: 8px (standard directional slide)
+ */
+function getSmartSlideDistance(offset, hasArrow) {
+    if (offset === 0) {
+        // Flush against trigger - use minimal slide
+        return hasArrow ? 6 : 4;
+    }
+    if (hasArrow) {
+        // With arrow, use standard 8px slide for consistent arrow reveal
+        return 8;
+    }
+    // No arrow, offset > 0: Use proportional slide (max 8px)
+    // This creates a subtle effect that scales with the gap
+    return Math.min(offset / 2, 8);
+}
+/**
+ * Calculate directional offset based on placement side
+ */
+function getDirectionalOffset(side, distance) {
+    switch (side) {
+        case 'top':
+            return { x: 0, y: distance };
+        case 'bottom':
+            return { x: 0, y: -distance };
+        case 'left':
+            return { x: distance, y: 0 };
+        case 'right':
+            return { x: -distance, y: 0 };
+        default:
+            return { x: 0, y: -distance };
+    }
+}

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

@@ -1,110 +1,97 @@
-<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.state.position);
-	const middlewareArrowData = $derived(position?.middlewareData?.arrow);
-	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="16"
-			height="8"
-			viewBox="0 0 16 8"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			style="transform: rotate({rotation}deg);"
-		>
-			<path d="M0 8C2 8 6 4 8 0C10 4 14 8 16 8H0Z" fill="currentColor" />
-		</svg>
-	{/if}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { animate as motion } from 'motion';
+	import { HtmlAtom, type Base } from '../atom';
+	import { PopoverBond } from './bond.svelte';
+	import type { PopoverArrowProps } from './types';
+
+	const bond = PopoverBond.get();
+
+	if (!bond) {
+		throw new Error('');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		animate = _animate,
+		...restProps
+	}: PopoverArrowProps<E, B> = $props();
+
+	const position = $derived(bond.state.position);
+	const middlewareArrowData = $derived(position?.middlewareData?.arrow);
+	const side = $derived(position?.placement?.split('-')[0] ?? 'top');
+
+	const arrowProps = $derived({
+		...bond.arrow().spread,
+		...restProps
+	} as Record<string, unknown>);
+
+	// 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]}
+	animate={animate?.bind(bond.state)}
+	style="{side}: 100%;"
+	{...arrowProps}
+>
+	{#if children}
+		{@render children({ popover: bond })}
+	{:else}
+		<svg
+			width="16"
+			height="8"
+			viewBox="0 0 16 8"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			style="transform: rotate({rotation}deg);"
+		>
+			<path d="M0 8C2 8 6 4 8 0C10 4 14 8 16 8H0Z" fill="currentColor" />
+		</svg>
+	{/if}
+</HtmlAtom>

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

@@ -1,8 +1,7 @@
-import type { HTMLAttributes } from 'svelte/elements';
 import { type Base } from '../atom';
 import type { PopoverArrowProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: PopoverArrowProps<E, B> & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    props: PopoverArrowProps<E, B>;
     exports: {};
     bindings: "";
     slots: {};