import * as solid_js from 'solid-js';
import { Accessor, JSX, Component } from 'solid-js';
import { SpringTarget as SpringTarget$1, WidenSpringTarget as WidenSpringTarget$1, SpringOptions, SpringConfig } from './utils/spring.js';
export { createSpring } from './utils/spring.js';

/**
 * Animation Trigger Hooks
 *
 * This file contains hooks for creating animation triggers based on common interactions
 * such as hover, focus, click, intersection (in-view), and more.
 */

/**
 * Animation trigger types supported by the system
 */
type AnimationTrigger = "mount" | "unmount" | "hover" | "focus" | "click" | "inView" | "active" | "always" | (() => boolean);
/**
 * Options for inView trigger
 */
interface InViewOptions {
    /**
     * Root element to use as viewport
     * Default: browser viewport
     */
    root?: Element | null;
    /**
     * Margin around the root element
     * Default: "0px"
     */
    rootMargin?: string;
    /**
     * Threshold for when element is considered visible
     * Can be a single number or an array of numbers from 0 to 1.0
     * Default: 0 (any part of element visible)
     */
    threshold?: number | number[];
    /**
     * If true, trigger remains active once element enters view
     * Default: false
     */
    once?: boolean;
}
/**
 * Creates a hover state trigger for animations
 *
 * @param ref Reference to the element to track hover state
 * @returns Boolean signal indicating if element is being hovered
 */
declare function useHoverTrigger(ref: Accessor<HTMLElement | null | undefined>): Accessor<boolean>;
/**
 * Creates a focus state trigger for animations
 *
 * @param ref Reference to the element to track focus state
 * @returns Boolean signal indicating if element has focus
 */
declare function useFocusTrigger(ref: Accessor<HTMLElement | null | undefined>): Accessor<boolean>;
/**
 * Creates a click state trigger for animations
 *
 * @param ref Reference to the element to track click state
 * @param options Configuration options
 * @returns Boolean signal indicating if element is clicked
 */
declare function useClickTrigger(ref: Accessor<HTMLElement | null | undefined>, options?: {
    toggle?: boolean;
    duration?: number;
    handleClickOutside?: boolean;
}): Accessor<boolean>;
/**
 * Creates an active state trigger for animations (mousedown/touchstart)
 *
 * @param ref Reference to the element to track active state
 * @returns Boolean signal indicating if element is being pressed
 */
declare function useActiveTrigger(ref: Accessor<HTMLElement | null | undefined>): Accessor<boolean>;
/**
 * Creates an in-view state trigger for animations using IntersectionObserver
 *
 * @param ref Reference to the element to track viewport intersection
 * @param options IntersectionObserver options
 * @returns Boolean signal indicating if element is in viewport
 */
declare function useInViewTrigger(ref: Accessor<HTMLElement | null | undefined>, options?: InViewOptions): Accessor<boolean>;
/**
 * Creates a trigger based on the specified animation trigger type
 *
 * @param ref Reference to the element
 * @param triggerType Type of trigger to create
 * @param options Additional options for the trigger
 * @returns Boolean signal indicating if trigger is active
 */
declare function useTrigger(ref: Accessor<HTMLElement | null | undefined>, triggerType: AnimationTrigger, options?: any): Accessor<boolean>;

/**
 * Spring Animation Bridge
 *
 * This file serves as a bridge between the core spring animation system and the Solid Styles library.
 * It provides a unified API for creating and controlling animations with proper lifecycle management.
 */

type WidenSpringTarget<T> = WidenSpringTarget$1<T>;
type SpringTarget = SpringTarget$1;
/**
 * The current state of an animation
 */
type AnimationState = "idle" | "running" | "paused" | "completed" | "cancelled";
/**
 * Animation controls interface
 */
interface AnimationControls<T extends SpringTarget> {
    /**
     * Start animation to the specified target value
     *
     * @param target Target value to animate to
     * @returns Animation controls (for chaining)
     */
    start: (target?: WidenSpringTarget<T>) => AnimationControls<T>;
    /**
     * Immediately set value without animation
     *
     * @param value Value to set
     * @returns Animation controls (for chaining)
     */
    set: (value: WidenSpringTarget<T>) => AnimationControls<T>;
    /**
     * Stop ongoing animation
     *
     * @returns Animation controls (for chaining)
     */
    stop: () => AnimationControls<T>;
    /**
     * Pause ongoing animation
     *
     * @returns Animation controls (for chaining)
     */
    pause: () => AnimationControls<T>;
    /**
     * Resume paused animation
     *
     * @returns Animation controls (for chaining)
     */
    resume: () => AnimationControls<T>;
    /**
     * Reverse animation direction
     *
     * @returns Animation controls (for chaining)
     */
    reverse: () => AnimationControls<T>;
    /**
     * Complete animation immediately
     *
     * @returns Animation controls (for chaining)
     */
    finish: () => AnimationControls<T>;
}
/**
 * Result of animation creation
 */
interface AnimationResult$1<T extends SpringTarget> {
    /**
     * Current animated value
     */
    value: Accessor<T>;
    /**
     * Current animation state
     */
    state: Accessor<AnimationState>;
    /**
     * Animation controls
     */
    controls: AnimationControls<T>;
    /**
     * Whether animation is running in reverse
     */
    isReversed: Accessor<boolean>;
    /**
     * Whether animation is currently active
     */
    isActive?: Accessor<boolean>;
}
/**
 * Animation configuration
 */
