npm - dune-react - Versions diffs - 0.0.1 → 0.0.3 - Mend

dune-react 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1010) hide show

package/dist/node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/accordion/panel/AccordionPanel.js ADDED Viewed

@@ -0,0 +1,137 @@
+import * as React from "react";
+import { useIsoLayoutEffect } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useIsoLayoutEffect.js";
+import { warn } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/warn.js";
+import { useCollapsibleRootContext } from "../../collapsible/root/CollapsibleRootContext.js";
+import { useCollapsiblePanel } from "../../collapsible/panel/useCollapsiblePanel.js";
+import { useAccordionRootContext } from "../root/AccordionRootContext.js";
+import { useAccordionItemContext } from "../item/AccordionItemContext.js";
+import { accordionStateAttributesMapping } from "../item/stateAttributesMapping.js";
+import { AccordionPanelCssVars } from "./AccordionPanelCssVars.js";
+import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+const AccordionPanel = /* @__PURE__ */ React.forwardRef(function AccordionPanel2(componentProps, forwardedRef) {
+  const {
+    className,
+    hiddenUntilFound: hiddenUntilFoundProp,
+    keepMounted: keepMountedProp,
+    id: idProp,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    hiddenUntilFound: contextHiddenUntilFound,
+    keepMounted: contextKeepMounted
+  } = useAccordionRootContext();
+  const {
+    abortControllerRef,
+    animationTypeRef,
+    height,
+    mounted,
+    onOpenChange,
+    open,
+    panelId,
+    panelRef,
+    runOnceAnimationsFinish,
+    setDimensions,
+    setHiddenUntilFound,
+    setKeepMounted,
+    setMounted,
+    setOpen,
+    setVisible,
+    transitionDimensionRef,
+    visible,
+    width,
+    setPanelIdState,
+    transitionStatus
+  } = useCollapsibleRootContext();
+  const hiddenUntilFound = hiddenUntilFoundProp ?? contextHiddenUntilFound;
+  const keepMounted = keepMountedProp ?? contextKeepMounted;
+  if (process.env.NODE_ENV !== "production") {
+    useIsoLayoutEffect(() => {
+      if (keepMountedProp === false && hiddenUntilFound) {
+        warn("The `keepMounted={false}` prop on a Accordion.Panel will be ignored when using `contextHiddenUntilFound` on the Panel or the Root since it requires the panel to remain mounted when closed.");
+      }
+    }, [hiddenUntilFound, keepMountedProp]);
+  }
+  useIsoLayoutEffect(() => {
+    if (idProp) {
+      setPanelIdState(idProp);
+      return () => {
+        setPanelIdState(void 0);
+      };
+    }
+    return void 0;
+  }, [idProp, setPanelIdState]);
+  useIsoLayoutEffect(() => {
+    setHiddenUntilFound(hiddenUntilFound);
+  }, [setHiddenUntilFound, hiddenUntilFound]);
+  useIsoLayoutEffect(() => {
+    setKeepMounted(keepMounted);
+  }, [setKeepMounted, keepMounted]);
+  useOpenChangeComplete({
+    open: open && transitionStatus === "idle",
+    ref: panelRef,
+    onComplete() {
+      if (!open) {
+        return;
+      }
+      setDimensions({
+        width: void 0,
+        height: void 0
+      });
+    }
+  });
+  const {
+    props
+  } = useCollapsiblePanel({
+    abortControllerRef,
+    animationTypeRef,
+    externalRef: forwardedRef,
+    height,
+    hiddenUntilFound,
+    id: idProp ?? panelId,
+    keepMounted,
+    mounted,
+    onOpenChange,
+    open,
+    panelRef,
+    runOnceAnimationsFinish,
+    setDimensions,
+    setMounted,
+    setOpen,
+    setVisible,
+    transitionDimensionRef,
+    visible,
+    width
+  });
+  const {
+    state,
+    triggerId
+  } = useAccordionItemContext();
+  const panelState = React.useMemo(() => ({
+    ...state,
+    transitionStatus
+  }), [state, transitionStatus]);
+  const element = useRenderElement("div", componentProps, {
+    state: panelState,
+    ref: [forwardedRef, panelRef],
+    props: [props, {
+      "aria-labelledby": triggerId,
+      role: "region",
+      style: {
+        [AccordionPanelCssVars.accordionPanelHeight]: height === void 0 ? "auto" : `${height}px`,
+        [AccordionPanelCssVars.accordionPanelWidth]: width === void 0 ? "auto" : `${width}px`
+      }
+    }, elementProps],
+    stateAttributesMapping: accordionStateAttributesMapping
+  });
+  const shouldRender = keepMounted || hiddenUntilFound || !keepMounted && mounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") AccordionPanel.displayName = "AccordionPanel";
+export {
+  AccordionPanel
+};

package/dist/node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/accordion/panel/AccordionPanelCssVars.js ADDED Viewed

@@ -0,0 +1,8 @@
+let AccordionPanelCssVars = /* @__PURE__ */ function(AccordionPanelCssVars2) {
+  AccordionPanelCssVars2["accordionPanelHeight"] = "--accordion-panel-height";
+  AccordionPanelCssVars2["accordionPanelWidth"] = "--accordion-panel-width";
+  return AccordionPanelCssVars2;
+}({});
+export {
+  AccordionPanelCssVars
+};

package/dist/node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/accordion/root/AccordionRoot.js ADDED Viewed

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { useControlled } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useControlled.js";
+import { useStableCallback } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useStableCallback.js";
+import { useIsoLayoutEffect } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useIsoLayoutEffect.js";
+import { warn } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/warn.js";
+import { CompositeList } from "../../composite/list/CompositeList.js";
+import { useDirection } from "../../direction-provider/DirectionContext.js";
+import { AccordionRootContext } from "./AccordionRootContext.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { jsx } from "react/jsx-runtime";
+import { none } from "../../utils/reason-parts.js";
+const rootStateAttributesMapping = {
+  value: () => null
+};
+const AccordionRoot = /* @__PURE__ */ React.forwardRef(function AccordionRoot2(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    disabled = false,
+    hiddenUntilFound: hiddenUntilFoundProp,
+    keepMounted: keepMountedProp,
+    loopFocus = true,
+    onValueChange: onValueChangeProp,
+    multiple = false,
+    orientation = "vertical",
+    value: valueProp,
+    defaultValue: defaultValueProp,
+    ...elementProps
+  } = componentProps;
+  const direction = useDirection();
+  if (process.env.NODE_ENV !== "production") {
+    useIsoLayoutEffect(() => {
+      if (hiddenUntilFoundProp && keepMountedProp === false) {
+        warn("The `keepMounted={false}` prop on a Accordion.Root will be ignored when using `hiddenUntilFound` since it requires Panels to remain mounted when closed.");
+      }
+    }, [hiddenUntilFoundProp, keepMountedProp]);
+  }
+  const defaultValue = React.useMemo(() => {
+    if (valueProp === void 0) {
+      return defaultValueProp ?? [];
+    }
+    return void 0;
+  }, [valueProp, defaultValueProp]);
+  const onValueChange = useStableCallback(onValueChangeProp);
+  const accordionItemRefs = React.useRef([]);
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: "Accordion",
+    state: "value"
+  });
+  const handleValueChange = useStableCallback((newValue, nextOpen) => {
+    const details = createChangeEventDetails(none);
+    if (!multiple) {
+      const nextValue = value[0] === newValue ? [] : [newValue];
+      onValueChange(nextValue, details);
+      if (details.isCanceled) {
+        return;
+      }
+      setValue(nextValue);
+    } else if (nextOpen) {
+      const nextOpenValues = value.slice();
+      nextOpenValues.push(newValue);
+      onValueChange(nextOpenValues, details);
+      if (details.isCanceled) {
+        return;
+      }
+      setValue(nextOpenValues);
+    } else {
+      const nextOpenValues = value.filter((v) => v !== newValue);
+      onValueChange(nextOpenValues, details);
+      if (details.isCanceled) {
+        return;
+      }
+      setValue(nextOpenValues);
+    }
+  });
+  const state = React.useMemo(() => ({
+    value,
+    disabled,
+    orientation
+  }), [value, disabled, orientation]);
+  const contextValue = React.useMemo(() => ({
+    accordionItemRefs,
+    direction,
+    disabled,
+    handleValueChange,
+    hiddenUntilFound: hiddenUntilFoundProp ?? false,
+    keepMounted: keepMountedProp ?? false,
+    loopFocus,
+    orientation,
+    state,
+    value
+  }), [direction, disabled, handleValueChange, hiddenUntilFoundProp, keepMountedProp, loopFocus, orientation, state, value]);
+  const element = useRenderElement("div", componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      dir: direction,
+      role: "region"
+    }, elementProps],
+    stateAttributesMapping: rootStateAttributesMapping
+  });
+  return /* @__PURE__ */ jsx(AccordionRootContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsx(CompositeList, {
+      elementsRef: accordionItemRefs,
+      children: element
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") AccordionRoot.displayName = "AccordionRoot";
+export {
+  AccordionRoot
+};

@@ -0,0 +1,15 @@
+import formatErrorMessage from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/formatErrorMessage.js";
+import * as React from "react";
+const AccordionRootContext = /* @__PURE__ */ React.createContext(void 0);
+if (process.env.NODE_ENV !== "production") AccordionRootContext.displayName = "AccordionRootContext";
+function useAccordionRootContext() {
+  const context = React.useContext(AccordionRootContext);
+  if (context === void 0) {
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: AccordionRootContext is missing. Accordion parts must be placed within <Accordion.Root>." : formatErrorMessage(10));
+  }
+  return context;
+}
+export {
+  AccordionRootContext,
+  useAccordionRootContext
+};

@@ -0,0 +1,8 @@
+let AccordionRootDataAttributes = /* @__PURE__ */ function(AccordionRootDataAttributes2) {
+  AccordionRootDataAttributes2["disabled"] = "data-disabled";
+  AccordionRootDataAttributes2["orientation"] = "data-orientation";
+  return AccordionRootDataAttributes2;
+}({});
+export {
+  AccordionRootDataAttributes
+};

@@ -0,0 +1,157 @@
+import * as React from "react";
+import { isElementDisabled } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/isElementDisabled.js";
+import { useIsoLayoutEffect } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useIsoLayoutEffect.js";
+import { triggerOpenStateMapping } from "../../utils/collapsibleOpenStateMapping.js";
+import { useCollapsibleRootContext } from "../../collapsible/root/CollapsibleRootContext.js";
+import { ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT, HOME, END } from "../../composite/composite.js";
+import { useAccordionRootContext } from "../root/AccordionRootContext.js";
+import { useAccordionItemContext } from "../item/AccordionItemContext.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useButton } from "../../use-button/useButton.js";
+import { stopEvent } from "../../floating-ui-react/utils/event.js";
+const SUPPORTED_KEYS = /* @__PURE__ */ new Set([ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT, HOME, END]);
+function getActiveTriggers(accordionItemRefs) {
+  const {
+    current: accordionItemElements
+  } = accordionItemRefs;
+  const output = [];
+  for (let i = 0; i < accordionItemElements.length; i += 1) {
+    const section = accordionItemElements[i];
+    if (!isElementDisabled(section)) {
+      const trigger = section == null ? void 0 : section.querySelector('[type="button"], [role="button"]');
+      if (trigger && !isElementDisabled(trigger)) {
+        output.push(trigger);
+      }
+    }
+  }
+  return output;
+}
+const AccordionTrigger = /* @__PURE__ */ React.forwardRef(function AccordionTrigger2(componentProps, forwardedRef) {
+  const {
+    disabled: disabledProp,
+    className,
+    id: idProp,
+    render,
+    nativeButton = true,
+    ...elementProps
+  } = componentProps;
+  const {
+    panelId,
+    open,
+    handleTrigger,
+    disabled: contextDisabled
+  } = useCollapsibleRootContext();
+  const disabled = disabledProp ?? contextDisabled;
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled,
+    focusableWhenDisabled: true,
+    native: nativeButton,
+    composite: true
+  });
+  const {
+    accordionItemRefs,
+    direction,
+    loopFocus,
+    orientation
+  } = useAccordionRootContext();
+  const isRtl = direction === "rtl";
+  const isHorizontal = orientation === "horizontal";
+  const {
+    state,
+    setTriggerId,
+    triggerId: id
+  } = useAccordionItemContext();
+  useIsoLayoutEffect(() => {
+    if (idProp) {
+      setTriggerId(idProp);
+    }
+    return () => {
+      setTriggerId(void 0);
+    };
+  }, [idProp, setTriggerId]);
+  const props = React.useMemo(() => ({
+    "aria-controls": open ? panelId : void 0,
+    "aria-expanded": open,
+    id,
+    tabIndex: 0,
+    onClick: handleTrigger,
+    onKeyDown(event) {
+      if (!SUPPORTED_KEYS.has(event.key)) {
+        return;
+      }
+      stopEvent(event);
+      const triggers = getActiveTriggers(accordionItemRefs);
+      const numOfEnabledTriggers = triggers.length;
+      const lastIndex = numOfEnabledTriggers - 1;
+      let nextIndex = -1;
+      const thisIndex = triggers.indexOf(event.target);
+      function toNext() {
+        if (loopFocus) {
+          nextIndex = thisIndex + 1 > lastIndex ? 0 : thisIndex + 1;
+        } else {
+          nextIndex = Math.min(thisIndex + 1, lastIndex);
+        }
+      }
+      function toPrev() {
+        if (loopFocus) {
+          nextIndex = thisIndex === 0 ? lastIndex : thisIndex - 1;
+        } else {
+          nextIndex = thisIndex - 1;
+        }
+      }
+      switch (event.key) {
+        case ARROW_DOWN:
+          if (!isHorizontal) {
+            toNext();
+          }
+          break;
+        case ARROW_UP:
+          if (!isHorizontal) {
+            toPrev();
+          }
+          break;
+        case ARROW_RIGHT:
+          if (isHorizontal) {
+            if (isRtl) {
+              toPrev();
+            } else {
+              toNext();
+            }
+          }
+          break;
+        case ARROW_LEFT:
+          if (isHorizontal) {
+            if (isRtl) {
+              toNext();
+            } else {
+              toPrev();
+            }
+          }
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = lastIndex;
+          break;
+      }
+      if (nextIndex > -1) {
+        triggers[nextIndex].focus();
+      }
+    }
+  }), [accordionItemRefs, handleTrigger, id, isHorizontal, isRtl, loopFocus, open, panelId]);
+  const element = useRenderElement("button", componentProps, {
+    state,
+    ref: [forwardedRef, buttonRef],
+    props: [props, elementProps, getButtonProps],
+    stateAttributesMapping: triggerOpenStateMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") AccordionTrigger.displayName = "AccordionTrigger";
+export {
+  AccordionTrigger
+};

package/dist/node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/alert-dialog/root/AlertDialogRoot.js ADDED Viewed

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { useRefWithInit } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useRefWithInit.js";
+import { useDialogRoot } from "../../dialog/root/useDialogRoot.js";
+import { useDialogRootContext, DialogRootContext } from "../../dialog/root/DialogRootContext.js";
+import { DialogStore } from "../../dialog/store/DialogStore.js";
+import { jsx } from "react/jsx-runtime";
+function AlertDialogRoot(props) {
+  const {
+    children,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    onOpenChangeComplete,
+    actionsRef,
+    handle,
+    triggerId: triggerIdProp,
+    defaultTriggerId: defaultTriggerIdProp = null
+  } = props;
+  const parentDialogRootContext = useDialogRootContext();
+  const nested = Boolean(parentDialogRootContext);
+  const store = useRefWithInit(() => {
+    return (handle == null ? void 0 : handle.store) ?? new DialogStore({
+      open: defaultOpen,
+      openProp,
+      activeTriggerId: defaultTriggerIdProp,
+      triggerIdProp,
+      modal: true,
+      disablePointerDismissal: true,
+      nested,
+      role: "alertdialog"
+    });
+  }).current;
+  store.useControlledProp("openProp", openProp);
+  store.useControlledProp("triggerIdProp", triggerIdProp);
+  store.useSyncedValue("nested", nested);
+  store.useContextCallback("onOpenChange", onOpenChange);
+  store.useContextCallback("onOpenChangeComplete", onOpenChangeComplete);
+  const payload = store.useState("payload");
+  useDialogRoot({
+    store,
+    actionsRef,
+    parentContext: parentDialogRootContext == null ? void 0 : parentDialogRootContext.store.context
+  });
+  const contextValue = React.useMemo(() => ({
+    store
+  }), [store]);
+  return /* @__PURE__ */ jsx(DialogRootContext.Provider, {
+    value: contextValue,
+    children: typeof children === "function" ? children({
+      payload
+    }) : children
+  });
+}
+export {
+  AlertDialogRoot
+};

package/dist/node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/avatar/fallback/AvatarFallback.js ADDED Viewed

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { useTimeout } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useTimeout.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useAvatarRootContext } from "../root/AvatarRootContext.js";
+import { avatarStateAttributesMapping } from "../root/stateAttributesMapping.js";
+const AvatarFallback = /* @__PURE__ */ React.forwardRef(function AvatarFallback2(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    delay,
+    ...elementProps
+  } = componentProps;
+  const {
+    imageLoadingStatus
+  } = useAvatarRootContext();
+  const [delayPassed, setDelayPassed] = React.useState(delay === void 0);
+  const timeout = useTimeout();
+  React.useEffect(() => {
+    if (delay !== void 0) {
+      timeout.start(delay, () => setDelayPassed(true));
+    }
+    return timeout.clear;
+  }, [timeout, delay]);
+  const state = {
+    imageLoadingStatus
+  };
+  const element = useRenderElement("span", componentProps, {
+    state,
+    ref: forwardedRef,
+    props: elementProps,
+    stateAttributesMapping: avatarStateAttributesMapping,
+    enabled: imageLoadingStatus !== "loaded" && delayPassed
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") AvatarFallback.displayName = "AvatarFallback";
+export {
+  AvatarFallback
+};

package/dist/node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/avatar/image/AvatarImage.js ADDED Viewed

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { useStableCallback } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useStableCallback.js";
+import { useIsoLayoutEffect } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useIsoLayoutEffect.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useAvatarRootContext } from "../root/AvatarRootContext.js";
+import { avatarStateAttributesMapping } from "../root/stateAttributesMapping.js";
+import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
+import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
+import { useImageLoadingStatus } from "./useImageLoadingStatus.js";
+const stateAttributesMapping = {
+  ...avatarStateAttributesMapping,
+  ...transitionStatusMapping
+};
+const AvatarImage = /* @__PURE__ */ React.forwardRef(function AvatarImage2(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    onLoadingStatusChange: onLoadingStatusChangeProp,
+    referrerPolicy,
+    crossOrigin,
+    ...elementProps
+  } = componentProps;
+  const context = useAvatarRootContext();
+  const imageLoadingStatus = useImageLoadingStatus(componentProps.src, {
+    referrerPolicy,
+    crossOrigin
+  });
+  const isVisible = imageLoadingStatus === "loaded";
+  const {
+    mounted,
+    transitionStatus,
+    setMounted
+  } = useTransitionStatus(isVisible);
+  const imageRef = React.useRef(null);
+  const handleLoadingStatusChange = useStableCallback((status) => {
+    onLoadingStatusChangeProp == null ? void 0 : onLoadingStatusChangeProp(status);
+    context.setImageLoadingStatus(status);
+  });
+  useIsoLayoutEffect(() => {
+    if (imageLoadingStatus !== "idle") {
+      handleLoadingStatusChange(imageLoadingStatus);
+    }
+  }, [imageLoadingStatus, handleLoadingStatusChange]);
+  const state = {
+    imageLoadingStatus,
+    transitionStatus
+  };
+  useOpenChangeComplete({
+    open: isVisible,
+    ref: imageRef,
+    onComplete() {
+      if (!isVisible) {
+        setMounted(false);
+      }
+    }
+  });
+  const element = useRenderElement("img", componentProps, {
+    state,
+    ref: [forwardedRef, imageRef],
+    props: elementProps,
+    stateAttributesMapping,
+    enabled: mounted
+  });
+  if (!mounted) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") AvatarImage.displayName = "AvatarImage";
+export {
+  AvatarImage
+};

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { useIsoLayoutEffect } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useIsoLayoutEffect.js";
+import { NOOP } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/empty.js";
+function useImageLoadingStatus(src, {
+  referrerPolicy,
+  crossOrigin
+}) {
+  const [loadingStatus, setLoadingStatus] = React.useState("idle");
+  useIsoLayoutEffect(() => {
+    if (!src) {
+      setLoadingStatus("error");
+      return NOOP;
+    }
+    let isMounted = true;
+    const image = new window.Image();
+    const updateStatus = (status) => () => {
+      if (!isMounted) {
+        return;
+      }
+      setLoadingStatus(status);
+    };
+    setLoadingStatus("loading");
+    image.onload = updateStatus("loaded");
+    image.onerror = updateStatus("error");
+    if (referrerPolicy) {
+      image.referrerPolicy = referrerPolicy;
+    }
+    image.crossOrigin = crossOrigin ?? null;
+    image.src = src;
+    return () => {
+      isMounted = false;
+    };
+  }, [src, crossOrigin, referrerPolicy]);
+  return loadingStatus;
+}
+export {
+  useImageLoadingStatus
+};