@luanlu/mk-motion 1.0.0

package/dist/components/steps/steps.d.ts

@@ -0,0 +1,22 @@
+
+export interface StepItem {
+    title: string;
+    description?: string;
+    icon?: string;
+    status?: 'wait' | 'process' | 'finish' | 'error';
+}
+export interface StepsOptions {
+    direction?: 'horizontal' | 'vertical';
+    current?: number;
+    items: StepItem[];
+    size?: 'small' | 'default';
+}
+export declare class MkSteps {
+    el: HTMLElement;
+    private options;
+    constructor(container: HTMLElement | string, options: StepsOptions);
+    private render;
+    setCurrent(current: number): void;
+    destroy(): void;
+}
+export declare function createSteps(container: HTMLElement | string, options: StepsOptions): MkSteps;

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,23 @@
+
+export interface SwitchOptions {
+    value?: boolean;
+    disabled?: boolean;
+    activeText?: string;
+    inactiveText?: string;
+    onChange?: (value: boolean) => void;
+}
+export declare class MkSwitch {
+    el: HTMLLabelElement;
+    private core;
+    private options;
+    private _value;
+    private activeLabel?;
+    private _cleanupKey?;
+    private inactiveLabel?;
+    constructor(container: HTMLElement | string, options?: SwitchOptions);
+    get value(): boolean;
+    set value(v: boolean);
+    toggle(): void;
+    destroy(): void;
+}
+export declare function createSwitch(container: HTMLElement | string, options?: SwitchOptions): MkSwitch;

package/dist/components/table/table.d.ts

@@ -0,0 +1,47 @@
+
+export interface TableColumn {
+    key: string;
+    title: string;
+    width?: string;
+    sortable?: boolean;
+    editable?: boolean;
+    render?: (value: any, row: Record<string, any>, index: number) => HTMLElement | string;
+}
+export interface TableOptions {
+    columns: TableColumn[];
+    data: Record<string, any>[];
+    pageSize?: number;
+    onEdit?: (row: Record<string, any>, rowIndex: number) => void;
+    onDelete?: (row: Record<string, any>, rowIndex: number) => void;
+    onRowClick?: (row: Record<string, any>, rowIndex: number) => void;
+}
+export declare class MkTable {
+    el: HTMLDivElement;
+    private table;
+    private tbody;
+    private columns;
+    private data;
+    private pageSize;
+    private currentPage;
+    private sortState;
+    private editingRow;
+    private editCache;
+    private filteredData;
+    private callbacks;
+    constructor(container: HTMLElement | string, options: TableOptions);
+    private getDisplayData;
+    private handleSort;
+    render(): void;
+    private updateSortIcons;
+    private renderPagination;
+    private createPageBtn;
+    setData(data: Record<string, any>[]): void;
+    filter(predicate: (row: Record<string, any>) => boolean): void;
+    clearFilter(): void;
+    startEdit(rowIndex: number): void;
+    saveEdit(): void;
+    cancelEdit(): void;
+    deleteRow(rowIndex: number): void;
+    destroy(): void;
+}
+export declare function createTable(container: HTMLElement | string, options: TableOptions): MkTable;

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,30 @@
+
+export interface TabItem {
+    label: string;
+    content?: string | HTMLElement;
+    disabled?: boolean;
+}
+export interface TabsOptions {
+    type?: 'line' | 'card' | 'pill';
+    items?: TabItem[];
+    activeIndex?: number;
+    onChange?: (index: number) => void;
+}
+export declare class MkTabs {
+    el: HTMLDivElement;
+    private options;
+    private headerEl;
+    private contentEl;
+    private indicatorEl;
+    private tabItems;
+    private panels;
+    private currentIndex;
+    private tabIdPrefix;
+    constructor(container: HTMLElement | string, options?: TabsOptions);
+    private renderTabs;
+    setActive(index: number, animate?: boolean): void;
+    private updateIndicator;
+    getActive(): number;
+    destroy(): void;
+}
+export declare function createTabs(container: HTMLElement | string, options?: TabsOptions): MkTabs;

package/dist/components/tag/tag.d.ts

