@soybeanjs/headless 0.29.0-beta.8 → 0.29.0

package/dist/components/visually-hidden/visually-hidden.vue.d.ts

@@ -0,0 +1,21 @@
+import { AsTag } from "../primitive/types.js";
+import { VisuallyHiddenFeature, VisuallyHiddenProps } from "./types.js";
+
+//#region src/components/visually-hidden/visually-hidden.vue.d.ts
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<VisuallyHiddenProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VisuallyHiddenProps> & Readonly<{}>, {
+  as: AsTag | import("vue").Component;
+  feature: VisuallyHiddenFeature;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/watermark/context.d.ts

@@ -0,0 +1,7 @@
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
+import { WatermarkUiSlot } from "./types.js";
+//#region src/components/watermark/context.d.ts
+declare const provideWatermarkUi: (ui: import("vue").ComputedRef<Partial<UiClass<WatermarkUiSlot>>>) => import("vue").ComputedRef<Partial<UiClass<WatermarkUiSlot>>>, useWatermarkUi: UseUiConsumer<WatermarkUiSlot>;
+//#endregion
+export { provideWatermarkUi };

package/dist/components/watermark/context.js

@@ -0,0 +1 @@
+import{useContext as e}from"../../composables/use-context.js";import{useUiContext as t}from"../../composables/use-ui-context.js";import"../../composables/index.js";const[n,r]=e(`WatermarkCompact`,e=>e),[i,a]=e(`WatermarkRoot`,e=>e),[o,s]=t(`WatermarkUi`);export{n as provideWatermarkCompactContext,i as provideWatermarkRootContext,o as provideWatermarkUi,r as useWatermarkCompactContext,a as useWatermarkRootContext,s as useWatermarkUi};

package/dist/components/watermark/index.d.ts

@@ -0,0 +1,6 @@
+import { WatermarkCompactProps, WatermarkOverlayProps, WatermarkRootProps, WatermarkUi, WatermarkUiSlot } from "./types.js";
+import { _default } from "./watermark-compact.vue.js";
+import { _default as _default$1 } from "./watermark-overlay.vue.js";
+import { _default as _default$2 } from "./watermark-root.vue.js";
+import { provideWatermarkUi } from "./context.js";
+export { _default as WatermarkCompact, type WatermarkCompactProps, _default$1 as WatermarkOverlay, type WatermarkOverlayProps, _default$2 as WatermarkRoot, type WatermarkRootProps, type WatermarkUi, type WatermarkUiSlot, provideWatermarkUi };

package/dist/components/watermark/index.js

@@ -0,0 +1 @@
+import{provideWatermarkUi as e}from"./context.js";import t from"./watermark-overlay.js";import n from"./watermark-root.js";import r from"./watermark-compact.js";export{r as WatermarkCompact,t as WatermarkOverlay,n as WatermarkRoot,e as provideWatermarkUi};

package/dist/components/watermark/shared.js

@@ -0,0 +1 @@
+function e(e,o){if(typeof window>`u`)return;let{content:s,fontSize:c,fontFamily:l,fontColor:u,fontWeight:d,rotate:f,gap:p,offset:m,cross:h}=e;if(!s&&!o)return;let g=document.createElement(`canvas`),_=g.getContext(`2d`);if(!_)return;let v=f*Math.PI/180,y=Math.abs(Math.sin(v)),b=Math.abs(Math.cos(v));if(o){let r=e.width??Math.ceil(o.width*b+o.height*y+p[0]),a=e.height??Math.ceil(o.width*y+o.height*b+p[1]);g.width=r,g.height=a;let s={loadedImage:o,rotateRad:v,offset:m};h?n(_,r,a,i,s):t(_,r,a,i,s)}else{let i=a(s,c,l,d),o=c,f=e.width??Math.ceil(i*b+o*y+p[0]),x=e.height??Math.ceil(i*y+o*b+p[1]);g.width=f,g.height=x;let S={content:s,fontSize:c,fontFamily:l,fontColor:u,fontWeight:d,rotateRad:v,offset:m};h?n(_,f,x,r,S):t(_,f,x,r,S)}return g.toDataURL()}function t(e,t,n,r,i){r(e,t/2+i.offset[0],n/2+i.offset[1],i.rotateRad,i)}function n(e,t,n,r,i){r(e,t/2,n/2,i.rotateRad,i),r(e,t/2,n/2,-i.rotateRad,i)}function r(e,t,n,r,i){let{content:a,fontSize:o,fontFamily:s,fontColor:c,fontWeight:l}=i;!a||o===void 0||s===void 0||c===void 0||(e.save(),e.translate(t,n),e.rotate(r),e.font=`${l??`normal`} ${o}px ${s}`,e.fillStyle=c,e.textAlign=`center`,e.textBaseline=`middle`,e.fillText(a,0,0),e.restore())}function i(e,t,n,r,i){let{loadedImage:a}=i;a&&(e.save(),e.translate(t,n),e.rotate(r),e.drawImage(a,-a.width/2,-a.height/2),e.restore())}function a(e,t,n,r){if(!e)return 0;let i=document.createElement(`canvas`).getContext(`2d`);return i?(i.font=`${r} ${t}px ${n}`,i.measureText(e).width):0}const o={fontSize:16,fontFamily:`sans-serif`,fontColor:`rgba(0, 0, 0, 0.15)`,fontWeight:`normal`,rotate:-22,gap:[100,100],offset:[0,0],cross:!1};function s(e){return{content:e.content,image:e.image,fontSize:e.fontSize??o.fontSize,fontFamily:e.fontFamily??o.fontFamily,fontColor:e.fontColor??o.fontColor,fontWeight:e.fontWeight??o.fontWeight,rotate:e.rotate??o.rotate,gap:e.gap??o.gap,offset:e.offset??o.offset,width:e.width,height:e.height,cross:e.cross??o.cross}}export{e as generateWatermarkDataUrl,s as resolveWatermarkConfig};

package/dist/components/watermark/types.d.ts

@@ -0,0 +1,106 @@
+import { UiClass } from "../../types/common.js";
+import { BaseProps } from "../../types/vue.js";
+import { ComputedRef, ShallowRef } from "vue";
+
+//#region src/components/watermark/types.d.ts
+/**
+ * Properties for the WatermarkRoot component.
+ */
+interface WatermarkRootProps extends BaseProps {
+  /**
+   * The text content of the watermark.
+   */
+  content?: string;
+  /**
+   * The image URL of the watermark.
+   * When both content and image are provided, image takes priority.
+   */
+  image?: string;
+  /**
+   * The font size of the watermark text in pixels.
+   *
+   * @defaultValue 16
+   */
+  fontSize?: number;
+  /**
+   * The font family of the watermark text.
+   *
+   * @defaultValue 'sans-serif'
+   */
+  fontFamily?: string;
+  /**
+   * The font color of the watermark text.
+   *
+   * @defaultValue 'rgba(0, 0, 0, 0.15)'
+   */
+  fontColor?: string;
+  /**
+   * The font weight of the watermark text.
+   *
+   * @defaultValue 'normal'
+   */
+  fontWeight?: number | string;
+  /**
+   * The rotation angle of the watermark in degrees.
+   *
+   * @defaultValue -22
+   */
+  rotate?: number;
+  /**
+   * The gap between watermark tiles in pixels, as [x, y].
+   *
+   * @defaultValue [100, 100]
+   */
+  gap?: [number, number];
+  /**
+   * The offset of the watermark within each tile in pixels, as [x, y].
+   *
+   * @defaultValue [0, 0]
+   */
+  offset?: [number, number];
+  /**
+   * The width of a single watermark tile in pixels.
+   * When not provided, it is calculated automatically based on text dimensions and gap.
+   */
+  width?: number;
+  /**
+   * The height of a single watermark tile in pixels.
+   * When not provided, it is calculated automatically based on text dimensions and gap.
+   */
+  height?: number;
+  /**
+   * When true, renders a diagonal cross pattern with two overlapping watermarks.
+   *
+   * @defaultValue false
+   */
+  cross?: boolean;
+  /**
+   * When true, observes and restores the watermark overlay if it is tampered with or removed.
+   *
+   * @defaultValue false
+   */
+  defense?: boolean;
+}
+/**
+ * Properties for the WatermarkOverlay component.
+ */
+interface WatermarkOverlayProps extends BaseProps {}
+/**
+ * Properties for the WatermarkCompact component.
+ */
+interface WatermarkCompactProps extends WatermarkRootProps {
+  /**
+   * Properties forwarded to the overlay element.
+   */
+  overlayProps?: WatermarkOverlayProps;
+}
+/**
+ * Available UI slots for the Watermark component.
+ */
+type WatermarkUiSlot = 'root' | 'overlay';
+/**
+ * UI class overrides for the Watermark component.
+ */
+type WatermarkUi = UiClass<WatermarkUiSlot>;
+//#endregion
+export { WatermarkCompactProps, WatermarkOverlayProps, WatermarkRootProps, WatermarkUi, WatermarkUiSlot };

package/dist/components/watermark/watermark-compact.js

@@ -0,0 +1 @@
+import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import{provideWatermarkCompactContext as t}from"./context.js";import n from"./watermark-overlay.js";import r from"./watermark-root.js";import{createBlock as i,defineComponent as a,guardReactiveProps as o,mergeProps as s,normalizeProps as c,openBlock as l,renderSlot as u,shallowRef as d,unref as f,withCtx as p}from"vue";const m=a({name:`WatermarkCompact`,__name:`watermark-compact`,props:{overlayProps:{},content:{},image:{},fontSize:{},fontFamily:{},fontColor:{},fontWeight:{},rotate:{},gap:{},offset:{},width:{},height:{},cross:{type:Boolean},defense:{type:Boolean}},setup(a){let m=e(a,[`overlayProps`]),h=d(0);function g(){h.value+=1}return t({overlayRenderKey:h,repairOverlay:g}),(e,t)=>(l(),i(r,c(o(f(m))),{default:p(()=>[u(e.$slots,`default`),(l(),i(n,s({key:h.value},a.overlayProps),null,16))]),_:3},16))}});export{m as default};

package/dist/components/watermark/watermark-compact.vue.d.ts

@@ -0,0 +1,17 @@
+import { WatermarkCompactProps } from "./types.js";
+
+//#region src/components/watermark/watermark-compact.vue.d.ts
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<WatermarkCompactProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<WatermarkCompactProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/watermark/watermark-overlay.js

@@ -0,0 +1 @@
+import{useForwardElement as e}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{useWatermarkCompactContext as t,useWatermarkRootContext as n,useWatermarkUi as r}from"./context.js";import{computed as i,createCommentVNode as a,createElementBlock as o,defineComponent as s,normalizeClass as c,normalizeStyle as l,openBlock as u,unref as d}from"vue";import{useMutationObserver as f}from"@vueuse/core";const p=s({name:`WatermarkOverlay`,__name:`watermark-overlay`,setup(s){let p=r(`overlay`),m=t(),{overlayStyle:h,defense:g}=n(`WatermarkOverlay`),[_,v]=e(),y=i(()=>c(p.value)),b=i(()=>h.value?.backgroundImage??``);function x(){let e=_.value;return!e||!h.value?!1:!e.hasAttribute(`data-soybean-watermark-overlay`)||e.getAttribute(`aria-hidden`)!==`true`||e.hasAttribute(`hidden`)||e.className!==y.value||e.style.backgroundImage!==b.value?!0:e.style.length!==+!!b.value}return f(_,()=>{!g.value||!h.value||x()&&m?.repairOverlay()},{attributes:!0,attributeFilter:[`aria-hidden`,`class`,`data-soybean-watermark-overlay`,`hidden`,`style`]}),(e,t)=>d(h)?(u(),o(`div`,{key:0,ref:d(v),"data-soybean-watermark-overlay":``,class:c(d(p)),style:l(d(h)),"aria-hidden":`true`},null,6)):a(`v-if`,!0)}});export{p as default};

package/dist/components/watermark/watermark-overlay.vue.d.ts

@@ -0,0 +1,7 @@
+import { WatermarkOverlayProps } from "./types.js";
+
+//#region src/components/watermark/watermark-overlay.vue.d.ts
+declare const __VLS_export: import("vue").DefineComponent<WatermarkOverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<WatermarkOverlayProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };

