@octanejs/radix 0.1.32 → 0.1.34

package/dist/cjs/Popper.cjs

@@ -0,0 +1,368 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Popper_exports = {};
+__export(Popper_exports, {
+  ALIGN_OPTIONS: () => ALIGN_OPTIONS,
+  Anchor: () => Anchor,
+  Arrow: () => Arrow,
+  Content: () => Content,
+  Popper: () => Root,
+  PopperAnchor: () => Anchor,
+  PopperArrow: () => Arrow,
+  PopperContent: () => Content,
+  Root: () => Root,
+  SIDE_OPTIONS: () => SIDE_OPTIONS,
+  createPopperScope: () => createPopperScope
+});
+module.exports = __toCommonJS(Popper_exports);
+var import_floating_ui = require("@octanejs/floating-ui");
+var import_octane = require("octane");
+var ArrowPrimitive = __toESM(require("./Arrow.cjs"), 1);
+var import_compose_refs = require("./compose-refs.cjs");
+var import_context = require("./context.cjs");
+var import_internal = require("./internal.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var import_use_size = require("./use-size.cjs");
+const SIDE_OPTIONS = ["top", "right", "bottom", "left"];
+const ALIGN_OPTIONS = ["start", "center", "end"];
+const [createPopperContext, createPopperScope] = (0, import_context.createContextScope)("Popper");
+const [PopperProvider, usePopperContext] = createPopperContext("Popper");
+const [PopperContentProvider, useContentContext] = createPopperContext("PopperContent");
+function Root(props) {
+  const slot = (0, import_internal.S)("Popper.Root");
+  const { __scopePopper, children } = props ?? {};
+  const [anchor, setAnchor] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "anchor"));
+  const [placementState, setPlacementState] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "placement")
+  );
+  return (0, import_octane.createElement)(PopperProvider, {
+    scope: __scopePopper,
+    anchor,
+    onAnchorChange: setAnchor,
+    placementState,
+    setPlacementState,
+    children
+  });
+}
+function Anchor(props) {
+  const slot = (0, import_internal.S)("Popper.Anchor");
+  const { __scopePopper, virtualRef, ref: forwardedRef, ...anchorProps } = props ?? {};
+  const context = usePopperContext("PopperAnchor", __scopePopper);
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const onAnchorChange = context.onAnchorChange;
+  const callbackRef = (0, import_octane.useCallback)(
+    (node) => {
+      ref.current = node;
+      if (node) onAnchorChange(node);
+    },
+    [onAnchorChange],
+    (0, import_internal.subSlot)(slot, "cb")
+  );
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, callbackRef, (0, import_internal.subSlot)(slot, "refs"));
+  const anchorRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "virtual"));
+  (0, import_octane.useEffect)(
+    () => {
+      if (!virtualRef) return;
+      const previousAnchor = anchorRef.current;
+      anchorRef.current = virtualRef.current;
+      if (previousAnchor !== anchorRef.current) {
+        onAnchorChange(anchorRef.current);
+      }
+    },
+    void 0,
+    (0, import_internal.subSlot)(slot, "e:virtual")
+  );
+  const sideAndAlign = context.placementState && getSideAndAlignFromPlacement(context.placementState);
+  const placedSide = sideAndAlign ? sideAndAlign[0] : void 0;
+  const placedAlign = sideAndAlign ? sideAndAlign[1] : void 0;
+  return virtualRef ? null : (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+    "data-radix-popper-side": placedSide,
+    "data-radix-popper-align": placedAlign,
+    ...anchorProps,
+    ref: composedRefs
+  });
+}
+function Content(props) {
+  const slot = (0, import_internal.S)("Popper.Content");
+  const {
+    __scopePopper,
+    side = "bottom",
+    sideOffset = 0,
+    align = "center",
+    alignOffset = 0,
+    arrowPadding = 0,
+    avoidCollisions = true,
+    collisionBoundary = [],
+    collisionPadding: collisionPaddingProp = 0,
+    sticky = "partial",
+    hideWhenDetached = false,
+    updatePositionStrategy = "optimized",
+    onPlaced,
+    ref: forwardedRef,
+    ...contentProps
+  } = props ?? {};
+  const context = usePopperContext("PopperContent", __scopePopper);
+  const [content, setContent] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "content"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setContent, (0, import_internal.subSlot)(slot, "refs"));
+  const [arrow, setArrow] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "arrow"));
+  const arrowSize = (0, import_use_size.useSize)(arrow, (0, import_internal.subSlot)(slot, "arrowSize"));
+  const arrowWidth = arrowSize?.width ?? 0;
+  const arrowHeight = arrowSize?.height ?? 0;
+  const desiredPlacement = side + (align !== "center" ? "-" + align : "");
+  const collisionPadding = typeof collisionPaddingProp === "number" ? collisionPaddingProp : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
+  const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary];
+  const hasExplicitBoundaries = boundary.length > 0;
+  const detectOverflowOptions = {
+    padding: collisionPadding,
+    boundary: boundary.filter(isNotNull),
+    // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
+    altBoundary: hasExplicitBoundaries
+  };
+  const { refs, floatingStyles, placement, isPositioned, middlewareData } = (0, import_floating_ui.usePositionFloating)([
+    {
+      // default to `fixed` strategy so users don't have to pick and we also avoid
+      // focus scroll issues
+      strategy: "fixed",
+      placement: desiredPlacement,
+      whileElementsMounted: (...args) => {
+        const cleanup = (0, import_floating_ui.autoUpdate)(...args, {
+          animationFrame: updatePositionStrategy === "always"
+        });
+        return cleanup;
+      },
+      elements: { reference: context.anchor },
+      middleware: [
+        (0, import_floating_ui.offset)({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
+        avoidCollisions && (0, import_floating_ui.shift)({
+          mainAxis: true,
+          crossAxis: false,
+          limiter: sticky === "partial" ? (0, import_floating_ui.limitShift)() : void 0,
+          ...detectOverflowOptions
+        }),
+        avoidCollisions && (0, import_floating_ui.flip)({ ...detectOverflowOptions }),
+        (0, import_floating_ui.size)({
+          ...detectOverflowOptions,
+          apply: ({ elements, rects, availableWidth, availableHeight }) => {
+            const { width: anchorWidth, height: anchorHeight } = rects.reference;
+            const contentStyle = elements.floating.style;
+            contentStyle.setProperty("--radix-popper-available-width", `${availableWidth}px`);
+            contentStyle.setProperty("--radix-popper-available-height", `${availableHeight}px`);
+            contentStyle.setProperty("--radix-popper-anchor-width", `${anchorWidth}px`);
+            contentStyle.setProperty("--radix-popper-anchor-height", `${anchorHeight}px`);
+          }
+        }),
+        arrow && (0, import_floating_ui.arrow)({ element: arrow, padding: arrowPadding }),
+        transformOrigin({ arrowWidth, arrowHeight }),
+        hideWhenDetached && (0, import_floating_ui.hide)({
+          strategy: "referenceHidden",
+          ...detectOverflowOptions,
+          // `hide` detects whether the anchor is clipped — with no explicit
+          // collisionBoundary fall back to Floating UI's default clipping
+          // ancestors so an occluded submenu hides when its anchor scrolls out
+          // of view (radix-ui/primitives#3237).
+          boundary: hasExplicitBoundaries ? detectOverflowOptions.boundary : void 0
+        })
+      ]
+    },
+    (0, import_internal.subSlot)(slot, "floating")
+  ]);
+  const setPlacementState = context.setPlacementState;
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      setPlacementState(placement);
+      return () => setPlacementState(void 0);
+    },
+    [placement],
+    (0, import_internal.subSlot)(slot, "e:placement")
+  );
+  const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+  const handlePlaced = (0, import_octane.useEffectEvent)(onPlaced ?? (() => {
+  }), (0, import_internal.subSlot)(slot, "placed"));
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (isPositioned) handlePlaced();
+    },
+    [isPositioned],
+    (0, import_internal.subSlot)(slot, "e:placed")
+  );
+  const arrowX = middlewareData.arrow?.x;
+  const arrowY = middlewareData.arrow?.y;
+  const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+  const [contentZIndex, setContentZIndex] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "z")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
+    },
+    [content],
+    (0, import_internal.subSlot)(slot, "e:z")
+  );
+  return (0, import_octane.createElement)("div", {
+    ref: refs.setFloating,
+    "data-radix-popper-content-wrapper": "",
+    style: {
+      ...floatingStyles,
+      // keep off the page when measuring
+      transform: isPositioned ? floatingStyles.transform : "translate(0, -200%)",
+      minWidth: "max-content",
+      zIndex: contentZIndex,
+      "--radix-popper-transform-origin": [
+        middlewareData.transformOrigin?.x,
+        middlewareData.transformOrigin?.y
+      ].join(" "),
+      // hide the content if using the hide middleware and should be hidden — set
+      // visibility to hidden and disable pointer events so the UI behaves as if the
+      // PopperContent isn't there at all
+      ...middlewareData.hide?.referenceHidden && {
+        visibility: "hidden",
+        pointerEvents: "none"
+      }
+    },
+    // Floating UI internally calculates logical alignment based on the `dir` attribute
+    // on the reference/floating node — add it here so it's computed when portalled too.
+    dir: props?.dir,
+    children: (0, import_octane.createElement)(PopperContentProvider, {
+      scope: __scopePopper,
+      placedSide,
+      placedAlign,
+      onArrowChange: setArrow,
+      arrowX,
+      arrowY,
+      shouldHideArrow: cannotCenterArrow,
+      children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+        "data-side": placedSide,
+        "data-align": placedAlign,
+        ...contentProps,
+        ref: composedRefs,
+        style: {
+          ...contentProps.style,
+          // if the PopperContent hasn't been placed yet (not all measurements done)
+          // prevent animations so they don't kick in referring to the wrong side
+          animation: !isPositioned ? "none" : void 0
+        }
+      })
+    })
+  });
+}
+const OPPOSITE_SIDE = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+function Arrow(props) {
+  const { __scopePopper, ...arrowProps } = props ?? {};
+  const contentContext = useContentContext("PopperArrow", __scopePopper);
+  const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
+  return (0, import_octane.createElement)("span", {
+    ref: contentContext.onArrowChange,
+    style: {
+      position: "absolute",
+      left: contentContext.arrowX,
+      top: contentContext.arrowY,
+      [baseSide]: 0,
+      transformOrigin: {
+        top: "",
+        right: "0 0",
+        bottom: "center 0",
+        left: "100% 0"
+      }[contentContext.placedSide],
+      transform: {
+        top: "translateY(100%)",
+        right: "translateY(50%) rotate(90deg) translateX(-50%)",
+        bottom: `rotate(180deg)`,
+        left: "translateY(50%) rotate(-90deg) translateX(50%)"
+      }[contentContext.placedSide],
+      visibility: contentContext.shouldHideArrow ? "hidden" : void 0
+    },
+    children: (0, import_octane.createElement)(ArrowPrimitive.Root, {
+      ...arrowProps,
+      style: {
+        ...arrowProps.style,
+        // ensures the element can be measured correctly (mostly for if SVG)
+        display: "block"
+      }
+    })
+  });
+}
+function isNotNull(value) {
+  return value !== null;
+}
+const transformOrigin = (options) => ({
+  name: "transformOrigin",
+  options,
+  fn(data) {
+    const { placement, rects, middlewareData } = data;
+    const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+    const isArrowHidden = cannotCenterArrow;
+    const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+    const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+    const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+    const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
+    const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
+    const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
+    let x = "";
+    let y = "";
+    if (placedSide === "bottom") {
+      x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+      y = `${-arrowHeight}px`;
+    } else if (placedSide === "top") {
+      x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+      y = `${rects.floating.height + arrowHeight}px`;
+    } else if (placedSide === "right") {
+      x = `${-arrowHeight}px`;
+      y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+    } else if (placedSide === "left") {
+      x = `${rects.floating.width + arrowHeight}px`;
+      y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+    }
+    return { data: { x, y } };
+  }
+});
+function getSideAndAlignFromPlacement(placement) {
+  const [side, align = "center"] = placement.split("-");
+  return [side, align];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ALIGN_OPTIONS,
+  Anchor,
+  Arrow,
+  Content,
+  Popper,
+  PopperAnchor,
+  PopperArrow,
+  PopperContent,
+  Root,
+  SIDE_OPTIONS,
+  createPopperScope
+});