@@ -0,0 +1,24 @@
+import { MotionOptions } from '../../motion/component-motion.ts';
+
+export interface TagOptions {
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    size?: 'small' | 'default' | 'large';
+    closable?: boolean;
+    round?: boolean;
+    plain?: boolean;
+    text?: string;
+    onClose?: () => void;
+    motion?: MotionOptions;
+}
+export declare class MkTag {
+    el: HTMLSpanElement;
+    private options;
+    private motion;
+    private _cleanupCloseKey?;
+    constructor(container: HTMLElement | string, options?: TagOptions);
+    private buildClass;
+    setText(text: string): void;
+    private close;
+    destroy(): void;
+}
+export declare function createTag(container: HTMLElement | string, options?: TagOptions): MkTag;

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,8 @@
+
+export interface TooltipOptions {
+    content?: string | HTMLElement;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+    offset?: number;
+}
+export declare function createTooltip(target: HTMLElement, options?: TooltipOptions): () => void;

package/dist/core/animator.d.ts

@@ -0,0 +1,29 @@
+import { AnimationName, AnimationOptions } from './utils.ts';
+
+export declare class Animator {
+    private element;
+    private currentAnimation;
+    constructor(element: HTMLElement | string);
+    /**
+     * 播放 CSS 类动画
+     */
+    animate(name: AnimationName, options?: AnimationOptions): Promise<Animator>;
+    /**
+     * 使用 Web Animations API 播放动画
+     */
+    waa(keyframes: Keyframe[] | PropertyIndexedKeyframes, options?: AnimationOptions & {
+        duration?: number;
+    }): Promise<Animator>;
+    /**
+     * 停止当前动画
+     */
+    stop(): this;
+    /**
+     * 移除所有动效类
+     */
+    reset(): this;
+    /**
+     * 设置元素样式变量
+     */
+    vars(variables: Record<string, string | number>): this;
+}

package/dist/core/timeline.d.ts

@@ -0,0 +1,14 @@
+import { AnimationName, AnimationOptions } from './utils.ts';
+
+export declare class Timeline {
+    private items;
+    private running;
+    private abortController;
+    add(name: AnimationName, target: HTMLElement | string, options?: AnimationOptions & {
+        at?: number;
+    }): this;
+    private estimateEndTime;
+    play(): Promise<void>;
+    stop(): void;
+    clear(): this;
+}

package/dist/core/utils.d.ts

@@ -0,0 +1,13 @@
+export type AnimationName = 'fadeIn' | 'fadeOut' | 'slideInUp' | 'slideInDown' | 'slideInLeft' | 'slideInRight' | 'slideOutUp' | 'slideOutDown' | 'zoomIn' | 'zoomOut' | 'bounceIn' | 'bounceOut' | 'flipInX' | 'flipInY' | 'shake' | 'pulse' | 'rotateIn';
+export interface AnimationOptions {
+    duration?: number;
+    easing?: string;
+    delay?: number;
+    iterations?: number;
+    direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+    fill?: 'none' | 'forwards' | 'backwards' | 'both';
+}
+export declare function parseTime(value: number | string): number;
+export declare function toCssTime(ms: number): string;
+export declare function setCSSVariables(el: HTMLElement, vars: Record<string, string | number>): void;
+export declare function removeCSSVariables(el: HTMLElement, keys: string[]): void;

package/dist/effects/glitch.d.ts

@@ -0,0 +1,14 @@
+export interface GlitchOptions {
+    duration?: number;
+    intensity?: number;
+    color1?: string;
+    color2?: string;
+}
+/**
+ * 给元素添加赛博朋克故障风效果
+ */
+export declare function glitch(element: HTMLElement | string, options?: GlitchOptions): Promise<void>;
+/**
+ * 持续故障效果（可停止）
+ */
+export declare function glitchLoop(element: HTMLElement | string, options?: GlitchOptions): () => void;

package/dist/effects/particle.d.ts

@@ -0,0 +1,17 @@
+export interface ParticleOptions {
+    count?: number;
+    color?: string | string[];
+    speed?: number;
+    size?: number;
+    gravity?: number;
+    fadeOut?: boolean;
+    duration?: number;
+}
+/**
+ * 在元素位置触发粒子爆炸效果
+ */
+export declare function particleBurst(element: HTMLElement | string, options?: ParticleOptions): Promise<void>;
+/**
+ * 在点击位置触发粒子（不绑定元素）
+ */
+export declare function particleAt(x: number, y: number, options?: ParticleOptions): Promise<void>;

package/dist/effects/text-split.d.ts

@@ -0,0 +1,14 @@
+export interface TextSplitOptions {
+    type?: 'char' | 'word';
+    stagger?: number;
+    duration?: number;
+    animation?: 'fadeUp' | 'fadeDown' | 'zoomIn' | 'rotateIn' | 'slideLeft';
+}
+export declare class TextSplit {
+    private element;
+    private originalHTML;
+    constructor(element: HTMLElement | string);
+    animate(options?: TextSplitOptions): Promise<void>;
+    reset(): void;
+}
+export declare function splitText(element: HTMLElement | string, options?: TextSplitOptions): Promise<void>;

