@humanspeak/svelte-motion/dist/utils/svg.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

/**
 * SVG-specific properties that need special handling during animation.
 * These properties are not standard CSS properties and need to be transformed.
 */
export declare const SVG_PATH_PROPERTIES: Set<string>;
/**
 * The SVG namespace URI.
 */
export declare const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
/**
 * Set of SVG tag names that should be created in the SVG namespace.
 * This list covers all standard SVG elements.
 */
export declare const SVG_TAGS: Set<string>;
/**
 * Determines whether the provided tag name is an SVG element tag.
 *
 * @param {string} tag The tag name to test.
 * @returns {boolean} True when the tag is an SVG element.
 * @example
 * isSVGTag('path') // true
 * isSVGTag('div') // false
 */
export declare const isSVGTag: (tag: string) => boolean;
/**
 * Check if an element is an SVG path element.
 */
/**
 * Determines whether the provided element is an SVGPathElement.
 *
 * @param {Element} element The candidate element to test.
 * @returns {element is SVGPathElement} True when the element is an SVG path.
 * @example
 * const el = document.createElementNS('http://www.w3.org/2000/svg', 'path')
 * if (isSVGPathElement(el)) {
 *   // el is now typed as SVGPathElement
 * }
 */
export declare const isSVGPathElement: (element: Element) => element is SVGPathElement;
/**
 * Check if an element is any SVG element.
 */
/**
 * Determines whether the provided element is an SVGElement.
 *
 * @param {Element} element The candidate element to test.
 * @returns {element is SVGElement} True when the element is an SVG element.
 * @example
 * const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
 * if (isSVGElement(svg)) {
 *   // svg is now typed as SVGElement
 * }
 */
export declare const isSVGElement: (element: Element) => element is SVGElement;
/**
 * Transform SVG path-specific animation properties to their CSS equivalents.
 *
 * Motion's pathLength property creates a line-drawing effect by manipulating
 * strokeDasharray and strokeDashoffset. This function transforms:
 * - pathLength: 0 -> 1 becomes strokeDasharray: "0 1" -> "1 1"
 * - pathOffset: value becomes strokeDashoffset: -value (inverted for drawing direction)
 *
 * @param element - The SVG element being animated
 * @param keyframes - The animation keyframes that may contain SVG properties
 * @returns Transformed keyframes with CSS-compatible properties
 */
/**
 * Transforms SVG path-specific animation properties into DOM-compatible attributes.
 *
 * Normalized behavior (React/Framer Motion parity):
 * - Ensures `pathLength="1"` is set when any path prop is present
 * - Maps `pathLength`/`pathSpacing` → unitless `stroke-dasharray`
 * - Maps `pathOffset` → unitless negative `stroke-dashoffset`
 *
 * @param {Element} element The element being animated (must be an SVG path).
 * @param {Record<string, unknown>} keyframes The input keyframes possibly containing path props.
 * @returns {Record<string, unknown>} A transformed keyframe object safe for animation.
 */
export declare const transformSVGPathProperties: (element: Element, keyframes: Record<string, unknown>) => Record<string, unknown>;
/**
 * Check if any keyframes contain SVG path properties.
 */
/**
 * Checks if any SVG path-related properties are present in the keyframes object.
 *
 * @param {Record<string, unknown>} keyframes The keyframes to inspect.
 * @returns {boolean} True if any of `pathLength`, `pathSpacing`, or `pathOffset` are present.
 */
export declare const hasSVGPathProperties: (keyframes: Record<string, unknown>) => boolean;
/**
 * Transform initial SVG path properties for initial state setup.
 * This ensures that the initial state also has the proper strokeDasharray values.
 */
/**
 * Transforms initial keyframes for SVG paths so that the initial state uses
 * normalized dash attributes.
 *
 * @param {Element} element The element being animated (must be an SVG path).
 * @param {Record<string, unknown> | undefined} initial Initial keyframes, if provided.
 * @returns {Record<string, unknown> | undefined} Transformed initial keyframes or the original value.
 */
export declare const transformInitialSVGPathProperties: (element: Element, initial: Record<string, unknown> | undefined) => Record<string, unknown> | undefined;
/**
 * Computes normalized SVG path attributes for initial render without requiring an element.
 *
 * Behavior matches React/Framer Motion parity:
 * - Always sets pathLength="1" whenever any of path props are present
 * - stroke-dasharray = pathLength + ' ' + (pathSpacing ?? 1)
 * - stroke-dashoffset = -(pathOffset ?? 0)
 *
 * The returned object is suitable for direct DOM attribute assignment (dash-cased keys).
 *
 * @param {Record<string, unknown> | null | undefined} initial Incoming initial keyframes object
 * @returns {Record<string, string> | null} Normalized attribute map or null if no path props
 */
export declare const computeNormalizedSVGInitialAttrs: (initial: Record<string, unknown> | null | undefined) => Record<string, string> | null;