@ariakit/react-core 0.1.8 → 0.2.1

package/esm/__chunks/{XHOWZOKI.js → KEY2FZYW.js}

@@ -5,7 +5,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   __objRest,
   __spreadProps,

package/esm/__chunks/{JQEVJM46.js → KMIAQUPF.js}

@@ -2,7 +2,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   __spreadProps,
   __spreadValues

package/esm/__chunks/{HXGZWZML.js → KNDB2OYV.js}

@@ -5,7 +5,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useEvent
 } from "./ASYR66PQ.js";

package/esm/__chunks/{TFLZHAF5.js → KTJKD3FC.js}

@@ -5,7 +5,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   __objRest,
   __spreadProps,

package/esm/__chunks/{D6NPK2DL.js → NBC642OI.js}

@@ -2,7 +2,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useForkRef
 } from "./ASYR66PQ.js";

package/esm/__chunks/{PYEPYVON.js → NNCIS2B6.js}

@@ -5,7 +5,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useForkRef,
   useTagName

package/esm/__chunks/{5LA7CLO3.js → ODHF3YE7.js}

@@ -8,7 +8,7 @@ import {
   createElement,
   createHook,
   createMemoComponent
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useStoreState
 } from "./AV5WE37O.js";

package/esm/__chunks/{LSTZ5Q72.js → PI5KZQST.js}

@@ -1,11 +1,11 @@
 import {
   useDisclosure
-} from "./24P2K6AU.js";
+} from "./UR3V2CXC.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   __objRest,
   __spreadValues

package/esm/__chunks/{ECY3BFPU.js → PPIHKGNC.js}

@@ -5,7 +5,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useWrapElement
 } from "./ASYR66PQ.js";

package/esm/__chunks/{OQUXG6FE.js → Q4TAYJGL.js}

@@ -1,11 +1,11 @@
 import {
   useCommand
-} from "./4QNHBDVS.js";
+} from "./5KLYDORO.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useForkRef,
   useTagName

package/esm/__chunks/R35SLIEE.js

@@ -0,0 +1,21 @@
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./U2LXZPCY.js";
+
+// src/role/role.ts
+var useRole = createHook((props) => {
+  return props;
+});
+var Role = createComponent((props) => {
+  return createElement("div", props);
+});
+if (process.env.NODE_ENV !== "production") {
+  Role.displayName = "Role";
+}
+
+export {
+  useRole,
+  Role
+};

package/esm/__chunks/{JNCKMFIN.js → RGAE7WHK.js}

@@ -5,7 +5,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useId,
   useSafeLayoutEffect

package/esm/__chunks/{DIO64N2C.js → RIASES6X.js}

@@ -1,11 +1,11 @@
 import {
   useVisuallyHidden
-} from "./JQEVJM46.js";
+} from "./KMIAQUPF.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   __spreadProps,
   __spreadValues

package/esm/__chunks/{WQVVOKZA.js → RQE3AIUU.js}

@@ -1,6 +1,6 @@
 import {
   useHeading
-} from "./PYEPYVON.js";
+} from "./NNCIS2B6.js";
 import {
   DialogHeadingContext
 } from "./LNHZLQEK.js";
@@ -8,7 +8,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useId,
   useSafeLayoutEffect

package/esm/__chunks/{MERE2IT6.js → S6KGTG3E.js}

@@ -1,11 +1,11 @@
 import {
   useCompositeItem
-} from "./M32DI6TL.js";
+} from "./X4UE5ZYC.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   __objRest,
   __spreadValues

package/esm/__chunks/{AWLCMCCK.js → T3IC7FMC.js}

@@ -1,11 +1,11 @@
 import {
   useGroup
-} from "./ECY3BFPU.js";
+} from "./PPIHKGNC.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   __objRest
 } from "./4BKCJXBM.js";

package/esm/__chunks/{MR7KGB6U.js → THRMCR5V.js}