package/dist/effects/wave-text.d.ts

@@ -0,0 +1,17 @@
+export interface WaveTextOptions {
+    amplitude?: number;
+    frequency?: number;
+    speed?: number;
+    stagger?: number;
+}
+export declare class WaveText {
+    private element;
+    private spans;
+    private rafId;
+    private originalHTML;
+    constructor(element: HTMLElement | string);
+    start(options?: WaveTextOptions): void;
+    stop(): void;
+    reset(): void;
+}
+export declare function waveText(element: HTMLElement | string, options?: WaveTextOptions): () => void;

package/dist/gesture/draggable.d.ts

@@ -0,0 +1,23 @@
+export interface DraggableOptions {
+    axis?: 'x' | 'y' | 'both';
+    bounds?: HTMLElement | string | null;
+    onStart?: (e: PointerEvent) => void;
+    onDrag?: (x: number, y: number) => void;
+    onEnd?: (x: number, y: number) => void;
+}
+export declare class Draggable {
+    private element;
+    private options;
+    private startX;
+    private startY;
+    private currentX;
+    private currentY;
+    private initialTransformX;
+    private initialTransformY;
+    private pointerId;
+    constructor(element: HTMLElement | string, options?: DraggableOptions);
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    destroy(): void;
+}

package/dist/gesture/spring.d.ts

@@ -0,0 +1,24 @@
+export interface SpringOptions {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+    precision?: number;
+}
+export interface SpringTarget {
+    from: number;
+    to: number;
+    onUpdate: (value: number) => void;
+    onComplete?: () => void;
+}
+/**
+ * 物理弹簧动画，基于胡克定律
+ */
+export declare function spring(target: SpringTarget, options?: SpringOptions): () => void;
+/**
+ * 弹性缩放：元素像弹簧一样弹到目标大小
+ */
+export declare function elasticScale(element: HTMLElement | string, toScale?: number, options?: SpringOptions): () => void;
+/**
+ * 弹性移动
+ */
+export declare function elasticMove(element: HTMLElement | string, toX: number, toY: number, options?: SpringOptions): () => void;

package/dist/index.d.ts

