v-float 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 V-Float
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,210 @@
+# V-Float
+
+A Vue 3 library for positioning floating UI elements like tooltips, popovers, dropdowns, and modals. Built on top of [VFloat](https://vfloat.pages.com/) with Vue 3 Composition API.
+
+## Features
+
+- **Precise Positioning**: Pixel-perfect positioning with automatic collision detection
+- **Vue 3 Composables**: Reactive composables designed for the Composition API
+- **Interaction Handling**: Built-in hover, focus, click, and dismiss behaviors
+- **Nested Elements**: Support for floating element trees and hierarchies
+- **Ready-to-use Components**: Pre-built components like `FloatingArrow`
+- **Lightweight**: Tree-shakable with minimal bundle impact
+- **Cross-platform**: Works on desktop, mobile, and touch devices
+- **TypeScript**: Full TypeScript support with comprehensive type definitions
+
+## Installation
+
+```bash
+# With pnpm (recommended)
+pnpm add v-float
+
+# With npm
+npm install v-float
+
+# With yarn
+yarn add v-float
+```
+
+## Quick Start
+
+### Basic Tooltip
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from "vue"
+import { useFloating, useHover, offset } from "v-float"
+
+const anchorEl = useTemplateRef("anchorEl")
+const floatingEl = useTemplateRef("floatingEl")
+
+const context = useFloating(anchorEl, floatingEl, {
+  placement: "top",
+  middlewares: [offset(8)],
+})
+
+useHover(context)
+</script>
+
+<template>
+  <button ref="anchorEl">Hover me</button>
+
+  <div v-if="context.open.value" ref="floatingEl" :style="context.floatingStyles.value">
+    This is a tooltip
+  </div>
+</template>
+```
+
+### Dropdown Menu
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from "vue"
+import { useFloating, useClick, useDismiss, offset, flip, shift } from "v-float"
+
+const triggerEl = useTemplateRef("triggerEl")
+const menuEl = useTemplateRef("menuEl")
+
+const context = useFloating(triggerEl, menuEl, {
+  placement: "bottom-start",
+  middlewares: [offset(4), flip(), shift({ padding: 8 })],
+})
+
+useClick(context)
+useDismiss(context)
+</script>
+
+<template>
+  <button ref="triggerEl">Open Menu</button>
+
+  <div v-if="context.open.value" ref="menuEl" :style="context.floatingStyles.value">
+    <div>Menu Item 1</div>
+    <div>Menu Item 2</div>
+    <div>Menu Item 3</div>
+  </div>
+</template>
+```
+
+## Core Composables
+
+### Positioning
+
+- **`useFloating`**: Core positioning logic with middleware support
+- **`useArrow`**: Position arrow elements pointing to the anchor
+- **`useFloatingTree`**: Manage nested floating element hierarchies
+
+### Interactions
+
+- **`useHover`**: Hover interactions with configurable delays and safe areas
+- **`useFocus`**: Focus/blur event handling for keyboard navigation
+- **`useClick`**: Click event handling with toggle and dismiss options
+- **`useDismiss`**: Close on outside click, ESC key, or scroll events
+- **`useClientPoint`**: Position floating elements at cursor/touch coordinates
+
+### Middleware
+
+All [Floating UI middleware](https://floating-ui.com/docs/middleware) are supported:
+
+- **`offset`**: Add distance between anchor and floating element
+- **`flip`**: Flip placement when there's insufficient space
+- **`shift`**: Shift floating element to stay in view
+- **`hide`**: Hide floating element when anchor is not visible
+- **`arrow`**: Position arrow elements (via `useArrow`)
+
+## Components
+
+### FloatingArrow
+
+Pre-built SVG arrow component with automatic positioning:
+
+```vue
+<script setup lang="ts">
+import { FloatingArrow, useFloating, useArrow } from "v-float"
+
+const context = useFloating(anchorEl, floatingEl, {
+  middlewares: [arrow({ element: arrowEl })],
+})
+</script>
+
+<template>
+  <div ref="floatingEl" :style="context.floatingStyles.value">
+    Tooltip content
+    <FloatingArrow :context="context" fill="white" />
+  </div>
+</template>
+```
+
+## Advanced Features
+
+### Floating Trees
+
+For nested floating elements like submenus:
+
+```vue
+<script setup lang="ts">
+import { useFloatingTree, useFloating } from "v-float"
+
+// Parent menu
+const parentTree = useFloatingTree()
+const parentContext = useFloating(triggerEl, menuEl, {
+  tree: parentTree,
+})
+
+// Submenu
+const submenuContext = useFloating(submenuTriggerEl, submenuEl, {
+  tree: parentTree,
+})
+</script>
+```
+
+### Virtual Elements
+
+Position relative to virtual coordinates:
+
+```vue
+<script setup lang="ts">
+import { useFloating, useClientPoint } from "v-float"
+
+const virtualEl = ref({
+  getBoundingClientRect: () => ({
+    x: 100,
+    y: 100,
+    width: 0,
+    height: 0,
+    top: 100,
+    left: 100,
+    right: 100,
+    bottom: 100,
+  }),
+})
+
+const context = useFloating(virtualEl, floatingEl)
+useClientPoint(context) // Follow mouse cursor
+</script>
+```
+
+## TypeScript Support
+
+V-Float is built with TypeScript and provides comprehensive type definitions:
+
+```typescript
+import type { FloatingContext, UseFloatingOptions, AnchorElement, FloatingElement } from "v-float"
+```
+
+## Browser Support
+
+- **Modern browsers**: Chrome, Firefox, Safari, Edge
+- **Mobile browsers**: iOS Safari, Chrome Mobile, Samsung Internet
+- **Node.js**: SSR compatible (with proper hydration)
+
+## Documentation
+
+For complete documentation with interactive examples, visit the [V-Float Documentation](https://v-float.com).
+
+## Contributing
+
+Contributions are welcome! Please read our contributing guidelines and submit pull requests to our [GitHub repository](https://github.com/v-float/v-float).
+
+## License
+
+MIT License - see [LICENSE](LICENSE) file for details.

package/dist/composables/index.d.ts

@@ -0,0 +1,7 @@
+export * from './use-floating';
+export * from './use-arrow';
+export * from './interactions';
+export * from './middlewares';
+export * from './use-tree';
+export * from './use-floating-tree';
+//# sourceMappingURL=index.d.ts.map

package/dist/composables/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composables/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,qBAAqB,CAAA"}

package/dist/composables/interactions/index.d.ts

@@ -0,0 +1,6 @@
+export * from './use-hover';
+export * from './use-focus';
+export * from './use-click';
+export * from './use-dismiss';
+export * from './use-client-point';
+//# sourceMappingURL=index.d.ts.map

package/dist/composables/interactions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composables/interactions/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA"}

package/dist/composables/interactions/use-click.d.ts

@@ -0,0 +1,52 @@
+import { MaybeRefOrGetter } from 'vue';
+import { FloatingContext } from '..';
+/**
+ * Enables showing/hiding the floating element when clicking the reference element.
+ *
+ * This composable provides event handlers for click interactions with the reference element
+ * to control the visibility of the floating element.
+ *
+ * @param context - The floating context with open state and change handler.
+ * @param options - Configuration options for click behavior.
+ *
+ * @example
+ * ```ts
+ * const context = useFloating(...)
+ * useClick(context, {
+ *   event: "mousedown",
+ * })
+ * ```
+ */
+export declare function useClick(context: FloatingContext, options?: UseClickOptions): void;
+/**
+ * Options for configuring the useClick behavior.
+ */
+export interface UseClickOptions {
+    /**
+     * Whether the Hook is enabled.
+     * @default true
+     */
+    enabled?: MaybeRefOrGetter<boolean>;
+    /**
+     * The type of event to use to determine a "click" with mouse input.
+     * Keyboard clicks work as normal.
+     * @default 'click'
+     */
+    event?: MaybeRefOrGetter<"click" | "mousedown">;
+    /**
+     * Whether to toggle the open state with repeated clicks.
+     * @default true
+     */
+    toggle?: MaybeRefOrGetter<boolean>;
+    /**
+     * Whether to ignore the logic for mouse input.
+     * @default false
+     */
+    ignoreMouse?: MaybeRefOrGetter<boolean>;
+    /**
+     * Whether to add keyboard handlers (Enter and Space key functionality).
+     * @default true
+     */
+    keyboardHandlers?: MaybeRefOrGetter<boolean>;
+}
+//# sourceMappingURL=use-click.d.ts.map

package/dist/composables/interactions/use-click.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-click.d.ts","sourceRoot":"","sources":["../../../src/composables/interactions/use-click.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,gBAAgB,EAA8C,MAAM,KAAK,CAAA;AACjG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAMpD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,GAAE,eAAoB,GAAG,IAAI,CA4HtF;AAqDD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAEnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,WAAW,CAAC,CAAA;IAE/C;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAElC;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAEvC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;CAC7C"}

package/dist/composables/interactions/use-client-point.d.ts

@@ -0,0 +1,58 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+import { FloatingContext } from '..';
+/**
+ * Positions the floating element relative to a client point (mouse position).
+ *
+ * This composable tracks pointer movements and positions the floating element
+ * accordingly, with options for axis locking and controlled coordinates.
+ *
+ * @param pointerTarget - The DOM element whose bounding box is used as the reference for pointer event listeners and initial positioning.
+ * @param context - The floating context with open state and position reference
+ * @param options - Configuration options for client point behavior
+ *
+ * @example
+ * ```ts
+ * const context = useFloating(...)
+ * useClientPoint(context, {
+ *   axis: "x",
+ *   enabled: true
+ * })
+ * ```
+ */
+export declare function useClientPoint(pointerTarget: Ref<HTMLElement | null>, context: FloatingContext, options?: UseClientPointOptions): UseClientPointReturn;
+export interface UseClientPointOptions {
+    /**
+     * Whether the Hook is enabled
+     * @default true
+     */
+    enabled?: MaybeRefOrGetter<boolean>;
+    /**
+     * Whether to restrict the client point to an axis
+     * @default 'both'
+     */
+    axis?: MaybeRefOrGetter<"x" | "y" | "both">;
+    /**
+     * Controlled x coordinate
+     * @default null
+     */
+    x?: MaybeRefOrGetter<number | null>;
+    /**
+     * Controlled y coordinate
+     * @default null
+     */
+    y?: MaybeRefOrGetter<number | null>;
+}
+export interface UseClientPointReturn {
+    /**
+     * Reactive object containing the current client coordinates (x/y)
+     */
+    coordinates: Readonly<Ref<{
+        x: number | null;
+        y: number | null;
+    }>>;
+    /**
+     * Function to manually update the floating element's position
+     */
+    updatePosition: (x: number, y: number) => void;
+}
+//# sourceMappingURL=use-client-point.d.ts.map

package/dist/composables/interactions/use-client-point.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-client-point.d.ts","sourceRoot":"","sources":["../../../src/composables/interactions/use-client-point.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,gBAAgB,EAGrB,KAAK,GAAG,EAIT,MAAM,KAAK,CAAA;AACZ,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAOpD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,cAAc,CAC5B,aAAa,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,EACtC,OAAO,EAAE,eAAe,EACxB,OAAO,GAAE,qBAA0B,GAClC,oBAAoB,CA4EtB;AAoGD,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAEnC;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC,CAAA;IAE3C;;;OAGG;IACH,CAAC,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IAEnC;;;OAGG;IACH,CAAC,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;CACpC;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,WAAW,EAAE,QAAQ,CAAC,GAAG,CAAC;QAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC,CAAA;IAClE;;OAEG;IACH,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/C"}

package/dist/composables/interactions/use-dismiss.d.ts

@@ -0,0 +1,68 @@
+import { MaybeRefOrGetter } from 'vue';
+import { FloatingContext } from '../use-floating';
+export type DismissReason = "escape-key" | "outside-press" | "anchor-press" | "ancestor-scroll";
+export interface UseDismissProps {
+    /**
+     * Whether dismiss event listeners are enabled.
+     * @default true
+     */
+    enabled?: MaybeRefOrGetter<boolean>;
+    /**
+     * Whether to dismiss when the escape key is pressed.
+     * @default true
+     */
+    escapeKey?: MaybeRefOrGetter<boolean>;
+    /**
+     * Whether to dismiss when the anchor element is pressed.
+     * @default false
+     */
+    anchorPress?: MaybeRefOrGetter<boolean>;
+    /**
+     * Whether to dismiss when clicking outside the floating and anchor element.
+     * Can be a function to allow custom logic.
+     * @default true
+     */
+    outsidePress?: MaybeRefOrGetter<boolean | ((event: MouseEvent) => boolean)>;
+    /**
+     * Whether to dismiss when a scrollable ancestor of the floating element is scrolled.
+     * @default false
+     */
+    ancestorScroll?: MaybeRefOrGetter<boolean>;
+    /**
+     * Whether to use capture phase for document event listeners.
+     * @default { escapeKey: false, outsidePress: true }
+     */
+    capture?: boolean | {
+        escapeKey?: boolean;
+        outsidePress?: boolean;
+    };
+    /**
+     * The event name to use for anchor press.
+     * @default 'pointerdown'
+     */
+    anchorPressEvent?: "pointerdown" | "mousedown" | "click";
+    /**
+     * The event name to use for outside press.
+     * @default 'pointerdown'
+     */
+    outsidePressEvent?: "pointerdown" | "mousedown" | "click";
+}
+/**
+ * Closes the floating element when a dismissal is requested.
+ *
+ * This composable provides event handlers for dismissal behaviors including
+ * outside clicks, escape key press, anchor element press, and ancestor scroll.
+ *
+ * @param context - The floating context with open state and change handler.
+ * @param options - Configuration options for dismissal behavior.
+ *
+ * @example
+ * ```ts
+ * useDismiss(context, {
+ *   escapeKey: true,
+ *   outsidePress: (event) => !event.target.closest('.toast'),
+ * })
+ * ```
+ */
+export declare function useDismiss(context: FloatingContext, options?: UseDismissProps): void;
+//# sourceMappingURL=use-dismiss.d.ts.map

package/dist/composables/interactions/use-dismiss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dismiss.d.ts","sourceRoot":"","sources":["../../../src/composables/interactions/use-dismiss.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,gBAAgB,EAAkD,MAAM,KAAK,CAAA;AAC3F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAQtD,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,eAAe,GAAG,cAAc,GAAG,iBAAiB,CAAA;AAE/F,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAEnC;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAErC;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAEvC;;;;OAIG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,OAAO,CAAC,CAAC,CAAA;IAE3E;;;OAGG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAE1C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG;QAAE,SAAS,CAAC,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAE,CAAA;IAEnE;;;OAGG;IACH,gBAAgB,CAAC,EAAE,aAAa,GAAG,WAAW,GAAG,OAAO,CAAA;IAExD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,aAAa,GAAG,WAAW,GAAG,OAAO,CAAA;CAC1D;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,GAAE,eAAoB,GAAG,IAAI,CAqIxF"}

package/dist/composables/interactions/use-focus.d.ts

@@ -0,0 +1,30 @@
+import { FloatingContext } from '..';
+import { MaybeRefOrGetter } from 'vue';
+/**
+ * Enables showing/hiding the floating element when focusing the reference element.
+ *
+ * This composable is responsible for KEYBOARD-ONLY interactions. For a complete user experience,
+ * it should be composed with other hooks like `useClick`, `useHover`, and `useDismiss`.
+ *
+ * @param context - The floating context with open state and change handler.
+ * @param options - Configuration options for focus behavior.
+ */
+export declare function useFocus(context: FloatingContext, options?: UseFocusOptions): UseFocusReturn;
+export interface UseFocusOptions {
+    /**
+     * Whether focus event listeners are enabled
+     * @default true
+     */
+    enabled?: MaybeRefOrGetter<boolean>;
+    /**
+     * Whether the open state only changes if the focus event is considered
+     * visible (`:focus-visible` CSS selector).
+     * @default true
+     */
+    requireFocusVisible?: MaybeRefOrGetter<boolean>;
+}
+/**
+ * Return value of the useFocus composable
+ */
+export type UseFocusReturn = undefined;
+//# sourceMappingURL=use-focus.d.ts.map

package/dist/composables/interactions/use-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus.d.ts","sourceRoot":"","sources":["../../../src/composables/interactions/use-focus.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAEpD,OAAO,EAEL,KAAK,gBAAgB,EAMtB,MAAM,KAAK,CAAA;AAMZ;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,GAAE,eAAoB,GAAG,cAAc,CA+HhG;AAMD,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAEnC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;CAChD;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,SAAS,CAAA"}

package/dist/composables/interactions/use-hover.d.ts

@@ -0,0 +1,64 @@
+import { MaybeRef } from 'vue';
+import { FloatingContext, FloatingElement, AnchorElement } from '../use-floating';
+type PointerType = "mouse" | "pen" | "touch" | null;
+export interface HandleCloseContext {
+    context: FloatingContext;
+    open: boolean;
+    pointerType: PointerType;
+    x: number;
+    y: number;
+    referenceEl: AnchorElement;
+    floatingEl: FloatingElement;
+    isPointInFloating(event: PointerEvent | MouseEvent | TouchEvent): boolean;
+    originalEvent?: Event;
+}
+export type HandleCloseFn = (context: HandleCloseContext, onClose: () => void) => undefined | (() => void);
+export interface UseHoverOptions {
+    /**
+     * Whether hover event listeners are enabled.
+     * @default true
+     */
+    enabled?: MaybeRef<boolean>;
+    /**
+     * Delay in milliseconds before showing/hiding the floating element.
+     * Can be a single number for both open and close, or an object
+     * specifying different delays.
+     * @default 0
+     */
+    delay?: MaybeRef<number | {
+        open?: number;
+        close?: number;
+    }>;
+    /**
+     * Time in milliseconds the pointer must rest within the reference
+     * element before opening the floating element.
+     * this option is ignored if an open delay is specified.
+     * @default 0
+     */
+    restMs?: MaybeRef<number>;
+    /**
+     * Whether hover events should only trigger for mouse like pointers (mouse, pen ,stylus ..etc).
+     * @default false
+     */
+    mouseOnly?: MaybeRef<boolean>;
+}
+/**
+ * Enables showing/hiding the floating element when hovering the reference element
+ * with enhanced behaviors like delayed open/close, rest detection, and custom
+ * exit handling.
+ *
+ * @param context - The floating context with open state and change handler
+ * @param options - Configuration options for hover behavior
+ *
+ * @example
+ * ```ts
+ * const context = useFloating(...)
+ * useHover(context, {
+ *   delay: { open: 100, close: 300 },
+ *   restMs: 150
+ * })
+ * ```
+ */
+export declare function useHover(context: FloatingContext, options?: UseHoverOptions): void;
+export {};
+//# sourceMappingURL=use-hover.d.ts.map

package/dist/composables/interactions/use-hover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hover.d.ts","sourceRoot":"","sources":["../../../src/composables/interactions/use-hover.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,QAAQ,EAMd,MAAM,KAAK,CAAA;AACZ,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAMtF,KAAK,WAAW,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,IAAI,CAAA;AAEnD,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,eAAe,CAAA;IACxB,IAAI,EAAE,OAAO,CAAA;IACb,WAAW,EAAE,WAAW,CAAA;IACxB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,WAAW,EAAE,aAAa,CAAA;IAC1B,UAAU,EAAE,eAAe,CAAA;IAC3B,iBAAiB,CAAC,KAAK,EAAE,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAA;IACzE,aAAa,CAAC,EAAE,KAAK,CAAA;CACtB;AAED,MAAM,MAAM,aAAa,GAAG,CAC1B,OAAO,EAAE,kBAAkB,EAC3B,OAAO,EAAE,MAAM,IAAI,KAChB,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;AAE7B,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IAE3B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAE5D;;;;;OAKG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IAEzB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;CAC9B;AAqED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,GAAE,eAAoB,GAAG,IAAI,CAiJtF"}

package/dist/composables/middlewares/arrow.d.ts

@@ -0,0 +1,26 @@
+import { Middleware, Padding } from '@floating-ui/dom';
+import { Ref } from 'vue';
+/**
+ * Options for configuring arrow positioning within floating elements
+ */
+export interface ArrowMiddlewareOptions {
+    /**
+     * Padding to apply around the arrow element
+     */
+    padding?: Padding;
+    /**
+     * Reference to the arrow element
+     */
+    element: Ref<HTMLElement | null>;
+}
+/**
+ * Positions an inner element of the floating element such that it is centered to the reference element.
+ *
+ * This middleware is used to position arrow elements within floating elements.
+ *
+ * @param options - The arrow options including padding and element reference
+ * @returns A middleware function for arrow positioning
+ * @see https://floating-ui.com/docs/arrow
+ */
+export declare function arrow(options: ArrowMiddlewareOptions): Middleware;
+//# sourceMappingURL=arrow.d.ts.map

package/dist/composables/middlewares/arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.d.ts","sourceRoot":"","sources":["../../../src/composables/middlewares/arrow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE3D,OAAO,EAAE,KAAK,GAAG,EAAW,MAAM,KAAK,CAAA;AAMvC;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IACH,OAAO,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CACjC;AAMD;;;;;;;;GAQG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,sBAAsB,GAAG,UAAU,CAcjE"}

package/dist/composables/middlewares/index.d.ts

@@ -0,0 +1,3 @@
+export * from './arrow';
+export { offset, flip, shift, hide } from '@floating-ui/dom';
+//# sourceMappingURL=index.d.ts.map

package/dist/composables/middlewares/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composables/middlewares/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/composables/use-arrow.d.ts

@@ -0,0 +1,46 @@
+import { ComputedRef } from 'vue';
+import { FloatingContext } from './use-floating';
+/**
+ * Return value of the useArrow composable
+ */
+export interface UseArrowReturn {
+    /**
+     * The computed X position of the arrow
+     */
+    arrowX: ComputedRef<number>;
+    /**
+     * The computed Y position of the arrow
+     */
+    arrowY: ComputedRef<number>;
+    /**
+     * The computed CSS styles for positioning the arrow
+     */
+    arrowStyles: ComputedRef<Record<string, string>>;
+}
+/**
+ * Options for the useArrow composable
+ */
+export interface UseArrowOptions {
+    /**
+     * The offset for the arrow positioning.
+     * Defaults to "-12px" if not provided.
+     */
+    offset?: string;
+}
+/**
+ * Composable for computing arrow position styles for floating elements
+ *
+ * This composable calculates the position and styles for an arrow element
+ * based on the placement and middleware data from a floating element.
+ *
+ * @param context - The floating context containing middleware data and placement information
+ * @param options - Optional configuration for the arrow, e.g., offset
+ * @returns Computed arrow positions and CSS styles
+ *
+ * @example
+ * ```ts
+ * const { arrowStyles } = useArrow(floatingContext, { offset: "-10px" })
+ * ```
+ */
+export declare function useArrow(context: FloatingContext, options?: UseArrowOptions): UseArrowReturn;
+//# sourceMappingURL=use-arrow.d.ts.map

package/dist/composables/use-arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-arrow.d.ts","sourceRoot":"","sources":["../../src/composables/use-arrow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAMrD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAE3B;;OAEG;IACH,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAE3B;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;CACjD;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAMD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,GAAE,eAAoB,GAAG,cAAc,CA8BhG"}