@@ -1,11 +1,11 @@
 import {
   useDialogHeading
-} from "./WQVVOKZA.js";
+} from "./RQE3AIUU.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 
 // src/popover/popover-heading.ts
 var usePopoverHeading = createHook((props) => {

package/esm/__chunks/{TSWOSEC5.js → TTOXS6BI.js}

@@ -1,6 +1,6 @@
 import {
   useButton
-} from "./OQUXG6FE.js";
+} from "./Q4TAYJGL.js";
 import {
   DialogContext
 } from "./LNHZLQEK.js";
@@ -8,7 +8,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useEvent
 } from "./ASYR66PQ.js";

package/esm/__chunks/{5ETIGB6O.js → U2LXZPCY.js}

@@ -1,5 +1,6 @@
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "./4BKCJXBM.js";
 
@@ -19,10 +20,12 @@ function createMemoComponent(render) {
   return memo(Role);
 }
 function createElement(Type, props) {
-  const _a = props, { as: As, wrapElement } = _a, rest = __objRest(_a, ["as", "wrapElement"]);
+  const _a = props, { as: As, wrapElement, render } = _a, rest = __objRest(_a, ["as", "wrapElement", "render"]);
   let element;
   if (As && typeof As !== "string") {
-    element = /* @__PURE__ */ jsx(As, __spreadValues({}, rest));
+    element = /* @__PURE__ */ jsx(As, __spreadProps(__spreadValues({}, rest), { render }));
+  } else if (render) {
+    element = render(rest);
   } else if (isRenderProp(props.children)) {
     const _b = rest, { children } = _b, otherProps = __objRest(_b, ["children"]);
     element = props.children(otherProps);

package/esm/__chunks/UJIZKMKY.js

@@ -0,0 +1,363 @@
+import {
+  useDialog
+} from "./VQ223ROI.js";
+import {
+  PopoverContext
+} from "./6GS36SYX.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./U2LXZPCY.js";
+import {
+  useEvent,
+  usePortalRef,
+  useSafeLayoutEffect,
+  useWrapElement
+} from "./ASYR66PQ.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./4BKCJXBM.js";
+
+// src/popover/popover.tsx
+import { useState } from "react";
+import { invariant } from "@ariakit/core/utils/misc";
+import {
+  arrow,
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+  size
+} from "@floating-ui/dom";
+import { jsx } from "react/jsx-runtime";
+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 __spreadProps(__spreadValues({}, 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) {
+  const contextElement = anchorElement || void 0;
+  return {
+    contextElement,
+    getBoundingClientRect: () => {
+      const anchor = anchorElement;
+      const anchorRect = getAnchorRect == null ? void 0 : getAnchorRect(anchor);
+      if (anchorRect || !anchor) {
+        return getDOMRect(anchorRect);
+      }
+      return anchor.getBoundingClientRect();
+    }
+  };
+}
+function isValidPlacement(flip2) {
+  return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(flip2);
+}
+function roundByDPR(value) {
+  const dpr = window.devicePixelRatio || 1;
+  return Math.round(value * dpr) / dpr;
+}
+function getOffsetMiddleware(arrowElement, props) {
+  return offset(({ placement }) => {
+    var _a;
+    const arrowOffset = ((arrowElement == null ? void 0 : arrowElement.clientHeight) || 0) / 2;
+    const finalGutter = typeof props.gutter === "number" ? props.gutter + arrowOffset : (_a = props.gutter) != null ? _a : arrowOffset;
+    const hasAlignment = !!placement.split("-")[1];
+    return {
+      crossAxis: !hasAlignment ? props.shift : void 0,
+      mainAxis: finalGutter,
+      alignmentAxis: props.shift
+    };
+  });
+}
+function getFlipMiddleware(props) {
+  if (props.flip === false)
+    return;
+  const fallbackPlacements = typeof props.flip === "string" ? props.flip.split(" ") : void 0;
+  invariant(
+    !fallbackPlacements || fallbackPlacements.every(isValidPlacement),
+    process.env.NODE_ENV !== "production" && "`flip` expects a spaced-delimited list of placements"
+  );
+  return flip({
+    padding: props.overflowPadding,
+    fallbackPlacements
+  });
+}
+function getShiftMiddleware(props) {
+  if (!props.slide && !props.overlap)
+    return;
+  return shift({
+    mainAxis: props.slide,
+    crossAxis: props.overlap,
+    padding: props.overflowPadding
+  });
+}
+function getSizeMiddleware(props) {
+  return size({
+    padding: props.overflowPadding,
+    apply({ elements, availableWidth, availableHeight, rects }) {
+      const wrapper = elements.floating;
+      const referenceWidth = Math.round(rects.reference.width);
+      availableWidth = Math.floor(availableWidth);
+      availableHeight = Math.floor(availableHeight);
+      wrapper.style.setProperty(
+        "--popover-anchor-width",
+        `${referenceWidth}px`
+      );
+      wrapper.style.setProperty(
+        "--popover-available-width",
+        `${availableWidth}px`
+      );
+      wrapper.style.setProperty(
+        "--popover-available-height",
+        `${availableHeight}px`
+      );
+      if (props.sameWidth) {
+        wrapper.style.width = `${referenceWidth}px`;
+      }
+      if (props.fitViewport) {
+        wrapper.style.maxWidth = `${availableWidth}px`;
+        wrapper.style.maxHeight = `${availableHeight}px`;
+      }
+    }
+  });
+}
+function getArrowMiddleware(arrowElement, props) {
+  if (!arrowElement)
+    return;
+  return arrow({
+    element: arrowElement,
+    padding: props.arrowPadding
+  });
+}
+var usePopover = createHook(
+  (_a) => {
+    var _b = _a, {
+      store,
+      modal = false,
+      portal = !!modal,
+      preserveTabOrder = true,
+      autoFocusOnShow = true,
+      wrapperProps,
+      fixed = false,
+      flip: flip2 = true,
+      shift: shift2 = 0,
+      slide = true,
+      overlap = false,
+      sameWidth = false,
+      fitViewport = false,
+      gutter,
+      arrowPadding = 4,
+      overflowPadding = 8,
+      getAnchorRect,
+      updatePosition
+    } = _b, props = __objRest(_b, [
+      "store",
+      "modal",
+      "portal",
+      "preserveTabOrder",
+      "autoFocusOnShow",
+      "wrapperProps",
+      "fixed",
+      "flip",
+      "shift",
+      "slide",
+      "overlap",
+      "sameWidth",
+      "fitViewport",
+      "gutter",
+      "arrowPadding",
+      "overflowPadding",
+      "getAnchorRect",
+      "updatePosition"
+    ]);
+    const arrowElement = store.useState("arrowElement");
+    const anchorElement = store.useState("anchorElement");
+    const popoverElement = store.useState("popoverElement");
+    const contentElement = store.useState("contentElement");
+    const placement = store.useState("placement");
+    const mounted = store.useState("mounted");
+    const rendered = store.useState("rendered");
+    const [positioned, setPositioned] = useState(false);
+    const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
+    const getAnchorRectProp = useEvent(getAnchorRect);
+    const hasCustomUpdatePosition = !!updatePosition;
+    const updatePositionProp = useEvent(updatePosition);
+    useSafeLayoutEffect(() => {
+      if (!(popoverElement == null ? void 0 : popoverElement.isConnected))
+        return;
+      popoverElement.style.setProperty(
+        "--popover-overflow-padding",
+        `${overflowPadding}px`
+      );
+      const anchor = getAnchorElement(anchorElement, getAnchorRectProp);
+      const update = async () => {
+        if (!mounted)
+          return;
+        const middleware = [
+          getOffsetMiddleware(arrowElement, { gutter, shift: shift2 }),
+          getFlipMiddleware({ flip: flip2, overflowPadding }),
+          getShiftMiddleware({ slide, overlap, overflowPadding }),
+          getArrowMiddleware(arrowElement, { arrowPadding }),
+          getSizeMiddleware({
+            sameWidth,
+            fitViewport,
+            overflowPadding
+          })
+        ];
+        const pos = await computePosition(anchor, popoverElement, {
+          placement,
+          strategy: fixed ? "fixed" : "absolute",
+          middleware
+        });
+        store.setState("currentPlacement", pos.placement);
+        setPositioned(true);
+        const x = roundByDPR(pos.x);
+        const y = roundByDPR(pos.y);
+        Object.assign(popoverElement.style, {
+          top: "0",
+          left: "0",
+          transform: `translate3d(${x}px,${y}px,0)`
+        });
+        if (arrowElement && pos.middlewareData.arrow) {
+          const { x: arrowX, y: arrowY } = pos.middlewareData.arrow;
+          const dir = pos.placement.split("-")[0];
+          Object.assign(arrowElement.style, {
+            left: arrowX != null ? `${arrowX}px` : "",
+            top: arrowY != null ? `${arrowY}px` : "",
+            [dir]: "100%"
+          });
+        }
+      };
+      return autoUpdate(
+        anchor,
+        popoverElement,
+        () => {
+          if (hasCustomUpdatePosition) {
+            updatePositionProp({ updatePosition: update });
+          } else {
+            update();
+          }
+        },
+        {
+          // JSDOM doesn't support ResizeObserver
+          elementResize: typeof ResizeObserver === "function"
+        }
+      );
+    }, [
+      store,
+      rendered,
+      popoverElement,
+      arrowElement,
+      anchorElement,
+      popoverElement,
+      placement,
+      mounted,
+      domReady,
+      fixed,
+      flip2,
+      shift2,
+      slide,
+      overlap,
+      sameWidth,
+      fitViewport,
+      gutter,
+      arrowPadding,
+      overflowPadding,
+      getAnchorRectProp,
+      hasCustomUpdatePosition,
+      updatePositionProp
+    ]);
+    useSafeLayoutEffect(() => {
+      if (!mounted)
+        return;
+      if (!domReady)
+        return;
+      if (!(popoverElement == null ? void 0 : popoverElement.isConnected))
+        return;
+      if (!(contentElement == null ? void 0 : contentElement.isConnected))
+        return;
+      const applyZIndex = () => {
+        popoverElement.style.zIndex = getComputedStyle(contentElement).zIndex;
+      };
+      applyZIndex();
+      let raf = requestAnimationFrame(() => {
+        raf = requestAnimationFrame(applyZIndex);
+      });
+      return () => cancelAnimationFrame(raf);
+    }, [mounted, domReady, popoverElement, contentElement]);
+    const position = fixed ? "fixed" : "absolute";
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(
+        "div",
+        __spreadProps(__spreadValues({
+          role: "presentation"
+        }, wrapperProps), {
+          style: __spreadValues({
+            // https://floating-ui.com/docs/computeposition#initial-layout
+            position,
+            top: 0,
+            left: 0,
+            width: "max-content"
+          }, wrapperProps == null ? void 0 : wrapperProps.style),
+          ref: store.setPopoverElement,
+          children: element
+        })
+      ),
+      [store, position, wrapperProps]
+    );
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(PopoverContext.Provider, { value: store, children: element }),
+      [store]
+    );
+    props = __spreadProps(__spreadValues({}, props), {
+      style: __spreadValues({
+        position: "relative"
+      }, props.style)
+    });
+    props = useDialog(__spreadProps(__spreadValues({
+      store,
+      modal,
+      preserveTabOrder,
+      portal,
+      autoFocusOnShow: positioned && autoFocusOnShow
+    }, props), {
+      portalRef
+    }));
+    return props;
+  }
+);
+var Popover = createComponent((props) => {
+  const htmlProps = usePopover(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  Popover.displayName = "Popover";
+}
+
+export {
+  usePopover,
+  Popover
+};

package/esm/__chunks/{24P2K6AU.js → UR3V2CXC.js}

@@ -1,11 +1,11 @@
 import {
   useButton
-} from "./OQUXG6FE.js";
+} from "./Q4TAYJGL.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useBooleanEvent,
   useEvent,

package/esm/__chunks/{PIRVQZZN.js → V47YM6O6.js}

@@ -1,11 +1,11 @@
 import {
   useDialogDismiss
-} from "./TSWOSEC5.js";
+} from "./TTOXS6BI.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 
 // src/popover/popover-dismiss.ts
 var usePopoverDismiss = createHook((props) => {

package/esm/__chunks/{NILUKB4E.js → VLR7PUBG.js}

@@ -1,11 +1,11 @@
 import {
   usePopoverDescription
-} from "./RXTFLI35.js";
+} from "./YD5EOSG3.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 
 // src/hovercard/hovercard-description.ts
 var useHovercardDescription = createHook(