@@ -0,0 +1,109 @@
+
+export { Animator } from './core/animator.ts';
+export { Timeline } from './core/timeline.ts';
+export type { AnimationName, AnimationOptions } from './core/utils.ts';
+export { fadeIn, fadeOut, slideInUp, slideInDown, slideInLeft, slideInRight, slideOutUp, slideOutDown, zoomIn, zoomOut, bounceIn, bounceOut, flipInX, flipInY, shake, pulse, rotateIn, } from './presets/index.ts';
+export * as presets from './presets/index.ts';
+export { ScrollTrigger, scrollAnimate } from './scroll/scroll-trigger.ts';
+export type { ScrollTriggerOptions } from './scroll/scroll-trigger.ts';
+export { Typewriter, typewrite } from './text/typewriter.ts';
+export { CountUp, countUp } from './text/count-up.ts';
+export type { TypewriterOptions } from './text/typewriter.ts';
+export type { CountUpOptions } from './text/count-up.ts';
+export { spring, elasticScale, elasticMove } from './gesture/spring.ts';
+export { Draggable } from './gesture/draggable.ts';
+export type { SpringOptions, SpringTarget } from './gesture/spring.ts';
+export type { DraggableOptions } from './gesture/draggable.ts';
+export { addRipple, rippleEffect } from './micro/ripple.ts';
+export { hoverLift, hoverGlow } from './micro/hover-lift.ts';
+export type { RippleOptions } from './micro/ripple.ts';
+export type { HoverLiftOptions } from './micro/hover-lift.ts';
+export { particleBurst, particleAt } from './effects/particle.ts';
+export { TextSplit, splitText } from './effects/text-split.ts';
+export { glitch, glitchLoop } from './effects/glitch.ts';
+export { WaveText, waveText } from './effects/wave-text.ts';
+export type { ParticleOptions } from './effects/particle.ts';
+export type { TextSplitOptions } from './effects/text-split.ts';
+export type { GlitchOptions } from './effects/glitch.ts';
+export type { WaveTextOptions } from './effects/wave-text.ts';
+export { parallax, parallaxGroup } from './transitions/parallax.ts';
+export { shimmer, skeleton } from './transitions/shimmer.ts';
+export { blurReveal, blurRevealChildren } from './transitions/blur-reveal.ts';
+export { lazyImage, lazyImages } from './transitions/lazy-image.ts';
+export type { ParallaxOptions } from './transitions/parallax.ts';
+export type { ShimmerOptions } from './transitions/shimmer.ts';
+export type { BlurRevealOptions } from './transitions/blur-reveal.ts';
+export type { LazyImageOptions } from './transitions/lazy-image.ts';
+export { expand, collapse, toggleCollapse } from './transitions/collapse.ts';
+export { listStagger } from './transitions/list.ts';
+export { showLoading, fullscreenLoading } from './transitions/loading.ts';
+export { toast, toastSuccess, toastError, toastWarning, notify } from './transitions/toast.ts';
+export type { CollapseOptions } from './transitions/collapse.ts';
+export type { ListStaggerOptions } from './transitions/list.ts';
+export type { LoadingOptions } from './transitions/loading.ts';
+export type { ToastOptions } from './transitions/toast.ts';
+export { magnetic, magneticText } from './interactive/magnetic.ts';
+export { CoverFlow, createCoverFlow } from './interactive/coverflow.ts';
+export { FlipCard, createFlipCard } from './interactive/flip-card.ts';
+export { cursorTrail } from './interactive/cursor-trail.ts';
+export type { MagneticOptions } from './interactive/magnetic.ts';
+export type { CoverFlowOptions } from './interactive/coverflow.ts';
+export type { FlipCardOptions } from './interactive/flip-card.ts';
+export type { CursorTrailOptions } from './interactive/cursor-trail.ts';
+export { withMotion, staggerEnter } from './motion/component-motion.ts';
+export type { MotionOptions, MicroAnimation } from './motion/component-motion.ts';
+export { FocusTrap } from './a11y/focus-trap.ts';
+export { onKey, Keys } from './a11y/keyboard.ts';
+export { theme, ThemeManager } from './theme/theme.ts';
+export { MkRow, createRow } from './components/layout/row.ts';
+export { MkSpace, createSpace } from './components/layout/space.ts';
+export { MkDivider, createDivider } from './components/layout/divider.ts';
+export { MkButton, createButton } from './components/button/button.ts';
+export { MkInput, createInput } from './components/input/input.ts';
+export { MkCard, createCard } from './components/card/card.ts';
+export { MkDialog, createDialog } from './components/dialog/dialog.ts';
+export { MkDrawer, createDrawer } from './components/drawer/drawer.ts';
+export { message, messageSuccess, messageError, messageWarning } from './components/message/message.ts';
+export { MkSwitch, createSwitch } from './components/switch/switch.ts';
+export { showLoading as showComponentLoading, showFullscreenLoading } from './components/loading/loading.ts';
+export { MkSelect, createSelect } from './components/form/select.ts';
+export { MkCheckbox, createCheckbox, MkCheckboxGroup } from './components/form/checkbox.ts';
+export { MkRadio, MkRadioGroup } from './components/form/radio.ts';
+export { MkSlider } from './components/form/slider.ts';
+export { MkTable } from './components/table/table.ts';
+export { MkTag, createTag } from './components/tag/tag.ts';
+export { createTooltip } from './components/tooltip/tooltip.ts';
+export { MkTabs, createTabs } from './components/tabs/tabs.ts';
+export { MkAvatar, createAvatar } from './components/avatar/avatar.ts';
+export { MkAlert, createAlert } from './components/alert/alert.ts';
+export { MkProgress, createProgress } from './components/progress/progress.ts';
+export { MkCollapse, createCollapse } from './components/collapse/collapse.ts';
+export { MkEmpty, createEmpty } from './components/empty/empty.ts';
+export { MkPopover, createPopover } from './components/popover/popover.ts';
+export { MkMenu, createMenu } from './components/menu/menu.ts';
+export { MkBreadcrumb, createBreadcrumb } from './components/breadcrumb/breadcrumb.ts';
+export { MkSteps, createSteps } from './components/steps/steps.ts';
+export type { ButtonOptions } from './components/button/button.ts';
+export type { InputOptions } from './components/input/input.ts';
+export type { CardOptions } from './components/card/card.ts';
+export type { DialogOptions } from './components/dialog/dialog.ts';
+export type { DrawerOptions } from './components/drawer/drawer.ts';
+export type { MessageOptions } from './components/message/message.ts';
+export type { SwitchOptions } from './components/switch/switch.ts';
+export type { SelectOptions, SelectOption } from './components/form/select.ts';
+export type { CheckboxOptions } from './components/form/checkbox.ts';
+export type { RadioOptions } from './components/form/radio.ts';
+export type { SliderOptions } from './components/form/slider.ts';
+export type { TableColumn, TableOptions } from './components/table/table.ts';
+export type { TagOptions } from './components/tag/tag.ts';
+export type { TooltipOptions } from './components/tooltip/tooltip.ts';
+export type { TabsOptions, TabItem } from './components/tabs/tabs.ts';
+export type { AvatarOptions } from './components/avatar/avatar.ts';
+export type { AlertOptions } from './components/alert/alert.ts';
+export type { ProgressOptions } from './components/progress/progress.ts';
+export type { CollapsePanelOptions, CollapseItem } from './components/collapse/collapse.ts';
+export type { EmptyOptions } from './components/empty/empty.ts';
+export type { PopoverOptions } from './components/popover/popover.ts';
+export type { MenuOptions, MenuItem } from './components/menu/menu.ts';
+export type { BreadcrumbOptions, BreadcrumbItem } from './components/breadcrumb/breadcrumb.ts';
+export type { StepsOptions, StepItem } from './components/steps/steps.ts';

