directix 1.4.1 → 1.5.0

package/dist/index.d.ts

@@ -83,6 +83,18 @@ export declare interface ComposableThrottledFunction<T extends (...args: any[])
  */
 export declare function configurePermission(config: PermissionConfig): void;
 
+/**
+ * Context menu item
+ */
+export declare interface ContextMenuItem {
+    label: string;
+    handler?: () => void;
+    disabled?: boolean;
+    divider?: boolean;
+    icon?: string;
+    class?: string;
+}
+
 /**
  * Countdown complete callback
  */
@@ -110,6 +122,11 @@ export declare interface CountdownTime {
     total: number;
 }
 
+/**
+ * Easing type
+ */
+export declare type CounterEasing = 'linear' | 'easeOut' | 'easeInOut' | 'easeOutQuart' | 'easeOutExpo';
+
 /**
  * Create a capitalizing function with preset options
  *
@@ -453,6 +470,11 @@ export declare const Directix: Plugin_2;
  */
 export declare type DraggableAxis = 'x' | 'y' | 'both';
 
+/**
+ * Export format type
+ */
+export declare type ExportFormat = 'csv' | 'json' | 'txt' | 'html';
+
 /**
  * Format number to money string
  */
@@ -614,6 +636,11 @@ export declare type ItemSizeFunction = (index: number) => number;
  */
 export declare type LazyState = 'pending' | 'loading' | 'loaded' | 'error';
 
+/**
+ * Lottie animation state
+ */
+export declare type LottieAnimationState = 'playing' | 'paused' | 'stopped';
+
 /**
  * Transform text to lowercase
  */
@@ -624,6 +651,24 @@ export declare function lowercaseText(text: string, firstOnly?: boolean): string
  */
 export declare type MutationHandler = (mutations: MutationRecord[], observer: MutationObserver) => void;
 
+/**
+ * Pan gesture event data
+ */
+export declare interface PanEvent {
+    direction: 'left' | 'right' | 'up' | 'down';
+    deltaX: number;
+    deltaY: number;
+    distance: number;
+    x: number;
+    y: number;
+    startX: number;
+    startY: number;
+    isPanning: boolean;
+    isFirst: boolean;
+    isFinal: boolean;
+    velocity: number;
+}
+
 /**
  * Parse formatted money string to number
  */