interface AnimationConfig$1<T extends SpringTarget> {
    /**
     * Starting value
     */
    from: T;
    /**
     * Target value
     */
    to: WidenSpringTarget<T>;
    /**
     * When to trigger animation
     * @example "mount" | "hover" | "inView"
     */
    when?: AnimationTrigger | (() => boolean);
    /**
     * Condition to trigger animation
     */
    condition?: () => boolean;
    /**
     * Whether to reverse animation when condition becomes false
     */
    reverseOnExit?: boolean;
    /**
     * Delay before animation starts (in ms)
     */
    delay?: number;
    /**
     * Animation spring options
     */
    config?: Partial<SpringConfig>;
    /**
     * Called when animation starts
     */
    onStart?: () => void;
    /**
     * Called when animation completes
     */
    onComplete?: () => void;
    /**
     * Called when animation is cancelled
     */
    onCancel?: () => void;
    /**
     * Keyframe animation options
     * If provided, the animation will use keyframes instead of from/to
     */
    keyframes?: KeyframeConfig[];
}
/**
 * Keyframe definition with percentage support
 */
interface KeyframeConfig {
    /**
     * Value to animate to at this keyframe
     */
    value: any;
    /**
     * Percentage position in the animation sequence (0-100)
     * If omitted, keyframes are spaced evenly
     * @example 0, 25, 50, 75, 100
     */
    percentage?: number;
    /**
     * Optional spring configuration override for this specific keyframe transition
     */
    config?: Partial<SpringConfig>;
}
/**
 * Options for keyframe animation
 */
interface KeyframeOptions {
    /**
     * Array of keyframe values to animate through
     * Can be simple values or full keyframe objects with percentage positions
     */
    keyframes: KeyframeConfig[];
    /**
     * Total animation duration in milliseconds
     * This defines the overall timeline that percentage keyframes reference
     * If omitted, animation will use natural spring timing
     */
    duration?: number;
    /**
     * If true, animation will loop through keyframes
     */
    loop?: boolean;
    /**
     * Global spring configuration for all keyframe transitions
     * Can be overridden by individual keyframe configs
     */
    springConfig?: Partial<SpringConfig>;
}
/**
 * Enhanced spring options with animation lifecycle callbacks
 */
interface AnimationOptions extends SpringOptions {
    /**
     * Called when animation starts
     */
    onStart?: () => void;
    /**
     * Called when animation completes
     */
    onComplete?: () => void;
    /**
     * Called when animation is paused
     */
    onPause?: () => void;
    /**
     * Called when animation is resumed from paused state
     */
    onResume?: () => void;
    /**
     * Called when animation is cancelled
     */
    onCancel?: () => void;
    /**
     * Called on each animation frame with current value
     */
    onUpdate?: (value: any) => void;
    /**
     * If true, animation starts immediately on creation
     * Default: true
     */
    immediate?: boolean;
    /**
     * If true, animation will automatically reverse on completion
     * Default: false
     */
    autoReverse?: boolean;
    /**
     * Number of times to repeat the animation
     * Default: 0 (no repeat)
     */
    repeat?: number;
    /**
     * Type of repetition (loop or reverse)
     */
    repeatType?: "loop" | "reverse";
    /**
     * If true, respects user's reduced motion preferences
     * Default: true
     */
    respectReducedMotion?: boolean;
    /**
     * Keyframe animation options
     * If provided, the animation will use keyframes instead of from/to
     */
    keyframeOptions?: KeyframeOptions;
    /**
     * Called when an animation that is currently running gets interrupted by a new `start()` invocation.
     */
    onInterrupt?: () => void;
    /**
     * Called when the animation encounters an unrecoverable error.
     */
    onError?: (error: any) => void;
}
/**
 * Creates an animated value with enhanced lifecycle management and controls.
 *
 * @param initialValue Initial value to animate from
 * @param targetValue Target value to animate to
 * @param options Animation options
 * @returns Animation value, state, and controls
 */
declare function createAnimation<T extends SpringTarget>(initialValue: T, targetValue: WidenSpringTarget<T>, options?: AnimationOptions): AnimationResult$1<T>;
/**
 * Creates a toggle animation that switches between two states.
 *
 * @param initialValue Initial value (inactive state)
 * @param activeValue Target value (active state)
 * @param options Animation options
 * @returns Animation result with toggle controls
 */
declare function createToggleAnimation<T extends SpringTarget>(initialValue: T, activeValue: WidenSpringTarget<T>, options?: AnimationOptions): {
    controls: {
        toggle: () => /*elided*/ any;
        activate: () => /*elided*/ any;
        deactivate: () => /*elided*/ any;
        setActive: (active: boolean) => /*elided*/ any;
        isActive: Accessor<boolean>;
        /**
         * Start animation to the specified target value
         *
         * @param target Target value to animate to
         * @returns Animation controls (for chaining)
         */
        start: (target?: WidenSpringTarget$1<T> | undefined) => AnimationControls<T>;
        /**
         * Immediately set value without animation
         *
         * @param value Value to set
         * @returns Animation controls (for chaining)
         */
        set: (value: WidenSpringTarget$1<T>) => AnimationControls<T>;
        /**
         * Stop ongoing animation
         *
         * @returns Animation controls (for chaining)
         */
        stop: () => AnimationControls<T>;
        /**
         * Pause ongoing animation
         *
         * @returns Animation controls (for chaining)
         */
        pause: () => AnimationControls<T>;
        /**
         * Resume paused animation
         *
         * @returns Animation controls (for chaining)
         */
        resume: () => AnimationControls<T>;
        /**
         * Reverse animation direction
         *
         * @returns Animation controls (for chaining)
         */
        reverse: () => AnimationControls<T>;
        /**
         * Complete animation immediately
         *
         * @returns Animation controls (for chaining)
         */
        finish: () => AnimationControls<T>;
    };
    isActive: Accessor<boolean>;
    /**
     * Current animated value
     */
    value: Accessor<T>;
    /**
     * Current animation state
     */
    state: Accessor<AnimationState>;
    /**
     * Whether animation is running in reverse
     */
    isReversed: Accessor<boolean>;
};

