@zag-js/popper 0.49.0 → 0.51.0

package/dist/index.d.mts

@@ -122,7 +122,7 @@ declare function getPlacementStyles(options?: Pick<PositioningOptions, "placemen
         readonly zIndex: "inherit";
     };
     floating: {
-        readonly position: "absolute" | "fixed";
+        readonly position: "fixed" | "absolute";
         readonly isolation: "isolate";
         readonly minWidth: "max-content" | undefined;
         readonly width: "var(--reference-width)" | undefined;

package/dist/index.d.ts

@@ -122,7 +122,7 @@ declare function getPlacementStyles(options?: Pick<PositioningOptions, "placemen
         readonly zIndex: "inherit";
     };
     floating: {
-        readonly position: "absolute" | "fixed";
+        readonly position: "fixed" | "absolute";
         readonly isolation: "isolate";
         readonly minWidth: "max-content" | undefined;
         readonly width: "var(--reference-width)" | undefined;

package/dist/index.js

@@ -1,352 +1,2 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  getPlacement: () => getPlacement,
-  getPlacementSide: () => getPlacementSide,
-  getPlacementStyles: () => getPlacementStyles,
-  isValidPlacement: () => isValidPlacement
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/get-placement.ts
-var import_dom = require("@floating-ui/dom");
-var import_dom_query2 = require("@zag-js/dom-query");
-var import_utils = require("@zag-js/utils");
-
-// src/get-anchor.ts
-var import_dom_query = require("@zag-js/dom-query");
-function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
-  if (typeof DOMRect === "function") {
-    return new DOMRect(x, y, width, height);
-  }
-  const rect = {
-    x,
-    y,
-    width,
-    height,
-    top: y,
-    right: x + width,
-    bottom: y + height,
-    left: x
-  };
-  return { ...rect, toJSON: () => rect };
-}
-function getDOMRect(anchorRect) {
-  if (!anchorRect)
-    return createDOMRect();
-  const { x, y, width, height } = anchorRect;
-  return createDOMRect(x, y, width, height);
-}
-function getAnchorElement(anchorElement, getAnchorRect) {
-  return {
-    contextElement: (0, import_dom_query.isHTMLElement)(anchorElement) ? anchorElement : void 0,
-    getBoundingClientRect: () => {
-      const anchor = anchorElement;
-      const anchorRect = getAnchorRect?.(anchor);
-      if (anchorRect || !anchor) {
-        return getDOMRect(anchorRect);
-      }
-      return anchor.getBoundingClientRect();
-    }
-  };
-}
-
-// src/middleware.ts
-var toVar = (value) => ({ variable: value, reference: `var(${value})` });
-var cssVars = {
-  arrowSize: toVar("--arrow-size"),
-  arrowSizeHalf: toVar("--arrow-size-half"),
-  arrowBg: toVar("--arrow-background"),
-  transformOrigin: toVar("--transform-origin"),
-  arrowOffset: toVar("--arrow-offset")
-};
-var getTransformOrigin = (arrow2) => ({
-  top: "bottom center",
-  "top-start": arrow2 ? `${arrow2.x}px bottom` : "left bottom",
-  "top-end": arrow2 ? `${arrow2.x}px bottom` : "right bottom",
-  bottom: "top center",
-  "bottom-start": arrow2 ? `${arrow2.x}px top` : "top left",
-  "bottom-end": arrow2 ? `${arrow2.x}px top` : "top right",
-  left: "right center",
-  "left-start": arrow2 ? `right ${arrow2.y}px` : "right top",
-  "left-end": arrow2 ? `right ${arrow2.y}px` : "right bottom",
-  right: "left center",
-  "right-start": arrow2 ? `left ${arrow2.y}px` : "left top",
-  "right-end": arrow2 ? `left ${arrow2.y}px` : "left bottom"
-});
-var __transformOrigin = {
-  name: "transformOrigin",
-  fn({ placement, elements, middlewareData }) {
-    const { arrow: arrow2 } = middlewareData;
-    const transformOrigin = getTransformOrigin(arrow2)[placement];
-    const { floating } = elements;
-    floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin);
-    return {
-      data: { transformOrigin }
-    };
-  }
-};
-var __rects = {
-  name: "rects",
-  fn({ rects }) {
-    return {
-      data: rects
-    };
-  }
-};
-var __shiftArrow = (arrowEl) => {
-  if (!arrowEl)
-    return;
-  return {
-    name: "shiftArrow",
-    fn({ placement, middlewareData }) {
-      if (!middlewareData.arrow)
-        return {};
-      const { x, y } = middlewareData.arrow;
-      const dir = placement.split("-")[0];
-      Object.assign(arrowEl.style, {
-        left: x != null ? `${x}px` : "",
-        top: y != null ? `${y}px` : "",
-        [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`
-      });
-      return {};
-    }
-  };
-};
-
-// src/placement.ts
-function isValidPlacement(v) {
-  return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v);
-}
-function getPlacementDetails(placement) {
-  const [side, align] = placement.split("-");
-  return { side, align, hasAlign: align != null };
-}
-function getPlacementSide(placement) {
-  return placement.split("-")[0];
-}
-
-// src/get-placement.ts
-var defaultOptions = {
-  strategy: "absolute",
-  placement: "bottom",
-  listeners: true,
-  gutter: 8,
-  flip: true,
-  slide: true,
-  overlap: false,
-  sameWidth: false,
-  fitViewport: false,
-  overflowPadding: 8,
-  arrowPadding: 4
-};
-function __dpr(win, value) {
-  const dpr = win.devicePixelRatio || 1;
-  return Math.round(value * dpr) / dpr;
-}
-function __boundary(opts) {
-  return (0, import_utils.runIfFn)(opts.boundary);
-}
-function __arrow(arrowElement, opts) {
-  if (!arrowElement)
-    return;
-  return (0, import_dom.arrow)({
-    element: arrowElement,
-    padding: opts.arrowPadding
-  });
-}
-function __offset(arrowElement, opts) {
-  if ((0, import_utils.isNull)(opts.offset ?? opts.gutter))
-    return;
-  return (0, import_dom.offset)(({ placement }) => {
-    const arrowOffset = (arrowElement?.clientHeight || 0) / 2;
-    const gutter = opts.offset?.mainAxis ?? opts.gutter;
-    const mainAxis = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
-    const { hasAlign } = getPlacementDetails(placement);
-    return (0, import_utils.compact)({
-      crossAxis: hasAlign ? opts.shift : opts.offset?.crossAxis,
-      mainAxis,
-      alignmentAxis: opts.shift
-    });
-  });
-}
-function __flip(opts) {
-  if (!opts.flip)
-    return;
-  return (0, import_dom.flip)({
-    boundary: __boundary(opts),
-    padding: opts.overflowPadding,
-    fallbackPlacements: opts.flip === true ? void 0 : opts.flip
-  });
-}
-function __shift(opts) {
-  if (!opts.slide && !opts.overlap)
-    return;
-  return (0, import_dom.shift)({
-    boundary: __boundary(opts),
-    mainAxis: opts.slide,
-    crossAxis: opts.overlap,
-    padding: opts.overflowPadding
-  });
-}
-function __size(opts) {
-  return (0, import_dom.size)({
-    padding: opts.overflowPadding,
-    apply({ elements, rects, availableHeight, availableWidth }) {
-      const floating = elements.floating;
-      const referenceWidth = Math.round(rects.reference.width);
-      availableWidth = Math.floor(availableWidth);
-      availableHeight = Math.floor(availableHeight);
-      floating.style.setProperty("--reference-width", `${referenceWidth}px`);
-      floating.style.setProperty("--available-width", `${availableWidth}px`);
-      floating.style.setProperty("--available-height", `${availableHeight}px`);
-    }
-  });
-}
-function getAutoUpdateOptions(opts) {
-  if (!opts)
-    return {};
-  if (opts === true) {
-    return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true };
-  }
-  return opts;
-}
-function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
-  const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect);
-  if (!floating || !reference)
-    return;
-  const options = Object.assign({}, defaultOptions, opts);
-  const arrowEl = floating.querySelector("[data-part=arrow]");
-  const middleware = [
-    __offset(arrowEl, options),
-    __flip(options),
-    __shift(options),
-    __arrow(arrowEl, options),
-    __shiftArrow(arrowEl),
-    __transformOrigin,
-    __size(options),
-    __rects
-  ];
-  const { placement, strategy, onComplete, onPositioned } = options;
-  const updatePosition = async () => {
-    if (!reference || !floating)
-      return;
-    const pos = await (0, import_dom.computePosition)(reference, floating, {
-      placement,
-      middleware,
-      strategy
-    });
-    onComplete?.(pos);
-    onPositioned?.({ placed: true });
-    const win = (0, import_dom_query2.getWindow)(floating);
-    const x = __dpr(win, pos.x);
-    const y = __dpr(win, pos.y);
-    floating.style.setProperty("--x", `${x}px`);
-    floating.style.setProperty("--y", `${y}px`);
-    const contentEl = floating.firstElementChild;
-    if (contentEl) {
-      const zIndex = win.getComputedStyle(contentEl).zIndex;
-      floating.style.setProperty("--z-index", zIndex);
-    }
-  };
-  const update = async () => {
-    if (opts.updatePosition) {
-      await opts.updatePosition({ updatePosition });
-      onPositioned?.({ placed: true });
-    } else {
-      await updatePosition();
-    }
-  };
-  const autoUpdateOptions = getAutoUpdateOptions(options.listeners);
-  const cancelAutoUpdate = options.listeners ? (0, import_dom.autoUpdate)(reference, floating, update, autoUpdateOptions) : import_utils.noop;
-  update();
-  return () => {
-    cancelAutoUpdate?.();
-    onPositioned?.({ placed: false });
-  };
-}
-function getPlacement(referenceOrFn, floatingOrFn, opts = {}) {
-  const { defer, ...options } = opts;
-  const func = defer ? import_dom_query2.raf : (v) => v();
-  const cleanups = [];
-  cleanups.push(
-    func(() => {
-      const reference = typeof referenceOrFn === "function" ? referenceOrFn() : referenceOrFn;
-      const floating = typeof floatingOrFn === "function" ? floatingOrFn() : floatingOrFn;
-      cleanups.push(getPlacementImpl(reference, floating, options));
-    })
-  );
-  return () => {
-    cleanups.forEach((fn) => fn?.());
-  };
-}
-
-// src/get-styles.ts
-var ARROW_FLOATING_STYLE = {
-  bottom: "rotate(45deg)",
-  left: "rotate(135deg)",
-  top: "rotate(225deg)",
-  right: "rotate(315deg)"
-};
-function getPlacementStyles(options = {}) {
-  const { placement, sameWidth, fitViewport, strategy = "absolute" } = options;
-  return {
-    arrow: {
-      position: "absolute",
-      width: cssVars.arrowSize.reference,
-      height: cssVars.arrowSize.reference,
-      [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,
-      [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`
-    },
-    arrowTip: {
-      transform: placement ? ARROW_FLOATING_STYLE[placement.split("-")[0]] : void 0,
-      background: cssVars.arrowBg.reference,
-      top: "0",
-      left: "0",
-      width: "100%",
-      height: "100%",
-      position: "absolute",
-      zIndex: "inherit"
-    },
-    floating: {
-      position: strategy,
-      isolation: "isolate",
-      minWidth: sameWidth ? void 0 : "max-content",
-      width: sameWidth ? "var(--reference-width)" : void 0,
-      maxWidth: fitViewport ? "var(--available-width)" : void 0,
-      maxHeight: fitViewport ? "var(--available-height)" : void 0,
-      top: "0px",
-      left: "0px",
-      // move off-screen if placement is not defined
-      transform: placement ? "translate3d(var(--x), var(--y), 0)" : "translate3d(0, -100vh, 0)",
-      zIndex: "var(--z-index)"
-    }
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  getPlacement,
-  getPlacementSide,
-  getPlacementStyles,
-  isValidPlacement
-});
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:true})};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from==="object"||typeof from==="function"){for(let key of __getOwnPropNames(from))if(!__hasOwnProp.call(to,key)&&key!==except)__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:true}),mod);var src_exports={};__export(src_exports,{getPlacement:()=>getPlacement,getPlacementSide:()=>getPlacementSide,getPlacementStyles:()=>getPlacementStyles,isValidPlacement:()=>isValidPlacement});module.exports=__toCommonJS(src_exports);var import_dom=require("@floating-ui/dom");var import_dom_query2=require("@zag-js/dom-query");var import_utils=require("@zag-js/utils");var import_dom_query=require("@zag-js/dom-query");function createDOMRect(x=0,y=0,width=0,height=0){if(typeof DOMRect==="function"){return new DOMRect(x,y,width,height)}const rect={x,y,width,height,top:y,right:x+width,bottom:y+height,left:x};return{...rect,toJSON:()=>rect}}function getDOMRect(anchorRect){if(!anchorRect)return createDOMRect();const{x,y,width,height}=anchorRect;return createDOMRect(x,y,width,height)}function getAnchorElement(anchorElement,getAnchorRect){return{contextElement:(0,import_dom_query.isHTMLElement)(anchorElement)?anchorElement:void 0,getBoundingClientRect:()=>{const anchor=anchorElement;const anchorRect=getAnchorRect?.(anchor);if(anchorRect||!anchor){return getDOMRect(anchorRect)}return anchor.getBoundingClientRect()}}}var toVar=value=>({variable:value,reference:`var(${value})`});var cssVars={arrowSize:toVar("--arrow-size"),arrowSizeHalf:toVar("--arrow-size-half"),arrowBg:toVar("--arrow-background"),transformOrigin:toVar("--transform-origin"),arrowOffset:toVar("--arrow-offset")};var getTransformOrigin=arrow2=>({top:"bottom center","top-start":arrow2?`${arrow2.x}px bottom`:"left bottom","top-end":arrow2?`${arrow2.x}px bottom`:"right bottom",bottom:"top center","bottom-start":arrow2?`${arrow2.x}px top`:"top left","bottom-end":arrow2?`${arrow2.x}px top`:"top right",left:"right center","left-start":arrow2?`right ${arrow2.y}px`:"right top","left-end":arrow2?`right ${arrow2.y}px`:"right bottom",right:"left center","right-start":arrow2?`left ${arrow2.y}px`:"left top","right-end":arrow2?`left ${arrow2.y}px`:"left bottom"});var transformOriginMiddleware={name:"transformOrigin",fn({placement,elements,middlewareData}){const{arrow:arrow2}=middlewareData;const transformOrigin=getTransformOrigin(arrow2)[placement];const{floating}=elements;floating.style.setProperty(cssVars.transformOrigin.variable,transformOrigin);return{data:{transformOrigin}}}};var rectMiddleware={name:"rects",fn({rects}){return{data:rects}}};var shiftArrowMiddleware=arrowEl=>{if(!arrowEl)return;return{name:"shiftArrow",fn({placement,middlewareData}){if(!middlewareData.arrow)return{};const{x,y}=middlewareData.arrow;const dir=placement.split("-")[0];Object.assign(arrowEl.style,{left:x!=null?`${x}px`:"",top:y!=null?`${y}px`:"",[dir]:`calc(100% + ${cssVars.arrowOffset.reference})`});return{}}}};function isValidPlacement(v){return/^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)}function getPlacementDetails(placement){const[side,align]=placement.split("-");return{side,align,hasAlign:align!=null}}function getPlacementSide(placement){return placement.split("-")[0]}var defaultOptions={strategy:"absolute",placement:"bottom",listeners:true,gutter:8,flip:true,slide:true,overlap:false,sameWidth:false,fitViewport:false,overflowPadding:8,arrowPadding:4};function roundByDpr(win,value){const dpr=win.devicePixelRatio||1;return Math.round(value*dpr)/dpr}function getBoundaryMiddleware(opts){return(0,import_utils.runIfFn)(opts.boundary)}function getArrowMiddleware(arrowElement,opts){if(!arrowElement)return;return(0,import_dom.arrow)({element:arrowElement,padding:opts.arrowPadding})}function getOffsetMiddleware(arrowElement,opts){if((0,import_utils.isNull)(opts.offset??opts.gutter))return;return(0,import_dom.offset)(({placement})=>{const arrowOffset=(arrowElement?.clientHeight||0)/2;const gutter=opts.offset?.mainAxis??opts.gutter;const mainAxis=typeof gutter==="number"?gutter+arrowOffset:gutter??arrowOffset;const{hasAlign}=getPlacementDetails(placement);const shift2=!hasAlign?opts.shift:void 0;const crossAxis=opts.offset?.crossAxis??shift2;return(0,import_utils.compact)({crossAxis,mainAxis,alignmentAxis:opts.shift})})}function getFlipMiddleware(opts){if(!opts.flip)return;return(0,import_dom.flip)({boundary:getBoundaryMiddleware(opts),padding:opts.overflowPadding,fallbackPlacements:opts.flip===true?void 0:opts.flip})}function getShiftMiddleware(opts){if(!opts.slide&&!opts.overlap)return;return(0,import_dom.shift)({boundary:getBoundaryMiddleware(opts),mainAxis:opts.slide,crossAxis:opts.overlap,padding:opts.overflowPadding,limiter:(0,import_dom.limitShift)()})}function getSizeMiddleware(opts){return(0,import_dom.size)({padding:opts.overflowPadding,apply({elements,rects,availableHeight,availableWidth}){const floating=elements.floating;const referenceWidth=Math.round(rects.reference.width);availableWidth=Math.floor(availableWidth);availableHeight=Math.floor(availableHeight);floating.style.setProperty("--reference-width",`${referenceWidth}px`);floating.style.setProperty("--available-width",`${availableWidth}px`);floating.style.setProperty("--available-height",`${availableHeight}px`)}})}function getAutoUpdateOptions(opts){if(!opts)return{};if(opts===true){return{ancestorResize:true,ancestorScroll:true,elementResize:true,layoutShift:true}}return opts}function getPlacementImpl(referenceOrVirtual,floating,opts={}){const reference=getAnchorElement(referenceOrVirtual,opts.getAnchorRect);if(!floating||!reference)return;const options=Object.assign({},defaultOptions,opts);const arrowEl=floating.querySelector("[data-part=arrow]");const middleware=[getOffsetMiddleware(arrowEl,options),getFlipMiddleware(options),getShiftMiddleware(options),getArrowMiddleware(arrowEl,options),shiftArrowMiddleware(arrowEl),transformOriginMiddleware,getSizeMiddleware(options),rectMiddleware];const{placement,strategy,onComplete,onPositioned}=options;const updatePosition=async()=>{if(!reference||!floating)return;const pos=await(0,import_dom.computePosition)(reference,floating,{placement,middleware,strategy});onComplete?.(pos);onPositioned?.({placed:true});const win=(0,import_dom_query2.getWindow)(floating);const x=roundByDpr(win,pos.x);const y=roundByDpr(win,pos.y);floating.style.setProperty("--x",`${x}px`);floating.style.setProperty("--y",`${y}px`);const contentEl=floating.firstElementChild;if(contentEl){const zIndex=win.getComputedStyle(contentEl).zIndex;floating.style.setProperty("--z-index",zIndex)}};const update=async()=>{if(opts.updatePosition){await opts.updatePosition({updatePosition});onPositioned?.({placed:true})}else{await updatePosition()}};const autoUpdateOptions=getAutoUpdateOptions(options.listeners);const cancelAutoUpdate=options.listeners?(0,import_dom.autoUpdate)(reference,floating,update,autoUpdateOptions):import_utils.noop;update();return()=>{cancelAutoUpdate?.();onPositioned?.({placed:false})}}function getPlacement(referenceOrFn,floatingOrFn,opts={}){const{defer,...options}=opts;const func=defer?import_dom_query2.raf:v=>v();const cleanups=[];cleanups.push(func(()=>{const reference=typeof referenceOrFn==="function"?referenceOrFn():referenceOrFn;const floating=typeof floatingOrFn==="function"?floatingOrFn():floatingOrFn;cleanups.push(getPlacementImpl(reference,floating,options))}));return()=>{cleanups.forEach(fn=>fn?.())}}var ARROW_FLOATING_STYLE={bottom:"rotate(45deg)",left:"rotate(135deg)",top:"rotate(225deg)",right:"rotate(315deg)"};function getPlacementStyles(options={}){const{placement,sameWidth,fitViewport,strategy="absolute"}=options;return{arrow:{position:"absolute",width:cssVars.arrowSize.reference,height:cssVars.arrowSize.reference,[cssVars.arrowSizeHalf.variable]:`calc(${cssVars.arrowSize.reference} / 2)`,[cssVars.arrowOffset.variable]:`calc(${cssVars.arrowSizeHalf.reference} * -1)`},arrowTip:{transform:placement?ARROW_FLOATING_STYLE[placement.split("-")[0]]:void 0,background:cssVars.arrowBg.reference,top:"0",left:"0",width:"100%",height:"100%",position:"absolute",zIndex:"inherit"},floating:{position:strategy,isolation:"isolate",minWidth:sameWidth?void 0:"max-content",width:sameWidth?"var(--reference-width)":void 0,maxWidth:fitViewport?"var(--available-width)":void 0,maxHeight:fitViewport?"var(--available-height)":void 0,top:"0px",left:"0px",transform:placement?"translate3d(var(--x), var(--y), 0)":"translate3d(0, -100vh, 0)",zIndex:"var(--z-index)"}}}0&&(module.exports={getPlacement,getPlacementSide,getPlacementStyles,isValidPlacement});
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/get-placement.ts","../src/get-anchor.ts","../src/middleware.ts","../src/placement.ts","../src/get-styles.ts"],"sourcesContent":["export { getPlacement } from \"./get-placement\"\nexport { getPlacementStyles, type GetPlacementStylesOptions } from \"./get-styles\"\nexport { getPlacementSide, isValidPlacement } from \"./placement\"\nexport type {\n  AnchorRect,\n  AutoUpdateOptions,\n  Boundary,\n  ComputePositionReturn,\n  Placement,\n  PlacementAlign,\n  PlacementSide,\n  PositioningOptions,\n} from \"./types\"\n","import type { AutoUpdateOptions, Middleware } from \"@floating-ui/dom\"\nimport { arrow, autoUpdate, computePosition, flip, offset, shift, size } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { compact, isNull, noop, runIfFn } from \"@zag-js/utils\"\nimport { getAnchorElement } from \"./get-anchor\"\nimport { __rects, __shiftArrow, __transformOrigin } from \"./middleware\"\nimport { getPlacementDetails } from \"./placement\"\nimport type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n  strategy: \"absolute\",\n  placement: \"bottom\",\n  listeners: true,\n  gutter: 8,\n  flip: true,\n  slide: true,\n  overlap: false,\n  sameWidth: false,\n  fitViewport: false,\n  overflowPadding: 8,\n  arrowPadding: 4,\n}\n\nfunction __dpr(win: Window, value: number) {\n  const dpr = win.devicePixelRatio || 1\n  return Math.round(value * dpr) / dpr\n}\n\nfunction __boundary(opts: PositioningOptions) {\n  return runIfFn(opts.boundary)\n}\n\nfunction __arrow(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n  if (!arrowElement) return\n  return arrow({\n    element: arrowElement,\n    padding: opts.arrowPadding,\n  })\n}\n\nfunction __offset(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n  if (isNull(opts.offset ?? opts.gutter)) return\n  return offset(({ placement }) => {\n    const arrowOffset = (arrowElement?.clientHeight || 0) / 2\n\n    const gutter = opts.offset?.mainAxis ?? opts.gutter\n    const mainAxis = typeof gutter === \"number\" ? gutter + arrowOffset : gutter ?? arrowOffset\n\n    const { hasAlign } = getPlacementDetails(placement)\n\n    return compact({\n      crossAxis: hasAlign ? opts.shift : opts.offset?.crossAxis,\n      mainAxis: mainAxis,\n      alignmentAxis: opts.shift,\n    })\n  })\n}\n\nfunction __flip(opts: PositioningOptions) {\n  if (!opts.flip) return\n  return flip({\n    boundary: __boundary(opts),\n    padding: opts.overflowPadding,\n    fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n  })\n}\n\nfunction __shift(opts: PositioningOptions) {\n  if (!opts.slide && !opts.overlap) return\n  return shift({\n    boundary: __boundary(opts),\n    mainAxis: opts.slide,\n    crossAxis: opts.overlap,\n    padding: opts.overflowPadding,\n  })\n}\n\nfunction __size(opts: PositioningOptions) {\n  return size({\n    padding: opts.overflowPadding,\n    apply({ elements, rects, availableHeight, availableWidth }) {\n      const floating = elements.floating\n\n      const referenceWidth = Math.round(rects.reference.width)\n      availableWidth = Math.floor(availableWidth)\n      availableHeight = Math.floor(availableHeight)\n\n      floating.style.setProperty(\"--reference-width\", `${referenceWidth}px`)\n      floating.style.setProperty(\"--available-width\", `${availableWidth}px`)\n      floating.style.setProperty(\"--available-height\", `${availableHeight}px`)\n    },\n  })\n}\n\nfunction getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {\n  if (!opts) return {}\n  if (opts === true) {\n    return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true }\n  }\n  return opts\n}\n\nfunction getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n  const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)\n  if (!floating || !reference) return\n  const options = Object.assign({}, defaultOptions, opts)\n\n  /* -----------------------------------------------------------------------------\n   * The middleware stack\n   * -----------------------------------------------------------------------------*/\n\n  const arrowEl = floating.querySelector<HTMLElement>(\"[data-part=arrow]\")\n\n  const middleware: (Middleware | undefined)[] = [\n    __offset(arrowEl, options),\n    __flip(options),\n    __shift(options),\n    __arrow(arrowEl, options),\n    __shiftArrow(arrowEl),\n    __transformOrigin,\n    __size(options),\n    __rects,\n  ]\n\n  /* -----------------------------------------------------------------------------\n   * The actual positioning function\n   * -----------------------------------------------------------------------------*/\n\n  const { placement, strategy, onComplete, onPositioned } = options\n\n  const updatePosition = async () => {\n    if (!reference || !floating) return\n\n    const pos = await computePosition(reference, floating, {\n      placement,\n      middleware,\n      strategy,\n    })\n\n    onComplete?.(pos)\n    onPositioned?.({ placed: true })\n\n    const win = getWindow(floating)\n    const x = __dpr(win, pos.x)\n    const y = __dpr(win, pos.y)\n\n    floating.style.setProperty(\"--x\", `${x}px`)\n    floating.style.setProperty(\"--y\", `${y}px`)\n\n    const contentEl = floating.firstElementChild\n\n    if (contentEl) {\n      const zIndex = win.getComputedStyle(contentEl).zIndex\n      floating.style.setProperty(\"--z-index\", zIndex)\n    }\n  }\n\n  const update = async () => {\n    if (opts.updatePosition) {\n      await opts.updatePosition({ updatePosition })\n      onPositioned?.({ placed: true })\n    } else {\n      await updatePosition()\n    }\n  }\n\n  const autoUpdateOptions = getAutoUpdateOptions(options.listeners)\n  const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop\n\n  update()\n\n  return () => {\n    cancelAutoUpdate?.()\n    onPositioned?.({ placed: false })\n  }\n}\n\nexport function getPlacement(\n  referenceOrFn: MaybeFn<MaybeRectElement>,\n  floatingOrFn: MaybeFn<MaybeElement>,\n  opts: PositioningOptions & { defer?: boolean } = {},\n) {\n  const { defer, ...options } = opts\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n  cleanups.push(\n    func(() => {\n      const reference = typeof referenceOrFn === \"function\" ? referenceOrFn() : referenceOrFn\n      const floating = typeof floatingOrFn === \"function\" ? floatingOrFn() : floatingOrFn\n      cleanups.push(getPlacementImpl(reference, floating, options))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import { isHTMLElement } from \"@zag-js/dom-query\"\nimport type { AnchorRect, MaybeRectElement } from \"./types\"\n\nexport function createDOMRect(x = 0, y = 0, width = 0, height = 0) {\n  if (typeof DOMRect === \"function\") {\n    return new DOMRect(x, y, width, height)\n  }\n  const rect = {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: x + width,\n    bottom: y + height,\n    left: x,\n  }\n  return { ...rect, toJSON: () => rect }\n}\n\nfunction getDOMRect(anchorRect?: AnchorRect | null) {\n  if (!anchorRect) return createDOMRect()\n  const { x, y, width, height } = anchorRect\n  return createDOMRect(x, y, width, height)\n}\n\nexport function getAnchorElement(\n  anchorElement: MaybeRectElement,\n  getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null,\n) {\n  return {\n    contextElement: isHTMLElement(anchorElement) ? anchorElement : undefined,\n    getBoundingClientRect: () => {\n      const anchor = anchorElement\n      const anchorRect = getAnchorRect?.(anchor)\n      if (anchorRect || !anchor) {\n        return getDOMRect(anchorRect)\n      }\n      return anchor.getBoundingClientRect()\n    },\n  }\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\nimport type { PlacementSide } from \"./types\"\n\n/* -----------------------------------------------------------------------------\n * Shared middleware utils\n * -----------------------------------------------------------------------------*/\n\nconst toVar = (value: string) => ({ variable: value, reference: `var(${value})` })\n\nexport const cssVars = {\n  arrowSize: toVar(\"--arrow-size\"),\n  arrowSizeHalf: toVar(\"--arrow-size-half\"),\n  arrowBg: toVar(\"--arrow-background\"),\n  transformOrigin: toVar(\"--transform-origin\"),\n  arrowOffset: toVar(\"--arrow-offset\"),\n}\n\n/* -----------------------------------------------------------------------------\n * Transform Origin Middleware\n * -----------------------------------------------------------------------------*/\n\nconst getTransformOrigin = (arrow?: Partial<Coords>) => ({\n  top: \"bottom center\",\n  \"top-start\": arrow ? `${arrow.x}px bottom` : \"left bottom\",\n  \"top-end\": arrow ? `${arrow.x}px bottom` : \"right bottom\",\n  bottom: \"top center\",\n  \"bottom-start\": arrow ? `${arrow.x}px top` : \"top left\",\n  \"bottom-end\": arrow ? `${arrow.x}px top` : \"top right\",\n  left: \"right center\",\n  \"left-start\": arrow ? `right ${arrow.y}px` : \"right top\",\n  \"left-end\": arrow ? `right ${arrow.y}px` : \"right bottom\",\n  right: \"left center\",\n  \"right-start\": arrow ? `left ${arrow.y}px` : \"left top\",\n  \"right-end\": arrow ? `left ${arrow.y}px` : \"left bottom\",\n})\n\nexport const __transformOrigin: Middleware = {\n  name: \"transformOrigin\",\n  fn({ placement, elements, middlewareData }) {\n    const { arrow } = middlewareData\n    const transformOrigin = getTransformOrigin(arrow)[placement]\n\n    const { floating } = elements\n    floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin)\n\n    return {\n      data: { transformOrigin },\n    }\n  },\n}\n\n/* -----------------------------------------------------------------------------\n * Rect Middleware (to expose the rect data)\n * -----------------------------------------------------------------------------*/\n\nexport const __rects: Middleware = {\n  name: \"rects\",\n  fn({ rects }) {\n    return {\n      data: rects,\n    }\n  },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\nexport const __shiftArrow = (arrowEl: HTMLElement | null): Middleware | undefined => {\n  if (!arrowEl) return\n  return {\n    name: \"shiftArrow\",\n    fn({ placement, middlewareData }) {\n      if (!middlewareData.arrow) return {}\n      const { x, y } = middlewareData.arrow\n      const dir = placement.split(\"-\")[0] as PlacementSide\n\n      Object.assign(arrowEl.style, {\n        left: x != null ? `${x}px` : \"\",\n        top: y != null ? `${y}px` : \"\",\n        [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n      })\n\n      return {}\n    },\n  }\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport type { PlacementAlign, PlacementSide } from \"./types\"\n\nexport function isValidPlacement(v: string): v is Placement {\n  return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)\n}\n\nexport function getPlacementDetails(placement: Placement) {\n  const [side, align] = placement.split(\"-\") as [PlacementSide, PlacementAlign | undefined]\n  return { side, align, hasAlign: align != null }\n}\n\nexport function getPlacementSide(placement: Placement): PlacementSide {\n  return placement.split(\"-\")[0] as PlacementSide\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\nimport type { PositioningOptions } from \"./types\"\n\nexport interface GetPlacementStylesOptions {\n  placement?: Placement\n}\n\nconst ARROW_FLOATING_STYLE = {\n  bottom: \"rotate(45deg)\",\n  left: \"rotate(135deg)\",\n  top: \"rotate(225deg)\",\n  right: \"rotate(315deg)\",\n} as const\n\nexport function getPlacementStyles(\n  options: Pick<PositioningOptions, \"placement\" | \"sameWidth\" | \"fitViewport\" | \"strategy\"> = {},\n) {\n  const { placement, sameWidth, fitViewport, strategy = \"absolute\" } = options\n\n  return {\n    arrow: {\n      position: \"absolute\",\n      width: cssVars.arrowSize.reference,\n      height: cssVars.arrowSize.reference,\n      [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,\n      [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,\n    } as const,\n\n    arrowTip: {\n      transform: placement ? ARROW_FLOATING_STYLE[placement.split(\"-\")[0]] : undefined,\n      background: cssVars.arrowBg.reference,\n      top: \"0\",\n      left: \"0\",\n      width: \"100%\",\n      height: \"100%\",\n      position: \"absolute\",\n      zIndex: \"inherit\",\n    } as const,\n\n    floating: {\n      position: strategy,\n      isolation: \"isolate\",\n      minWidth: sameWidth ? undefined : \"max-content\",\n      width: sameWidth ? \"var(--reference-width)\" : undefined,\n      maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n      maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n      top: \"0px\",\n      left: \"0px\",\n      // move off-screen if placement is not defined\n      transform: placement ? \"translate3d(var(--x), var(--y), 0)\" : \"translate3d(0, -100vh, 0)\",\n      zIndex: \"var(--z-index)\",\n    } as const,\n  }\n}\n"],"mappings":"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","names":["import_dom_query","arrow"]}
+{"version":3,"sources":["../src/index.ts","../src/get-placement.ts","../src/get-anchor.ts","../src/middleware.ts","../src/placement.ts","../src/get-styles.ts"],"sourcesContent":["export { getPlacement } from \"./get-placement\"\nexport { getPlacementStyles, type GetPlacementStylesOptions } from \"./get-styles\"\nexport { getPlacementSide, isValidPlacement } from \"./placement\"\nexport type {\n  AnchorRect,\n  AutoUpdateOptions,\n  Boundary,\n  ComputePositionReturn,\n  Placement,\n  PlacementAlign,\n  PlacementSide,\n  PositioningOptions,\n} from \"./types\"\n","import type { AutoUpdateOptions, Middleware } from \"@floating-ui/dom\"\nimport { arrow, autoUpdate, computePosition, flip, limitShift, offset, shift, size } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { compact, isNull, noop, runIfFn } from \"@zag-js/utils\"\nimport { getAnchorElement } from \"./get-anchor\"\nimport { rectMiddleware, shiftArrowMiddleware, transformOriginMiddleware } from \"./middleware\"\nimport { getPlacementDetails } from \"./placement\"\nimport type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n  strategy: \"absolute\",\n  placement: \"bottom\",\n  listeners: true,\n  gutter: 8,\n  flip: true,\n  slide: true,\n  overlap: false,\n  sameWidth: false,\n  fitViewport: false,\n  overflowPadding: 8,\n  arrowPadding: 4,\n}\n\nfunction roundByDpr(win: Window, value: number) {\n  const dpr = win.devicePixelRatio || 1\n  return Math.round(value * dpr) / dpr\n}\n\nfunction getBoundaryMiddleware(opts: PositioningOptions) {\n  return runIfFn(opts.boundary)\n}\n\nfunction getArrowMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n  if (!arrowElement) return\n  return arrow({\n    element: arrowElement,\n    padding: opts.arrowPadding,\n  })\n}\n\nfunction getOffsetMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n  if (isNull(opts.offset ?? opts.gutter)) return\n  return offset(({ placement }) => {\n    const arrowOffset = (arrowElement?.clientHeight || 0) / 2\n\n    const gutter = opts.offset?.mainAxis ?? opts.gutter\n    const mainAxis = typeof gutter === \"number\" ? gutter + arrowOffset : gutter ?? arrowOffset\n\n    const { hasAlign } = getPlacementDetails(placement)\n    const shift = !hasAlign ? opts.shift : undefined\n    const crossAxis = opts.offset?.crossAxis ?? shift\n\n    return compact({\n      crossAxis: crossAxis,\n      mainAxis: mainAxis,\n      alignmentAxis: opts.shift,\n    })\n  })\n}\n\nfunction getFlipMiddleware(opts: PositioningOptions) {\n  if (!opts.flip) return\n  return flip({\n    boundary: getBoundaryMiddleware(opts),\n    padding: opts.overflowPadding,\n    fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n  })\n}\n\nfunction getShiftMiddleware(opts: PositioningOptions) {\n  if (!opts.slide && !opts.overlap) return\n  return shift({\n    boundary: getBoundaryMiddleware(opts),\n    mainAxis: opts.slide,\n    crossAxis: opts.overlap,\n    padding: opts.overflowPadding,\n    limiter: limitShift(),\n  })\n}\n\nfunction getSizeMiddleware(opts: PositioningOptions) {\n  return size({\n    padding: opts.overflowPadding,\n    apply({ elements, rects, availableHeight, availableWidth }) {\n      const floating = elements.floating\n\n      const referenceWidth = Math.round(rects.reference.width)\n      availableWidth = Math.floor(availableWidth)\n      availableHeight = Math.floor(availableHeight)\n\n      floating.style.setProperty(\"--reference-width\", `${referenceWidth}px`)\n      floating.style.setProperty(\"--available-width\", `${availableWidth}px`)\n      floating.style.setProperty(\"--available-height\", `${availableHeight}px`)\n    },\n  })\n}\n\nfunction getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {\n  if (!opts) return {}\n  if (opts === true) {\n    return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true }\n  }\n  return opts\n}\n\nfunction getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n  const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)\n  if (!floating || !reference) return\n  const options = Object.assign({}, defaultOptions, opts)\n\n  /* -----------------------------------------------------------------------------\n   * The middleware stack\n   * -----------------------------------------------------------------------------*/\n\n  const arrowEl = floating.querySelector<HTMLElement>(\"[data-part=arrow]\")\n\n  const middleware: (Middleware | undefined)[] = [\n    getOffsetMiddleware(arrowEl, options),\n    getFlipMiddleware(options),\n    getShiftMiddleware(options),\n    getArrowMiddleware(arrowEl, options),\n    shiftArrowMiddleware(arrowEl),\n    transformOriginMiddleware,\n    getSizeMiddleware(options),\n    rectMiddleware,\n  ]\n\n  /* -----------------------------------------------------------------------------\n   * The actual positioning function\n   * -----------------------------------------------------------------------------*/\n\n  const { placement, strategy, onComplete, onPositioned } = options\n\n  const updatePosition = async () => {\n    if (!reference || !floating) return\n\n    const pos = await computePosition(reference, floating, {\n      placement,\n      middleware,\n      strategy,\n    })\n\n    onComplete?.(pos)\n    onPositioned?.({ placed: true })\n\n    const win = getWindow(floating)\n    const x = roundByDpr(win, pos.x)\n    const y = roundByDpr(win, pos.y)\n\n    floating.style.setProperty(\"--x\", `${x}px`)\n    floating.style.setProperty(\"--y\", `${y}px`)\n\n    const contentEl = floating.firstElementChild\n\n    if (contentEl) {\n      const zIndex = win.getComputedStyle(contentEl).zIndex\n      floating.style.setProperty(\"--z-index\", zIndex)\n    }\n  }\n\n  const update = async () => {\n    if (opts.updatePosition) {\n      await opts.updatePosition({ updatePosition })\n      onPositioned?.({ placed: true })\n    } else {\n      await updatePosition()\n    }\n  }\n\n  const autoUpdateOptions = getAutoUpdateOptions(options.listeners)\n  const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop\n\n  update()\n\n  return () => {\n    cancelAutoUpdate?.()\n    onPositioned?.({ placed: false })\n  }\n}\n\nexport function getPlacement(\n  referenceOrFn: MaybeFn<MaybeRectElement>,\n  floatingOrFn: MaybeFn<MaybeElement>,\n  opts: PositioningOptions & { defer?: boolean } = {},\n) {\n  const { defer, ...options } = opts\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n  cleanups.push(\n    func(() => {\n      const reference = typeof referenceOrFn === \"function\" ? referenceOrFn() : referenceOrFn\n      const floating = typeof floatingOrFn === \"function\" ? floatingOrFn() : floatingOrFn\n      cleanups.push(getPlacementImpl(reference, floating, options))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import { isHTMLElement } from \"@zag-js/dom-query\"\nimport type { AnchorRect, MaybeRectElement } from \"./types\"\n\nexport function createDOMRect(x = 0, y = 0, width = 0, height = 0) {\n  if (typeof DOMRect === \"function\") {\n    return new DOMRect(x, y, width, height)\n  }\n  const rect = {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: x + width,\n    bottom: y + height,\n    left: x,\n  }\n  return { ...rect, toJSON: () => rect }\n}\n\nfunction getDOMRect(anchorRect?: AnchorRect | null) {\n  if (!anchorRect) return createDOMRect()\n  const { x, y, width, height } = anchorRect\n  return createDOMRect(x, y, width, height)\n}\n\nexport function getAnchorElement(\n  anchorElement: MaybeRectElement,\n  getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null,\n) {\n  return {\n    contextElement: isHTMLElement(anchorElement) ? anchorElement : undefined,\n    getBoundingClientRect: () => {\n      const anchor = anchorElement\n      const anchorRect = getAnchorRect?.(anchor)\n      if (anchorRect || !anchor) {\n        return getDOMRect(anchorRect)\n      }\n      return anchor.getBoundingClientRect()\n    },\n  }\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\nimport type { PlacementSide } from \"./types\"\n\n/* -----------------------------------------------------------------------------\n * Shared middleware utils\n * -----------------------------------------------------------------------------*/\n\nconst toVar = (value: string) => ({ variable: value, reference: `var(${value})` })\n\nexport const cssVars = {\n  arrowSize: toVar(\"--arrow-size\"),\n  arrowSizeHalf: toVar(\"--arrow-size-half\"),\n  arrowBg: toVar(\"--arrow-background\"),\n  transformOrigin: toVar(\"--transform-origin\"),\n  arrowOffset: toVar(\"--arrow-offset\"),\n}\n\n/* -----------------------------------------------------------------------------\n * Transform Origin Middleware\n * -----------------------------------------------------------------------------*/\n\nconst getTransformOrigin = (arrow?: Partial<Coords>) => ({\n  top: \"bottom center\",\n  \"top-start\": arrow ? `${arrow.x}px bottom` : \"left bottom\",\n  \"top-end\": arrow ? `${arrow.x}px bottom` : \"right bottom\",\n  bottom: \"top center\",\n  \"bottom-start\": arrow ? `${arrow.x}px top` : \"top left\",\n  \"bottom-end\": arrow ? `${arrow.x}px top` : \"top right\",\n  left: \"right center\",\n  \"left-start\": arrow ? `right ${arrow.y}px` : \"right top\",\n  \"left-end\": arrow ? `right ${arrow.y}px` : \"right bottom\",\n  right: \"left center\",\n  \"right-start\": arrow ? `left ${arrow.y}px` : \"left top\",\n  \"right-end\": arrow ? `left ${arrow.y}px` : \"left bottom\",\n})\n\nexport const transformOriginMiddleware: Middleware = {\n  name: \"transformOrigin\",\n  fn({ placement, elements, middlewareData }) {\n    const { arrow } = middlewareData\n    const transformOrigin = getTransformOrigin(arrow)[placement]\n\n    const { floating } = elements\n    floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin)\n\n    return {\n      data: { transformOrigin },\n    }\n  },\n}\n\n/* -----------------------------------------------------------------------------\n * Rect Middleware (to expose the rect data)\n * -----------------------------------------------------------------------------*/\n\nexport const rectMiddleware: Middleware = {\n  name: \"rects\",\n  fn({ rects }) {\n    return {\n      data: rects,\n    }\n  },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\nexport const shiftArrowMiddleware = (arrowEl: HTMLElement | null): Middleware | undefined => {\n  if (!arrowEl) return\n  return {\n    name: \"shiftArrow\",\n    fn({ placement, middlewareData }) {\n      if (!middlewareData.arrow) return {}\n      const { x, y } = middlewareData.arrow\n      const dir = placement.split(\"-\")[0] as PlacementSide\n\n      Object.assign(arrowEl.style, {\n        left: x != null ? `${x}px` : \"\",\n        top: y != null ? `${y}px` : \"\",\n        [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n      })\n\n      return {}\n    },\n  }\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport type { PlacementAlign, PlacementSide } from \"./types\"\n\nexport function isValidPlacement(v: string): v is Placement {\n  return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)\n}\n\nexport function getPlacementDetails(placement: Placement) {\n  const [side, align] = placement.split(\"-\") as [PlacementSide, PlacementAlign | undefined]\n  return { side, align, hasAlign: align != null }\n}\n\nexport function getPlacementSide(placement: Placement): PlacementSide {\n  return placement.split(\"-\")[0] as PlacementSide\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\nimport type { PositioningOptions } from \"./types\"\n\nexport interface GetPlacementStylesOptions {\n  placement?: Placement\n}\n\nconst ARROW_FLOATING_STYLE = {\n  bottom: \"rotate(45deg)\",\n  left: \"rotate(135deg)\",\n  top: \"rotate(225deg)\",\n  right: \"rotate(315deg)\",\n} as const\n\nexport function getPlacementStyles(\n  options: Pick<PositioningOptions, \"placement\" | \"sameWidth\" | \"fitViewport\" | \"strategy\"> = {},\n) {\n  const { placement, sameWidth, fitViewport, strategy = \"absolute\" } = options\n\n  return {\n    arrow: {\n      position: \"absolute\",\n      width: cssVars.arrowSize.reference,\n      height: cssVars.arrowSize.reference,\n      [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,\n      [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,\n    } as const,\n\n    arrowTip: {\n      transform: placement ? ARROW_FLOATING_STYLE[placement.split(\"-\")[0]] : undefined,\n      background: cssVars.arrowBg.reference,\n      top: \"0\",\n      left: \"0\",\n      width: \"100%\",\n      height: \"100%\",\n      position: \"absolute\",\n      zIndex: \"inherit\",\n    } as const,\n\n    floating: {\n      position: strategy,\n      isolation: \"isolate\",\n      minWidth: sameWidth ? undefined : \"max-content\",\n      width: sameWidth ? \"var(--reference-width)\" : undefined,\n      maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n      maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n      top: \"0px\",\n      left: \"0px\",\n      // move off-screen if placement is not defined\n      transform: placement ? \"translate3d(var(--x), var(--y), 0)\" : \"translate3d(0, -100vh, 0)\",\n      zIndex: \"var(--z-index)\",\n    } as const,\n  }\n}\n"],"mappings":"qqBAAA,wOCCA,eAA0F,4BAC1F,IAAAA,kBAA+B,6BAC/B,iBAA+C,yBCH/C,qBAA8B,6BAGvB,SAAS,cAAc,EAAI,EAAG,EAAI,EAAG,MAAQ,EAAG,OAAS,EAAG,CACjE,GAAI,OAAO,UAAY,WAAY,CACjC,OAAO,IAAI,QAAQ,EAAG,EAAG,MAAO,MAAM,CACxC,CACA,MAAM,KAAO,CACX,EACA,EACA,MACA,OACA,IAAK,EACL,MAAO,EAAI,MACX,OAAQ,EAAI,OACZ,KAAM,CACR,EACA,MAAO,CAAE,GAAG,KAAM,OAAQ,IAAM,IAAK,CACvC,CAEA,SAAS,WAAW,WAAgC,CAClD,GAAI,CAAC,WAAY,OAAO,cAAc,EACtC,KAAM,CAAE,EAAG,EAAG,MAAO,MAAO,EAAI,WAChC,OAAO,cAAc,EAAG,EAAG,MAAO,MAAM,CAC1C,CAEO,SAAS,iBACd,cACA,cACA,CACA,MAAO,CACL,kBAAgB,gCAAc,aAAa,EAAI,cAAgB,OAC/D,sBAAuB,IAAM,CAC3B,MAAM,OAAS,cACf,MAAM,WAAa,gBAAgB,MAAM,EACzC,GAAI,YAAc,CAAC,OAAQ,CACzB,OAAO,WAAW,UAAU,CAC9B,CACA,OAAO,OAAO,sBAAsB,CACtC,CACF,CACF,CClCA,IAAM,MAAS,QAAmB,CAAE,SAAU,MAAO,UAAW,OAAO,KAAK,GAAI,GAEzE,IAAM,QAAU,CACrB,UAAW,MAAM,cAAc,EAC/B,cAAe,MAAM,mBAAmB,EACxC,QAAS,MAAM,oBAAoB,EACnC,gBAAiB,MAAM,oBAAoB,EAC3C,YAAa,MAAM,gBAAgB,CACrC,EAMA,IAAM,mBAAsBC,SAA6B,CACvD,IAAK,gBACL,YAAaA,OAAQ,GAAGA,OAAM,CAAC,YAAc,cAC7C,UAAWA,OAAQ,GAAGA,OAAM,CAAC,YAAc,eAC3C,OAAQ,aACR,eAAgBA,OAAQ,GAAGA,OAAM,CAAC,SAAW,WAC7C,aAAcA,OAAQ,GAAGA,OAAM,CAAC,SAAW,YAC3C,KAAM,eACN,aAAcA,OAAQ,SAASA,OAAM,CAAC,KAAO,YAC7C,WAAYA,OAAQ,SAASA,OAAM,CAAC,KAAO,eAC3C,MAAO,cACP,cAAeA,OAAQ,QAAQA,OAAM,CAAC,KAAO,WAC7C,YAAaA,OAAQ,QAAQA,OAAM,CAAC,KAAO,aAC7C,GAEO,IAAM,0BAAwC,CACnD,KAAM,kBACN,GAAG,CAAE,UAAW,SAAU,cAAe,EAAG,CAC1C,KAAM,CAAE,MAAAA,MAAM,EAAI,eAClB,MAAM,gBAAkB,mBAAmBA,MAAK,EAAE,SAAS,EAE3D,KAAM,CAAE,QAAS,EAAI,SACrB,SAAS,MAAM,YAAY,QAAQ,gBAAgB,SAAU,eAAe,EAE5E,MAAO,CACL,KAAM,CAAE,eAAgB,CAC1B,CACF,CACF,EAMO,IAAM,eAA6B,CACxC,KAAM,QACN,GAAG,CAAE,KAAM,EAAG,CACZ,MAAO,CACL,KAAM,KACR,CACF,CACF,EAMO,IAAM,qBAAwB,SAAwD,CAC3F,GAAI,CAAC,QAAS,OACd,MAAO,CACL,KAAM,aACN,GAAG,CAAE,UAAW,cAAe,EAAG,CAChC,GAAI,CAAC,eAAe,MAAO,MAAO,CAAC,EACnC,KAAM,CAAE,EAAG,CAAE,EAAI,eAAe,MAChC,MAAM,IAAM,UAAU,MAAM,GAAG,EAAE,CAAC,EAElC,OAAO,OAAO,QAAQ,MAAO,CAC3B,KAAM,GAAK,KAAO,GAAG,CAAC,KAAO,GAC7B,IAAK,GAAK,KAAO,GAAG,CAAC,KAAO,GAC5B,CAAC,GAAG,EAAG,eAAe,QAAQ,YAAY,SAAS,GACrD,CAAC,EAED,MAAO,CAAC,CACV,CACF,CACF,ECnFO,SAAS,iBAAiB,EAA2B,CAC1D,MAAO,iDAAiD,KAAK,CAAC,CAChE,CAEO,SAAS,oBAAoB,UAAsB,CACxD,KAAM,CAAC,KAAM,KAAK,EAAI,UAAU,MAAM,GAAG,EACzC,MAAO,CAAE,KAAM,MAAO,SAAU,OAAS,IAAK,CAChD,CAEO,SAAS,iBAAiB,UAAqC,CACpE,OAAO,UAAU,MAAM,GAAG,EAAE,CAAC,CAC/B,CHLA,IAAM,eAAqC,CACzC,SAAU,WACV,UAAW,SACX,UAAW,KACX,OAAQ,EACR,KAAM,KACN,MAAO,KACP,QAAS,MACT,UAAW,MACX,YAAa,MACb,gBAAiB,EACjB,aAAc,CAChB,EAEA,SAAS,WAAW,IAAa,MAAe,CAC9C,MAAM,IAAM,IAAI,kBAAoB,EACpC,OAAO,KAAK,MAAM,MAAQ,GAAG,EAAI,GACnC,CAEA,SAAS,sBAAsB,KAA0B,CACvD,SAAO,sBAAQ,KAAK,QAAQ,CAC9B,CAEA,SAAS,mBAAmB,aAAkC,KAA0B,CACtF,GAAI,CAAC,aAAc,OACnB,SAAO,kBAAM,CACX,QAAS,aACT,QAAS,KAAK,YAChB,CAAC,CACH,CAEA,SAAS,oBAAoB,aAAkC,KAA0B,CACvF,MAAI,qBAAO,KAAK,QAAU,KAAK,MAAM,EAAG,OACxC,SAAO,mBAAO,CAAC,CAAE,SAAU,IAAM,CAC/B,MAAM,aAAe,cAAc,cAAgB,GAAK,EAExD,MAAM,OAAS,KAAK,QAAQ,UAAY,KAAK,OAC7C,MAAM,SAAW,OAAO,SAAW,SAAW,OAAS,YAAc,QAAU,YAE/E,KAAM,CAAE,QAAS,EAAI,oBAAoB,SAAS,EAClD,MAAMC,OAAQ,CAAC,SAAW,KAAK,MAAQ,OACvC,MAAM,UAAY,KAAK,QAAQ,WAAaA,OAE5C,SAAO,sBAAQ,CACb,UACA,SACA,cAAe,KAAK,KACtB,CAAC,CACH,CAAC,CACH,CAEA,SAAS,kBAAkB,KAA0B,CACnD,GAAI,CAAC,KAAK,KAAM,OAChB,SAAO,iBAAK,CACV,SAAU,sBAAsB,IAAI,EACpC,QAAS,KAAK,gBACd,mBAAoB,KAAK,OAAS,KAAO,OAAY,KAAK,IAC5D,CAAC,CACH,CAEA,SAAS,mBAAmB,KAA0B,CACpD,GAAI,CAAC,KAAK,OAAS,CAAC,KAAK,QAAS,OAClC,SAAO,kBAAM,CACX,SAAU,sBAAsB,IAAI,EACpC,SAAU,KAAK,MACf,UAAW,KAAK,QAChB,QAAS,KAAK,gBACd,WAAS,uBAAW,CACtB,CAAC,CACH,CAEA,SAAS,kBAAkB,KAA0B,CACnD,SAAO,iBAAK,CACV,QAAS,KAAK,gBACd,MAAM,CAAE,SAAU,MAAO,gBAAiB,cAAe,EAAG,CAC1D,MAAM,SAAW,SAAS,SAE1B,MAAM,eAAiB,KAAK,MAAM,MAAM,UAAU,KAAK,EACvD,eAAiB,KAAK,MAAM,cAAc,EAC1C,gBAAkB,KAAK,MAAM,eAAe,EAE5C,SAAS,MAAM,YAAY,oBAAqB,GAAG,cAAc,IAAI,EACrE,SAAS,MAAM,YAAY,oBAAqB,GAAG,cAAc,IAAI,EACrE,SAAS,MAAM,YAAY,qBAAsB,GAAG,eAAe,IAAI,CACzE,CACF,CAAC,CACH,CAEA,SAAS,qBAAqB,KAAuD,CACnF,GAAI,CAAC,KAAM,MAAO,CAAC,EACnB,GAAI,OAAS,KAAM,CACjB,MAAO,CAAE,eAAgB,KAAM,eAAgB,KAAM,cAAe,KAAM,YAAa,IAAK,CAC9F,CACA,OAAO,IACT,CAEA,SAAS,iBAAiB,mBAAsC,SAAwB,KAA2B,CAAC,EAAG,CACrH,MAAM,UAAY,iBAAiB,mBAAoB,KAAK,aAAa,EACzE,GAAI,CAAC,UAAY,CAAC,UAAW,OAC7B,MAAM,QAAU,OAAO,OAAO,CAAC,EAAG,eAAgB,IAAI,EAMtD,MAAM,QAAU,SAAS,cAA2B,mBAAmB,EAEvE,MAAM,WAAyC,CAC7C,oBAAoB,QAAS,OAAO,EACpC,kBAAkB,OAAO,EACzB,mBAAmB,OAAO,EAC1B,mBAAmB,QAAS,OAAO,EACnC,qBAAqB,OAAO,EAC5B,0BACA,kBAAkB,OAAO,EACzB,cACF,EAMA,KAAM,CAAE,UAAW,SAAU,WAAY,YAAa,EAAI,QAE1D,MAAM,eAAiB,SAAY,CACjC,GAAI,CAAC,WAAa,CAAC,SAAU,OAE7B,MAAM,IAAM,QAAM,4BAAgB,UAAW,SAAU,CACrD,UACA,WACA,QACF,CAAC,EAED,aAAa,GAAG,EAChB,eAAe,CAAE,OAAQ,IAAK,CAAC,EAE/B,MAAM,OAAM,6BAAU,QAAQ,EAC9B,MAAM,EAAI,WAAW,IAAK,IAAI,CAAC,EAC/B,MAAM,EAAI,WAAW,IAAK,IAAI,CAAC,EAE/B,SAAS,MAAM,YAAY,MAAO,GAAG,CAAC,IAAI,EAC1C,SAAS,MAAM,YAAY,MAAO,GAAG,CAAC,IAAI,EAE1C,MAAM,UAAY,SAAS,kBAE3B,GAAI,UAAW,CACb,MAAM,OAAS,IAAI,iBAAiB,SAAS,EAAE,OAC/C,SAAS,MAAM,YAAY,YAAa,MAAM,CAChD,CACF,EAEA,MAAM,OAAS,SAAY,CACzB,GAAI,KAAK,eAAgB,CACvB,MAAM,KAAK,eAAe,CAAE,cAAe,CAAC,EAC5C,eAAe,CAAE,OAAQ,IAAK,CAAC,CACjC,KAAO,CACL,MAAM,eAAe,CACvB,CACF,EAEA,MAAM,kBAAoB,qBAAqB,QAAQ,SAAS,EAChE,MAAM,iBAAmB,QAAQ,aAAY,uBAAW,UAAW,SAAU,OAAQ,iBAAiB,EAAI,kBAE1G,OAAO,EAEP,MAAO,IAAM,CACX,mBAAmB,EACnB,eAAe,CAAE,OAAQ,KAAM,CAAC,CAClC,CACF,CAEO,SAAS,aACd,cACA,aACA,KAAiD,CAAC,EAClD,CACA,KAAM,CAAE,MAAO,GAAG,OAAQ,EAAI,KAC9B,MAAM,KAAO,MAAQ,sBAAO,GAAW,EAAE,EACzC,MAAM,SAAyC,CAAC,EAChD,SAAS,KACP,KAAK,IAAM,CACT,MAAM,UAAY,OAAO,gBAAkB,WAAa,cAAc,EAAI,cAC1E,MAAM,SAAW,OAAO,eAAiB,WAAa,aAAa,EAAI,aACvE,SAAS,KAAK,iBAAiB,UAAW,SAAU,OAAO,CAAC,CAC9D,CAAC,CACH,EACA,MAAO,IAAM,CACX,SAAS,QAAS,IAAO,KAAK,CAAC,CACjC,CACF,CI9LA,IAAM,qBAAuB,CAC3B,OAAQ,gBACR,KAAM,iBACN,IAAK,iBACL,MAAO,gBACT,EAEO,SAAS,mBACd,QAA4F,CAAC,EAC7F,CACA,KAAM,CAAE,UAAW,UAAW,YAAa,SAAW,UAAW,EAAI,QAErE,MAAO,CACL,MAAO,CACL,SAAU,WACV,MAAO,QAAQ,UAAU,UACzB,OAAQ,QAAQ,UAAU,UAC1B,CAAC,QAAQ,cAAc,QAAQ,EAAG,QAAQ,QAAQ,UAAU,SAAS,QACrE,CAAC,QAAQ,YAAY,QAAQ,EAAG,QAAQ,QAAQ,cAAc,SAAS,QACzE,EAEA,SAAU,CACR,UAAW,UAAY,qBAAqB,UAAU,MAAM,GAAG,EAAE,CAAC,CAAC,EAAI,OACvE,WAAY,QAAQ,QAAQ,UAC5B,IAAK,IACL,KAAM,IACN,MAAO,OACP,OAAQ,OACR,SAAU,WACV,OAAQ,SACV,EAEA,SAAU,CACR,SAAU,SACV,UAAW,UACX,SAAU,UAAY,OAAY,cAClC,MAAO,UAAY,yBAA2B,OAC9C,SAAU,YAAc,yBAA2B,OACnD,UAAW,YAAc,0BAA4B,OACrD,IAAK,MACL,KAAM,MAEN,UAAW,UAAY,qCAAuC,4BAC9D,OAAQ,gBACV,CACF,CACF","names":["import_dom_query","arrow","shift"]}

