@enact-ui/animate 0.1.0 → 0.2.0

package/dist/presets/component-presets.d.ts

@@ -0,0 +1,246 @@
+/**
+ * Component Animation Presets
+ *
+ * Defines animation presets for component entrance, exit, and transition animations.
+ * Each preset provides Motion library compatible configurations that work with
+ * the motion style system.
+ *
+ * @packageDocumentation
+ */
+import { type MotionStyle } from "./motion-styles";
+/**
+ * Use case categories for component presets.
+ * Used by AI tools to select appropriate animations.
+ */
+export type PresetUseCase = "entrance" | "exit" | "transition" | "emphasis" | "reveal";
+/**
+ * Context hints for where the animation will be used.
+ * Helps AI tools make appropriate selections.
+ */
+export type PresetContext = "modal" | "dropdown" | "tooltip" | "drawer" | "card" | "list-item" | "notification" | "page" | "section" | "hero";
+/**
+ * Animation variants for Motion library's AnimatePresence.
+ */
+export interface AnimationVariants {
+    /** Initial/hidden state */
+    initial: Record<string, unknown>;
+    /** Animated/visible state */
+    animate: Record<string, unknown>;
+    /** Exit state (optional, defaults to initial) */
+    exit?: Record<string, unknown>;
+}
+/**
+ * Complete animation props for Motion library components.
+ */
+export interface ComponentAnimationProps {
+    initial: boolean | Record<string, unknown>;
+    animate: Record<string, unknown>;
+    exit?: Record<string, unknown>;
+    transition: Record<string, unknown>;
+}
+/**
+ * Metadata for component presets, used by AI selection system.
+ */
+export interface PresetMetadata {
+    /** Unique identifier for the preset */
+    id: string;
+    /** Human-readable name */
+    name: string;
+    /** Description of the animation effect */
+    description: string;
+    /** Primary use cases */
+    useCase: PresetUseCase[];
+    /** Recommended contexts */
+    context: PresetContext[];
+    /** Intensity level (1-5, where 3 is standard) */
+    intensity: number;
+    /** Whether this preset involves movement */
+    hasMovement: boolean;
+    /** Direction of movement (if applicable) */
+    direction?: "up" | "down" | "left" | "right" | "in" | "out";
+}
+/**
+ * A component animation preset with metadata.
+ */
+export interface ComponentPreset {
+    /** Preset metadata for AI selection */
+    metadata: PresetMetadata;
+    /**
+     * Gets the animation props for a given motion style.
+     * @param style - The motion style to apply
+     * @param options - Optional customization options
+     */
+    getProps: (style: MotionStyle, options?: PresetOptions) => ComponentAnimationProps;
+}
+/**
+ * Options for customizing preset behavior.
+ */
+export interface PresetOptions {
+    /** Override the default duration */
+    duration?: number;
+    /** Override the default delay */
+    delay?: number;
+    /** Custom distance for slide animations (px) */
+    distance?: number;
+    /** Custom scale factor */
+    scale?: number;
+    /** Custom rotation angle (degrees) */
+    rotation?: number;
+    /** Use spring physics instead of tween */
+    useSpring?: boolean;
+}
+/**
+ * Fade in animation - opacity transition from 0 to 1.
+ *
+ * @ai-hint Use for subtle entrances. Works well for tooltips, dropdowns,
+ * and any content that should appear without drawing too much attention.
+ * Combines well with other presets for compound animations.
+ */
+export declare const fadeIn: ComponentPreset;
+/**
+ * Fade out animation - opacity transition from 1 to 0.
+ *
+ * @ai-hint Use for gentle exits. Best when paired with fadeIn for
+ * symmetrical enter/exit animations.
+ */
+export declare const fadeOut: ComponentPreset;
+/**
+ * Slide up animation - element moves upward while fading in.
+ *
+ * @ai-hint Use for content that appears from below. Great for modals,
+ * bottom sheets, list items, and card reveals. Creates a natural
+ * "rising" feeling.
+ */
+export declare const slideUp: ComponentPreset;
+/**
+ * Slide down animation - element moves downward while fading in.
+ *
+ * @ai-hint Use for dropdowns, menus, and content appearing from above.
+ * Creates a natural "falling" or "dropping" feeling.
+ */
+export declare const slideDown: ComponentPreset;
+/**
+ * Slide left animation - element moves leftward while fading in.
+ *
+ * @ai-hint Use for side panels closing, content sliding out,
+ * or navigation transitions moving backward.
+ */
+export declare const slideLeft: ComponentPreset;
+/**
+ * Slide right animation - element moves rightward while fading in.
+ *
+ * @ai-hint Use for side panels opening, drawers, and navigation
+ * transitions moving forward.
+ */
+export declare const slideRight: ComponentPreset;
+/**
+ * Scale animation - subtle scale with fade.
+ *
+ * @ai-hint Use for modals, dialogs, and content that should appear
+ * to "pop" into view. More subtle than zoom animations.
+ */
+export declare const scale: ComponentPreset;
+/**
+ * Zoom in animation - dramatic scale from small to full size.
+ *
+ * @ai-hint Use for hero elements, feature highlights, and content
+ * that needs strong visual emphasis. More dramatic than scale.
+ */
+export declare const zoomIn: ComponentPreset;
+/**
+ * Zoom out animation - scale from large to normal size.
+ *
+ * @ai-hint Use for content appearing to "approach" the user,
+ * or for dramatic entrances that start larger than final size.
+ */
+export declare const zoomOut: ComponentPreset;
+/**
+ * Rotate animation - subtle rotation with fade.
+ *
+ * @ai-hint Use sparingly for playful interfaces or to add visual interest.
+ * Best with playful motion style. Can cause motion sickness if overused.
+ */
+export declare const rotate: ComponentPreset;
+/**
+ * Slide and scale animation - combines slide up with scale.
+ *
+ * @ai-hint Use for important content that needs extra visual emphasis.
+ * Great for hero sections, feature cards, and call-to-action elements.
+ */
+export declare const slideUpScale: ComponentPreset;
+/**
+ * Flip animation - 3D flip effect.
+ *
+ * @ai-hint Use for card flips, reveals, and playful interactions.
+ * Works best with playful motion style. Use with perspective.
+ */
+export declare const flip: ComponentPreset;
+/**
+ * Expand animation - height expansion for accordions and collapsibles.
+ *
+ * @ai-hint Use for accordions, collapsible sections, and expandable content.
+ * Animates height from 0 to auto.
+ */
+export declare const expand: ComponentPreset;
+/**
+ * All available component presets.
+ */
+export declare const componentPresets: {
+    readonly fadeIn: ComponentPreset;
+    readonly fadeOut: ComponentPreset;
+    readonly slideUp: ComponentPreset;
+    readonly slideDown: ComponentPreset;
+    readonly slideLeft: ComponentPreset;
+    readonly slideRight: ComponentPreset;
+    readonly scale: ComponentPreset;
+    readonly zoomIn: ComponentPreset;
+    readonly zoomOut: ComponentPreset;
+    readonly rotate: ComponentPreset;
+    readonly slideUpScale: ComponentPreset;
+    readonly flip: ComponentPreset;
+    readonly expand: ComponentPreset;
+};
+/**
+ * Type for preset names.
+ */
+export type ComponentPresetName = keyof typeof componentPresets;
+/**
+ * Gets a component preset by name.
+ *
+ * @param name - The preset name
+ * @returns The component preset
+ *
+ * @example
+ * ```ts
+ * const preset = getComponentPreset("fadeIn");
+ * const props = preset.getProps("standard");
+ * ```
+ */
+export declare function getComponentPreset(name: ComponentPresetName): ComponentPreset;
+/**
+ * Gets all presets matching a use case.
+ *
+ * @param useCase - The use case to filter by
+ * @returns Array of matching presets
+ *
+ * @example
+ * ```ts
+ * const entrancePresets = getPresetsByUseCase("entrance");
+ * // Returns: [fadeIn, slideUp, slideDown, ...]
+ * ```
+ */
+export declare function getPresetsByUseCase(useCase: PresetUseCase): ComponentPreset[];
+/**
+ * Gets all presets suitable for a context.
+ *
+ * @param context - The context to filter by
+ * @returns Array of matching presets
+ *
+ * @example
+ * ```ts
+ * const modalPresets = getPresetsByContext("modal");
+ * // Returns: [fadeIn, slideUp, scale, zoomIn]
+ * ```
+ */
+export declare function getPresetsByContext(context: PresetContext): ComponentPreset[];
+//# sourceMappingURL=component-presets.d.ts.map

package/dist/presets/component-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-presets.d.ts","sourceRoot":"","sources":["../../src/presets/component-presets.ts"],"names":[],"mappings":"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"}