/**
 * Animated Styled Components
 *
 * This file provides a higher-order component that adds animation capabilities
 * to styled components or regular HTML elements.
 */

/**
 * Enhanced animation configuration for the animated component
 */
interface AnimateConfig<T extends SpringTarget = any> {
    /**
     * Initial state of the animation
     */
    from: T;
    /**
     * Target value to animate to
     */
    to: WidenSpringTarget<T>;
    /**
     * Spring configuration
     */
    config?: {
        /**
         * Spring stiffness
         * Default: 150
         */
        stiffness?: number;
        /**
         * Spring damping
         * Default: 15
         */
        damping?: number;
        /**
         * Animation delay in ms
         * Default: 0
         */
        delay?: number;
        /**
         * Whether to skip animation
         * Default: false
         */
        immediate?: boolean;
    };
    /**
     * Trigger for when to start the animation
     */
    when?: AnimationTrigger | AnimationTrigger[];
    /**
     * Options for inView trigger
     */
    inViewOptions?: InViewOptions;
    /**
     * If true, animation will play in reverse when trigger becomes inactive
     * Default: false
     */
    reverseOnExit?: boolean;
    /**
     * CSS styles for animation target
     * These will be applied automatically based on animation state
     */
    style?: Record<string, any>;
    /**
     * Variant name for predefined animations
     */
    variant?: string;
    /**
     * Lifecycle callbacks
     */
    onStart?: () => void;
    onComplete?: () => void;
    onInterrupt?: () => void;
    /**
     * If true, respects user's reduced motion preferences
     * Default: true
     */
    respectReducedMotion?: boolean;
}
/**
 * Props for the animated component
 */
interface AnimatedProps<P = {}> {
    /**
     * Animation configuration
     */
    animate?: AnimateConfig | AnimateConfig[];
    /**
     * Apply CSS transition instead of spring animation for reduced motion
     */
    reducedMotionTransition?: string;
    /**
     * Ref to the underlying element
     */
    ref?: (el: HTMLElement) => void;
    /**
     * CSS style overrides
     */
    style?: JSX.CSSProperties;
    /**
     * Whether to use hardware acceleration
     * Default: "auto" (uses GPU for transform animations)
     */
    hardware?: "auto" | "always" | "never";
}
/**
 * Predefined animation variants for common use cases
 */
declare const variants: Record<string, AnimateConfig>;
/**
 * Creates a SolidJS component with animation capabilities
 *
 * @param tag HTML tag or component to animate
 * @returns Animated component
 */
declare function animated<T extends keyof JSX.IntrinsicElements | Component<any>>(tag: T): (props: any) => JSX.Element;
declare const _default: typeof animated & {
    div: (props: any) => JSX.Element;
    span: (props: any) => JSX.Element;
    p: (props: any) => JSX.Element;
    h1: (props: any) => JSX.Element;
    h2: (props: any) => JSX.Element;
    h3: (props: any) => JSX.Element;
    h4: (props: any) => JSX.Element;
    h5: (props: any) => JSX.Element;
    h6: (props: any) => JSX.Element;
    a: (props: any) => JSX.Element;
    img: (props: any) => JSX.Element;
    button: (props: any) => JSX.Element;
    section: (props: any) => JSX.Element;
    article: (props: any) => JSX.Element;
    header: (props: any) => JSX.Element;
    footer: (props: any) => JSX.Element;
    main: (props: any) => JSX.Element;
    nav: (props: any) => JSX.Element;
    ul: (props: any) => JSX.Element;
    ol: (props: any) => JSX.Element;
    li: (props: any) => JSX.Element;
    input: (props: any) => JSX.Element;
    textarea: (props: any) => JSX.Element;
    select: (props: any) => JSX.Element;
    form: (props: any) => JSX.Element;
    svg: (props: any) => JSX.Element;
    path: (props: any) => JSX.Element;
};

/**
 * useAnimation Hook
 *
 * Core hook for creating animations with enhanced lifecycle management.
 * This hook is the foundation for all animation types in the system.
 */

/**
 * Animation configuration for the useAnimation hook
 */
interface AnimationConfig<T extends SpringTarget$1> extends AnimationOptions {
    /**
     * Initial value to animate from
     */
    from: T;
    /**
     * Target value to animate to
     */
    to: WidenSpringTarget$1<T>;
    /**
     * When to automatically trigger the animation
     * Can be a boolean signal or a function returning a boolean
     */
    when?: Accessor<boolean> | (() => boolean);
    /**
     * If true, animation will play in reverse when condition becomes false
     * Default: false
     */
    reverseOnExit?: boolean;
    /**
     * Delay before starting the animation (in ms)
     * Default: 0
     */
    delay?: number;
    /**
     * Condition to use for animation, overrides the 'when' property
     * Useful for custom control logic
     */
    condition?: Accessor<boolean>;
    /**
     * Callback to call when animation is interrupted
     */
    onInterrupt?: () => void;
}
/**
 * Result of the useAnimation hook
 */
