@zag-js/popper 1.34.0 → 1.35.0

package/dist/index.mjs

@@ -1,377 +1,10 @@
-import { autoUpdate, offset, flip, shift, limitShift, arrow, size, hide, computePosition } from '@floating-ui/dom';
-import { raf, isHTMLElement, getWindow, getComputedStyle } from '@zag-js/dom-query';
-import { noop, isNull, compact } from '@zag-js/utils';
-
-// src/get-placement.ts
-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 : anchorElement?.contextElement,
-    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")
+// src/index.ts
+import { getPlacement } from "./get-placement.mjs";
+import { getPlacementStyles } from "./get-styles.mjs";
+import { getPlacementSide, isValidPlacement } from "./placement.mjs";
+export {
+  getPlacement,
+  getPlacementSide,
+  getPlacementStyles,
+  isValidPlacement
 };
-var getSideAxis = (side) => side === "top" || side === "bottom" ? "y" : "x";
-function createTransformOriginMiddleware(opts, arrowEl) {
-  return {
-    name: "transformOrigin",
-    fn(state) {
-      const { elements, middlewareData, placement, rects, y } = state;
-      const side = placement.split("-")[0];
-      const axis = getSideAxis(side);
-      const arrowX = middlewareData.arrow?.x || 0;
-      const arrowY = middlewareData.arrow?.y || 0;
-      const arrowWidth = arrowEl?.clientWidth || 0;
-      const arrowHeight = arrowEl?.clientHeight || 0;
-      const transformX = arrowX + arrowWidth / 2;
-      const transformY = arrowY + arrowHeight / 2;
-      const shiftY = Math.abs(middlewareData.shift?.y || 0);
-      const halfAnchorHeight = rects.reference.height / 2;
-      const arrowOffset = arrowHeight / 2;
-      const gutter = opts.offset?.mainAxis ?? opts.gutter;
-      const sideOffsetValue = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
-      const isOverlappingAnchor = shiftY > sideOffsetValue;
-      const adjacentTransformOrigin = {
-        top: `${transformX}px calc(100% + ${sideOffsetValue}px)`,
-        bottom: `${transformX}px ${-sideOffsetValue}px`,
-        left: `calc(100% + ${sideOffsetValue}px) ${transformY}px`,
-        right: `${-sideOffsetValue}px ${transformY}px`
-      }[side];
-      const overlapTransformOrigin = `${transformX}px ${rects.reference.y + halfAnchorHeight - y}px`;
-      const useOverlap = Boolean(opts.overlap) && axis === "y" && isOverlappingAnchor;
-      elements.floating.style.setProperty(
-        cssVars.transformOrigin.variable,
-        useOverlap ? overlapTransformOrigin : adjacentTransformOrigin
-      );
-      return {
-        data: {
-          transformOrigin: useOverlap ? overlapTransformOrigin : adjacentTransformOrigin
-        }
-      };
-    }
-  };
-}
-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 {};
-    }
-  };
-};
-
-// 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 roundByDpr(win, value) {
-  const dpr = win.devicePixelRatio || 1;
-  return Math.round(value * dpr) / dpr;
-}
-function isApproximatelyEqual(a, b) {
-  return a != null && Math.abs(a - b) < 0.5;
-}
-function resolveBoundaryOption(boundary) {
-  if (typeof boundary === "function") return boundary();
-  if (boundary === "clipping-ancestors") return "clippingAncestors";
-  return boundary;
-}
-function getArrowMiddleware(arrowElement, doc, opts) {
-  const element = arrowElement || doc.createElement("div");
-  return arrow({ element, 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;
-  const boundary = resolveBoundaryOption(opts.boundary);
-  return flip({
-    ...boundary ? { boundary } : void 0,
-    padding: opts.overflowPadding,
-    fallbackPlacements: opts.flip === true ? void 0 : opts.flip
-  });
-}
-function getShiftMiddleware(opts) {
-  if (!opts.slide && !opts.overlap) return;
-  const boundary = resolveBoundaryOption(opts.boundary);
-  return shift({
-    ...boundary ? { boundary } : void 0,
-    mainAxis: opts.slide,
-    crossAxis: opts.overlap,
-    padding: opts.overflowPadding,
-    limiter: limitShift()
-  });
-}
-function getSizeMiddleware(opts) {
-  if (opts.sizeMiddleware === false && !opts.sameWidth && !opts.fitViewport) return;
-  let lastReferenceWidth;
-  let lastReferenceHeight;
-  let lastAvailableWidth;
-  let lastAvailableHeight;
-  return size({
-    padding: opts.overflowPadding,
-    apply({ elements, rects, availableHeight, availableWidth }) {
-      const floating = elements.floating;
-      const referenceWidth = Math.round(rects.reference.width);
-      const referenceHeight = Math.round(rects.reference.height);
-      availableWidth = Math.floor(availableWidth);
-      availableHeight = Math.floor(availableHeight);
-      if (!isApproximatelyEqual(lastReferenceWidth, referenceWidth)) {
-        floating.style.setProperty("--reference-width", `${referenceWidth}px`);
-        lastReferenceWidth = referenceWidth;
-      }
-      if (!isApproximatelyEqual(lastReferenceHeight, referenceHeight)) {
-        floating.style.setProperty("--reference-height", `${referenceHeight}px`);
-        lastReferenceHeight = referenceHeight;
-      }
-      if (!isApproximatelyEqual(lastAvailableWidth, availableWidth)) {
-        floating.style.setProperty("--available-width", `${availableWidth}px`);
-        lastAvailableWidth = availableWidth;
-      }
-      if (!isApproximatelyEqual(lastAvailableHeight, availableHeight)) {
-        floating.style.setProperty("--available-height", `${availableHeight}px`);
-        lastAvailableHeight = availableHeight;
-      }
-    }
-  });
-}
-function hideWhenDetachedMiddleware(opts) {
-  if (!opts.hideWhenDetached) return;
-  return hide({ strategy: "referenceHidden", boundary: resolveBoundaryOption(opts.boundary) ?? "clippingAncestors" });
-}
-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 anchor = opts.getAnchorElement?.() ?? referenceOrVirtual;
-  const reference = getAnchorElement(anchor, 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, floating.ownerDocument, options),
-    shiftArrowMiddleware(arrowEl),
-    createTransformOriginMiddleware(
-      { gutter: options.gutter, offset: options.offset, overlap: options.overlap },
-      arrowEl
-    ),
-    getSizeMiddleware(options),
-    hideWhenDetachedMiddleware(options),
-    rectMiddleware
-  ];
-  const { placement, strategy, onComplete, onPositioned } = options;
-  let lastX;
-  let lastY;
-  let zIndexComputed = false;
-  const updatePosition = async () => {
-    if (!reference || !floating) return;
-    const pos = await computePosition(reference, floating, {
-      placement,
-      middleware,
-      strategy
-    });
-    onComplete?.(pos);
-    const win = getWindow(floating);
-    const x = roundByDpr(win, pos.x);
-    const y = roundByDpr(win, pos.y);
-    floating.style.transform = `translate3d(${x}px, ${y}px, 0)`;
-    if (!isApproximatelyEqual(lastX, x)) {
-      floating.style.setProperty("--x", `${x}px`);
-      lastX = x;
-    }
-    if (!isApproximatelyEqual(lastY, y)) {
-      floating.style.setProperty("--y", `${y}px`);
-      lastY = y;
-    }
-    if (options.hideWhenDetached) {
-      const isHidden = pos.middlewareData.hide?.referenceHidden;
-      if (isHidden) {
-        floating.style.setProperty("visibility", "hidden");
-        floating.style.setProperty("pointer-events", "none");
-      } else {
-        floating.style.removeProperty("visibility");
-        floating.style.removeProperty("pointer-events");
-      }
-    }
-    if (!zIndexComputed) {
-      const contentEl = floating.firstElementChild;
-      if (contentEl) {
-        floating.style.setProperty("--z-index", getComputedStyle(contentEl).zIndex);
-        zIndexComputed = true;
-      }
-    }
-  };
-  const update = async () => {
-    if (opts.updatePosition) {
-      await opts.updatePosition({ updatePosition, floatingElement: floating });
-      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: {
-      // @ts-expect-error - Fix this
-      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,
-      pointerEvents: !placement ? "none" : 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 };

package/dist/middleware.d.mts

@@ -0,0 +1,35 @@
+import { Middleware } from '@floating-ui/dom';
+
+declare const cssVars: {
+    arrowSize: {
+        variable: string;
+        reference: string;
+    };
+    arrowSizeHalf: {
+        variable: string;
+        reference: string;
+    };
+    arrowBg: {
+        variable: string;
+        reference: string;
+    };
+    transformOrigin: {
+        variable: string;
+        reference: string;
+    };
+    arrowOffset: {
+        variable: string;
+        reference: string;
+    };
+};
+declare function createTransformOriginMiddleware(opts: {
+    gutter?: number | undefined;
+    offset?: {
+        mainAxis?: number | undefined;
+    } | undefined;
+    overlap?: boolean | undefined;
+}, arrowEl: HTMLElement | null): Middleware;
+declare const rectMiddleware: Middleware;
+declare const shiftArrowMiddleware: (arrowEl: HTMLElement | null) => Middleware | undefined;
+
+export { createTransformOriginMiddleware, cssVars, rectMiddleware, shiftArrowMiddleware };

package/dist/middleware.d.ts

@@ -0,0 +1,35 @@
+import { Middleware } from '@floating-ui/dom';
+
+declare const cssVars: {
+    arrowSize: {
+        variable: string;
+        reference: string;
+    };
+    arrowSizeHalf: {
+        variable: string;
+        reference: string;
+    };
+    arrowBg: {
+        variable: string;
+        reference: string;
+    };
+    transformOrigin: {
+        variable: string;
+        reference: string;
+    };
+    arrowOffset: {
+        variable: string;
+        reference: string;
+    };
+};
+declare function createTransformOriginMiddleware(opts: {
+    gutter?: number | undefined;
+    offset?: {
+        mainAxis?: number | undefined;
+    } | undefined;
+    overlap?: boolean | undefined;
+}, arrowEl: HTMLElement | null): Middleware;
+declare const rectMiddleware: Middleware;
+declare const shiftArrowMiddleware: (arrowEl: HTMLElement | null) => Middleware | undefined;
+
+export { createTransformOriginMiddleware, cssVars, rectMiddleware, shiftArrowMiddleware };

package/dist/middleware.js

@@ -0,0 +1,108 @@
+"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/middleware.ts
+var middleware_exports = {};
+__export(middleware_exports, {
+  createTransformOriginMiddleware: () => createTransformOriginMiddleware,
+  cssVars: () => cssVars,
+  rectMiddleware: () => rectMiddleware,
+  shiftArrowMiddleware: () => shiftArrowMiddleware
+});
+module.exports = __toCommonJS(middleware_exports);
+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 getSideAxis = (side) => side === "top" || side === "bottom" ? "y" : "x";
+function createTransformOriginMiddleware(opts, arrowEl) {
+  return {
+    name: "transformOrigin",
+    fn(state) {
+      const { elements, middlewareData, placement, rects, y } = state;
+      const side = placement.split("-")[0];
+      const axis = getSideAxis(side);
+      const arrowX = middlewareData.arrow?.x || 0;
+      const arrowY = middlewareData.arrow?.y || 0;
+      const arrowWidth = arrowEl?.clientWidth || 0;
+      const arrowHeight = arrowEl?.clientHeight || 0;
+      const transformX = arrowX + arrowWidth / 2;
+      const transformY = arrowY + arrowHeight / 2;
+      const shiftY = Math.abs(middlewareData.shift?.y || 0);
+      const halfAnchorHeight = rects.reference.height / 2;
+      const arrowOffset = arrowHeight / 2;
+      const gutter = opts.offset?.mainAxis ?? opts.gutter;
+      const sideOffsetValue = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
+      const isOverlappingAnchor = shiftY > sideOffsetValue;
+      const adjacentTransformOrigin = {
+        top: `${transformX}px calc(100% + ${sideOffsetValue}px)`,
+        bottom: `${transformX}px ${-sideOffsetValue}px`,
+        left: `calc(100% + ${sideOffsetValue}px) ${transformY}px`,
+        right: `${-sideOffsetValue}px ${transformY}px`
+      }[side];
+      const overlapTransformOrigin = `${transformX}px ${rects.reference.y + halfAnchorHeight - y}px`;
+      const useOverlap = Boolean(opts.overlap) && axis === "y" && isOverlappingAnchor;
+      elements.floating.style.setProperty(
+        cssVars.transformOrigin.variable,
+        useOverlap ? overlapTransformOrigin : adjacentTransformOrigin
+      );
+      return {
+        data: {
+          transformOrigin: useOverlap ? overlapTransformOrigin : adjacentTransformOrigin
+        }
+      };
+    }
+  };
+}
+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 {};
+    }
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createTransformOriginMiddleware,
+  cssVars,
+  rectMiddleware,
+  shiftArrowMiddleware
+});