package/dist/index.mjs

@@ -1,322 +1,2 @@
-// src/get-placement.ts
-import { arrow, autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
-import { getWindow, raf } from "@zag-js/dom-query";
-import { compact, isNull, noop, runIfFn } from "@zag-js/utils";
-
-// src/get-anchor.ts
-import { isHTMLElement } from "@zag-js/dom-query";
-function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
-  if (typeof DOMRect === "function") {
-    return new DOMRect(x, y, width, height);
-  }
-  const rect = {
-    x,
-    y,
-    width,
-    height,
-    top: y,
-    right: x + width,
-    bottom: y + height,
-    left: x
-  };
-  return { ...rect, toJSON: () => rect };
-}
-function getDOMRect(anchorRect) {
-  if (!anchorRect)
-    return createDOMRect();
-  const { x, y, width, height } = anchorRect;
-  return createDOMRect(x, y, width, height);
-}
-function getAnchorElement(anchorElement, getAnchorRect) {
-  return {
-    contextElement: isHTMLElement(anchorElement) ? anchorElement : void 0,
-    getBoundingClientRect: () => {
-      const anchor = anchorElement;
-      const anchorRect = getAnchorRect?.(anchor);
-      if (anchorRect || !anchor) {
-        return getDOMRect(anchorRect);
-      }
-      return anchor.getBoundingClientRect();
-    }
-  };
-}
-
-// src/middleware.ts
-var toVar = (value) => ({ variable: value, reference: `var(${value})` });
-var cssVars = {
-  arrowSize: toVar("--arrow-size"),
-  arrowSizeHalf: toVar("--arrow-size-half"),
-  arrowBg: toVar("--arrow-background"),
-  transformOrigin: toVar("--transform-origin"),
-  arrowOffset: toVar("--arrow-offset")
-};
-var getTransformOrigin = (arrow2) => ({
-  top: "bottom center",
-  "top-start": arrow2 ? `${arrow2.x}px bottom` : "left bottom",
-  "top-end": arrow2 ? `${arrow2.x}px bottom` : "right bottom",
-  bottom: "top center",
-  "bottom-start": arrow2 ? `${arrow2.x}px top` : "top left",
-  "bottom-end": arrow2 ? `${arrow2.x}px top` : "top right",
-  left: "right center",
-  "left-start": arrow2 ? `right ${arrow2.y}px` : "right top",
-  "left-end": arrow2 ? `right ${arrow2.y}px` : "right bottom",
-  right: "left center",
-  "right-start": arrow2 ? `left ${arrow2.y}px` : "left top",
-  "right-end": arrow2 ? `left ${arrow2.y}px` : "left bottom"
-});
-var __transformOrigin = {
-  name: "transformOrigin",
-  fn({ placement, elements, middlewareData }) {
-    const { arrow: arrow2 } = middlewareData;
-    const transformOrigin = getTransformOrigin(arrow2)[placement];
-    const { floating } = elements;
-    floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin);
-    return {
-      data: { transformOrigin }
-    };
-  }
-};
-var __rects = {
-  name: "rects",
-  fn({ rects }) {
-    return {
-      data: rects
-    };
-  }
-};
-var __shiftArrow = (arrowEl) => {
-  if (!arrowEl)
-    return;
-  return {
-    name: "shiftArrow",
-    fn({ placement, middlewareData }) {
-      if (!middlewareData.arrow)
-        return {};
-      const { x, y } = middlewareData.arrow;
-      const dir = placement.split("-")[0];
-      Object.assign(arrowEl.style, {
-        left: x != null ? `${x}px` : "",
-        top: y != null ? `${y}px` : "",
-        [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`
-      });
-      return {};
-    }
-  };
-};
-
-// src/placement.ts
-function isValidPlacement(v) {
-  return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v);
-}
-function getPlacementDetails(placement) {
-  const [side, align] = placement.split("-");
-  return { side, align, hasAlign: align != null };
-}
-function getPlacementSide(placement) {
-  return placement.split("-")[0];
-}
-
-// src/get-placement.ts
-var defaultOptions = {
-  strategy: "absolute",
-  placement: "bottom",
-  listeners: true,
-  gutter: 8,
-  flip: true,
-  slide: true,
-  overlap: false,
-  sameWidth: false,
-  fitViewport: false,
-  overflowPadding: 8,
-  arrowPadding: 4
-};
-function __dpr(win, value) {
-  const dpr = win.devicePixelRatio || 1;
-  return Math.round(value * dpr) / dpr;
-}
-function __boundary(opts) {
-  return runIfFn(opts.boundary);
-}
-function __arrow(arrowElement, opts) {
-  if (!arrowElement)
-    return;
-  return arrow({
-    element: arrowElement,
-    padding: opts.arrowPadding
-  });
-}
-function __offset(arrowElement, opts) {
-  if (isNull(opts.offset ?? opts.gutter))
-    return;
-  return offset(({ placement }) => {
-    const arrowOffset = (arrowElement?.clientHeight || 0) / 2;
-    const gutter = opts.offset?.mainAxis ?? opts.gutter;
-    const mainAxis = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
-    const { hasAlign } = getPlacementDetails(placement);
-    return compact({
-      crossAxis: hasAlign ? opts.shift : opts.offset?.crossAxis,
-      mainAxis,
-      alignmentAxis: opts.shift
-    });
-  });
-}
-function __flip(opts) {
-  if (!opts.flip)
-    return;
-  return flip({
-    boundary: __boundary(opts),
-    padding: opts.overflowPadding,
-    fallbackPlacements: opts.flip === true ? void 0 : opts.flip
-  });
-}
-function __shift(opts) {
-  if (!opts.slide && !opts.overlap)
-    return;
-  return shift({
-    boundary: __boundary(opts),
-    mainAxis: opts.slide,
-    crossAxis: opts.overlap,
-    padding: opts.overflowPadding
-  });
-}
-function __size(opts) {
-  return size({
-    padding: opts.overflowPadding,
-    apply({ elements, rects, availableHeight, availableWidth }) {
-      const floating = elements.floating;
-      const referenceWidth = Math.round(rects.reference.width);
-      availableWidth = Math.floor(availableWidth);
-      availableHeight = Math.floor(availableHeight);
-      floating.style.setProperty("--reference-width", `${referenceWidth}px`);
-      floating.style.setProperty("--available-width", `${availableWidth}px`);
-      floating.style.setProperty("--available-height", `${availableHeight}px`);
-    }
-  });
-}
-function getAutoUpdateOptions(opts) {
-  if (!opts)
-    return {};
-  if (opts === true) {
-    return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true };
-  }
-  return opts;
-}
-function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
-  const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect);
-  if (!floating || !reference)
-    return;
-  const options = Object.assign({}, defaultOptions, opts);
-  const arrowEl = floating.querySelector("[data-part=arrow]");
-  const middleware = [
-    __offset(arrowEl, options),
-    __flip(options),
-    __shift(options),
-    __arrow(arrowEl, options),
-    __shiftArrow(arrowEl),
-    __transformOrigin,
-    __size(options),
-    __rects
-  ];
-  const { placement, strategy, onComplete, onPositioned } = options;
-  const updatePosition = async () => {
-    if (!reference || !floating)
-      return;
-    const pos = await computePosition(reference, floating, {
-      placement,
-      middleware,
-      strategy
-    });
-    onComplete?.(pos);
-    onPositioned?.({ placed: true });
-    const win = getWindow(floating);
-    const x = __dpr(win, pos.x);
-    const y = __dpr(win, pos.y);
-    floating.style.setProperty("--x", `${x}px`);
-    floating.style.setProperty("--y", `${y}px`);
-    const contentEl = floating.firstElementChild;
-    if (contentEl) {
-      const zIndex = win.getComputedStyle(contentEl).zIndex;
-      floating.style.setProperty("--z-index", zIndex);
-    }
-  };
-  const update = async () => {
-    if (opts.updatePosition) {
-      await opts.updatePosition({ updatePosition });
-      onPositioned?.({ placed: true });
-    } else {
-      await updatePosition();
-    }
-  };
-  const autoUpdateOptions = getAutoUpdateOptions(options.listeners);
-  const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop;
-  update();
-  return () => {
-    cancelAutoUpdate?.();
-    onPositioned?.({ placed: false });
-  };
-}
-function getPlacement(referenceOrFn, floatingOrFn, opts = {}) {
-  const { defer, ...options } = opts;
-  const func = defer ? raf : (v) => v();
-  const cleanups = [];
-  cleanups.push(
-    func(() => {
-      const reference = typeof referenceOrFn === "function" ? referenceOrFn() : referenceOrFn;
-      const floating = typeof floatingOrFn === "function" ? floatingOrFn() : floatingOrFn;
-      cleanups.push(getPlacementImpl(reference, floating, options));
-    })
-  );
-  return () => {
-    cleanups.forEach((fn) => fn?.());
-  };
-}
-
-// src/get-styles.ts
-var ARROW_FLOATING_STYLE = {
-  bottom: "rotate(45deg)",
-  left: "rotate(135deg)",
-  top: "rotate(225deg)",
-  right: "rotate(315deg)"
-};
-function getPlacementStyles(options = {}) {
-  const { placement, sameWidth, fitViewport, strategy = "absolute" } = options;
-  return {
-    arrow: {
-      position: "absolute",
-      width: cssVars.arrowSize.reference,
-      height: cssVars.arrowSize.reference,
-      [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,
-      [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`
-    },
-    arrowTip: {
-      transform: placement ? ARROW_FLOATING_STYLE[placement.split("-")[0]] : void 0,
-      background: cssVars.arrowBg.reference,
-      top: "0",
-      left: "0",
-      width: "100%",
-      height: "100%",
-      position: "absolute",
-      zIndex: "inherit"
-    },
-    floating: {
-      position: strategy,
-      isolation: "isolate",
-      minWidth: sameWidth ? void 0 : "max-content",
-      width: sameWidth ? "var(--reference-width)" : void 0,
-      maxWidth: fitViewport ? "var(--available-width)" : void 0,
-      maxHeight: fitViewport ? "var(--available-height)" : void 0,
-      top: "0px",
-      left: "0px",
-      // move off-screen if placement is not defined
-      transform: placement ? "translate3d(var(--x), var(--y), 0)" : "translate3d(0, -100vh, 0)",
-      zIndex: "var(--z-index)"
-    }
-  };
-}
-export {
-  getPlacement,
-  getPlacementSide,
-  getPlacementStyles,
-  isValidPlacement
-};
+import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift,size}from"@floating-ui/dom";import{getWindow,raf}from"@zag-js/dom-query";import{compact,isNull,noop,runIfFn}from"@zag-js/utils";import{isHTMLElement}from"@zag-js/dom-query";function createDOMRect(x=0,y=0,width=0,height=0){if(typeof DOMRect==="function"){return new DOMRect(x,y,width,height)}const rect={x,y,width,height,top:y,right:x+width,bottom:y+height,left:x};return{...rect,toJSON:()=>rect}}function getDOMRect(anchorRect){if(!anchorRect)return createDOMRect();const{x,y,width,height}=anchorRect;return createDOMRect(x,y,width,height)}function getAnchorElement(anchorElement,getAnchorRect){return{contextElement:isHTMLElement(anchorElement)?anchorElement:void 0,getBoundingClientRect:()=>{const anchor=anchorElement;const anchorRect=getAnchorRect?.(anchor);if(anchorRect||!anchor){return getDOMRect(anchorRect)}return anchor.getBoundingClientRect()}}}var toVar=value=>({variable:value,reference:`var(${value})`});var cssVars={arrowSize:toVar("--arrow-size"),arrowSizeHalf:toVar("--arrow-size-half"),arrowBg:toVar("--arrow-background"),transformOrigin:toVar("--transform-origin"),arrowOffset:toVar("--arrow-offset")};var getTransformOrigin=arrow2=>({top:"bottom center","top-start":arrow2?`${arrow2.x}px bottom`:"left bottom","top-end":arrow2?`${arrow2.x}px bottom`:"right bottom",bottom:"top center","bottom-start":arrow2?`${arrow2.x}px top`:"top left","bottom-end":arrow2?`${arrow2.x}px top`:"top right",left:"right center","left-start":arrow2?`right ${arrow2.y}px`:"right top","left-end":arrow2?`right ${arrow2.y}px`:"right bottom",right:"left center","right-start":arrow2?`left ${arrow2.y}px`:"left top","right-end":arrow2?`left ${arrow2.y}px`:"left bottom"});var transformOriginMiddleware={name:"transformOrigin",fn({placement,elements,middlewareData}){const{arrow:arrow2}=middlewareData;const transformOrigin=getTransformOrigin(arrow2)[placement];const{floating}=elements;floating.style.setProperty(cssVars.transformOrigin.variable,transformOrigin);return{data:{transformOrigin}}}};var rectMiddleware={name:"rects",fn({rects}){return{data:rects}}};var shiftArrowMiddleware=arrowEl=>{if(!arrowEl)return;return{name:"shiftArrow",fn({placement,middlewareData}){if(!middlewareData.arrow)return{};const{x,y}=middlewareData.arrow;const dir=placement.split("-")[0];Object.assign(arrowEl.style,{left:x!=null?`${x}px`:"",top:y!=null?`${y}px`:"",[dir]:`calc(100% + ${cssVars.arrowOffset.reference})`});return{}}}};function isValidPlacement(v){return/^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)}function getPlacementDetails(placement){const[side,align]=placement.split("-");return{side,align,hasAlign:align!=null}}function getPlacementSide(placement){return placement.split("-")[0]}var defaultOptions={strategy:"absolute",placement:"bottom",listeners:true,gutter:8,flip:true,slide:true,overlap:false,sameWidth:false,fitViewport:false,overflowPadding:8,arrowPadding:4};function roundByDpr(win,value){const dpr=win.devicePixelRatio||1;return Math.round(value*dpr)/dpr}function getBoundaryMiddleware(opts){return runIfFn(opts.boundary)}function getArrowMiddleware(arrowElement,opts){if(!arrowElement)return;return arrow({element:arrowElement,padding:opts.arrowPadding})}function getOffsetMiddleware(arrowElement,opts){if(isNull(opts.offset??opts.gutter))return;return offset(({placement})=>{const arrowOffset=(arrowElement?.clientHeight||0)/2;const gutter=opts.offset?.mainAxis??opts.gutter;const mainAxis=typeof gutter==="number"?gutter+arrowOffset:gutter??arrowOffset;const{hasAlign}=getPlacementDetails(placement);const shift2=!hasAlign?opts.shift:void 0;const crossAxis=opts.offset?.crossAxis??shift2;return compact({crossAxis,mainAxis,alignmentAxis:opts.shift})})}function getFlipMiddleware(opts){if(!opts.flip)return;return flip({boundary:getBoundaryMiddleware(opts),padding:opts.overflowPadding,fallbackPlacements:opts.flip===true?void 0:opts.flip})}function getShiftMiddleware(opts){if(!opts.slide&&!opts.overlap)return;return shift({boundary:getBoundaryMiddleware(opts),mainAxis:opts.slide,crossAxis:opts.overlap,padding:opts.overflowPadding,limiter:limitShift()})}function getSizeMiddleware(opts){return size({padding:opts.overflowPadding,apply({elements,rects,availableHeight,availableWidth}){const floating=elements.floating;const referenceWidth=Math.round(rects.reference.width);availableWidth=Math.floor(availableWidth);availableHeight=Math.floor(availableHeight);floating.style.setProperty("--reference-width",`${referenceWidth}px`);floating.style.setProperty("--available-width",`${availableWidth}px`);floating.style.setProperty("--available-height",`${availableHeight}px`)}})}function getAutoUpdateOptions(opts){if(!opts)return{};if(opts===true){return{ancestorResize:true,ancestorScroll:true,elementResize:true,layoutShift:true}}return opts}function getPlacementImpl(referenceOrVirtual,floating,opts={}){const reference=getAnchorElement(referenceOrVirtual,opts.getAnchorRect);if(!floating||!reference)return;const options=Object.assign({},defaultOptions,opts);const arrowEl=floating.querySelector("[data-part=arrow]");const middleware=[getOffsetMiddleware(arrowEl,options),getFlipMiddleware(options),getShiftMiddleware(options),getArrowMiddleware(arrowEl,options),shiftArrowMiddleware(arrowEl),transformOriginMiddleware,getSizeMiddleware(options),rectMiddleware];const{placement,strategy,onComplete,onPositioned}=options;const updatePosition=async()=>{if(!reference||!floating)return;const pos=await computePosition(reference,floating,{placement,middleware,strategy});onComplete?.(pos);onPositioned?.({placed:true});const win=getWindow(floating);const x=roundByDpr(win,pos.x);const y=roundByDpr(win,pos.y);floating.style.setProperty("--x",`${x}px`);floating.style.setProperty("--y",`${y}px`);const contentEl=floating.firstElementChild;if(contentEl){const zIndex=win.getComputedStyle(contentEl).zIndex;floating.style.setProperty("--z-index",zIndex)}};const update=async()=>{if(opts.updatePosition){await opts.updatePosition({updatePosition});onPositioned?.({placed:true})}else{await updatePosition()}};const autoUpdateOptions=getAutoUpdateOptions(options.listeners);const cancelAutoUpdate=options.listeners?autoUpdate(reference,floating,update,autoUpdateOptions):noop;update();return()=>{cancelAutoUpdate?.();onPositioned?.({placed:false})}}function getPlacement(referenceOrFn,floatingOrFn,opts={}){const{defer,...options}=opts;const func=defer?raf:v=>v();const cleanups=[];cleanups.push(func(()=>{const reference=typeof referenceOrFn==="function"?referenceOrFn():referenceOrFn;const floating=typeof floatingOrFn==="function"?floatingOrFn():floatingOrFn;cleanups.push(getPlacementImpl(reference,floating,options))}));return()=>{cleanups.forEach(fn=>fn?.())}}var ARROW_FLOATING_STYLE={bottom:"rotate(45deg)",left:"rotate(135deg)",top:"rotate(225deg)",right:"rotate(315deg)"};function getPlacementStyles(options={}){const{placement,sameWidth,fitViewport,strategy="absolute"}=options;return{arrow:{position:"absolute",width:cssVars.arrowSize.reference,height:cssVars.arrowSize.reference,[cssVars.arrowSizeHalf.variable]:`calc(${cssVars.arrowSize.reference} / 2)`,[cssVars.arrowOffset.variable]:`calc(${cssVars.arrowSizeHalf.reference} * -1)`},arrowTip:{transform:placement?ARROW_FLOATING_STYLE[placement.split("-")[0]]:void 0,background:cssVars.arrowBg.reference,top:"0",left:"0",width:"100%",height:"100%",position:"absolute",zIndex:"inherit"},floating:{position:strategy,isolation:"isolate",minWidth:sameWidth?void 0:"max-content",width:sameWidth?"var(--reference-width)":void 0,maxWidth:fitViewport?"var(--available-width)":void 0,maxHeight:fitViewport?"var(--available-height)":void 0,top:"0px",left:"0px",transform:placement?"translate3d(var(--x), var(--y), 0)":"translate3d(0, -100vh, 0)",zIndex:"var(--z-index)"}}}export{getPlacement,getPlacementSide,getPlacementStyles,isValidPlacement};
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/get-placement.ts","../src/get-anchor.ts","../src/middleware.ts","../src/placement.ts","../src/get-styles.ts"],"sourcesContent":["import type { AutoUpdateOptions, Middleware } from \"@floating-ui/dom\"\nimport { arrow, autoUpdate, computePosition, flip, offset, shift, size } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { compact, isNull, noop, runIfFn } from \"@zag-js/utils\"\nimport { getAnchorElement } from \"./get-anchor\"\nimport { __rects, __shiftArrow, __transformOrigin } from \"./middleware\"\nimport { getPlacementDetails } from \"./placement\"\nimport type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n  strategy: \"absolute\",\n  placement: \"bottom\",\n  listeners: true,\n  gutter: 8,\n  flip: true,\n  slide: true,\n  overlap: false,\n  sameWidth: false,\n  fitViewport: false,\n  overflowPadding: 8,\n  arrowPadding: 4,\n}\n\nfunction __dpr(win: Window, value: number) {\n  const dpr = win.devicePixelRatio || 1\n  return Math.round(value * dpr) / dpr\n}\n\nfunction __boundary(opts: PositioningOptions) {\n  return runIfFn(opts.boundary)\n}\n\nfunction __arrow(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n  if (!arrowElement) return\n  return arrow({\n    element: arrowElement,\n    padding: opts.arrowPadding,\n  })\n}\n\nfunction __offset(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n  if (isNull(opts.offset ?? opts.gutter)) return\n  return offset(({ placement }) => {\n    const arrowOffset = (arrowElement?.clientHeight || 0) / 2\n\n    const gutter = opts.offset?.mainAxis ?? opts.gutter\n    const mainAxis = typeof gutter === \"number\" ? gutter + arrowOffset : gutter ?? arrowOffset\n\n    const { hasAlign } = getPlacementDetails(placement)\n\n    return compact({\n      crossAxis: hasAlign ? opts.shift : opts.offset?.crossAxis,\n      mainAxis: mainAxis,\n      alignmentAxis: opts.shift,\n    })\n  })\n}\n\nfunction __flip(opts: PositioningOptions) {\n  if (!opts.flip) return\n  return flip({\n    boundary: __boundary(opts),\n    padding: opts.overflowPadding,\n    fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n  })\n}\n\nfunction __shift(opts: PositioningOptions) {\n  if (!opts.slide && !opts.overlap) return\n  return shift({\n    boundary: __boundary(opts),\n    mainAxis: opts.slide,\n    crossAxis: opts.overlap,\n    padding: opts.overflowPadding,\n  })\n}\n\nfunction __size(opts: PositioningOptions) {\n  return size({\n    padding: opts.overflowPadding,\n    apply({ elements, rects, availableHeight, availableWidth }) {\n      const floating = elements.floating\n\n      const referenceWidth = Math.round(rects.reference.width)\n      availableWidth = Math.floor(availableWidth)\n      availableHeight = Math.floor(availableHeight)\n\n      floating.style.setProperty(\"--reference-width\", `${referenceWidth}px`)\n      floating.style.setProperty(\"--available-width\", `${availableWidth}px`)\n      floating.style.setProperty(\"--available-height\", `${availableHeight}px`)\n    },\n  })\n}\n\nfunction getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {\n  if (!opts) return {}\n  if (opts === true) {\n    return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true }\n  }\n  return opts\n}\n\nfunction getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n  const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)\n  if (!floating || !reference) return\n  const options = Object.assign({}, defaultOptions, opts)\n\n  /* -----------------------------------------------------------------------------\n   * The middleware stack\n   * -----------------------------------------------------------------------------*/\n\n  const arrowEl = floating.querySelector<HTMLElement>(\"[data-part=arrow]\")\n\n  const middleware: (Middleware | undefined)[] = [\n    __offset(arrowEl, options),\n    __flip(options),\n    __shift(options),\n    __arrow(arrowEl, options),\n    __shiftArrow(arrowEl),\n    __transformOrigin,\n    __size(options),\n    __rects,\n  ]\n\n  /* -----------------------------------------------------------------------------\n   * The actual positioning function\n   * -----------------------------------------------------------------------------*/\n\n  const { placement, strategy, onComplete, onPositioned } = options\n\n  const updatePosition = async () => {\n    if (!reference || !floating) return\n\n    const pos = await computePosition(reference, floating, {\n      placement,\n      middleware,\n      strategy,\n    })\n\n    onComplete?.(pos)\n    onPositioned?.({ placed: true })\n\n    const win = getWindow(floating)\n    const x = __dpr(win, pos.x)\n    const y = __dpr(win, pos.y)\n\n    floating.style.setProperty(\"--x\", `${x}px`)\n    floating.style.setProperty(\"--y\", `${y}px`)\n\n    const contentEl = floating.firstElementChild\n\n    if (contentEl) {\n      const zIndex = win.getComputedStyle(contentEl).zIndex\n      floating.style.setProperty(\"--z-index\", zIndex)\n    }\n  }\n\n  const update = async () => {\n    if (opts.updatePosition) {\n      await opts.updatePosition({ updatePosition })\n      onPositioned?.({ placed: true })\n    } else {\n      await updatePosition()\n    }\n  }\n\n  const autoUpdateOptions = getAutoUpdateOptions(options.listeners)\n  const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop\n\n  update()\n\n  return () => {\n    cancelAutoUpdate?.()\n    onPositioned?.({ placed: false })\n  }\n}\n\nexport function getPlacement(\n  referenceOrFn: MaybeFn<MaybeRectElement>,\n  floatingOrFn: MaybeFn<MaybeElement>,\n  opts: PositioningOptions & { defer?: boolean } = {},\n) {\n  const { defer, ...options } = opts\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n  cleanups.push(\n    func(() => {\n      const reference = typeof referenceOrFn === \"function\" ? referenceOrFn() : referenceOrFn\n      const floating = typeof floatingOrFn === \"function\" ? floatingOrFn() : floatingOrFn\n      cleanups.push(getPlacementImpl(reference, floating, options))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import { isHTMLElement } from \"@zag-js/dom-query\"\nimport type { AnchorRect, MaybeRectElement } from \"./types\"\n\nexport function createDOMRect(x = 0, y = 0, width = 0, height = 0) {\n  if (typeof DOMRect === \"function\") {\n    return new DOMRect(x, y, width, height)\n  }\n  const rect = {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: x + width,\n    bottom: y + height,\n    left: x,\n  }\n  return { ...rect, toJSON: () => rect }\n}\n\nfunction getDOMRect(anchorRect?: AnchorRect | null) {\n  if (!anchorRect) return createDOMRect()\n  const { x, y, width, height } = anchorRect\n  return createDOMRect(x, y, width, height)\n}\n\nexport function getAnchorElement(\n  anchorElement: MaybeRectElement,\n  getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null,\n) {\n  return {\n    contextElement: isHTMLElement(anchorElement) ? anchorElement : undefined,\n    getBoundingClientRect: () => {\n      const anchor = anchorElement\n      const anchorRect = getAnchorRect?.(anchor)\n      if (anchorRect || !anchor) {\n        return getDOMRect(anchorRect)\n      }\n      return anchor.getBoundingClientRect()\n    },\n  }\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\nimport type { PlacementSide } from \"./types\"\n\n/* -----------------------------------------------------------------------------\n * Shared middleware utils\n * -----------------------------------------------------------------------------*/\n\nconst toVar = (value: string) => ({ variable: value, reference: `var(${value})` })\n\nexport const cssVars = {\n  arrowSize: toVar(\"--arrow-size\"),\n  arrowSizeHalf: toVar(\"--arrow-size-half\"),\n  arrowBg: toVar(\"--arrow-background\"),\n  transformOrigin: toVar(\"--transform-origin\"),\n  arrowOffset: toVar(\"--arrow-offset\"),\n}\n\n/* -----------------------------------------------------------------------------\n * Transform Origin Middleware\n * -----------------------------------------------------------------------------*/\n\nconst getTransformOrigin = (arrow?: Partial<Coords>) => ({\n  top: \"bottom center\",\n  \"top-start\": arrow ? `${arrow.x}px bottom` : \"left bottom\",\n  \"top-end\": arrow ? `${arrow.x}px bottom` : \"right bottom\",\n  bottom: \"top center\",\n  \"bottom-start\": arrow ? `${arrow.x}px top` : \"top left\",\n  \"bottom-end\": arrow ? `${arrow.x}px top` : \"top right\",\n  left: \"right center\",\n  \"left-start\": arrow ? `right ${arrow.y}px` : \"right top\",\n  \"left-end\": arrow ? `right ${arrow.y}px` : \"right bottom\",\n  right: \"left center\",\n  \"right-start\": arrow ? `left ${arrow.y}px` : \"left top\",\n  \"right-end\": arrow ? `left ${arrow.y}px` : \"left bottom\",\n})\n\nexport const __transformOrigin: Middleware = {\n  name: \"transformOrigin\",\n  fn({ placement, elements, middlewareData }) {\n    const { arrow } = middlewareData\n    const transformOrigin = getTransformOrigin(arrow)[placement]\n\n    const { floating } = elements\n    floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin)\n\n    return {\n      data: { transformOrigin },\n    }\n  },\n}\n\n/* -----------------------------------------------------------------------------\n * Rect Middleware (to expose the rect data)\n * -----------------------------------------------------------------------------*/\n\nexport const __rects: Middleware = {\n  name: \"rects\",\n  fn({ rects }) {\n    return {\n      data: rects,\n    }\n  },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\nexport const __shiftArrow = (arrowEl: HTMLElement | null): Middleware | undefined => {\n  if (!arrowEl) return\n  return {\n    name: \"shiftArrow\",\n    fn({ placement, middlewareData }) {\n      if (!middlewareData.arrow) return {}\n      const { x, y } = middlewareData.arrow\n      const dir = placement.split(\"-\")[0] as PlacementSide\n\n      Object.assign(arrowEl.style, {\n        left: x != null ? `${x}px` : \"\",\n        top: y != null ? `${y}px` : \"\",\n        [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n      })\n\n      return {}\n    },\n  }\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport type { PlacementAlign, PlacementSide } from \"./types\"\n\nexport function isValidPlacement(v: string): v is Placement {\n  return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)\n}\n\nexport function getPlacementDetails(placement: Placement) {\n  const [side, align] = placement.split(\"-\") as [PlacementSide, PlacementAlign | undefined]\n  return { side, align, hasAlign: align != null }\n}\n\nexport function getPlacementSide(placement: Placement): PlacementSide {\n  return placement.split(\"-\")[0] as PlacementSide\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\nimport type { PositioningOptions } from \"./types\"\n\nexport interface GetPlacementStylesOptions {\n  placement?: Placement\n}\n\nconst ARROW_FLOATING_STYLE = {\n  bottom: \"rotate(45deg)\",\n  left: \"rotate(135deg)\",\n  top: \"rotate(225deg)\",\n  right: \"rotate(315deg)\",\n} as const\n\nexport function getPlacementStyles(\n  options: Pick<PositioningOptions, \"placement\" | \"sameWidth\" | \"fitViewport\" | \"strategy\"> = {},\n) {\n  const { placement, sameWidth, fitViewport, strategy = \"absolute\" } = options\n\n  return {\n    arrow: {\n      position: \"absolute\",\n      width: cssVars.arrowSize.reference,\n      height: cssVars.arrowSize.reference,\n      [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,\n      [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,\n    } as const,\n\n    arrowTip: {\n      transform: placement ? ARROW_FLOATING_STYLE[placement.split(\"-\")[0]] : undefined,\n      background: cssVars.arrowBg.reference,\n      top: \"0\",\n      left: \"0\",\n      width: \"100%\",\n      height: \"100%\",\n      position: \"absolute\",\n      zIndex: \"inherit\",\n    } as const,\n\n    floating: {\n      position: strategy,\n      isolation: \"isolate\",\n      minWidth: sameWidth ? undefined : \"max-content\",\n      width: sameWidth ? \"var(--reference-width)\" : undefined,\n      maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n      maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n      top: \"0px\",\n      left: \"0px\",\n      // move off-screen if placement is not defined\n      transform: placement ? \"translate3d(var(--x), var(--y), 0)\" : \"translate3d(0, -100vh, 0)\",\n      zIndex: \"var(--z-index)\",\n    } as const,\n  }\n}\n"],"mappings":"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","names":["arrow"]}
+{"version":3,"sources":["../src/get-placement.ts","../src/get-anchor.ts","../src/middleware.ts","../src/placement.ts","../src/get-styles.ts"],"sourcesContent":["import type { AutoUpdateOptions, Middleware } from \"@floating-ui/dom\"\nimport { arrow, autoUpdate, computePosition, flip, limitShift, offset, shift, size } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { compact, isNull, noop, runIfFn } from \"@zag-js/utils\"\nimport { getAnchorElement } from \"./get-anchor\"\nimport { rectMiddleware, shiftArrowMiddleware, transformOriginMiddleware } from \"./middleware\"\nimport { getPlacementDetails } from \"./placement\"\nimport type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n  strategy: \"absolute\",\n  placement: \"bottom\",\n  listeners: true,\n  gutter: 8,\n  flip: true,\n  slide: true,\n  overlap: false,\n  sameWidth: false,\n  fitViewport: false,\n  overflowPadding: 8,\n  arrowPadding: 4,\n}\n\nfunction roundByDpr(win: Window, value: number) {\n  const dpr = win.devicePixelRatio || 1\n  return Math.round(value * dpr) / dpr\n}\n\nfunction getBoundaryMiddleware(opts: PositioningOptions) {\n  return runIfFn(opts.boundary)\n}\n\nfunction getArrowMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n  if (!arrowElement) return\n  return arrow({\n    element: arrowElement,\n    padding: opts.arrowPadding,\n  })\n}\n\nfunction getOffsetMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n  if (isNull(opts.offset ?? opts.gutter)) return\n  return offset(({ placement }) => {\n    const arrowOffset = (arrowElement?.clientHeight || 0) / 2\n\n    const gutter = opts.offset?.mainAxis ?? opts.gutter\n    const mainAxis = typeof gutter === \"number\" ? gutter + arrowOffset : gutter ?? arrowOffset\n\n    const { hasAlign } = getPlacementDetails(placement)\n    const shift = !hasAlign ? opts.shift : undefined\n    const crossAxis = opts.offset?.crossAxis ?? shift\n\n    return compact({\n      crossAxis: crossAxis,\n      mainAxis: mainAxis,\n      alignmentAxis: opts.shift,\n    })\n  })\n}\n\nfunction getFlipMiddleware(opts: PositioningOptions) {\n  if (!opts.flip) return\n  return flip({\n    boundary: getBoundaryMiddleware(opts),\n    padding: opts.overflowPadding,\n    fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n  })\n}\n\nfunction getShiftMiddleware(opts: PositioningOptions) {\n  if (!opts.slide && !opts.overlap) return\n  return shift({\n    boundary: getBoundaryMiddleware(opts),\n    mainAxis: opts.slide,\n    crossAxis: opts.overlap,\n    padding: opts.overflowPadding,\n    limiter: limitShift(),\n  })\n}\n\nfunction getSizeMiddleware(opts: PositioningOptions) {\n  return size({\n    padding: opts.overflowPadding,\n    apply({ elements, rects, availableHeight, availableWidth }) {\n      const floating = elements.floating\n\n      const referenceWidth = Math.round(rects.reference.width)\n      availableWidth = Math.floor(availableWidth)\n      availableHeight = Math.floor(availableHeight)\n\n      floating.style.setProperty(\"--reference-width\", `${referenceWidth}px`)\n      floating.style.setProperty(\"--available-width\", `${availableWidth}px`)\n      floating.style.setProperty(\"--available-height\", `${availableHeight}px`)\n    },\n  })\n}\n\nfunction getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {\n  if (!opts) return {}\n  if (opts === true) {\n    return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true }\n  }\n  return opts\n}\n\nfunction getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n  const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)\n  if (!floating || !reference) return\n  const options = Object.assign({}, defaultOptions, opts)\n\n  /* -----------------------------------------------------------------------------\n   * The middleware stack\n   * -----------------------------------------------------------------------------*/\n\n  const arrowEl = floating.querySelector<HTMLElement>(\"[data-part=arrow]\")\n\n  const middleware: (Middleware | undefined)[] = [\n    getOffsetMiddleware(arrowEl, options),\n    getFlipMiddleware(options),\n    getShiftMiddleware(options),\n    getArrowMiddleware(arrowEl, options),\n    shiftArrowMiddleware(arrowEl),\n    transformOriginMiddleware,\n    getSizeMiddleware(options),\n    rectMiddleware,\n  ]\n\n  /* -----------------------------------------------------------------------------\n   * The actual positioning function\n   * -----------------------------------------------------------------------------*/\n\n  const { placement, strategy, onComplete, onPositioned } = options\n\n  const updatePosition = async () => {\n    if (!reference || !floating) return\n\n    const pos = await computePosition(reference, floating, {\n      placement,\n      middleware,\n      strategy,\n    })\n\n    onComplete?.(pos)\n    onPositioned?.({ placed: true })\n\n    const win = getWindow(floating)\n    const x = roundByDpr(win, pos.x)\n    const y = roundByDpr(win, pos.y)\n\n    floating.style.setProperty(\"--x\", `${x}px`)\n    floating.style.setProperty(\"--y\", `${y}px`)\n\n    const contentEl = floating.firstElementChild\n\n    if (contentEl) {\n      const zIndex = win.getComputedStyle(contentEl).zIndex\n      floating.style.setProperty(\"--z-index\", zIndex)\n    }\n  }\n\n  const update = async () => {\n    if (opts.updatePosition) {\n      await opts.updatePosition({ updatePosition })\n      onPositioned?.({ placed: true })\n    } else {\n      await updatePosition()\n    }\n  }\n\n  const autoUpdateOptions = getAutoUpdateOptions(options.listeners)\n  const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop\n\n  update()\n\n  return () => {\n    cancelAutoUpdate?.()\n    onPositioned?.({ placed: false })\n  }\n}\n\nexport function getPlacement(\n  referenceOrFn: MaybeFn<MaybeRectElement>,\n  floatingOrFn: MaybeFn<MaybeElement>,\n  opts: PositioningOptions & { defer?: boolean } = {},\n) {\n  const { defer, ...options } = opts\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n  cleanups.push(\n    func(() => {\n      const reference = typeof referenceOrFn === \"function\" ? referenceOrFn() : referenceOrFn\n      const floating = typeof floatingOrFn === \"function\" ? floatingOrFn() : floatingOrFn\n      cleanups.push(getPlacementImpl(reference, floating, options))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import { isHTMLElement } from \"@zag-js/dom-query\"\nimport type { AnchorRect, MaybeRectElement } from \"./types\"\n\nexport function createDOMRect(x = 0, y = 0, width = 0, height = 0) {\n  if (typeof DOMRect === \"function\") {\n    return new DOMRect(x, y, width, height)\n  }\n  const rect = {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: x + width,\n    bottom: y + height,\n    left: x,\n  }\n  return { ...rect, toJSON: () => rect }\n}\n\nfunction getDOMRect(anchorRect?: AnchorRect | null) {\n  if (!anchorRect) return createDOMRect()\n  const { x, y, width, height } = anchorRect\n  return createDOMRect(x, y, width, height)\n}\n\nexport function getAnchorElement(\n  anchorElement: MaybeRectElement,\n  getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null,\n) {\n  return {\n    contextElement: isHTMLElement(anchorElement) ? anchorElement : undefined,\n    getBoundingClientRect: () => {\n      const anchor = anchorElement\n      const anchorRect = getAnchorRect?.(anchor)\n      if (anchorRect || !anchor) {\n        return getDOMRect(anchorRect)\n      }\n      return anchor.getBoundingClientRect()\n    },\n  }\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\nimport type { PlacementSide } from \"./types\"\n\n/* -----------------------------------------------------------------------------\n * Shared middleware utils\n * -----------------------------------------------------------------------------*/\n\nconst toVar = (value: string) => ({ variable: value, reference: `var(${value})` })\n\nexport const cssVars = {\n  arrowSize: toVar(\"--arrow-size\"),\n  arrowSizeHalf: toVar(\"--arrow-size-half\"),\n  arrowBg: toVar(\"--arrow-background\"),\n  transformOrigin: toVar(\"--transform-origin\"),\n  arrowOffset: toVar(\"--arrow-offset\"),\n}\n\n/* -----------------------------------------------------------------------------\n * Transform Origin Middleware\n * -----------------------------------------------------------------------------*/\n\nconst getTransformOrigin = (arrow?: Partial<Coords>) => ({\n  top: \"bottom center\",\n  \"top-start\": arrow ? `${arrow.x}px bottom` : \"left bottom\",\n  \"top-end\": arrow ? `${arrow.x}px bottom` : \"right bottom\",\n  bottom: \"top center\",\n  \"bottom-start\": arrow ? `${arrow.x}px top` : \"top left\",\n  \"bottom-end\": arrow ? `${arrow.x}px top` : \"top right\",\n  left: \"right center\",\n  \"left-start\": arrow ? `right ${arrow.y}px` : \"right top\",\n  \"left-end\": arrow ? `right ${arrow.y}px` : \"right bottom\",\n  right: \"left center\",\n  \"right-start\": arrow ? `left ${arrow.y}px` : \"left top\",\n  \"right-end\": arrow ? `left ${arrow.y}px` : \"left bottom\",\n})\n\nexport const transformOriginMiddleware: Middleware = {\n  name: \"transformOrigin\",\n  fn({ placement, elements, middlewareData }) {\n    const { arrow } = middlewareData\n    const transformOrigin = getTransformOrigin(arrow)[placement]\n\n    const { floating } = elements\n    floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin)\n\n    return {\n      data: { transformOrigin },\n    }\n  },\n}\n\n/* -----------------------------------------------------------------------------\n * Rect Middleware (to expose the rect data)\n * -----------------------------------------------------------------------------*/\n\nexport const rectMiddleware: Middleware = {\n  name: \"rects\",\n  fn({ rects }) {\n    return {\n      data: rects,\n    }\n  },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\nexport const shiftArrowMiddleware = (arrowEl: HTMLElement | null): Middleware | undefined => {\n  if (!arrowEl) return\n  return {\n    name: \"shiftArrow\",\n    fn({ placement, middlewareData }) {\n      if (!middlewareData.arrow) return {}\n      const { x, y } = middlewareData.arrow\n      const dir = placement.split(\"-\")[0] as PlacementSide\n\n      Object.assign(arrowEl.style, {\n        left: x != null ? `${x}px` : \"\",\n        top: y != null ? `${y}px` : \"\",\n        [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n      })\n\n      return {}\n    },\n  }\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport type { PlacementAlign, PlacementSide } from \"./types\"\n\nexport function isValidPlacement(v: string): v is Placement {\n  return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)\n}\n\nexport function getPlacementDetails(placement: Placement) {\n  const [side, align] = placement.split(\"-\") as [PlacementSide, PlacementAlign | undefined]\n  return { side, align, hasAlign: align != null }\n}\n\nexport function getPlacementSide(placement: Placement): PlacementSide {\n  return placement.split(\"-\")[0] as PlacementSide\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\nimport type { PositioningOptions } from \"./types\"\n\nexport interface GetPlacementStylesOptions {\n  placement?: Placement\n}\n\nconst ARROW_FLOATING_STYLE = {\n  bottom: \"rotate(45deg)\",\n  left: \"rotate(135deg)\",\n  top: \"rotate(225deg)\",\n  right: \"rotate(315deg)\",\n} as const\n\nexport function getPlacementStyles(\n  options: Pick<PositioningOptions, \"placement\" | \"sameWidth\" | \"fitViewport\" | \"strategy\"> = {},\n) {\n  const { placement, sameWidth, fitViewport, strategy = \"absolute\" } = options\n\n  return {\n    arrow: {\n      position: \"absolute\",\n      width: cssVars.arrowSize.reference,\n      height: cssVars.arrowSize.reference,\n      [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,\n      [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,\n    } as const,\n\n    arrowTip: {\n      transform: placement ? ARROW_FLOATING_STYLE[placement.split(\"-\")[0]] : undefined,\n      background: cssVars.arrowBg.reference,\n      top: \"0\",\n      left: \"0\",\n      width: \"100%\",\n      height: \"100%\",\n      position: \"absolute\",\n      zIndex: \"inherit\",\n    } as const,\n\n    floating: {\n      position: strategy,\n      isolation: \"isolate\",\n      minWidth: sameWidth ? undefined : \"max-content\",\n      width: sameWidth ? \"var(--reference-width)\" : undefined,\n      maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n      maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n      top: \"0px\",\n      left: \"0px\",\n      // move off-screen if placement is not defined\n      transform: placement ? \"translate3d(var(--x), var(--y), 0)\" : \"translate3d(0, -100vh, 0)\",\n      zIndex: \"var(--z-index)\",\n    } as const,\n  }\n}\n"],"mappings":"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","names":["arrow","shift"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popper",
-  "version": "0.49.0",
+  "version": "0.51.0",
   "description": "Dynamic positioning logic for ui machines",
   "keywords": [
     "js",
@@ -23,9 +23,9 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@floating-ui/dom": "1.6.3",
-    "@zag-js/dom-query": "0.49.0",
-    "@zag-js/utils": "0.49.0"
+    "@floating-ui/dom": "1.6.5",
+    "@zag-js/dom-query": "0.51.0",
+    "@zag-js/utils": "0.51.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/get-placement.ts

@@ -1,9 +1,9 @@
 import type { AutoUpdateOptions, Middleware } from "@floating-ui/dom"
-import { arrow, autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom"
+import { arrow, autoUpdate, computePosition, flip, limitShift, offset, shift, size } from "@floating-ui/dom"
 import { getWindow, raf } from "@zag-js/dom-query"
 import { compact, isNull, noop, runIfFn } from "@zag-js/utils"
 import { getAnchorElement } from "./get-anchor"
-import { __rects, __shiftArrow, __transformOrigin } from "./middleware"
+import { rectMiddleware, shiftArrowMiddleware, transformOriginMiddleware } from "./middleware"
 import { getPlacementDetails } from "./placement"
 import type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from "./types"
 
@@ -21,16 +21,16 @@ const defaultOptions: PositioningOptions = {
   arrowPadding: 4,
 }
 
-function __dpr(win: Window, value: number) {
+function roundByDpr(win: Window, value: number) {
   const dpr = win.devicePixelRatio || 1
   return Math.round(value * dpr) / dpr
 }
 
-function __boundary(opts: PositioningOptions) {
+function getBoundaryMiddleware(opts: PositioningOptions) {
   return runIfFn(opts.boundary)
 }
 
-function __arrow(arrowElement: HTMLElement | null, opts: PositioningOptions) {
+function getArrowMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {
   if (!arrowElement) return
   return arrow({
     element: arrowElement,
@@ -38,7 +38,7 @@ function __arrow(arrowElement: HTMLElement | null, opts: PositioningOptions) {
   })
 }
 
-function __offset(arrowElement: HTMLElement | null, opts: PositioningOptions) {
+function getOffsetMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {
   if (isNull(opts.offset ?? opts.gutter)) return
   return offset(({ placement }) => {
     const arrowOffset = (arrowElement?.clientHeight || 0) / 2
@@ -47,35 +47,38 @@ function __offset(arrowElement: HTMLElement | null, opts: PositioningOptions) {
     const mainAxis = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset
 
     const { hasAlign } = getPlacementDetails(placement)
+    const shift = !hasAlign ? opts.shift : undefined
+    const crossAxis = opts.offset?.crossAxis ?? shift
 
     return compact({
-      crossAxis: hasAlign ? opts.shift : opts.offset?.crossAxis,
+      crossAxis: crossAxis,
       mainAxis: mainAxis,
       alignmentAxis: opts.shift,
     })
   })
 }
 
-function __flip(opts: PositioningOptions) {
+function getFlipMiddleware(opts: PositioningOptions) {
   if (!opts.flip) return
   return flip({
-    boundary: __boundary(opts),
+    boundary: getBoundaryMiddleware(opts),
     padding: opts.overflowPadding,
     fallbackPlacements: opts.flip === true ? undefined : opts.flip,
   })
 }
 
-function __shift(opts: PositioningOptions) {
+function getShiftMiddleware(opts: PositioningOptions) {
   if (!opts.slide && !opts.overlap) return
   return shift({
-    boundary: __boundary(opts),
+    boundary: getBoundaryMiddleware(opts),
     mainAxis: opts.slide,
     crossAxis: opts.overlap,
     padding: opts.overflowPadding,
+    limiter: limitShift(),
   })
 }
 
-function __size(opts: PositioningOptions) {
+function getSizeMiddleware(opts: PositioningOptions) {
   return size({
     padding: opts.overflowPadding,
     apply({ elements, rects, availableHeight, availableWidth }) {
@@ -112,14 +115,14 @@ function getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeE
   const arrowEl = floating.querySelector<HTMLElement>("[data-part=arrow]")
 
   const middleware: (Middleware | undefined)[] = [
-    __offset(arrowEl, options),
-    __flip(options),
-    __shift(options),
-    __arrow(arrowEl, options),
-    __shiftArrow(arrowEl),
-    __transformOrigin,
-    __size(options),
-    __rects,
+    getOffsetMiddleware(arrowEl, options),
+    getFlipMiddleware(options),
+    getShiftMiddleware(options),
+    getArrowMiddleware(arrowEl, options),
+    shiftArrowMiddleware(arrowEl),
+    transformOriginMiddleware,
+    getSizeMiddleware(options),
+    rectMiddleware,
   ]
 
   /* -----------------------------------------------------------------------------
@@ -141,8 +144,8 @@ function getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeE
     onPositioned?.({ placed: true })
 
     const win = getWindow(floating)
-    const x = __dpr(win, pos.x)
-    const y = __dpr(win, pos.y)
+    const x = roundByDpr(win, pos.x)
+    const y = roundByDpr(win, pos.y)
 
     floating.style.setProperty("--x", `${x}px`)
     floating.style.setProperty("--y", `${y}px`)

package/src/middleware.ts

@@ -34,7 +34,7 @@ const getTransformOrigin = (arrow?: Partial<Coords>) => ({
   "right-end": arrow ? `left ${arrow.y}px` : "left bottom",
 })
 
-export const __transformOrigin: Middleware = {
+export const transformOriginMiddleware: Middleware = {
   name: "transformOrigin",
   fn({ placement, elements, middlewareData }) {
     const { arrow } = middlewareData
@@ -53,7 +53,7 @@ export const __transformOrigin: Middleware = {
  * Rect Middleware (to expose the rect data)
  * -----------------------------------------------------------------------------*/
 
-export const __rects: Middleware = {
+export const rectMiddleware: Middleware = {
   name: "rects",
   fn({ rects }) {
     return {
@@ -66,7 +66,7 @@ export const __rects: Middleware = {
  * Arrow Middleware
  * -----------------------------------------------------------------------------*/
 
-export const __shiftArrow = (arrowEl: HTMLElement | null): Middleware | undefined => {
+export const shiftArrowMiddleware = (arrowEl: HTMLElement | null): Middleware | undefined => {
   if (!arrowEl) return
   return {
     name: "shiftArrow",