interface AnimationResult<T extends SpringTarget$1> {
    /**
     * Current animated value
     * Note: Using any here to avoid complex generic type constraints
     * that are challenging to express fully in TypeScript
     */
    value: Accessor<any>;
    /**
     * Current animation state
     */
    state: Accessor<AnimationState>;
    /**
     * Animation controls for manual control
     */
    controls: AnimationControls<T>;
    /**
     * Force start animation
     */
    start: (target?: WidenSpringTarget$1<T>) => void;
    /**
     * Is animation active
     */
    isActive: Accessor<boolean>;
    /**
     * Whether animation is running in reverse
     * Required for compatibility with the spring-bridge AnimationResult
     */
    isReversed: Accessor<boolean>;
}
/**
 * Core hook for creating animations
 *
 * @param config Animation configuration
 * @returns Animation result with value and controls
 */
declare function useAnimation<T extends SpringTarget$1>(config: AnimationConfig<T>): AnimationResult<T>;
/**
 * Creates an animation that runs once on component mount
 *
 * @param config Animation configuration
 * @returns Animation result
 */
declare function useMountAnimation<T extends SpringTarget$1>(config: Omit<AnimationConfig<T>, "when">): AnimationResult<T>;
/**
 * Creates an animation that runs when component unmounts
 *
 * @param config Animation configuration
 * @returns Animation result with cleanup function
 */
declare function useUnmountAnimation<T extends SpringTarget$1>(config: Omit<AnimationConfig<T>, "when">): AnimationResult<T> & {
    cleanup: () => void;
};

/**
 * Keyframe Animation Hook
 *
 * This hook provides a percentage-based keyframe animation system powered by springs
 * offering the benefits of natural motion with the timing control of traditional animations.
 */

/**
 * Enhanced keyframe configuration with percentage support
 */
interface KeyframeAnimationConfig<T extends SpringTarget> {
    /**
     * Array of keyframes with percentage positions
     * Each keyframe defines a state at a specific percentage of the animation
     * Keyframes must be ordered by percentage (0-100)
     *
     * @example
     * keyframes: [
     *   { value: { opacity: 0, scale: 0.8 }, percentage: 0 },
     *   { value: { opacity: 1, scale: 1 }, percentage: 50 },
     *   { value: { opacity: 1, scale: 1.1 }, percentage: 75 },
     *   { value: { opacity: 1, scale: 1 }, percentage: 100 }
     * ]
     */
    keyframes: KeyframeConfig[];
    /**
     * Total duration of the animation in milliseconds
     * Required for percentage-based timing
     * @default 1000
     */
    duration?: number;
    /**
     * When to trigger animation
     * @example "mount" | "hover" | "inView"
     */
    when?: AnimationConfig$1<T>["when"];
    /**
     * Condition to trigger animation
     */
    condition?: () => boolean;
    /**
     * Whether to reverse animation when condition becomes false
     */
    reverseOnExit?: boolean;
    /**
     * Delay before animation starts (in ms)
     */
    delay?: number;
    /**
     * Whether to loop the animation
     * @default false
     */
    loop?: boolean;
    /**
     * Spring configuration for transitions between keyframes
     * Controls how "springy" the motion is between keyframes
     */
    springConfig?: {
        /**
         * Stiffness of the spring (higher = faster)
         * @default 170
         */
        stiffness?: number;
        /**
         * Damping of the spring (higher = less bouncy)
         * @default 26
         */
        damping?: number;
        /**
         * Precision threshold for considering animation complete
         * @default 0.01
         */
        precision?: number;
    };
    /**
     * Called when animation starts
     */
    onStart?: () => void;
    /**
     * Called when animation completes
     */
    onComplete?: () => void;
    /**
     * Called when animation is cancelled
     */
    onCancel?: () => void;
    /**
     * Called when a specific keyframe is reached
     */
    onKeyframe?: (index: number, keyframe: KeyframeConfig) => void;
}
/**
 * Result of the keyframe animation hook
 */
interface KeyframeAnimationResult<T extends SpringTarget> {
    /**
     * Current animated value
     */
    value: Accessor<T>;
    /**
     * Current animation state
     */
    state: Accessor<AnimationState>;
    /**
     * Animation controls
     */
    controls: AnimationResult$1<T>["controls"];
    /**
     * Whether animation is active
     */
    isActive: AnimationResult$1<T>["isActive"];
    /**
     * Whether animation is running in reverse
     */
    isReversed: AnimationResult$1<T>["isReversed"];
    /**
     * Current keyframe index
     */
    currentKeyframe: Accessor<number>;
    /**
     * Current progress (0-100)
     */
    progress: Accessor<number>;
    /**
     * Start the animation from the beginning
     *
     * @returns Animation controls for chaining
     */
    start: () => void;
    /**
     * Pause the animation
     *
     * @returns Animation controls for chaining
     */
    pause: () => void;
    /**
     * Resume a paused animation
     *
     * @returns Animation controls for chaining
     */
    resume: () => void;
    /**
     * Seek to a specific percentage
     *
     * @param percentage Target percentage (0-100)
     * @returns Animation controls for chaining
     */
    seekToPercentage: (percentage: number) => void;
    /**
     * Seek to a specific keyframe
     *
     * @param index Keyframe index
     * @returns Animation controls for chaining
     */
    seekToKeyframe: (index: number) => void;
}
/**
 * Hook for creating percentage-based keyframe animations
 * powered by the spring animation system
 *
 * @example
 * ```tsx
 * // Create a bouncing entrance animation with precise timing
 * const animation = useKeyframeAnimation({
 *   keyframes: [
 *     { value: { opacity: 0, y: -50 }, percentage: 0 },
 *     { value: { opacity: 1, y: 10 }, percentage: 60 },
 *     { value: { opacity: 1, y: -5 }, percentage: 80 },
 *     { value: { opacity: 1, y: 0 }, percentage: 100 }
 *   ],
 *   duration: 800,
 *   when: "mount"
 * });
 *
 * return (
 *   <animated("div") animate={animation}>
 *     I appear with a bounce!
 *   </animated("div")>
 * );
 * ```
 */
