@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/dist/reduced-BM4Ls0g5.d.ts

@@ -0,0 +1,566 @@
+import { e as MenuOptions, M as MenuInstance, g as RevealSpeed } from './reveal-WFUWDrei.js';
+import { I as Instance } from './types-BkS_raL8.js';
+import { SplitText } from 'gsap/SplitText';
+
+type TicketMenuOptions = Omit<MenuOptions, 'ticket'>;
+type TicketMenuInstance = MenuInstance;
+declare const createTicketMenu: (root: HTMLElement | null, options?: TicketMenuOptions) => TicketMenuInstance;
+
+interface CurvedCarouselOptions {
+    /** Slides inside the root. */
+    slideSelector?: string;
+    /** Per-frame velocity decay (0–1). */
+    friction?: number;
+    /** Multiplier applied to the release velocity before snapping. */
+    throwBoost?: number;
+    /** Horizontal wheel / trackpad factor. */
+    wheel?: number;
+    /** Movement below this many px counts as a tap (click), not a drag. */
+    tapDistance?: number;
+    startIndex?: number;
+    /** Tap/click or Enter on a slide. */
+    onSelect?: (index: number, slide: HTMLElement) => void;
+}
+interface CurvedCarouselInstance extends Instance {
+    next(): void;
+    prev(): void;
+    goTo(index: number): void;
+    /** Index of the slide closest to the centre. */
+    readonly index: number;
+}
+declare function createCurvedCarousel(root: HTMLElement | null, options?: CurvedCarouselOptions): CurvedCarouselInstance;
+
+interface SpringCardsOptions {
+    /** Cards inside the root. */
+    selector?: string;
+    /** Random start offset range, ±px. */
+    initialOffset?: number;
+    /** Delay before the springs are pulled to rest, ms. */
+    releaseAfter?: number;
+    /** Strength of the pointer push. */
+    push?: number;
+    /** Exponent of the distance falloff. */
+    falloff?: number;
+    /** Per-frame decay of the pushed velocity. */
+    damping?: number;
+    stiffness?: number;
+    friction?: number;
+    /** Scale-in entrance. */
+    entrance?: boolean;
+    stagger?: number;
+    delay?: number;
+}
+type SpringCardsInstance = Instance;
+declare function createSpringCards(root: HTMLElement | null, options?: SpringCardsOptions): SpringCardsInstance;
+
+interface PileLayer {
+    rotation: number;
+    offsetX: number;
+    offsetY: number;
+}
+/** Spencer's stack transforms, seeded so SSR output is stable. Layer 0 is the back. */
+declare function pileLayers(count: number, seed: number): PileLayer[];
+
+interface PileOptions {
+    /** Fraction of the pile that must be visible before it scales in. */
+    threshold?: number;
+}
+type PileInstance = Instance;
+/** Inline style for a back layer: `style={pileStyle(layer)}`. */
+declare const pileStyle: (layer: PileLayer) => string;
+declare function createPile(root: HTMLElement | null, options?: PileOptions): PileInstance;
+
+interface WordsOptions {
+    by?: 'words' | 'chars';
+    /** 'scroll' plays when the element enters the viewport; 'load' plays now; 'manual' waits for reveal(). */
+    trigger?: 'scroll' | 'load' | 'manual';
+    /** ScrollTrigger start for trigger 'scroll'. */
+    start?: string;
+    duration?: number;
+    stagger?: number;
+    delay?: number;
+}
+interface WordsInstance extends Instance {
+    /** Play the entrance (splits first if needed). */
+    reveal(delay?: number): void;
+    /** Change the text (e.g. language switch) and replay the entrance. */
+    replace(mutate: () => void): void;
+}
+declare function createWords(el: HTMLElement | null, options?: WordsOptions): WordsInstance;
+
+interface FlowInOptions {
+    /** Distance travelled (style 1), px. */
+    y?: number;
+    blur?: number;
+    duration?: number;
+    stagger?: number;
+    delay?: number;
+    /** 1: drop from above (default). 2: grow from `startScale`. */
+    style?: 1 | 2;
+    startScale?: number;
+    /** Last item first. */
+    reverse?: boolean;
+    /** With a single container as target, animate its matches instead. */
+    target?: string;
+    ease?: string;
+    /**
+     * Hide with visibility as well as opacity (default). Off for controls that must
+     * take focus while they enter (menu options): a visibility:hidden element cannot.
+     */
+    autoAlpha?: boolean;
+}
+interface FlowOutOptions {
+    y?: number;
+    blur?: number;
+    duration?: number;
+    stagger?: number;
+    delay?: number;
+    reverse?: boolean;
+    target?: string;
+}
+/** Flow items in. Returns the tween, or null when there is nothing to animate or motion is reduced. */
+declare function flowIn(targets: gsap.TweenTarget, options?: FlowInOptions): gsap.core.Tween | null;
+/** Flow items out (down into a blur). They stay hidden afterwards; flowIn brings them back. */
+declare function flowOut(targets: gsap.TweenTarget, options?: FlowOutOptions): gsap.core.Tween | null;
+/**
+ * Stepbro's step change: the current children flow out, `mutate` swaps the
+ * content (render the next step there), and after a frame the new children flow in.
+ */
+declare function stepChange(container: HTMLElement, mutate: () => void | Promise<void>, { duration }?: {
+    duration?: number;
+}): Promise<void>;
+
+interface FlowOptions extends FlowInOptions {
+    trigger?: 'scroll' | 'load' | 'manual';
+    start?: string;
+}
+interface FlowInstance extends Instance {
+    play(): void;
+}
+
+/** Flow the container's children in, on scroll by default. */
+declare function createFlow(container: HTMLElement | null, options?: FlowOptions): FlowInstance;
+
+interface PopOptions {
+    scale?: number;
+    duration?: number;
+    delay?: number;
+    trigger?: 'scroll' | 'load' | 'manual';
+    start?: string;
+}
+interface PopInstance extends Instance {
+    play(): void;
+}
+declare function createPop(el: HTMLElement | null, options?: PopOptions): PopInstance;
+
+interface FitTextOptions {
+    /** Fraction of the available width to use; leaves room for side bearings. */
+    safety?: number;
+}
+interface FitTextInstance extends Instance {
+    refit(): void;
+}
+declare function createFitText(el: HTMLElement | null, options?: FitTextOptions): FitTextInstance;
+
+interface StretchFooterOptions {
+    /** Spacer at the end of the flow; defaults to `[data-mk-phantom]` in the document. */
+    phantom?: HTMLElement | null;
+    /** Stretching title; defaults to `[data-mk-footer-title]` inside the footer. */
+    title?: HTMLElement | null;
+    /** Scroll smoothing (higher follows faster). */
+    lambda?: number;
+}
+type StretchFooterInstance = Instance;
+declare function createStretchFooter(footer: HTMLElement | null, options?: StretchFooterOptions): StretchFooterInstance;
+
+interface RadialMenuOptions {
+    /** Distance of the options from the toggle (any CSS length). */
+    radius?: string;
+    /** Angle of the first option, radians (π/2 → left, 0 → down). */
+    startAngle?: number;
+    /** Angle between options, radians. */
+    spacing?: number;
+    closeOnOutside?: boolean;
+    onToggle?: (open: boolean) => void;
+}
+interface RadialMenuInstance extends Instance {
+    open(): void;
+    close(): void;
+    toggle(): void;
+    readonly isOpen: boolean;
+}
+declare function createRadialMenu(root: HTMLElement | null, options?: RadialMenuOptions): RadialMenuInstance;
+
+interface TabsOptions {
+    orientation?: 'horizontal' | 'vertical';
+    duration?: number;
+    onSelect?: (index: number, tab: HTMLElement) => void;
+}
+interface TabsInstance extends Instance {
+    select(index: number): void;
+    readonly index: number;
+}
+declare function createTabs(root: HTMLElement | null, options?: TabsOptions): TabsInstance;
+
+interface CounterOptions {
+    /** Final value. Default: the number written in the element. */
+    to?: number;
+    from?: number;
+    duration?: number;
+    decimals?: number;
+    /** Intl locale for grouping and decimals. Default: the browser's. */
+    locale?: string;
+    prefix?: string;
+    suffix?: string;
+    trigger?: 'scroll' | 'load' | 'manual';
+    start?: string;
+}
+interface CounterInstance extends Instance {
+    /** Count from the start value to `to`. */
+    play(): void;
+    /** Count from the value shown to `value`. */
+    set(value: number): void;
+}
+declare function createCounter(el: HTMLElement | null, options?: CounterOptions): CounterInstance;
+
+interface RevealRecipeOptions {
+    speed?: RevealSpeed;
+    /** CSS selector of the origin element (searched in the document). */
+    origin?: string;
+    delay?: number;
+    trigger?: 'manual' | 'load';
+}
+interface RevealInstance extends Instance {
+    /** Play the wave, optionally from another origin. */
+    play(origin?: Element | {
+        x: number;
+        y: number;
+    }): void;
+}
+declare function createReveal(el: HTMLElement | null, options?: RevealRecipeOptions): RevealInstance;
+
+interface ReflowOptions {
+    selector?: string;
+    duration?: number;
+}
+interface ReflowInstance extends Instance {
+    capture(): void;
+    play(): void;
+}
+declare function createReflow(root: HTMLElement | null, options?: ReflowOptions): ReflowInstance;
+
+interface SlotTextOptions {
+    direction?: 'down' | 'up';
+    /** ms per letter */
+    duration?: number;
+    /** ms between letters */
+    stagger?: number;
+    /** ms between the old letter leaving and the new one entering */
+    exitOffset?: number;
+    /** ms the letters take to fade */
+    colorFade?: number;
+    maxTilt?: number;
+    /** Initial text. Default: the element's text. Pass it when a framework owns the element (it must render no children). */
+    text?: string;
+    /** Add a visually hidden plain copy for screen readers (default). Turn off when you render your own. */
+    accessibleCopy?: boolean;
+}
+interface SlotTextInstance extends Instance {
+    set(text: string): void;
+    readonly text: string;
+}
+declare function createSlotText(el: HTMLElement | null, options?: SlotTextOptions): SlotTextInstance;
+
+interface SortableLabels {
+    lifted?: (position: number, total: number) => string;
+    moved?: (position: number, total: number, group: string) => string;
+    dropped?: (position: number, total: number) => string;
+    cancelled?: string;
+}
+interface SortableOptions {
+    /** Reorder the DOM on drop (default). Off when a framework renders the list: answer onReorder. */
+    mutate?: boolean;
+    /** Drag only from [data-mk-sort-handle] (always so on touch screens). */
+    handle?: boolean;
+    autoScroll?: boolean;
+    /** The floating copy's spring (Stepbro: 1100 / 38). */
+    follow?: {
+        stiffness?: number;
+        damping?: number;
+    };
+    labels?: SortableLabels;
+    onReorder?: (detail: ReorderDetail) => void;
+}
+interface ReorderDetail {
+    id: string;
+    item: HTMLElement;
+    fromGroup: string;
+    toGroup: string;
+    fromIndex: number;
+    toIndex: number;
+    groupChanged: boolean;
+    /** Neighbours at the destination (Stepbro sends one to its API as the anchor). */
+    afterId: string | null;
+    beforeId: string | null;
+}
+interface SortableInstance extends Instance {
+    /** Stop a drag in progress: the item flies back. */
+    cancel(): void;
+    readonly dragging: boolean;
+}
+declare function createSortable(root: HTMLElement | null, options?: SortableOptions): SortableInstance;
+/** Move one entry of an array (for onReorder in a single list): moveItem(list, fromIndex, toIndex). */
+declare function moveItem<T>(list: readonly T[], from: number, to: number): T[];
+
+interface MaskTextOptions {
+    by?: 'lines' | 'words' | 'chars';
+    /** Start offset in % of each piece (Siena's case titles: 120). */
+    y?: number;
+    duration?: number;
+    ease?: string;
+    delay?: number;
+    stagger?: number;
+    /** 'scroll' (default) plays when 80 % is visible; 'load' now; 'manual' waits for play(). */
+    trigger?: 'scroll' | 'load' | 'manual';
+    /** Play once and stay (OFFFICE's data-a-mod). */
+    once?: boolean;
+}
+interface MaskTextInstance extends Instance {
+    play(): void;
+    /** OFFFICE's exit: back down into the clips, 2 ms apart. */
+    hide(): void;
+    readonly split: SplitText | null;
+}
+declare function createMaskText(el: HTMLElement | null, options?: MaskTextOptions): MaskTextInstance;
+
+interface CascadeOptions {
+    /** Seconds before the first child (also data-mk-delay). */
+    delay?: number;
+    duration?: number;
+    /** Seconds between children. */
+    step?: number;
+    once?: boolean;
+    trigger?: 'scroll' | 'load' | 'manual';
+}
+interface CascadeInstance extends Instance {
+    play(): void;
+    /** Every child back to its start state (what Siena does when the block leaves). */
+    reset(): void;
+}
+declare function createCascade(root: HTMLElement | null, options?: CascadeOptions): CascadeInstance;
+
+interface TextRollOptions {
+    duration?: number;
+    stagger?: number;
+    /** [min, max] repeats of each letter's turn (Siena: 8–14). */
+    turns?: readonly [number, number];
+    /** 'load' (default) after `delay`; 'scroll' when it shows; 'hover'; 'manual'. */
+    trigger?: 'load' | 'scroll' | 'hover' | 'manual';
+    delay?: number;
+    /** Replay every n ms while visible and not scrolling (Siena: 6000). 0: off. */
+    interval?: number;
+}
+interface TextRollInstance extends Instance {
+    play(): void;
+    readonly timelines: gsap.core.Timeline[];
+}
+declare function createTextRoll(el: HTMLElement | null, options?: TextRollOptions): TextRollInstance;
+
+interface LettersOptions {
+    effect?: 'scale' | 'blink';
+    /** Blink colours (default Dousan's pastels). */
+    colors?: string[];
+    /** Blink once 0.6 s after start (default true). */
+    autoplay?: boolean;
+}
+interface LettersInstance extends Instance {
+    /** Blink now (the scale effect follows the pointer). */
+    play(): void;
+}
+declare function createLetters(el: HTMLElement | null, options?: LettersOptions): LettersInstance;
+
+interface ParallaxOptions {
+    amount?: number;
+    lerp?: number;
+    /** Follow the scroll (default). Off: only seek() moves it. */
+    scroll?: boolean;
+}
+interface ParallaxInstance extends Instance {
+    /** Show the state at progress 0…1. */
+    seek(progress: number): void;
+}
+declare function createParallax(root: HTMLElement | null, options?: ParallaxOptions): ParallaxInstance;
+
+interface DepthGridOptions {
+    start?: string;
+    end?: string;
+    lerp?: number;
+    /** Follow the scroll (default). Off: only seek() moves it. */
+    scroll?: boolean;
+}
+interface DepthGridInstance extends Instance {
+    seek(progress: number): void;
+}
+declare function createDepthGrid(root: HTMLElement | null, options?: DepthGridOptions): DepthGridInstance;
+
+interface FrameZoomOptions {
+    start?: string;
+    end?: string;
+    lerp?: number;
+    scroll?: boolean;
+}
+interface FrameZoomInstance extends Instance {
+    seek(progress: number): void;
+    /** Full frame (true) or back to the scroll (false). */
+    open(on: boolean): void;
+    readonly state: {
+        progress: number;
+        open: number;
+    };
+}
+declare function createFrameZoom(root: HTMLElement | null, options?: FrameZoomOptions): FrameZoomInstance;
+
+interface ContrastOptions {
+    /** Sections to watch (default [data-mk-tone]). */
+    sections?: string;
+    /** Attribute written on the target (default data-mk-on). */
+    attribute?: string;
+}
+interface ContrastInstance extends Instance {
+    readonly tone: string | null;
+}
+declare function createContrast(target: HTMLElement | null, options?: ContrastOptions): ContrastInstance;
+
+interface MarqueeOptions {
+    /** 'x' (default) or 'y' (Siena's vertical strip). */
+    axis?: 'x' | 'y';
+    /** Seconds per item. */
+    speed?: number;
+    reverse?: boolean;
+}
+interface MarqueeInstance extends Instance {
+    /** Recount the copies (after the content or size changed). */
+    refresh(): void;
+}
+declare function createMarquee(root: HTMLElement | null, options?: MarqueeOptions): MarqueeInstance;
+
+interface CardDockOptions {
+    /** Milliseconds the cards stay spread out on load before stacking (iyo: 1600; 0 skips it). */
+    intro?: number;
+}
+interface CardDockInstance extends Instance {
+    expand(): void;
+    collapse(): void;
+    readonly expanded: boolean;
+}
+declare function createCardDock(root: HTMLElement | null, options?: CardDockOptions): CardDockInstance;
+
+interface SnapStripOptions {
+    autoplay?: boolean;
+    /** Milliseconds between cards (iyo: 5000). */
+    interval?: number;
+    /** Milliseconds to wait after the reader touches it (iyo: 2000). */
+    resume?: number;
+    /** Milliseconds after it shows before autoplay starts (iyo's data-delay: 500). */
+    delay?: number;
+}
+interface SnapStripInstance extends Instance {
+    next(): void;
+    previous(): void;
+    /** Index of the card nearest the start edge. */
+    readonly index: number;
+}
+declare function createSnapStrip(root: HTMLElement | null, options?: SnapStripOptions): SnapStripInstance;
+
+interface FillTextOptions {
+    /** Opacity the letters start at. */
+    from?: number;
+    /** ScrollTrigger-style positions, as in trackScroll. */
+    start?: string;
+    end?: string;
+    /** Follow the scroll (default). Off: only seek() moves it. */
+    scroll?: boolean;
+}
+interface FillTextInstance extends Instance {
+    /** Show the state at progress 0…1. */
+    seek(progress: number): void;
+    readonly progress: number;
+}
+declare function createFillText(el: HTMLElement | null, options?: FillTextOptions): FillTextInstance;
+
+interface InfiniteReelOptions {
+    speed?: number;
+    friction?: number;
+    axis?: 'x' | 'y';
+}
+interface InfiniteReelInstance extends Instance {
+    moveBy(pixels: number): void;
+    pause(): void;
+    resume(): void;
+    readonly position: number;
+}
+declare function createInfiniteReel(root: HTMLElement | null, options?: InfiniteReelOptions): InfiniteReelInstance;
+
+interface RepelBentoOptions {
+    distance?: number;
+    breakpoint?: number;
+}
+interface RepelBentoInstance extends Instance {
+    play(): void;
+    reset(): void;
+}
+declare function createRepelBento(root: HTMLElement | null, options?: RepelBentoOptions): RepelBentoInstance;
+
+interface RotatorOptions {
+    interval?: number;
+    autoplay?: boolean;
+    index?: number;
+    onChange?: (index: number) => void;
+}
+interface RotatorInstance extends Instance {
+    select(index: number): void;
+    next(): void;
+    previous(): void;
+    readonly index: number;
+}
+declare function createRotator(root: HTMLElement | null, options?: RotatorOptions): RotatorInstance;
+
+interface DragRulerOptions {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    pixelsPerUnit?: number;
+    onChange?: (value: number) => void;
+}
+interface DragRulerInstance extends Instance {
+    set(value: number): void;
+    readonly value: number;
+}
+declare function createDragRuler(root: HTMLElement | null, options?: DragRulerOptions): DragRulerInstance;
+
+interface DockPillOptions {
+    index?: number;
+    onSelect?: (index: number, item: HTMLElement) => void;
+}
+interface DockPillInstance extends Instance {
+    select(index: number): void;
+    readonly index: number;
+}
+declare function createDockPill(root: HTMLElement | null, options?: DockPillOptions): DockPillInstance;
+
+/** `prefers-reduced-motion: reduce`. Always false during SSR. */
+declare function reduced(): boolean;
+/**
+ * Entrance animations run only with motion allowed and when the head safety net
+ * (see MK_HEAD_SCRIPT) has not given up on JavaScript.
+ */
+declare function entrances(): boolean;
+/**
+ * Inline this in <head> (before CSS paints). It enables the hidden entrance states
+ * (`.mk-js`) and reveals everything again (`.mk-failed`) if no recipe has started
+ * within 2.5 s — e.g. the bundle failed to load.
+ */
+declare const MK_HEAD_SCRIPT = "(function(){var r=document.documentElement;r.classList.add('mk-js');setTimeout(function(){if(!r.classList.contains('mk-ready'))r.classList.add('mk-failed')},2500)})();";
+
+export { type FitTextOptions as $, type TicketMenuInstance as A, createInfiniteReel as B, type CurvedCarouselInstance as C, createRepelBento as D, createRotator as E, createDragRuler as F, createDockPill as G, type CardDockInstance as H, type CardDockOptions as I, type CascadeInstance as J, type CascadeOptions as K, type ContrastInstance as L, MK_HEAD_SCRIPT as M, type ContrastOptions as N, type CounterInstance as O, type CounterOptions as P, type CurvedCarouselOptions as Q, type DepthGridInstance as R, type DepthGridOptions as S, type TicketMenuOptions as T, type DockPillInstance as U, type DockPillOptions as V, type DragRulerInstance as W, type DragRulerOptions as X, type FillTextInstance as Y, type FillTextOptions as Z, type FitTextInstance as _, createPile as a, type FlowInOptions as a0, type FlowInstance as a1, type FlowOptions as a2, type FlowOutOptions as a3, type FrameZoomInstance as a4, type FrameZoomOptions as a5, type InfiniteReelInstance as a6, type InfiniteReelOptions as a7, type LettersInstance as a8, type LettersOptions as a9, type SortableInstance as aA, type SortableLabels as aB, type SortableOptions as aC, type SpringCardsInstance as aD, type SpringCardsOptions as aE, type StretchFooterInstance as aF, type StretchFooterOptions as aG, type TabsInstance as aH, type TabsOptions as aI, type TextRollInstance as aJ, type TextRollOptions as aK, type WordsInstance as aL, type WordsOptions as aM, createCurvedCarousel as aN, createTicketMenu as aO, entrances as aP, flowIn as aQ, flowOut as aR, moveItem as aS, pileLayers as aT, pileStyle as aU, reduced as aV, stepChange as aW, type MarqueeInstance as aa, type MarqueeOptions as ab, type MaskTextInstance as ac, type MaskTextOptions as ad, type ParallaxInstance as ae, type ParallaxOptions as af, type PileInstance as ag, type PileLayer as ah, type PileOptions as ai, type PopInstance as aj, type PopOptions as ak, type RadialMenuInstance as al, type RadialMenuOptions as am, type ReflowInstance as an, type ReflowOptions as ao, type ReorderDetail as ap, type RepelBentoInstance as aq, type RepelBentoOptions as ar, type RevealInstance as as, type RevealRecipeOptions as at, type RotatorInstance as au, type RotatorOptions as av, type SlotTextInstance as aw, type SlotTextOptions as ax, type SnapStripInstance as ay, type SnapStripOptions as az, createWords as b, createSpringCards as c, createFlow as d, createPop as e, createFitText as f, createStretchFooter as g, createRadialMenu as h, createTabs as i, createCounter as j, createReveal as k, createReflow as l, createSlotText as m, createSortable as n, createMaskText as o, createCascade as p, createTextRoll as q, createLetters as r, createParallax as s, createDepthGrid as t, createFrameZoom as u, createContrast as v, createMarquee as w, createCardDock as x, createSnapStrip as y, createFillText as z };