package/dist/components/watermark/watermark-root.js

@@ -0,0 +1 @@
+import{useForwardElement as e}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{provideWatermarkRootContext as t,useWatermarkCompactContext as n,useWatermarkUi as r}from"./context.js";import{generateWatermarkDataUrl as i,resolveWatermarkConfig as a}from"./shared.js";import{computed as o,createElementBlock as s,defineComponent as c,normalizeClass as l,onBeforeUnmount as u,openBlock as d,renderSlot as f,shallowRef as p,unref as m,watch as h}from"vue";import{useMutationObserver as g}from"@vueuse/core";const _=c({name:`WatermarkRoot`,__name:`watermark-root`,props:{content:{},image:{},fontSize:{},fontFamily:{},fontColor:{},fontWeight:{},rotate:{},gap:{},offset:{},width:{},height:{},cross:{type:Boolean},defense:{type:Boolean}},setup(c,{expose:_}){let v=c,y=r(`root`),b=n(),[x,S]=e(),C=p(),w=p(),T=o(()=>v.defense??!1),E=p(null),D=p(null);function O(){let e=D.value;e&&(e.img.removeEventListener(`load`,k),e.img.removeEventListener(`error`,A),D.value=null)}function k(){let e=D.value;if(!e||e.img!==this)return;E.value=this;let t=i(e.config,this);C.value=t,w.value=t?{backgroundImage:`url(${t})`}:void 0,D.value=null}function A(){let e=D.value;!e||e.img!==this||(E.value=null,C.value=void 0,w.value=void 0,D.value=null)}function j(e){O();let t=new Image;t.crossOrigin=`anonymous`,D.value={img:t,config:e},t.addEventListener(`load`,k),t.addEventListener(`error`,A),t.src=v.image}function M(){let e=a(v);if(v.image)j(e);else{let t=i(e);C.value=t,w.value=t?{backgroundImage:`url(${t})`}:void 0}}return h(()=>[v.content,v.image,v.fontSize,v.fontFamily,v.fontColor,v.fontWeight,v.rotate,v.gap,v.offset,v.width,v.height,v.cross,v.defense],()=>{M()},{immediate:!0}),g(x,e=>{!T.value||!w.value||e.some(e=>e.type===`childList`?Array.from(e.removedNodes).some(e=>e instanceof HTMLElement&&e.hasAttribute(`data-soybean-watermark-overlay`)):!1)&&(x.value?.querySelector(`[data-soybean-watermark-overlay]`)||b?.repairOverlay())},{childList:!0}),t({overlayStyle:w,defense:T}),u(()=>{O()}),_({rootElement:x,dataUrl:C}),(e,t)=>(d(),s(`div`,{ref:m(S),"data-soybean-watermark-root":``,class:l(m(y))},[f(e.$slots,`default`)],2))}});export{_ as default};