declare function useKeyframeAnimation<T extends SpringTarget>(config: KeyframeAnimationConfig<T>): KeyframeAnimationResult<T>;

/**
 * Built-in stagger patterns
 */
declare const StaggerPatterns: {
    forward: (index: number, total: number) => number;
    reverse: (index: number, total: number) => number;
    center: (index: number, total: number) => number;
    edges: (index: number, total: number) => number;
    random: () => number;
};
/**
 * Type for stagger pattern function
 */
type StaggerPattern = (index: number, total: number) => number;
/**
 * Base configuration for stagger
 */
interface StaggerOptions {
    /**
     * Delay in milliseconds between each item
     * @default 50
     */
    delay?: number;
    /**
     * Pattern to use for calculating delays
     * @default "forward"
     */
    pattern?: keyof typeof StaggerPatterns | StaggerPattern;
    /**
     * Maximum total delay for the entire sequence (ms)
     * Delays will be scaled to fit within this limit
     */
    maxTotalDelay?: number;
}
/**
 * Creates a stagger factory for generating animations with coordinated delays
 *
 * @example
 * ```
 * // Create a stagger sequence
 * const stagger = createStagger({ delay: 50, pattern: "forward" });
 *
 * // In your component rendering a list:
 * return (
 *   <div>
 *     {items.map((item, i) => (
 *       <animated("div")
 *         animate={stagger({
 *           from: { opacity: 0, y: 20 },
 *           to: { opacity: 1, y: 0 },
 *           when: "mount"
 *         }, i, items.length)}
 *       >
 *         {item.content}
 *       </animated("div")>
 *     ))}
 *   </div>
 * );
 * ```
 */
declare function createStagger(options?: StaggerOptions): <T extends SpringTarget>(animation: AnimationConfig$1<T>, index: number, total: number) => AnimationConfig$1<T>;
/**
 * Creates a stagger sequence for multiple items
 * with a cleaner, more declarative API
 *
 * @example
 * ```
 * // In your component:
 * const animations = useStagger(
 *   items.map(item => item.id), // Array of IDs or any values
 *   {
 *     from: { opacity: 0, y: 20 },
 *     to: { opacity: 1, y: 0 },
 *     when: "mount"
 *   },
 *   { delay: 80, pattern: "center" }
 * );
 *
 * // Then in your JSX:
 * return (
 *   <div>
 *     {items.map((item, i) => (
 *       <animated("div") key={item.id} animate={animations[i]}>
 *         {item.content}
 *       </animated("div")>
 *     ))}
 *   </div>
 * );
 * ```
 */
declare function useStagger<T extends SpringTarget, ID>(items: ID[], baseAnimation: AnimationConfig$1<T>, options?: StaggerOptions): AnimationConfig$1<T>[];

/**
 * A global registry to track active items across components
 * This enables coordination between different lists and components
 */
type ItemRegistry = {
    [namespace: string]: {
        activeId: Accessor<any>;
        setActiveId: (id: any) => void;
    };
};
/**
 * Get or create a registry for a namespace
 *
 * @param namespace Namespace to identify the registry
 * @returns The registry's active ID accessor and setter
 */
declare function getItemRegistry(namespace?: string): {
    activeId: Accessor<any>;
    setActiveId: (id: any) => void;
};
/**
 * Hook to create an animation that activates when an item is active
 * (e.g., when hovered, selected, focused)
 *
 * @param config Animation configuration
 * @param itemId ID of the current item
 * @param namespace Optional namespace for the registry (to separate different lists)
 * @returns Animation result
 */
declare function useItemAnimation<T extends SpringTarget, ID>(config: any, itemId: ID, namespace?: string): AnimationResult<T>;
/**
 * Hook to create handlers for item interactions
 *
 * @param itemId ID of the current item
 * @param namespace Optional namespace for the registry
 * @returns Object with event handlers
 */
declare function useItemHandlers<ID>(itemId: ID, namespace?: string): {
    onMouseEnter: () => void;
    onFocus: () => void;
    onMouseLeave: () => void;
    onBlur: () => void;
    onClick: () => void;
    isActive: () => boolean;
};
/**
 * Hook to easily create item animations with all necessary handlers
 *
 * @param config Animation configuration
 * @param itemId ID of the current item
 * @param namespace Optional namespace for registry
 * @returns Animation result and event handlers
 */
declare function useAnimatedItem<T extends SpringTarget, ID>(config: AnimationConfig$1<T>, itemId: ID, namespace?: string): {
    animation: AnimationResult<SpringTarget$1>;
    handlers: {
        onMouseEnter: () => void;
        onFocus: () => void;
        onMouseLeave: () => void;
        onBlur: () => void;
        onClick: () => void;
        isActive: () => boolean;
    };
};

/**
 * CSS Grid Animation Support
 *
 * Animate CSS Grid properties with spring physics
 */

