@humanspeak/svelte-motion/dist/utils/style.d.ts

Framer Motion for Svelte 5. Declarative motion.<tag> components with AnimatePresence exit animations, gestures (hover, tap, drag, focus, in-view), variants, FLIP layout animations, shared-layout transitions, spring physics, and scroll-linked motion values

import { type MotionValue } from 'motion-dom';
/**
 * Structural MotionValue shape accepted by object-form styles.
 *
 * The public API intentionally stays structural because Svelte Motion wraps
 * and augments MotionValues while preserving Motion's runtime contract.
 */
export type MotionStyleMotionValue = {
    /** Read the current style value. */
    get: () => string | number;
};
/**
 * A value accepted inside Motion's object-form `style` prop.
 *
 * Static values are serialized into the rendered inline style. MotionValues
 * are also serialized with their current value, then subscribed with
 * `motion-dom`'s `styleEffect` so they can update the DOM without rerenders.
 */
export type MotionStyleValue = string | number | MotionStyleMotionValue | null | undefined;
/**
 * React-style object form for the `style` prop.
 *
 * Supports normal CSS properties, CSS variables, and Motion transform
 * shortcuts like `x`, `y`, `scale`, and `rotate`.
 */
export type MotionStyle = Record<string, MotionStyleValue>;
/**
 * Merge inline CSS styles from an existing style string with a Motion initial definition.
 * This is used during SSR to reflect the initial state in server-rendered markup.
 */
export declare const mergeInlineStyles: (existingStyle: unknown, initial: Record<string, unknown> | null | undefined, animateFallback?: Record<string, unknown> | null | undefined) => string;
/**
 * Extract the user-authored `transform` declaration from a `style` prop.
 *
 * Used by the projection system as the "base" transform a node resets to
 * while measuring — the value the user wrote, independent of any
 * motion-applied transform (`initial`/`animate`/FLIP/drag) that lands on
 * `element.style.transform` after mount. Reading it from the `style` prop
 * rather than the live inline style is what keeps an `initial={{ x }}` (or
 * any transform-type initial/animate) from being mistaken for the base.
 *
 * Returns `''` when the prop is not a string or carries no transform.
 *
 * @param style The component's `style` prop.
 * @returns The user's `transform` value, or `''`.
 * @example
 * ```ts
 * extractTransform('opacity: 0.5; transform: translateX(10px) scale(2)')
 * // => 'translateX(10px) scale(2)'
 * extractTransform('color: red') // => ''
 * extractTransform({ color: 'red' }) // => '' (non-string)
 * ```
 */
export declare const extractTransform: (style: unknown) => string;
/**
 * Serialize a string or object-form Motion style prop into inline CSS.
 *
 * @param style The consumer-provided style prop.
 * @returns Inline CSS suitable for Svelte's `style` attribute.
 */
export declare const serializeMotionStyle: (style: string | MotionStyle | null | undefined) => string;
/**
 * Collect MotionValue entries from object-form style props.
 *
 * @param style The consumer-provided style prop.
 * @returns A map of style keys to MotionValues, or `undefined` when no live
 *   style values are present.
 */
export declare const collectMotionStyleValues: (style: unknown) => Record<string, MotionValue> | undefined;