@zag-js/popper 1.34.0 → 1.35.0

package/dist/get-anchor.d.mts

@@ -0,0 +1,7 @@
+import { VirtualElement } from '@floating-ui/dom';
+import { MaybeRectElement, AnchorRect } from './types.mjs';
+
+declare function createDOMRect(x?: number, y?: number, width?: number, height?: number): DOMRect;
+declare function getAnchorElement(anchorElement: MaybeRectElement, getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null): VirtualElement;
+
+export { createDOMRect, getAnchorElement };

package/dist/get-anchor.d.ts

@@ -0,0 +1,7 @@
+import { VirtualElement } from '@floating-ui/dom';
+import { MaybeRectElement, AnchorRect } from './types.js';
+
+declare function createDOMRect(x?: number, y?: number, width?: number, height?: number): DOMRect;
+declare function getAnchorElement(anchorElement: MaybeRectElement, getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null): VirtualElement;
+
+export { createDOMRect, getAnchorElement };

package/dist/get-anchor.js

@@ -0,0 +1,66 @@
+"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/get-anchor.ts
+var get_anchor_exports = {};
+__export(get_anchor_exports, {
+  createDOMRect: () => createDOMRect,
+  getAnchorElement: () => getAnchorElement
+});
+module.exports = __toCommonJS(get_anchor_exports);
+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 : anchorElement?.contextElement,
+    getBoundingClientRect: () => {
+      const anchor = anchorElement;
+      const anchorRect = getAnchorRect?.(anchor);
+      if (anchorRect || !anchor) {
+        return getDOMRect(anchorRect);
+      }
+      return anchor.getBoundingClientRect();
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createDOMRect,
+  getAnchorElement
+});

package/dist/get-anchor.mjs

@@ -0,0 +1,40 @@
+// 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 : anchorElement?.contextElement,
+    getBoundingClientRect: () => {
+      const anchor = anchorElement;
+      const anchorRect = getAnchorRect?.(anchor);
+      if (anchorRect || !anchor) {
+        return getDOMRect(anchorRect);
+      }
+      return anchor.getBoundingClientRect();
+    }
+  };
+}
+export {
+  createDOMRect,
+  getAnchorElement
+};

package/dist/get-placement.d.mts

@@ -0,0 +1,8 @@
+import { MaybeFn, MaybeRectElement, MaybeElement, PositioningOptions } from './types.mjs';
+import '@floating-ui/dom';
+
+declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floatingOrFn: MaybeFn<MaybeElement>, opts?: PositioningOptions & {
+    defer?: boolean | undefined;
+}): () => void;
+
+export { getPlacement };

package/dist/get-placement.d.ts

@@ -0,0 +1,8 @@
+import { MaybeFn, MaybeRectElement, MaybeElement, PositioningOptions } from './types.js';
+import '@floating-ui/dom';
+
+declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floatingOrFn: MaybeFn<MaybeElement>, opts?: PositioningOptions & {
+    defer?: boolean | undefined;
+}): () => void;
+
+export { getPlacement };

package/dist/get-placement.js