interface GridAnimationConfig {
    /**
     * Grid template columns animation
     */
    columns?: {
        from: string | string[];
        to: string | string[];
    };
    /**
     * Grid template rows animation
     */
    rows?: {
        from: string | string[];
        to: string | string[];
    };
    /**
     * Grid gap animation
     */
    gap?: {
        from: number | {
            row: number;
            column: number;
        };
        to: number | {
            row: number;
            column: number;
        };
    };
    /**
     * Grid area animations for children
     */
    areas?: {
        from: string;
        to: string;
    };
    /**
     * Spring configuration
     */
    config?: {
        stiffness?: number;
        damping?: number;
        precision?: number;
    };
}
/**
 * Hook for animating CSS Grid properties
 */
declare function useGridAnimation(config: GridAnimationConfig): {
    gridStyles: Accessor<Record<string, string>>;
    start: () => void;
    reset: () => void;
};
/**
 * Grid item animation for individual grid children
 */
interface GridItemAnimationConfig {
    /**
     * Grid column animation
     */
    column?: {
        from: number | {
            start: number;
            end: number;
        };
        to: number | {
            start: number;
            end: number;
        };
    };
    /**
     * Grid row animation
     */
    row?: {
        from: number | {
            start: number;
            end: number;
        };
        to: number | {
            start: number;
            end: number;
        };
    };
    /**
     * Grid area animation
     */
    area?: {
        from: string;
        to: string;
    };
    /**
     * Spring configuration
     */
    config?: {
        stiffness?: number;
        damping?: number;
        precision?: number;
    };
}
/**
 * Hook for animating individual grid items
 */
declare function useGridItemAnimation(config: GridItemAnimationConfig): {
    itemStyles: Accessor<Record<string, string>>;
    start: () => void;
    reset: () => void;
};

/**
 * SVG Animation Support
 *
 * Animate SVG properties and paths with spring physics
 */

interface SVGPathCommand {
    type: 'M' | 'L' | 'C' | 'Q' | 'A' | 'Z';
    values: number[];
}
interface SVGPathAnimationConfig {
    /**
     * Starting path
     */
    from: string;
    /**
     * Target path
     */
    to: string;
    /**
     * Spring configuration
     */
    config?: {
        stiffness?: number;
        damping?: number;
        precision?: number;
    };
}
/**
 * Hook for animating SVG paths
 */
declare function useSVGPathAnimation(config: SVGPathAnimationConfig): {
    path: Accessor<string>;
    start: () => void;
    reset: () => void;
};
interface SVGStrokeAnimationConfig {
    /**
     * Stroke dasharray animation
     */
    dashArray?: {
        from: number[];
        to: number[];
    };
    /**
     * Stroke dashoffset animation
     */
    dashOffset?: {
        from: number;
        to: number;
    };
    /**
     * Stroke width animation
     */
    strokeWidth?: {
        from: number;
        to: number;
    };
    /**
     * Spring configuration
     */
    config?: {
        stiffness?: number;
        damping?: number;
        precision?: number;
    };
}
/**
 * Hook for animating SVG stroke properties
 */
declare function useSVGStrokeAnimation(config: SVGStrokeAnimationConfig): {
    strokeStyles: Accessor<Record<string, string>>;
    start: () => void;
    reset: () => void;
};
interface SVGViewBoxAnimationConfig {
    /**
     * Starting viewBox
     */
    from: {
        x: number;
        y: number;
        width: number;
        height: number;
    };
    /**
     * Target viewBox
     */
    to: {
        x: number;
        y: number;
        width: number;
        height: number;
    };
    /**
     * Spring configuration
     */
    config?: {
        stiffness?: number;
        damping?: number;
        precision?: number;
    };
}
/**
 * Hook for animating SVG viewBox
 */
declare function useSVGViewBoxAnimation(config: SVGViewBoxAnimationConfig): {
    viewBox: Accessor<string>;
    start: () => void;
    reset: () => void;
};
/**
 * Draw-on animation for SVG paths
 */
declare function useSVGDrawAnimation(pathElement: Accessor<SVGPathElement | null>): {
    strokeStyles: Accessor<Record<string, string>>;
    draw: () => void;
    erase: () => void;
};
/**
 * Morph between different SVG shapes
 */
interface SVGShapeMorphConfig {
    /**
     * Starting shape type and properties
     */
    from: {
        type: 'circle' | 'rect' | 'ellipse' | 'polygon';
        props: Record<string, number | number[]>;
    };
    /**
     * Target shape type and properties
     */
    to: {
        type: 'circle' | 'rect' | 'ellipse' | 'polygon';
        props: Record<string, number | number[]>;
    };
    /**
     * Spring configuration
     */
    config?: {
        stiffness?: number;
        damping?: number;
        precision?: number;
    };
}
/**
 * Hook for morphing between SVG shapes
 */
declare function useSVGShapeMorph(config: SVGShapeMorphConfig): {
    path: Accessor<string>;
    start: () => void;
    reset: () => void;
};

/**
 * 3D Transform Animation Support
 *
 * Animate 3D transforms with spring physics
 */

