@jcsoftdev/ui 0.1.6 → 0.2.0

package/dist/primitives/menu/navigation.d.ts

@@ -0,0 +1,6 @@
+export type MenuMove = "next" | "prev" | "first" | "last";
+/**
+ * Index to focus after `move`, over `count` enabled items. `current` is -1 when
+ * focus sits on the menu itself: `next` then enters at the start, `prev` at the end.
+ */
+export declare function moveIndex(count: number, current: number, move: MenuMove, loop?: boolean): number;

package/dist/primitives/menu/navigation.js

@@ -0,0 +1,12 @@
+function moveIndex(count, current, move, loop = true) {
+  if (count === 0) return -1;
+  if (move === "first") return 0;
+  if (move === "last") return count - 1;
+  if (current < 0) return move === "next" ? 0 : count - 1;
+  const next = current + (move === "next" ? 1 : -1);
+  if (next >= 0 && next < count) return next;
+  return loop ? (next + count) % count : current;
+}
+export {
+  moveIndex
+};

package/dist/primitives/menu/typeahead.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Index of the item a typeahead `search` should focus, or -1. A repeated single
+ * character ("aaa") cycles through items starting with it, beginning after
+ * `currentIndex`; a longer search keeps the current item when it still matches.
+ */
+export declare function nextTypeaheadIndex(values: readonly string[], search: string, currentIndex: number): number;

package/dist/primitives/menu/typeahead.js

@@ -0,0 +1,16 @@
+function nextTypeaheadIndex(values, search, currentIndex) {
+  if (search === "" || values.length === 0) return -1;
+  const repeated = search.length > 1 && [...search].every((char) => char === search[0]);
+  const needle = (repeated ? search[0] : search).toLowerCase();
+  const cycle = needle.length === 1;
+  const start = Math.max(currentIndex, 0);
+  for (let step = 0; step < values.length; step++) {
+    const index = (start + step) % values.length;
+    if (cycle && index === currentIndex) continue;
+    if (values[index].toLowerCase().startsWith(needle)) return index;
+  }
+  return -1;
+}
+export {
+  nextTypeaheadIndex
+};

package/dist/primitives/pointer-events-lock.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from "react";
+/**
+ * Makes everything outside layers that set `pointer-events: auto` inert to the
+ * pointer. Ref-counted; returns the release function.
+ */
+export declare function blockOutsidePointerEvents(): () => void;
+/** Whether a modal layer currently makes everything outside it inert to the pointer. */
+export declare function isPointerEventsBlocked(): boolean;
+/**
+ * Layers opened while the lock is held (a dialog or popover launched from a modal
+ * menu, a nested menu) would inherit `pointer-events: none` from `<body>`. This
+ * re-enables the pointer on the layer element itself, like Radix does for every
+ * dismissable layer above the lock holder.
+ */
+export declare function useEnabledPointerEvents(ref: RefObject<HTMLElement | null>, active: boolean): void;

package/dist/primitives/pointer-events-lock.js

@@ -0,0 +1,37 @@
+"use client";
+import { useLayoutEffect } from "react";
+import { globalSingleton } from "./global-singleton.js";
+const state = globalSingleton("@jcsoftdev/ui/pointer-events-lock", () => ({
+  count: 0,
+  previous: ""
+}));
+function blockOutsidePointerEvents() {
+  if (state.count++ === 0) {
+    state.previous = document.body.style.pointerEvents;
+    document.body.style.pointerEvents = "none";
+  }
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    if (--state.count === 0) document.body.style.pointerEvents = state.previous;
+  };
+}
+function isPointerEventsBlocked() {
+  return state.count > 0;
+}
+function useEnabledPointerEvents(ref, active) {
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!active || !node || !isPointerEventsBlocked() || node.style.pointerEvents !== "") return;
+    node.style.pointerEvents = "auto";
+    return () => {
+      if (node.style.pointerEvents === "auto") node.style.pointerEvents = "";
+    };
+  }, [ref, active]);
+}
+export {
+  blockOutsidePointerEvents,
+  isPointerEventsBlocked,
+  useEnabledPointerEvents
+};

