@oprt/react 0.0.0-stage → 0.2.0

package/dist/PlaybackControls/PlaybackControls.js

@@ -0,0 +1,289 @@
+"use client";
+
+// src/PlaybackControls/PlaybackControls.tsx
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import {
+  forwardRef,
+  useId,
+  useImperativeHandle,
+  useMemo,
+  useRef
+} from "react";
+import { useLocale } from "react-aria-components";
+import { Button } from "../Button/Button.js";
+import { Select, SelectOption } from "../Select/Select.js";
+import { Slider } from "../Slider/Slider.js";
+import { joinIds } from "../_internal/fieldIds.js";
+import { formatUtcTimestamp, isValidTimestamp } from "../_internal/timestamp.js";
+import { useRestoreFocusOnRemoval } from "../_internal/useRestoreFocusOnRemoval.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var rootStyles = cva(
+  "flex min-w-0 flex-col gap-2u font-sans text-oprt-text outline-hidden focus-visible:shadow-oprt-focus"
+);
+var timestampStyles = "font-mono text-oprt-base tabular-nums break-words";
+var defaultRates = [0.5, 1, 2, 4];
+var validTime = (value) => isValidTimestamp(value);
+var formatTime = (value) => formatUtcTimestamp(value, { precision: "milliseconds" }) ?? "Unknown";
+var validRate = (rate) => Number.isFinite(rate) && rate > 0;
+var readableSteps = [
+  1,
+  10,
+  50,
+  100,
+  500,
+  1e3,
+  5e3,
+  1e4,
+  3e4,
+  6e4,
+  3e5,
+  6e5,
+  18e5,
+  36e5,
+  216e5,
+  432e5,
+  864e5
+];
+function keyboardStep(span) {
+  const target = span / 200;
+  let best = readableSteps[0];
+  for (const step of readableSteps) {
+    if (Math.abs(Math.log(step / target)) < Math.abs(Math.log(best / target))) best = step;
+  }
+  return best;
+}
+function firstAfter(times, value) {
+  let low = 0;
+  let high = times.length;
+  while (low < high) {
+    const middle = low + high >>> 1;
+    if (times[middle] <= value) low = middle + 1;
+    else high = middle;
+  }
+  return low;
+}
+function arrowDirection(key, rightToLeft) {
+  if (key === "ArrowUp" || key === "Up") return 1;
+  if (key === "ArrowDown" || key === "Down") return -1;
+  if (key === "ArrowRight" || key === "Right") return rightToLeft ? -1 : 1;
+  if (key === "ArrowLeft" || key === "Left") return rightToLeft ? 1 : -1;
+  return 0;
+}
+var PlaybackControls = forwardRef(
+  ({
+    start,
+    end,
+    value,
+    playing,
+    onValueChange,
+    onPlayingChange,
+    playbackRate = 1,
+    playbackRates = defaultRates,
+    onPlaybackRateChange,
+    eventTimes,
+    liveTime,
+    followingLive = false,
+    onReturnToLive,
+    disabled = false,
+    label = "Playback",
+    className,
+    "aria-describedby": describedBy,
+    onKeyDownCapture,
+    onFocusCapture,
+    onBlurCapture,
+    ...props
+  }, ref) => {
+    const descriptionId = useId();
+    const root = useRef(null);
+    useImperativeHandle(ref, () => root.current, []);
+    const previousRef = useRef(null);
+    const playRef = useRef(null);
+    const nextRef = useRef(null);
+    const { direction } = useLocale();
+    const validBounds = validTime(start) && validTime(end);
+    const validRange = validBounds && start < end;
+    const validCursor = validTime(value);
+    const inRange = validCursor && value >= start && value <= end;
+    const unavailable = !validBounds ? "Supply a valid start and end date in UTC." : start === end ? "A single timestamp is available. Playback requires a time range." : start > end ? "Start must be before end." : !validCursor ? "Invalid playback position. Supply a valid timestamp in UTC." : !inRange ? "The playback position is outside the playback range." : "";
+    const transportDisabled = disabled || !!unavailable;
+    const sliderStart = validRange ? start : 0;
+    const sliderEnd = validRange ? end : 1;
+    const displayValue = validRange && validCursor ? Math.min(end, Math.max(start, value)) : sliderStart;
+    const positionText = validRange && validCursor ? formatTime(displayValue) : validBounds && start === end ? formatTime(start) : "Unknown playback position";
+    const events = useMemo(
+      () => [
+        ...new Set(
+          (eventTimes ?? []).filter((time) => validTime(time) && time >= start && time <= end)
+        )
+      ].sort((a, b) => a - b),
+      [eventTimes, start, end]
+    );
+    const after = firstAfter(events, displayValue);
+    const next = events[after];
+    const previous = events[events[after - 1] === displayValue ? after - 2 : after - 1];
+    const rates = [...new Set(playbackRates.filter(validRate))];
+    if (validRate(playbackRate) && !rates.includes(playbackRate)) rates.push(playbackRate);
+    rates.sort((a, b) => a - b);
+    const canReturn = !!onReturnToLive && liveTime !== void 0 && validTime(liveTime);
+    const requestTime = (time) => {
+      if (transportDisabled || !validTime(time) || time < start || time > end) return;
+      onPlayingChange(false);
+      onValueChange(time);
+    };
+    const stepByKeyboard = (event) => {
+      const target = event.target;
+      if (event.shiftKey || !(target instanceof HTMLInputElement) || target.type !== "range")
+        return;
+      const sign = arrowDirection(event.key, direction === "rtl");
+      if (sign === 0 || transportDisabled || !validRange || !validCursor) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const next2 = Math.min(end, Math.max(start, displayValue + sign * keyboardStep(end - start)));
+      if (next2 !== displayValue) requestTime(next2);
+    };
+    const restoreFocus = useRestoreFocusOnRemoval(
+      root,
+      {
+        track: (element) => element === previousRef.current ? "previous" : element === nextRef.current ? "next" : "other",
+        findTarget: (which) => {
+          const usable = (button) => button?.isConnected && !button.disabled ? button : null;
+          const sibling = which === "previous" ? nextRef.current : which === "next" ? previousRef.current : null;
+          return usable(sibling) ?? usable(playRef.current) ?? root.current;
+        }
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        ref: root,
+        role: "group",
+        tabIndex: -1,
+        "aria-label": label,
+        "aria-describedby": joinIds(describedBy, unavailable ? descriptionId : void 0),
+        className: clsx(rootStyles(), className),
+        onKeyDownCapture: (event) => {
+          onKeyDownCapture?.(event);
+          stepByKeyboard(event);
+        },
+        onFocusCapture: (event) => {
+          onFocusCapture?.(event);
+          restoreFocus.onFocusCapture(event);
+        },
+        onBlurCapture: (event) => {
+          onBlurCapture?.(event);
+          restoreFocus.onBlurCapture(event);
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1u", children: [
+            eventTimes !== void 0 && /* @__PURE__ */ jsx(
+              Button,
+              {
+                ref: previousRef,
+                variant: "tertiary",
+                size: "sm",
+                disabled: transportDisabled || previous === void 0,
+                onClick: () => {
+                  if (previous !== void 0) requestTime(previous);
+                },
+                children: "Previous event"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                ref: playRef,
+                variant: "secondary",
+                size: "sm",
+                disabled: transportDisabled,
+                onClick: () => {
+                  if (!transportDisabled) onPlayingChange(!playing);
+                },
+                children: playing ? "Pause" : "Play"
+              }
+            ),
+            eventTimes !== void 0 && /* @__PURE__ */ jsx(
+              Button,
+              {
+                ref: nextRef,
+                variant: "tertiary",
+                size: "sm",
+                disabled: transportDisabled || next === void 0,
+                onClick: () => {
+                  if (next !== void 0) requestTime(next);
+                },
+                children: "Next event"
+              }
+            ),
+            onPlaybackRateChange && /* @__PURE__ */ jsx(
+              Select,
+              {
+                "aria-label": `${label} speed`,
+                size: "sm",
+                value: validRate(playbackRate) ? String(playbackRate) : "",
+                placeholder: "Unknown rate",
+                disabled: transportDisabled || rates.length === 0,
+                onValueChange: (selected) => {
+                  const rate = Number(selected);
+                  if (!transportDisabled && validRate(rate) && rates.includes(rate))
+                    onPlaybackRateChange(rate);
+                },
+                children: rates.map((rate) => /* @__PURE__ */ jsx(SelectOption, { value: String(rate), children: `${rate}\xD7` }, rate))
+              }
+            ),
+            canReturn && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "tertiary",
+                size: "sm",
+                disabled: transportDisabled || followingLive,
+                onClick: () => {
+                  if (!transportDisabled && !followingLive) onReturnToLive?.();
+                },
+                children: "Return to live"
+              }
+            ),
+            canReturn && followingLive && /* @__PURE__ */ jsx("span", { className: "text-oprt-base font-medium uppercase tracking-oprt-caps", children: "Following live" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-1u", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-oprt-base font-medium uppercase tracking-oprt-caps", children: [
+              label,
+              " position"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: timestampStyles, children: positionText })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Slider,
+            {
+              "aria-label": `${label} position`,
+              "aria-describedby": unavailable ? descriptionId : void 0,
+              min: sliderStart,
+              max: sliderEnd,
+              value: displayValue,
+              step: 1,
+              disabled: transportDisabled,
+              formatValue: validRange && validCursor ? formatTime : () => positionText,
+              onValueChange: requestTime
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-between gap-1u text-oprt-text-dim", children: [
+            /* @__PURE__ */ jsxs("span", { className: timestampStyles, children: [
+              "Start: ",
+              validTime(start) ? formatTime(start) : "Unknown"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: timestampStyles, children: [
+              "End: ",
+              validTime(end) ? formatTime(end) : "Unknown"
+            ] })
+          ] }),
+          unavailable && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "m-0 text-oprt-base text-oprt-text-dim", children: unavailable })
+        ]
+      }
+    );
+  }
+);
+PlaybackControls.displayName = "PlaybackControls";
+export {
+  PlaybackControls
+};