package/dist/cjs/Portal.cjs

@@ -0,0 +1,40 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Portal_exports = {};
+__export(Portal_exports, {
+  Portal: () => Portal,
+  Root: () => Portal
+});
+module.exports = __toCommonJS(Portal_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_Primitive = require("./Primitive.cjs");
+function Portal(props) {
+  const slot = (0, import_internal.S)("Portal");
+  const { container: containerProp, ...portalProps } = props ?? {};
+  const [mounted, setMounted] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "mounted"));
+  (0, import_octane.useLayoutEffect)(() => setMounted(true), [], (0, import_internal.subSlot)(slot, "e:mount"));
+  const container = containerProp || mounted && globalThis?.document?.body;
+  return container ? (0, import_octane.createPortal)((0, import_octane.createElement)(import_Primitive.Primitive.div, portalProps), container) : null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Portal,
+  Root
+});

package/dist/cjs/Presence.cjs

@@ -0,0 +1,183 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Presence_exports = {};
+__export(Presence_exports, {
+  Presence: () => Presence,
+  Root: () => Presence
+});
+module.exports = __toCommonJS(Presence_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+const TRANSITIONS = {
+  mounted: { UNMOUNT: "unmounted", ANIMATION_OUT: "unmountSuspended" },
+  unmountSuspended: { MOUNT: "mounted", ANIMATION_END: "unmounted" },
+  unmounted: { MOUNT: "mounted" }
+};
+function getAnimationName(styles) {
+  return styles?.animationName || "none";
+}
+function usePresence(present, slot) {
+  const [node, setNode] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "node"));
+  const stylesRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "styles"));
+  const prevPresentRef = (0, import_octane.useRef)(present, (0, import_internal.subSlot)(slot, "prevPresent"));
+  const prevAnimationNameRef = (0, import_octane.useRef)("none", (0, import_internal.subSlot)(slot, "prevAnim"));
+  const [state, setState] = (0, import_octane.useState)(
+    present ? "mounted" : "unmounted",
+    (0, import_internal.subSlot)(slot, "state")
+  );
+  const send = (0, import_octane.useCallback)(
+    (event) => {
+      setState((prev) => TRANSITIONS[prev][event] ?? prev);
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "send")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const currentAnimationName = getAnimationName(stylesRef.current);
+      prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+    },
+    [state],
+    (0, import_internal.subSlot)(slot, "e:anim")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const styles = stylesRef.current;
+      const wasPresent = prevPresentRef.current;
+      const hasPresentChanged = wasPresent !== present;
+      if (hasPresentChanged) {
+        const prevAnimationName = prevAnimationNameRef.current;
+        const currentAnimationName = getAnimationName(styles);
+        if (present) {
+          send("MOUNT");
+        } else if (currentAnimationName === "none" || styles?.display === "none") {
+          send("UNMOUNT");
+        } else {
+          const isAnimating = prevAnimationName !== currentAnimationName;
+          send(wasPresent && isAnimating ? "ANIMATION_OUT" : "UNMOUNT");
+        }
+        prevPresentRef.current = present;
+      }
+    },
+    [present],
+    (0, import_internal.subSlot)(slot, "e:present")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (node) {
+        let timeoutId;
+        const ownerWindow = node.ownerDocument.defaultView ?? window;
+        const handleAnimationEnd = (event) => {
+          const currentAnimationName = getAnimationName(stylesRef.current);
+          const escaped = typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(event.animationName) : event.animationName;
+          const isCurrentAnimation = currentAnimationName.includes(escaped);
+          if (event.target === node && isCurrentAnimation) {
+            send("ANIMATION_END");
+            if (!prevPresentRef.current) {
+              const currentFillMode = node.style.animationFillMode;
+              node.style.animationFillMode = "forwards";
+              timeoutId = ownerWindow.setTimeout(() => {
+                if (node.style.animationFillMode === "forwards") {
+                  node.style.animationFillMode = currentFillMode;
+                }
+              });
+            }
+          }
+        };
+        const handleAnimationStart = (event) => {
+          if (event.target === node) {
+            prevAnimationNameRef.current = getAnimationName(stylesRef.current);
+          }
+        };
+        node.addEventListener("animationstart", handleAnimationStart);
+        node.addEventListener("animationcancel", handleAnimationEnd);
+        node.addEventListener("animationend", handleAnimationEnd);
+        return () => {
+          ownerWindow.clearTimeout(timeoutId);
+          node.removeEventListener("animationstart", handleAnimationStart);
+          node.removeEventListener("animationcancel", handleAnimationEnd);
+          node.removeEventListener("animationend", handleAnimationEnd);
+        };
+      } else {
+        send("ANIMATION_END");
+      }
+    },
+    [node],
+    (0, import_internal.subSlot)(slot, "e:node")
+  );
+  return {
+    isPresent: state === "mounted" || state === "unmountSuspended",
+    ref: (0, import_octane.useCallback)(
+      (el) => {
+        stylesRef.current = el ? getComputedStyle(el) : null;
+        setNode(el);
+      },
+      [],
+      (0, import_internal.subSlot)(slot, "ref")
+    )
+  };
+}
+function useStableComposedRefs(refs, slot) {
+  const refsRef = (0, import_octane.useRef)(refs, (0, import_internal.subSlot)(slot, "refsRef"));
+  refsRef.current = refs;
+  return (0, import_octane.useCallback)(
+    (node) => {
+      const currentRefs = refsRef.current;
+      let hasCleanup = false;
+      const cleanups = currentRefs.map((ref) => {
+        const cleanup = setRefValue(ref, node);
+        if (!hasCleanup && typeof cleanup === "function") hasCleanup = true;
+        return cleanup;
+      });
+      if (hasCleanup) {
+        return () => {
+          for (let i = 0; i < cleanups.length; i++) {
+            const cleanup = cleanups[i];
+            if (typeof cleanup === "function") cleanup();
+            else setRefValue(currentRefs[i], null);
+          }
+        };
+      }
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "cb")
+  );
+}
+function setRefValue(ref, value) {
+  if (typeof ref === "function") return ref(value);
+  if (ref !== null && ref !== void 0) ref.current = value;
+}
+function Presence(props) {
+  const { present, children } = props;
+  const slot = (0, import_internal.S)("Presence");
+  const presence = usePresence(present, slot);
+  const forceMount = typeof children === "function";
+  const child = forceMount ? children({ present: presence.isPresent }) : import_octane.Children.only(children);
+  const childRef = (0, import_octane.isValidElement)(child) ? child.props?.ref : void 0;
+  const ref = useStableComposedRefs([presence.ref, childRef], slot);
+  if (forceMount || presence.isPresent) {
+    return (0, import_octane.isValidElement)(child) ? (0, import_octane.cloneElement)(child, { ref }) : child;
+  }
+  return null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Presence,
+  Root
+});

package/dist/cjs/Primitive.cjs

@@ -0,0 +1,63 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Primitive_exports = {};
+__export(Primitive_exports, {
+  Primitive: () => Primitive,
+  dispatchDiscreteCustomEvent: () => dispatchDiscreteCustomEvent
+});
+module.exports = __toCommonJS(Primitive_exports);
+var import_octane = require("octane");
+var import_Slot = require("./Slot.cjs");
+function dispatchDiscreteCustomEvent(target, event) {
+  if (target) (0, import_octane.flushSync)(() => target.dispatchEvent(event));
+}
+const NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+function makePrimitive(node) {
+  return function Primitive2(props) {
+    const { asChild, ...primitiveProps } = props ?? {};
+    return asChild ? (0, import_octane.createElement)(import_Slot.Slot, primitiveProps) : (0, import_octane.createElement)(node, primitiveProps);
+  };
+}
+const Primitive = {};
+for (const node of NODES) {
+  Primitive[node] = makePrimitive(node);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Primitive,
+  dispatchDiscreteCustomEvent
+});