@xsolla/xui-b2c-popover 0.209.0

package/web/index.mjs

@@ -0,0 +1,808 @@
+// src/Popover.tsx
+import { forwardRef, useCallback as useCallback2, useEffect as useEffect4, useRef as useRef2, useState as useState4 } from "react";
+
+// ../../foundation/primitives-web/src/Box.tsx
+import React2 from "react";
+import styled from "styled-components";
+
+// ../../foundation/primitives-web/src/filterDOMProps.ts
+import React from "react";
+
+// ../../../node_modules/@emotion/memoize/dist/memoize.esm.js
+function memoize(fn) {
+  var cache = {};
+  return function(arg) {
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+var memoize_esm_default = memoize;
+
+// ../../../node_modules/@emotion/is-prop-valid/dist/is-prop-valid.esm.js
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
+var index = memoize_esm_default(
+  function(prop) {
+    return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
+  }
+  /* Z+1 */
+);
+var is_prop_valid_esm_default = index;
+
+// ../../foundation/primitives-web/src/filterDOMProps.ts
+var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
+  // RN-only event handlers (pass isPropValid's on* pattern)
+  "onPress",
+  "onChangeText",
+  "onLayout",
+  "onMoveShouldSetResponder",
+  "onResponderGrant",
+  "onResponderMove",
+  "onResponderRelease",
+  "onResponderTerminate",
+  // SVG attributes that pass isPropValid
+  "strokeWidth",
+  // CSS properties that pass isPropValid but are used as component props
+  "overflow",
+  "opacity",
+  "cursor",
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "textDecoration",
+  // Cross-platform layout prop that Text consumes as CSS, never as an
+  // attribute. Pinned explicitly because it is now spread into the styled
+  // component rather than destructured away before it can reach the DOM.
+  "numberOfLines"
+]);
+function shouldForwardProp(key) {
+  if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;
+  return is_prop_valid_esm_default(key);
+}
+function createFilteredElement(defaultTag) {
+  const Component = React.forwardRef(
+    ({ children, elementType, ...props }, ref) => {
+      const Tag = elementType || defaultTag;
+      const htmlProps = {};
+      for (const key of Object.keys(props)) {
+        if (shouldForwardProp(key)) {
+          htmlProps[key] = props[key];
+        }
+      }
+      return React.createElement(
+        Tag,
+        { ref, ...htmlProps },
+        children
+      );
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+
+// ../../foundation/primitives-web/src/Box.tsx
+import { jsx } from "react/jsx-runtime";
+var FilteredDiv = createFilteredElement("div");
+var StyledBox = styled(FilteredDiv)`
+  display: flex;
+  box-sizing: border-box;
+  background-color: ${(props) => props.backgroundColor || "transparent"};
+  border-color: ${(props) => props.borderColor || "transparent"};
+  border-width: ${(props) => typeof props.borderWidth === "number" ? `${props.borderWidth}px` : props.borderWidth || 0};
+
+  ${(props) => props.borderBottomWidth !== void 0 && `
+    border-bottom-width: ${typeof props.borderBottomWidth === "number" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};
+    border-bottom-color: ${props.borderBottomColor || props.borderColor || "transparent"};
+    border-bottom-style: solid;
+  `}
+  ${(props) => props.borderTopWidth !== void 0 && `
+    border-top-width: ${typeof props.borderTopWidth === "number" ? `${props.borderTopWidth}px` : props.borderTopWidth};
+    border-top-color: ${props.borderTopColor || props.borderColor || "transparent"};
+    border-top-style: solid;
+  `}
+  ${(props) => props.borderLeftWidth !== void 0 && `
+    border-left-width: ${typeof props.borderLeftWidth === "number" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};
+    border-left-color: ${props.borderLeftColor || props.borderColor || "transparent"};
+    border-left-style: solid;
+  `}
+  ${(props) => props.borderRightWidth !== void 0 && `
+    border-right-width: ${typeof props.borderRightWidth === "number" ? `${props.borderRightWidth}px` : props.borderRightWidth};
+    border-right-color: ${props.borderRightColor || props.borderColor || "transparent"};
+    border-right-style: solid;
+  `}
+
+  border-style: ${(props) => props.borderStyle || (props.borderWidth || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth ? "solid" : "none")};
+  border-radius: ${(props) => typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius || 0};
+  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height || "auto"};
+  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
+  min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
+  min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
+  max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
+  max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
+
+  padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
+  ${(props) => props.paddingHorizontal && `
+    padding-left: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+    padding-right: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+  `}
+  ${(props) => props.paddingVertical && `
+    padding-top: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+    padding-bottom: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+  `}
+  ${(props) => props.paddingTop !== void 0 && `padding-top: ${typeof props.paddingTop === "number" ? `${props.paddingTop}px` : props.paddingTop};`}
+  ${(props) => props.paddingBottom !== void 0 && `padding-bottom: ${typeof props.paddingBottom === "number" ? `${props.paddingBottom}px` : props.paddingBottom};`}
+  ${(props) => props.paddingLeft !== void 0 && `padding-left: ${typeof props.paddingLeft === "number" ? `${props.paddingLeft}px` : props.paddingLeft};`}
+  ${(props) => props.paddingRight !== void 0 && `padding-right: ${typeof props.paddingRight === "number" ? `${props.paddingRight}px` : props.paddingRight};`}
+
+  margin: ${(props) => typeof props.margin === "number" ? `${props.margin}px` : props.margin || 0};
+  ${(props) => props.marginTop !== void 0 && `margin-top: ${typeof props.marginTop === "number" ? `${props.marginTop}px` : props.marginTop};`}
+  ${(props) => props.marginBottom !== void 0 && `margin-bottom: ${typeof props.marginBottom === "number" ? `${props.marginBottom}px` : props.marginBottom};`}
+  ${(props) => props.marginLeft !== void 0 && `margin-left: ${typeof props.marginLeft === "number" ? `${props.marginLeft}px` : props.marginLeft};`}
+  ${(props) => props.marginRight !== void 0 && `margin-right: ${typeof props.marginRight === "number" ? `${props.marginRight}px` : props.marginRight};`}
+
+  flex-direction: ${(props) => props.flexDirection || "column"};
+  flex-wrap: ${(props) => props.flexWrap || "nowrap"};
+  align-items: ${(props) => props.alignItems || "stretch"};
+  justify-content: ${(props) => props.justifyContent || "flex-start"};
+  cursor: ${(props) => props.cursor ? props.cursor : props.onClick || props.onPress ? "pointer" : "inherit"};
+  position: ${(props) => props.position || "static"};
+  top: ${(props) => typeof props.top === "number" ? `${props.top}px` : props.top};
+  bottom: ${(props) => typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom};
+  left: ${(props) => typeof props.left === "number" ? `${props.left}px` : props.left};
+  right: ${(props) => typeof props.right === "number" ? `${props.right}px` : props.right};
+  flex: ${(props) => props.flex};
+  flex-shrink: ${(props) => props.flexShrink ?? 1};
+  gap: ${(props) => typeof props.gap === "number" ? `${props.gap}px` : props.gap || 0};
+  align-self: ${(props) => props.alignSelf || "auto"};
+  /* Only emit overflow-x/y when explicitly set. Defaulting them to
+     visible after overflow would override the shorthand and break
+     clipping (e.g. OtherCard bottom-right promo image). */
+  overflow: ${(props) => props.overflow || "visible"};
+  ${(props) => props.overflowX != null ? `overflow-x: ${props.overflowX};` : ""}
+  ${(props) => props.overflowY != null ? `overflow-y: ${props.overflowY};` : ""}
+  z-index: ${(props) => props.zIndex};
+  opacity: ${(props) => props.opacity != null ? props.opacity : props.disabled ? 0.5 : 1};
+  pointer-events: ${(props) => props.disabled ? "none" : "auto"};
+
+  &:hover {
+    ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
+    ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
+  }
+
+  &:active {
+    ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
+  }
+`;
+var Box = React2.forwardRef(
+  ({
+    children,
+    onPress,
+    onKeyDown,
+    onKeyUp,
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-current": ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    "aria-live": ariaLive,
+    "aria-busy": ariaBusy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-pressed": ariaPressed,
+    "aria-controls": ariaControls,
+    tabIndex,
+    as,
+    src,
+    alt,
+    onError,
+    onLoad,
+    type,
+    disabled,
+    id,
+    testID,
+    "data-testid": dataTestId,
+    ...props
+  }, ref) => {
+    if (as === "img" && src) {
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: alt || "",
+          onError,
+          onLoad,
+          "data-testid": dataTestId || testID,
+          style: {
+            display: "block",
+            objectFit: "cover",
+            width: typeof props.width === "number" ? `${props.width}px` : props.width,
+            height: typeof props.height === "number" ? `${props.height}px` : props.height,
+            borderRadius: typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius,
+            position: props.position,
+            top: typeof props.top === "number" ? `${props.top}px` : props.top,
+            left: typeof props.left === "number" ? `${props.left}px` : props.left,
+            right: typeof props.right === "number" ? `${props.right}px` : props.right,
+            bottom: typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom,
+            ...props.style
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledBox,
+      {
+        ref,
+        elementType: as,
+        id,
+        type: as === "button" ? type || "button" : void 0,
+        disabled: as === "button" ? disabled : void 0,
+        onClick: onPress,
+        onKeyDown,
+        onKeyUp,
+        role,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-current": ariaCurrent,
+        "aria-disabled": ariaDisabled,
+        "aria-busy": ariaBusy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHasPopup,
+        "aria-pressed": ariaPressed,
+        "aria-controls": ariaControls,
+        "aria-live": ariaLive,
+        tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
+        "data-testid": dataTestId || testID,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// src/Popover.tsx
+import { radiusScale, useResolvedTheme } from "@xsolla/xui-core";
+
+// src/PopoverRoot.web.tsx
+import { memo, useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+import {
+  useOverlayLayer,
+  OverlayLayerProvider,
+  MODAL_LAYER_STEP
+} from "@xsolla/xui-core";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var OUTER_PADDING = 20;
+var PopoverRoot = memo(
+  ({
+    children,
+    open,
+    onExited,
+    onBackdropClick,
+    scrimColor,
+    fullScreen,
+    position,
+    animationDuration,
+    testID
+  }) => {
+    const [visible, setVisible] = useState(false);
+    const popoverLayer = useOverlayLayer() + MODAL_LAYER_STEP;
+    useEffect(() => {
+      if (!open) return;
+      const frame = requestAnimationFrame(() => setVisible(true));
+      return () => cancelAnimationFrame(frame);
+    }, [open]);
+    useEffect(() => {
+      if (open) return;
+      setVisible(false);
+      const timer = setTimeout(onExited, animationDuration);
+      return () => clearTimeout(timer);
+    }, [open, animationDuration, onExited]);
+    const locksScroll = fullScreen || Boolean(scrimColor);
+    useEffect(() => {
+      if (!locksScroll || typeof document === "undefined") return;
+      const original = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = original;
+      };
+    }, [locksScroll]);
+    if (typeof document === "undefined") return null;
+    const positioned = !fullScreen && position !== void 0;
+    return ReactDOM.createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-testid": testID,
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: popoverLayer,
+            padding: fullScreen || positioned ? 0 : OUTER_PADDING,
+            display: "flex",
+            alignItems: fullScreen ? "stretch" : "center",
+            justifyContent: "center",
+            // Without a scrim the page behind stays interactive, so the
+            // full-viewport wrapper must not swallow presses meant for it.
+            // The panel itself re-enables pointer events below.
+            pointerEvents: scrimColor ? void 0 : "none"
+          },
+          children: [
+            scrimColor && /* @__PURE__ */ jsx2(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  background: scrimColor,
+                  opacity: visible ? 1 : 0,
+                  cursor: onBackdropClick ? "pointer" : "default",
+                  transition: `opacity ${animationDuration}ms ease`
+                },
+                onClick: onBackdropClick,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                style: {
+                  position: positioned ? "absolute" : "relative",
+                  left: positioned ? position.x : void 0,
+                  top: positioned ? position.y : void 0,
+                  zIndex: 1,
+                  pointerEvents: "auto",
+                  display: "flex",
+                  maxHeight: "100%",
+                  width: fullScreen ? "100%" : void 0,
+                  opacity: visible ? 1 : 0,
+                  transform: visible ? "scale(1)" : "scale(0.95)",
+                  transition: `opacity ${animationDuration}ms ease, transform ${animationDuration}ms ease`
+                },
+                children: /* @__PURE__ */ jsx2(OverlayLayerProvider, { value: popoverLayer, children })
+              }
+            )
+          ]
+        }
+      ),
+      document.body
+    );
+  }
+);
+PopoverRoot.displayName = "PopoverRoot";
+
+// src/PopoverTitleBar.tsx
+import { memo as memo2 } from "react";
+import { IconButton } from "@xsolla/xui-button";
+import { Drag, Pin, Remove, Unpin } from "@xsolla/xui-icons-base";
+import { Typography } from "@xsolla/xui-typography";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var PopoverTitleBar = memo2(
+  ({
+    title,
+    draggable,
+    dragHandleProps,
+    pinned,
+    onPinnedChange,
+    onClose,
+    testID
+  }) => /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-testid": testID,
+      style: {
+        flexShrink: 0,
+        width: "100%",
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        cursor: draggable ? "grab" : void 0
+      },
+      ...draggable ? dragHandleProps : {},
+      children: [
+        draggable && /* @__PURE__ */ jsx3(
+          "span",
+          {
+            "data-xui-popover-drag-handle": "",
+            role: "button",
+            tabIndex: 0,
+            "aria-label": "Move popover",
+            style: { display: "inline-flex", flexShrink: 0 },
+            children: /* @__PURE__ */ jsx3(Drag, {})
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: title && /* @__PURE__ */ jsx3(Typography, { variant: "bodyLgAccent", noWrap: true, children: title }) }),
+        onPinnedChange && /* @__PURE__ */ jsx3(
+          IconButton,
+          {
+            variant: "secondary",
+            tone: "mono",
+            size: "xs",
+            icon: pinned ? /* @__PURE__ */ jsx3(Unpin, {}) : /* @__PURE__ */ jsx3(Pin, {}),
+            onPress: () => onPinnedChange(!pinned),
+            "aria-label": pinned ? "Unpin popover" : "Pin popover",
+            "aria-pressed": pinned
+          }
+        ),
+        onClose && /* @__PURE__ */ jsx3(
+          IconButton,
+          {
+            variant: "secondary",
+            tone: "mono",
+            size: "xs",
+            icon: /* @__PURE__ */ jsx3(Remove, {}),
+            onPress: onClose,
+            "aria-label": "Close popover"
+          }
+        )
+      ]
+    }
+  )
+);
+PopoverTitleBar.displayName = "PopoverTitleBar";
+
+// src/usePopoverDrag.ts
+import {
+  useCallback,
+  useEffect as useEffect2,
+  useRef,
+  useState as useState2
+} from "react";
+var KEYBOARD_STEP = 16;
+var EDGE_MARGIN = 8;
+var isInteractive = (target) => target instanceof Element && target.closest("button, a, input") !== null;
+var clampToViewport = (position, panel) => {
+  if (!panel || typeof window === "undefined") return position;
+  const { width, height } = panel.getBoundingClientRect();
+  const maxX = Math.max(EDGE_MARGIN, window.innerWidth - width - EDGE_MARGIN);
+  const maxY = Math.max(EDGE_MARGIN, window.innerHeight - height - EDGE_MARGIN);
+  return {
+    x: Math.min(Math.max(position.x, EDGE_MARGIN), maxX),
+    y: Math.min(Math.max(position.y, EDGE_MARGIN), maxY)
+  };
+};
+var usePopoverDrag = ({
+  enabled,
+  initialPosition,
+  onPositionChange
+}) => {
+  const panelRef = useRef(null);
+  const [position, setPosition] = useState2(
+    initialPosition
+  );
+  const [isDragging, setIsDragging] = useState2(false);
+  const grabOffset = useRef({ x: 0, y: 0 });
+  useEffect2(() => {
+    if (!enabled) setPosition(void 0);
+  }, [enabled]);
+  const commit = useCallback(
+    (next) => {
+      const clamped = clampToViewport(next, panelRef.current);
+      setPosition(clamped);
+      onPositionChange?.(clamped);
+    },
+    [onPositionChange]
+  );
+  const onPointerDown = useCallback(
+    (event) => {
+      if (!enabled || event.button !== 0) return;
+      if (isInteractive(event.target)) return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      event.preventDefault();
+      const rect = panel.getBoundingClientRect();
+      grabOffset.current = {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top
+      };
+      setIsDragging(true);
+    },
+    [enabled]
+  );
+  const onKeyDown = useCallback(
+    (event) => {
+      if (!enabled) return;
+      if (!(event.target instanceof Element) || !event.target.closest("[data-xui-popover-drag-handle]")) {
+        return;
+      }
+      const deltas = {
+        ArrowUp: { x: 0, y: -KEYBOARD_STEP },
+        ArrowDown: { x: 0, y: KEYBOARD_STEP },
+        ArrowLeft: { x: -KEYBOARD_STEP, y: 0 },
+        ArrowRight: { x: KEYBOARD_STEP, y: 0 }
+      };
+      const delta = deltas[event.key];
+      if (!delta) return;
+      event.preventDefault();
+      const rect = panelRef.current?.getBoundingClientRect();
+      const base = position ?? { x: rect?.left ?? 0, y: rect?.top ?? 0 };
+      commit({ x: base.x + delta.x, y: base.y + delta.y });
+    },
+    [commit, enabled, position]
+  );
+  useEffect2(() => {
+    if (!isDragging || typeof document === "undefined") return;
+    const handleMove = (event) => {
+      commit({
+        x: event.clientX - grabOffset.current.x,
+        y: event.clientY - grabOffset.current.y
+      });
+    };
+    const stop = () => setIsDragging(false);
+    document.addEventListener("pointermove", handleMove);
+    document.addEventListener("pointerup", stop);
+    document.addEventListener("pointercancel", stop);
+    return () => {
+      document.removeEventListener("pointermove", handleMove);
+      document.removeEventListener("pointerup", stop);
+      document.removeEventListener("pointercancel", stop);
+    };
+  }, [commit, isDragging]);
+  return {
+    position: enabled ? position : void 0,
+    panelRef,
+    dragHandleProps: { onPointerDown, onKeyDown },
+    isDragging
+  };
+};
+
+// src/useDeviceType.ts
+import { useEffect as useEffect3, useState as useState3 } from "react";
+var POPOVER_BREAKPOINTS = {
+  /** Widths at or below this are `mobile` (Figma: "Mobile: 320-768px"). */
+  mobileMax: 768,
+  /** Widths at or below this, but above `mobileMax`, are `tablet` (Figma: "Tablet: 769-1023px"). */
+  tabletMax: 1023
+};
+var resolveDevice = (width) => {
+  if (width <= POPOVER_BREAKPOINTS.mobileMax) return "mobile";
+  if (width <= POPOVER_BREAKPOINTS.tabletMax) return "tablet";
+  return "desktop";
+};
+var useDeviceType = (override) => {
+  const [device, setDevice] = useState3(
+    () => typeof window === "undefined" ? "desktop" : resolveDevice(window.innerWidth)
+  );
+  useEffect3(() => {
+    if (override || typeof window === "undefined") return;
+    const update = () => setDevice(resolveDevice(window.innerWidth));
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, [override]);
+  return override ?? device;
+};
+
+// src/Popover.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var FOCUSABLE_SELECTORS = 'button:not([disabled]), [href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var DEFAULT_WIDTH = 400;
+var PANEL_PADDING = 16;
+var SECTION_GAP = 24;
+var PANEL_RADIUS = radiusScale["200"];
+var BACKDROP_BLUR = "blur(24px)";
+var ANIMATION_DURATION = 200;
+var isElementVisible = (el) => {
+  if (el.offsetParent === null && getComputedStyle(el).position !== "fixed")
+    return false;
+  const style = getComputedStyle(el);
+  return style.visibility !== "hidden" && style.display !== "none";
+};
+var getFocusableElements = (container) => Array.from(
+  container.querySelectorAll(FOCUSABLE_SELECTORS)
+).filter(isElementVisible);
+var Popover = forwardRef(
+  ({
+    open = false,
+    onClose,
+    device: deviceProp,
+    width = DEFAULT_WIDTH,
+    draggable = false,
+    initialPosition,
+    onPositionChange,
+    title,
+    pinned,
+    onPinnedChange,
+    showCloseButton = true,
+    titleBar,
+    header,
+    children,
+    footer,
+    closeOnOverlayClick = true,
+    closeOnEscape = true,
+    scrim = true,
+    backgroundColor,
+    blur = true,
+    styled: styledProps,
+    initialFocusRef,
+    "aria-label": ariaLabel,
+    testID,
+    themeMode,
+    themeProductContext = "b2c"
+  }, ref) => {
+    const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+    const device = useDeviceType(deviceProp);
+    const fullScreen = device === "mobile";
+    const canDrag = draggable && !fullScreen;
+    const dismissOnScrim = closeOnOverlayClick && !pinned && !fullScreen;
+    const [mounted, setMounted] = useState4(open);
+    const dialogRef = useRef2(null);
+    const previousActiveElement = useRef2(null);
+    const { position, panelRef, dragHandleProps } = usePopoverDrag({
+      enabled: canDrag,
+      initialPosition,
+      onPositionChange
+    });
+    useEffect4(() => {
+      if (open) setMounted(true);
+    }, [open]);
+    useEffect4(() => {
+      if (!open || typeof document === "undefined") return;
+      previousActiveElement.current = document.activeElement;
+      const focusTarget = initialFocusRef?.current || dialogRef.current && getFocusableElements(dialogRef.current)[0];
+      if (focusTarget) focusTarget.focus();
+      else dialogRef.current?.focus();
+    }, [open, initialFocusRef]);
+    useEffect4(() => {
+      if (!open || !closeOnEscape || !onClose) return;
+      if (typeof document === "undefined") return;
+      const handleKeyDown2 = (event) => {
+        if (event.key === "Escape") onClose();
+      };
+      document.addEventListener("keydown", handleKeyDown2);
+      return () => document.removeEventListener("keydown", handleKeyDown2);
+    }, [open, closeOnEscape, onClose]);
+    const handleKeyDown = useCallback2((event) => {
+      if (event.key !== "Tab" || !dialogRef.current) return;
+      if (typeof document === "undefined") return;
+      const focusableElements = getFocusableElements(dialogRef.current);
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (!firstElement) {
+        event.preventDefault();
+        return;
+      }
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }, []);
+    const setPanelNode = useCallback2(
+      (node) => {
+        dialogRef.current = node;
+        panelRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [panelRef, ref]
+    );
+    const handleExited = useCallback2(() => {
+      setMounted(false);
+      previousActiveElement.current?.focus();
+    }, []);
+    if (!mounted) return null;
+    const closeControl = showCloseButton ? onClose : void 0;
+    const hasDefaultTitleBar = !titleBar && (title || closeControl || canDrag);
+    const accessibleName = ariaLabel ?? (typeof title === "string" ? title : void 0);
+    return /* @__PURE__ */ jsx4(
+      PopoverRoot,
+      {
+        open,
+        onExited: handleExited,
+        onBackdropClick: dismissOnScrim ? onClose : void 0,
+        scrimColor: scrim && !fullScreen ? theme.colors.layer?.scrim ?? "rgba(0, 0, 0, 0.75)" : void 0,
+        fullScreen,
+        position,
+        animationDuration: ANIMATION_DURATION,
+        children: /* @__PURE__ */ jsxs3(
+          Box,
+          {
+            testID,
+            ref: setPanelNode,
+            role: "dialog",
+            "aria-modal": fullScreen || scrim ? "true" : void 0,
+            "aria-label": accessibleName,
+            "data-popover-device": device,
+            "data-popover-pinned": pinned ? "true" : void 0,
+            tabIndex: -1,
+            onKeyDown: handleKeyDown,
+            style: {
+              boxSizing: "border-box",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: SECTION_GAP,
+              width: fullScreen ? "100%" : width,
+              maxWidth: "100%",
+              height: fullScreen ? "100%" : void 0,
+              maxHeight: "100%",
+              outline: "none",
+              color: theme.colors.content.primary,
+              backgroundColor: backgroundColor ?? theme.colors.background.primary,
+              paddingLeft: PANEL_PADDING,
+              paddingRight: PANEL_PADDING,
+              // The Figma mobile frame carries only a bottom inset — its top bars
+              // are full-bleed, and its children supply their own side padding.
+              // A slot component cannot assume the caller re-pads for one
+              // breakpoint, so the sides stay inset and only the top is dropped.
+              paddingTop: fullScreen ? 0 : PANEL_PADDING,
+              paddingBottom: PANEL_PADDING,
+              borderRadius: fullScreen ? 0 : PANEL_RADIUS,
+              border: fullScreen ? void 0 : `1px solid ${theme.colors.border.secondary}`,
+              boxShadow: fullScreen ? void 0 : theme.shadow.popover,
+              backdropFilter: !fullScreen && blur ? BACKDROP_BLUR : void 0,
+              ...styledProps
+            },
+            children: [
+              titleBar ?? (hasDefaultTitleBar ? /* @__PURE__ */ jsx4(
+                PopoverTitleBar,
+                {
+                  title,
+                  draggable: canDrag,
+                  dragHandleProps,
+                  pinned,
+                  onPinnedChange,
+                  onClose: closeControl,
+                  testID: testID ? `${testID}-title-bar` : void 0
+                }
+              ) : null),
+              header && /* @__PURE__ */ jsx4("div", { style: { flexShrink: 0, width: "100%" }, children: header }),
+              /* @__PURE__ */ jsx4(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    minHeight: 0,
+                    width: "100%",
+                    overflowY: "auto",
+                    overscrollBehavior: "contain"
+                  },
+                  children
+                }
+              ),
+              footer && /* @__PURE__ */ jsx4("div", { style: { flexShrink: 0, width: "100%" }, children: footer })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Popover.displayName = "Popover";
+
+// src/usePopover.ts
+import { useCallback as useCallback3, useState as useState5 } from "react";
+function usePopover(options) {
+  const [isOpen, setIsOpen] = useState5(false);
+  const open = useCallback3(() => {
+    setIsOpen(true);
+    options?.onOpen?.();
+  }, [options]);
+  const close = useCallback3(() => {
+    setIsOpen(false);
+    options?.onClose?.();
+  }, [options]);
+  const toggle = useCallback3(() => {
+    setIsOpen((previous) => {
+      if (previous) options?.onClose?.();
+      else options?.onOpen?.();
+      return !previous;
+    });
+  }, [options]);
+  return { isOpen, open, close, toggle };
+}
+export {
+  POPOVER_BREAKPOINTS,
+  Popover,
+  PopoverTitleBar,
+  resolveDevice,
+  useDeviceType,
+  usePopover,
+  usePopoverDrag
+};
+//# sourceMappingURL=index.mjs.map