package/dist/PlaybackControls/PlaybackControls.manifest.js

@@ -0,0 +1,85 @@
+// src/PlaybackControls/PlaybackControls.manifest.ts
+var PlaybackControlsManifest = {
+  PlaybackControls: {
+    description: "Controlled UTC timestamp transport with a bounded scrubber, play/pause, optional event stepping, playback speed and return to a supplied live reference.",
+    props: {
+      start: {
+        type: "number",
+        required: true,
+        description: "Inclusive range start in Unix epoch milliseconds. Must be a valid date before end; zero is valid."
+      },
+      end: {
+        type: "number",
+        required: true,
+        description: "Inclusive range end in Unix epoch milliseconds. Invalid or single-point ranges disable transport with explanatory text."
+      },
+      value: {
+        type: "number",
+        required: true,
+        description: "Controlled cursor in Unix epoch milliseconds. Out-of-range values clamp for display and disable transport; invalid dates display an unknown position."
+      },
+      playing: {
+        type: "boolean",
+        required: true,
+        description: "Caller-owned playback state. The component owns no clock and makes no optimistic state changes."
+      },
+      onValueChange: {
+        type: "function",
+        required: true,
+        description: "(value: number) => void. Requests a valid in-range timestamp after requesting pause."
+      },
+      onPlayingChange: {
+        type: "function",
+        required: true,
+        description: "(playing: boolean) => void. Requests play/pause. Scrubbing and event stepping call this with false before onValueChange."
+      },
+      playbackRate: {
+        type: "number",
+        default: 1,
+        description: "Controlled positive finite speed multiplier. A valid supplied rate remains visible, in order, even when absent from playbackRates; invalid rates display Unknown rate."
+      },
+      playbackRates: {
+        type: "array",
+        description: "Readonly number array of offered speed multipliers. Defaults to [0.5, 1, 2, 4]. Non-positive/non-finite rates and duplicates are omitted. Listed in ascending order."
+      },
+      onPlaybackRateChange: {
+        type: "function",
+        description: "(rate: number) => void. Supplying this callback shows the controlled speed selector."
+      },
+      eventTimes: {
+        type: "array",
+        description: "Readonly epoch-millisecond array. Supplying it shows previous/next event buttons. Times are sorted, deduplicated and filtered to valid dates within the range; stepping skips the current time."
+      },
+      liveTime: {
+        type: "number",
+        description: "Application-supplied live reference in epoch milliseconds. May lie outside the review range; the application owns any range change."
+      },
+      followingLive: {
+        type: "boolean",
+        default: false,
+        description: "Shows Following live and disables Return to live while the caller follows its reference."
+      },
+      onReturnToLive: {
+        type: "function",
+        description: "() => void. Shows Return to live only when liveTime is a valid date. Requests no cursor, range or playing change itself."
+      },
+      disabled: {
+        type: "boolean",
+        default: false,
+        description: "Disables all transport actions and removes them from sequential keyboard navigation."
+      },
+      label: {
+        type: "string",
+        default: "Playback",
+        description: "Accessible root-group name. Also names the position slider and playback-speed selector."
+      },
+      className: { type: "string" }
+    },
+    composable_with: ["MediaFrame", "TimeRange", "EventTimeline", "Chart"],
+    never_inside: ["Button"],
+    example: "<PlaybackControls start={start} end={end} value={cursor} playing={playing} onValueChange={setCursor} onPlayingChange={setPlaying} eventTimes={eventTimes} playbackRate={rate} onPlaybackRateChange={setRate} liveTime={liveTime} followingLive={followingLive} onReturnToLive={returnToLive} />"
+  }
+};
+export {
+  PlaybackControlsManifest
+};

