@nebutra/ui 0.2.2 → 2.0.0

package/dist/animate-in-BlvjVh2S.d.ts

@@ -0,0 +1,250 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as framer_motion from 'framer-motion';
+import * as React from 'react';
+
+declare const PRESETS: {
+    /** 涌现 — materialize from the cloud (default) */
+    readonly emerge: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly transform: "translateY(16px)";
+            readonly filter: "blur(6px)";
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly transform: "translateY(0px)";
+            readonly filter: "blur(0px)";
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly transform: "translateY(-8px)";
+            readonly filter: "blur(4px)";
+            readonly transition: {
+                readonly duration: 0.2;
+                readonly ease: readonly [0.16, 1, 0.3, 1];
+            };
+        };
+        readonly transition: {
+            readonly duration: 0.5;
+            readonly ease: readonly [0.16, 1, 0.3, 1];
+        };
+    };
+    /** 流动 — stream horizontally */
+    readonly flow: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly transform: "translateX(-20px)";
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly transform: "translateX(0px)";
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly transform: "translateX(20px)";
+            readonly transition: {
+                readonly duration: 0.2;
+                readonly ease: readonly [0.16, 1, 0.3, 1];
+            };
+        };
+        readonly transition: {
+            readonly duration: 0.3;
+            readonly ease: readonly [0.16, 1, 0.3, 1];
+        };
+    };
+    /** Simple fade */
+    readonly fade: {
+        readonly initial: {
+            readonly opacity: 0;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+        };
+        readonly transition: {
+            readonly duration: 0.3;
+        };
+    };
+    /** Fade + rise */
+    readonly fadeUp: framer_motion.Variants | undefined;
+    /** Scale in */
+    readonly scale: framer_motion.Variants | undefined;
+    /**
+     * Keyed content swap — short, symmetric, blur-softened. Rises in, sinks out.
+     * Shorter and shallower than `emerge` on purpose: a swap replaces content the
+     * reader is already looking at, so it must resolve inside the reveal rail.
+     * Pair with `AnimateSwap`.
+     */
+    readonly swap: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly transform: "translateY(10px)";
+            readonly filter: "blur(4px)";
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly transform: "translateY(0px)";
+            readonly filter: "blur(0px)";
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly transform: "translateY(-10px)";
+            readonly filter: "blur(4px)";
+        };
+        readonly transition: {
+            readonly duration: number;
+        };
+    };
+    /** Off-canvas panel entering from the right edge (drawer, sheet). */
+    readonly slideFromRight: {
+        readonly initial: {
+            readonly transform: "translateX(100%)";
+        };
+        readonly animate: {
+            readonly transform: "translateX(0%)";
+        };
+        readonly exit: {
+            readonly transform: "translateX(100%)";
+        };
+        readonly transition: {
+            readonly type: "spring";
+            readonly stiffness: 200;
+            readonly damping: 24;
+            readonly mass: 1;
+        };
+    };
+    /** Off-canvas panel entering from the left edge. */
+    readonly slideFromLeft: {
+        readonly initial: {
+            readonly transform: "translateX(-100%)";
+        };
+        readonly animate: {
+            readonly transform: "translateX(0%)";
+        };
+        readonly exit: {
+            readonly transform: "translateX(-100%)";
+        };
+        readonly transition: {
+            readonly type: "spring";
+            readonly stiffness: 200;
+            readonly damping: 24;
+            readonly mass: 1;
+        };
+    };
+    /** Off-canvas panel entering from the top edge (banner, command bar). */
+    readonly slideFromTop: {
+        readonly initial: {
+            readonly transform: "translateY(-100%)";
+        };
+        readonly animate: {
+            readonly transform: "translateY(0%)";
+        };
+        readonly exit: {
+            readonly transform: "translateY(-100%)";
+        };
+        readonly transition: {
+            readonly type: "spring";
+            readonly stiffness: 200;
+            readonly damping: 24;
+            readonly mass: 1;
+        };
+    };
+    /** Off-canvas panel entering from the bottom edge (mobile action sheet). */
+    readonly slideFromBottom: {
+        readonly initial: {
+            readonly transform: "translateY(100%)";
+        };
+        readonly animate: {
+            readonly transform: "translateY(0%)";
+        };
+        readonly exit: {
+            readonly transform: "translateY(100%)";
+        };
+        readonly transition: {
+            readonly type: "spring";
+            readonly stiffness: 200;
+            readonly damping: 24;
+            readonly mass: 1;
+        };
+    };
+};
+type Preset = keyof typeof PRESETS;
+/**
+ * DOM attributes forwarded to the underlying element.
+ *
+ * Without this, anything needing `role`, `aria-*`, `onClick` or `onKeyDown` —
+ * every dialog, drawer and tabpanel — has to drop out of `AnimateIn` and
+ * hand-roll its own `m.div`, which is how reduced-motion branching and raw
+ * duration numbers keep reappearing at call sites.
+ *
+ * The four drag/animation handlers are omitted because framer-motion redefines
+ * them with incompatible signatures. `style` is omitted because framer's
+ * `MotionStyle` rejects `undefined` under `exactOptionalPropertyTypes`, and an
+ * animated element's static styling belongs in `className` anyway.
+ */
+type ForwardedDivProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "className" | "style" | "onAnimationStart" | "onDrag" | "onDragStart" | "onDragEnd">;
+interface AnimateInProps extends ForwardedDivProps {
+    /** Optional: a purely decorative animated surface (a backdrop) has no content. */
+    children?: React.ReactNode;
+    preset?: Preset;
+    delay?: number;
+    duration?: number;
+    /** Trigger when enters viewport instead of immediately */
+    inView?: boolean;
+    className?: string;
+}
+/**
+ * AnimateIn — wraps any content in a branded entrance animation.
+ *
+ * Respects `prefers-reduced-motion` by fading only (no translate/blur).
+ *
+ * @example
+ * <AnimateIn preset="emerge" delay={0.1}>
+ *   <Card>...</Card>
+ * </AnimateIn>
+ */
+declare function AnimateIn(props: AnimateInProps): react_jsx_runtime.JSX.Element;
+interface AnimateSwapProps extends AnimateInProps {
+    /**
+     * Identity of the content currently rendered. When it changes, the outgoing
+     * content plays its exit and is fully unmounted before the incoming content
+     * enters (`AnimatePresence mode="wait"`).
+     */
+    swapKey: React.Key;
+}
+/**
+ * AnimateSwap — swap one piece of content for another, one at a time.
+ *
+ * `AnimateIn` can only animate an entrance: it has no `AnimatePresence`, so its
+ * `exit` never plays and a keyed replacement cross-fades on top of itself. Any
+ * tab panel, step body or filtered result set therefore had to hand-roll
+ * `AnimatePresence mode="wait"` plus a raw `m.div`. This is that pattern, once.
+ *
+ * Reduced motion is inherited from `AnimateIn`: opacity only, no travel, no blur.
+ *
+ * @example
+ * <AnimateSwap swapKey={activeTab} preset="swap" role="tabpanel">
+ *   {panelFor(activeTab)}
+ * </AnimateSwap>
+ */
+declare function AnimateSwap(props: AnimateSwapProps): react_jsx_runtime.JSX.Element;
+interface AnimateInGroupProps {
+    children: React.ReactNode;
+    stagger?: "fast" | "normal" | "slow";
+    preset?: Preset;
+    inView?: boolean;
+    className?: string;
+}
+/**
+ * AnimateInGroup — staggered container. Each direct child animates in sequence.
+ *
+ * @example
+ * <AnimateInGroup stagger="normal" inView>
+ *   {items.map(item => <AnimateIn key={item.id} preset="fadeUp">{item}</AnimateIn>)}
+ * </AnimateInGroup>
+ */
+declare function AnimateInGroup(props: AnimateInGroupProps): react_jsx_runtime.JSX.Element;
+
+export { AnimateIn as A, AnimateInGroup as a, type AnimateInGroupProps as b, type AnimateInProps as c, AnimateSwap as d, type AnimateSwapProps as e };