@@ -0,0 +1,237 @@
+"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/get-placement.ts
+var get_placement_exports = {};
+__export(get_placement_exports, {
+  getPlacement: () => getPlacement
+});
+module.exports = __toCommonJS(get_placement_exports);
+var import_dom = require("@floating-ui/dom");
+var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
+var import_get_anchor = require("./get-anchor.cjs");
+var import_middleware = require("./middleware.cjs");
+var import_placement = require("./placement.cjs");
+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 (0, import_dom.arrow)({ element, 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 } = (0, import_placement.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;
+  const boundary = resolveBoundaryOption(opts.boundary);
+  return (0, import_dom.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 (0, import_dom.shift)({
+    ...boundary ? { boundary } : void 0,
+    mainAxis: opts.slide,
+    crossAxis: opts.overlap,
+    padding: opts.overflowPadding,
+    limiter: (0, import_dom.limitShift)()
+  });
+}
+function getSizeMiddleware(opts) {
+  if (opts.sizeMiddleware === false && !opts.sameWidth && !opts.fitViewport) return;
+  let lastReferenceWidth;
+  let lastReferenceHeight;
+  let lastAvailableWidth;
+  let lastAvailableHeight;
+  return (0, import_dom.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 (0, import_dom.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 = (0, import_get_anchor.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),
+    (0, import_middleware.shiftArrowMiddleware)(arrowEl),
+    (0, import_middleware.createTransformOriginMiddleware)(
+      { gutter: options.gutter, offset: options.offset, overlap: options.overlap },
+      arrowEl
+    ),
+    getSizeMiddleware(options),
+    hideWhenDetachedMiddleware(options),
+    import_middleware.rectMiddleware
+  ];
+  const { placement, strategy, onComplete, onPositioned } = options;
+  let lastX;
+  let lastY;
+  let zIndexComputed = false;
+  const updatePosition = async () => {
+    if (!reference || !floating) return;
+    const pos = await (0, import_dom.computePosition)(reference, floating, {
+      placement,
+      middleware,
+      strategy
+    });
+    onComplete?.(pos);
+    const win = (0, import_dom_query.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", (0, import_dom_query.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 ? (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_query.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?.());
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getPlacement
+});

package/dist/get-placement.mjs

@@ -0,0 +1,212 @@
+// src/get-placement.ts
+import { arrow, autoUpdate, computePosition, flip, hide, limitShift, offset, shift, size } from "@floating-ui/dom";
+import { getComputedStyle, getWindow, raf } from "@zag-js/dom-query";
+import { compact, isNull, noop } from "@zag-js/utils";
+import { getAnchorElement } from "./get-anchor.mjs";
+import { createTransformOriginMiddleware, rectMiddleware, shiftArrowMiddleware } from "./middleware.mjs";
+import { getPlacementDetails } from "./placement.mjs";
+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?.());
+  };
+}
+export {
+  getPlacement
+};

package/dist/get-styles.d.mts

@@ -0,0 +1,41 @@
+import { Placement } from '@floating-ui/dom';
+import { cssVars } from './middleware.mjs';
+import { PositioningOptions } from './types.mjs';
+
+interface GetPlacementStylesOptions {
+    placement?: Placement | undefined;
+}
+declare function getPlacementStyles(options?: Pick<PositioningOptions, "placement" | "sameWidth" | "fitViewport" | "strategy">): {
+    arrow: {
+        readonly [cssVars.arrowSizeHalf.variable]: `calc(${string} / 2)`;
+        readonly [cssVars.arrowOffset.variable]: `calc(${string} * -1)`;
+        readonly position: "absolute";
+        readonly width: string;
+        readonly height: string;
+    };
+    arrowTip: {
+        readonly transform: any;
+        readonly background: string;
+        readonly top: "0";
+        readonly left: "0";
+        readonly width: "100%";
+        readonly height: "100%";
+        readonly position: "absolute";
+        readonly zIndex: "inherit";
+    };
+    floating: {
+        readonly position: "absolute" | "fixed";
+        readonly isolation: "isolate";
+        readonly minWidth: "max-content" | undefined;
+        readonly width: "var(--reference-width)" | undefined;
+        readonly maxWidth: "var(--available-width)" | undefined;
+        readonly maxHeight: "var(--available-height)" | undefined;
+        readonly pointerEvents: "none" | undefined;
+        readonly top: "0px";
+        readonly left: "0px";
+        readonly transform: "translate3d(var(--x), var(--y), 0)" | "translate3d(0, -100vh, 0)";
+        readonly zIndex: "var(--z-index)";
+    };
+};
+
+export { type GetPlacementStylesOptions, getPlacementStyles };

package/dist/get-styles.d.ts

@@ -0,0 +1,41 @@
+import { Placement } from '@floating-ui/dom';
+import { cssVars } from './middleware.js';
+import { PositioningOptions } from './types.js';
+
+interface GetPlacementStylesOptions {
+    placement?: Placement | undefined;
+}
+declare function getPlacementStyles(options?: Pick<PositioningOptions, "placement" | "sameWidth" | "fitViewport" | "strategy">): {
+    arrow: {
+        readonly [cssVars.arrowSizeHalf.variable]: `calc(${string} / 2)`;
+        readonly [cssVars.arrowOffset.variable]: `calc(${string} * -1)`;
+        readonly position: "absolute";
+        readonly width: string;
+        readonly height: string;
+    };
+    arrowTip: {
+        readonly transform: any;
+        readonly background: string;
+        readonly top: "0";
+        readonly left: "0";
+        readonly width: "100%";
+        readonly height: "100%";
+        readonly position: "absolute";
+        readonly zIndex: "inherit";
+    };
+    floating: {
+        readonly position: "absolute" | "fixed";
+        readonly isolation: "isolate";
+        readonly minWidth: "max-content" | undefined;
+        readonly width: "var(--reference-width)" | undefined;
+        readonly maxWidth: "var(--available-width)" | undefined;
+        readonly maxHeight: "var(--available-height)" | undefined;
+        readonly pointerEvents: "none" | undefined;
+        readonly top: "0px";
+        readonly left: "0px";
+        readonly transform: "translate3d(var(--x), var(--y), 0)" | "translate3d(0, -100vh, 0)";
+        readonly zIndex: "var(--z-index)";
+    };
+};
+
+export { type GetPlacementStylesOptions, getPlacementStyles };