package/dist/interactive/coverflow.d.ts

@@ -0,0 +1,24 @@
+export interface CoverFlowOptions {
+    perspective?: number;
+    rotateY?: number;
+    spacing?: number;
+    scale?: number;
+}
+/**
+ * 3D 封面流轮播
+ */
+export declare class CoverFlow {
+    private container;
+    private cards;
+    private currentIndex;
+    private options;
+    constructor(container: HTMLElement | string, cardSelector: string, options?: CoverFlowOptions);
+    goTo(index: number): this;
+    next(): this;
+    prev(): this;
+    private update;
+}
+/**
+ * 快捷方法创建 CoverFlow
+ */
+export declare function createCoverFlow(container: HTMLElement | string, cardSelector: string, options?: CoverFlowOptions): CoverFlow;

package/dist/interactive/cursor-trail.d.ts

@@ -0,0 +1,11 @@
+export interface CursorTrailOptions {
+    count?: number;
+    color?: string;
+    size?: number;
+    fadeSpeed?: number;
+    smoothing?: number;
+}
+/**
+ * 鼠标跟随粒子拖尾
+ */
+export declare function cursorTrail(options?: CursorTrailOptions): () => void;

package/dist/interactive/flip-card.d.ts

@@ -0,0 +1,18 @@
+export interface FlipCardOptions {
+    axis?: 'x' | 'y';
+    duration?: number;
+    perspective?: number;
+}
+export declare class FlipCard {
+    private container;
+    private inner;
+    private front;
+    private back;
+    private flipped;
+    private options;
+    constructor(container: HTMLElement | string, options?: FlipCardOptions);
+    toggle(): this;
+    flipToFront(): this;
+    flipToBack(): this;
+}
+export declare function createFlipCard(container: HTMLElement | string, options?: FlipCardOptions): FlipCard;

package/dist/interactive/magnetic.d.ts

@@ -0,0 +1,12 @@
+export interface MagneticOptions {
+    strength?: number;
+    radius?: number;
+}
+/**
+ * 磁性按钮：鼠标靠近时被吸引
+ */
+export declare function magnetic(element: HTMLElement | string, options?: MagneticOptions): () => void;
+/**
+ * 磁性文字：每个字符独立被吸引
+ */
+export declare function magneticText(element: HTMLElement | string, options?: MagneticOptions): () => void;

package/dist/micro/hover-lift.d.ts

@@ -0,0 +1,15 @@
+export interface HoverLiftOptions {
+    y?: number;
+    scale?: number;
+    shadow?: string;
+    duration?: number;
+    easing?: string;
+}
+/**
+ * 给元素添加悬浮抬升效果
+ */
+export declare function hoverLift(element: HTMLElement | string, options?: HoverLiftOptions): () => void;
+/**
+ * 给元素添加悬浮发光效果
+ */
+export declare function hoverGlow(element: HTMLElement | string, color?: string, options?: Pick<HoverLiftOptions, 'duration' | 'easing'>): () => void;

package/dist/micro/ripple.d.ts

@@ -0,0 +1,13 @@
+export interface RippleOptions {
+    color?: string;
+    duration?: number;
+    maxScale?: number;
+}
+/**
+ * 给元素添加 Material Design 风格的水波纹点击效果
+ */
+export declare function addRipple(element: HTMLElement | string, options?: RippleOptions): () => void;
+/**
+ * 一次性水波纹（不绑定事件，立即播放）
+ */
+export declare function rippleEffect(element: HTMLElement | string, options?: RippleOptions): Promise<void>;