interface Transform3DConfig {
    /**
     * 3D rotation around X axis (degrees)
     */
    rotateX?: {
        from: number;
        to: number;
    };
    /**
     * 3D rotation around Y axis (degrees)
     */
    rotateY?: {
        from: number;
        to: number;
    };
    /**
     * 3D rotation around Z axis (degrees)
     */
    rotateZ?: {
        from: number;
        to: number;
    };
    /**
     * 3D rotation with axis and angle
     */
    rotate3d?: {
        from: {
            x: number;
            y: number;
            z: number;
            angle: number;
        };
        to: {
            x: number;
            y: number;
            z: number;
            angle: number;
        };
    };
    /**
     * 3D translation
     */
    translate3d?: {
        from: {
            x: number;
            y: number;
            z: number;
        };
        to: {
            x: number;
            y: number;
            z: number;
        };
    };
    /**
     * 3D scale
     */
    scale3d?: {
        from: {
            x: number;
            y: number;
            z: number;
        };
        to: {
            x: number;
            y: number;
            z: number;
        };
    };
    /**
     * Perspective (pixels)
     */
    perspective?: {
        from: number;
        to: number;
    };
    /**
     * Perspective origin
     */
    perspectiveOrigin?: {
        from: {
            x: string | number;
            y: string | number;
        };
        to: {
            x: string | number;
            y: string | number;
        };
    };
    /**
     * Transform origin
     */
    transformOrigin?: {
        from: {
            x: string | number;
            y: string | number;
            z?: string | number;
        };
        to: {
            x: string | number;
            y: string | number;
            z?: string | number;
        };
    };
    /**
     * Backface visibility
     */
    backfaceVisibility?: 'visible' | 'hidden';
    /**
     * Transform style
     */
    transformStyle?: 'flat' | 'preserve-3d';
    /**
     * Spring configuration
     */
    config?: {
        stiffness?: number;
        damping?: number;
        precision?: number;
    };
}
/**
 * Hook for animating 3D transforms
 */
declare function use3DTransform(config: Transform3DConfig): {
    transformStyles: Accessor<Record<string, string>>;
    start: () => void;
    reset: () => void;
};
/**
 * Cube rotation animation
 */
declare function useCubeRotation(config?: {
    duration?: number;
    stiffness?: number;
    damping?: number;
}): {
    faceStyles: (face: 'front' | 'back' | 'left' | 'right' | 'top' | 'bottom') => Accessor<Record<string, string>>;
    containerStyles: Accessor<Record<string, string>>;
    rotate: () => void;
    reset: () => void;
};
/**
 * Card flip animation
 */
declare function useCardFlip(config?: {
    axis?: 'x' | 'y';
    stiffness?: number;
    damping?: number;
}): {
    frontStyles: Accessor<Record<string, string>>;
    backStyles: Accessor<Record<string, string>>;
    containerStyles: Accessor<Record<string, string>>;
    flip: () => void;
    reset: () => void;
    isFlipped: Accessor<boolean>;
};

/**
 * Gesture Support with Spring Animations
 *
 * Handle touch, swipe, pinch, and drag gestures with spring physics
 */

interface GestureConfig {
    /**
     * Enable specific gestures
     */
    gestures?: {
        drag?: boolean;
        swipe?: boolean;
        pinch?: boolean;
        rotate?: boolean;
    };
    /**
     * Drag configuration
     */
    drag?: {
        axis?: 'x' | 'y' | 'both';
        bounds?: {
            left?: number;
            right?: number;
            top?: number;
            bottom?: number;
        };
        snapPoints?: Array<{
            x: number;
            y: number;
        }>;
    };
    /**
     * Swipe configuration
     */
    swipe?: {
        threshold?: number;
        onSwipeLeft?: () => void;
        onSwipeRight?: () => void;
        onSwipeUp?: () => void;
        onSwipeDown?: () => void;
    };
    /**
     * Pinch configuration
     */
    pinch?: {
        minScale?: number;
        maxScale?: number;
        onPinch?: (scale: number) => void;
    };
    /**
     * Spring configuration
     */
    spring?: {
        stiffness?: number;
        damping?: number;
        precision?: number;
    };
}
/**
 * Hook for gesture support with spring animations
 */
declare function useGestures(element: Accessor<HTMLElement | undefined>, config?: GestureConfig): {
    transformStyles: Accessor<Record<string, string>>;
    isDragging: Accessor<boolean>;
    isPinching: Accessor<boolean>;
};
/**
 * Swipeable component wrapper
 */
declare function useSwipeable(config?: {
    onSwipeLeft?: () => void;
    onSwipeRight?: () => void;
    onSwipeUp?: () => void;
    onSwipeDown?: () => void;
    threshold?: number;
    spring?: {
        stiffness?: number;
        damping?: number;
    };
}): {
    swipeHandlers: {
        onTouchStart: (e: TouchEvent) => void;
        onTouchMove: (e: TouchEvent) => void;
        onTouchEnd: (e: TouchEvent) => void;
    };
    swipeStyles: Accessor<Record<string, string>>;
};

/**
 * Configuration for layout animations
 */
interface LayoutTransitionConfig extends SpringConfig {
    /**
     * Whether to animate width changes
     * @default true
     */
    animateWidth?: boolean;
    /**
     * Whether to animate height changes
     * @default true
     */
    animateHeight?: boolean;
    /**
     * Whether to animate position changes (x, y)
     * @default true
     */
    animatePosition?: boolean;
    /**
     * Whether to use transform for position animations (more performant)
     * @default true
     */
    useTransform?: boolean;
    /**
     * Callback when layout animation starts
     */
    onLayoutAnimationStart?: (element: HTMLElement) => void;
    /**
     * Callback when layout animation completes
     */
    onLayoutAnimationComplete?: (element: HTMLElement) => void;
}
/**
 * Layout Animation Engine
 *
 * Tracks element size and position changes and animates them using springs.
 * Uses ResizeObserver for size changes and requestAnimationFrame for position tracking.
 */