package/dist/components/watermark/watermark-root.vue.d.ts

@@ -0,0 +1,20 @@
+import { WatermarkRootProps } from "./types.js";
+
+//#region src/components/watermark/watermark-root.vue.d.ts
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<WatermarkRootProps, {
+  rootElement: import("vue").ShallowRef<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+  dataUrl: import("vue").ShallowRef<string | undefined, string | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<WatermarkRootProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/composables/index.d.ts

@@ -0,0 +1,28 @@
+import { useArrowNavigation } from "./use-arrow-navigation.js";
+import { useBodyScrollLock } from "./use-body-scroll-lock.js";
+import { useBoolProp } from "./use-bool-prop.js";
+import { CollectionItemData, useCollection } from "./use-collection.js";
+import { useContext } from "./use-context.js";
+import { useControllableState } from "./use-controllable-state.js";
+import { UseDismissableLayerOptions, useDismissableLayer, useDismissableLayerBranch, useFocusOutside, usePointerdownOutside } from "./use-dismissable-layer.js";
+import { useEscapeKeyDown } from "./use-escape-key-down.js";
+import { useExposedElement } from "./use-exposed-element.js";
+import { UseFloatingOptions, UseFloatingReturn, useFloating } from "./use-floating.js";
+import { useFocusGuards } from "./use-focus-guards.js";
+import { UseFocusScopeOptions, useFocusScope } from "./use-focus-scope.js";
+import { useForwardElement } from "./use-forward-element.js";
+import { useForwardListeners } from "./use-forward-listeners.js";
+import { FuseOptions, UseFuseOptions, UseFuseReturn, useFuse } from "./use-fuse.js";
+import { UseGraceAreaOptions, useGraceArea } from "./use-grace-area.js";
+import { useHideOthers } from "./use-hide-others.js";
+import { useImageLoadingStatus } from "./use-image-loading-status.js";
+import { useIsUsingKeyboard } from "./use-is-using-keyboard.js";
+import { kbdMap, useKbd } from "./use-kbd.js";
+import { UsePopupEventsOptions, usePopupEvents } from "./use-popup-events.js";
+import { usePresence } from "./use-presence.js";
+import { useOmitProps, usePickProps } from "./use-props.js";
+import { useSelection } from "./use-selection.js";
+import { useStateMachine } from "./use-state-machine.js";
+import { useTypeahead } from "./use-typeahead.js";
+import { UseUiConsumer, useUiContext } from "./use-ui-context.js";
+export { CollectionItemData, FuseOptions, UseDismissableLayerOptions, UseFloatingOptions, UseFloatingReturn, UseFocusScopeOptions, UseFuseOptions, UseFuseReturn, UseGraceAreaOptions, UsePopupEventsOptions, UseUiConsumer, kbdMap, useArrowNavigation, useBodyScrollLock, useBoolProp, useCollection, useContext, useControllableState, useDismissableLayer, useDismissableLayerBranch, useEscapeKeyDown, useExposedElement, useFloating, useFocusGuards, useFocusOutside, useFocusScope, useForwardElement, useForwardListeners, useFuse, useGraceArea, useHideOthers, useImageLoadingStatus, useIsUsingKeyboard, useKbd, useOmitProps, usePickProps, usePointerdownOutside, usePopupEvents, usePresence, useSelection, useStateMachine, useTypeahead, useUiContext };

package/dist/composables/index.js

@@ -0,0 +1 @@
+import{useArrowNavigation as e}from"./use-arrow-navigation.js";import{useContext as t}from"./use-context.js";import{useBodyScrollLock as n}from"./use-body-scroll-lock.js";import{useBoolProp as r}from"./use-bool-prop.js";import{useCollection as i}from"./use-collection.js";import{useControllableState as a}from"./use-controllable-state.js";import{useEscapeKeyDown as o}from"./use-escape-key-down.js";import{useDismissableLayer as s,useDismissableLayerBranch as c,useFocusOutside as l,usePointerdownOutside as u}from"./use-dismissable-layer.js";import{useForwardElement as d}from"./use-forward-element.js";import{useExposedElement as f}from"./use-exposed-element.js";import{useFloating as p}from"./use-floating.js";import{useFocusGuards as m}from"./use-focus-guards.js";import{useFocusScope as h}from"./use-focus-scope.js";import{useForwardListeners as g}from"./use-forward-listeners.js";import{useFuse as _}from"./use-fuse.js";import{useGraceArea as v}from"./use-grace-area.js";import{useHideOthers as y}from"./use-hide-others.js";import{useImageLoadingStatus as b}from"./use-image-loading-status.js";import{useIsUsingKeyboard as x}from"./use-is-using-keyboard.js";import{kbdMap as S,useKbd as C}from"./use-kbd.js";import{usePopupEvents as w}from"./use-popup-events.js";import{useStateMachine as T}from"./use-state-machine.js";import{usePresence as E}from"./use-presence.js";import{useOmitProps as D,usePickProps as O}from"./use-props.js";import{useSelection as k}from"./use-selection.js";import{useTypeahead as A}from"./use-typeahead.js";import{useUiContext as j}from"./use-ui-context.js";export{S as kbdMap,e as useArrowNavigation,n as useBodyScrollLock,r as useBoolProp,i as useCollection,t as useContext,a as useControllableState,s as useDismissableLayer,c as useDismissableLayerBranch,o as useEscapeKeyDown,f as useExposedElement,p as useFloating,m as useFocusGuards,l as useFocusOutside,h as useFocusScope,d as useForwardElement,g as useForwardListeners,_ as useFuse,v as useGraceArea,y as useHideOthers,b as useImageLoadingStatus,x as useIsUsingKeyboard,C as useKbd,D as useOmitProps,O as usePickProps,u as usePointerdownOutside,w as usePopupEvents,E as usePresence,k as useSelection,T as useStateMachine,A as useTypeahead,j as useUiContext};

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

@@ -0,0 +1,69 @@
+import { Direction } from "../types/common.js";
+//#region src/composables/use-arrow-navigation.d.ts
+type ArrowKeyOptions = 'horizontal' | 'vertical' | 'both';
+interface ArrowNavigationOptions {
+  /**
+   * The arrow key options to allow navigation
+   *
+   * @defaultValue 'both'
+   */
+  arrowKeyOptions?: ArrowKeyOptions;
+  /**
+   * The attribute name to find the collection items in the parent element.
+   *
+   * @defaultValue 'data-soybean-collection-item'
+   */
+  attributeName?: string;
+  /**
+   * The parent element where contains all the collection items, this will collect every item to be used when nav It
+   * will be ignored if attributeName is provided
+   *
+   * @defaultValue [ ]
+   */
+  itemsArray?: HTMLElement[];
+  /**
+   * Allow loop navigation. If false, it will stop at the first and last element
+   *
+   * @defaultValue true
+   */
+  loop?: boolean;
+  /**
+   * The orientation of the collection
+   *
+   * @defaultValue 'ltr'
+   */
+  dir?: Direction;
+  /**
+   * Prevent the scroll when navigating. This happens when the direction of the key matches the scroll direction of any
+   * ancestor scrollable elements.
+   *
+   * @defaultValue true
+   */
+  preventScroll?: boolean;
+  /**
+   * By default all currentElement would trigger navigation. If `true`, currentElement nodeName in the ignore list will
+   * return null
+   *
+   * @defaultValue false
+   */
+  enableIgnoredElement?: boolean;
+  /**
+   * Focus the element after navigation
+   *
+   * @defaultValue false
+   */
+  focus?: boolean;
+}
+/**
+ * Allow arrow navigation for every html element with data-soybean-collection-item tag
+ *
+ * @param e Keyboard event
+ * @param currentElement Event initiator element or any element that wants to handle the navigation
+ * @param parentElement Parent element where contains all the collection items, this will collect every item to be used
+ *   when nav
+ * @param options further options
+ * @returns the navigated html element or null if none
+ */
+declare function useArrowNavigation(e: KeyboardEvent, currentElement: HTMLElement, parentElement: HTMLElement | undefined, options?: ArrowNavigationOptions): HTMLElement | null;
+//#endregion
+export { useArrowNavigation };

package/dist/composables/use-arrow-navigation.js

@@ -0,0 +1 @@
+import{COLLECTION_ITEM_ATTRIBUTE as e}from"../constants/attr.js";const t=new Set([`INPUT`,`TEXTAREA`]),n={ArrowRight:`right`,ArrowLeft:`left`,ArrowUp:`up`,ArrowDown:`down`,Home:`home`,End:`end`};function r(n,r,s,c={}){let l={attributeName:`[${e}]`,itemsArray:[],loop:!0,dir:`ltr`,preventScroll:!0,focus:!1,arrowKeyOptions:`both`,enableIgnoredElement:!1,...c};if(!r||l.enableIgnoredElement&&t.has(r.nodeName))return null;let u=a(n,l.dir);return o(l.arrowKeyOptions,u)?null:i(n,r,s,l,u)}function i(e,t,n,r,i){let a=n?Array.from(n.querySelectorAll(r.attributeName)):r.itemsArray;if(a.length===0)return null;r.preventScroll&&e.preventDefault();let{home:o,end:c,goForward:l,goingHorizontal:u,goingVertical:d}=i,f=null;return u||d?f=s(a,t,{goForward:l,loop:r.loop}):o?f=a[0]||null:c&&(f=a[a.length-1]||null),r.focus&&f&&f.focus(),f}function a(e,t){let r=n[e.key];if(!r)return{right:!1,left:!1,up:!1,down:!1,home:!1,end:!1,goingVertical:!1,goingHorizontal:!1,goForward:!1};let i={right:r===`right`,left:r===`left`,up:r===`up`,down:r===`down`,home:r===`home`,end:r===`end`},a=i.up||i.down,o=i.right||i.left,s=i.down||(t===`ltr`?i.right:i.left);return{...i,goingVertical:a,goingHorizontal:o,goForward:s}}function o(e,t){let{goingVertical:n,goingHorizontal:r,home:i,end:a}=t;return i||a?!1:!n&&!r?!0:e===`vertical`&&r||e===`horizontal`&&n}function s(e,t,n){let{goForward:r,loop:i=!0}=n,a=e.length;if(a===0)return null;let o=e.indexOf(t);if(o===-1)return(r?e[0]:e[a-1])||null;let s=0,c=o;for(;s<a;){if(c=r?c+1:c-1,!i&&(c<0||c>=a))return null;c<0?c=a-1:c>=a&&(c=0);let t=e[c];if(t){let e=t.getAttribute(`disabled`);if(!(e!==null&&e!==`false`))return t}s++}return null}export{r as useArrowNavigation};

package/dist/composables/use-body-scroll-lock.d.ts

@@ -0,0 +1,9 @@
+//#region src/composables/use-body-scroll-lock.d.ts
+/**
+ * High-performance scroll lock using CSS classes
+ *
+ * @returns A function to unlock the scroll
+ */
+declare function useBodyScrollLock(): () => void;
+//#endregion
+export { useBodyScrollLock };

package/dist/composables/use-body-scroll-lock.js

@@ -0,0 +1,18 @@
+import{isClient as e,isIOS as t}from"../shared/env.js";import"../shared/index.js";const n=`data-scroll-lock`,r=`scroll-lock-styles`,i={BODY:`scroll-lock-body`,BODY_WITH_SCROLLBAR:`scroll-lock-body-with-scrollbar`,HTML:`scroll-lock-html`},a=`
+  .${i.BODY} {
+    position: fixed !important;
+    overflow-x: hidden !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    height: auto !important;
+  }
+
+  .${i.BODY_WITH_SCROLLBAR} {
+    overflow-y: scroll !important;
+  }
+
+  .${i.HTML} {
+    scroll-behavior: auto !important;
+  }
+`;function o(){if(!e)return()=>{};let r=document.body;if(r.hasAttribute(n))return()=>{};m();let i=window.scrollY;s(r,i,l());let a=t()?u():void 0;return()=>c(r,i,a)}function s(e,t,r){e.style.top=`-${t}px`,e.classList.add(i.BODY),r&&e.classList.add(i.BODY_WITH_SCROLLBAR),document.documentElement.classList.add(i.HTML),e.setAttribute(n,`true`)}function c(e,t,r){e.classList.remove(i.BODY,i.BODY_WITH_SCROLLBAR),document.documentElement.classList.remove(i.HTML),e.style.top=``,e.removeAttribute(n),window.scrollTo(0,t),r?.()}function l(){return document.body.scrollHeight>window.innerHeight}function u(){let e=e=>{d(e)&&e.preventDefault()};return document.addEventListener(`touchmove`,e,{passive:!1}),()=>{document.removeEventListener(`touchmove`,e)}}function d(e){if(e.touches.length>1)return!1;let t=e.target;return!f(t)}function f(e){let t=e;for(;t&&t.tagName!==`BODY`;){if(p(window.getComputedStyle(t),t))return!0;t=t.parentElement}return!1}function p(e,t){let n=e.overflowX===`scroll`||e.overflowY===`scroll`,r=e.overflowX===`auto`&&t.clientWidth<t.scrollWidth||e.overflowY===`auto`&&t.clientHeight<t.scrollHeight;return n||r}function m(){if(!document.getElementById(r)){let e=document.createElement(`style`);e.id=r,e.textContent=a,document.head.appendChild(e)}}export{o as useBodyScrollLock};

package/dist/composables/use-bool-prop.d.ts

@@ -0,0 +1,10 @@
+//#region src/composables/use-bool-prop.d.ts
+/**
+ * A composable to handle boolean props.
+ *
+ * It can get undefined value for boolean props witch are not set default value
+ * @param key
+ */
+declare function useBoolProp(key: string): import("vue").ComputedRef<boolean | undefined>;
+//#endregion
+export { useBoolProp };

package/dist/composables/use-bool-prop.js

@@ -0,0 +1 @@
+import{computed as e,getCurrentInstance as t}from"vue";function n(n){let r=t();return e(()=>{let e=r?.vnode?.props?.[n];return e===!0||e===``?!0:e})}export{n as useBoolProp};

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

@@ -0,0 +1,37 @@
+import { VNodeRef } from "../types/vue.js";
+import { MaybeRefOrGetter, Ref } from "vue";
+
+//#region src/composables/use-collection.d.ts
+interface CollectionItemData<ItemData = Record<string, any>> {
+  element: HTMLElement;
+  data: ItemData;
+}
+/**
+ * Create a collection composable for managing a group of related elements
+ *
+ * @param collectionName - The name of the collection (used for context naming)
+ * @returns Collection management functions and hooks
+ */
+declare function useCollection<ItemData = Record<string, any>>(collectionName: string): {
+  provideCollectionContext: () => {
+    containerElement: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+    onContainerElementChange: (element: HTMLElement) => void;
+    itemRegistry: Ref<Map<HTMLElement, CollectionItemData<ItemData>>, Map<HTMLElement, CollectionItemData<ItemData>>>;
+    getOrderedItems: (excludeDisabled?: boolean) => CollectionItemData<ItemData>[];
+    getOrderedElements: (excludeDisabled?: boolean) => HTMLElement[];
+  };
+  useCollectionContext: import("@soybeanjs/hooks").ContextConsumer<{
+    containerElement: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+    onContainerElementChange: (element: HTMLElement) => void;
+    itemRegistry: Ref<Map<HTMLElement, CollectionItemData<ItemData>>, Map<HTMLElement, CollectionItemData<ItemData>>>;
+    getOrderedItems: (excludeDisabled?: boolean) => CollectionItemData<ItemData>[];
+    getOrderedElements: (excludeDisabled?: boolean) => HTMLElement[];
+  }>;
+  useCollectionItem: (itemData?: MaybeRefOrGetter<ItemData>) => {
+    itemElement: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+    onItemElementChange: (element: HTMLElement) => void;
+    setItemElement: (nodeRef: VNodeRef) => void;
+  };
+};
+//#endregion
+export { CollectionItemData, useCollection };

package/dist/composables/use-collection.js

@@ -0,0 +1 @@
+import{getCollectionItemElements as e,isElementHasAttribute as t}from"../shared/dom.js";import{getElFromTemplateRef as n}from"../shared/vue.js";import{useContext as r}from"./use-context.js";import"../shared/index.js";import{onBeforeUnmount as i,onWatcherCleanup as a,ref as o,shallowRef as s,toValue as c,watchPostEffect as l}from"vue";import{pascalCase as u}from"@soybeanjs/utils";function d(d){let[f,p]=r(u(`${d}Collection`),()=>{let n=s(),r=e=>{n.value=e},a=o(new Map),c=(r=!0)=>{if(!n.value)return[];let i=e(n.value),o=[];for(let e of i){let n=a.value.get(e);n&&(!r||!t(e,`disabled`))&&o.push(n)}return o};return i(()=>{a.value.clear()}),{containerElement:n,onContainerElementChange:r,itemRegistry:a,getOrderedItems:c,getOrderedElements:(e=!0)=>c(e).map(e=>e.element)}});return{provideCollectionContext:f,useCollectionContext:p,useCollectionItem:(e={})=>{let{itemRegistry:t}=p(u(`${d}Item`)),r=s(),i=e=>{r.value&&r.value!==e&&t.value.delete(r.value),r.value=e};return l(()=>{r.value&&t.value.set(r.value,{element:r.value,data:c(e)}),a(()=>{r.value&&(t.value.delete(r.value),r.value=void 0)})}),{itemElement:r,onItemElementChange:i,setItemElement:e=>{let t=n(e);t&&i(t)}}}}}export{d as useCollection};

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

@@ -0,0 +1,2 @@
+import { useContext } from "@soybeanjs/hooks";
+export { useContext };

package/dist/composables/use-context.js

@@ -0,0 +1 @@
+import{useContext as e}from"@soybeanjs/hooks";export{e as useContext};

package/dist/composables/use-controllable-state.d.ts

@@ -0,0 +1,15 @@
+import { ShallowRef } from "vue";
+
+//#region src/composables/use-controllable-state.d.ts
+type ControllableValue<T, U extends boolean> = U extends true ? T : Exclude<T, undefined>;
+/**
+ * A more flexible version of `useControllableState` that supports undefined values.
+ *
+ * @param prop A function that returns the current value of the prop. It can be undefined if the component is uncontrolled.
+ * @param onChange A callback function that is called when the value changes. It receives the new value as an argument. If the component is controlled, this function must be provided.
+ * @param defaultValue The default value to use when the component is uncontrolled. It must be provided if the component can be uncontrolled.
+ * @param undefinedable A boolean that indicates whether the value can be undefined. If true, the component can be uncontrolled and the value can be undefined. If false, the component must be controlled and the value cannot be undefined. The default value is false.
+ */
+declare function useControllableState<T, U extends boolean = false>(prop: () => T, onChange: ((value: ControllableValue<T, U>) => void) | undefined, defaultValue: ControllableValue<T, U>, undefinedable?: U): ShallowRef<ControllableValue<T, U>>;
+//#endregion
+export { useControllableState };

package/dist/composables/use-controllable-state.js

@@ -0,0 +1 @@
+import{computed as e,nextTick as t,shallowRef as n,watch as r}from"vue";function i(i,a,o,s){let c=i();if(c!==void 0)return e({get:()=>i(),set:e=>{a?.(e)}});let l=n(c??o),u=!1;return r(i,e=>{u||e===void 0&&!s||(u=!0,l.value=e,t(()=>{u=!1}))}),r(l,e=>{!u&&(e!==void 0||s)&&a?.(e)}),l}export{i as useControllableState};

package/dist/composables/use-dismissable-layer.d.ts

@@ -0,0 +1,49 @@
+import { FocusOutsideEvent, PointerDownOutsideEvent } from "../types/event.js";
+import { DismissableLayerEmits } from "../types/component.js";
+import { EmitsToHookProps } from "../types/vue.js";
+import { MaybeRefOrGetter, ShallowRef } from "vue";
+
+//#region src/composables/use-dismissable-layer.d.ts
+interface UseDismissableLayerOptions extends EmitsToHookProps<DismissableLayerEmits> {
+  /**
+   * When `true`, hover/focus/click interactions will be disabled on elements outside the `DismissableLayer`. Users will
+   * need to click twice on outside elements to interact with them: once to close the `DismissableLayer`, and again to
+   * trigger the element.
+   */
+  disableOutsidePointerEvents?: MaybeRefOrGetter<boolean>;
+  /** Handler called when the `DismissableLayer` should be dismissed */
+  onDismiss?: () => void;
+}
+/**
+ * Composable for creating dismissable layers with outside interaction handling
+ *
+ * @param layerElement - Reference to the dismissable layer element
+ * @param options - Configuration options for the dismissable layer
+ * @returns Properties and handlers for the dismissable layer
+ */
+declare function useDismissableLayer(layerElement: ShallowRef<HTMLElement | undefined>, options?: UseDismissableLayerOptions): {
+  pointerEvents: import("vue").ComputedRef<"none" | "auto" | undefined>;
+};
+/**
+ * Composable for creating dismissable layer branches that don't trigger dismissal
+ *
+ * @param branchElementRef - Reference to the branch element
+ */
+declare function useDismissableLayerBranch(branchElementRef: ShallowRef<HTMLElement | undefined>): void;
+/**
+ * Listens for `pointerdown` outside a DOM subtree. We use `pointerdown` rather than `pointerup` to mimic layer
+ * dismissing behavior present in OS. Returns props to pass to the node we want to check for outside events.
+ */
+declare function usePointerdownOutside(node: ShallowRef<HTMLElement | undefined>, onPointerDownOutside: (event: PointerDownOutsideEvent) => void, enable?: MaybeRefOrGetter<boolean>): {
+  onPointerdownCapture: () => void;
+};
+/**
+ * Listens for when focus happens outside a DOM subtree. Returns props to pass to the root (node) of the subtree we want
+ * to check.
+ */
+declare function useFocusOutside(node: ShallowRef<HTMLElement | undefined>, onFocusOutside: (event: FocusOutsideEvent) => void, enable?: MaybeRefOrGetter<boolean>): {
+  onFocusCapture: () => void;
+  onBlurCapture: () => void;
+};
+//#endregion
+export { UseDismissableLayerOptions, useDismissableLayer, useDismissableLayerBranch, useFocusOutside, usePointerdownOutside };

package/dist/composables/use-dismissable-layer.js

@@ -0,0 +1 @@
+import{isClient as e}from"../shared/env.js";import{handleAndDispatchCustomEvent as t}from"../shared/event.js";import"../shared/index.js";import{useEscapeKeyDown as n}from"./use-escape-key-down.js";import{computed as r,onBeforeUnmount as i,onMounted as a,onWatcherCleanup as o,shallowReactive as s,toValue as c,watch as l,watchEffect as u}from"vue";const d=`data-dismissable-layer`,f={layers:s(new Set),layersWithOutsidePointerEventsDisabled:s(new Set),branches:s(new Set)};let p;function m(e,t={}){let{disableOutsidePointerEvents:i,onEscapeKeyDown:a,onPointerDownOutside:s,onFocusOutside:u,onInteractOutside:d,onDismiss:m}=t,h=()=>e.value?.ownerDocument??globalThis?.document,v=r(()=>e.value?Array.from(f.layers).indexOf(e.value):-1),y=r(()=>f.layersWithOutsidePointerEventsDisabled.size>0),b=r(()=>{let e=Array.from(f.layers),[t]=[...f.layersWithOutsidePointerEventsDisabled].slice(-1),n=t?e.indexOf(t):-1;return v.value>=n}),x=r(()=>{if(y.value)return b.value?`auto`:`none`});return g(e,e=>{if(!b.value)return;let t=e.target;[...f.branches].some(e=>e.contains(t))||(s?.(e),d?.(e),e.defaultPrevented||m?.())}),_(e,e=>{let t=e.target;[...f.branches].some(e=>e.contains(t))||(u?.(e),d?.(e),e.defaultPrevented||m?.())}),n(h,e=>{v.value===f.layers.size-1&&(a?.(e),e.defaultPrevented||(e.preventDefault(),m?.()))}),l(e,e=>{if(!e)return;let t=h(),n=c(i);n&&(f.layersWithOutsidePointerEventsDisabled.size===0&&(p=t.body.style.pointerEvents,t.body.style.pointerEvents=`none`),f.layersWithOutsidePointerEventsDisabled.add(e)),f.layers.add(e),o(()=>{n&&f.layersWithOutsidePointerEventsDisabled.size===1&&(p?t.body.style.pointerEvents=p:t.body.style.removeProperty(`pointer-events`)),f.layers.delete(e),f.layersWithOutsidePointerEventsDisabled.delete(e)})}),{pointerEvents:x}}function h(e){a(()=>{e.value&&f.branches.add(e.value)}),i(()=>{e.value&&f.branches.delete(e.value)})}function g(n,r,i=!0){let a=!1,s=()=>{};return u(()=>{if(!e||!c(i)||!n.value)return;let l=n.value.ownerDocument;async function u(e){if(!n.value)return;let i=e.target;if(a=v(n.value,i),i&&!a){let n={originalEvent:e};function i(){t(`dismissableLayer.pointerDownOutside`,r,n)}e.pointerType===`touch`?(l.removeEventListener(`click`,s),s=i,l.addEventListener(`click`,s,{once:!0})):i()}else l.removeEventListener(`click`,s);a=!1}let d=window.setTimeout(()=>{l.addEventListener(`pointerdown`,u)},0);o(()=>{window.clearTimeout(d),l.removeEventListener(`pointerdown`,u),l.removeEventListener(`click`,s)})}),{onPointerdownCapture:()=>{c(i)&&(a=!0)}}}function _(n,r,i=!0){let a=!1,s=e=>{if(!n.value||a)return;let i=e.target;i instanceof HTMLElement&&(a=v(n.value,i),a||t(`dismissableLayer.focusOutside`,r,{originalEvent:e}))};return u(()=>{if(!e||!c(i)||!n.value)return;let t=n.value.ownerDocument;t.addEventListener(`focusin`,s),o(()=>{t.removeEventListener(`focusin`,s)})}),{onFocusCapture:()=>{c(i)&&(a=!0)},onBlurCapture:()=>{c(i)&&(a=!1)}}}function v(e,t){if(!e)return!1;if(e.contains(t))return!0;let n=y(e),r=t.closest(`[${d}]`);if(!n||!r)return!1;if(n===r)return!0;let i=Array.from(n.ownerDocument.querySelectorAll(`[${d}]`));return i.indexOf(n)<i.indexOf(r)}function y(e){return e.hasAttribute(d)?e:e.querySelector(`[${d}]`)}export{m as useDismissableLayer,h as useDismissableLayerBranch,_ as useFocusOutside,g as usePointerdownOutside};

package/dist/composables/use-escape-key-down.d.ts

@@ -0,0 +1,6 @@
+import { MaybeRefOrGetter } from "vue";
+
+//#region src/composables/use-escape-key-down.d.ts
+declare function useEscapeKeyDown(ownerDocument: MaybeRefOrGetter<Document | undefined>, handler: (e: KeyboardEvent) => void): void;
+//#endregion
+export { useEscapeKeyDown };

package/dist/composables/use-escape-key-down.js

@@ -0,0 +1 @@
+import{onWatcherCleanup as e,toValue as t,watchPostEffect as n}from"vue";let r=[],i;function a(a,s){n(()=>{let n=t(a);if(!n)return;let c=r.length===0,l=i!==n;(c||l)&&(l&&i&&i.removeEventListener(`keydown`,o),i=n,n.addEventListener(`keydown`,o)),r.includes(s)||r.push(s),e(()=>{r=r.filter(e=>e!==s),r.length===0&&(i?.removeEventListener(`keydown`,o),i=void 0)})})}function o(e){let t=e;if(t.key===`Escape`)for(let e of r.slice())e(t)}export{a as useEscapeKeyDown};

package/dist/composables/use-exposed-element.d.ts

@@ -0,0 +1,6 @@
+import { VNodeRef } from "../types/vue.js";
+//#region src/composables/use-exposed-element.d.ts
+/** Expose the element ref to the parent component. */
+declare function useExposedElement(callback?: (el: HTMLElement) => void): readonly [import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>, (nodeRef: VNodeRef) => void];
+//#endregion
+export { useExposedElement };

package/dist/composables/use-exposed-element.js

@@ -0,0 +1 @@
+import{useForwardElement as e}from"./use-forward-element.js";import{getCurrentInstance as t,shallowRef as n}from"vue";function r(r){let i=t();if(!i)return console.warn(`useExposedElement must be called within setup()`),[n(),()=>{}];let[a,o]=e(r);return i.exposed||Object.defineProperty(i,"exposed",{value:{},writable:!0,configurable:!0}),[a,e=>{o(e),Object.defineProperty(i.exposed,"$el",{enumerable:!0,configurable:!0,get:()=>a.value})}]}export{r as useExposedElement};

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

@@ -0,0 +1,86 @@
+import { MaybeRefOrGetter, Ref, ShallowRef } from "vue";
+import { FloatingElement, Middleware, MiddlewareData, Placement, ReferenceElement, Strategy } from "@floating-ui/dom";
+
+//#region src/composables/use-floating.d.ts
+type UseFloatingOptions<T extends ReferenceElement = ReferenceElement> = {
+  /**
+   * Represents the open/close state of the floating element.
+   * @default true
+   */
+  open?: MaybeRefOrGetter<boolean | undefined>;
+  /**
+   * Where to place the floating element relative to its reference element.
+   * @default 'bottom'
+   */
+  placement?: MaybeRefOrGetter<Placement | undefined>;
+  /**
+   * The type of CSS position property to use.
+   * @default 'absolute'
+   */
+  strategy?: MaybeRefOrGetter<Strategy | undefined>;
+  /**
+   * These are plain objects that modify the positioning coordinates in some fashion, or provide useful data for the consumer to use.
+   * @default undefined
+   */
+  middleware?: MaybeRefOrGetter<Middleware[] | undefined>;
+  /**
+   * Whether to use `transform` instead of `top` and `left` styles to
+   * position the floating element (`floatingStyles`).
+   * @default true
+   */
+  transform?: MaybeRefOrGetter<boolean | undefined>;
+  /**
+   * Callback to handle mounting/unmounting of the elements.
+   * @default undefined
+   */
+  whileElementsMounted?: (reference: T, floating: FloatingElement, update: () => void) => () => void;
+};
+type UseFloatingReturn = {
+  /**
+   * The x-coord of the floating element.
+   */
+  x: Readonly<Ref<number>>;
+  /**
+   * The y-coord of the floating element.
+   */
+  y: Readonly<Ref<number>>;
+  /**
+   * The stateful placement, which can be different from the initial `placement` passed as options.
+   */
+  placement: Readonly<Ref<Placement>>;
+  /**
+   * The type of CSS position property to use.
+   */
+  strategy: Readonly<Ref<Strategy>>;
+  /**
+   * Additional data from middleware.
+   */
+  middlewareData: Readonly<Ref<MiddlewareData>>;
+  /**
+   * The boolean that let you know if the floating element has been positioned.
+   */
+  isPositioned: Readonly<Ref<boolean>>;
+  /**
+   * CSS styles to apply to the floating element to position it.
+   */
+  floatingStyles: Readonly<Ref<{
+    position: Strategy;
+    top: string;
+    left: string;
+    transform?: string;
+    willChange?: string;
+  }>>;
+  /**
+   * The function to update floating position manually.
+   */
+  update: () => void;
+};
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element next to a reference element when it is given a certain CSS positioning strategy.
+ * @param reference The reference template ref.
+ * @param floating The floating template ref.
+ * @param options The floating options.
+ */
+declare function useFloating<T extends ReferenceElement = ReferenceElement>(referenceElement: ShallowRef<T | null | undefined>, floatingElement: ShallowRef<FloatingElement | null | undefined>, options?: UseFloatingOptions<T>): UseFloatingReturn;
+//#endregion
+export { UseFloatingOptions, UseFloatingReturn, useFloating };