@@ -669,6 +714,20 @@ declare interface PermissionConfig {
  */
 export declare type PermissionMode = 'some' | 'every';
 
+/**
+ * Pinch gesture event data
+ */
+export declare interface PinchEvent {
+    scale: number;
+    distance: number;
+    initialDistance: number;
+    centerX: number;
+    centerY: number;
+    isPinching: boolean;
+    isFirst: boolean;
+    isFinal: boolean;
+}
+
 /**
  * Position type
  */
@@ -734,6 +793,20 @@ export declare interface ResizeInfo {
     contentRect: DOMRectReadOnly;
 }
 
+/**
+ * Rotate gesture event data
+ */
+export declare interface RotateGestureEvent {
+    angle: number;
+    radians: number;
+    rotation: number;
+    centerX: number;
+    centerY: number;
+    isRotating: boolean;
+    isFirst: boolean;
+    isFinal: boolean;
+}
+
 /**
  * Scroll direction
  */
@@ -771,6 +844,11 @@ export declare function set(obj: Record<string, any>, path: string, value: any):
  */
 export declare function setVueVersion(version: VueVersion): void;
 
+/**
+ * Skeleton animation type
+ */
+export declare type SkeletonAnimation = 'wave' | 'pulse' | 'none';
+
 /**
  * Check if Clipboard API is supported
  */
@@ -902,6 +980,68 @@ export declare function truncateText(text: string, maxLength: number, ellipsis?:
  */
 export declare function uppercaseText(text: string, firstOnly?: boolean): string;
 
+/**
+ * Composable for blur overlay
+ *
+ * @param options - Configuration options
+ * @returns Blur utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useBlur } from 'directix'
+ *
+ * const { isVisible, show, hide, toggle } = useBlur({ radius: 15 })
+ * </script>
+ *
+ * <template>
+ *   <button @click="toggle">Toggle Blur</button>
+ * </template>
+ * ```
+ */
+export declare function useBlur(options?: UseBlurOptions): UseBlurReturn;
+
+/**
+ * Options for useBlur composable
+ */
+export declare interface UseBlurOptions {
+    /** Blur radius in pixels */
+    radius?: number | Ref<number>;
+    /** Whether blur is visible */
+    visible?: boolean | Ref<boolean>;
+    /** Transition duration */
+    duration?: number;
+    /** Overlay color */
+    overlayColor?: string;
+    /** Z-index */
+    zIndex?: number;
+    /** Lock scroll */
+    lockScroll?: boolean;
+    /** Custom class */
+    class?: string;
+    /** Callback on show */
+    onShow?: () => void;
+    /** Callback on hide */
+    onHide?: () => void;
+}
+
+/**
+ * Return type for useBlur composable
+ */
+export declare interface UseBlurReturn {
+    /** Whether blur is visible */
+    isVisible: Ref<boolean>;
+    /** Show blur */
+    show: () => void;
+    /** Hide blur */
+    hide: () => void;
+    /** Toggle blur */
+    toggle: () => void;
+    /** Bind blur to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for capitalizing text
  *
@@ -1105,6 +1245,128 @@ export declare interface UseClickOutsideReturn {
     bind: (element: HTMLElement) => () => void;
 }
 
+/**
+ * Composable for creating click wave effects (simplified ripple)
+ *
+ * @param options - Configuration options
+ * @returns Wave utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useClickWave } from 'directix'
+ *
+ * const buttonRef = ref(null)
+ * const { bind } = useClickWave({ color: 'rgba(255, 255, 255, 0.3)' })
+ *
+ * onMounted(() => bind(buttonRef.value))
+ * </script>
+ *
+ * <template>
+ *   <button ref="buttonRef">Click for wave</button>
+ * </template>
+ * ```
+ */
+export declare function useClickWave(options?: UseClickWaveOptions): UseClickWaveReturn;
+
+/**
+ * Options for useClickWave composable
+ */
+export declare interface UseClickWaveOptions {
+    /**
+     * Wave color
+     * @default 'currentColor'
+     */
+    color?: string | Ref<string>;
+    /**
+     * Wave duration in milliseconds
+     * @default 500
+     */
+    duration?: number | Ref<number>;
+    /**
+     * Whether to disable wave
+     * @default false
+     */
+    disabled?: boolean | Ref<boolean>;
+    /**
+     * Wave size ratio
+     * @default 1.5
+     */
+    sizeRatio?: number;
+}
+
+/**
+ * Return type for useClickWave composable
+ */
+export declare interface UseClickWaveReturn {
+    /** Bind wave effect to an element */
+    bind: (element: HTMLElement) => () => void;
+    /** Trigger wave effect manually */
+    trigger: (event?: {
+        x?: number;
+        y?: number;
+    }) => void;
+}
+
+/**
+ * Composable for creating context menus
+ *
+ * @param options - Configuration options
+ * @returns Context menu utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useContextMenu } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const items = [
+ *   { label: 'Copy', handler: () => console.log('Copy') },
+ *   { label: 'Paste', handler: () => console.log('Paste') },
+ *   { divider: true, label: '' },
+ *   { label: 'Delete', handler: () => console.log('Delete') }
+ * ]
+ *
+ * const { bind } = useContextMenu({ items })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">Right click here</div>
+ * </template>
+ * ```
+ */
+export declare function useContextMenu(options: UseContextMenuOptions): UseContextMenuReturn;
+
+/**
+ * Options for useContextMenu composable
+ */
+export declare interface UseContextMenuOptions {
+    /** Menu items */
+    items: ContextMenuItem[] | Ref<ContextMenuItem[]>;
+    /** Custom class for menu container */
+    class?: string;
+    /** Menu width */
+    width?: number | string;
+    /** Whether to disable */
+    disabled?: boolean | Ref<boolean>;
+}
+
+/**
+ * Return type for useContextMenu composable
+ */
+export declare interface UseContextMenuReturn {
+    /** Bind context menu to an element */
+    bind: (element: HTMLElement) => () => void;
+    /** Show menu at position */
+    show: (x: number, y: number) => void;
+    /** Hide menu */
+    hide: () => void;
+}
+
 /**
  * Composable for copying text to clipboard
  *
@@ -1308,6 +1570,85 @@ export declare interface UseCountdownReturn {
     reset: () => void;
 }
 
+/**
+ * Composable for animated number counter
+ *
+ * @param options - Configuration options
+ * @returns Counter utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useCounter } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { currentValue, formattedValue, setValue, bind } = useCounter({
+ *   value: 1000,
+ *   duration: 2000,
+ *   useGrouping: true
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <span ref="containerRef">0</span>
+ * </template>
+ * ```
+ */
+export declare function useCounter(options: UseCounterOptions): UseCounterReturn;
+
+/**
+ * Options for useCounter composable
+ */
+export declare interface UseCounterOptions {
+    /** Target value */
+    value: number | Ref<number>;
+    /** Starting value */
+    startValue?: number;
+    /** Animation duration */
+    duration?: number;
+    /** Decimal places */
+    decimals?: number;
+    /** Use grouping separator */
+    useGrouping?: boolean;
+    /** Locale */
+    locale?: string;
+    /** Custom formatter */
+    formatter?: (value: number) => string;
+    /** Easing function */
+    easing?: CounterEasing;
+    /** Custom easing function */
+    customEasing?: (t: number) => number;
+    /** Callback on update */
+    onUpdate?: (value: number, formattedValue: string) => void;
+    /** Callback on complete */
+    onComplete?: (value: number) => void;
+    /** Callback on start */
+    onStart?: () => void;
+}
+
+/**
+ * Return type for useCounter composable
+ */
+export declare interface UseCounterReturn {
+    /** Current value */
+    currentValue: Ref<number>;
+    /** Formatted value */
+    formattedValue: Ref<string>;
+    /** Whether animating */
+    isAnimating: Ref<boolean>;
+    /** Set target value */
+    setValue: (value: number) => void;
+    /** Start animation */
+    start: () => void;
+    /** Stop animation */
+    stop: () => void;
+    /** Bind counter to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for debouncing function calls
  *
@@ -1555,6 +1896,195 @@ export declare interface UseEllipsisReturn {
     wouldTruncate: (width: number) => boolean;
 }
 
+/**
+ * Composable for emoji filtering
+ *
+ * @param options - Configuration options
+ * @returns Emoji utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useEmoji } from 'directix'
+ *
+ * const inputRef = ref(null)
+ * const { bind, stripEmojis } = useEmoji({ strip: true })
+ *
+ * onMounted(() => bind(inputRef.value))
+ * </script>
+ *
+ * <template>
+ *   <input ref="inputRef" type="text" />
+ * </template>
+ * ```
+ */
+export declare function useEmoji(options?: UseEmojiOptions): UseEmojiReturn;
+
+/**
+ * Options for useEmoji composable
+ */
+export declare interface UseEmojiOptions {
+    /** Whether to strip emoji */
+    strip?: boolean | Ref<boolean>;
+    /** Allowed emojis */
+    allowList?: string[];
+    /** Blocked emojis */
+    blockList?: string[];
+    /** Replacement character */
+    replacement?: string;
+    /** Callback when emoji is detected */
+    onEmoji?: (emoji: string, position: number) => void;
+}
+
+/**
+ * Return type for useEmoji composable
+ */
+export declare interface UseEmojiReturn {
+    /** Current input value */
+    value: Ref<string>;
+    /** Strip emojis from text */
+    stripEmojis: (text: string) => string;
+    /** Check if text contains emoji */
+    hasEmoji: (text: string) => boolean;
+    /** Bind emoji filter to an input element */
+    bind: (element: HTMLInputElement | HTMLTextAreaElement) => () => void;
+}
+
+/**
+ * Composable for exporting data
+ *
+ * @param options - Configuration options
+ * @returns Export utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useExport } from 'directix'
+ *
+ * const data = [
+ *   { name: 'John', email: 'john@example.com' },
+ *   { name: 'Jane', email: 'jane@example.com' }
+ * ]
+ *
+ * const { exportCSV, exportJSON } = useExport({ data, filename: 'users' })
+ * </script>
+ *
+ * <template>
+ *   <button @click="exportCSV">Export CSV</button>
+ *   <button @click="exportJSON">Export JSON</button>
+ * </template>
+ * ```
+ */
+export declare function useExport(options: UseExportOptions): UseExportReturn;
+
+/**
+ * Options for useExport composable
+ */
+export declare interface UseExportOptions {
+    /** Data to export */
+    data: any[] | object | string | Ref<any[] | object | string>;
+    /** Export format */
+    format?: ExportFormat | Ref<ExportFormat>;
+    /** Filename (without extension) */
+    filename?: string | Ref<string>;
+    /** Whether to include headers (for CSV) */
+    includeHeaders?: boolean;
+    /** Custom delimiter for CSV */
+    delimiter?: string;
+    /** Columns to export */
+    columns?: string[];
+    /** Custom headers mapping */
+    headers?: Record<string, string>;
+    /** Callback before export */
+    onBeforeExport?: () => boolean | void;
+    /** Callback after export */
+    onAfterExport?: () => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+}
+
+/**
+ * Return type for useExport composable
+ */
+export declare interface UseExportReturn {
+    /** Export data */
+    exportData: (format?: ExportFormat) => void;
+    /** Export as CSV */
+    exportCSV: () => void;
+    /** Export as JSON */
+    exportJSON: () => void;
+    /** Export as HTML */
+    exportHTML: () => void;
+    /** Export as text */
+    exportText: () => void;
+}
+
+/**
+ * Composable for fade transitions
+ *
+ * @param options - Configuration options
+ * @returns Fade utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useFade } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { isVisible, fadeIn, fadeOut, bind } = useFade({ duration: 500 })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">
+ *     <button @click="toggle">Toggle</button>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useFade(options?: UseFadeOptions): UseFadeReturn;
+
+/**
+ * Options for useFade composable
+ */
+export declare interface UseFadeOptions {
+    /** Whether element is visible */
+    visible?: boolean | Ref<boolean>;
+    /** Animation duration */
+    duration?: number;
+    /** Animation delay */
+    delay?: number;
+    /** Easing function */
+    easing?: string;
+    /** Minimum opacity */
+    minOpacity?: number;
+    /** Maximum opacity */
+    maxOpacity?: number;
+    /** Callback on start */
+    onStart?: (direction: 'in' | 'out') => void;
+    /** Callback on complete */
+    onComplete?: (direction: 'in' | 'out') => void;
+}
+
+/**
+ * Return type for useFade composable
+ */
+export declare interface UseFadeReturn {
+    /** Whether element is visible */
+    isVisible: Ref<boolean>;
+    /** Fade in */
+    fadeIn: () => void;
+    /** Fade out */
+    fadeOut: () => void;
+    /** Toggle fade */
+    toggle: () => void;
+    /** Bind fade to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for managing element focus
  *
@@ -1617,17 +2147,137 @@ export declare interface UseFocusReturn {
 }
 
 /**
- * Composable for handling keyboard shortcuts
+ * Composable for fullscreen functionality
  *
  * @param options - Configuration options
- * @returns Hotkey utilities
+ * @returns Fullscreen utilities
  *
  * @example
  * ```vue
  * <script setup>
- * import { useHotkey } from 'directix'
+ * import { ref } from 'vue'
+ * import { useFullscreen } from 'directix'
  *
- * const { enable, disable, add, remove } = useHotkey({
+ * const containerRef = ref(null)
+ * const { isFullscreen, toggle, bind } = useFullscreen({
+ *   onEnter: () => console.log('Entered fullscreen'),
+ *   onExit: () => console.log('Exited fullscreen')
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">
+ *     <button @click="toggle">
+ *       {{ isFullscreen ? 'Exit' : 'Enter' }} Fullscreen
+ *     </button>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useFullscreen(options?: UseFullscreenOptions): UseFullscreenReturn;
+
+/**
+ * Options for useFullscreen composable
+ */
+export declare interface UseFullscreenOptions {
+    /** Custom class when in fullscreen mode */
+    fullscreenClass?: string;
+    /** Callback when entering fullscreen */
+    onEnter?: () => void;
+    /** Callback when exiting fullscreen */
+    onExit?: () => void;
+    /** Callback when fullscreen state changes */
+    onChange?: (isFullscreen: boolean) => void;
+}
+
+/**
+ * Return type for useFullscreen composable
+ */
+export declare interface UseFullscreenReturn {
+    /** Whether currently in fullscreen mode */
+    isFullscreen: Ref<boolean>;
+    /** Enter fullscreen mode */
+    enter: () => Promise<void>;
+    /** Exit fullscreen mode */
+    exit: () => Promise<void>;
+    /** Toggle fullscreen mode */
+    toggle: () => Promise<void>;
+    /** Bind fullscreen to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
+/**
+ * Composable for highlighting keywords
+ *
+ * @param options - Configuration options
+ * @returns Highlight utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useHighlight } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { count, bind } = useHighlight({
+ *   keywords: ['Vue', 'React'],
+ *   className: 'my-highlight'
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <p ref="containerRef">Vue and React are popular frameworks.</p>
+ * </template>
+ * ```
+ */
+export declare function useHighlight(options: UseHighlightOptions): UseHighlightReturn;
+
+/**
+ * Options for useHighlight composable
+ */
+export declare interface UseHighlightOptions {
+    /** Keywords to highlight */
+    keywords: string | string[] | Ref<string | string[]>;
+    /** Highlight class name */
+    className?: string;
+    /** Inline style */
+    style?: string;
+    /** Case sensitive */
+    caseSensitive?: boolean;
+    /** Whole word only */
+    wholeWord?: boolean;
+    /** Tag name for highlight */
+    tag?: string;
+}
+
+/**
+ * Return type for useHighlight composable
+ */
+export declare interface UseHighlightReturn {
+    /** Highlight count */
+    count: Ref<number>;
+    /** Update keywords */
+    updateKeywords: (keywords: string | string[]) => void;
+    /** Bind highlight to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
+/**
+ * Composable for handling keyboard shortcuts
+ *
+ * @param options - Configuration options
+ * @returns Hotkey utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useHotkey } from 'directix'
+ *
+ * const { enable, disable, add, remove } = useHotkey({
  *   hotkeys: [
  *     { key: 'ctrl+s', handler: (e) => save() },
  *     { key: 'ctrl+z', handler: (e) => undo() },
@@ -2309,6 +2959,88 @@ export declare interface UseLongPressReturn {
     bind: (element: HTMLElement) => () => void;
 }
 
+/**
+ * Composable for Lottie animations
+ *
+ * @param options - Configuration options
+ * @returns Lottie utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useLottie } from 'directix'
+ * import animationData from './animation.json'
+ *
+ * const containerRef = ref(null)
+ * const { play, pause, bind } = useLottie({
+ *   animationData,
+ *   autoplay: true,
+ *   loop: true
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef"></div>
+ *   <button @click="play">Play</button>
+ *   <button @click="pause">Pause</button>
+ * </template>
+ * ```
+ */
+export declare function useLottie(options: UseLottieOptions): UseLottieReturn;
+
+/**
+ * Options for useLottie composable
+ */
+export declare interface UseLottieOptions {
+    /** Animation data or URL */
+    animationData: object | string | Ref<object | string>;
+    /** Autoplay */
+    autoplay?: boolean;
+    /** Loop */
+    loop?: boolean;
+    /** Speed */
+    speed?: number | Ref<number>;
+    /** Direction */
+    direction?: 1 | -1;
+    /** Renderer */
+    renderer?: 'svg' | 'canvas' | 'html';
+    /** Callback on ready */
+    onReady?: (animation: any) => void;
+    /** Callback on complete */
+    onComplete?: () => void;
+    /** Callback on loop */
+    onLoopComplete?: () => void;
+}
+
+/**
+ * Return type for useLottie composable
+ */
+export declare interface UseLottieReturn {
+    /** Animation state */
+    state: Ref<LottieAnimationState>;
+    /** Animation instance */
+    animation: Ref<any>;
+    /** Play animation */
+    play: () => void;
+    /** Pause animation */
+    pause: () => void;
+    /** Stop animation */
+    stop: () => void;
+    /** Set speed */
+    setSpeed: (speed: number) => void;
+    /** Set direction */
+    setDirection: (direction: 1 | -1) => void;
+    /** Go to frame */
+    goToAndPlay: (frame: number, isFrame?: boolean) => void;
+    /** Go to frame and stop */
+    goToAndStop: (frame: number, isFrame?: boolean) => void;
+    /** Bind lottie to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for transforming text to lowercase
  *
@@ -2708,6 +3440,122 @@ export declare interface UseNumberReturn {
     parse: (formatted: string) => number;
 }
 
+/**
+ * Composable for pan gesture
+ *
+ * @param options - Configuration options
+ * @returns Pan gesture utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { usePan } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { isPanning, direction, bind } = usePan({
+ *   onPan: (e) => console.log('Pan:', e.direction, e.distance)
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">Swipe me</div>
+ * </template>
+ * ```
+ */
+export declare function usePan(options?: UsePanOptions): UsePanReturn;
+
+/**
+ * Options for usePan composable
+ */
+export declare interface UsePanOptions {
+    /** Callback when pan starts */
+    onStart?: (e: PanEvent) => void;
+    /** Callback during pan */
+    onPan?: (e: PanEvent) => void;
+    /** Callback when pan ends */
+    onEnd?: (e: PanEvent) => void;
+    /** Minimum distance to trigger */
+    threshold?: number;
+    /** Direction constraint */
+    direction?: 'horizontal' | 'vertical' | 'all';
+    /** Prevent default behavior */
+    preventDefault?: boolean;
+    /** Pointer types */
+    pointers?: ('touch' | 'mouse')[];
+}
+
+/**
+ * Return type for usePan composable
+ */
+export declare interface UsePanReturn {
+    /** Whether pan is in progress */
+    isPanning: Ref<boolean>;
+    /** Current pan direction */
+    direction: Ref<'left' | 'right' | 'up' | 'down' | null>;
+    /** Pan distance */
+    distance: Ref<number>;
+    /** Bind pan to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
+/**
+ * Composable for parallax scrolling
+ *
+ * @param options - Configuration options
+ * @returns Parallax utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useParallax } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { offset, bind } = useParallax({ speed: 0.5 })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">Parallax content</div>
+ * </template>
+ * ```
+ */
+export declare function useParallax(options?: UseParallaxOptions): UseParallaxReturn;
+
+/**
+ * Options for useParallax composable
+ */
+export declare interface UseParallaxOptions {
+    /** Parallax speed factor */
+    speed?: number | Ref<number>;
+    /** Whether enabled */
+    enabled?: boolean | Ref<boolean>;
+    /** Reverse direction */
+    reverse?: boolean;
+    /** Horizontal parallax */
+    horizontal?: boolean;
+    /** Custom transform function */
+    transform?: (offset: number, el: HTMLElement) => string;
+    /** Mobile breakpoint */
+    mobileBreakpoint?: number;
+}
+
+/**
+ * Return type for useParallax composable
+ */
+export declare interface UseParallaxReturn {
+    /** Current offset */
+    offset: Ref<number>;
+    /** Whether parallax is active */
+    isActive: Ref<boolean>;
+    /** Bind parallax to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for checking user permissions
  *
@@ -2775,6 +3623,63 @@ export declare interface UsePermissionReturn {
     recheck: () => void;
 }
 
+/**
+ * Composable for pinch gesture
+ *
+ * @param options - Configuration options
+ * @returns Pinch gesture utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { usePinch } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { scale, bind } = usePinch({
+ *   onPinch: (e) => console.log('Scale:', e.scale)
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">Pinch to zoom</div>
+ * </template>
+ * ```
+ */
+export declare function usePinch(options?: UsePinchOptions): UsePinchReturn;
+
+/**
+ * Options for usePinch composable
+ */
+export declare interface UsePinchOptions {
+    /** Callback when pinch starts */
+    onStart?: (e: PinchEvent) => void;
+    /** Callback during pinch */
+    onPinch?: (e: PinchEvent) => void;
+    /** Callback when pinch ends */
+    onEnd?: (e: PinchEvent) => void;
+    /** Minimum scale */
+    minScale?: number;
+    /** Maximum scale */
+    maxScale?: number;
+    /** Enable transform */
+    enableTransform?: boolean;
+}
+
+/**
+ * Return type for usePinch composable
+ */
+export declare interface UsePinchReturn {
+    /** Whether pinch is in progress */
+    isPinching: Ref<boolean>;
+    /** Current scale */
+    scale: Ref<number>;
+    /** Bind pinch to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for printing functionality
  *
@@ -2868,6 +3773,85 @@ export declare interface UsePrintReturn {
     printPage: () => Promise<void>;
 }
 
+/**
+ * Composable for progress bar
+ *
+ * @param options - Configuration options
+ * @returns Progress utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useProgress } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { value, percent, setValue, bind } = useProgress({ value: 50 })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">
+ *     <button @click="increment(10)">+10%</button>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useProgress(options?: UseProgressOptions): UseProgressReturn;
+
+/**
+ * Options for useProgress composable
+ */
+export declare interface UseProgressOptions {
+    /** Current progress value */
+    value?: number | Ref<number>;
+    /** Maximum value */
+    max?: number;
+    /** Minimum value */
+    min?: number;
+    /** Progress bar height */
+    height?: number;
+    /** Progress bar color */
+    color?: string;
+    /** Background color */
+    backgroundColor?: string;
+    /** Transition duration */
+    duration?: number;
+    /** Show percentage text */
+    showText?: boolean;
+    /** Indeterminate mode */
+    indeterminate?: boolean | Ref<boolean>;
+    /** Striped pattern */
+    striped?: boolean;
+    /** Animate stripes */
+    animated?: boolean;
+    /** Callback on change */
+    onChange?: (value: number, percent: number) => void;
+    /** Callback on complete */
+    onComplete?: () => void;
+}
+
+/**
+ * Return type for useProgress composable
+ */
+export declare interface UseProgressReturn {
+    /** Current value */
+    value: Ref<number>;
+    /** Current percentage */
+    percent: Ref<number>;
+    /** Set progress value */
+    setValue: (value: number) => void;
+    /** Increment progress */
+    increment: (amount?: number) => void;
+    /** Decrement progress */
+    decrement: (amount?: number) => void;
+    /** Reset to minimum */
+    reset: () => void;
+    /** Bind progress to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for pull to refresh functionality
  *
@@ -3110,6 +4094,59 @@ export declare interface UseRippleReturn {
     }) => void;
 }
 
+/**
+ * Composable for rotate gesture
+ *
+ * @param options - Configuration options
+ * @returns Rotate gesture utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useRotateGesture } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { angle, bind } = useRotateGesture({
+ *   onRotate: (e) => console.log('Rotation:', e.rotation)
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">Rotate with two fingers</div>
+ * </template>
+ * ```
+ */
+export declare function useRotateGesture(options?: UseRotateGestureOptions): UseRotateGestureReturn;
+
+/**
+ * Options for useRotateGesture composable
+ */
+export declare interface UseRotateGestureOptions {
+    /** Callback when rotation starts */
+    onStart?: (e: RotateGestureEvent) => void;
+    /** Callback during rotation */
+    onRotate?: (e: RotateGestureEvent) => void;
+    /** Callback when rotation ends */
+    onEnd?: (e: RotateGestureEvent) => void;
+    /** Enable transform */
+    enableTransform?: boolean;
+}
+
+/**
+ * Return type for useRotateGesture composable
+ */
+export declare interface UseRotateGestureReturn {
+    /** Whether rotation is in progress */
+    isRotating: Ref<boolean>;
+    /** Current rotation angle */
+    angle: Ref<number>;
+    /** Bind rotation to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for HTML sanitization
  *
@@ -3259,31 +4296,99 @@ export declare interface UseScrollReturn {
 }
 
 /**
- * Composable for sticky positioning
+ * Composable for skeleton loading states
  *
  * @param options - Configuration options
- * @returns Sticky utilities
+ * @returns Skeleton utilities
  *
  * @example
  * ```vue
  * <script setup>
  * import { ref } from 'vue'
- * import { useSticky } from 'directix'
+ * import { useSkeleton } from 'directix'
  *
- * const headerRef = ref(null)
- * const { isSticky, bind } = useSticky({
- *   offsetTop: 60,
- *   onStick: (sticky) => console.log('Sticky:', sticky)
- * })
+ * const containerRef = ref(null)
+ * const loading = ref(true)
+ * const { isLoading, bind } = useSkeleton({ loading, animation: 'wave' })
  *
- * onMounted(() => bind(headerRef.value))
+ * onMounted(() => bind(containerRef.value))
+ *
+ * // Later: loading.value = false
  * </script>
  *
  * <template>
- *   <header ref="headerRef" :class="{ sticky: isSticky }">
- *     Navigation
- *   </header>
- * </template>
+ *   <div ref="containerRef">
+ *     <p>Content here</p>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useSkeleton(options?: UseSkeletonOptions): UseSkeletonReturn;
+
+/**
+ * Options for useSkeleton composable
+ */
+export declare interface UseSkeletonOptions {
+    /** Whether to show skeleton loading state */
+    loading?: boolean | Ref<boolean>;
+    /** Animation type */
+    animation?: SkeletonAnimation;
+    /** Skeleton width */
+    width?: string | number;
+    /** Skeleton height */
+    height?: string | number;
+    /** Border radius */
+    radius?: string | number;
+    /** Skeleton color */
+    color?: string;
+    /** Animation color */
+    animationColor?: string;
+    /** Custom class */
+    class?: string;
+}
+
+/**
+ * Return type for useSkeleton composable
+ */
+export declare interface UseSkeletonReturn {
+    /** Whether skeleton is currently showing */
+    isLoading: Ref<boolean>;
+    /** Show skeleton */
+    show: () => void;
+    /** Hide skeleton */
+    hide: () => void;
+    /** Toggle skeleton */
+    toggle: () => void;
+    /** Bind skeleton to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
+/**
+ * Composable for sticky positioning
+ *
+ * @param options - Configuration options
+ * @returns Sticky utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useSticky } from 'directix'
+ *
+ * const headerRef = ref(null)
+ * const { isSticky, bind } = useSticky({
+ *   offsetTop: 60,
+ *   onStick: (sticky) => console.log('Sticky:', sticky)
+ * })
+ *
+ * onMounted(() => bind(headerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <header ref="headerRef" :class="{ sticky: isSticky }">
+ *     Navigation
+ *   </header>
+ * </template>
  * ```
  */
 export declare function useSticky(options?: UseStickyOptions): UseStickyReturn;
@@ -3810,6 +4915,82 @@ export declare interface UseTruncateReturn {
     truncate: (text: string, length?: number, position?: TruncatePosition) => string;
 }
 
+/**
+ * Composable for typewriter effect
+ *
+ * @param options - Configuration options
+ * @returns Typewriter utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useTypewriter } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { displayedText, isTyping, bind } = useTypewriter({
+ *   text: 'Hello, World!',
+ *   speed: 100
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <span ref="containerRef"></span>
+ * </template>
+ * ```
+ */
+export declare function useTypewriter(options: UseTypewriterOptions): UseTypewriterReturn;
+
+/**
+ * Options for useTypewriter composable
+ */
+export declare interface UseTypewriterOptions {
+    /** Text to type */
+    text: string | Ref<string>;
+    /** Typing speed */
+    speed?: number;
+    /** Delay before start */
+    delay?: number;
+    /** Loop animation */
+    loop?: boolean;
+    /** Delay before deleting */
+    deleteDelay?: number;
+    /** Delete speed */
+    deleteSpeed?: number;
+    /** Cursor character */
+    cursor?: string | false;
+    /** Cursor blink */
+    cursorBlink?: boolean;
+    /** Callback on start */
+    onStart?: () => void;
+    /** Callback on complete */
+    onComplete?: () => void;
+    /** Callback on each character */
+    onType?: (char: string, index: number) => void;
+}
+
+/**
+ * Return type for useTypewriter composable
+ */
+export declare interface UseTypewriterReturn {
+    /** Current displayed text */
+    displayedText: Ref<string>;
+    /** Whether typing is in progress */
+    isTyping: Ref<boolean>;
+    /** Whether deleting is in progress */
+    isDeleting: Ref<boolean>;
+    /** Start typing */
+    start: () => void;
+    /** Stop typing */
+    stop: () => void;
+    /** Reset to empty */
+    reset: () => void;
+    /** Bind typewriter to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for transforming text to uppercase
  *
@@ -4192,6 +5373,33 @@ export declare interface UseWatermarkReturn {
     disable: () => void;
 }
 
+/**
+ * v-blur directive
+ * Background blur overlay effect
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Simple blur -->
+ *   <div v-blur="isBlurred">Content behind blur</div>
+ *
+ *   <!-- With radius -->
+ *   <div v-blur="15">Blur with 15px radius</div>
+ *
+ *   <!-- With options -->
+ *   <div v-blur="{
+ *     visible: isBlurred,
+ *     radius: 20,
+ *     overlayColor: 'rgba(255, 255, 255, 0.3)',
+ *     lockScroll: true
+ *   }">
+ *     Content
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare const vBlur: Directive;
+
 /**
  * v-capitalcase directive
  *
@@ -4248,6 +5456,43 @@ export declare const vClickDelay: Directive;
  */
 export declare const vClickOutside: Directive;
 
+/**
+ * v-click-wave directive
+ * A simplified click wave effect directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <button v-click-wave>Click me</button>
+ *   <button v-click-wave="'rgba(255, 255, 255, 0.3)'">Custom color</button>
+ *   <button v-click-wave="{ color: 'red', duration: 400 }">Custom options</button>
+ * </template>
+ * ```
+ */
+export declare const vClickWave: Directive;
+
+/**
+ * v-context-menu directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-context-menu="menuItems">Right click here</div>
+ *   <div v-context-menu="{ items: menuItems, width: 200 }">Custom width</div>
+ * </template>
+ *
+ * <script setup>
+ * const menuItems = [
+ *   { label: 'Copy', handler: () => console.log('Copy') },
+ *   { label: 'Paste', handler: () => console.log('Paste') },
+ *   { divider: true, label: '' },
+ *   { label: 'Delete', handler: () => console.log('Delete') }
+ * ]
+ * </script>
+ * ```
+ */
+export declare const vContextMenu: Directive;
+
 /**
  * v-copy directive
  *
@@ -4291,6 +5536,31 @@ export declare const vCopy: Directive;
  */
 export declare const vCountdown: Directive;
 
+/**
+ * v-counter directive
+ * Animated number counter
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <span v-counter="1000">0</span>
+ *
+ *   <span v-counter="{
+ *     value: 10000,
+ *     duration: 3000,
+ *     decimals: 2,
+ *     useGrouping: true
+ *   }">0</span>
+ *
+ *   <span v-counter="{
+ *     value: targetValue,
+ *     formatter: (v) => '$' + v.toFixed(2)
+ *   }">0</span>
+ * </template>
+ * ```
+ */
+export declare const vCounter: Directive;
+
 /**
  * v-debounce directive
  *
@@ -4355,6 +5625,91 @@ export declare const vDraggable: Directive;
  */
 export declare const vEllipsis: Directive;
 
+/**
+ * v-emoji directive
+ * Restrict or filter emoji input
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Strip all emojis -->
+ *   <input v-emoji type="text" />
+ *
+ *   <!-- Strip emojis with replacement -->
+ *   <input v-emoji="{ strip: true, replacement: '*' }" type="text" />
+ *
+ *   <!-- Allow specific emojis -->
+ *   <input v-emoji="{ allowList: ['😊', '👍'] }" type="text" />
+ *
+ *   <!-- Block specific emojis -->
+ *   <input v-emoji="{ blockList: ['🚫', '❌'] }" type="text" />
+ * </template>
+ * ```
+ */
+export declare const vEmoji: Directive;
+
+/**
+ * v-export directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <button v-export="exportData">Export CSV</button>
+ *
+ *   <button v-export="{ data: tableData, format: 'json', filename: 'my-data' }">
+ *     Export JSON
+ *   </button>
+ *
+ *   <button v-export="{
+ *     data: tableData,
+ *     format: 'csv',
+ *     columns: ['name', 'email'],
+ *     headers: { name: 'Name', email: 'Email Address' }
+ *   }">
+ *     Export with custom columns
+ *   </button>
+ * </template>
+ *
+ * <script setup>
+ * const tableData = [
+ *   { name: 'John', email: 'john@example.com', age: 30 },
+ *   { name: 'Jane', email: 'jane@example.com', age: 25 }
+ * ]
+ * </script>
+ * ```
+ */
+export declare const vExport: Directive;
+
+/**
+ * v-fade directive
+ * Fade in/out transition effect
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Toggle visibility with fade -->
+ *   <div v-fade="isVisible">Fade content</div>
+ *
+ *   <!-- Fade in only -->
+ *   <div v-fade="'in'">Fade in</div>
+ *
+ *   <!-- Fade out only -->
+ *   <div v-fade="'out'">Fade out</div>
+ *
+ *   <!-- With options -->
+ *   <div v-fade="{
+ *     visible: isVisible,
+ *     duration: 500,
+ *     easing: 'ease-in-out',
+ *     onComplete: () => console.log('Fade complete')
+ *   }">
+ *     Content
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare const vFade: Directive;
+
 /**
  * v-focus directive
  *
@@ -4368,6 +5723,48 @@ export declare const vEllipsis: Directive;
  */
 export declare const vFocus: Directive;
 
+/**
+ * v-fullscreen directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-fullscreen>
+ *     Content to show in fullscreen
+ *     <button @click="toggleFullscreen">Toggle</button>
+ *   </div>
+ *
+ *   <div v-fullscreen="{ fullscreenClass: 'my-fullscreen' }">
+ *     Custom fullscreen class
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare const vFullscreen: Directive;
+
+/**
+ * v-highlight directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <p v-highlight="'important'">This is an important message.</p>
+ *
+ *   <p v-highlight="['Vue', 'React']">Vue and React are popular frameworks.</p>
+ *
+ *   <p v-highlight="{
+ *     keywords: 'highlight',
+ *     className: 'my-highlight',
+ *     style: 'background: yellow; color: black;',
+ *     caseSensitive: true
+ *   }">
+ *     This will highlight the word.
+ *   </p>
+ * </template>
+ * ```
+ */
+export declare const vHighlight: Directive;
+
 export declare const vHotkey: Directive;
 
 /**
@@ -4496,6 +5893,36 @@ export declare const vLoading: Directive;
  */
 export declare const vLongPress: Directive;
 
+/**
+ * v-lottie directive
+ * Lottie animation player
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- With URL -->
+ *   <div v-lottie="'https://assets.example.com/animation.json'"></div>
+ *
+ *   <!-- With animation data -->
+ *   <div v-lottie="animationData"></div>
+ *
+ *   <!-- With options -->
+ *   <div v-lottie="{
+ *     animationData: animationData,
+ *     autoplay: true,
+ *     loop: true,
+ *     speed: 1.5,
+ *     onComplete: () => console.log('Done')
+ *   }"></div>
+ * </template>
+ *
+ * <script setup>
+ * import animationData from './animation.json'
+ * </script>
+ * ```
+ */
+export declare const vLottie: Directive;
+
 /**
  * v-lowercase directive
  *
@@ -4552,6 +5979,59 @@ export declare const vMutation: Directive;
 
 export declare const vNumber: Directive;
 
+/**
+ * v-pan directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-pan="handlePan">Swipe me</div>
+ *
+ *   <div v-pan="{
+ *     onPan: handlePan,
+ *     direction: 'horizontal',
+ *     threshold: 20
+ *   }">
+ *     Horizontal only
+ *   </div>
+ * </template>
+ *
+ * <script setup>
+ * function handlePan(e) {
+ *   console.log('Direction:', e.direction)
+ *   console.log('Distance:', e.distance)
+ * }
+ * </script>
+ * ```
+ */
+export declare const vPan: Directive;
+
+/**
+ * v-parallax directive
+ * Parallax scrolling effect
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Simple parallax -->
+ *   <div v-parallax>Parallax content</div>
+ *
+ *   <!-- With speed factor -->
+ *   <div v-parallax="0.3">Slower parallax</div>
+ *
+ *   <!-- With options -->
+ *   <div v-parallax="{
+ *     speed: 0.5,
+ *     reverse: true,
+ *     mobileBreakpoint: 768
+ *   }">
+ *     Reverse parallax, disabled on mobile
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare const vParallax: Directive;
+
 /**
  * v-permission directive
  *
@@ -4580,6 +6060,34 @@ export declare const vNumber: Directive;
  */
 export declare const vPermission: Directive;
 
+/**
+ * v-pinch directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-pinch="handlePinch">Pinch to zoom</div>
+ *
+ *   <div v-pinch="{
+ *     onPinch: handlePinch,
+ *     enableTransform: true,
+ *     minScale: 0.5,
+ *     maxScale: 3
+ *   }">
+ *     Pinch to scale
+ *   </div>
+ * </template>
+ *
+ * <script setup>
+ * function handlePinch(e) {
+ *   console.log('Scale:', e.scale)
+ *   console.log('Center:', e.centerX, e.centerY)
+ * }
+ * </script>
+ * ```
+ */
+export declare const vPinch: Directive;
+
 /**
  * v-print directive
  *
@@ -4606,6 +6114,32 @@ export declare const vPermission: Directive;
  */
 export declare const vPrint: Directive;
 
+/**
+ * v-progress directive
+ * Progress bar animation
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-progress="50">Progress at 50%</div>
+ *
+ *   <div v-progress="{
+ *     value: progressValue,
+ *     color: '#42b883',
+ *     height: 8,
+ *     showText: true
+ *   }">
+ *     Content
+ *   </div>
+ *
+ *   <div v-progress="{ indeterminate: true }">
+ *     Loading...
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare const vProgress: Directive;
+
 export declare const vPullRefresh: Directive;
 
 /**
@@ -4635,6 +6169,33 @@ export declare const vResize: Directive;
  */
 export declare const vRipple: Directive;
 
+/**
+ * v-rotate directive
+ * Two-finger rotation gesture
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-rotate="handleRotate">Rotate with two fingers</div>
+ *
+ *   <div v-rotate="{
+ *     onRotate: handleRotate,
+ *     enableTransform: true
+ *   }">
+ *     Rotate with transform
+ *   </div>
+ * </template>
+ *
+ * <script setup>
+ * function handleRotate(e) {
+ *   console.log('Rotation:', e.rotation)
+ *   console.log('Angle:', e.angle)
+ * }
+ * </script>
+ * ```
+ */
+export declare const vRotateGesture: Directive;
+
 /**
  * v-sanitize directive
  *
@@ -4662,6 +6223,28 @@ export declare const vSanitize: Directive;
  */
 export declare const vScroll: Directive;
 
+/**
+ * v-skeleton directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Basic usage -->
+ *   <div v-skeleton="isLoading">Content here</div>
+ *
+ *   <!-- With options -->
+ *   <div v-skeleton="{ loading: isLoading, animation: 'pulse', width: 200, height: 20 }">
+ *     Content here
+ *   </div>
+ *
+ *   <!-- Multiple skeleton lines -->
+ *   <div v-skeleton="{ loading: isLoading, height: '1em' }">Line 1</div>
+ *   <div v-skeleton="{ loading: isLoading, height: '1em' }">Line 2</div>
+ * </template>
+ * ```
+ */
+export declare const vSkeleton: Directive;
+
 /**
  * v-sticky directive
  *
@@ -4739,6 +6322,35 @@ export declare const vTrim: Directive;
  */
 export declare const vTruncate: Directive;
 
+/**
+ * v-typewriter directive
+ * Typewriter animation effect
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Simple usage -->
+ *   <span v-typewriter="'Hello, World!'"></span>
+ *
+ *   <!-- With options -->
+ *   <span v-typewriter="{
+ *     text: 'Typing animation',
+ *     speed: 100,
+ *     cursor: '_',
+ *     onComplete: () => console.log('Done!')
+ *   }"></span>
+ *
+ *   <!-- Loop mode -->
+ *   <span v-typewriter="{
+ *     text: 'Loop animation',
+ *     loop: true,
+ *     deleteDelay: 1000
+ *   }"></span>
+ * </template>
+ * ```
+ */
+export declare const vTypewriter: Directive;
+
 /**
  * Vue 2 directive hooks
  */