package/dist/PlaybackControls/index.js

@@ -0,0 +1,7 @@
+// src/PlaybackControls/index.ts
+import { PlaybackControls } from "./PlaybackControls.js";
+import { PlaybackControlsManifest } from "./PlaybackControls.manifest.js";
+export {
+  PlaybackControls,
+  PlaybackControlsManifest
+};

package/dist/Popover/Popover.js

@@ -0,0 +1,302 @@
+"use client";
+
+// src/Popover/Popover.tsx
+import { DialogTrigger, Pressable } from "react-aria-components";
+import {
+  cloneElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  version
+} from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { Button } from "../Button/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { PopoverManifest } from "./Popover.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { useMergedRefs } from "../_internal/mergeRefs.js";
+import { MotionContext, useMotion } from "../_internal/motion.js";
+import { MotionPopover } from "../_internal/MotionPopover.js";
+import { POPOVER_WIDTH, SCREEN_MARGIN, toPlacement } from "../_internal/overlay.js";
+import { useIsomorphicLayoutEffect } from "../_internal/useIsomorphicLayoutEffect.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var surfaceStyles = cva(
+  `z-50 border border-oprt-border bg-oprt-surface-1 font-sans text-oprt-base text-oprt-text ${POPOVER_WIDTH} max-h-[calc(100dvh-var(--oprt-space-4))] overflow-y-auto`
+);
+var dialogStyles = "outline-hidden p-3u focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-oprt-border-focus forced-colors:focus-visible:outline-[CanvasText]";
+function topSurface() {
+  const surfaces = document.querySelectorAll(
+    ".oprt-motion-popover:not([data-exiting]):not([inert])"
+  );
+  return surfaces[surfaces.length - 1];
+}
+var Popover = forwardRef(
+  ({
+    children,
+    content,
+    title,
+    "aria-label": ariaLabel,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    side = "bottom",
+    align = "start",
+    disabled = false,
+    className,
+    motion = "auto",
+    description,
+    returnFocusRef,
+    onCloseAutoFocus,
+    id: suppliedId,
+    ...dialogProps
+  }, ref) => {
+    const [localOpen, setLocalOpen] = useState(defaultOpen);
+    const isOpen = open ?? localOpen;
+    const [positioning, setPositioning] = useState(true);
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+    const motionState = useMotion(motion);
+    if (process.env.NODE_ENV !== "production") {
+      devValidate("Popover", PopoverManifest.Popover.props, { ...dialogProps, side, align });
+    }
+    const generatedId = useId();
+    const id = suppliedId ?? `oprt-popover-${generatedId}`;
+    const trigger = useRef(null);
+    const lastTrigger = useRef(null);
+    const dialog = useRef(null);
+    const lastDialog = useRef(null);
+    const wasOpen = useRef(false);
+    const focusFrame = useRef();
+    const focusScrollClose = useRef(false);
+    const current = useRef({ isOpen, onCloseAutoFocus, returnFocusRef });
+    current.current = { isOpen, onCloseAutoFocus, returnFocusRef };
+    const childRef = parseInt(version, 10) < 19 ? children.ref : children.props.ref;
+    const rememberTrigger = useCallback((node) => {
+      trigger.current = node;
+      if (node) lastTrigger.current = node;
+    }, []);
+    const setTrigger = useMergedRefs(rememberTrigger, childRef);
+    const rememberDialog = useCallback((node) => {
+      dialog.current = node;
+      if (node) lastDialog.current = node;
+    }, []);
+    const setDialog = useMergedRefs(rememberDialog, ref);
+    const restoreFocus = useCallback(() => {
+      const event = new Event("popovercloseautofocus", { cancelable: true });
+      current.current.onCloseAutoFocus?.(event);
+      if (event.defaultPrevented) return;
+      if (focusFrame.current !== void 0) cancelAnimationFrame(focusFrame.current);
+      focusFrame.current = requestAnimationFrame(() => {
+        focusFrame.current = void 0;
+        if (current.current.isOpen && dialog.current?.isConnected) return;
+        const active = document.activeElement;
+        if (active && active !== document.body && active.isConnected && !lastDialog.current?.contains(active))
+          return;
+        const target = lastTrigger.current?.isConnected ? lastTrigger.current : current.current.returnFocusRef?.current;
+        if (target?.isConnected) target.focus({ preventScroll: true });
+      });
+    }, []);
+    useEffect(() => {
+      if (isOpen && !wasOpen.current) {
+        if (focusFrame.current !== void 0) cancelAnimationFrame(focusFrame.current);
+        setTooltipOpen(false);
+        dialog.current?.focus({ preventScroll: true });
+      }
+      if (!isOpen && wasOpen.current) restoreFocus();
+      wasOpen.current = isOpen;
+    }, [isOpen, restoreFocus]);
+    useEffect(
+      () => () => {
+        if (wasOpen.current && !dialog.current?.isConnected) restoreFocus();
+      },
+      [restoreFocus]
+    );
+    const requestOpen = useCallback(
+      (next) => {
+        if (next && disabled) return;
+        if (!next && focusScrollClose.current) return;
+        if (open === void 0) setLocalOpen(next);
+        onOpenChange?.(next);
+      },
+      [disabled, open, onOpenChange]
+    );
+    useIsomorphicLayoutEffect(() => {
+      if (!positioning) setPositioning(true);
+    }, [positioning]);
+    useIsomorphicLayoutEffect(() => {
+      if (!isOpen) return;
+      let settlingFocus = true;
+      let explicitScroll = false;
+      let anchorRect = trigger.current?.getBoundingClientRect();
+      let scrollTask;
+      let frame;
+      const settleFocus = () => {
+        cancelAnimationFrame(frame);
+        settlingFocus = true;
+        explicitScroll = false;
+        frame = requestAnimationFrame(() => {
+          frame = requestAnimationFrame(() => {
+            settlingFocus = false;
+            anchorRect = trigger.current?.getBoundingClientRect();
+          });
+        });
+      };
+      settleFocus();
+      const focus = (event) => {
+        if (dialog.current?.contains(event.target)) settleFocus();
+      };
+      const scroll = () => {
+        const nextRect = trigger.current?.getBoundingClientRect();
+        const anchored = !explicitScroll && anchorRect && nextRect && anchorRect.width > 0 && anchorRect.height > 0 && Math.abs(anchorRect.left - nextRect.left) < 0.5 && Math.abs(anchorRect.top - nextRect.top) < 0.5 && Math.abs(anchorRect.width - nextRect.width) < 0.5 && Math.abs(anchorRect.height - nextRect.height) < 0.5;
+        if (!settlingFocus && !anchored) {
+          focusScrollClose.current = false;
+          return;
+        }
+        focusScrollClose.current = true;
+        setPositioning(false);
+        if (scrollTask !== void 0) clearTimeout(scrollTask);
+        scrollTask = setTimeout(() => {
+          focusScrollClose.current = false;
+          scrollTask = void 0;
+        }, 0);
+      };
+      const interact = () => {
+        settlingFocus = false;
+        explicitScroll = true;
+        focusScrollClose.current = false;
+      };
+      window.addEventListener("scroll", scroll, true);
+      window.addEventListener("focusin", focus, true);
+      for (const event of ["wheel", "pointerdown", "touchmove", "keydown"])
+        window.addEventListener(event, interact, true);
+      return () => {
+        cancelAnimationFrame(frame);
+        if (scrollTask !== void 0) clearTimeout(scrollTask);
+        focusScrollClose.current = false;
+        window.removeEventListener("scroll", scroll, true);
+        window.removeEventListener("focusin", focus, true);
+        for (const event of ["wheel", "pointerdown", "touchmove", "keydown"])
+          window.removeEventListener(event, interact, true);
+      };
+    }, [isOpen]);
+    useEffect(() => {
+      if (!isOpen) return;
+      let startedOutside = false;
+      const start = (event) => {
+        const surface = dialog.current?.parentElement;
+        const target = event.target;
+        startedOutside = event.button === 0 && !!surface && topSurface() === surface && !surface.contains(target) && !trigger.current?.contains(target);
+      };
+      const end = (event) => {
+        const surface = dialog.current?.parentElement;
+        const target = event.target;
+        if (startedOutside && surface && topSurface() === surface && !surface.contains(target) && !trigger.current?.contains(target))
+          requestOpen(false);
+        startedOutside = false;
+      };
+      const cancel = () => {
+        startedOutside = false;
+      };
+      document.addEventListener("pointerdown", start, true);
+      document.addEventListener("pointerup", end, true);
+      document.addEventListener("pointercancel", cancel, true);
+      return () => {
+        document.removeEventListener("pointerdown", start, true);
+        document.removeEventListener("pointerup", end, true);
+        document.removeEventListener("pointercancel", cancel, true);
+      };
+    }, [isOpen, requestOpen]);
+    const triggerElement = cloneElement(children, {
+      ref: setTrigger,
+      disabled: disabled || children.props.disabled,
+      "aria-disabled": disabled || children.props["aria-disabled"],
+      "aria-controls": isOpen ? id : void 0
+    });
+    const pressable = /* @__PURE__ */ jsx(Pressable, { isDisabled: disabled, children: triggerElement });
+    return /* @__PURE__ */ jsx(MotionContext.Provider, { value: motionState.mode, children: /* @__PURE__ */ jsxs(DialogTrigger, { isOpen, onOpenChange: requestOpen, children: [
+      /* @__PURE__ */ jsx("span", { className: "contents", ...motionState.props, children: description ? /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          content: description,
+          open: tooltipOpen && !isOpen,
+          onOpenChange: setTooltipOpen,
+          children: pressable
+        }
+      ) : pressable }),
+      /* @__PURE__ */ jsx(
+        MotionPopover,
+        {
+          motionState,
+          focusManagement: "manual",
+          isNonModal: true,
+          shouldUpdatePosition: positioning,
+          placement: toPlacement(side, align),
+          offset: 4,
+          containerPadding: SCREEN_MARGIN,
+          className: clsx(surfaceStyles(), className),
+          shouldCloseOnInteractOutside: (element) => {
+            if (trigger.current?.contains(element)) return false;
+            const surface = dialog.current?.parentElement;
+            return !!surface && topSurface() === surface;
+          },
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ...dialogProps,
+              ref: setDialog,
+              id,
+              role: "dialog",
+              tabIndex: -1,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabel ? void 0 : `${id}-title`,
+              "aria-describedby": [dialogProps["aria-describedby"], description ? `${id}-description` : void 0].filter(Boolean).join(" ") || void 0,
+              "data-oprt-popover-dialog": "",
+              className: dialogStyles,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3u mb-2u", children: [
+                  title && /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      id: `${id}-title`,
+                      className: "m-0 min-w-0 font-sans text-oprt-base font-semibold uppercase tracking-oprt-caps oprt-wrap-anywhere",
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      className: "ml-auto",
+                      onClick: () => {
+                        focusScrollClose.current = false;
+                        requestOpen(false);
+                      },
+                      children: "Close"
+                    }
+                  )
+                ] }),
+                description && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    id: `${id}-description`,
+                    className: "m-0 mb-2u text-oprt-base normal-case text-oprt-text-dim oprt-wrap-anywhere",
+                    children: description
+                  }
+                ),
+                content
+              ]
+            }
+          )
+        }
+      )
+    ] }) });
+  }
+);
+Popover.displayName = "Popover";
+export {
+  Popover
+};