package/dist/primitives/popover/popover.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentProps, type ReactNode } from "react";
+import * as PopperPrimitive from "../popper/popper.js";
+import { Portal } from "../portal.js";
+import { type FocusOutsideEvent, type InteractOutsideEvent, type PointerDownOutsideEvent } from "../use-dismissable-layer.js";
+export interface PopoverRootProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Traps focus, hides the page and locks scroll while open. Defaults to false. */
+    modal?: boolean;
+    children?: ReactNode;
+}
+export declare function Root({ open: openProp, defaultOpen, onOpenChange, modal, children, }: PopoverRootProps): import("react").JSX.Element;
+type ButtonProps = ComponentProps<"button"> & {
+    asChild?: boolean;
+};
+/** Positions the content against this element instead of the trigger. */
+export declare function Anchor(props: PopperPrimitive.PopperAnchorProps): import("react").JSX.Element;
+export declare function Trigger({ asChild, onClick, ref, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Close({ asChild, onClick, ...props }: ButtonProps): import("react").JSX.Element;
+export { Portal };
+export declare const Arrow: typeof PopperPrimitive.Arrow;
+export interface PopoverContentProps extends PopperPrimitive.PopperContentProps {
+    /** Keep mounted while closed, for your own animation or measurement. */
+    forceMount?: boolean;
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
+    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    onInteractOutside?: (event: InteractOutsideEvent) => void;
+}
+export declare function Content({ forceMount, ref, ...props }: PopoverContentProps): import("react").JSX.Element | null;

package/dist/primitives/popover/popover.js

@@ -0,0 +1,244 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { composeHandlers, useComposedRefs } from "../../utils/compose.js";
+import { Slot } from "../../utils/slot.js";
+import { useControllableState } from "../../utils/use-controllable-state.js";
+import { getTabbables, resolveTabOut } from "../focusable.js";
+import { hideOthers } from "../hide-others.js";
+import * as PopperPrimitive from "../popper/popper.js";
+import { Portal } from "../portal.js";
+import { lockBodyScroll } from "../scroll-lock.js";
+import {
+  useDismissableLayer
+} from "../use-dismissable-layer.js";
+import { useFocusScope } from "../use-focus-scope.js";
+import { useLayer } from "../use-layer.js";
+import { usePresence } from "../use-presence.js";
+const PopoverContext = createContext(null);
+function usePopoverContext(part) {
+  const context = useContext(PopoverContext);
+  if (!context) throw new Error(`<${part}> must be rendered inside <Popover>`);
+  return context;
+}
+const stateOf = (open) => open ? "open" : "closed";
+function Root({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  modal = false,
+  children
+}) {
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  const triggerRef = useRef(null);
+  const contentId = useId();
+  const [hasCustomAnchor, setHasCustomAnchor] = useState(false);
+  const value = useMemo(
+    () => ({ open, modal, setOpen, triggerRef, contentId, hasCustomAnchor, setHasCustomAnchor }),
+    [open, modal, setOpen, contentId, hasCustomAnchor]
+  );
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children: /* @__PURE__ */ jsx(PopperPrimitive.Root, { children }) });
+}
+function Anchor(props) {
+  const { setHasCustomAnchor } = usePopoverContext("PopoverAnchor");
+  useEffect(() => {
+    setHasCustomAnchor(true);
+    return () => setHasCustomAnchor(false);
+  }, [setHasCustomAnchor]);
+  return /* @__PURE__ */ jsx(PopperPrimitive.Anchor, { ...props });
+}
+function Trigger({ asChild, onClick, ref, ...props }) {
+  const context = usePopoverContext("PopoverTrigger");
+  const composedRef = useComposedRefs(
+    ref,
+    context.triggerRef
+  );
+  const Comp = asChild ? Slot : "button";
+  const trigger = /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: asChild ? void 0 : "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": context.open,
+      "aria-controls": context.open ? context.contentId : void 0,
+      "data-state": stateOf(context.open),
+      ...props,
+      ref: composedRef,
+      onClick: composeHandlers(onClick, () => context.setOpen(!context.open))
+    }
+  );
+  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ jsx(PopperPrimitive.Anchor, { asChild: true, children: trigger });
+}
+function Close({ asChild, onClick, ...props }) {
+  const context = usePopoverContext("PopoverClose");
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: asChild ? void 0 : "button",
+      ...props,
+      onClick: composeHandlers(onClick, () => context.setOpen(false))
+    }
+  );
+}
+const Arrow = PopperPrimitive.Arrow;
+function Content({ forceMount, ref, ...props }) {
+  const context = usePopoverContext("PopoverContent");
+  const nodeRef = useRef(null);
+  const composedRef = useComposedRefs(ref, nodeRef);
+  const mounted = usePresence(forceMount || context.open, nodeRef);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(
+    ContentImpl,
+    {
+      ...props,
+      ref: composedRef,
+      nodeRef,
+      engaged: context.open || !forceMount
+    }
+  );
+}
+function ContentImpl({
+  nodeRef,
+  engaged,
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  onEscapeKeyDown,
+  onPointerDownOutside,
+  onFocusOutside,
+  onInteractOutside,
+  onPointerDownCapture,
+  onFocusCapture,
+  onBlurCapture,
+  onKeyDown,
+  ...props
+}) {
+  const context = usePopoverContext("PopoverContent");
+  const { open, modal, setOpen, triggerRef } = context;
+  const listening = open && engaged;
+  const isTop = useLayer(listening);
+  const interactedOutside = useRef(false);
+  const pressedTrigger = useRef(false);
+  const pressedTriggerTimer = useRef(void 0);
+  const focusInTree = useRef(() => false);
+  useEffect(() => {
+    if (listening) interactedOutside.current = false;
+  }, [listening]);
+  useEffect(() => {
+    if (!engaged || !modal) return;
+    const unlock = lockBodyScroll();
+    const show = hideOthers([nodeRef.current]);
+    return () => {
+      show();
+      unlock();
+    };
+  }, [engaged, modal, nodeRef]);
+  useFocusScope({
+    ref: nodeRef,
+    active: engaged,
+    trapped: modal && open,
+    isTop,
+    allowFocus: () => focusInTree.current(),
+    onMountAutoFocus: onOpenAutoFocus,
+    onUnmountAutoFocus: (event) => {
+      onCloseAutoFocus?.(event);
+      if (event.defaultPrevented) return;
+      if (!modal && interactedOutside.current) {
+        event.preventDefault();
+        return;
+      }
+      const trigger = triggerRef.current;
+      if (trigger && document.contains(trigger)) {
+        event.preventDefault();
+        trigger.focus({ preventScroll: true });
+      }
+    }
+  });
+  const layerProps = useDismissableLayer({
+    ref: nodeRef,
+    active: listening,
+    isTop,
+    onEscapeKeyDown,
+    onPointerDownOutside: (event) => {
+      onPointerDownOutside?.(event);
+      const original = event.detail.originalEvent;
+      const contextClick = original.button === 2 || original.button === 0 && original.ctrlKey;
+      if (modal && contextClick) event.preventDefault();
+    },
+    onFocusOutside: (event) => {
+      onFocusOutside?.(event);
+      if (modal || pressedTrigger.current) event.preventDefault();
+    },
+    onInteractOutside: (event) => {
+      onInteractOutside?.(event);
+      const target = event.detail.originalEvent.target;
+      if (target && triggerRef.current?.contains(target)) {
+        event.preventDefault();
+        if (event.detail.originalEvent.type === "pointerdown") {
+          pressedTrigger.current = true;
+          window.clearTimeout(pressedTriggerTimer.current);
+          pressedTriggerTimer.current = window.setTimeout(() => {
+            pressedTrigger.current = false;
+          }, 300);
+        }
+      }
+      if (!event.defaultPrevented) interactedOutside.current = true;
+    },
+    onDismiss: () => setOpen(false)
+  });
+  focusInTree.current = layerProps.isFocusInTree;
+  useEffect(() => () => window.clearTimeout(pressedTriggerTimer.current), []);
+  const leaveWithTab = (event) => {
+    const node = nodeRef.current;
+    const trigger = triggerRef.current;
+    const active = document.activeElement;
+    if (modal || event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey) return;
+    if (!node || !trigger || !active || !node.contains(active) || !isTop()) return;
+    const items = getTabbables(node);
+    const first = items[0];
+    const last = items[items.length - 1];
+    const leavingForward = !event.shiftKey && (active === last || items.length === 0);
+    const leavingBackward = event.shiftKey && (active === first || active === node);
+    if (!leavingForward && !leavingBackward) return;
+    event.preventDefault();
+    const next = resolveTabOut(trigger, node, !leavingForward);
+    interactedOutside.current = true;
+    (next ?? trigger).focus({ preventScroll: true });
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsx(
+    PopperPrimitive.Content,
+    {
+      id: context.contentId,
+      role: "dialog",
+      "data-state": stateOf(open),
+      tabIndex: -1,
+      ...props,
+      onPointerDownCapture: composeHandlers(onPointerDownCapture, layerProps.onPointerDownCapture),
+      onFocusCapture: composeHandlers(onFocusCapture, layerProps.onFocusCapture),
+      onBlurCapture: composeHandlers(onBlurCapture, layerProps.onBlurCapture),
+      onKeyDown: composeHandlers(onKeyDown, leaveWithTab)
+    }
+  );
+}
+export {
+  Anchor,
+  Arrow,
+  Close,
+  Content,
+  Portal,
+  Root,
+  Trigger
+};

package/dist/primitives/popper/geometry.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Pure placement maths for anchored floating content. No DOM access, so it runs
+ * in node tests. All rectangles share one coordinate space (the viewport).
+ */
+export type Side = "top" | "right" | "bottom" | "left";
+export type Align = "start" | "center" | "end";
+export type Direction = "ltr" | "rtl";
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+export type Padding = number | Partial<Record<Side, number>>;
+export interface ArrowGeometry {
+    /** Length of the arrow base, along the edge of the content. */
+    width: number;
+    /** How far the arrow protrudes from the content. It is added to `sideOffset`. */
+    height: number;
+    /** Minimum distance between the arrow and the corners of the content. */
+    padding?: number;
+}
+export interface PlacementInput {
+    anchor: Rect;
+    content: Size;
+    /** Area content must stay inside (the viewport, or an intersection of elements). */
+    boundary: Rect;
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+    alignOffset?: number;
+    collisionPadding?: Padding;
+    /** Flip to the opposite side and shift along the edge to stay in the boundary. Defaults to true. */
+    avoidCollisions?: boolean;
+    /** `partial` keeps the content touching the anchor while shifting; `always` never lets go of the boundary. */
+    sticky?: "partial" | "always";
+    dir?: Direction;
+    arrow?: ArrowGeometry;
+}
+export interface Placement {
+    x: number;
+    y: number;
+    side: Side;
+    align: Align;
+    /** Free width/height for the content on the placed side, for `max-width`/`max-height`. */
+    availableWidth: number;
+    availableHeight: number;
+    /** `transform-origin` pointing at the anchor centre, in content-local pixels. */
+    transformOrigin: string;
+    /** The anchor is entirely outside the boundary (scrolled out of view). */
+    anchorHidden: boolean;
+    /** Arrow offset along the content edge (`x` for top/bottom, `y` for left/right). */
+    arrow?: {
+        x?: number;
+        y?: number;
+        centerOffset: number;
+        shouldHide: boolean;
+    };
+}
+export declare function normalizePadding(padding: Padding | undefined): Record<Side, number>;
+/** Intersection of rectangles; an empty intersection collapses to a zero-sized rect. */
+export declare function intersectRects(rects: readonly Rect[]): Rect;
+export declare function computePlacement(input: PlacementInput): Placement;

package/dist/primitives/popper/geometry.js

@@ -0,0 +1,143 @@
+const OPPOSITE = { top: "bottom", bottom: "top", left: "right", right: "left" };
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+function normalizePadding(padding) {
+  if (typeof padding === "number") {
+    return { top: padding, right: padding, bottom: padding, left: padding };
+  }
+  return {
+    top: padding?.top ?? 0,
+    right: padding?.right ?? 0,
+    bottom: padding?.bottom ?? 0,
+    left: padding?.left ?? 0
+  };
+}
+function intersectRects(rects) {
+  let left = Number.NEGATIVE_INFINITY;
+  let top = Number.NEGATIVE_INFINITY;
+  let right = Number.POSITIVE_INFINITY;
+  let bottom = Number.POSITIVE_INFINITY;
+  for (const rect of rects) {
+    left = Math.max(left, rect.x);
+    top = Math.max(top, rect.y);
+    right = Math.min(right, rect.x + rect.width);
+    bottom = Math.min(bottom, rect.y + rect.height);
+  }
+  return { x: left, y: top, width: Math.max(0, right - left), height: Math.max(0, bottom - top) };
+}
+function coordsFor(side, align, anchor, content, offset, alignOffset, dir) {
+  const rtl = dir === "rtl";
+  if (align === "center") alignOffset = 0;
+  if (side === "top" || side === "bottom") {
+    let x2;
+    if (align === "center") {
+      x2 = anchor.x + (anchor.width - content.width) / 2 + (rtl ? -alignOffset : alignOffset);
+    } else if (align === "start" !== rtl) {
+      x2 = anchor.x + alignOffset;
+    } else {
+      x2 = anchor.x + anchor.width - content.width - alignOffset;
+    }
+    const y2 = side === "bottom" ? anchor.y + anchor.height + offset : anchor.y - content.height - offset;
+    return { x: x2, y: y2 };
+  }
+  let y;
+  if (align === "center") y = anchor.y + (anchor.height - content.height) / 2 + alignOffset;
+  else if (align === "start") y = anchor.y + alignOffset;
+  else y = anchor.y + anchor.height - content.height - alignOffset;
+  const x = side === "right" ? anchor.x + anchor.width + offset : anchor.x - content.width - offset;
+  return { x, y };
+}
+function mainOverflow(side, at, content, inner) {
+  if (side === "top") return inner.top - at.y;
+  if (side === "bottom") return at.y + content.height - inner.bottom;
+  if (side === "left") return inner.left - at.x;
+  return at.x + content.width - inner.right;
+}
+function computePlacement(input) {
+  const {
+    anchor,
+    content,
+    boundary,
+    side: preferredSide = "bottom",
+    align = "center",
+    sideOffset = 0,
+    alignOffset = 0,
+    avoidCollisions = true,
+    sticky = "partial",
+    dir = "ltr",
+    arrow
+  } = input;
+  const pad = normalizePadding(input.collisionPadding);
+  const inner = {
+    left: boundary.x + pad.left,
+    top: boundary.y + pad.top,
+    right: boundary.x + boundary.width - pad.right,
+    bottom: boundary.y + boundary.height - pad.bottom
+  };
+  const offset = sideOffset + (arrow?.height ?? 0);
+  const at = (side2) => coordsFor(side2, align, anchor, content, offset, alignOffset, dir);
+  let side = preferredSide;
+  let { x, y } = at(side);
+  if (avoidCollisions) {
+    const overflow = mainOverflow(side, { x, y }, content, inner);
+    if (overflow > 0) {
+      const other = OPPOSITE[side];
+      const otherAt = at(other);
+      if (mainOverflow(other, otherAt, content, inner) < overflow) {
+        side = other;
+        ({ x, y } = otherAt);
+      }
+    }
+    if (side === "top" || side === "bottom") {
+      const shifted = clamp(x, inner.left, Math.max(inner.left, inner.right - content.width));
+      x = sticky === "partial" ? clamp(shifted, anchor.x - content.width, anchor.x + anchor.width) : shifted;
+    } else {
+      const shifted = clamp(y, inner.top, Math.max(inner.top, inner.bottom - content.height));
+      y = sticky === "partial" ? clamp(shifted, anchor.y - content.height, anchor.y + anchor.height) : shifted;
+    }
+  }
+  const horizontal = side === "top" || side === "bottom";
+  const innerWidth = Math.max(0, inner.right - inner.left);
+  const innerHeight = Math.max(0, inner.bottom - inner.top);
+  let availableWidth = innerWidth;
+  let availableHeight = innerHeight;
+  if (side === "bottom") availableHeight = inner.bottom - (anchor.y + anchor.height + offset);
+  else if (side === "top") availableHeight = anchor.y - offset - inner.top;
+  else if (side === "right") availableWidth = inner.right - (anchor.x + anchor.width + offset);
+  else availableWidth = anchor.x - offset - inner.left;
+  const centerX = anchor.x + anchor.width / 2;
+  const centerY = anchor.y + anchor.height / 2;
+  const originX = clamp(centerX - x, 0, content.width);
+  const originY = clamp(centerY - y, 0, content.height);
+  const transformOrigin = horizontal ? `${originX}px ${side === "bottom" ? "0px" : `${content.height}px`}` : `${side === "right" ? "0px" : `${content.width}px`} ${originY}px`;
+  let arrowResult;
+  if (arrow) {
+    const edgePadding = arrow.padding ?? 0;
+    const length = horizontal ? content.width : content.height;
+    const wanted = (horizontal ? centerX - x : centerY - y) - arrow.width / 2;
+    const max = Math.max(edgePadding, length - arrow.width - edgePadding);
+    const placed = clamp(wanted, edgePadding, max);
+    arrowResult = {
+      ...horizontal ? { x: placed } : { y: placed },
+      centerOffset: (horizontal ? centerX - x : centerY - y) - length / 2,
+      // The arrow cannot point at the anchor centre (clamped to a corner or content too short).
+      shouldHide: placed !== wanted || length < arrow.width + 2 * edgePadding
+    };
+  }
+  const anchorHidden = anchor.x + anchor.width <= boundary.x || anchor.x >= boundary.x + boundary.width || anchor.y + anchor.height <= boundary.y || anchor.y >= boundary.y + boundary.height;
+  return {
+    x,
+    y,
+    side,
+    align,
+    availableWidth,
+    availableHeight,
+    transformOrigin,
+    anchorHidden,
+    ...arrowResult ? { arrow: arrowResult } : {}
+  };
+}
+export {
+  computePlacement,
+  intersectRects,
+  normalizePadding
+};

package/dist/primitives/popper/popper.d.ts

@@ -0,0 +1,44 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type Align, type Direction, type Padding, type Side } from "./geometry.js";
+export declare function Root({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export interface PopperAnchorProps extends ComponentProps<"div"> {
+    asChild?: boolean;
+}
+/** The element the content is positioned against. */
+export declare function Anchor({ asChild, ref, ...props }: PopperAnchorProps): import("react").JSX.Element;
+export interface PopperContentProps extends ComponentProps<"div"> {
+    side?: Side;
+    align?: Align;
+    /** Gap between the anchor and the content, in px. */
+    sideOffset?: number;
+    /** Shift along the edge, in px. Follows the reading direction for `start`/`end`. */
+    alignOffset?: number;
+    /** Distance kept from the boundary edges. */
+    collisionPadding?: Padding;
+    /** Element(s) the content must stay inside, intersected with the viewport. Keep the reference stable. */
+    collisionBoundary?: Element | null | Array<Element | null>;
+    /** Flip and shift to avoid the boundary. Defaults to true. */
+    avoidCollisions?: boolean;
+    /** `partial` keeps the content touching the anchor while shifting. Defaults to `partial`. */
+    sticky?: "partial" | "always";
+    /** Hide the content while the anchor is scrolled out of the boundary. */
+    hideWhenDetached?: boolean;
+    /** Minimum distance between the arrow and the content corners. */
+    arrowPadding?: number;
+    /** Reading direction; read from the anchor element when omitted. */
+    dir?: Direction;
+}
+export declare function Content({ side, align, sideOffset, alignOffset, collisionPadding, collisionBoundary, avoidCollisions, sticky, hideWhenDetached, arrowPadding, dir, ref, style, ...props }: PopperContentProps): import("react").JSX.Element;
+export interface PopperArrowProps extends ComponentProps<"span"> {
+    /** Length of the base along the content edge, in px. */
+    width?: number;
+    /** Protrusion from the content edge, in px; it is added to `sideOffset`. */
+    height?: number;
+}
+/**
+ * Pointer towards the anchor. Renders a triangle filled with `currentColor`
+ * unless you pass children. Place it as the last child of `Content`.
+ */
+export declare function Arrow({ width, height, children, style, ...props }: PopperArrowProps): import("react").JSX.Element;