package/dist/middleware.mjs

@@ -0,0 +1,80 @@
+// 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 getSideAxis = (side) => side === "top" || side === "bottom" ? "y" : "x";
+function createTransformOriginMiddleware(opts, arrowEl) {
+  return {
+    name: "transformOrigin",
+    fn(state) {
+      const { elements, middlewareData, placement, rects, y } = state;
+      const side = placement.split("-")[0];
+      const axis = getSideAxis(side);
+      const arrowX = middlewareData.arrow?.x || 0;
+      const arrowY = middlewareData.arrow?.y || 0;
+      const arrowWidth = arrowEl?.clientWidth || 0;
+      const arrowHeight = arrowEl?.clientHeight || 0;
+      const transformX = arrowX + arrowWidth / 2;
+      const transformY = arrowY + arrowHeight / 2;
+      const shiftY = Math.abs(middlewareData.shift?.y || 0);
+      const halfAnchorHeight = rects.reference.height / 2;
+      const arrowOffset = arrowHeight / 2;
+      const gutter = opts.offset?.mainAxis ?? opts.gutter;
+      const sideOffsetValue = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
+      const isOverlappingAnchor = shiftY > sideOffsetValue;
+      const adjacentTransformOrigin = {
+        top: `${transformX}px calc(100% + ${sideOffsetValue}px)`,
+        bottom: `${transformX}px ${-sideOffsetValue}px`,
+        left: `calc(100% + ${sideOffsetValue}px) ${transformY}px`,
+        right: `${-sideOffsetValue}px ${transformY}px`
+      }[side];
+      const overlapTransformOrigin = `${transformX}px ${rects.reference.y + halfAnchorHeight - y}px`;
+      const useOverlap = Boolean(opts.overlap) && axis === "y" && isOverlappingAnchor;
+      elements.floating.style.setProperty(
+        cssVars.transformOrigin.variable,
+        useOverlap ? overlapTransformOrigin : adjacentTransformOrigin
+      );
+      return {
+        data: {
+          transformOrigin: useOverlap ? overlapTransformOrigin : adjacentTransformOrigin
+        }
+      };
+    }
+  };
+}
+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 {};
+    }
+  };
+};
+export {
+  createTransformOriginMiddleware,
+  cssVars,
+  rectMiddleware,
+  shiftArrowMiddleware
+};

package/dist/placement.d.mts

@@ -0,0 +1,12 @@
+import { Placement } from '@floating-ui/dom';
+import { PlacementSide, PlacementAlign } from './types.mjs';
+
+declare function isValidPlacement(v: string): v is Placement;
+declare function getPlacementDetails(placement: Placement): {
+    side: PlacementSide;
+    align: PlacementAlign | undefined;
+    hasAlign: boolean;
+};
+declare function getPlacementSide(placement: Placement): PlacementSide;
+
+export { getPlacementDetails, getPlacementSide, isValidPlacement };

package/dist/placement.d.ts

@@ -0,0 +1,12 @@
+import { Placement } from '@floating-ui/dom';
+import { PlacementSide, PlacementAlign } from './types.js';
+
+declare function isValidPlacement(v: string): v is Placement;
+declare function getPlacementDetails(placement: Placement): {
+    side: PlacementSide;
+    align: PlacementAlign | undefined;
+    hasAlign: boolean;
+};
+declare function getPlacementSide(placement: Placement): PlacementSide;
+
+export { getPlacementDetails, getPlacementSide, isValidPlacement };