@octanejs/base-ui 0.1.30 → 0.1.32

package/dist/cjs/collapsible.cjs

@@ -0,0 +1,700 @@
+"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 collapsible_exports = {};
+__export(collapsible_exports, {
+  Collapsible: () => Collapsible,
+  CollapsiblePanel: () => CollapsiblePanel,
+  CollapsiblePanelCssVars: () => CollapsiblePanelCssVars,
+  CollapsibleRoot: () => CollapsibleRoot,
+  CollapsibleRootContext: () => CollapsibleRootContext,
+  CollapsibleTrigger: () => CollapsibleTrigger,
+  useCollapsiblePanel: () => useCollapsiblePanel,
+  useCollapsibleRoot: () => useCollapsibleRoot,
+  useCollapsibleRootContext: () => useCollapsibleRootContext
+});
+module.exports = __toCommonJS(collapsible_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_useBaseUiId = require("./utils/useBaseUiId.cjs");
+var import_useButton = require("./utils/useButton.cjs");
+var import_useControlled = require("./utils/useControlled.cjs");
+var import_useStableCallback = require("./utils/useStableCallback.cjs");
+var import_createChangeEventDetails = require("./utils/createChangeEventDetails.cjs");
+var import_useTransitionStatus = require("./utils/useTransitionStatus.cjs");
+var import_addEventListener = require("./utils/addEventListener.cjs");
+var import_useAnimationFrame = require("./utils/useAnimationFrame.cjs");
+var import_owner = require("./utils/owner.cjs");
+var import_resolveStyle = require("./utils/resolveStyle.cjs");
+var import_useAnimationsFinished = require("./utils/useAnimationsFinished.cjs");
+var import_useOpenChangeComplete = require("./utils/useOpenChangeComplete.cjs");
+var import_useValueAsRef = require("./utils/useValueAsRef.cjs");
+var import_collapsibleOpenStateMapping = require("./utils/collapsibleOpenStateMapping.cjs");
+const rootStateAttributesMapping = {
+  ...import_collapsibleOpenStateMapping.collapsibleOpenStateMapping,
+  ...import_useTransitionStatus.transitionStatusMapping
+};
+const triggerStateAttributesMapping = {
+  ...import_collapsibleOpenStateMapping.collapsibleTriggerOpenStateMapping,
+  ...import_useTransitionStatus.transitionStatusMapping
+};
+const CollapsibleRootContext = (0, import_octane.createContext)(
+  void 0
+);
+function useCollapsibleRootContext() {
+  const context = (0, import_octane.useContext)(CollapsibleRootContext);
+  if (context === void 0) {
+    throw new Error(
+      "Base UI: CollapsibleRootContext is missing. Collapsible parts must be placed within <Collapsible.Root>."
+    );
+  }
+  return context;
+}
+function useCollapsibleRoot(...args) {
+  const [user, slotArg] = (0, import_internal.splitSlot)(args);
+  const slot = slotArg ?? (0, import_internal.S)("useCollapsibleRoot");
+  const {
+    open: openParam,
+    defaultOpen,
+    onOpenChange,
+    disabled
+  } = user[0];
+  const [open, setOpen] = (0, import_useControlled.useControlled)(
+    { controlled: openParam, default: defaultOpen, name: "Collapsible", state: "open" },
+    (0, import_internal.subSlot)(slot, "ctrl")
+  );
+  const { mounted, setMounted, transitionStatus } = (0, import_useTransitionStatus.useTransitionStatus)(
+    open,
+    true,
+    true,
+    (0, import_internal.subSlot)(slot, "transition")
+  );
+  const defaultPanelId = (0, import_useBaseUiId.useBaseUiId)(void 0, (0, import_internal.subSlot)(slot, "id"));
+  const [panelIdState, setPanelIdState] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "panelId")
+  );
+  const panelId = panelIdState ?? defaultPanelId;
+  const handleTrigger = (0, import_useStableCallback.useStableCallback)(
+    (event) => {
+      const nextOpen = !open;
+      const eventDetails = (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.triggerPress, event);
+      onOpenChange(nextOpen, eventDetails);
+      if (eventDetails.isCanceled) {
+        return;
+      }
+      setOpen(nextOpen);
+    },
+    (0, import_internal.subSlot)(slot, "trigger")
+  );
+  return (0, import_octane.useMemo)(
+    () => ({
+      disabled,
+      handleTrigger,
+      mounted,
+      open,
+      panelId,
+      setMounted,
+      setOpen,
+      setPanelIdState,
+      transitionStatus
+    }),
+    [
+      disabled,
+      handleTrigger,
+      mounted,
+      open,
+      panelId,
+      setMounted,
+      setOpen,
+      setPanelIdState,
+      transitionStatus
+    ],
+    (0, import_internal.subSlot)(slot, "memo")
+  );
+}
+function CollapsibleRoot(props) {
+  const slot = (0, import_internal.S)("CollapsibleRoot");
+  const {
+    render,
+    className,
+    defaultOpen = false,
+    disabled = false,
+    onOpenChange: onOpenChangeProp,
+    open,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const onOpenChange = (0, import_useStableCallback.useStableCallback)(onOpenChangeProp ?? (() => {
+  }), (0, import_internal.subSlot)(slot, "onOpen"));
+  const collapsible = useCollapsibleRoot(
+    { open, defaultOpen, onOpenChange, disabled },
+    (0, import_internal.subSlot)(slot, "root")
+  );
+  const state = (0, import_octane.useMemo)(
+    () => ({
+      open: collapsible.open,
+      disabled: collapsible.disabled,
+      transitionStatus: collapsible.transitionStatus
+    }),
+    [collapsible.open, collapsible.disabled, collapsible.transitionStatus],
+    (0, import_internal.subSlot)(slot, "state")
+  );
+  const contextValue = (0, import_octane.useMemo)(
+    () => ({ ...collapsible, onOpenChange, state }),
+    [collapsible, onOpenChange, state],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      state,
+      ref,
+      props: elementProps,
+      stateAttributesMapping: rootStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return (0, import_octane.createElement)(CollapsibleRootContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+}
+function CollapsibleTrigger(props) {
+  const slot = (0, import_internal.S)("CollapsibleTrigger");
+  const {
+    panelId,
+    open,
+    handleTrigger,
+    state,
+    disabled: contextDisabled
+  } = useCollapsibleRootContext();
+  const {
+    className,
+    disabled = contextDisabled,
+    render,
+    nativeButton = true,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    { disabled, focusableWhenDisabled: true, native: nativeButton },
+    (0, import_internal.subSlot)(slot, "button")
+  );
+  return (0, import_useRenderElement.useRenderElement)(
+    "button",
+    { render, className, style },
+    {
+      state,
+      ref: [ref, buttonRef],
+      props: [
+        {
+          "aria-controls": open ? panelId : void 0,
+          "aria-expanded": open,
+          onClick: handleTrigger
+        },
+        elementProps,
+        getButtonProps
+      ],
+      stateAttributesMapping: triggerStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const CollapsiblePanelCssVars = {
+  collapsiblePanelHeight: "--collapsible-panel-height",
+  collapsiblePanelWidth: "--collapsible-panel-width"
+};
+const EMPTY_DIMENSIONS = { height: void 0, width: void 0 };
+function getDimensions(element) {
+  return { height: element.scrollHeight, width: element.scrollWidth };
+}
+function hasNonZeroDuration(value) {
+  return value.split(",").map((part) => part.trim()).some((part) => part !== "" && Number.parseFloat(part) > 0);
+}
+function getAnimationType(element, hasSuppressedMountAnimation = false) {
+  const panelStyles = (0, import_owner.ownerWindow)(element).getComputedStyle(element);
+  const hasAnimation = (panelStyles.animationName.split(",").map((name) => name.trim()).some((name) => name !== "" && name !== "none") || hasSuppressedMountAnimation) && hasNonZeroDuration(panelStyles.animationDuration);
+  const hasTransition = hasNonZeroDuration(panelStyles.transitionDuration);
+  if (hasAnimation && hasTransition) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        "Base UI: CSS transitions and CSS animations both detected on Collapsible or Accordion panel. Only one of either animation type should be used."
+      );
+    }
+    return "css-transition";
+  }
+  if (hasTransition) {
+    return "css-transition";
+  }
+  if (hasAnimation) {
+    return "css-animation";
+  }
+  return "none";
+}
+function setTemporaryStyle(element, property, value) {
+  const previousValue = element.style.getPropertyValue(property);
+  const previousPriority = element.style.getPropertyPriority(property);
+  element.style.setProperty(property, value);
+  return () => {
+    if (previousValue === "") {
+      element.style.removeProperty(property);
+      return;
+    }
+    element.style.setProperty(property, previousValue, previousPriority);
+  };
+}
+function resetLayoutStyles(element) {
+  const originalLayoutStyles = {
+    "justify-content": element.style.justifyContent,
+    "align-items": element.style.alignItems,
+    "align-content": element.style.alignContent,
+    "justify-items": element.style.justifyItems
+  };
+  Object.keys(originalLayoutStyles).forEach((key) => {
+    element.style.setProperty(key, "initial", "important");
+  });
+  function restoreLayoutStyles() {
+    Object.entries(originalLayoutStyles).forEach(([key, value]) => {
+      if (value === "") {
+        element.style.removeProperty(key);
+        return;
+      }
+      element.style.setProperty(key, value);
+    });
+  }
+  const frame = import_useAnimationFrame.AnimationFrame.request(restoreLayoutStyles);
+  return () => {
+    import_useAnimationFrame.AnimationFrame.cancel(frame);
+    restoreLayoutStyles();
+  };
+}
+function useCollapsiblePanel(...args) {
+  const [user, slotArg] = (0, import_internal.splitSlot)(args);
+  const slot = slotArg ?? (0, import_internal.S)("useCollapsiblePanel");
+  const {
+    hiddenUntilFound,
+    id: idParam,
+    keepMounted,
+    mounted,
+    onOpenChange,
+    open,
+    setMounted,
+    setOpen,
+    transitionStatus
+  } = user[0];
+  const panelRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "panelRef"));
+  const animationTypeRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "animType"));
+  const [dimensions, setDimensionsUnwrapped] = (0, import_octane.useState)(
+    EMPTY_DIMENSIONS,
+    (0, import_internal.subSlot)(slot, "dims")
+  );
+  const lastMeasuredDimensionsRef = (0, import_octane.useRef)(EMPTY_DIMENSIONS, (0, import_internal.subSlot)(slot, "lastDims"));
+  const shouldSkipNextOpenRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "skipOpen"));
+  const shouldPreventMountAnimationRef = (0, import_octane.useRef)(open, (0, import_internal.subSlot)(slot, "preventMount"));
+  const shouldPreventActivityResumeAnimationRef = (0, import_octane.useRef)(
+    false,
+    (0, import_internal.subSlot)(slot, "preventActivityResume")
+  );
+  const [forcePanelIdle, setForcePanelIdle] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "forceIdle"));
+  const pendingTemporaryStyleRestoreRef = (0, import_octane.useRef)(
+    null,
+    (0, import_internal.subSlot)(slot, "pendingRestore")
+  );
+  const latestStateRef = (0, import_useValueAsRef.useValueAsRef)(
+    { mounted, open },
+    (0, import_internal.subSlot)(slot, "latest")
+  );
+  const runOnceCloseAnimationsFinish = (0, import_useAnimationsFinished.useAnimationsFinished)(
+    panelRef,
+    false,
+    false,
+    (0, import_internal.subSlot)(slot, "closeAnims")
+  );
+  const hidden = !open && !mounted;
+  const panelTransitionStatus = forcePanelIdle ? "idle" : transitionStatus;
+  const shouldPreventOpenAnimation = open && (shouldPreventMountAnimationRef.current || shouldPreventActivityResumeAnimationRef.current);
+  const renderedDimensions = !open && mounted && animationTypeRef.current === "css-animation" && dimensions.height === void 0 && dimensions.width === void 0 ? lastMeasuredDimensionsRef.current : dimensions;
+  const shouldPersistHiddenTransitionStyles = hiddenUntilFound && hidden && animationTypeRef.current !== "css-animation";
+  const setDimensions = (0, import_useStableCallback.useStableCallback)(
+    (next, shouldCacheMeasurement = true) => {
+      if (shouldCacheMeasurement) {
+        lastMeasuredDimensionsRef.current = next;
+      }
+      setDimensionsUnwrapped(next);
+    },
+    (0, import_internal.subSlot)(slot, "setDims")
+  );
+  const restorePendingTemporaryStyle = (0, import_useStableCallback.useStableCallback)(
+    () => {
+      pendingTemporaryStyleRestoreRef.current?.();
+      pendingTemporaryStyleRestoreRef.current = null;
+    },
+    (0, import_internal.subSlot)(slot, "restorePending")
+  );
+  const markActivityResumeAnimationSuppressed = (0, import_useStableCallback.useStableCallback)(
+    () => {
+      if (open && mounted && animationTypeRef.current === "css-animation") {
+        shouldPreventActivityResumeAnimationRef.current = true;
+      }
+    },
+    (0, import_internal.subSlot)(slot, "markActivityResume")
+  );
+  const setPendingTemporaryStyleRestore = (0, import_useStableCallback.useStableCallback)(
+    (restore) => {
+      restorePendingTemporaryStyle();
+      pendingTemporaryStyleRestoreRef.current = () => {
+        pendingTemporaryStyleRestoreRef.current = null;
+        restore();
+      };
+    },
+    (0, import_internal.subSlot)(slot, "setPending")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!forcePanelIdle || transitionStatus === "starting") {
+        return;
+      }
+      setForcePanelIdle(false);
+    },
+    [forcePanelIdle, transitionStatus],
+    (0, import_internal.subSlot)(slot, "idleEffect")
+  );
+  (0, import_octane.useEffect)(
+    () => () => {
+      markActivityResumeAnimationSuppressed();
+      restorePendingTemporaryStyle();
+    },
+    [markActivityResumeAnimationSuppressed, restorePendingTemporaryStyle],
+    (0, import_internal.subSlot)(slot, "unmount")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const panel = panelRef.current;
+      if (!panel) {
+        return void 0;
+      }
+      if (!open && pendingTemporaryStyleRestoreRef.current) {
+        restorePendingTemporaryStyle();
+      }
+      const animationType = getAnimationType(panel, shouldPreventOpenAnimation);
+      animationTypeRef.current = animationType;
+      if (open && transitionStatus === "idle" && shouldPreventMountAnimationRef.current && animationType === "css-animation") {
+        lastMeasuredDimensionsRef.current = getDimensions(panel);
+        return void 0;
+      }
+      if (open && transitionStatus === "starting") {
+        const skipNextOpen = shouldSkipNextOpenRef.current;
+        shouldSkipNextOpenRef.current = false;
+        if (animationType === "none") {
+          setDimensions(getDimensions(panel));
+          setForcePanelIdle(true);
+          return void 0;
+        }
+        if (animationType === "css-transition") {
+          const restoreLayout = resetLayoutStyles(panel);
+          setDimensions(getDimensions(panel));
+          if (!skipNextOpen) {
+            return restoreLayout;
+          }
+          setPendingTemporaryStyleRestore(setTemporaryStyle(panel, "transition-duration", "0s"));
+          setForcePanelIdle(true);
+          return restoreLayout;
+        }
+        if (animationType === "css-animation") {
+          setDimensions(getDimensions(panel));
+          if (!skipNextOpen) {
+            setTemporaryStyle(panel, "animation-name", "none")();
+            return void 0;
+          }
+          const restoreAnimationName = setTemporaryStyle(panel, "animation-name", "none");
+          const restoreAnimationDuration = setTemporaryStyle(panel, "animation-duration", "0s");
+          restoreAnimationName();
+          setPendingTemporaryStyleRestore(restoreAnimationDuration);
+          setForcePanelIdle(true);
+          return void 0;
+        }
+      }
+      if (!open && mounted && (transitionStatus === "idle" || transitionStatus === "starting")) {
+        shouldPreventMountAnimationRef.current = false;
+        shouldPreventActivityResumeAnimationRef.current = false;
+        if (animationType === "none") {
+          setDimensions(EMPTY_DIMENSIONS, false);
+          setMounted(false);
+          return void 0;
+        }
+        setDimensions(getDimensions(panel));
+        return void 0;
+      }
+      if (transitionStatus !== "ending") {
+        return void 0;
+      }
+      if (animationType === "none") {
+        setMounted(false);
+        return void 0;
+      }
+      const nextDimensions = getDimensions(panel);
+      const hasMeasuredSize = (nextDimensions.height ?? 0) > 0 || (nextDimensions.width ?? 0) > 0;
+      if (!hasMeasuredSize) {
+        setMounted(false);
+        return void 0;
+      }
+      setDimensions(nextDimensions);
+      if (animationType === "css-animation") {
+        setTemporaryStyle(panel, "animation-name", "none")();
+      }
+      return void 0;
+    },
+    [
+      mounted,
+      open,
+      restorePendingTemporaryStyle,
+      setDimensions,
+      setMounted,
+      setPendingTemporaryStyleRestore,
+      shouldPreventOpenAnimation,
+      transitionStatus
+    ],
+    (0, import_internal.subSlot)(slot, "mainEffect")
+  );
+  (0, import_useOpenChangeComplete.useOpenChangeComplete)(
+    {
+      enabled: open && mounted && panelTransitionStatus === "idle",
+      open: true,
+      ref: panelRef,
+      onComplete() {
+        if (!open) {
+          return;
+        }
+        setDimensions(EMPTY_DIMENSIONS, false);
+      }
+    },
+    (0, import_internal.subSlot)(slot, "openComplete")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (open || !mounted || panelTransitionStatus !== "ending") {
+        return void 0;
+      }
+      const panel = panelRef.current;
+      if (!panel) {
+        return void 0;
+      }
+      const abortController = new AbortController();
+      function handleComplete() {
+        if (latestStateRef.current.open) {
+          return;
+        }
+        setMounted(false);
+        setDimensions(EMPTY_DIMENSIONS, false);
+      }
+      const endingStyleFrame = import_useAnimationFrame.AnimationFrame.request(() => {
+        if (!abortController.signal.aborted) {
+          runOnceCloseAnimationsFinish(handleComplete, abortController.signal);
+        }
+      });
+      return () => {
+        import_useAnimationFrame.AnimationFrame.cancel(endingStyleFrame);
+        abortController.abort();
+      };
+    },
+    [
+      latestStateRef,
+      mounted,
+      open,
+      panelTransitionStatus,
+      runOnceCloseAnimationsFinish,
+      setDimensions,
+      setMounted
+    ],
+    (0, import_internal.subSlot)(slot, "closeEffect")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const panel = panelRef.current;
+      if (!panel || !hiddenUntilFound || !hidden) {
+        return;
+      }
+      panel.setAttribute("hidden", "until-found");
+    },
+    [hidden, hiddenUntilFound],
+    (0, import_internal.subSlot)(slot, "hiddenEffect")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const panel = panelRef.current;
+      if (!panel) {
+        return void 0;
+      }
+      function handleBeforeMatch(event) {
+        const eventDetails = (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.none, event);
+        onOpenChange(true, eventDetails);
+        if (eventDetails.isCanceled) {
+          return;
+        }
+        shouldSkipNextOpenRef.current = true;
+        setOpen(true);
+      }
+      return (0, import_addEventListener.addEventListener)(panel, "beforematch", handleBeforeMatch);
+    },
+    [onOpenChange, setOpen],
+    (0, import_internal.subSlot)(slot, "beforematch")
+  );
+  const shouldRender = keepMounted || hiddenUntilFound || mounted || open;
+  return {
+    height: renderedDimensions.height,
+    props: {
+      ...shouldPersistHiddenTransitionStyles ? { "data-starting-style": "" } : void 0,
+      hidden,
+      id: idParam
+    },
+    panelRef,
+    shouldPreventOpenAnimation,
+    shouldRender,
+    transitionStatus: panelTransitionStatus,
+    width: renderedDimensions.width
+  };
+}
+function CollapsiblePanel(props) {
+  const slot = (0, import_internal.S)("CollapsiblePanel");
+  const {
+    className,
+    hiddenUntilFound: hiddenUntilFoundProp,
+    keepMounted: keepMountedProp,
+    render,
+    id: idProp,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const {
+    mounted,
+    onOpenChange,
+    open,
+    panelId,
+    setMounted,
+    setPanelIdState,
+    setOpen,
+    state,
+    transitionStatus
+  } = useCollapsibleRootContext();
+  const hiddenUntilFound = hiddenUntilFoundProp ?? false;
+  const keepMounted = keepMountedProp ?? false;
+  if (process.env.NODE_ENV !== "production") {
+    (0, import_octane.useLayoutEffect)(
+      () => {
+        if (hiddenUntilFound && keepMountedProp === false) {
+          console.warn(
+            "Base UI: The `keepMounted={false}` prop on `Collapsible.Panel` is ignored when `hiddenUntilFound` is enabled, since the panel must remain mounted while closed."
+          );
+        }
+      },
+      [hiddenUntilFound, keepMountedProp],
+      (0, import_internal.subSlot)(slot, "warn")
+    );
+  }
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (idProp) {
+        setPanelIdState(idProp);
+        return () => {
+          setPanelIdState(void 0);
+        };
+      }
+      return void 0;
+    },
+    [idProp, setPanelIdState],
+    (0, import_internal.subSlot)(slot, "registerId")
+  );
+  const {
+    height,
+    props: panelProps,
+    panelRef,
+    shouldPreventOpenAnimation,
+    shouldRender,
+    transitionStatus: panelTransitionStatus,
+    width
+  } = useCollapsiblePanel(
+    {
+      hiddenUntilFound,
+      id: panelId,
+      keepMounted,
+      mounted,
+      onOpenChange,
+      open,
+      setMounted,
+      setOpen,
+      transitionStatus
+    },
+    (0, import_internal.subSlot)(slot, "panel")
+  );
+  const panelState = {
+    ...state,
+    transitionStatus: panelTransitionStatus
+  };
+  const resolvedStyle = (0, import_resolveStyle.resolveStyle)(style, panelState);
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style: void 0 },
+    {
+      state: panelState,
+      ref: [ref, panelRef],
+      props: [
+        panelProps,
+        {
+          style: {
+            [CollapsiblePanelCssVars.collapsiblePanelHeight]: height === void 0 ? "auto" : `${height}px`,
+            [CollapsiblePanelCssVars.collapsiblePanelWidth]: width === void 0 ? "auto" : `${width}px`
+          }
+        },
+        elementProps,
+        resolvedStyle ? { style: resolvedStyle } : void 0,
+        // The public `style` prop is resolved above so a temporary `animationName: 'none'`
+        // can still win after the user's inline styles have been merged.
+        shouldPreventOpenAnimation ? { style: { animationName: "none" } } : void 0
+      ],
+      stateAttributesMapping: rootStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+}
+const Collapsible = {
+  Root: CollapsibleRoot,
+  Trigger: CollapsibleTrigger,
+  Panel: CollapsiblePanel
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Collapsible,
+  CollapsiblePanel,
+  CollapsiblePanelCssVars,
+  CollapsibleRoot,
+  CollapsibleRootContext,
+  CollapsibleTrigger,
+  useCollapsiblePanel,
+  useCollapsibleRoot,
+  useCollapsibleRootContext
+});