declare class LayoutAnimationEngine {
    private element;
    private config;
    private previousSnapshot;
    private currentSnapshot;
    private resizeObserver;
    private rafId;
    private isAnimating;
    private widthSpring;
    private heightSpring;
    private xSpring;
    private ySpring;
    constructor(element: HTMLElement, config?: LayoutTransitionConfig);
    /**
     * Initialize spring animations for each dimension
     */
    private initSprings;
    /**
     * Measure the current dimensions and position of the element
     */
    private measureElement;
    /**
     * Set up ResizeObserver and position tracking
     */
    private setupObservers;
    /**
     * Start tracking position changes
     */
    private startPositionTracking;
    /**
     * Handle layout changes and trigger animations
     */
    private handleLayoutChange;
    /**
     * Animate the layout change using springs
     */
    private animateLayout;
    /**
     * Update the configuration
     */
    updateConfig(config: Partial<LayoutTransitionConfig>): void;
    /**
     * Clean up observers and animations
     */
    destroy(): void;
}
/**
 * Create a layout animation engine for an element
 *
 * @param element The element to animate
 * @param config Layout transition configuration
 * @returns Layout animation engine instance
 */
declare function createLayoutAnimation(element: Accessor<HTMLElement | undefined>, config?: LayoutTransitionConfig): LayoutAnimationEngine | null;
/**
 * Hook for adding layout animations to any element
 *
 * @param config Layout transition configuration
 * @returns Ref function to attach to element
 *
 * @example
 * ```tsx
 * const Box = () => {
 *   const [expanded, setExpanded] = createSignal(false);
 *   const layoutRef = useLayoutAnimation({ stiffness: 400, damping: 30 });
 *
 *   return (
 *     <div ref={layoutRef}>
 *       <button onClick={() => setExpanded(!expanded())}>Toggle</button>
 *       {expanded() && <div>Extra content</div>}
 *     </div>
 *   );
 * };
 * ```
 */
declare function useLayoutAnimation(config?: LayoutTransitionConfig): solid_js.Setter<HTMLElement | undefined>;

/**
 * Layout Animation Components and Directives
 *
 * Provides easy-to-use components and directives for layout animations
 */

/**
 * Provider for global layout transition configuration
 *
 * @example
 * ```tsx
 * // Set global spring settings for all layout animations
 * <LayoutTransitionProvider config={{ stiffness: 400, damping: 30 }}>
 *   <App />
 * </LayoutTransitionProvider>
 * ```
 */
declare function LayoutTransitionProvider(props: {
    config: LayoutTransitionConfig;
    children: JSX.Element;
}): JSX.Element;
/**
 * Directive for adding layout animations to any element
 *
 * @example
 * ```tsx
 * <div use:layoutAnimation={{ stiffness: 400 }}>
 *   Content that will animate when size changes
 * </div>
 * ```
 */
declare function layoutAnimation(element: HTMLElement, accessor: () => LayoutTransitionConfig | boolean): void;
declare module "solid-js" {
    namespace JSX {
        interface Directives {
            layoutAnimation: LayoutTransitionConfig | boolean;
        }
    }
}
/**
 * Props for LayoutAnimated component
 */
interface LayoutAnimatedProps extends JSX.HTMLAttributes<HTMLElement> {
    /**
     * The element type to render
     * @default 'div'
     */
    as?: keyof JSX.IntrinsicElements | Component<any>;
    /**
     * Enable layout animations
     * @default false
     */
    layout?: boolean;
    /**
     * Spring configuration for layout animations
     * Only used when layout={true}
     */
    layoutTransition?: LayoutTransitionConfig;
    /**
     * Children elements
     */
    children?: JSX.Element;
}
/**
 * Wrapper component that adds layout animations to any element
 *
 * @example
 * ```tsx
 * // Simple usage with defaults
 * <LayoutAnimated layout>
 *   <button onClick={() => setExpanded(!expanded())}>Toggle</button>
 *   {expanded() && <div>Extra content</div>}
 * </LayoutAnimated>
 *
 * // Custom spring settings
 * <LayoutAnimated layout layoutTransition={{ stiffness: 400, damping: 30 }}>
 *   <button onClick={() => setExpanded(!expanded())}>Toggle</button>
 *   {expanded() && <div>Extra content</div>}
 * </LayoutAnimated>
 * ```
 */
declare function LayoutAnimated(props: LayoutAnimatedProps): JSX.Element;

export { type AnimateConfig, _default as AnimatedComponents, type AnimatedProps, type AnimationConfig, type AnimationControls, type AnimationOptions, type AnimationResult, type AnimationState, type AnimationTrigger, type GestureConfig, type GridAnimationConfig, type GridItemAnimationConfig, type InViewOptions, type ItemRegistry, type KeyframeAnimationConfig, type KeyframeAnimationResult, LayoutAnimated, type LayoutAnimatedProps, LayoutAnimationEngine, type LayoutTransitionConfig, LayoutTransitionProvider, type SVGPathAnimationConfig, type SVGPathCommand, type SVGShapeMorphConfig, type SVGStrokeAnimationConfig, type SVGViewBoxAnimationConfig, type StaggerOptions, type StaggerPattern, StaggerPatterns, type Transform3DConfig, animated, createAnimation, createLayoutAnimation, createStagger, createToggleAnimation, getItemRegistry, layoutAnimation, use3DTransform, useActiveTrigger, useAnimatedItem, useAnimation, useCardFlip, useClickTrigger, useCubeRotation, useFocusTrigger, useGestures, useGridAnimation, useGridItemAnimation, useHoverTrigger, useInViewTrigger, useItemAnimation, useItemHandlers, useKeyframeAnimation, useLayoutAnimation, useMountAnimation, useSVGDrawAnimation, useSVGPathAnimation, useSVGShapeMorph, useSVGStrokeAnimation, useSVGViewBoxAnimation, useStagger, useSwipeable, useTrigger, useUnmountAnimation, variants };
